diff --git a/.vscode/tasks.json b/.vscode/tasks.json index a41797f..7e653e0 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -30,7 +30,8 @@ "npm: watch:docs", "npm: watch:lib", "npm: serve:docs" - ] + ], + "problemMatcher": [] } ] } \ No newline at end of file diff --git a/package.json b/package.json index 1ef038e..d4c7ec4 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "build:dev": "webpack --config webpack.dev.cjs", "test:junit": "mocha tests/** --reporter mocha-junit-reporter --reporter-options mochaFile=./junit/test_results.xml", "test:console": "mocha tests/**", - "watch:docs": "nodemon --watch dist/ --watch tutorials/ --watch src/ --exec 'npm run docs' -e js,mjs,json,htm,html,xml,markdown,md,xhtml --ignore ./tutorials/assets/js/audioshowkit.js", + "watch:docs": "nodemon --watch dist/ --watch tutorials/ --watch src/ --exec 'npm run docs' -e js,mjs,json,htm,html,xml,markdown,md,xhtml,css --ignore ./tutorials/assets/js/audioshowkit.js", "watch:lib": "webpack --watch --config webpack.dev.cjs", "serve:docs": "cd ./docs && live-server", "build": "npm run build:dev", diff --git a/src/player/MusicPlaylist.js b/src/player/MusicPlaylist.js index 55466ad..5871ec4 100644 --- a/src/player/MusicPlaylist.js +++ b/src/player/MusicPlaylist.js @@ -1,8 +1,6 @@ +import "../styles/music-playlist.css"; import Music from "./Music.js"; - - - /** * A playlist that holds a multitude of musics in the form of {@link Music}. */ @@ -206,7 +204,6 @@ export default class MusicPlaylist { generatePlaylistElement() { const element = document.createElement("table"); - element.createTHead().innerText = "Playlist"; const headers = element.insertRow(); const musicHeader = document.createElement("th"); musicHeader.innerText = "Music"; @@ -239,6 +236,8 @@ export default class MusicPlaylist { element.rows[old + 1].classList.remove("active"); element.rows[current + 1].classList.add("active"); }); + + element.classList.add("music-playlist"); return element; } diff --git a/src/styles/music-playlist.css b/src/styles/music-playlist.css new file mode 100644 index 0000000..1a5f157 --- /dev/null +++ b/src/styles/music-playlist.css @@ -0,0 +1,23 @@ +table.music-playlist { + border-collapse: collapse; + background-color: white; + border-width: 2px; + border-style: solid; +} + +table.music-playlist tr th { + border-left-style: none; + border-right-style: none; + background-color: lightgray; +} + + +table.music-playlist tr td { + border-left-style: none; + border-right-style: none; +} + +table.music-playlist .active { + background-color: gray; + color: white; +} diff --git a/tutorials/MusicPlayer.html b/tutorials/MusicPlayer.html index c4a5b35..bf2c759 100644 --- a/tutorials/MusicPlayer.html +++ b/tutorials/MusicPlayer.html @@ -2,12 +2,12 @@ - + + -

Creating a Music Player

One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.

diff --git a/tutorials/MusicPlaylist.html b/tutorials/MusicPlaylist.html index a022a36..6486d7d 100644 --- a/tutorials/MusicPlaylist.html +++ b/tutorials/MusicPlaylist.html @@ -2,7 +2,7 @@ - + diff --git a/tutorials/VisMusicPlayer.html b/tutorials/VisMusicPlayer.html index 4671055..e654c33 100644 --- a/tutorials/VisMusicPlayer.html +++ b/tutorials/VisMusicPlayer.html @@ -2,7 +2,7 @@ - + diff --git a/tutorials/assets/css/main.css b/tutorials/assets/css/main.css new file mode 100644 index 0000000..f4c52c8 --- /dev/null +++ b/tutorials/assets/css/main.css @@ -0,0 +1,14 @@ +@import url("./prism.css"); + +.result { + background-repeat: repeat; + background-image: url("../textures/45degree_fabric.webp"); + padding: 1.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 2.5rem; + border-radius: 5px; + box-shadow: inset; +} \ No newline at end of file diff --git a/tutorials/assets/textures/45degree_fabric.webp b/tutorials/assets/textures/45degree_fabric.webp new file mode 100644 index 0000000..a766599 Binary files /dev/null and b/tutorials/assets/textures/45degree_fabric.webp differ