fix(ui): Ignore seek touch events on hidden controls

When the controls are hidden, the seek bar should not respond to touch
events.  But since the seek bar is a child element of the controls
panel, it receives the touchstart event before the controls do.  So
there is no good opportunity to stop the propagation of the event.

I tried using the capturing phase of the event, but that didn't work.
So instead, we let the seek bar know if the controls are shown, and if
not, ignore touch and click events.

Further, I changed the mouseup, touchmove, and touchend event handlers
to ignore the events if the corresponding start event (mousedown or
touchstart) was ignored.  That way, you can't accidentally start a
drag operation while the controls are hidden.

Closes shaka-project#2888

Change-Id: I6ee393e3d631ad3d2a8f7314af692004240fb2bd

ui/controls.js

@@ -148,7 +148,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
      */
     this.timeAndSeekRangeTimer_ = new shaka.util.Timer(() => {
       // Suppress timer-based updates if the controls are hidden.
-      if (this.isOpaque_()) {
+      if (this.isOpaque()) {
         this.updateTimeAndSeekRange_();
       }
     });
@@ -1040,7 +1040,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // open.
     this.hideSettingsMenusTimer_.stop();
 
-    if (!this.isOpaque_()) {
+    if (!this.isOpaque()) {
       // Only update the time and seek range on mouse movement if it's the very
       // first movement and we're about to show the controls.  Otherwise, the
       // seek bar will be updated much more rapidly during mouse movement.  Do
@@ -1137,7 +1137,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       return;
     }
 
-    if (this.isOpaque_()) {
+    if (this.isOpaque()) {
       this.lastTouchEventTime_ = Date.now();
       // The controls are showing.
       // Let this event continue and become a click.
@@ -1268,9 +1268,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
   /**
    * @return {boolean}
-   * @private
+   * @export
    */
-  isOpaque_() {
+  isOpaque() {
     if (!this.enabled_) {
       return false;
     }
@@ -1287,7 +1287,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    */
   seek_(currentTime, event) {
     this.video_.currentTime = currentTime;
-    if (this.isOpaque_()) {
+    if (this.isOpaque()) {
       // Only update the time and seek range if it's visible.
       this.updateTimeAndSeekRange_();
     }

ui/range_element.js

@@ -64,34 +64,44 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
     this.parent.appendChild(this.container);
 
     this.eventManager.listen(this.bar, 'mousedown', () => {
-      this.isChanging_ = true;
-      this.onChangeStart();
+      if (this.controls.isOpaque()) {
+        this.isChanging_ = true;
+        this.onChangeStart();
+      }
     });
 
     this.eventManager.listen(this.bar, 'touchstart', (e) => {
-      this.isChanging_ = true;
-      this.setBarValueForTouch_(e);
-      this.onChangeStart();
+      if (this.controls.isOpaque()) {
+        this.isChanging_ = true;
+        this.setBarValueForTouch_(e);
+        this.onChangeStart();
+      }
     });
 
     this.eventManager.listen(this.bar, 'input', () => {
       this.onChange();
     });
 
     this.eventManager.listen(this.bar, 'touchmove', (e) => {
-      this.setBarValueForTouch_(e);
-      this.onChange();
+      if (this.isChanging_) {
+        this.setBarValueForTouch_(e);
+        this.onChange();
+      }
     });
 
     this.eventManager.listen(this.bar, 'touchend', (e) => {
-      this.isChanging_ = false;
-      this.setBarValueForTouch_(e);
-      this.onChangeEnd();
+      if (this.isChanging_) {
+        this.isChanging_ = false;
+        this.setBarValueForTouch_(e);
+        this.onChangeEnd();
+      }
     });
 
     this.eventManager.listen(this.bar, 'mouseup', () => {
-      this.isChanging_ = false;
-      this.onChangeEnd();
+      if (this.isChanging_) {
+        this.isChanging_ = false;
+        this.onChangeEnd();
+      }
     });
   }