1 files changed, 97 insertions, 0 deletions
diff --git a/libs/music/player.d/progress-bar.js b/libs/music/player.d/progress-bar.js
new file mode 100644
index 0000000..c5850c2
--- /dev/null
+++ b/libs/music/player.d/progress-bar.js
@@ -0,0 +1,97 @@
+; // SPDX-FileCopyrightText: 2021 Gary Wang <toblumia@outlook.com>
+; // SPDX-License-Identifier: MIT
+class ProgressBar extends HTMLElement {
+
+    static get observedAttributes() {
+        return ['value', 'buffer', 'data-chapters'];
+    }
+    
+    constructor() {
+        super(); // always call super() first in the constructor.
+        const shadow = this.attachShadow({mode: 'open'});
+        
+        const container = document.createElement('div');
+        container.setAttribute('class', 'container');
+        
+        const bufferBar = document.createElement('div');
+        bufferBar.setAttribute('id', 'bufferbar');
+        
+        const timeBar = document.createElement('div');
+        timeBar.setAttribute('id', 'timebar');
+        
+        const chapterContainer = document.createElement('div');
+        chapterContainer.setAttribute('id', 'chapter-container');
+        
+        const style = document.createElement('style');
+        style.textContent = `
+            .container {
+                height: 1.5em;
+                position: relative;
+                background-color: #f1f1f1;
+            }
+            .container > div {
+                height: 100%;
+                position: absolute;
+            }
+            #timebar {
+                background-color: #2196F3;
+            }
+            #bufferbar {
+                background-color: #AAA;
+            }
+            .container, #chapter-container {
+                width: 100%;
+            }
+            .chapter {
+                height: 100%;
+                width: stretch; width: -moz-available; width: -webkit-fill-available;
+                border-left: .15em solid #0045F340;
+                position: absolute;
+            }
+        `;
+        
+        shadow.appendChild(container);
+        shadow.appendChild(style);
+        container.appendChild(bufferBar);
+        container.appendChild(timeBar);
+        container.appendChild(chapterContainer);
+    }
+    
+    connectedCallback() {
+        spawnChapters(this);
+        updateStyle(this);
+    };
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name == "data-chapters") {
+            spawnChapters(this);
+        } 
+        updateStyle(this);
+    }
+}
+
+function spawnChapters(elem) {
+    const shadow = elem.shadowRoot;
+    let chapterContainer = shadow.querySelector('#chapter-container');
+    let chapters = elem.dataset.chapters ? JSON.parse(elem.dataset.chapters) : [];
+
+    if (!Array.isArray(chapters)) return;
+    chapterContainer.textContent = '';
+    chapters.forEach((chapter) => {
+        let chapterElem = document.createElement('div');
+        chapterElem.setAttribute('class', 'chapter');
+        chapterElem.setAttribute('title', `${chapter.title}`);
+        chapterElem.setAttribute('style', `left: ${chapter.start}%`);
+        chapterContainer.appendChild(chapterElem);
+    });
+}
+
+function updateStyle(elem) {
+    const shadow = elem.shadowRoot;
+    let timebar = shadow.querySelector('#timebar');
+    timebar.setAttribute('style', `width: ${elem.getAttribute('value')}%`);
+    let bufferbar = shadow.querySelector('#bufferbar');
+    bufferbar.setAttribute('style', `width: ${elem.getAttribute('buffer')}%`);
+}
+
+customElements.define('pcm-progress', ProgressBar);