Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 05:30:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add progress percentage as input range

Browse source
This commit is contained in:
Fernando Jiménez Moreno 2019-04-18 12:02:58 +02:00
parent aad5b23e2b
commit 8a4d54af0b
1 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

31
resources/media_controls.js
View file

@ -7,6 +7,7 @@
const MARKUP = ` const MARKUP = `
<button id="play-pause-button"></button> <button id="play-pause-button"></button>
<input id="progress" type="range" value="0" min="0" max="100" step="1"></input>
<span id="position-duration-box" class="hidden"> <span id="position-duration-box" class="hidden">
#1 #1
<span id="duration"> / #2</span> <span id="duration"> / #2</span>
@ -94,6 +95,7 @@
"duration", "duration",
"play-pause-button", "play-pause-button",
"position-duration-box", "position-duration-box",
"progress",
"volume-switch", "volume-switch",
"volume-level" "volume-level"
].forEach(id => { ].forEach(id => {
@ -187,7 +189,6 @@
const to = TRANSITIONS[name][from]; const to = TRANSITIONS[name][from];
console.log(`transitioning from ${from} to ${to}`);
if (from == to) { if (from == to) {
return; return;
} }
@ -215,7 +216,6 @@
return; return;
} }
console.log(`render from ${from} to ${this.state}`);
if (this.state != from) { if (this.state != from) {
// Play/Pause button. // Play/Pause button.
const playPauseButton = this.elements.playPauseButton; const playPauseButton = this.elements.playPauseButton;
@ -223,6 +223,23 @@
playPauseButton.classList.add(this.state); playPauseButton.classList.add(this.state);
} }
// Progress.
const positionPercent = this.media.currentTime / this.media.duration * 100;
if (!isNaN(positionPercent) && positionPercent != Infinity) {
this.elements.progress.value = positionPercent;
} else {
this.elements.progress.value = 0;
}
// Current time and duration.
let currentTime = "0:00";
let duration = "0:00";
if (!isNaN(this.media.currentTime) && !isNaN(this.media.duration)) {
currentTime = formatTime(Math.round(this.media.currentTime * 1000));
duration = formatTime(Math.round(this.media.duration * 1000));
}
this.elements.positionDurationBox.show(currentTime, duration);
// Volume. // Volume.
const volumeSwitchClass = this.media.muted || this.media.volume == 0 ? "muted" : "volumeup"; const volumeSwitchClass = this.media.muted || this.media.volume == 0 ? "muted" : "volumeup";
if (!this.elements.volumeSwitch.classList.contains(volumeSwitchClass)) { if (!this.elements.volumeSwitch.classList.contains(volumeSwitchClass)) {
@ -233,15 +250,6 @@
if (this.elements.volumeLevel.value != volumeLevelValue) { if (this.elements.volumeLevel.value != volumeLevelValue) {
this.elements.volumeLevel.value = volumeLevelValue; this.elements.volumeLevel.value = volumeLevelValue;
} }
// Current time and duration.
let currentTime = "0:00";
let duration = "0:00";
if (!isNaN(this.media.currentTime) && !isNaN(this.media.duration)) {
currentTime = formatTime(Math.round(this.media.currentTime * 1000));
duration = formatTime(Math.round(this.media.duration * 1000));
}
this.elements.positionDurationBox.show(currentTime, duration);
} }
handleEvent(event) { handleEvent(event) {
@ -283,7 +291,6 @@
// HTMLMediaElement event handler // HTMLMediaElement event handler
onMediaEvent(event) { onMediaEvent(event) {
console.log(event.type);
switch (event.type) { switch (event.type) {
case "ended": case "ended":
this.end(); this.end();