1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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);
|
