mobile-ui: Fix missing chromecast button in Android-Chrome

## Issue:
5119 "Video: Mobile UI + overlay for keyboard shortcut feedback" was disabled because the feature broke the chromecast button in Android Chrome

ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/touchOverlay.js

@@ -104,6 +104,27 @@ class TouchOverlay extends Component {
   handleSingleTap(event) {
     this.removeClass('skip');
     this.toggleClass('show-play-toggle');
+
+    // At the moment, we only have one <video> tag at a time, but just loops it
+    // all to somewhat future-proof it.
+    const videos = document.getElementsByTagName('video');
+    for (let video of videos) {
+      // The Android-Chrome cast button appears when you tap directly on the
+      // video. If anything exists above it, such as our mobile-ui overlay, the
+      // action will be absorbed, causing the button to not appear. So, I've
+      // tried to pass on the tap event by manually dispatching one, but it
+      // didn't work.
+      // Peeking at the Android-Chrome code, the cast button is refreshed when
+      // the 'controllist' is updated. Since we don't use this attribute as we
+      // are using the videojs controls, I'm "toggling" this attribute to force
+      // the cast button to be refreshed.
+      const attr = video.getAttribute('controlslist');
+      if (!attr || attr.indexOf('dummy') === -1) {
+        video.setAttribute('controlslist', 'dummy');
+      } else {
+        video.removeAttribute('controlslist');
+      }
+    }
   }
 
   /**

ui/scss/component/_file-render.scss

@@ -459,6 +459,42 @@
     &.skip {
       background-color: rgba(0, 0, 0, 0.5);
     }
+
+    // Override the original's 'display: block' to avoid the big play button
+    // from being squished to the side:
+    position: absolute;
+  }
+}
+
+video::-internal-media-controls-overlay-cast-button {
+  // Push the cast button above vjs-touch-overlay:
+  z-index: 3;
+
+  // Move it to the upper-right since it will clash with "tap to unmute":
+  left: unset;
+  right: 8px;
+}
+
+.video-js.video-js.vjs-user-inactive {
+  video::-internal-media-controls-overlay-cast-button {
+    // (1) Android-Chrome's original Cast button behavior:
+    // - If video is playing, fade out the button.
+    // - If video is paused and video is tapped, display the button and stay on.
+    // (2) We then injected another behavior:
+    // - Display the button when '.vjs-touch-overlay' is displayed. However,
+    // the 'controlslist' attribute hack that was used to do this results in the
+    // button staying displayed without a fade-out timer.
+    // (3) Ideally, we should sync the '.vjs-touch-overlay' visibility with the
+    // cast button, similar to how to controlBar's visibility is synced above.
+    // But I have no idea how to grab the sibling '.show-play-toggle' into the
+    // css logic.
+    // (4) So, this is the best that I can come up with: Whenever user is idle,
+    // the button goes away. The only downside I know is the scenario of
+    // "overlay is up and video is paused, but button goes away due to idle".
+    // The user just needs to re-tap any empty space on the overlay to get the
+    // Cast button again.
+    opacity: 0;
+    transition: opacity 1s ease;
   }
 }