Merge pull request #750 from sillero/master

Fixes scrubbing issues with mouse and window

Author: weblancaster

app/index.html

@@ -136,8 +136,10 @@ <h2 class="ui_title">Main</h2>
     <!-- now player -->
     <div class="player" ng-controller="PlayerCtrl">
         <div class="player_inner">
-            <div class="player_progress">
-                <span class="player_progress_bar" id="player-progress"></span>
+            <div class="player_progress_wrapper">
+                <div class="player_progress">
+                    <span class="player_progress_bar" id="player-progress"></span>
+                </div>
             </div>
             <div class="player_details">
                 <img id="playerThumb" src="public/img/song-placeholder.png" alt="" class="player_thumb" ng-click="goToSong($event)">

app/public/js/app.js

@@ -189,6 +189,19 @@ app.run(function(
     window.addEventListener('online',  updateOnlineStatus);
     window.addEventListener('offline', updateOnlineStatus);
 
+    // map blur and focus from the gui.window to jquery events on window
+    var $window = $(window);
+    var gui = require('nw.gui');
+    var guiWindow = gui.Window.get();
+
+    guiWindow.on('blur', function () {
+        $window.trigger('blur');
+    });
+
+    guiWindow.on('focus', function() {
+        $window.trigger('focus');
+    });
+
 });
 
 angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 200);

app/public/js/common/playerService.js

@@ -363,24 +363,55 @@ app.factory('playerService', function(
         }
     }
 
+    /**
+     * Manage scrub interaction / event handling
+     */
+
+    var allowClick = true;
+
     scrub.on('click', function(e) {
         var el = this;
-        scrubTimeTrack(e, el);
+
+        // this stops the click event on window.blur
+        if (allowClick) {
+            scrubTimeTrack(e, el);
+        }
     });
 
+    var $$window = $($window);
+
+    $$window.on({
+        blur: function () { allowClick = false },
+        focus: function () { allowClick = true }
+    })
+
+    function releaseScrub (e) {
+        // delay permission for text selection to allow some room for mouse release by the user
+        setTimeout(function(){
+            document.body.classList.remove('unselectable-text');
+        }, 1000);
+
+        $$window.off('.scrubevents');
+        scrub.off('.scrubevents');
+        scrub.removeClass('mousetrap');
+    }
+
     scrub.on('mousedown', function (e) {
-        scrub.on('mousemove', function (e) {
+        // prevent undesired text select
+        document.body.classList.add('unselectable-text');
+
+        // mouse movement threshold
+        scrub.addClass('mousetrap');
+
+        scrub.on('mousemove.scrubevents', function (e) {
             var el = this;
+
             scrubTimeTrack(e, el);
+            $window.getSelection().empty();
         });
-    });
-
-    scrub.on('mouseup', function (e) {
-        scrub.unbind('mousemove');
-    });
 
-    scrub.on('dragstart', function (e) {
-        e.preventDefault();
+        scrub.on('mouseup.scrubevents mouseleave.scrubevents', releaseScrub);
+        $$window.on('blur.scrubevents', releaseScrub);
     });
 
     return player;

app/public/stylesheets/sass/_components/_default.scss

@@ -128,6 +128,11 @@ input[type=range]:focus::-webkit-slider-runnable-track {
     -webkit-user-select: initial;
 }
 
+.unselectable-text,
+.unselectable-text * {
+    -webkit-user-select: none;
+}
+
 body {
 	#toast-container{
 		& > div {
@@ -147,7 +152,7 @@ body {
 			box-shadow: none;
 		}
 	}
-		
+
 	.toast-message a,
 	.toast-message label {
 		font-size: 0.900em;
@@ -157,7 +162,7 @@ body {
 	.toast-message a:hover {
 		color: #bdc3c7;
 	}
-	
+
 	.toast {
 		background-color: #333;
 	}

app/public/stylesheets/sass/_components/_player.scss

@@ -151,13 +151,17 @@
         }
     }
 }
-
-.player_progress {
+.player_progress_wrapper {
     position: absolute;
-    top: -20px;
+    // 1px horizontal protection area for window mouseleave workaround
+    padding: 0 1px;
+    top: 0;
     left: 0;
-    display: block;
     width: 100%;
+}
+.player_progress {
+    position: relative;
+    top: -20px;
     height: 4px;
     padding: 20px 0 10px;
     overflow: hidden;
@@ -207,6 +211,16 @@
             transition: $transitionInstantValue;
         }
     }
+
+    &.mousetrap {
+        // reset scrub if mouse leaves this area
+        $topThreshold: 100px;
+        $bottomThreshold: 50px;
+
+        top: -$topThreshold;
+        padding-top: $topThreshold;
+        padding-bottom: $bottomThreshold;
+    }
 }
 
 .player_controls span {