From c3471a2f95afded8d511dbc2c8a2fcdebd521e92 Mon Sep 17 00:00:00 2001
From: Tom Hazledine <tom@tomhazledine.com>
Date: Tue, 13 Feb 2024 11:52:32 +0000
Subject: [PATCH 1/4] refactoring markup and utils (and tests)

---
 src/js/Picobel.js                             | 250 +-----------------
 src/js/PicobelData.js                         |  52 ----
 src/js/PicobelMarkup.js                       | 110 --------
 src/js/audio-functions.js                     | 142 ++++++++++
 src/js/data.js                                |  48 ++++
 .../PicobelData.test.js => js/data.test.js}   |  20 +-
 src/js/events.js                              |  76 ++++++
 src/js/helpers.js                             |  63 -----
 src/js/markup/index.js                        |  97 +++++++
 src/js/markup/markup.test.js                  | 104 ++++++++
 src/js/markup/slider.test.js                  |  30 +++
 src/js/markup/utils.test.js                   |  25 ++
 src/js/utils/helpers.js                       |  35 +++
 src/js/utils/helpers.test.js                  |  30 +++
 src/js/web-component.js                       |   1 -
 src/tests/PicobelMarkup.test.js               | 163 ------------
 src/tests/helpers.test.js                     |  64 -----
 17 files changed, 605 insertions(+), 705 deletions(-)
 delete mode 100644 src/js/PicobelData.js
 delete mode 100644 src/js/PicobelMarkup.js
 create mode 100644 src/js/audio-functions.js
 create mode 100644 src/js/data.js
 rename src/{tests/PicobelData.test.js => js/data.test.js} (87%)
 create mode 100644 src/js/events.js
 delete mode 100644 src/js/helpers.js
 create mode 100644 src/js/markup/index.js
 create mode 100644 src/js/markup/markup.test.js
 create mode 100644 src/js/markup/slider.test.js
 create mode 100644 src/js/markup/utils.test.js
 create mode 100644 src/js/utils/helpers.js
 create mode 100644 src/js/utils/helpers.test.js
 delete mode 100644 src/tests/PicobelMarkup.test.js
 delete mode 100644 src/tests/helpers.test.js

diff --git a/src/js/Picobel.js b/src/js/Picobel.js
index 39709aa..5ef483f 100644
--- a/src/js/Picobel.js
+++ b/src/js/Picobel.js
@@ -1,7 +1,8 @@
-import _helpers from "./helpers";
 import { parseOptions } from "./PicobelSetup";
