From d09f9a00191bc3353d760e5d297e8da14893b9fd Mon Sep 17 00:00:00 2001
From: Arjun Rao <a.rao456@gmail.com>
Date: Wed, 22 Jun 2016 00:20:19 -0700
Subject: [PATCH] Add ability to drag controller

---
 inject.css |  4 ++++
 inject.js  | 49 +++++++++++++++++++++++++++++++++++++++++++++++--
 shadow.css | 17 +++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/inject.css b/inject.css
index 7de9928..e5145ba 100644
--- a/inject.css
+++ b/inject.css
@@ -50,3 +50,7 @@
 div.video-wrapper + div.target {
   height: 0;
 }
+
+.vcs-dragging {
+  cursor: -webkit-grabbing;
+}
diff --git a/inject.js b/inject.js
index 9e20ab8..2616ad9 100644
--- a/inject.js
+++ b/inject.js
@@ -98,13 +98,20 @@ chrome.extension.sendMessage({}, function(response) {
             <button data-action="faster">+</button>
             <button data-action="advance" class="rw">»</button>
             <button data-action="close" class="hideButton">x</button>
+            <button data-action="drag" class="dragButton"><></button>
           </span>
         </div>
       `;
       shadow.innerHTML = shadowTemplate;
       forEach.call(shadow.querySelectorAll('button'), function(button) {
-        button.onclick = (e) => {
-          runAction(e.target.dataset['action'], document);
+        if (button.dataset['action'] === 'drag') {
+          button.addEventListener('mousedown', (e) => {
+            runAction(e.target.dataset['action'], document);
+          });
+        } else {
+          button.onclick = (e) => {
+            runAction(e.target.dataset['action'], document);
+          }
         }
       });
 
@@ -234,11 +241,49 @@ chrome.extension.sendMessage({}, function(response) {
         } else if (action === 'close') {
           v.classList.add('vsc-cancelled');
           controller.remove();
+        } else if (action === 'drag') {
+          handleDrag(v, controller);
         }
       }
     });
   }
 
+  function handleDrag(video, controller) {
+    const parentElement = controller.parentElement,
+      boundingRect = parentElement.getBoundingClientRect(),
+      shadowController = controller.shadowRoot.querySelector('#controller'),
+      dragButton = shadowController.querySelector('.dragButton'),
+
+      maxWidth = video.offsetWidth - shadowController.offsetWidth - 100,
+      maxHeight = video.offsetHeight - shadowController.offsetHeight - 100,
+
+      offsetLeft = boundingRect.left + dragButton.offsetLeft + dragButton.offsetWidth,
+      offsetTop = boundingRect.top + dragButton.offsetTop + dragButton.offsetHeight;
+
+    video.classList.add('vcs-dragging');
+    shadowController.classList.add('dragging');
+
+    const startDragging = (e) => {
+      let newLeft = Math.min(maxWidth, Math.max(0, e.clientX - offsetLeft));
+      let newTop = Math.min(maxHeight, 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) {
diff --git a/shadow.css b/shadow.css
index c360e17..005b883 100644
--- a/shadow.css
+++ b/shadow.css
@@ -34,6 +34,15 @@
   margin-left: 1em;
 }
 
+#controller.dragging {
+  opacity: 0.7;
+  cursor: -webkit-grabbing;
+}
+
+#controller.dragging #controls {
+  display: inline;
+}
+
 button {
   cursor: pointer;
   color: black;
@@ -67,3 +76,11 @@ button.hideButton {
   margin: 0 2px 0 15px;
   opacity: 0.5;
 }
+
+button.dragButton {
+  cursor: -webkit-grab;
+}
+
+button.dragButton:active {
+  cursor: -webkit-grabbing;
+}
\ No newline at end of file