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

Add fullscreen button to video controls

Browse source
This commit is contained in:
Elie Genard 2019-09-11 12:38:00 +02:00
parent ec1da1d01c
commit 040960c067
2 changed files with 46 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

3
resources/media-controls.css
View file

@ -52,3 +52,6 @@ button {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAy0lEQVR4AayRtUICUBRA7a7Jye5RF7u+wM4vsF2s0e7O37BzkZqZ+AF2WGk4XLqZeO/dPq/TUtuoZSki7mIgFloFlv3+icgOoKE8GlsH1sVOgOgy9jGjpzIuRjqv/rgNI3/hQCuD0t+8WK7Eywx6NfSGIAX+5t90CwOF5ODgNj4EO2TzxbDkdXwlgmCdLOolr+UlEbTn37QAK0fRBz8BAImvEYwMnmiJfdRzHxTAYoAQJjqPWWxJMf+3vHEAzCf+8A4avXYR9xSpm5QAaOvUDhZuhCsAAAAASUVORK5CYII=") no-repeat; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAy0lEQVR4AayRtUICUBRA7a7Jye5RF7u+wM4vsF2s0e7O37BzkZqZ+AF2WGk4XLqZeO/dPq/TUtuoZSki7mIgFloFlv3+icgOoKE8GlsH1sVOgOgy9jGjpzIuRjqv/rgNI3/hQCuD0t+8WK7Eywx6NfSGIAX+5t90CwOF5ODgNj4EO2TzxbDkdXwlgmCdLOolr+UlEbTn37QAK0fRBz8BAImvEYwMnmiJfdRzHxTAYoAQJjqPWWxJMf+3vHEAzCf+8A4avXYR9xSpm5QAaOvUDhZuhCsAAAAASUVORK5CYII=") no-repeat;
} }
.fullscreen {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAa1JREFUSA3Vlj1Ow0AQhW1OAFUaKmoqOEAklCIlJQ3nyBFyBahc0IAEEnUUunQWVLiloqEKNzDfmJ2V7Z1JlpKRRrt+82bezq7/yrZtH4qiOMUt2wJelWX5aQXJnYDf4UdWHOyjgFTjlm0Bz53ECAsHF65lzUFkDiffXM5Y+esQTq8CZ0ZEchLzBF5gviVsBwgiz2aYvrwtuiFWmkkjEN7S2h+wpn8Gso/ViLhXBP64+COYnkkUiAdqJLgiHhdcD74TWAnQ79pL/AsniGxki+ReTswQmSuJ2BTvm9klhGPNMUcIur+LMYHYIiiYxcd895oiUy9IbI5n3WlejX+OS/uyDV4bxNzt83IiHorfMortOuRlTLImJCe3EpisXIsz7Syulis53L6ZIhAm8hxs8PigMbeKDwpkcuRpXolAg3evipxE3YVdXGL6qqhVAKwTeZJJzwYr1+I6wrO6rcD1ZTcQ6NXtpjuL7xHRWq5ApQVyRqpJJ+PuRaT2vmiXBOPBZ4icwbmweJ7AIeR1jkjgrOFLTmLSmvy2nCSRX0B+W6755n5ZcXLlGbrHvd+W9x/rQiZUwmH0RgAAAABJRU5ErkJggg==') no-repeat;
}

63
resources/media-controls.js
View file

@ -5,19 +5,6 @@
(() => { (() => {
"use strict"; "use strict";
const MARKUP = `
<div class="controls">
<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-text">#1</span>
<span id="duration"> / #2</span>
</span>
<button id="volume-switch"></button>
<input id="volume-level" type="range" value="100" min="0" max="100" step="1"></input>
</div>
`;
// States. // States.
const BUFFERING = "buffering"; const BUFFERING = "buffering";
const ENDED = "ended"; const ENDED = "ended";
@ -50,6 +37,22 @@
} }
}; };
function generateMarkup(isAudioOnly) {
return `
<div class="controls">
<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-text">#1</span>
<span id="duration"> / #2</span>
</span>
<button id="volume-switch"></button>
<input id="volume-level" type="range" value="100" min="0" max="100" step="1"></input>
${isAudioOnly ? "" : '<button id="fullscreen-switch" class="fullscreen"></button>'}
</div>
`;
}
function camelCase(str) { function camelCase(str) {
const rdashes = /-(.)/g; const rdashes = /-(.)/g;
return str.replace(rdashes, (str, p1) => { return str.replace(rdashes, (str, p1) => {
@ -89,15 +92,16 @@
attributeFilter: ["controls"] attributeFilter: ["controls"]
}); });
this.isAudioOnly = this.media.localName == "audio";
// Create root element and load markup. // Create root element and load markup.
this.root = document.createElement("div"); this.root = document.createElement("div");
this.root.classList.add("root"); this.root.classList.add("root");
this.root.innerHTML = MARKUP; this.root.innerHTML = generateMarkup(this.isAudioOnly);
this.controls.appendChild(this.root); this.controls.appendChild(this.root);
// Import elements.
this.elements = {}; const elementNames = [
[
"duration", "duration",
"play-pause-button", "play-pause-button",
"position-duration-box", "position-duration-box",
@ -105,7 +109,15 @@
"progress", "progress",
"volume-switch", "volume-switch",
"volume-level" "volume-level"
].forEach(id => { ];
if (!this.isAudioOnly) {
elementNames.push("fullscreen-switch");
}
// Import elements.
this.elements = {};
elementNames.forEach(id => {
this.elements[camelCase(id)] = this.controls.getElementById(id); this.elements[camelCase(id)] = this.controls.getElementById(id);
}); });
@ -182,6 +194,11 @@
{ el: this.elements.volumeSwitch, type: "click" }, { el: this.elements.volumeSwitch, type: "click" },
{ el: this.elements.volumeLevel, type: "input" } { el: this.elements.volumeLevel, type: "input" }
]; ];
if (!this.isAudioOnly) {
this.controlEvents.push({ el: this.elements.fullscreenSwitch, type: "click" });
}
this.controlEvents.forEach(({ el, type }) => { this.controlEvents.forEach(({ el, type }) => {
el.addEventListener(type, this); el.addEventListener(type, this);
}); });
@ -238,8 +255,7 @@
} }
render(from = this.state) { render(from = this.state) {
const isAudioOnly = this.media.localName == "audio"; if (!this.isAudioOnly) {
if (!isAudioOnly) {
// XXX This should ideally use clientHeight/clientWidth, // XXX This should ideally use clientHeight/clientWidth,
// but for some reason I couldn't figure out yet, // but for some reason I couldn't figure out yet,
// using it breaks layout. // using it breaks layout.
@ -312,6 +328,9 @@
case this.elements.volumeSwitch: case this.elements.volumeSwitch:
this.toggleMuted(); this.toggleMuted();
break; break;
case this.elements.fullscreenSwitch:
this.toggleFullscreen();
break;
} }
break; break;
case "input": case "input":
@ -368,6 +387,10 @@
this.media.muted = !this.media.muted; this.media.muted = !this.media.muted;
} }
toggleFullscreen() {
this.media.requestFullscreen();
}
changeVolume() { changeVolume() {
const volume = parseInt(this.elements.volumeLevel.value); const volume = parseInt(this.elements.volumeLevel.value);
if (!isNaN(volume)) { if (!isNaN(volume)) {