From 704fa15bd4fb95196e4e3a6e13b04ca9b840239c Mon Sep 17 00:00:00 2001 From: Victor Savinov Date: Wed, 3 Nov 2021 16:41:20 +0300 Subject: [PATCH] v1.1 --- content-script.js | 284 +++++++++++++++++++++++++++++++-------------- content-styles.css | 21 ++-- ui/styles.css | 52 +++++++-- 3 files changed, 251 insertions(+), 106 deletions(-) diff --git a/content-script.js b/content-script.js index 4d56b3a..b6acaf6 100644 --- a/content-script.js +++ b/content-script.js @@ -53,9 +53,11 @@ extension.storage.get = function (name) { --------------------------------------------------------------*/ extension.storage.set = function (name, value) { - this.data[name] = value; + var object = {}; - chrome.storage.local.set(this.data[name]); + object[name] = value; + + chrome.storage.local.set(object); }; @@ -138,18 +140,25 @@ extension.handlers.video = function (type, element) { extension.videos.push(element); extension.rects.push(element.getBoundingClientRect()); + element.addEventListener('timeupdate', function () { + if ( + this.currentTime < this.start_at || + this.currentTime > this.end_at + ) { + this.currentTime = this.start_at; + } + + extension.ui.play_progress_bar.style.width = this.currentTime / (this.duration / 100) + '%'; + }); + element.addEventListener('resize', function () { extension.rects[extension.videos.indexOf(this)] = element.getBoundingClientRect(); }); - - //console.log(type, element); } } else if (type === 'removed') { if (index !== -1) { extension.videos.splice(index, 1); extension.rects.splice(index, 1); - - //console.log(type, element); } } } @@ -161,7 +170,9 @@ extension.handlers.video = function (type, element) { --------------------------------------------------------------*/ extension.ui = function () { - var collapse_button = document.createElement('div'), + var container = document.createElement('div'), + panel = document.createElement('div'), + collapse_button = document.createElement('div'), drag_and_drop_button = document.createElement('div'), start_at_button = document.createElement('div'), start_at = document.createElement('input'), @@ -172,11 +183,23 @@ extension.ui = function () { end_at_button = document.createElement('div'), end_at = document.createElement('input'); - this.ui = document.createElement('div'); - this.panel = document.createElement('div'); - - this.ui.className = 'looper'; - + this.ui = { + container, + panel, + collapse_button, + drag_and_drop_button, + start_at_button, + start_at, + progress_bar, + progress_bar_padding, + play_progress_bar, + hover_progress_bar, + end_at_button, + end_at + }; + + container.className = 'looper'; + panel.className = 'looper__info-panel'; collapse_button.className = 'looper__show-hide'; drag_and_drop_button.className = 'looper__drag-and-drop'; @@ -184,43 +207,54 @@ extension.ui = function () { drag_and_drop_button.innerHTML = ''; collapse_button.addEventListener('click', function () { - this.parentNode.classList.toggle('looper__info-panel--collapsed'); + var panel = extension.ui.panel; + + panel.classList.toggle('looper__info-panel--collapsed'); - chrome.storage.local.set({ - hidden: this.parentNode.classList.contains('looper__info-panel--collapsed') - }); + extension.storage.set('hidden', panel.classList.contains('looper__info-panel--collapsed')); }); - function mousemove(event) { - var x = event.clientX - ui.info_panel.offsetWidth - ui.container.offsetLeft, - y = event.clientY - ui.container.offsetTop; + function move(x, y) { + var ui = extension.ui; - event.preventDefault(); + if (!x && !y) { + x = extension.storage.data.position.x; + y = extension.storage.data.position.y; + } - if (x < -1) { - x = -1; - } else if (x + ui.info_panel.offsetWidth > ui.container.offsetWidth - 1) { - x = ui.container.offsetWidth - ui.info_panel.offsetWidth - 1; + if (x < 4) { + x = 4; + } else if (x + ui.panel.offsetWidth > ui.container.offsetWidth - 4) { + x = ui.container.offsetWidth - ui.panel.offsetWidth - 4; } - if (y < -1) { - y = -1; - } else if (y + ui.info_panel.offsetHeight > ui.container.offsetHeight - 1) { - y = ui.container.offsetHeight - ui.info_panel.offsetHeight - 1; + if (y < 4) { + y = 4; + } else if (y + ui.panel.offsetHeight > ui.container.offsetHeight - 4) { + y = ui.container.offsetHeight - ui.panel.offsetHeight - 4; } - if (typeof storage.position !== 'object') { - storage.position = { + if (typeof extension.storage.data.position !== 'object') { + extension.storage.data.position = { x: 0, y: 0 }; } - storage.position.x = event.clientX; - storage.position.y = event.clientY; + extension.storage.data.position.x = x; + extension.storage.data.position.y = y; - ui.info_panel.style.left = x + 'px'; - ui.info_panel.style.top = y + 'px'; + ui.panel.style.left = x + 'px'; + ui.panel.style.top = y + 'px'; + } + + function mousemove(event) { + var x = event.clientX - extension.ui.panel.offsetWidth - extension.ui.container.offsetLeft, + y = event.clientY - extension.ui.container.offsetTop; + + event.preventDefault(); + + move(x, y); return false; } @@ -229,20 +263,22 @@ extension.ui = function () { window.removeEventListener('mousemove', mousemove); window.removeEventListener('mouseup', mouseup); - chrome.storage.local.set({ - position: storage.position - }, function () { - changing = false; - }); + extension.ui.container.classList.remove('looper--dragging'); + + extension.storage.set('position', extension.storage.data.position); } + this.ui.move = move; + drag_and_drop_button.addEventListener('mousedown', function (event) { - event.preventDefault(); + if (event.button === 0) { + event.preventDefault(); - changing = true; + extension.ui.container.classList.add('looper--dragging'); - window.addEventListener('mousemove', mousemove); - window.addEventListener('mouseup', mouseup); + window.addEventListener('mousemove', mousemove); + window.addEventListener('mouseup', mouseup); + } }); start_at.type = 'text'; @@ -258,22 +294,22 @@ extension.ui = function () { end_at.className = 'looper__end-at'; progress_bar_padding.addEventListener('mouseout', function () { - ui.hover_progress_bar.style.opacity = ''; + extension.ui.hover_progress_bar.style.opacity = ''; }); progress_bar_padding.addEventListener('mousemove', function (event) { - ui.hover_progress_bar.style.opacity = '1'; - ui.hover_progress_bar.style.width = event.layerX / (ui.progress_bar.offsetWidth / 100) + '%'; + extension.ui.hover_progress_bar.style.opacity = '1'; + extension.ui.hover_progress_bar.style.width = event.layerX / (extension.ui.progress_bar.offsetWidth / 100) + '%'; }); progress_bar_padding.addEventListener('click', function (event) { - active.element.currentTime = event.layerX / (ui.progress_bar.offsetWidth / 100) * (active.element.duration / 100); - ui.play_progress_bar.style.width = active.element.currentTime / (active.element.duration / 100) + '%'; + extension.video.currentTime = event.layerX / (extension.ui.progress_bar.offsetWidth / 100) * (extension.video.duration / 100); + extension.ui.play_progress_bar.style.width = extension.video.currentTime / (extension.video.duration / 100) + '%'; }); - start_at_button.addEventListener('mousedown', function () { + start_at_button.addEventListener('mousedown', function (event) { function mousemove(event) { - var x = event.clientX - (ui.info_panel.offsetLeft + ui.container.offsetLeft + 16); + var x = event.clientX - (extension.ui.panel.offsetLeft + extension.ui.container.offsetLeft + 16); if (x < 0) { x = 0; @@ -283,11 +319,11 @@ extension.ui = function () { x = progress_bar.offsetWidth - end_at_button.offsetWidth; } - active.element.start_at = Math.floor(x / (progress_bar.offsetWidth / 100) * (active.element.duration / 100)); + extension.video.start_at = Math.floor(x / (progress_bar.offsetWidth / 100) * (extension.video.duration / 100)); - ui.start_at.value = active.element.start_at; + extension.ui.start_at.value = extension.video.start_at; - ui.start_at_button.style.width = x + 'px'; + extension.ui.start_at_button.style.width = x + 'px'; event.preventDefault(); event.stopPropagation(); @@ -300,13 +336,17 @@ extension.ui = function () { window.removeEventListener('mouseup', mouseup); } - window.addEventListener('mousemove', mousemove); - window.addEventListener('mouseup', mouseup); + if (event.button === 0) { + event.preventDefault(); + + window.addEventListener('mousemove', mousemove); + window.addEventListener('mouseup', mouseup); + } }); end_at_button.addEventListener('mousedown', function () { function mousemove(event) { - var x = progress_bar.offsetWidth - (event.clientX - (this.panel.offsetLeft + this.ui.offsetLeft + 16)); + var x = progress_bar.offsetWidth - (event.clientX - (extension.ui.panel.offsetLeft + extension.ui.container.offsetLeft + 16)); if (x < 0) { x = 0; @@ -316,11 +356,11 @@ extension.ui = function () { x = progress_bar.offsetWidth - start_at_button.offsetWidth; } - active.element.end_at = Math.floor((100 - x / (progress_bar.offsetWidth / 100)) * (active.element.duration / 100)); + extension.video.end_at = Math.floor((100 - x / (progress_bar.offsetWidth / 100)) * (extension.video.duration / 100)); - ui.end_at.value = active.element.end_at; + extension.ui.end_at.value = extension.video.end_at; - ui.end_at_button.style.width = x + 'px'; + extension.ui.end_at_button.style.width = x + 'px'; event.preventDefault(); event.stopPropagation(); @@ -333,10 +373,28 @@ extension.ui = function () { window.removeEventListener('mouseup', mouseup); } - window.addEventListener('mousemove', mousemove); - window.addEventListener('mouseup', mouseup); + if (event.button === 0) { + event.preventDefault(); + + window.addEventListener('mousemove', mousemove); + window.addEventListener('mouseup', mouseup); + } }); + if (extension.storage.data.position) { + var x = extension.storage.data.position.x, + y = extension.storage.data.position.y; + + if (x < 0) { + x = 0; + } else if (x > extension.ui.container.offsetWidth) { + x = extension.ui.container.offsetWidth - extension.ui.container.offsetWidth - 4; + } + + extension.ui.panel.style.left = x + 'px'; + extension.ui.panel.style.top = y + 'px'; + } + start_at_button.appendChild(start_at); end_at_button.appendChild(end_at); progress_bar.appendChild(hover_progress_bar); @@ -344,21 +402,40 @@ extension.ui = function () { progress_bar.appendChild(progress_bar_padding); progress_bar.appendChild(start_at_button); progress_bar.appendChild(end_at_button); - this.panel.appendChild(progress_bar); - - ui.start_at_button = start_at_button; - ui.end_at_button = end_at_button; - ui.start_at = start_at; - ui.end_at = end_at; - ui.progress_bar = progress_bar; - ui.play_progress_bar = play_progress_bar; - ui.hover_progress_bar = hover_progress_bar; - - this.panel.appendChild(collapse_button); - this.panel.appendChild(drag_and_drop_button); - this.ui.appendChild(this.panel); - - document.body.appendChild(this.ui); + panel.appendChild(progress_bar); + panel.appendChild(collapse_button); + panel.appendChild(drag_and_drop_button); + container.appendChild(panel); + document.body.appendChild(container); + + this.ui.styles = function () { + var storage = extension.storage.data, + panel = extension.ui.panel; + + if (storage.hidden === true) { + panel.classList.add('looper__info-panel--collapsed'); + } else { + panel.classList.remove('looper__info-panel--collapsed'); + } + + if (storage.hasOwnProperty('opacity')) { + panel.style.opacity = storage.opacity; + } + + if (storage.hasOwnProperty('blur')) { + panel.style.backdropFilter = 'blur(' + storage.blur + 'px)'; + } + + if (storage.hasOwnProperty('background_color')) { + panel.style.backgroundColor = 'rgb(' + storage.background_color.join(',') + ')'; + } + + if (storage.hasOwnProperty('text_color')) { + panel.style.color = 'rgb(' + storage.text_color.join(',') + ')'; + } + }; + + this.ui.styles(); }; @@ -371,25 +448,30 @@ extension.cursor = function () { y = extension.mouse.y, collised = false; + extension.video = false; + for (var i = 0, l = extension.rects.length; i < l; i++) { var rect = extension.rects[i]; if (x > rect.left && y > rect.top) { if (x < rect.left + rect.width && y < rect.top + rect.height) { collised = rect; + + extension.video = extension.videos[i]; } } } - if (extension.ui.nodeName) { + if (extension.ui.container) { if (collised) { - extension.ui.style.display = 'block'; - extension.ui.style.left = collised.left + 'px'; - extension.ui.style.top = collised.top + 'px'; - extension.ui.style.width = collised.width + 'px'; - extension.ui.style.height = collised.height + 'px'; + extension.ui.container.style.display = 'block'; + extension.ui.container.style.left = collised.left + 'px'; + extension.ui.container.style.top = collised.top + 'px'; + extension.ui.container.style.width = collised.width + 'px'; + extension.ui.container.style.height = collised.height + 'px'; + extension.ui.move(); } else { - extension.ui.style.display = ''; + extension.ui.container.style.display = ''; } } }; @@ -417,15 +499,33 @@ window.addEventListener('scroll', function (event) { # INITIALIZATION --------------------------------------------------------------*/ +chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { + if (message.action === 'init') { + if (window === window.top) { + sendResponse(extension.hostname); + } + } +}); + +chrome.storage.onChanged.addListener(function (changes) { + for (var key in changes) { + extension.storage[key] = changes[key].newValue; + } + + if (extension.ui.styles) { + extension.ui.styles(); + } +}); + extension.observer(); -document.addEventListener('DOMContentLoaded', function () { +function init() { extension.ui(); extension.interval = setInterval(function () { extension.update(); }, 100); -}); +} chrome.runtime.sendMessage({ action: 'get-tab-hostname' @@ -433,6 +533,18 @@ chrome.runtime.sendMessage({ extension.hostname = response.hostname; extension.storage.import(function () { - + if (document.body) { + init(); + } else { + document.addEventListener('DOMContentLoaded', init); + } }); +}); + +document.addEventListener('fullscreenchange', function () { + if (document.fullscreenElement && extension.storage.hide_in_fullscreen === true) { + extension.ui.panel.style.display = 'none'; + } else { + extension.ui.panel.style.display = ''; + } }); \ No newline at end of file diff --git a/content-styles.css b/content-styles.css index 27e2dd4..24e914a 100644 --- a/content-styles.css +++ b/content-styles.css @@ -25,7 +25,8 @@ box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #fff !important; } -.looper--visible +.looper--visible, +.looper--dragging { display: block !important; } @@ -45,8 +46,8 @@ font: 400 16px monospace !important; position: absolute !important; - top: 16px !important; - left: 16px !important; + top: 4px; + left: 4px; display: flex !important; @@ -55,13 +56,13 @@ pointer-events: all !important; - color: #fff !important; + color: #fff; border: 1px solid rgba(255,255,255,.2) !important; - background: rgba(0,0,0,.85) !important; + background: rgba(0,0,0,.85); align-items: center !important; justify-content: space-between !important; - backdrop-filter: blur(8px) !important; + backdrop-filter: blur(8px); } .looper__info-panel--collapsed @@ -108,7 +109,7 @@ position: absolute !important; bottom: 0 !important; - width: 0 !important; + width: 0; height: 3px !important; transition: opacity .15s !important; @@ -123,12 +124,12 @@ position: absolute !important; bottom: 0 !important; - width: 0 !important; + width: 0; height: 3px !important; pointer-events: none !important; - background: #e94a35 !important; + background: #fff !important; } .looper__progress-bar-padding @@ -146,7 +147,7 @@ position: absolute !important; bottom: 0 !important; - width: 0 !important; + width: 0; height: 3px !important; background: rgba(0,0,0,.5) !important; diff --git a/ui/styles.css b/ui/styles.css index 1c4f013..9bc918e 100644 --- a/ui/styles.css +++ b/ui/styles.css @@ -41,6 +41,38 @@ body[theme=dark] { --satus-checkbox--mark: #fff; } +body:not([theme=dark]):not([theme=black]) { + --satus-switch--domain-background: #ffefd5; + --satus-switch--domain-border: #f9e0b8; + --satus-switch--domain-color: #ad7622; + --satus-switch--domain-background-focus: #ffefd5; + --satus-switch--domain-border-focus: #f9e0b8; + --satus-switch--domain-color-focus: #ad7622; +} + +body[theme=dark]{ + --satus-switch--domain-background: #562525; + --satus-switch--domain-border: #723131; + --satus-switch--domain-color: #b29595; + --satus-switch--domain-background-focus: #723131; + --satus-switch--domain-border-focus: #8f3d3d; + --satus-switch--domain-color-focus: #c3acac; +} + +body[theme=black] { + --satus-switch--domain-background: #1c2d36; + --satus-switch--domain-border: #233843; + --satus-switch--domain-color: #7d95a1; + --satus-switch--domain-background-focus: #233843; + --satus-switch--domain-border-focus: #2a4350; + --satus-switch--domain-color-focus: #899ea9; +} + +.satus-header { + font-size: 15px; + font-weight: 600; +} + .satus-header { font-size: 15px; font-weight: 600; @@ -52,21 +84,21 @@ body[theme=dark] { height: 48px; padding: 0 16px; transition: 150ms; - color: #7d95a1; - border: 1px solid #233843; + color: var(--satus-switch--domain-color); + border: 1px solid var(--satus-switch--domain-border); border-radius: 8px; - background-color: #1c2d36; -} - -.satus-switch--domain[data-value='true'] .satus-switch__thumb { - background-color: #375a6c; + background-color: var(--satus-switch--domain-background); } .satus-switch--domain:focus, .satus-switch--domain:hover { - color: #899ea9; - border-color: #2a4350; - background-color: #233843; + color: var(--satus-switch--domain-color-focus); + border-color: var(--satus-switch--domain-border-focus); + background-color: var(--satus-switch--domain-background-focus); +} + +.satus-switch--domain[data-value='true'] .satus-switch__thumb { + background-color: #375a6c; } .satus-alert {