Merge branch 'drag-controller' of https://github.com/arao456/videospeed into arao456-drag-controller

Some cleanup + refactoring.

inject.css

@@ -1,5 +1,10 @@
-/* Origin specific overrides */
+.vsc-hidden { display: none !important; }
+.vsc-manual {
+  visibility: visible !important;
+  opacity: 1.0 !important;
+}
 
+/* Origin specific overrides */
 /* YouTube player */
 .ytp-hide-info-bar .vsc-controller {
   position: relative;
@@ -17,12 +22,6 @@
   opacity: 1.0;
 }
 
-.vsc-hidden { display: none !important; }
-.vsc-manual {
-  visibility: visible !important;
-  opacity: 1.0 !important;
-}
-
 /* YouTube embedded player */
 /* e.g. https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/ */
 .full-frame .html5-video-player:not(.ytp-fullscreen) .vsc-controller {
@@ -57,6 +56,7 @@ div.video-wrapper + div.target {
   height: 0;
 }
 
+
 /* Fix black overlay on Kickstarter */
 div.video-player.has_played.vertically_center:before, div.legacy-video-player.has_played.vertically_center:before {
   content: none !important;

inject.js

@@ -101,7 +101,7 @@ chrome.extension.sendMessage({}, function(response) {
         </style>
 
         <div id="controller" style="top:${top}; left:${left}">
-          <span>${speed}</span>
+          <span data-action="drag" class="draggable">${speed}</span>
           <span id="controls">
             <button data-action="rewind" class="rw">«</button>
             <button data-action="slower">-</button>
@@ -112,6 +112,10 @@ chrome.extension.sendMessage({}, function(response) {
         </div>
       `;
       shadow.innerHTML = shadowTemplate;
+      shadow.querySelector('.draggable').addEventListener('mousedown', (e) => {
+        runAction(e.target.dataset['action'], document);
+      });
+
       forEach.call(shadow.querySelectorAll('button'), function(button) {
         button.onclick = (e) => {
           runAction(e.target.dataset['action'], document);
@@ -146,7 +150,6 @@ chrome.extension.sendMessage({}, function(response) {
 
       var regexp = new RegExp(escapeStringRegExp(match));
       if (regexp.test(location.href)) {
-        console.log("SKIP", regexp, location.href)
         blacklisted = true;
         return;
       }
@@ -294,11 +297,46 @@ chrome.extension.sendMessage({}, function(response) {
         } else if (action === 'display') {
           controller.classList.add('vsc-manual');
           controller.classList.toggle('vsc-hidden');
+        } else if (action === 'drag') {
+          handleDrag(v, controller);
         }
       }
     });
   }
 
+ function handleDrag(video, controller) {
+    const parentElement = controller.parentElement,
+      boundRect = parentElement.getBoundingClientRect(),
+      shadowController = controller.shadowRoot.querySelector('#controller'),
+      drag = shadowController.querySelector('.draggable'),
+      offsetLeft = boundRect.left + drag.offsetLeft + drag.offsetWidth,
+      offsetTop = boundRect.top + drag.offsetTop + drag.offsetHeight;
+
+    video.classList.add('vcs-dragging');
+    shadowController.classList.add('dragging');
+
+    const startDragging = (e) => {
+      let newLeft = Math.max(0, e.clientX - offsetLeft);
+      let newTop = Math.max(0, e.clientY - offsetTop);
+
+      shadowController.style.left = newLeft + 'px';
+      shadowController.style.top = newTop + 'px';
+    }
+
+    const stopDragging = () => {
+      parentElement.removeEventListener('mousemove', startDragging);
+      parentElement.removeEventListener('mouseup', stopDragging);
+      parentElement.removeEventListener('mouseleave', stopDragging);
+
+      shadowController.classList.remove('dragging');
+      video.classList.remove('vcs-dragging');
+    }
+
+    parentElement.addEventListener('mouseup',stopDragging);
+    parentElement.addEventListener('mouseleave',stopDragging);
+    parentElement.addEventListener('mousemove', startDragging);
+  }
+
   var timer;
   var animation = false;
   function showController(controller) {

shadow.css

@@ -29,9 +29,29 @@
   opacity: 0.7;
 }
 
+#controller:hover > .draggable {
+  margin-right: 0.8em;
+}
+
 #controls {
   display: none;
-  margin-left: 1em;
+}
+
+#controller.dragging {
+  cursor: -webkit-grabbing;
+  opacity: 0.7;
+}
+
+#controller.dragging #controls {
+  display: inline;
+}
+
+.draggable {
+  cursor: -webkit-grab;
+}
+
+.draggable:active {
+  cursor: -webkit-grabbing;
 }
 
 button {
@@ -45,6 +65,7 @@ button {
   line-height: 14px;
   border: 1px solid white;
   font-family: "Lucida Console", Monaco, monospace;
+  margin-bottom: 2px;
 }
 
 button:focus {
@@ -64,6 +85,6 @@ button.rw {
 }
 
 button.hideButton {
-  margin: 0 2px 0 15px;
+  margin-right: 2px;
   opacity: 0.5;
 }