From 9014509205e02f5dd616f93d59897b23e68cf1f6 Mon Sep 17 00:00:00 2001
From: Gustavo Sillero <gustavo.sillero@iwsbrazil.com>
Date: Sat, 23 Apr 2016 03:56:44 -0300
Subject: [PATCH] Fixes scrubbing issues with mouse and window

---
 app/index.html                                |  6 ++-
 app/public/js/app.js                          | 13 +++++
 app/public/js/common/playerService.js         | 49 +++++++++++++++----
 .../sass/_components/_default.scss            |  9 +++-
 .../stylesheets/sass/_components/_player.scss | 22 +++++++--
 5 files changed, 82 insertions(+), 17 deletions(-)

diff --git a/app/index.html b/app/index.html
index 9b69fce5..5c3df24f 100644
--- a/app/index.html
+++ b/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)">
diff --git a/app/public/js/app.js b/app/public/js/app.js
index afef539e..300eb585 100755
--- a/app/public/js/app.js
+++ b/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);
diff --git a/app/public/js/common/playerService.js b/app/public/js/common/playerService.js
index 7c314e85..e4da8595 100644
--- a/app/public/js/common/playerService.js
+++ b/app/public/js/common/playerService.js
@@ -319,24 +319,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;
diff --git a/app/public/stylesheets/sass/_components/_default.scss b/app/public/stylesheets/sass/_components/_default.scss
index e62a6504..25e2042b 100644
--- a/app/public/stylesheets/sass/_components/_default.scss
+++ b/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;
 	}
diff --git a/app/public/stylesheets/sass/_components/_player.scss b/app/public/stylesheets/sass/_components/_player.scss
index b9bad221..d9c7ece3 100644
--- a/app/public/stylesheets/sass/_components/_player.scss
+++ b/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 {