From 040960c0672834c0a4301a734cd90d8fe78c1c58 Mon Sep 17 00:00:00 2001 From: Elie Genard Date: Wed, 11 Sep 2019 12:38:00 +0200 Subject: [PATCH 1/4] Add fullscreen button to video controls --- resources/media-controls.css | 3 ++ resources/media-controls.js | 63 ++++++++++++++++++++++++------------ 2 files changed, 46 insertions(+), 20 deletions(-) diff --git a/resources/media-controls.css b/resources/media-controls.css index cbea462157c..5ff7c9728e7 100644 --- a/resources/media-controls.css +++ b/resources/media-controls.css @@ -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; } +.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; +} diff --git a/resources/media-controls.js b/resources/media-controls.js index 383b025ee0e..f646ad833a5 100644 --- a/resources/media-controls.js +++ b/resources/media-controls.js @@ -5,19 +5,6 @@ (() => { "use strict"; - const MARKUP = ` -
- - - - - -
- `; - // States. const BUFFERING = "buffering"; const ENDED = "ended"; @@ -50,6 +37,22 @@ } }; + function generateMarkup(isAudioOnly) { + return ` +
+ + + + + + ${isAudioOnly ? "" : ''} +
+ `; + } + function camelCase(str) { const rdashes = /-(.)/g; return str.replace(rdashes, (str, p1) => { @@ -89,15 +92,16 @@ attributeFilter: ["controls"] }); + this.isAudioOnly = this.media.localName == "audio"; + // Create root element and load markup. this.root = document.createElement("div"); this.root.classList.add("root"); - this.root.innerHTML = MARKUP; + this.root.innerHTML = generateMarkup(this.isAudioOnly); this.controls.appendChild(this.root); - // Import elements. - this.elements = {}; - [ + + const elementNames = [ "duration", "play-pause-button", "position-duration-box", @@ -105,7 +109,15 @@ "progress", "volume-switch", "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); }); @@ -182,6 +194,11 @@ { el: this.elements.volumeSwitch, type: "click" }, { el: this.elements.volumeLevel, type: "input" } ]; + + if (!this.isAudioOnly) { + this.controlEvents.push({ el: this.elements.fullscreenSwitch, type: "click" }); + } + this.controlEvents.forEach(({ el, type }) => { el.addEventListener(type, this); }); @@ -238,8 +255,7 @@ } render(from = this.state) { - const isAudioOnly = this.media.localName == "audio"; - if (!isAudioOnly) { + if (!this.isAudioOnly) { // XXX This should ideally use clientHeight/clientWidth, // but for some reason I couldn't figure out yet, // using it breaks layout. @@ -312,6 +328,9 @@ case this.elements.volumeSwitch: this.toggleMuted(); break; + case this.elements.fullscreenSwitch: + this.toggleFullscreen(); + break; } break; case "input": @@ -368,6 +387,10 @@ this.media.muted = !this.media.muted; } + toggleFullscreen() { + this.media.requestFullscreen(); + } + changeVolume() { const volume = parseInt(this.elements.volumeLevel.value); if (!isNaN(volume)) { From 670b116b937be7526b6e8eaef2d3192f467d58f3 Mon Sep 17 00:00:00 2001 From: Elie Genard Date: Wed, 11 Sep 2019 16:32:42 +0200 Subject: [PATCH 2/4] Add fullscreen exit to toggle callback --- resources/media-controls.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/resources/media-controls.js b/resources/media-controls.js index f646ad833a5..c55b341bcdc 100644 --- a/resources/media-controls.js +++ b/resources/media-controls.js @@ -388,7 +388,13 @@ } toggleFullscreen() { - this.media.requestFullscreen(); + const fullscreenEnabled = document.fullscreenEnabled && document.fullscreenElement; + + if (fullscreenEnabled) { + document.exitFullscreen(); + } else { + this.media.requestFullscreen(); + } } changeVolume() { From a7459b78d4c7251d61cca51c3c0da42a847c9638 Mon Sep 17 00:00:00 2001 From: Elie Genard Date: Wed, 11 Sep 2019 17:26:48 +0200 Subject: [PATCH 3/4] Increase controls min-width --- resources/media-controls.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/media-controls.css b/resources/media-controls.css index 5ff7c9728e7..ac5dec6ecd2 100644 --- a/resources/media-controls.css +++ b/resources/media-controls.css @@ -16,7 +16,7 @@ button { display: block; position: relative; min-height: 40px; - min-width: 200px; + min-width: 230px; } .controls { From 9cbdfd69699a8e952f8306b621a4cd33ab6ece7d Mon Sep 17 00:00:00 2001 From: Elie Genard Date: Wed, 11 Sep 2019 17:30:26 +0200 Subject: [PATCH 4/4] Change control button image when fullscreen is active --- resources/media-controls.css | 4 ++++ resources/media-controls.js | 14 ++++++++++---- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/resources/media-controls.css b/resources/media-controls.css index ac5dec6ecd2..62c39164747 100644 --- a/resources/media-controls.css +++ b/resources/media-controls.css @@ -55,3 +55,7 @@ button { .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; } + +.fullscreen.fullscreen-active { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAbtJREFUSA3tlj0vBFEUhnd8hFhrE4mPbSREovIfdFQ6hcJ/EJVColP6GRoqhZbEFqKmET2xDSpWYjxncu915u6ZzWS20DjJ6577no/3zL1mqNWwNE1HwKb4g5rrdcjayHo54oxVbG8QAepl0FNphLVBQ6bflZ2ySiLU6+a+3bY/Hq/qA0EEog4m4ieDmwOzwrNazUOPwgQKpfkVWDAEVuHvQAsUDhjqSLKmeIQXKxKQ2Jv8UPY7eejuHJIsEantJ6B6l/glIXsKvOgq/DICT+Rld6IHH9IbEursz8GM5kv68+RdxiKJLibYYr+sOeffJknyqXlyZbhJzTn/g9yuwf9Tf3QC8SUPM8eoMUuXi/vWPJcsuSuac36H3I7BZ98UeQduQGwbcQEJ03ES+3vQ8y7kakkQkQegrYzAKwXyLuQs96K5yDrrYi6r3KZJ2jEicnS2EdwCX8Dbu3P6PcGzT3brCWuvCGTc/BpOPsVyJ0UC2ZkT3wfa8iJErObZZ4BYEyzFzww3DsKF4tsiBNaAPhaZ3PrGxBo9e0PkQP6ajYELIFa5uVejh3+SNn74z0JEjkClyX1zv9Jnxzf/AaCJ561FockLAAAAAElFTkSuQmCC') no-repeat; +} diff --git a/resources/media-controls.js b/resources/media-controls.js index c55b341bcdc..b8f100c6f05 100644 --- a/resources/media-controls.js +++ b/resources/media-controls.js @@ -388,12 +388,18 @@ } toggleFullscreen() { - const fullscreenEnabled = document.fullscreenEnabled && document.fullscreenElement; + const { fullscreenEnabled, fullscreenElement } = document; - if (fullscreenEnabled) { - document.exitFullscreen(); + const isElementFullscreen = fullscreenElement && fullscreenElement === this.media; + + if (fullscreenEnabled && isElementFullscreen) { + document.exitFullscreen().then(() => { + this.elements.fullscreenSwitch.classList.remove("fullscreen-active"); + }); } else { - this.media.requestFullscreen(); + this.media.requestFullscreen().then(() => { + this.elements.fullscreenSwitch.classList.add("fullscreen-active"); + }); } }