diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..a41797f --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,36 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "watch:docs", + "group": "build", + "problemMatcher": [], + "label": "npm: watch:docs", + "detail": "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" + }, + { + "type": "npm", + "script": "watch:lib", + "group": "build", + "problemMatcher": [], + "label": "npm: watch:lib", + "detail": "webpack --watch --config webpack.dev.cjs" + }, + { + "type": "npm", + "script": "serve:docs", + "problemMatcher": [], + "label": "npm: serve:docs", + "detail": "cd ./docs && live-server" + }, + { + "label": "Live Development", + "dependsOn": [ + "npm: watch:docs", + "npm: watch:lib", + "npm: serve:docs" + ] + } + ] +} \ No newline at end of file diff --git a/src/mappings/dimensions.js b/src/mappings/dimensions.js index 20a4c9e..e42fa56 100644 --- a/src/mappings/dimensions.js +++ b/src/mappings/dimensions.js @@ -16,7 +16,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js"; * @param {module:support/easings~interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next. * @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin. * @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa. - * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). + * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). */ export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const getter = () => parseInt(element.style.width) || 0; @@ -54,7 +54,7 @@ export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpd * @param {module:support/easings~interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next. * @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin. * @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa. - * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). + * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). */ export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const getter = () => parseInt(element.style.height) || 0; diff --git a/src/mappings/numeric.js b/src/mappings/numeric.js index 56496af..609ea12 100644 --- a/src/mappings/numeric.js +++ b/src/mappings/numeric.js @@ -69,7 +69,7 @@ export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, up * @param {module:support/easings~interpolator} conf.interpolator The interpolation function to use. * @param {VisUpdateRouter} conf.visUpdateRouter The update manager to map to. * @param {boolean} [conf.reversed] If true, then high amplitudes will be mapped to lower values and vice versa. - * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}} The bin listener that was added. + * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}} The bin listener that was added. */ export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateRouter, reversed = false }) { console.log("mapping numerical..."); diff --git a/src/mappings/text.js b/src/mappings/text.js index ce83ab6..d24e6c0 100644 --- a/src/mappings/text.js +++ b/src/mappings/text.js @@ -15,7 +15,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js"; * @param {Function} rgbaMapConfiguration.interpolator The interpolation function to use. * @param {number} [rgbaMapConfiguration.upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used. * @param {boolean} [rgbaMapConfiguration.reversed=true] If true, then the quieter, the greater the red value. - * @returns {{bin: number, listener: visualizerBinUpdateListener}|{lower: number, upper: number, listener: visualizerRangedUpdateListener}} The ranged listener that was added. + * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The ranged listener that was added. */ export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const rgbaStr = "rgba"; @@ -61,7 +61,7 @@ export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolato * @param {module:support/easings~interpolator} fontSizeMapConfiguration.interpolator The interpolation function to be used to transition from one value to the next. * @param {number} [fontSizeMapConfiguration.upperBin=undefined] The upper bin, or undefined, which results in mapping to a single bin. * @param {boolean} [fontSizeMapConfiguration.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa. - * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). + * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). */ export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const getter = () => parseInt(element.style.fontSize); diff --git a/src/player/MusicPlayer.js b/src/player/MusicPlayer.js index 5182dd5..f95c2fb 100644 --- a/src/player/MusicPlayer.js +++ b/src/player/MusicPlayer.js @@ -1,4 +1,4 @@ -import "../styles/musicPlayer.css"; +import "../styles/music-player.css"; import MusicPlaylist from "./MusicPlaylist.js"; @@ -196,10 +196,15 @@ export default class MusicPlayer { this.addEventListenerToCurrentAudio("play", () => { playButton.classList.add("pause"); + playButton.innerText = "Pause"; }); this.addEventListenerToCurrentAudio("pause", () => { playButton.classList.remove("pause"); + playButton.innerText = "Play"; }); + + playButton.innerText = "Play"; + return playButton; } @@ -210,6 +215,7 @@ export default class MusicPlayer { nextButton.addEventListener("click", () => { this.next(); }); + nextButton.innerText = "Next"; return nextButton; } @@ -220,6 +226,7 @@ export default class MusicPlayer { previousButton.addEventListener("click", () => { this.previous(); }); + previousButton.innerText = "Previous"; return previousButton; } diff --git a/src/player/MusicPlaylist.js b/src/player/MusicPlaylist.js index ca0050b..55466ad 100644 --- a/src/player/MusicPlaylist.js +++ b/src/player/MusicPlaylist.js @@ -206,20 +206,20 @@ export default class MusicPlaylist { generatePlaylistElement() { const element = document.createElement("table"); - element.createTHead().textContent = "Playlist"; + element.createTHead().innerText = "Playlist"; const headers = element.insertRow(); const musicHeader = document.createElement("th"); - musicHeader.textContent = "Music"; + musicHeader.innerText = "Music"; headers.appendChild(musicHeader); const authorHeader = document.createElement("th"); - authorHeader.textContent = "Author"; + authorHeader.innerText = "Author"; headers.appendChild(authorHeader); const insertMusic = (music, musicPos = undefined) => { if (musicPos) musicPos++; const row = element.insertRow(musicPos); - row.insertCell().textContent = music.displayName; - row.insertCell().textContent = music.author; + row.insertCell().innerText = music.displayName; + row.insertCell().innerText = music.author; }; for (const music of this) { insertMusic(music); diff --git a/src/styles/music-player.css b/src/styles/music-player.css new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/musicPlayer.css b/src/styles/musicPlayer.css deleted file mode 100644 index 3f11e3f..0000000 --- a/src/styles/musicPlayer.css +++ /dev/null @@ -1,34 +0,0 @@ -.player.play-btn { - box-sizing: border-box; - height: 48px; - width: 48; - transition: 80ms all ease; - will-change: border-width; - cursor: pointer; - border-color: transparent transparent transparent black; - - border-style: solid; - border-width: 24px 0px 24px 48px; -} - -.player.play-btn.pause { - border-style: double; - border-width: 0px 0px 0px 60px; -} - - -.player.next { - border-style: none; - width: 48px; - height: 48px; -} - -.player.previous { - border-style: none; - width: 48px; - height: 48px; -} - -table.player { - border-collapse: collapse; -} \ No newline at end of file