fix(UI): Fix dragging the seek bar seeks and pans the view in VR mode (…

…shaka-project#6677) Fixes shaka-project#6625
rogerpales · May 28, 2024 · e3f85eb · e3f85eb
1 parent 54234f1
commit e3f85eb
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/ui/range_element.js b/ui/range_element.js
@@ -70,11 +70,12 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
     this.container.appendChild(this.bar);
     this.parent.appendChild(this.container);
 
-    this.eventManager.listen(this.bar, 'mousedown', () => {
+    this.eventManager.listen(this.bar, 'mousedown', (e) => {
       if (this.controls.isOpaque()) {
         this.isChanging_ = true;
         this.onChangeStart();
       }
+      e.stopPropagation();
     });
 
     this.eventManager.listen(this.bar, 'touchstart', (e) => {
@@ -83,6 +84,7 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
         this.setBarValueForTouch_(e);
         this.onChangeStart();
       }
+      e.stopPropagation();
     });
 
     this.eventManager.listen(this.bar, 'input', () => {
@@ -94,6 +96,7 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
         this.setBarValueForTouch_(e);
         this.onChange();
       }
+      e.stopPropagation();
     });
 
     this.eventManager.listen(this.bar, 'touchend', (e) => {
@@ -102,6 +105,7 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
         this.setBarValueForTouch_(e);
         this.onChangeEnd();
       }
+      e.stopPropagation();
     });
 
     this.eventManager.listen(this.bar, 'touchcancel', (e) => {
@@ -110,13 +114,15 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
         this.setBarValueForTouch_(e);
         this.onChangeEnd();
       }
+      e.stopPropagation();
     });
 
-    this.eventManager.listen(this.bar, 'mouseup', () => {
+    this.eventManager.listen(this.bar, 'mouseup', (e) => {
       if (this.isChanging_) {
         this.isChanging_ = false;
         this.onChangeEnd();
       }
+      e.stopPropagation();
     });
 
     this.eventManager.listen(this.bar, 'blur', () => {