fix(UI): Don't allow click on the buttons when the UI is not visible (#8396)

Author: avelad

demo/close_button.js

@@ -23,11 +23,15 @@ shakaDemo.CloseButton = class extends shaka.ui.Element {
     super(parent, controls);
     this.button_ = document.createElement('button');
     this.button_.classList.add('material-icons-round');
+    this.button_.classList.add('shaka-no-propagation');
     this.button_.classList.add('close-button');
     this.button_.textContent = 'close'; // Close icon.
     this.parent.appendChild(this.button_);
 
     this.button_.addEventListener('click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       shakaDemoMain.unload();
     });
 

ui/ad_statistics_button.js

@@ -127,6 +127,9 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onClick_();
       this.updateLocalizedStrings_();
     });

ui/airplay_button.js

@@ -81,6 +81,9 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.airplayButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onAirPlayClick_();
     });
 

ui/cast_button.js

@@ -81,6 +81,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.castButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onCastClick_();
     });
 

ui/chapter_selection.js

@@ -154,6 +154,9 @@ shaka.ui.ChapterSelection = class extends shaka.ui.SettingsMenu {
         button.appendChild(span);
 
         this.eventManager.listen(button, 'click', () => {
+          if (!this.controls.isOpaque()) {
+            return;
+          }
           this.video.currentTime = chapter.startTime;
         });
 

ui/controls.js

@@ -406,6 +406,15 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       const cb = (event) => event.stopPropagation();
       this.eventManager_.listen(element, 'click', cb);
       this.eventManager_.listen(element, 'dblclick', cb);
+      if (navigator.maxTouchPoints > 0) {
+        const touchCb = (event) => {
+          if (!this.isOpaque()) {
+            return;
+          }
+          event.stopPropagation();
+        };
+        this.eventManager_.listen(element, 'touchend', touchCb);
+      }
     }
   }
 

ui/fast_forward_button.js

@@ -53,6 +53,9 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.fastForward_();
     });
   }

ui/fullscreen_button.js

@@ -55,6 +55,9 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', async () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       await this.controls.toggleFullScreen();
     });
 

ui/loop_button.js

@@ -73,6 +73,9 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onClick_();
     });
 

ui/mute_button.js

@@ -72,6 +72,9 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       if (this.ad && this.ad.isLinear()) {
         this.ad.setMuted(!this.ad.isMuted());
       } else {

ui/overflow_menu.js

@@ -86,6 +86,9 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.overflowMenuButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onOverflowMenuButtonClick_();
     });
 

ui/pip_button.js

@@ -87,6 +87,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.pipButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.controls.togglePiP();
     });
 

ui/play_button.js

@@ -77,6 +77,9 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     });
 
     this.eventManager.listen(this.button, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.controls.playPausePresentation();
     });
 

ui/presentation_time.js

@@ -35,6 +35,9 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
     this.parent.appendChild(this.currentTime_);
 
     this.eventManager.listen(this.currentTime_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       // Jump to LIVE if the user clicks on the current time.
       if (this.player.isLive()) {
         this.video.currentTime = this.player.seekRange().end;

ui/recenter_vr.js

@@ -74,6 +74,9 @@ shaka.ui.RecenterVRButton = class extends shaka.ui.Element {
     const vr = this.controls.getVR();
 
     this.eventManager.listen(this.recenterVRButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       vr.reset();
     });
 

ui/remote_button.js

@@ -90,6 +90,9 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element {
       });
 
       this.eventManager.listen(this.remoteButton_, 'click', () => {
+        if (!this.controls.isOpaque()) {
+          return;
+        }
         this.video.remote.prompt();
       });
 

ui/rewind_button.js

@@ -54,6 +54,9 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.rewind_();
     });
   }

ui/settings_menu.js

@@ -37,6 +37,9 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.inOverflowMenu_();
 
     this.eventManager.listen(this.button, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onButtonClick_();
     });
   }

ui/toggle_stereoscopic.js

@@ -75,6 +75,9 @@ shaka.ui.ToggleStereoscopicButton = class extends shaka.ui.Element {
     const vr = this.controls.getVR();
 
     this.eventManager.listen(this.toggleStereoscopicButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       vr.toggleStereoscopicMode();
     });