diff options
| author | Elie Genard <elie@lepermislibre.fr> | 2019-09-11 17:30:26 +0200 |
|---|---|---|
| committer | Elie Genard <elie@lepermislibre.fr> | 2019-09-11 17:30:26 +0200 |
| commit | 9cbdfd69699a8e952f8306b621a4cd33ab6ece7d (patch) | |
| tree | 767d5330cbc3be751e1fb1f2c499263e9254b5fb | |
| parent | a7459b78d4c7251d61cca51c3c0da42a847c9638 (diff) | |
| download | servo-9cbdfd69699a8e952f8306b621a4cd33ab6ece7d.tar.gz servo-9cbdfd69699a8e952f8306b621a4cd33ab6ece7d.zip | |
Change control button image when fullscreen is active
| -rw-r--r-- | resources/media-controls.css | 4 | ||||
| -rw-r--r-- | 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"); + }); } } |