fix(UI): Use the same icon in big and small play buttons (#9304)

Co-authored-by: Wojciech Tyczyński <tykus160@gmail.com>

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();
   }
 };

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<string>} path

ui/images/pause.svg

@@ -1,4 +0,0 @@
-<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

ui/images/play_arrow.svg

@@ -1,4 +0,0 @@
-<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 5v14l11-7z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

ui/images/replay.svg

@@ -1,3 +0,0 @@
-<svg fill="#1f1f1f" height="24px" viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg">
-  <path d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z"/>
-</svg>

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;

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']);
     }