From a5c2c4f6ea34013fe38fafafb6bbc048bfdff819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= Date: Tue, 28 Oct 2025 12:48:54 +0100 Subject: [PATCH] fix(UI): Use the same icon in big and small play buttons (#9304) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Wojciech Tyczyński --- ui/big_play_button.js | 11 +++++++---- ui/icon.js | 11 +++++++++++ ui/images/pause.svg | 4 ---- ui/images/play_arrow.svg | 4 ---- ui/images/replay.svg | 3 --- ui/less/buttons.less | 16 ---------------- ui/play_button.js | 2 +- 7 files changed, 19 insertions(+), 32 deletions(-) delete mode 100644 ui/images/pause.svg delete mode 100644 ui/images/play_arrow.svg delete mode 100644 ui/images/replay.svg diff --git a/ui/big_play_button.js b/ui/big_play_button.js index 4a0bc422b..9dbee533f 100644 --- a/ui/big_play_button.js +++ b/ui/big_play_button.js @@ -7,6 +7,8 @@ goog.provide('shaka.ui.BigPlayButton'); +goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.PlayButton'); goog.requireType('shaka.ui.Controls'); @@ -31,12 +33,13 @@ shaka.ui.BigPlayButton = class extends shaka.ui.PlayButton { /** @override */ updateIcon() { + const Icons = shaka.ui.Enums.MaterialDesignSVGIcons; + const icon = new shaka.ui.Icon(/* parent= */ null); if (this.isEnded() && this.video.duration) { - this.button.setAttribute('icon', 'replay'); - } else if (this.isPaused()) { - this.button.setAttribute('icon', 'play'); + icon.use(Icons['REPLAY']); } else { - this.button.setAttribute('icon', 'pause'); + icon.use(this.isPaused() ? Icons['PLAY'] : Icons['PAUSE']); } + this.button.style.backgroundImage = icon.getDataUrl(); } }; diff --git a/ui/icon.js b/ui/icon.js index fdc60d770..a44628f1c 100644 --- a/ui/icon.js +++ b/ui/icon.js @@ -78,6 +78,17 @@ shaka.ui.Icon = class { return this.svg_; } + /** + * @return {string} + * @export + */ + getDataUrl() { + const serializer = new XMLSerializer(); + const svgString = serializer.serializeToString(this.svg_); + const encoded = window.btoa(svgString); + return `url("data:image/svg+xml;base64,${encoded}")`; + } + /** * @param {string | Array} path diff --git a/ui/images/pause.svg b/ui/images/pause.svg deleted file mode 100644 index 114c1d6a8..000000000 --- a/ui/images/pause.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/ui/images/play_arrow.svg b/ui/images/play_arrow.svg deleted file mode 100644 index f67f8cc6a..000000000 --- a/ui/images/play_arrow.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/ui/images/replay.svg b/ui/images/replay.svg deleted file mode 100644 index 448a7456d..000000000 --- a/ui/images/replay.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/ui/less/buttons.less b/ui/less/buttons.less index ed2a9dbaa..cf89b358f 100644 --- a/ui/less/buttons.less +++ b/ui/less/buttons.less @@ -55,22 +55,6 @@ .show-when-controls-shown(); - /* Actual icon images for the two states this could be in. - * These will be inlined as data URIs when compiled, and so do not need to be - * deployed separately from the compiled CSS. - * Note that these URIs should relative to ui/controls.less, not this file. */ - &[icon="play"] { - background-image: data-uri("images/play_arrow.svg"); - } - - &[icon="pause"] { - background-image: data-uri("images/pause.svg"); - } - - &[icon="replay"] { - background-image: data-uri("images/replay.svg"); - } - @media (prefers-reduced-transparency: no-preference) { .shaka-controls-container[shown="true"] & { opacity: 0.75; diff --git a/ui/play_button.js b/ui/play_button.js index b47e4de12..89bf2d648 100644 --- a/ui/play_button.js +++ b/ui/play_button.js @@ -145,7 +145,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element { updateIcon() { const Icons = shaka.ui.Enums.MaterialDesignSVGIcons; if (this.isEnded() && this.video.duration) { - this.icon_.use(Icons.REPLAY); + this.icon_.use(Icons['REPLAY']); } else { this.icon_.use(this.isPaused() ? Icons['PLAY'] : Icons['PAUSE']); }