joshpatra/videospeed
1
0
Fork 0
mirror of https://github.com/SoPat712/videospeed.git synced 2025-08-21 18:08:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

better way of following mouse on controller drag

Browse Source
This commit is contained in:
Roly Fentanes
2017-11-12 17:47:53 -05:00
committed by Ilya Grigorik
parent 949b9157e4
commit 371168636f
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
inject.js
View File

@@ -133,12 +133,12 @@ chrome.runtime.sendMessage({}, function(response) {
`; `;
shadow.innerHTML = shadowTemplate; shadow.innerHTML = shadowTemplate;
shadow.querySelector('.draggable').addEventListener('mousedown', (e) => { shadow.querySelector('.draggable').addEventListener('mousedown', (e) => {
runAction(e.target.dataset['action'], document); runAction(e.target.dataset['action'], document, false, e);
}); });
forEach.call(shadow.querySelectorAll('button'), function(button) { forEach.call(shadow.querySelectorAll('button'), function(button) {
button.onclick = (e) => { button.onclick = (e) => {
runAction(e.target.dataset['action'], document); runAction(e.target.dataset['action'], document, false, e);
} }
}); });
@@ -312,7 +312,7 @@ chrome.runtime.sendMessage({}, function(response) {
}); });
} }
function runAction(action, document, keyboard) { function runAction(action, document, keyboard, e) {
var videoTags = document.getElementsByTagName('video'); var videoTags = document.getElementsByTagName('video');
videoTags.forEach = Array.prototype.forEach; videoTags.forEach = Array.prototype.forEach;
@@ -345,7 +345,7 @@ chrome.runtime.sendMessage({}, function(response) {
controller.classList.add('vsc-manual'); controller.classList.add('vsc-manual');
controller.classList.toggle('vsc-hidden'); controller.classList.toggle('vsc-hidden');
} else if (action === 'drag') { } else if (action === 'drag') {
handleDrag(v, controller); handleDrag(v, controller, e);
} else if (action === 'fast') { } else if (action === 'fast') {
resetSpeed(v, tc.settings.fastSpeed); resetSpeed(v, tc.settings.fastSpeed);
} }
@@ -363,17 +363,32 @@ chrome.runtime.sendMessage({}, function(response) {
} }
} }
function handleDrag(video, controller) { function handleDrag(video, controller, e) {
const parentElement = controller.parentElement, const shadowController = controller.shadowRoot.querySelector('#controller');
shadowController = controller.shadowRoot.querySelector('#controller');
// Find nearest parent of same size as video parent.
var parentElement = controller.parentElement;
while (parentElement.parentNode &&
parentElement.parentNode.offsetHeight === parentElement.offsetHeight &&
parentElement.parentNode.offsetWidth === parentElement.offsetWidth) {
parentElement = parentElement.parentNode;
}
video.classList.add('vcs-dragging'); video.classList.add('vcs-dragging');
shadowController.classList.add('dragging'); shadowController.classList.add('dragging');
const initialMouseXY = [e.clientX, e.clientY];
const initialControllerXY = [
parseInt(shadowController.style.left),
parseInt(shadowController.style.top)
];
const startDragging = (e) => { const startDragging = (e) => {
let style = shadowController.style; let style = shadowController.style;
style.left = parseInt(style.left) + e.movementX + 'px'; let dx = e.clientX - initialMouseXY[0];
style.top = parseInt(style.top) + e.movementY + 'px'; let dy = e.clientY -initialMouseXY[1];
style.left = (initialControllerXY[0] + dx) + 'px';
style.top = (initialControllerXY[1] + dy) + 'px';
} }
const stopDragging = () => { const stopDragging = () => {