feat(UI): Allow hide/show controls on tap (#8398)

Close #6490

Author: avelad

ui/controls.js

@@ -1677,7 +1677,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     if (this.isOpaque()) {
       this.lastTouchEventTime_ = Date.now();
       // The controls are showing.
-      // Let this event continue and become a click.
+      this.onContainerClick(/* fromTouchEvent= */ true);
+      // Stop this event from becoming a click event.
+      event.cancelable && event.preventDefault();
     } else {
       // The controls are hidden, so show them.
       this.onMouseMove_(event);
@@ -1688,8 +1690,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
   /**
    * Manage the container click.
+   * @param {boolean=} fromTouchEvent
    */
-  onContainerClick() {
+  onContainerClick(fromTouchEvent = false) {
     if (!this.enabled_ || this.isPlayingVR()) {
       return;
     }
@@ -1698,6 +1701,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.hideSettingsMenusTimer_.tickNow();
     } else if (this.config_.singleClickForPlayAndPause) {
       this.playPausePresentation();
+    } else if (fromTouchEvent && this.isOpaque()) {
+      this.hideUI();
     }
   }
 

ui/hidden_seek_button.js

@@ -55,13 +55,14 @@ shaka.ui.HiddenSeekButton = class extends shaka.ui.Element {
     this.hideSeekButtonContainerTimer_ = new shaka.util.Timer(() => {
       const seekSeconds = parseInt(this.seekValue_.textContent, 10);
       if (seekSeconds === 0) {
-        this.controls.onContainerClick();
+        this.controls.onContainerClick(/* fromTouchEvent= */ true);
       }
       this.hideSeekButtonContainer_();
     });
 
     /** @protected {!HTMLElement} */
     this.seekContainer = shaka.util.Dom.createHTMLElement('div');
+    this.seekContainer.classList.add('shaka-no-propagation');
     this.parent.appendChild(this.seekContainer);
 
     /** @private {!HTMLElement} */

ui/ui.js

@@ -333,7 +333,7 @@ shaka.ui.Overlay = class {
       fullScreenElement: this.videoContainer_,
       preferDocumentPictureInPicture: true,
       showAudioChannelCountVariants: true,
-      seekOnTaps: navigator.maxTouchPoints > 0,
+      seekOnTaps: false,
       tapSeekDistance: 10,
       refreshTickInSeconds: 0.125,
       displayInVrMode: false,
@@ -356,6 +356,8 @@ shaka.ui.Overlay = class {
     // This is in line with default styles in Chrome.
     if (this.isMobile()) {
       config.addBigPlayButton = true;
+      config.singleClickForPlayAndPause = false;
+      config.seekOnTaps = true;
       config.controlPanelElements = config.controlPanelElements.filter(
           (name) => name != 'play_pause' && name != 'volume');
     }