-import PicobelData from "./PicobelData";
-import PicobelMarkup from "./PicobelMarkup";
+import { findAudio, getRawData } from "./data";
+import { generateMarkup, elementHooks } from "./markup";
+import { _setupLocalListeners } from "./events";
+import { canplaythrough } from "./audio-functions";
 
 /**
  * ---------------------------------------------------------------------------
@@ -48,243 +49,13 @@ export const picobel = (rawOptions = {}) => {
         });
     };
 
-    const _setupLocalListeners = nodes =>
-        nodes.map((node, key) => {
-            // Audio event listeners
-            node.addEventListener(
-                "timeupdate",
-                PicobelAudio.triggerUpdateProgress,
-                false
-            );
-            node.addEventListener(
-                "canplaythrough",
-                PicobelAudio.canplaythrough,
-                false
-            );
-            node.addEventListener(
-                "error",
-                () => PicobelAudio.errors(key),
-                false
-            );
-
-            // DOM interaction event listeners
-            if (node.elements.playPauseButton) {
-                node.elements.playPauseButton.addEventListener(
-                    "click",
-                    PicobelAudio.triggerPlayPauseAudio,
-                    false
-                );
-            }
-            if (node.elements.progressBar) {
-                node.elements.progressBar.addEventListener(
-                    "input",
-                    PicobelAudio.sliderScrub,
-                    false
-                );
-            }
-            if (node.elements.progressBar) {
-                node.elements.progressBar.addEventListener(
-                    "focus",
-                    e => PicobelAudio.sliderFocus(e, true),
-                    false
-                );
-            }
-            if (node.elements.progressBar) {
-                node.elements.progressBar.addEventListener(
-                    "blur",
-                    e => PicobelAudio.sliderFocus(e, false),
-                    false
-                );
-            }
-            if (node.elements.volumeControl) {
-                node.elements.volumeControl.addEventListener(
-                    "input",
-                    PicobelAudio.volume,
-                    false
-                );
-            }
-            if (node.elements.volumeControl) {
-                node.elements.volumeControl.addEventListener(
-                    "focus",
-                    e => PicobelAudio.volumeFocus(e, true),
-                    false
-                );
-            }
-            if (node.elements.volumeControl) {
-                node.elements.volumeControl.addEventListener(
-                    "blur",
-                    e => PicobelAudio.volumeFocus(e, false),
-                    false
-                );
-            }
-            if (node.elements.muteButton) {
-                node.elements.muteButton.addEventListener(
-                    "click",
-                    PicobelAudio.muteUnmuteAudio,
-                    false
-                );
-            }
-            return node;
-        });
-
-    const PicobelAudio = {
-        pauseAll: () => {
-            state.audioNodes.forEach(node => {
-                PicobelAudio.pause(node);
-            });
-        },
-        triggerPlayPauseAudio: event => {
-            let index = _helpers.findParentIndex(event.srcElement);
-            let node = state.audioNodes.find(node => node.key == index);
-            PicobelAudio.playPauseAudio(node);
-        },
-        playPauseAudio: node => {
-            if (node.paused || node.currentTime === 0) {
-                PicobelAudio.pauseAll();
-                PicobelAudio.play(node);
-            } else {
-                PicobelAudio.pause(node);
-            }
-        },
-        play: node => {
-            node.play();
-            const button = node.elements.playPauseButton;
-            const buttonText = node.elements.playPauseButtonText;
-            button.classList.remove("paused");
-            buttonText.innerHTML = "Pause";
-            button.classList.add("playing");
-        },
-        pause: node => {
-            node.pause();
-            const button = node.elements.playPauseButton;
-            const buttonText = node.elements.playPauseButtonText;
-            button.classList.remove("playing");
-            buttonText.innerHTML = "Play";
-            button.classList.add("paused");
-        },
-        stop: node => {
-            node.pause();
-            const button = node.elements.playPauseButton;
-            const buttonText = node.elements.playPauseButtonText;
-            button.classList.remove("playing");
-            buttonText.innerHTML = "Play";
-        },
-        triggerUpdateProgress: event =>
-            PicobelAudio.updateProgress(event.srcElement),
-
-        updateProgress: node => {
-            let progress = node.currentTime;
-            let duration = node.duration;
-            if (node.elements.playTimer) {
-                let progressParsed = _helpers.parseTime(progress);
-                node.elements.playTimer.innerHTML = progressParsed;
-            }
-            if (progress >= duration) {
-                PicobelAudio.stop(node);
-            }
-            let progressPercent = ((progress / duration) * 100).toFixed(2);
-            if (node.elements.progressBar) {
-                node.elements.progressBar.value = progressPercent;
-                node.elements.indicator.style.width = progressPercent + "%";
-                node.elements.playhead.style.left = progressPercent + "%";
-            }
-        },
-        canplaythrough: function () {
-            PicobelMarkup.setLengthDisplay(this);
-            this.elements.wrapper.classList.remove("loading");
-            let meta = PicobelData.getMeta(this);
-            PicobelMarkup.setMeta(meta, this.elements);
-        },
-        errors: i => {
-            const { elements } = state.audioNodes[i];
-            elements.wrapper.classList.add("error");
-            elements.wrapper.classList.remove("loading");
-            elements.wrapper.innerHTML = `<div class="error" style="display:flex;height: 100%;align-items:  center;justify-content: center;"><span class="error__icon"></span><span class="error__message">Error loading audio file</span></div>`;
-        },
-        sliderScrub: event => {
-            let index = _helpers.findParentIndex(event.srcElement);
-            let activeNode = state.audioNodes.find(node => node.key == index);
-            let duration = activeNode.duration;
-            let targetTime = duration * (event.srcElement.value / 100);
-            targetTime = targetTime.toFixed(2);
-            activeNode.currentTime = targetTime;
-            PicobelAudio.updateProgress(activeNode);
-        },
-        sliderFocus: (event, focus) => {
-            let index = _helpers.findParentIndex(event.srcElement);
-            let node = state.audioNodes.find(node => node.key == index);
-            node.elements.progressWrapper.classList.toggle("focus", focus);
-        },
-        volume: event => {
-            let index = _helpers.findParentIndex(event.srcElement);
-            let node = state.audioNodes.find(node => node.key == index);
-            let volume = event.srcElement.value;
-            node.tmpVolume = node.volume;
-            node.mute = false;
-            PicobelAudio.mute(node);
-            PicobelAudio.setVolume(node, volume);
-        },
-        volumeFocus: (event, focus) => {
-            let index = _helpers.findParentIndex(event.srcElement);
-            let node = state.audioNodes.find(node => node.key == index);
-            node.elements.volumeWrapper.classList.toggle("focus", focus);
-        },
-        setVolume: (node, value) => {
-            let valueMapped = value * 10;
-            let volumePercent = value * 100;
-            node.volume = value;
-            console.log;
-            if (node.elements.volumeDisplay) {
-                node.elements.volumeDisplay.innerHTML = valueMapped;
-            }
-            if (node.elements.volumeControl) {
-                node.elements.volumeControl.value = value;
-            }
-            if (node.elements.volumeIndicator) {
-                node.elements.volumeIndicator.style.width = volumePercent + "%";
-            }
-            if (node.elements.volumePlayhead) {
-                node.elements.volumePlayhead.style.left = volumePercent + "%";
-            }
-        },
-        muteUnmuteAudio: event => {
-            let index = _helpers.findParentIndex(event.srcElement);
-            let node = state.audioNodes.find(node => node.key == index);
-            node.mute = !node.mute;
-            PicobelAudio.mute(node);
-        },
-        mute: node => {
-            const button = node.elements.muteButton;
-
-            if (node.mute) {
-                node.tmpVolume = node.volume;
-                PicobelAudio.setVolume(node, 0);
-                button.classList.add("muted");
-                button.classList.remove("unmuted");
-                button.innerHTML = "Unmute";
-            } else {
-                if (
-                    typeof node.tmpVolume != "undefined" &&
-                    node.tmpVolume > 0
-                ) {
-                    PicobelAudio.setVolume(node, node.tmpVolume);
-                } else {
-                    PicobelAudio.setVolume(node, 1);
-                }
-                button.classList.remove("muted");
-                button.classList.add("unmuted");
-                button.innerHTML = "Mute";
-            }
-        }
-    };
-
     // Get audio elements from page, and save their details to state.
-    state.audioNodes = PicobelData.findAudio(options.context);
+    state.audioNodes = findAudio(options.context);
 
-    state.audioNodes = PicobelData.getRawData(state.audioNodes);
+    state.audioNodes = getRawData(state.audioNodes);
 
     // Build markup for each element, based on `components`
-    const markup = PicobelMarkup.generateMarkup(
+    const markup = generateMarkup(
         state.audioNodes,
         state.components,
         state.theme
@@ -294,7 +65,7 @@ export const picobel = (rawOptions = {}) => {
     _replaceNodes(state.audioNodes, markup);
 
     // Save new DOM elements to our node list
-    state.audioNodes = PicobelMarkup.elementHooks(
+    state.audioNodes = elementHooks(
         state.audioNodes,
         options.context,
         state.theme
@@ -307,12 +78,11 @@ export const picobel = (rawOptions = {}) => {
     state.audioNodes.forEach(node => {
         const { readyState } = node;
         if (readyState === 4) {
-            PicobelAudio.canplaythrough.call(node);
+            canplaythrough(node);
         }
     });
 
     return {
-        state,
-        PicobelAudio
+        state
     };
 };
diff --git a/src/js/PicobelData.js b/src/js/PicobelData.js
deleted file mode 100644
index 6c71dcd..0000000
--- a/src/js/PicobelData.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import _helpers from "./helpers";
-
-const PicobelData = {
-    // Return an array of all the <audio> elements found on the page.
-    findAudio: context => {
-        // Get all the <audio> occurrences in the page.
-        let audioElements = context.getElementsByTagName("audio");
-        // Save our audioElements as an array (so we can manipulate the DOM but
-        // still access our items).
-        let items = [].slice.call(audioElements);
-        return items;
-    },
-
-    // Build an array of classes to add to each new "player" element
-    prepareClasses: (index, classes, theme) => {
-        const classesString = `picobel loading picobel--index-${index} ${classes}`;
-        const classesArray = classesString.trim().split(" ");
-        return [...classesArray, theme];
-    },
-
-    // Get the url for each audio file we want to load [using elements found by findAudio()]
-    getRawData: nodes =>
-        nodes.map((node, key) => {
-            node.key = key;
-            node.mute = false;
-            node.tmpVolume = 1;
-            return node;
-        }),
-
-    // Get info about the audio track
-    getMeta: item => {
-        let meta = {};
-        // Get the filename and type
-        meta.url = item.currentSrc;
-        meta.fileType = _helpers.getFileType(meta.url);
-        meta.fileName = _helpers.getFileName(meta.url);
-        // If there is a valid title, get that title, otherwise get the file name.
-        meta.title =
-            item.title && item.title !== ""
-                ? item.title
-                : `${meta.fileName}.${meta.fileType}`;
-        // If there is a valid 'artist', get the artist name.
-        if (item.dataset) {
-            meta.artist = item.dataset.artist ? item.dataset.artist : false;
-        } else {
-            meta.artist = false;
-        }
-        return meta;
-    }
-};
-
-export default PicobelData;
diff --git a/src/js/PicobelMarkup.js b/src/js/PicobelMarkup.js
deleted file mode 100644
index da38a7b..0000000
--- a/src/js/PicobelMarkup.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import _helpers from "./helpers";
-import PicobelData from "./PicobelData";
-import * as componentConstructors from "./markup/components";
-import { createElement, buildComponents } from "./markup/utils";
-
-export const PicobelMarkup = {
-    // Set the value of the song-length display
-    setLengthDisplay: item => {
-        let duration = _helpers.parseTime(item.duration);
-        if (item.elements.durationDisplay) {
-            item.elements.durationDisplay.innerHTML = duration;
-        }
-        return item;
-    },
-
-    setMeta: (meta, elements) => {
-        if (meta.artist && elements.artistDisplay) {
-            elements.artistDisplay.innerHTML = meta.artist;
-        }
-        if (elements.titleDisplay) {
-            elements.titleDisplay.innerHTML = meta.title;
-        }
-        return elements;
-    },
-
-    generateMarkup: (nodes = [], components, namespace) => {
-        const markupArray = nodes.map(node => {
-            // Create a container for our new player
-            const newPlayer = createElement("div");
-
-            // Set the relevant classes on the new player element
-            const classes = PicobelData.prepareClasses(
-                node.key,
-                node.className,
-                namespace
-            );
-            newPlayer.classList.add(...classes);
-
-            // Set song index attribute
-            newPlayer.setAttribute("data-picobel-index", node.key);
-
-            // Create a loading indicator
-            let loading = createElement("div", `${namespace}__loader`);
-            newPlayer.appendChild(loading);
-
-            // Add the components to the player in the order they are listed
-            return buildComponents({
-                key: node.key,
-                container: newPlayer,
-                components,
-                namespace
-            });
-        });
-
-        return markupArray;
-    },
-
-    elementHooks: (nodes, context, namespace) =>
-        nodes.map(node => {
-            let wrapper = context.querySelector(
-                `[data-picobel-index='${node.key}']`
-            );
-            node.elements = {
-                wrapper: wrapper,
-                playPauseButton: wrapper.querySelector(
-                    `.${namespace}__play-pause`
-                ),
-                playPauseButtonText: wrapper.querySelector(
-                    `.${namespace}__play-pause__text`
-                ),
-                muteButton: wrapper.querySelector(`.${namespace}__mute`),
-                playTimer: wrapper.querySelector(`.${namespace}__timer`),
-                durationDisplay: wrapper.querySelector(
-                    `.${namespace}__duration`
-                ),
-                titleDisplay: wrapper.querySelector(`.${namespace}__title`),
-                artistDisplay: wrapper.querySelector(`.${namespace}__artist`),
-                progressWrapper: wrapper.querySelector(
-                    `.${namespace}__progress-slider__replacement`
-                ),
-                progressBar: wrapper.querySelector(
-                    `.${namespace}__progress-slider__range`
-                ),
-                playhead: wrapper.querySelector(
-                    `.${namespace}__progress-slider__playhead`
-                ),
-                indicator: wrapper.querySelector(
-                    `.${namespace}__progress-slider__indicator`
-                ),
-                volumeWrapper: wrapper.querySelector(
-                    `.${namespace}__volume-slider__replacement`
-                ),
-                volumeControl: wrapper.querySelector(
-                    `.${namespace}__volume-slider__range`
-                ),
-                volumeDisplay: wrapper.querySelector(
-                    `.${namespace}__volume-label-value`
-                ),
-                volumeIndicator: wrapper.querySelector(
-                    `.${namespace}__volume-slider__indicator`
-                ),
-                volumePlayhead: wrapper.querySelector(
-                    `.${namespace}__volume-slider__playhead`
-                )
-            };
-            return node;
-        })
-};
-
-export default PicobelMarkup;
diff --git a/src/js/audio-functions.js b/src/js/audio-functions.js
new file mode 100644
index 0000000..8c55e4e
--- /dev/null
+++ b/src/js/audio-functions.js
@@ -0,0 +1,142 @@
+import { setLengthDisplay, setMeta } from "./markup";
+import { getMeta } from "./data";
+import { parseTime } from "./utils/helpers";
+
+export const pauseAll = nodes =>
+    nodes.forEach(node => {
+        pause(node);
+    });
+
+export const playPauseAudio = (node, nodes) => {
+    if (node.paused || node.currentTime === 0) {
+        pauseAll(nodes);
+        play(node);
+    } else {
+        pause(node);
+    }
+};
+
+export const play = node => {
+    node.play();
+    const button = node.elements.playPauseButton;
+    const buttonText = node.elements.playPauseButtonText;
+    button.classList.remove("paused");
+    buttonText.innerHTML = "Pause";
+    button.classList.add("playing");
+};
+
+export const pause = node => {
+    node.pause();
+    const button = node.elements.playPauseButton;
+    const buttonText = node.elements.playPauseButtonText;
+    button.classList.remove("playing");
+    buttonText.innerHTML = "Play";
+    button.classList.add("paused");
+};
+
+export const stop = node => {
+    node.pause();
+    const button = node.elements.playPauseButton;
+    const buttonText = node.elements.playPauseButtonText;
+    button.classList.remove("playing");
+    buttonText.innerHTML = "Play";
+};
+
+export const triggerUpdateProgress = event => updateProgress(event.srcElement);
+
+export const updateProgress = node => {
+    let progress = node.currentTime;
+    let duration = node.duration;
+    if (node.elements.playTimer) {
+        let progressParsed = parseTime(progress);
+        node.elements.playTimer.innerHTML = progressParsed;
+    }
+    if (progress >= duration) {
+        stop(node);
+    }
+    let progressPercent = ((progress / duration) * 100).toFixed(2);
+    if (node.elements.progressBar) {
+        node.elements.progressBar.value = progressPercent;
+        node.elements.indicator.style.width = progressPercent + "%";
+        node.elements.playhead.style.left = progressPercent + "%";
+    }
+};
+
+export const canplaythrough = node => {
+    setLengthDisplay(node);
+    node.elements.wrapper.classList.remove("loading");
+    let meta = getMeta(node);
+    setMeta(meta, node.elements);
+};
+
+export const errors = node => {
+    node.elements.wrapper.classList.add("error");
+    node.elements.wrapper.classList.remove("loading");
+    node.elements.wrapper.innerHTML = `<div class="error" style="display:flex;height: 100%;align-items:  center;justify-content: center;"><span class="error__icon"></span><span class="error__message">Error loading audio file</span></div>`;
+};
+
+export const sliderScrub = (event, node) => {
+    let duration = node.duration;
+    let targetTime = duration * (event.srcElement.value / 100);
+    targetTime = targetTime.toFixed(2);
+    node.currentTime = targetTime;
+    updateProgress(node);
+};
+
+export const sliderFocus = (node, focus) =>
+    node.elements.progressWrapper.classList.toggle("focus", focus);
+
+export const volume = (event, node) => {
+    let volume = event.srcElement.value;
+    node.tmpVolume = node.volume;
+    node.mute = false;
+    mute(node);
+    setVolume(node, volume);
+};
+
+export const volumeFocus = (node, focus) =>
+    node.elements.volumeWrapper.classList.toggle("focus", focus);
+
+export const setVolume = (node, value) => {
+    let valueMapped = value * 10;
+    let volumePercent = value * 100;
+    node.volume = value;
+    if (node.elements.volumeDisplay) {
+        node.elements.volumeDisplay.innerHTML = valueMapped;
+    }
+    if (node.elements.volumeControl) {
+        node.elements.volumeControl.value = value;
+    }
+    if (node.elements.volumeIndicator) {
+        node.elements.volumeIndicator.style.width = volumePercent + "%";
+    }
+    if (node.elements.volumePlayhead) {
+        node.elements.volumePlayhead.style.left = volumePercent + "%";
+    }
+};
+
+export const muteUnmuteAudio = node => {
+    node.mute = !node.mute;
+    mute(node);
+};
+
+export const mute = node => {
+    const button = node.elements.muteButton;
+
+    if (node.mute) {
+        node.tmpVolume = node.volume;
+        setVolume(node, 0);
+        button.classList.add("muted");
+        button.classList.remove("unmuted");
+        button.innerHTML = "Unmute";
+    } else {
+        if (typeof node.tmpVolume != "undefined" && node.tmpVolume > 0) {
+            setVolume(node, node.tmpVolume);
+        } else {
+            setVolume(node, 1);
+        }
+        button.classList.remove("muted");
+        button.classList.add("unmuted");
+        button.innerHTML = "Mute";
+    }
+};
diff --git a/src/js/data.js b/src/js/data.js
new file mode 100644
index 0000000..6209e83
--- /dev/null
+++ b/src/js/data.js
@@ -0,0 +1,48 @@
+import { getFileType, getFileName } from "./utils/helpers";
+
+// Return an array of all the <audio> elements found on the page.
+export const findAudio = context => {
+    // Get all the <audio> occurrences in the page.
+    let audioElements = context.getElementsByTagName("audio");
+    // Save our audioElements as an array (so we can manipulate the DOM but
+    // still access our items).
+    let items = [].slice.call(audioElements);
+    return items;
+};
+
+// Build an array of classes to add to each new "player" element
+export const prepareClasses = (index, classes, theme) => {
+    const classesString = `picobel loading picobel--index-${index} ${classes}`;
+    const classesArray = classesString.trim().split(" ");
+    return [...classesArray, theme];
+};
+
+// Get the url for each audio file we want to load [using elements found by findAudio()]
+export const getRawData = nodes =>
+    nodes.map((node, key) => {
+        node.key = key;
+        node.mute = false;
+        node.tmpVolume = 1;
+        return node;
+    });
+
+// Get info about the audio track
+export const getMeta = item => {
+    let meta = {};
+    // Get the filename and type
+    meta.url = item.currentSrc;
+    meta.fileType = getFileType(meta.url);
+    meta.fileName = getFileName(meta.url);
+    // If there is a valid title, get that title, otherwise get the file name.
+    meta.title =
+        item.title && item.title !== ""
+            ? item.title
+            : `${meta.fileName}.${meta.fileType}`;
+    // If there is a valid 'artist', get the artist name.
+    if (item.dataset) {
+        meta.artist = item.dataset.artist ? item.dataset.artist : false;
+    } else {
+        meta.artist = false;
+    }
+    return meta;
+};
diff --git a/src/tests/PicobelData.test.js b/src/js/data.test.js
similarity index 87%
rename from src/tests/PicobelData.test.js
rename to src/js/data.test.js
index 993c3e0..ea2900f 100644
--- a/src/tests/PicobelData.test.js
+++ b/src/js/data.test.js
@@ -1,4 +1,4 @@
-import PicobelData from "../js/PicobelData";
+import { findAudio, getMeta, getRawData, prepareClasses } from "./data";
 
 const TEST_DOM = `
     <!DOCTYPE html>
@@ -45,20 +45,16 @@ describe("data handling", () => {
     it("finds the audio nodes", () => {
         // With test DOM:
         document.body.innerHTML = TEST_DOM;
-        let nodes = PicobelData.findAudio(document);
+        let nodes = findAudio(document);
         expect(nodes.length).toEqual(2);
         // With empty DOM:
         document.body.innerHTML = "";
-        nodes = PicobelData.findAudio(document);
+        nodes = findAudio(document);
         expect(nodes.length).toEqual(0);
     });
 
     it("creates an array of class names", () => {
-        let classList = PicobelData.prepareClasses(
-            0,
-            "some classes",
-            "themeName"
-        );
+        let classList = prepareClasses(0, "some classes", "themeName");
 
         expect(Array.isArray(classList)).toEqual(true);
         expect(classList.length).toEqual(6);
@@ -69,7 +65,7 @@ describe("data handling", () => {
         expect(classList).toContain("classes");
         expect(classList).toContain("themeName");
 
-        classList = PicobelData.prepareClasses(2, "", "something");
+        classList = prepareClasses(2, "", "something");
         expect(Array.isArray(classList)).toEqual(true);
         expect(classList.length).toEqual(4);
         expect(classList).toContain("picobel");
@@ -79,7 +75,7 @@ describe("data handling", () => {
     });
 
     it("sets the correct key for each node", () => {
-        let nodes = PicobelData.getRawData(TEST_NODES);
+        let nodes = getRawData(TEST_NODES);
         expect(nodes.length).toEqual(TEST_NODES.length);
         nodes.map((node, key) => {
             expect(node.key).toEqual(key);
@@ -87,7 +83,7 @@ describe("data handling", () => {
     });
 
     it("sets the starting values", () => {
-        let nodes = PicobelData.getRawData(TEST_NODES);
+        let nodes = getRawData(TEST_NODES);
         expect(nodes.length).toEqual(3);
         nodes.map((node, key) => {
             expect(node.mute).toEqual(false);
@@ -98,7 +94,7 @@ describe("data handling", () => {
     it("sets the correct meta values", () => {
         // Adds meta to every node (even if the node is missing the prerequisits)
         let newNodes = TEST_NODES.map(node => {
-            let meta = PicobelData.getMeta(node);
+            let meta = getMeta(node);
             expect(meta).toHaveProperty("artist");
             expect(meta).toHaveProperty("title");
             return meta;
diff --git a/src/js/events.js b/src/js/events.js
new file mode 100644
index 0000000..0fccade
--- /dev/null
+++ b/src/js/events.js
@@ -0,0 +1,76 @@
+import * as PicobelAudio from "./audio-functions";
+
+export const _setupLocalListeners = nodes =>
+    nodes.map(node => {
+        // Audio event listeners
+        node.addEventListener(
+            "timeupdate",
+            PicobelAudio.triggerUpdateProgress,
+            false
+        );
+        node.addEventListener(
+            "canplaythrough",
+            () => PicobelAudio.canplaythrough(node),
+            false
+        );
+        node.addEventListener("error", () => PicobelAudio.errors(node), false);
+
+        // DOM interaction event listeners
+        if (node.elements.playPauseButton) {
+            node.elements.playPauseButton.addEventListener(
+                "click",
+                () => PicobelAudio.playPauseAudio(node, nodes),
+                false
+            );
+        }
+        if (node.elements.progressBar) {
+            node.elements.progressBar.addEventListener(
+                "input",
+                e => PicobelAudio.sliderScrub(e, node),
+                false
+            );
+        }
+        if (node.elements.progressBar) {
+            node.elements.progressBar.addEventListener(
+                "focus",
+                () => PicobelAudio.sliderFocus(node, true),
+                false
+            );
+        }
+        if (node.elements.progressBar) {
+            node.elements.progressBar.addEventListener(
+                "blur",
+                () => PicobelAudio.sliderFocus(node, false),
+                false
+            );
+        }
+        if (node.elements.volumeControl) {
+            node.elements.volumeControl.addEventListener(
+                "input",
+                e => PicobelAudio.volume(e, node),
+                false
+            );
+        }
+        if (node.elements.volumeControl) {
+            node.elements.volumeControl.addEventListener(
+                "focus",
+                () => PicobelAudio.volumeFocus(node, true),
+                false
+            );
+        }
+        if (node.elements.volumeControl) {
+            node.elements.volumeControl.addEventListener(
+                "blur",
+                () => PicobelAudio.volumeFocus(node, false),
+                false
+            );
+        }
+        if (node.elements.muteButton) {
+            node.elements.muteButton.addEventListener(
+                "click",
+                () => PicobelAudio.muteUnmuteAudio(node),
+                false
+            );
+        }
+        return node;
+    });
diff --git a/src/js/helpers.js b/src/js/helpers.js
deleted file mode 100644
index 11aae1c..0000000
--- a/src/js/helpers.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * -----------------------------
- * HELPERS
- *
- * These are basic utilities to
- * parse data, add/remove/toggle
- * classes etc.
- * -----------------------------
- */
-const _helpers = {
-    // Convert seconds into minutes-and-seconds (MMSS) format
-    parseTime: seconds => {
-        let hours = Math.floor(seconds / 3600);
-
-        let mins = Math.floor((seconds % 3600) / 60)
-            .toFixed(0)
-            .toString();
-
-        let secs = Math.floor((seconds % 3600) % 60)
-            .toFixed(0)
-            .toString();
-
-        // Left-pad seconds string if needed
-        secs = secs >= 10 ? secs : `0${secs}`;
-
-        let parsedTime = `${mins}:${secs}`;
-
-        if (hours > 0) {
-            // Left-pad minutes string if needed
-            mins = mins >= 10 ? mins : `0${mins}`;
-            parsedTime = `${hours}:${mins}:${secs}`;
-        }
-
-        return parsedTime;
-    },
-
-    // Get File Type
-    getFileType: string => string.substr((~-string.lastIndexOf(".") >>> 0) + 2),
-
-    // Get File Name
-    getFileName: string => {
-        let fullFileName = string.replace(/^.*[\\\/]/, "");
-        let withNoExtension = fullFileName.split(".")[0];
-        return withNoExtension;
-    },
-
-    // Find parent index (recursively climbs through parents until it finds a
-    // valid index or runs out of elements)
-    findParentIndex: startingElement => {
-        if (typeof startingElement.dataset.picobelIndex !== "undefined") {
-            return startingElement.dataset.picobelIndex;
-        }
-        if (
-            typeof startingElement.parentNode !== "undefined" &&
-            typeof startingElement.parentNode.dataset !== "undefined"
-        ) {
-            return _helpers.findParentIndex(startingElement.parentNode);
-        }
-        return false;
-    }
-};
-
-export default _helpers;
diff --git a/src/js/markup/index.js b/src/js/markup/index.js
new file mode 100644
index 0000000..fa43b8b
--- /dev/null
+++ b/src/js/markup/index.js
@@ -0,0 +1,97 @@
+import { parseTime } from "../utils/helpers";
+import { prepareClasses } from "../data";
+import { createElement, buildComponents } from "./utils";
+
+// Set the value of the song-length display
+export const setLengthDisplay = node => {
+    let duration = parseTime(node.duration);
+    if (node.elements.durationDisplay) {
+        node.elements.durationDisplay.innerHTML = duration;
+    }
+    return node;
+};
+
+export const setMeta = (meta, elements) => {
+    if (meta.artist && elements.artistDisplay) {
+        elements.artistDisplay.innerHTML = meta.artist;
+    }
+    if (elements.titleDisplay) {
+        elements.titleDisplay.innerHTML = meta.title;
+    }
+    return elements;
+};
+
+export const generateMarkup = (nodes = [], components, namespace) => {
+    const markupArray = nodes.map(node => {
+        // Create a container for our new player
+        const newPlayer = createElement("div");
+
+        // Set the relevant classes on the new player element
+        const classes = prepareClasses(node.key, node.className, namespace);
+        newPlayer.classList.add(...classes);
+
+        // Set song index attribute
+        newPlayer.setAttribute("data-picobel-index", node.key);
+
+        // Create a loading indicator
+        let loading = createElement("div", `${namespace}__loader`);
+        newPlayer.appendChild(loading);
+
+        // Add the components to the player in the order they are listed
+        return buildComponents({
+            key: node.key,
+            container: newPlayer,
+            components,
+            namespace
+        });
+    });
+
+    return markupArray;
+};
+
+export const elementHooks = (nodes, context, namespace) =>
+    nodes.map(node => {
+        let wrapper = context.querySelector(
+            `[data-picobel-index='${node.key}']`
+        );
+        node.elements = {
+            wrapper: wrapper,
+            playPauseButton: wrapper.querySelector(`.${namespace}__play-pause`),
+            playPauseButtonText: wrapper.querySelector(
+                `.${namespace}__play-pause__text`
+            ),
+            muteButton: wrapper.querySelector(`.${namespace}__mute`),
+            playTimer: wrapper.querySelector(`.${namespace}__timer`),
+            durationDisplay: wrapper.querySelector(`.${namespace}__duration`),
+            titleDisplay: wrapper.querySelector(`.${namespace}__title`),
+            artistDisplay: wrapper.querySelector(`.${namespace}__artist`),
+            progressWrapper: wrapper.querySelector(
+                `.${namespace}__progress-slider__replacement`
+            ),
+            progressBar: wrapper.querySelector(
+                `.${namespace}__progress-slider__range`
+            ),
+            playhead: wrapper.querySelector(
+                `.${namespace}__progress-slider__playhead`
+            ),
+            indicator: wrapper.querySelector(
+                `.${namespace}__progress-slider__indicator`
+            ),
+            volumeWrapper: wrapper.querySelector(
+                `.${namespace}__volume-slider__replacement`
+            ),
+            volumeControl: wrapper.querySelector(
+                `.${namespace}__volume-slider__range`
+            ),
+            volumeDisplay: wrapper.querySelector(
+                `.${namespace}__volume-label-value`
+            ),
+            volumeIndicator: wrapper.querySelector(
+                `.${namespace}__volume-slider__indicator`
+            ),
+            volumePlayhead: wrapper.querySelector(
+                `.${namespace}__volume-slider__playhead`
+            )
+        };
+        return node;
+    });
diff --git a/src/js/markup/markup.test.js b/src/js/markup/markup.test.js
new file mode 100644
index 0000000..55170ca
--- /dev/null
+++ b/src/js/markup/markup.test.js
@@ -0,0 +1,104 @@
+import { generateMarkup, setLengthDisplay, setMeta } from "./";
+
+const EXPECTED_COMPONENTS = [
+    "playPause",
+    "progress",
+    "volume",
+    "download",
+    "mute",
+    "duration",
+    "timer"
+];
+
+// Create some test nodes to trigger markup generation.
+const TEST_NODES = [
+    {
+        key: 0,
+        preload: "metadata",
+        url: "http://audio.eatenbymonsters.com/reviews/daughter/human.mp3",
+        className: "customPlayer",
+        duration: 211,
+        elements: {
+            durationDisplay: [{ innerHTML: "" }],
+            artistDisplay: [{ innerHTML: "" }],
+            titleDisplay: [{ innerHTML: "" }]
+        }
+    },
+    {
+        key: 1,
+        preload: "metadata",
+        url: "http://audio.eatenbymonsters.com/reviews/coldWarKids/lostThatEasy.mp3",
+        className: "",
+        duration: 1345,
+        elements: {
+            durationDisplay: [{ innerHTML: "" }],
+            artistDisplay: [{ innerHTML: "" }],
+            titleDisplay: [{ innerHTML: "" }]
+        }
+    }
+];
+
+describe("markup: generation", () => {
+    it("generates a div for each audio element", () => {
+        // With three arbitrary array entries.
+        let markup = generateMarkup(
+            [...TEST_NODES, ...TEST_NODES],
+            EXPECTED_COMPONENTS
+        );
+        expect(markup.length).toEqual(4);
+        expect(markup[0].localName).toEqual("div");
+
+        // With two arbitrary array entries.
+        markup = generateMarkup(["test", "test"], EXPECTED_COMPONENTS);
+        expect(markup.length).toEqual(2);
+        expect(markup[1].localName).toEqual("div");
+
+        // With our test nodes.
+        markup = generateMarkup(TEST_NODES, EXPECTED_COMPONENTS);
+        expect(markup.length).toEqual(2);
+        expect(markup[1].localName).toEqual("div");
+    });
+
+    it("adds the correct data attribute to each audio element", () => {
+        const markup = generateMarkup(TEST_NODES, EXPECTED_COMPONENTS);
+        expect(markup[0].getAttribute("data-picobel-index")).toEqual("0");
+        expect(markup[1].getAttribute("data-picobel-index")).toEqual("1");
+    });
+
+    it("adds a loading indicator each audio element", () => {
+        const namespace = "TEST_NAMESPACE";
+        const markup = generateMarkup(
+            TEST_NODES,
+            EXPECTED_COMPONENTS,
+            namespace
+        );
+
+        let firstIndicator = markup[0].getElementsByClassName(
+            `${namespace}__loader`
+        );
+        expect(firstIndicator.length).toEqual(1);
+
+        let secondIndicator = markup[1].getElementsByTagName("div");
+        expect(secondIndicator.length).toBeTruthy();
+        expect(secondIndicator[0].classList).toContain(`${namespace}__loader`);
+    });
+});
+
+describe("markup: display", () => {
+    it("displays the duration value", () => {
+        let nodeOne = setLengthDisplay(TEST_NODES[0]);
+        expect(nodeOne.elements.durationDisplay.innerHTML).toEqual("3:31");
+        let nodeTwo = setLengthDisplay(TEST_NODES[1]);
+        expect(nodeTwo.elements.durationDisplay.innerHTML).toEqual("22:25");
+    });
+
+    it("displays the node's meta", () => {
+        const TEST_META = {
+            artist: "an artist name",
+            title: "a title for a node"
+        };
+        let elements = setMeta(TEST_META, TEST_NODES[0].elements);
+        expect(elements.artistDisplay.innerHTML).toEqual("an artist name");
+        expect(elements.titleDisplay.innerHTML).toEqual("a title for a node");
+    });
+});
diff --git a/src/js/markup/slider.test.js b/src/js/markup/slider.test.js
new file mode 100644
index 0000000..1410b1e
--- /dev/null
+++ b/src/js/markup/slider.test.js
@@ -0,0 +1,30 @@
+import { buildSlider } from "./slider.js";
+
+describe("markup: slider", () => {
+    it("can create a slider", () => {
+        const NAMESPACE = "progress";
+        const MIN = 0;
+        const MAX = 100;
+        const VALUE = 50;
+
+        let slider = buildSlider({
+            namespace: NAMESPACE,
+            min: MIN,
+            max: MAX,
+            value: VALUE
+        });
+        // Renders a container with two children: a label and a slider wrapper div.
+        expect(slider.localName).toBe("div");
+        expect(slider.children.length).toBe(2);
+        expect(slider.children[0].classList).toContain(`${NAMESPACE}-label`);
+        expect(slider.children[0].localName).toBe("label");
+        expect(slider.children[1].classList).toContain(
+            `${NAMESPACE}-slider__wrapper`
+        );
+        expect(slider.children[1].children.length).toBe(2);
+        expect(slider.children[1].children[1].localName).toBe("input");
+        expect(slider.children[1].children[1].min).toBe(MIN.toString());
+        expect(slider.children[1].children[1].max).toBe(MAX.toString());
+        expect(slider.children[1].children[1].value).toBe(VALUE.toString());
+    });
+});
diff --git a/src/js/markup/utils.test.js b/src/js/markup/utils.test.js
new file mode 100644
index 0000000..36b2ffa
--- /dev/null
+++ b/src/js/markup/utils.test.js
@@ -0,0 +1,25 @@
+import { createElement } from "./utils.js";
+
+describe("markup: creation", () => {
+    it("can create new elements", () => {
+        // Works without second arg
+        let elementNoClass = createElement("div");
+        expect(elementNoClass.localName).toEqual("div");
+        // Creates a span
+        let elementSpan = createElement("span", "songVolumeValue");
+        expect(elementSpan.localName).toEqual("span");
+        expect(elementSpan.classList).toContain("songVolumeValue");
+        // Creates a div
+        let elementDiv = createElement("div", "test");
+        expect(elementDiv.localName).toEqual("div");
+        expect(elementDiv.classList).toContain("test");
+        // Creates a button
+        let elementButton = createElement("button", "testing");
+        expect(elementButton.localName).toEqual("button");
+        expect(elementButton.classList).toContain("testing");
+        // Creates an input
+        let elementInput = createElement("input", "something");
+        expect(elementInput.localName).toEqual("input");
+        expect(elementInput.classList).toContain("something");
+    });
+});
diff --git a/src/js/utils/helpers.js b/src/js/utils/helpers.js
new file mode 100644
index 0000000..32b1e2b
--- /dev/null
+++ b/src/js/utils/helpers.js
@@ -0,0 +1,35 @@
+export const parseTime = seconds => {
+    let hours = Math.floor(seconds / 3600);
+
+    let mins = Math.floor((seconds % 3600) / 60)
+        .toFixed(0)
+        .toString();
+
+    let secs = Math.floor((seconds % 3600) % 60)
+        .toFixed(0)
+        .toString();
+
+    // Left-pad seconds string if needed
+    secs = secs >= 10 ? secs : `0${secs}`;
+
+    let parsedTime = `${mins}:${secs}`;
+
+    if (hours > 0) {
+        // Left-pad minutes string if needed
+        mins = mins >= 10 ? mins : `0${mins}`;
+        parsedTime = `${hours}:${mins}:${secs}`;
+    }
+
+    return parsedTime;
+};
+
+// Get File Type
+export const getFileType = string =>
+    string.substr((~-string.lastIndexOf(".") >>> 0) + 2);
+
+// Get File Name
+export const getFileName = string => {
+    let fullFileName = string.replace(/^.*[\\\/]/, "");
+    let withNoExtension = fullFileName.split(".")[0];
+    return withNoExtension;
+};
diff --git a/src/js/utils/helpers.test.js b/src/js/utils/helpers.test.js
new file mode 100644
index 0000000..51d5e8b
--- /dev/null
+++ b/src/js/utils/helpers.test.js
@@ -0,0 +1,30 @@
+import { parseTime, getFileType, getFileName } from "./helpers.js";
+
+describe("Utilities", () => {
+    it("converts seconds into HH:MM:SS format", () => {
+        // Round minutes.
+        expect(parseTime(120)).toEqual("2:00");
+        // Floating points
+        expect(parseTime(211.670208)).toEqual("3:31");
+        // zero-padding seconds < 10
+        expect(parseTime(3424.025)).toEqual("57:04");
+        // Durations longer than an hour
+        expect(parseTime(3846)).toEqual("1:04:06");
+    });
+
+    it("gets the filetype from a url", () => {
+        expect(
+            getFileType(
+                "http://audio.eatenbymonsters.com/reviews/daughter/human.mp3"
+            )
+        ).toEqual("mp3");
+    });
+
+    it("gets the file name from a url", () => {
+        expect(
+            getFileName(
+                "http://audio.eatenbymonsters.com/reviews/daughter/human.mp3"
+            )
+        ).toEqual("human");
+    });
+});
diff --git a/src/js/web-component.js b/src/js/web-component.js
index aa3be26..1cb4fa0 100644
--- a/src/js/web-component.js
+++ b/src/js/web-component.js
@@ -9,7 +9,6 @@ class PicobelWC extends HTMLElement {
     connectedCallback() {
         const className = this.classList[0] || "default";
         const theme = this.getAttribute("data-theme") || className;
-        console.log({ theme });
         const options = { theme, context: this };
         const components = this.getAttribute("data-components");
         if (components) {
diff --git a/src/tests/PicobelMarkup.test.js b/src/tests/PicobelMarkup.test.js
deleted file mode 100644
index 0dca005..0000000
--- a/src/tests/PicobelMarkup.test.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import PicobelMarkup from "../js/PicobelMarkup";
-import { buildSlider } from "../js/markup/slider.js";
-import { createElement } from "../js/markup/utils";
-
-const EXPECTED_COMPONENTS = [
-    "playPause",
-    "progress",
-    "volume",
-    "download",
-    "mute",
-    "duration",
-    "timer"
-];
-
-// Create some test nodes to trigger markup generation.
-const TEST_NODES = [
-    {
-        key: 0,
-        preload: "metadata",
-        url: "http://audio.eatenbymonsters.com/reviews/daughter/human.mp3",
-        className: "customPlayer",
-        duration: 211,
-        elements: {
-            durationDisplay: [{ innerHTML: "" }],
-            artistDisplay: [{ innerHTML: "" }],
-            titleDisplay: [{ innerHTML: "" }]
-        }
-    },
-    {
-        key: 1,
-        preload: "metadata",
-        url: "http://audio.eatenbymonsters.com/reviews/coldWarKids/lostThatEasy.mp3",
-        className: "",
-        duration: 1345,
-        elements: {
-            durationDisplay: [{ innerHTML: "" }],
-            artistDisplay: [{ innerHTML: "" }],
-            titleDisplay: [{ innerHTML: "" }]
-        }
-    }
-];
-
-describe("markup helpers", () => {
-    it("can create a slider", () => {
-        const NAMESPACE = "progress";
-        const MIN = 0;
-        const MAX = 100;
-        const VALUE = 50;
-
-        let slider = buildSlider({
-            namespace: NAMESPACE,
-            min: MIN,
-            max: MAX,
-            value: VALUE
-        });
-        // Renders a container with two children: a label and a slider wrapper div.
-        expect(slider.localName).toBe("div");
-        expect(slider.children.length).toBe(2);
-        expect(slider.children[0].classList).toContain(`${NAMESPACE}-label`);
-        expect(slider.children[0].localName).toBe("label");
-        expect(slider.children[1].classList).toContain(
-            `${NAMESPACE}-slider__wrapper`
-        );
-        expect(slider.children[1].children.length).toBe(2);
-        expect(slider.children[1].children[1].localName).toBe("input");
-        expect(slider.children[1].children[1].min).toBe(MIN.toString());
-        expect(slider.children[1].children[1].max).toBe(MAX.toString());
-        expect(slider.children[1].children[1].value).toBe(VALUE.toString());
-    });
-
-    it("can create new elements", () => {
-        // Works without second arg
-        let elementNoClass = createElement("div");
-        expect(elementNoClass.localName).toEqual("div");
-        // Creates a span
-        let elementSpan = createElement("span", "songVolumeValue");
-        expect(elementSpan.localName).toEqual("span");
-        expect(elementSpan.classList).toContain("songVolumeValue");
-        // Creates a div
-        let elementDiv = createElement("div", "test");
-        expect(elementDiv.localName).toEqual("div");
-        expect(elementDiv.classList).toContain("test");
-        // Creates a button
-        let elementButton = createElement("button", "testing");
-        expect(elementButton.localName).toEqual("button");
-        expect(elementButton.classList).toContain("testing");
-        // Creates an input
-        let elementInput = createElement("input", "something");
-        expect(elementInput.localName).toEqual("input");
-        expect(elementInput.classList).toContain("something");
-    });
-});
-
-describe("markup generation", () => {
-    it("generates a div for each audio element", () => {
-        // With three arbitrary array entries.
-        let markup = PicobelMarkup.generateMarkup(
-            [...TEST_NODES, ...TEST_NODES],
-            EXPECTED_COMPONENTS
-        );
-        expect(markup.length).toEqual(4);
-        expect(markup[0].localName).toEqual("div");
-
-        // With two arbitrary array entries.
-        markup = PicobelMarkup.generateMarkup(
-            ["test", "test"],
-            EXPECTED_COMPONENTS
-        );
-        expect(markup.length).toEqual(2);
-        expect(markup[1].localName).toEqual("div");
-
-        // With our test nodes.
-        markup = PicobelMarkup.generateMarkup(TEST_NODES, EXPECTED_COMPONENTS);
-        expect(markup.length).toEqual(2);
-        expect(markup[1].localName).toEqual("div");
-    });
-
-    it("adds the correct data attribute to each audio element", () => {
-        const markup = PicobelMarkup.generateMarkup(
-            TEST_NODES,
-            EXPECTED_COMPONENTS
-        );
-        expect(markup[0].getAttribute("data-picobel-index")).toEqual("0");
-        expect(markup[1].getAttribute("data-picobel-index")).toEqual("1");
-    });
-
-    it("adds a loading indicator each audio element", () => {
-        const namespace = "TEST_NAMESPACE";
-        const markup = PicobelMarkup.generateMarkup(
-            TEST_NODES,
-            EXPECTED_COMPONENTS,
-            namespace
-        );
-
-        let firstIndicator = markup[0].getElementsByClassName(
-            `${namespace}__loader`
-        );
-        expect(firstIndicator.length).toEqual(1);
-
-        let secondIndicator = markup[1].getElementsByTagName("div");
-        expect(secondIndicator.length).toBeTruthy();
-        expect(secondIndicator[0].classList).toContain(`${namespace}__loader`);
-    });
-});
-
-describe("content display", () => {
-    it("displays the duration value", () => {
-        let nodeOne = PicobelMarkup.setLengthDisplay(TEST_NODES[0]);
-        expect(nodeOne.elements.durationDisplay.innerHTML).toEqual("3:31");
-        let nodeTwo = PicobelMarkup.setLengthDisplay(TEST_NODES[1]);
-        expect(nodeTwo.elements.durationDisplay.innerHTML).toEqual("22:25");
-    });
-
-    it("displays the node's meta", () => {
-        const TEST_META = {
-            artist: "an artist name",
-            title: "a title for a node"
-        };
-        let elements = PicobelMarkup.setMeta(TEST_META, TEST_NODES[0].elements);
-        expect(elements.artistDisplay.innerHTML).toEqual("an artist name");
-        expect(elements.titleDisplay.innerHTML).toEqual("a title for a node");
-    });
-});
diff --git a/src/tests/helpers.test.js b/src/tests/helpers.test.js
deleted file mode 100644
index cc8bd86..0000000
--- a/src/tests/helpers.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import helpers from "./../js/helpers.js";
-
-describe("Utilities", () => {
-    it("converts seconds into HH:MM:SS format", () => {
-        // Round minutes.
-        expect(helpers.parseTime(120)).toEqual("2:00");
-        // Floating points
-        expect(helpers.parseTime(211.670208)).toEqual("3:31");
-        // zero-padding seconds < 10
-        expect(helpers.parseTime(3424.025)).toEqual("57:04");
-        // Durations longer than an hour
-        expect(helpers.parseTime(3846)).toEqual("1:04:06");
-    });
-
-    it("gets the filetype from a url", () => {
-        expect(
-            helpers.getFileType(
-                "http://audio.eatenbymonsters.com/reviews/daughter/human.mp3"
-            )
-        ).toEqual("mp3");
-    });
-
-    it("gets the file name from a url", () => {
-        expect(
-            helpers.getFileName(
-                "http://audio.eatenbymonsters.com/reviews/daughter/human.mp3"
-            )
-        ).toEqual("human");
-    });
-
-    it("finds an index from a data attribute", () => {
-        const TEST_DOM = `
-            <!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="UTF-8">
-                <title>Picobel.js Test Page</title>
-            </head>
-            <body>
-                <div id="elementWithIndex" data-picobel-index="2">
-                    <button id="childOfIndex"></button>
-                    <div>
-                        <div>
-                            <div>
-                                <div id="reallyDeep"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div id="hasNoIndex"></div>
-            </body>
-            </html>
-        `;
-        document.body.innerHTML = TEST_DOM;
-        let childOfIndex = document.getElementById("childOfIndex");
-        expect(helpers.findParentIndex(childOfIndex)).toEqual("2");
-        let elementWithIndex = document.getElementById("elementWithIndex");
-        expect(helpers.findParentIndex(elementWithIndex)).toEqual("2");
-        let hasNoIndex = document.getElementById("hasNoIndex");
-        expect(helpers.findParentIndex(hasNoIndex)).toEqual(false);
-        let reallyDeep = document.getElementById("reallyDeep");
-        expect(helpers.findParentIndex(reallyDeep)).toEqual("2");
-    });
-});

From 4509f0e59f22cf0dffdf4ae6694c3f48bac68a82 Mon Sep 17 00:00:00 2001
From: Tom Hazledine <tom@tomhazledine.com>
Date: Wed, 14 Feb 2024 11:41:19 +0000
Subject: [PATCH 2/4] refactor to core folder

---
 src/js/Picobel.js                                         | 8 ++++----
 src/js/{ => core}/audio-functions.js                      | 7 ++++---
 src/js/{ => core}/data.js                                 | 2 +-
 src/js/{ => core}/data.test.js                            | 0
 src/js/{ => core}/events.js                               | 7 ++++---
 src/js/{PicobelSetup.js => core/setup.js}                 | 0
 src/{tests/PicobelSetup.test.js => js/core/setup.test.js} | 4 ++--
 src/js/index.js                                           | 3 ---
 src/js/legacy.js                                          | 3 ---
 src/js/markup/components.js                               | 8 ++++----
 src/js/markup/index.js                                    | 3 ++-
 src/js/outputs/index.js                                   | 3 +++
 src/js/outputs/legacy.js                                  | 3 +++
 src/{tests => js/outputs}/picobel.test.js                 | 2 +-
 src/js/{ => wc}/web-component.default.js                  | 8 ++++----
 src/js/{ => wc}/web-component.js                          | 2 +-
 src/js/{ => wc}/web-component.skeleton.js                 | 4 ++--
 17 files changed, 35 insertions(+), 32 deletions(-)
 rename src/js/{ => core}/audio-functions.js (96%)
 rename src/js/{ => core}/data.js (96%)
 rename src/js/{ => core}/data.test.js (100%)
 rename src/js/{ => core}/events.js (94%)
 rename src/js/{PicobelSetup.js => core/setup.js} (100%)
 rename src/{tests/PicobelSetup.test.js => js/core/setup.test.js} (89%)
 delete mode 100644 src/js/index.js
 delete mode 100644 src/js/legacy.js
 create mode 100644 src/js/outputs/index.js
 create mode 100644 src/js/outputs/legacy.js
 rename src/{tests => js/outputs}/picobel.test.js (81%)
 rename src/js/{ => wc}/web-component.default.js (86%)
 rename src/js/{ => wc}/web-component.js (94%)
 rename src/js/{ => wc}/web-component.skeleton.js (91%)

diff --git a/src/js/Picobel.js b/src/js/Picobel.js
index 5ef483f..9c2d90a 100644
--- a/src/js/Picobel.js
+++ b/src/js/Picobel.js
@@ -1,8 +1,8 @@
-import { parseOptions } from "./PicobelSetup";
-import { findAudio, getRawData } from "./data";
+import { parseOptions } from "./core/setup";
+import { findAudio, getRawData } from "./core/data";
 import { generateMarkup, elementHooks } from "./markup";
-import { _setupLocalListeners } from "./events";
-import { canplaythrough } from "./audio-functions";
+import { _setupLocalListeners } from "./core/events";
+import { canplaythrough } from "./core/audio-functions";
 
 /**
  * ---------------------------------------------------------------------------
diff --git a/src/js/audio-functions.js b/src/js/core/audio-functions.js
similarity index 96%
rename from src/js/audio-functions.js
rename to src/js/core/audio-functions.js
index 8c55e4e..9713b03 100644
--- a/src/js/audio-functions.js
+++ b/src/js/core/audio-functions.js
@@ -1,6 +1,6 @@
-import { setLengthDisplay, setMeta } from "./markup";
+import { setLengthDisplay, setMeta } from "../markup";
 import { getMeta } from "./data";
-import { parseTime } from "./utils/helpers";
+import { parseTime } from "../utils/helpers";
 
 export const pauseAll = nodes =>
     nodes.forEach(node => {
@@ -55,6 +55,7 @@ export const updateProgress = node => {
         stop(node);
     }
     let progressPercent = ((progress / duration) * 100).toFixed(2);
+    ``;
     if (node.elements.progressBar) {
         node.elements.progressBar.value = progressPercent;
         node.elements.indicator.style.width = progressPercent + "%";
@@ -99,7 +100,7 @@ export const volumeFocus = (node, focus) =>
 
 export const setVolume = (node, value) => {
     let valueMapped = value * 10;
-    let volumePercent = value * 100;
+    let volumePercent = (value * 100).toFixed(2);
     node.volume = value;
     if (node.elements.volumeDisplay) {
         node.elements.volumeDisplay.innerHTML = valueMapped;
diff --git a/src/js/data.js b/src/js/core/data.js
similarity index 96%
rename from src/js/data.js
rename to src/js/core/data.js
index 6209e83..20ad880 100644
--- a/src/js/data.js
+++ b/src/js/core/data.js
@@ -1,4 +1,4 @@
-import { getFileType, getFileName } from "./utils/helpers";
+import { getFileType, getFileName } from "../utils/helpers";
 
 // Return an array of all the <audio> elements found on the page.
 export const findAudio = context => {
diff --git a/src/js/data.test.js b/src/js/core/data.test.js
similarity index 100%
rename from src/js/data.test.js
rename to src/js/core/data.test.js
diff --git a/src/js/events.js b/src/js/core/events.js
similarity index 94%
rename from src/js/events.js
rename to src/js/core/events.js
index 0fccade..f798cc2 100644
--- a/src/js/events.js
+++ b/src/js/core/events.js
@@ -1,7 +1,7 @@
 import * as PicobelAudio from "./audio-functions";
 
-export const _setupLocalListeners = nodes =>
-    nodes.map(node => {
+export const _setupLocalListeners = nodes => {
+    return nodes.map(node => {
         // Audio event listeners
         node.addEventListener(
             "timeupdate",
@@ -68,9 +68,10 @@ export const _setupLocalListeners = nodes =>
         if (node.elements.muteButton) {
             node.elements.muteButton.addEventListener(
                 "click",
-                () => PicobelAudio.muteUnmuteAudio(node),
+                e => PicobelAudio.muteUnmuteAudio(node, e),
                 false
             );
         }
         return node;
     });
+};
diff --git a/src/js/PicobelSetup.js b/src/js/core/setup.js
similarity index 100%
rename from src/js/PicobelSetup.js
rename to src/js/core/setup.js
diff --git a/src/tests/PicobelSetup.test.js b/src/js/core/setup.test.js
similarity index 89%
rename from src/tests/PicobelSetup.test.js
rename to src/js/core/setup.test.js
index bb0f3ec..dad7351 100644
--- a/src/tests/PicobelSetup.test.js
+++ b/src/js/core/setup.test.js
@@ -1,5 +1,5 @@
-import Picobel from "../js/index.js";
-import { parseOptions } from "../js/PicobelSetup";
+import Picobel from "../outputs/index.js";
+import { parseOptions } from "./setup";
 
 const EXPECTED_COMPONENTS = [
     "playPause",
diff --git a/src/js/index.js b/src/js/index.js
deleted file mode 100644
index b1e3e5f..0000000
--- a/src/js/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { picobel } from "./Picobel.js";
-
-export default picobel;
diff --git a/src/js/legacy.js b/src/js/legacy.js
deleted file mode 100644
index 60c0330..0000000
--- a/src/js/legacy.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { picobel as Picobel } from "./Picobel.js";
-
-window.picobel = Picobel;
diff --git a/src/js/markup/components.js b/src/js/markup/components.js
index ff53775..f0513c2 100644
--- a/src/js/markup/components.js
+++ b/src/js/markup/components.js
@@ -45,10 +45,10 @@ export const progress = (namespace, key) => {
 };
 
 export const mute = namespace => {
-    const mute = createElement("button", `${namespace}__mute`);
-    mute.setAttribute("type", "button");
-    mute.innerHTML = "Mute";
-    return mute;
+    const muteEl = createElement("button", `${namespace}__mute`);
+    muteEl.setAttribute("type", "button");
+    muteEl.innerHTML = "Mute";
+    return muteEl;
 };
 
 export const volume = (namespace, key) => {
diff --git a/src/js/markup/index.js b/src/js/markup/index.js
index fa43b8b..700b755 100644
--- a/src/js/markup/index.js
+++ b/src/js/markup/index.js
@@ -1,5 +1,5 @@
 import { parseTime } from "../utils/helpers";
-import { prepareClasses } from "../data";
+import { prepareClasses } from "../core/data";
 import { createElement, buildComponents } from "./utils";
 
 // Set the value of the song-length display
@@ -54,6 +54,7 @@ export const elementHooks = (nodes, context, namespace) =>
         let wrapper = context.querySelector(
             `[data-picobel-index='${node.key}']`
         );
+
         node.elements = {
             wrapper: wrapper,
             playPauseButton: wrapper.querySelector(`.${namespace}__play-pause`),
diff --git a/src/js/outputs/index.js b/src/js/outputs/index.js
new file mode 100644
index 0000000..2f60169
--- /dev/null
+++ b/src/js/outputs/index.js
@@ -0,0 +1,3 @@
+import { picobel } from "../Picobel.js";
+
+export default picobel;
diff --git a/src/js/outputs/legacy.js b/src/js/outputs/legacy.js
new file mode 100644
index 0000000..09cd72d
--- /dev/null
+++ b/src/js/outputs/legacy.js
@@ -0,0 +1,3 @@
+import { picobel as Picobel } from "../Picobel.js";
+
+window.picobel = Picobel;
diff --git a/src/tests/picobel.test.js b/src/js/outputs/picobel.test.js
similarity index 81%
rename from src/tests/picobel.test.js
rename to src/js/outputs/picobel.test.js
index 2313c07..37a7f13 100644
--- a/src/tests/picobel.test.js
+++ b/src/js/outputs/picobel.test.js
@@ -1,4 +1,4 @@
-import picobel from "../js/index.js";
+import picobel from "./";
 
 describe("Main app", () => {
     it("runs without breaking", () => {
diff --git a/src/js/web-component.default.js b/src/js/wc/web-component.default.js
similarity index 86%
rename from src/js/web-component.default.js
rename to src/js/wc/web-component.default.js
index 9980e89..8ad2953 100644
--- a/src/js/web-component.default.js
+++ b/src/js/wc/web-component.default.js
@@ -1,9 +1,9 @@
-import { picobel } from "./Picobel.js";
+import { picobel } from "../Picobel.js";
 
-import styles from "../../build/picobel.default.css";
+import styles from "../../../build/picobel.default.css";
 
 // Create a class for the element
-class PicobelWC extends HTMLElement {
+class PicobelWCDefault extends HTMLElement {
     constructor() {
         super();
     }
@@ -32,5 +32,5 @@ class PicobelWC extends HTMLElement {
 }
 
 if (typeof window !== "undefined" && "customElements" in window) {
-    window.customElements.define("picobel-player-default", PicobelWC);
+    window.customElements.define("picobel-player-default", PicobelWCDefault);
 }
diff --git a/src/js/web-component.js b/src/js/wc/web-component.js
similarity index 94%
rename from src/js/web-component.js
rename to src/js/wc/web-component.js
index 1cb4fa0..4a98c47 100644
--- a/src/js/web-component.js
+++ b/src/js/wc/web-component.js
@@ -1,4 +1,4 @@
-import { picobel } from "./Picobel.js";
+import { picobel } from "../Picobel.js";
 
 // Create a class for the element
 class PicobelWC extends HTMLElement {
diff --git a/src/js/web-component.skeleton.js b/src/js/wc/web-component.skeleton.js
similarity index 91%
rename from src/js/web-component.skeleton.js
rename to src/js/wc/web-component.skeleton.js
index f7166a2..51211ba 100644
--- a/src/js/web-component.skeleton.js
+++ b/src/js/wc/web-component.skeleton.js
@@ -1,6 +1,6 @@
-import { picobel } from "./Picobel.js";
+import { picobel } from "../Picobel.js";
 
-import styles from "../../build/picobel.skeleton.css";
+import styles from "../../../build/picobel.skeleton.css";
 
 // Create a class for the element
 class PicobelWC extends HTMLElement {

From a538fb1e2b786693d4352dc9bf2484022adec92d Mon Sep 17 00:00:00 2001
From: Tom Hazledine <tom@tomhazledine.com>
Date: Wed, 14 Feb 2024 11:42:11 +0000
Subject: [PATCH 3/4] updating esbuild to reflect outputs refactor

---
 build.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/build.js b/build.js
index 52cbc55..9c158b4 100644
--- a/build.js
+++ b/build.js
@@ -31,18 +31,18 @@ const config = {
         ...globalConfig,
         format: "esm",
         entryPoints: [
-            { out: "picobel", in: "src/js/index.js" },
-            { out: "picobel-component", in: "src/js/web-component.js" },
+            { out: "picobel", in: "src/js/outputs/index.js" },
+            { out: "picobel-component", in: "src/js/wc/web-component.js" },
             ...components.map(theme => ({
                 out: `picobel-component-${theme}`,
-                in: `src/js/web-component.${theme}.js`
+                in: `src/js/wc/web-component.${theme}.js`
             }))
         ],
         loader: { ".css": "text" }
     },
     legacy: {
         ...globalConfig,
-        entryPoints: ["src/js/legacy.js"],
+        entryPoints: ["src/js/outputs/legacy.js"],
         entryNames: `picobel.${version}`,
         format: "iife"
     },

From eb556015b85087caf6da054cff43f40f4d5d09d1 Mon Sep 17 00:00:00 2001
From: Tom Hazledine <tom@tomhazledine.com>
Date: Wed, 14 Feb 2024 11:47:41 +0000
Subject: [PATCH 4/4] moving picobel-player-default WC into separate demo page

---
 demo/component-default.html | 77 +++++++++++++++++++++++++++++++++++++
 demo/component.html         | 33 ++++++++--------
 demo/manual.html            |  6 +--
 3 files changed, 95 insertions(+), 21 deletions(-)
 create mode 100644 demo/component-default.html

diff --git a/demo/component-default.html b/demo/component-default.html
new file mode 100644
index 0000000..3bc6529
--- /dev/null
+++ b/demo/component-default.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Picobel.js Test Page</title>
+
+        <!-- Load the Picobel CSS -->
+        <link
+            rel="stylesheet"
+            href="../src/css/picobel.all.css"
+            type="text/css"
+        />
+    </head>
+    <body style="font-family: sans-serif">
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li>
+                    <a href="composable.html">Composable</a>
+                </li>
+                <li><a href="types.html">Types</a></li>
+                <li><a href="types.html">Manual</a></li>
+                <li><a href="component.html">Web Component</a></li>
+            </ul>
+        </nav>
+
+        <div class="generic-wrapper">
+            <h1>Testing Picobel: web component default</h1>
+            <h2>
+                <code>&lt;picobel-player-default&gt;</code>
+            </h2>
+
+            <picobel-player-default class="foo">
+                <audio
+                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
+                    title="All I Want for Christmas"
+                    data-artist="Master Slash Slave"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+            </picobel-player-default>
+
+            <h2>
+                <code>&lt;picobel-player-default&gt;</code> with multiple audio
+                nodes
+            </h2>
+
+            <picobel-player-default>
+                <audio
+                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
+                    title="All I Want for Christmas"
+                    data-artist="Master Slash Slave"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+                <audio
+                    src="./audio-examples/taken-at-the-flood.mp3"
+                    title="Taken at the Flood"
+                    data-artist="Freeze Them"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+            </picobel-player-default>
+        </div>
+
+        <script
+            type="text/javascript"
+            src="../build/picobel-component-default.js"
+        ></script>
+    </body>
+</html>
diff --git a/demo/component.html b/demo/component.html
index 4cb6bda..91f8bbd 100644
--- a/demo/component.html
+++ b/demo/component.html
@@ -21,11 +21,20 @@
                 <li><a href="types.html">Types</a></li>
                 <li><a href="types.html">Manual</a></li>
                 <li>Web Component</li>
+                <li>
+                    <a href="component-default.html">Web Component "default"</a>
+                </li>
             </ul>
         </nav>
 
         <div class="generic-wrapper">
             <h1>Testing Picobel: web component</h1>
+
+            <p>
+                View experimental
+                <a href="component-default.html">Web Component "default"</a>.
+            </p>
+
             <h2>
                 <code>&lt;picobel-player&gt;</code> loaded with no inbuilt
                 styles
@@ -44,11 +53,11 @@ <h2>
             </picobel-player>
 
             <h2>
-                <code>&lt;picobel-player-default&gt;</code> loaded (the
-                "default" theme)
+                <code>&lt;picobel-player&gt;</code> loaded with
+                <code>data-theme="skeleton"</code> and external stylesheet
             </h2>
 
-            <picobel-player-default>
+            <picobel-player data-theme="skeleton">
                 <audio
                     src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
                     title="All I Want for Christmas"
@@ -58,18 +67,10 @@ <h2>
                     Your browser does not support the
                     <code>audio</code> element.
                 </audio>
-            </picobel-player-default>
-
-            <h2>
-                <code>&lt;picobel-player&gt;</code> loaded with
-                <code>data-theme="skeleton"</code> and external stylesheet
-            </h2>
-
-            <picobel-player data-theme="skeleton">
                 <audio
-                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
-                    title="All I Want for Christmas"
-                    data-artist="Master Slash Slave"
+                    src="./audio-examples/taken-at-the-flood.mp3"
+                    title="Taken at the Flood"
+                    data-artist="Freeze Them"
                     controls
                 >
                     Your browser does not support the
@@ -82,9 +83,5 @@ <h2>
             type="text/javascript"
             src="../build/picobel-component.js"
         ></script>
-        <script
-            type="text/javascript"
-            src="../build/picobel-component-default.js"
-        ></script>
     </body>
 </html>
diff --git a/demo/manual.html b/demo/manual.html
index 405775c..e3b42af 100644
--- a/demo/manual.html
+++ b/demo/manual.html
@@ -68,10 +68,10 @@ <h1>Some stuff...</h1>
         </audio>
 
         <!-- Load Scripts -->
-        <script type="text/javascript" src="../build/picobel.2.1.0.js"></script>
+        <script type="text/javascript" src="../build/picobel.3.0.3.js"></script>
         <script>
-            console.log({ picobel });
-            picobel();
+            const picobelInstance = picobel();
+            console.log({ picobelInstance });
         </script>
     </body>
 </html>