Merge pull request #597 from jwplayer/bugfix/scroll-start

Mobile shouldn't start playback when user scrolls
jwplayer · Jul 6, 2015 · 3db9ab3 · 3db9ab3
2 parents 4eaff08 + fc8faba
commit 3db9ab3
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 186 deletions.
diff --git a/src/js/utils/ui.js b/src/js/utils/ui.js
@@ -6,10 +6,61 @@ define([
 ], function(Events, events, _, utils) {
     var TouchEvent = window.TouchEvent || {};
 
+    function isRightClick(evt) {
+        var e = evt || window.event;
+
+        if ('which' in e) {
+            // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
+            return (e.which === 3);
+        } else if ('button' in e) {
+            // IE and Opera
+            return (e.button === 2);
+        }
+
+        return false;
+    }
+
+    function normalizeUIEvent(type, srcEvent, target) {
+        var source;
+        if(srcEvent instanceof MouseEvent || (!srcEvent.touches && !srcEvent.changedTouches)) {
+            source = srcEvent;
+        } else {
+            if (srcEvent.touches && srcEvent.touches.length) {
+                source = srcEvent.touches[0];
+            } else {
+                source = srcEvent.changedTouches[0];
+            }
+        }
+        return {
+            type: type,
+            target: srcEvent.target,
+            currentTarget: target,
+            pageX: source.pageX,
+            pageY: source.pageY
+        };
+    }
+
+    // Preventdefault to prevent click events
+    function preventDefault(evt) {
+        // Because sendEvent from utils.eventdispatcher clones evt objects instead of passing them
+        //  we cannot call evt.preventDefault() on them
+        if (! (evt instanceof MouseEvent) && ! (evt instanceof TouchEvent)) {
+            return;
+        }
+
+        if (evt.preventManipulation) {
+            evt.preventManipulation();
+        }
+        // When cancelable is false, it means the page is likely scrolling
+        if (evt.cancelable && evt.preventDefault) {
+            evt.preventDefault();
+        }
+    }
+
     var UI = function (elem, options) {
         var _elem = elem,
             _enableDoubleTap = (options && options.enableDoubleTap), // and double click
-            _enableDrag = (options && options.enableDrag),
+            _preventScrolling = (options && options.preventScrolling),
             _hasMoved = false,
             _lastClickTime = 0,
             _doubleClickDelay = 300,
@@ -24,34 +75,18 @@ define([
         }
         elem.addEventListener('touchstart', interactStartHandler);
 
-        function isRightClick(evt) {
-            var e = evt || window.event;
-
-            if ('which' in e) {
-                // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
-                return (e.which === 3);
-            } else if ('button' in e) {
-                // IE and Opera
-                return (e.button === 2);
-            }
-
-            return false;
-        }
-
         function interactStartHandler(evt) {
             var isMouseEvt = evt instanceof MouseEvent;
             _touchListenerTarget = evt.target;
 
-            if(_enableDrag) {
-                if(!isMouseEvt || (isMouseEvt && !isRightClick(evt))){
-                    if(_isDesktop){
-                        document.addEventListener('mousemove', interactDragHandler);
-                    }
-                    _touchListenerTarget.addEventListener('touchmove', interactDragHandler);
+            if(!isMouseEvt || (isMouseEvt && !isRightClick(evt))){
+                if(_isDesktop){
+                    document.addEventListener('mousemove', interactDragHandler);
                 }
+                _touchListenerTarget.addEventListener('touchmove', interactDragHandler);
             }
 
-            if(_isDesktop){
+            if (_isDesktop){
                 document.addEventListener('mouseup', interactEndHandler);
             }
             _touchListenerTarget.addEventListener('touchcancel', interactEndHandler);
@@ -70,7 +105,9 @@ define([
             }
 
             // Prevent scrolling the screen dragging while dragging on mobile.
-            preventDefault(evt);
+            if (_preventScrolling) {
+                preventDefault(evt);
+            }
         }
 
         function interactEndHandler(evt) {
@@ -103,57 +140,21 @@ define([
             _hasMoved = false;
         }
 
-        function normalizeUIEvent(type, srcEvent) {
-            var source;
-            if(srcEvent instanceof MouseEvent || (!srcEvent.touches && !srcEvent.changedTouches)) {
-                source = srcEvent;
-            } else {
-                if (srcEvent.touches && srcEvent.touches.length) {
-                    source = srcEvent.touches[0];
-                } else {
-                    source = srcEvent.changedTouches[0];
-                }
-            }
-            return {
-                type: type,
-                target: srcEvent.target,
-                currentTarget: _elem,
-                pageX: source.pageX,
-                pageY: source.pageY
-            };
-        }
-
-        // Preventdefault to prevent click events
-        function preventDefault(evt) {
-            // Because sendEvent from utils.eventdispatcher clones evt objects instead of passing them
-            //  we cannot call evt.preventDefault() on them
-            if (! (evt instanceof MouseEvent) && ! (evt instanceof TouchEvent)) {
-                return;
-            }
-
-            if (evt.preventManipulation) {
-                evt.preventManipulation();
-            }
-            if (evt.preventDefault) {
-                evt.preventDefault();
-            }
-        }
-
         var self = this;
         function triggerEvent(type, srcEvent) {
             var evt;
             if( _enableDoubleTap && (type === events.touchEvents.CLICK || type === events.touchEvents.TAP)){
                 if(_.now() - _lastClickTime < _doubleClickDelay) {
                     var doubleType = (type === events.touchEvents.CLICK) ?
                         events.touchEvents.DOUBLE_CLICK : events.touchEvents.DOUBLE_TAP;
-                    evt = normalizeUIEvent(doubleType, srcEvent);
+                    evt = normalizeUIEvent(doubleType, srcEvent, _elem);
                     self.trigger(doubleType, evt);
                     _lastClickTime = 0;
                 } else {
                     _lastClickTime = _.now();
                 }
             }
-            evt = normalizeUIEvent(type, srcEvent);
+            evt = normalizeUIEvent(type, srcEvent, _elem);
             self.trigger(type, evt);
         }
 

diff --git a/src/js/view/clickhandler.js b/src/js/view/clickhandler.js
@@ -4,6 +4,7 @@ define([
     'utils/backbone.events',
     'utils/underscore'
 ], function(UI, events, Events, _) {
+
     var ClickHandler = function(_model, _ele) {
         var _display,
             _alternateClickHandler,
@@ -15,14 +16,15 @@ define([
 
         this.element = function() { return _display; };
 
-        var userInteract = new UI(_display, {'enableDoubleTap': true});
+        var userInteract = new UI(_display, {enableDoubleTap: true});
         userInteract.on('click tap', _clickHandler);
         userInteract.on('doubleClick doubleTap', _doubleClickHandler);
 
         this.clickHandler = _clickHandler;
 
         var _this = this;
         function _clickHandler(evt) {
+
             if (_alternateClickHandler) {
                 _alternateClickHandler(evt);
                 return;

diff --git a/src/js/view/components/slider.js b/src/js/view/components/slider.js
@@ -31,7 +31,7 @@ define([
             this.elementProgress = this.el.getElementsByClassName('jw-progress')[0];
             this.elementThumb = this.el.getElementsByClassName('jw-knob')[0];
 
-            this.userInteract = new UI(this.element(), {enableDrag: true});
+            this.userInteract = new UI(this.element(), {preventScrolling : true});
 
             this.userInteract.on('dragStart', this.dragStartListener);
             this.userInteract.on('drag', this.dragMoveListener);

diff --git a/src/js/view/touch.js b/src/js/view/touch.js