diff --git a/inject.css b/inject.css index 34f114e..a3d7ca7 100644 --- a/inject.css +++ b/inject.css @@ -13,48 +13,12 @@ cursor: default; z-index: 9999999; opacity: 0.3; - - font-family: Verdana, Geneva, sans-serif; - font-size: 13px !important; - line-height: 1.8em !important; } .tc-videoController:hover { opacity: 0.7; } -.tc-videoController:hover .tc-controls { - display: inline; -} - -.tc-controls { - display: none; - margin-left: 1em; -} - -.tc-controls button { - cursor: pointer; - color: black !important; - background: white !important; - font-weight: bold !important; - margin: 0 2px !important; - border-radius: 5px !important; - padding: 1px 6px 3px 6px !important; - font-size: 14px !important; - line-height: 14px !important; - border: 1px solid white !important; - font-family: "Lucida Console", Monaco, monospace !important; -} - -.tc-videoController button.rw { - opacity: 0.65; -} - -.tc-videoController button.tc-hideButton { - margin: 0 2px 0 20px !important; - opacity: 0.5; -} - /* YouTube player */ .ytp-hide-info-bar .tc-videoController { margin-top: 10px; @@ -91,3 +55,8 @@ .ytp-fullscreen .ytp-webgl-spherical-control { top: 100px !important; } + +/* disable Vimeo video overlay*/ +div.video-wrapper + div.target { + height: 0; +} diff --git a/inject.js b/inject.js index eb05dd9..933cc23 100644 --- a/inject.js +++ b/inject.js @@ -68,8 +68,13 @@ chrome.extension.sendMessage({}, function(response) { var fragment = document.createDocumentFragment(); var container = document.createElement('div'); - var speedIndicator = document.createElement('span'); + var shadow = container.createShadowRoot(); + shadow.innerHTML = ''; + + var speedIndicator = document.createElement('span'); var controls = document.createElement('span'); var fasterButton = document.createElement('button'); var slowerButton = document.createElement('button'); @@ -79,12 +84,32 @@ chrome.extension.sendMessage({}, function(response) { rewindButton.innerHTML = '«'; rewindButton.className = 'rw'; + rewindButton.addEventListener('click', function(e) { + runAction('rewind', document); + }); + fasterButton.textContent = '+'; + fasterButton.addEventListener('click', function(e) { + runAction('faster', document); + }); + slowerButton.textContent = '-'; + slowerButton.addEventListener('click', function(e) { + runAction('slower', document); + }); + advanceButton.innerHTML = '»'; advanceButton.className = 'rw'; + advanceButton.addEventListener('click', function(e) { + runAction('advance', document); + }); + hideButton.textContent = 'x'; hideButton.className = 'tc-hideButton'; + hideButton.addEventListener('click', function(e) { + container.nextSibling.classList.add('vc-cancelled') + container.remove(); + }); controls.appendChild(rewindButton); controls.appendChild(slowerButton); @@ -92,8 +117,8 @@ chrome.extension.sendMessage({}, function(response) { controls.appendChild(advanceButton); controls.appendChild(hideButton); - container.appendChild(speedIndicator); - container.appendChild(controls); + shadow.appendChild(speedIndicator); + shadow.appendChild(controls); container.classList.add('tc-videoController'); controls.classList.add('tc-controls'); @@ -108,35 +133,21 @@ chrome.extension.sendMessage({}, function(response) { speedIndicator.textContent = speed; this.speedIndicator = speedIndicator; - container.addEventListener('click', function(e) { - if (e.target === slowerButton) { - runAction('slower', document) - } else if (e.target === fasterButton) { - runAction('faster', document) - } else if (e.target === rewindButton) { - runAction('rewind', document) - } else if (e.target === advanceButton) { - runAction('advance', document) - } else if (e.target === hideButton) { - container.nextSibling.classList.add('vc-cancelled') - container.remove(); - } - - e.preventDefault(); - e.stopPropagation(); - }, true); - - // Prevent full screen mode on YouTube container.addEventListener('dblclick', function(e) { e.preventDefault(); e.stopPropagation(); }, true); - // Prevent full screen mode on Vimeo container.addEventListener('mousedown', function(e) { e.preventDefault(); e.stopPropagation(); }, true); + + container.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + }, true); + } } @@ -171,15 +182,15 @@ chrome.extension.sendMessage({}, function(response) { } if (keyCode == tc.settings.rewindKeyCode) { - runAction('rewind', document) + runAction('rewind', document, true) } else if (keyCode == tc.settings.advanceKeyCode) { - runAction('advance', document) + runAction('advance', document, true) } else if (keyCode == tc.settings.fasterKeyCode) { - runAction('faster', document) + runAction('faster', document, true) } else if (keyCode == tc.settings.slowerKeyCode) { - runAction('slower', document) + runAction('slower', document, true) } else if (keyCode == tc.settings.resetKeyCode) { - runAction('reset', document) + runAction('reset', document, true) } return false; @@ -219,11 +230,14 @@ chrome.extension.sendMessage({}, function(response) { }); } - function runAction(action, document) { + function runAction(action, document, keyboard = false) { var videoTags = document.getElementsByTagName('video'); videoTags.forEach = Array.prototype.forEach; videoTags.forEach(function(v) { + if (keyboard) + showController(v); + if (!v.classList.contains('vc-cancelled')) { if (action === 'rewind') { v.currentTime -= tc.settings.rewindTime; @@ -242,27 +256,31 @@ chrome.extension.sendMessage({}, function(response) { } else if (action === 'reset') { v.playbackRate = 1.0; } - - // show controller on keyboard input - var controller = v.parentElement - .getElementsByClassName('tc-videoController')[0]; - controller.style.visibility = 'visible'; - if (controllerAnimation != null - && controllerAnimation.playState != 'finished') { - controllerAnimation.cancel(); - } - controllerAnimation = controller.animate([ - {opacity: 0.3}, - {opacity: 0.3}, - {opacity: 0.0}, - ], { - duration: 2000, - iterations: 1, - delay: 0 - }); } }); } + function showController(v) { + var controller = v.closest('.tc-videoController ~ .tc-initialized') + .parentElement.getElementsByClassName('tc-videoController')[0]; + + controller.style.visibility = 'visible'; + if (controllerAnimation != null + && controllerAnimation.playState != 'finished') { + controllerAnimation.cancel(); + } + + // TODO : if controller is visible, do not start animation. + controllerAnimation = controller.animate([ + {opacity: 0.3}, + {opacity: 0.3}, + {opacity: 0.0}, + ], { + duration: 2000, + iterations: 1, + delay: 0 + }); + } + initializeWhenReady(document); }); diff --git a/manifest.json b/manifest.json index c466d0a..a4e53c6 100755 --- a/manifest.json +++ b/manifest.json @@ -38,6 +38,6 @@ } ], "web_accessible_resources": [ - "inject.css" + "inject.css", "shadow.css" ] } diff --git a/shadow.css b/shadow.css new file mode 100644 index 0000000..396e48b --- /dev/null +++ b/shadow.css @@ -0,0 +1,45 @@ +* { + line-height: 1.8em; + font-family: Verdana, Geneva, sans-serif; + font-size: 13px; +} + +:host(:hover) .tc-controls { + display: inline; +} + +.tc-controls { + display: none; + margin-left: 1em; +} + +button { + cursor: pointer; + color: black; + background: white; + font-weight: bold; + margin: 0 2px; + border-radius: 5px; + padding: 1px 6px 3px 6px; + font-size: 14px; + line-height: 14px; + border: 1px solid white; + font-family: "Lucida Console", Monaco, monospace; +} + +button:hover { + opacity: 1.0; +} + +button:active { + background: #ccc; +} + +button.rw { + opacity: 0.65; +} + +button.tc-hideButton { + margin: 0 2px 0 20px; + opacity: 0.5; +}