From 5399e01d8ba279d9a7ff2311b84fb2c701b156de Mon Sep 17 00:00:00 2001 From: ettoolong Date: Mon, 18 Dec 2017 02:38:55 +0800 Subject: [PATCH 01/33] 1. Fix bug. --- script/content-script.js | 1 - 1 file changed, 1 deletion(-) diff --git a/script/content-script.js b/script/content-script.js index 31af510..dbff802 100644 --- a/script/content-script.js +++ b/script/content-script.js @@ -268,7 +268,6 @@ function lockMainNodeStyle(lock) { } function maximizeMainNode() { - let hc = mvImpl.mainNode.getAttribute('mvHashCode'); let originalStyle = mvImpl.originalStyle = (mvImpl.mainNode.getAttribute('style') || ''); let vnNewStyle = ''; originalStyle = originalStyle.trim().replace(/\r\n/g, '\r').replace(/\n/g, '\r').replace(/\r/g, ''); From c2fb04f331eb66df4a6f602cd8e7d20f95f35690 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sun, 24 Dec 2017 16:30:08 +0800 Subject: [PATCH 02/33] 1. Fix bug. --- css/maximizeVideo.css | 2 ++ manifest.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index 08441ff..c414325 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -12,6 +12,7 @@ [mvclass=show], [mvclass=show-t] { + contain:unset !important; min-width:0px !important; min-height:0px !important; width:0px !important; @@ -36,6 +37,7 @@ html[mvclass=core], body[mvclass=show], body[mvclass=show-t] { + contain:unset !important; background-color: #000 !important; position: relative !important; overflow: hidden !important; diff --git a/manifest.json b/manifest.json index bc8ce0a..c82d3d8 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.1", + "version": "0.0.2", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From 14cd8813d3c2622d23a5fb8cd7cea85cf72f80b6 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sun, 24 Dec 2017 18:04:45 +0800 Subject: [PATCH 03/33] 1. Fix bug. --- manifest.json | 2 +- script/content-script.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/manifest.json b/manifest.json index c82d3d8..4b6ef0d 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.2", + "version": "0.0.3", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", diff --git a/script/content-script.js b/script/content-script.js index dbff802..df2843a 100644 --- a/script/content-script.js +++ b/script/content-script.js @@ -13,7 +13,7 @@ MVUniversal.prototype={ if(tagName === 'video' || tagName === 'iframe') { let attribute = tagName === 'video' ? 'controls' : 'allowfullscreen'; if(show) { - this.original[attribute] = node.getAttribute(attribute); + this.original[attribute] = node.hasAttribute(attribute) ? node.getAttribute(attribute) : null; node.setAttribute(attribute, 'true'); } let script = document.createElement('script'); @@ -21,7 +21,7 @@ MVUniversal.prototype={ script.textContent = '(function(){Object.defineProperty(document.querySelector("video[mvHashCode='+this.currentHashCode+']"), "'+attribute+'", {configurable: false});document.head.removeChild(document.getElementById("mvScript"));})()'; document.head.appendChild(script); if(!show) { - if(this.original[attribute]) + if(this.original[attribute] !== null) node.setAttribute(attribute, this.original[attribute]); else node.removeAttribute(attribute); From 1ca6dd769757f1ee6de06f8fcd9ffcaf7f554689 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 9 Feb 2018 20:51:48 +0800 Subject: [PATCH 04/33] 1. Fix Twitch support. --- manifest.json | 2 +- script/content-script.js | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/manifest.json b/manifest.json index 4b6ef0d..1efc48d 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.3", + "version": "0.0.4", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", diff --git a/script/content-script.js b/script/content-script.js index df2843a..83db6c4 100644 --- a/script/content-script.js +++ b/script/content-script.js @@ -52,7 +52,11 @@ MVTwitch.prototype={ topTags: ['body', 'html'], mvClass: 'show-t', setCoreNode: function () { - document.querySelector('.player-controls-bottom').setAttribute('mvclass', 'core'); + let coreNode = document.querySelector('.pl-controls-bottom'); + if(!coreNode) { + coreNode = document.querySelector('.player-controls-bottom'); + } + coreNode.setAttribute('mvclass', 'core'); }, getMainNode: function (node) { return document.querySelector('.video-player .video-player__container'); @@ -68,7 +72,10 @@ MVETwitch.prototype={ topTags: ['body', 'html'], mvClass: 'show-t', setCoreNode: function () { - let controlsNode = document.querySelector('.player-controls-bottom'); + let controlsNode = document.querySelector('.pl-controls-bottom'); + if(!controlsNode) { + controlsNode = document.querySelector('.player-controls-bottom'); + } controlsNode.setAttribute('mvclass', 'core'); controlsNode.parentNode.setAttribute('mvclass', 'core'); }, From 2f23923f9af2bdc25dfae4797388e6bfb3137914 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sun, 1 Apr 2018 15:29:25 +0800 Subject: [PATCH 05/33] 1. Add options for auto hide mouse cursor. --- _locales/en/messages.json | 102 +++++++++++++++++++---------------- _locales/zh_TW/messages.json | 10 +++- css/maximizeVideo.css | 8 +++ manifest.json | 2 +- options.css | 4 ++ options.html | 9 ++++ script/background.js | 4 +- script/content-script.js | 76 ++++++++++++++++++++++++++ 8 files changed, 165 insertions(+), 50 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 93d9dd0..2b5fa27 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1,70 +1,78 @@ { - "extName": { - "message": "Maximize Video", - "description": "" - }, - "extDescription": { - "message": "Maximize HTML5/Flash video and fill current tab.", - "description": "" - }, - "optionPageTitle": { - "message": "Maximize Video Preferences:", - "description": "" - }, - "maximizeThisVideo": { - "message": "Maximize this video", - "description": "" - }, + "extName": { + "message": "Maximize Video", + "description": "" + }, + "extDescription": { + "message": "Maximize HTML5/Flash video and fill current tab.", + "description": "" + }, + "optionPageTitle": { + "message": "Maximize Video Preferences:", + "description": "" + }, + "maximizeThisVideo": { + "message": "Maximize this video", + "description": "" + }, "toolbarAction": { - "message": "Toolbar button action:", - "description": "" + "message": "Toolbar button action:", + "description": "" }, - "selectFirstVideo": { - "message": "Auto maximize first video element(If not found any video element in 3 seconds, auto cancel)", - "description": "" + "selectFirstVideo": { + "message": "Auto maximize first video element(If not found any video element in 3 seconds, auto cancel)", + "description": "" }, "dontSelectVideo": { - "message": "Manual selct video element", - "description": "" + "message": "Manual selct video element", + "description": "" }, "supportFlash": { - "message": "Support Flash video", - "description": "" + "message": "Support Flash video", + "description": "" }, "ignoreTinyElement": { - "message": "Ignore tiny element:", - "description": "" - }, - "minWidth": { - "message": "Minimum width", - "description": "" + "message": "Ignore tiny element:", + "description": "" + }, + "minWidth": { + "message": "Minimum width", + "description": "" }, "minHeight": { - "message": "Minimum height", - "description": "" + "message": "Minimum height", + "description": "" }, - "popupWindow": { - "message": "After maximize video, pop-up current tab to standalone window", - "description": "" + "popupWindow": { + "message": "After maximize video, pop-up current tab to standalone window", + "description": "" }, "needOtherAddon": { - "message": "**You need install another add-on 'Popup Window' to enable this function: ", - "description": "" + "message": "**You need install another add-on 'Popup Window' to enable this function: ", + "description": "" + }, + "installPopupWindow": { + "message": "https://addons.mozilla.org/firefox/addon/popup-window/", + "description": "" + }, + "delayForHideCursor": { + "message": "When maximize video, auto hide mouse cursor after ", + "description": "" }, - "installPopupWindow": { - "message": "https://addons.mozilla.org/firefox/addon/popup-window/", - "description": "" + "delayForHideCursor2": { + "message": " seconds.", + "description": "" }, "iconColor": { - "message": "Toolbar button icon color", - "description": "" + "message": "Toolbar button icon color", + "description": "" }, "iconColorBlack": { - "message": "Black", - "description": "" + "message": "Black", + "description": "" }, "iconColorWhite": { - "message": "White", - "description": "" + "message": "White", + "description": "" } } diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index d3adc45..4f2d417 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -54,8 +54,16 @@ "installPopupWindow": { "message": "https://addons.mozilla.org/firefox/addon/popup-window/", "description": "" + }, + "delayForHideCursor": { + "message": "最大化影片後，於", + "description": "" + }, + "delayForHideCursor2": { + "message": "秒後自動隱藏滑鼠游標。", + "description": "" }, - "iconColor": { + "iconColor": { "message": "工具列圖示顏色", "description": "" }, diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index c414325..f96c5ce 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -25,15 +25,23 @@ } .controls[mvclass=core], +.hover-display[mvclass=core], +.pl-controls-bottom[mvclass=core], +.player-streamstatus[mvclass=core], .player-controls-bottom[mvclass=core] { position: fixed !important; z-index: 2147483640; } +.pl-controls-bottom[mvclass=core]:hover, .player-controls-bottom[mvclass=core]:hover { opacity: 1 !important; } +.hover-display[mvclass=core]:hover { + opacity: 1 !important; +} + html[mvclass=core], body[mvclass=show], body[mvclass=show-t] { diff --git a/manifest.json b/manifest.json index 1efc48d..cb600b2 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.4", + "version": "0.0.5", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", diff --git a/options.css b/options.css index 361f04c..22aaa24 100644 --- a/options.css +++ b/options.css @@ -18,3 +18,7 @@ select.itemInput { width: 250px; margin-left:12px; } + +.delayForHideCursor { + width: 50px; +} diff --git a/options.html b/options.html index 5352786..f88f000 100644 --- a/options.html +++ b/options.html @@ -60,6 +60,15 @@ +
+
+ + + + +
+
+
diff --git a/script/background.js b/script/background.js index fe84884..59afaa5 100644 --- a/script/background.js +++ b/script/background.js @@ -8,8 +8,10 @@ let defaultPreference = { supportFlash: true, minWidth: 100, minHeight: 100, + autoHideCursor: false, + delayForHideCursor: 5, iconColor: 0, - version: 3 + version: 4 }; let preferences = {}; diff --git a/script/content-script.js b/script/content-script.js index 83db6c4..344c7f4 100644 --- a/script/content-script.js +++ b/script/content-script.js @@ -1,3 +1,6 @@ +let currentPrefs = {}; +let init = false; + function MVUniversal() {} MVUniversal.prototype={ topTags: [], @@ -56,7 +59,12 @@ MVTwitch.prototype={ if(!coreNode) { coreNode = document.querySelector('.player-controls-bottom'); } + coreNode.parentNode.setAttribute('mvclass', 'core'); coreNode.setAttribute('mvclass', 'core'); + let streamstatus = document.querySelector('.player-streamstatus'); + if(streamstatus) { + streamstatus.setAttribute('mvclass', 'core'); + } }, getMainNode: function (node) { return document.querySelector('.video-player .video-player__container'); @@ -78,6 +86,14 @@ MVETwitch.prototype={ } controlsNode.setAttribute('mvclass', 'core'); controlsNode.parentNode.setAttribute('mvclass', 'core'); + let streamstatus = document.querySelector('.player-streamstatus'); + if(streamstatus) { + streamstatus.setAttribute('mvclass', 'core'); + } + let playerui = document.querySelector('.player-ui'); + if(playerui) { + playerui.setAttribute('mvclass', 'core'); + } }, getMainNode: function (node) { return node; @@ -529,6 +545,29 @@ function removeVideoMask() { } } +function clearHideCursorTimer() { + if(mvImpl.hideCursorTimer) { + clearTimeout(mvImpl.hideCursorTimer); + mvImpl.hideCursorTimer = null; + } +} + +function setHideCursorTimer() { + clearHideCursorTimer(); + if(currentPrefs.autoHideCursor) { + mvImpl.hideCursorTimer = setTimeout(()=>{ + mvImpl.vnNewStyle = mvImpl.vnNewStyle.replace('cursor:default','cursor:none'); + mvImpl.mainNode.setAttribute('style', mvImpl.vnNewStyle); + + mvImpl.mainNode.addEventListener('mousemove', e => { + mvImpl.vnNewStyle = mvImpl.vnNewStyle.replace('cursor:none','cursor:default'); + mvImpl.mainNode.setAttribute('style', mvImpl.vnNewStyle); + setHideCursorTimer(); + }, {capture: true, once: true}); // FF50+, Ch55+ + }, currentPrefs.delayForHideCursor*1000); + } +} + chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { if(message.action === 'maximizeVideo') { if(mvImpl.status === 'maximaVideo') @@ -543,6 +582,9 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { let elem = document.querySelector('video[mvHashCode="'+message.hashCode+'"],embed[mvHashCode="'+message.hashCode+'"][type="application/x-shockwave-flash"],object[mvHashCode="'+message.hashCode+'"][type="application/x-shockwave-flash"]'); if(elem) { + initPrefs( ()=>{ + setHideCursorTimer(); + }); mvImpl.setCoreNode(); mvImpl.currentHashCode = message.hashCode; if(window.location.href.startsWith('https://www.youtube.com/embed/') && !elem.src) { @@ -590,6 +632,7 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { chrome.runtime.sendMessage({action: 'cancelSelectMode'}); } else if(mvImpl.status === 'maximaVideo') { + clearHideCursorTimer(); chrome.runtime.sendMessage({action: 'cancelMaximaMode'}); } } @@ -638,3 +681,36 @@ if(window === window.top) { }, true); } } + +function initPrefs(cb){ + if(!init) { + init = true; + chrome.storage.local.get(results => { + if ((typeof results.length === 'number') && (results.length > 0)) { + results = results[0]; + } + currentPrefs = results; + cb(); + }); + + chrome.storage.onChanged.addListener((changes, area) => { + if(area === 'local') { + let changedItems = Object.keys(changes); + for (let item of changedItems) { + currentPrefs[item] = changes[item].newValue; + switch (item) { + case 'autoHideCursor': + case 'delayForHideCursor': + if(mvImpl.status === 'maximaVideo') { + setHideCursorTimer(); + } + break; + } + } + } + }); + } + else { + cb(); + } +} From d57edcc4d750720401d143778b939bf0a121c881 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Wed, 18 Apr 2018 11:27:50 +0800 Subject: [PATCH 06/33] 1. Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 0c9e7e2..6d34531 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ # MaximizeVideo Firefox add-on Maximize HTML5/Flash video and fill current tab. + +* Install Firefox add-on: [addons.mozilla.org](https://addons.mozilla.org/zh-TW/firefox/addon/maximize-video/) +* Install Chrome extension: [Chrome Web Store](https://chrome.google.com/webstore/detail/maximize-video/bfpkgjlnboeecjmnbhbknmemmckmpomb) From d9795ff1d5002c5da8e707dbc6c8d151b990ed1e Mon Sep 17 00:00:00 2001 From: ettoolong Date: Wed, 13 Jun 2018 10:02:52 +0800 Subject: [PATCH 07/33] 1. Fix bug. --- manifest.json | 2 +- script/content-script.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index cb600b2..197bf75 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.5", + "version": "0.0.6", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", diff --git a/script/content-script.js b/script/content-script.js index 344c7f4..7cde79b 100644 --- a/script/content-script.js +++ b/script/content-script.js @@ -135,6 +135,7 @@ let vnStyle = [ 'max-height:100% !important;', 'margin:0 !important;', 'padding:0 !important;', + 'transform:none !important', 'visibility:visible !important;', 'border-width:0 !important;', 'cursor:default !important;', From 643e1eda62afed263604525c3278c7221b53b9eb Mon Sep 17 00:00:00 2001 From: ettoolong Date: Wed, 13 Jun 2018 10:20:20 +0800 Subject: [PATCH 08/33] 1. Fix bug. --- manifest.json | 2 +- script/content-script.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index 197bf75..3c0dad4 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.6", + "version": "0.0.7", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", diff --git a/script/content-script.js b/script/content-script.js index 7cde79b..9826df6 100644 --- a/script/content-script.js +++ b/script/content-script.js @@ -135,7 +135,7 @@ let vnStyle = [ 'max-height:100% !important;', 'margin:0 !important;', 'padding:0 !important;', - 'transform:none !important', + 'transform:none !important;', 'visibility:visible !important;', 'border-width:0 !important;', 'cursor:default !important;', From f72095efb40f17de729acd00d62ea103489ebd1e Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 3 Aug 2018 23:14:22 +0800 Subject: [PATCH 09/33] 1. Fix bug. --- css/maximizeVideo.css | 1 + manifest.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index f96c5ce..c3bf0c7 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -22,6 +22,7 @@ transform-style:flat !important; -webkit-transformStyle:flat !important; border-width:0px !important; + will-change:auto !important; } .controls[mvclass=core], diff --git a/manifest.json b/manifest.json index 3c0dad4..ee67d99 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.7", + "version": "0.0.8", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From 2c4d544eee6a94734686aeb6cd84c6533f318e5c Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sat, 27 Oct 2018 14:08:12 +0800 Subject: [PATCH 10/33] 1. Beautify code. --- _locales/zh_TW/messages.json | 104 +++++++++++++++++------------------ 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index 4f2d417..6b13c5f 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -1,78 +1,78 @@ { - "extName": { - "message": "Maximize Video", - "description": "" - }, - "extDescription": { - "message": "將 HTML5/Flash 影片放到最大，填滿頁面。", - "description": "" - }, - "optionPageTitle": { - "message": "Maximize Video 設定：", - "description": "" - }, - "maximizeThisVideo": { - "message": "將此影片最大化", - "description": "" - }, + "extName": { + "message": "Maximize Video", + "description": "" + }, + "extDescription": { + "message": "將 HTML5/Flash 影片放到最大，填滿頁面。", + "description": "" + }, + "optionPageTitle": { + "message": "Maximize Video 設定：", + "description": "" + }, + "maximizeThisVideo": { + "message": "將此影片最大化", + "description": "" + }, "toolbarAction": { - "message": "於工具列啟動後：", - "description": "" + "message": "於工具列啟動後：", + "description": "" }, - "selectFirstVideo": { - "message": "自動最大化頁面中第一個找到的影片(如果三秒內沒找到任何影片，將自動取消)", - "description": "" + "selectFirstVideo": { + "message": "自動最大化頁面中第一個找到的影片(如果三秒內沒找到任何影片，將自動取消)", + "description": "" }, "dontSelectVideo": { - "message": "手動選擇要最大化的影片", - "description": "" + "message": "手動選擇要最大化的影片", + "description": "" }, "supportFlash": { - "message": "支援 Flash 影片", - "description": "" + "message": "支援 Flash 影片", + "description": "" }, "ignoreTinyElement": { - "message": "忽略小型元素：", - "description": "" - }, - "minWidth": { - "message": "最小寬度", - "description": "" + "message": "忽略小型元素：", + "description": "" + }, + "minWidth": { + "message": "最小寬度", + "description": "" }, "minHeight": { - "message": "最小高度", - "description": "" + "message": "最小高度", + "description": "" }, - "popupWindow": { - "message": "影片最大化後自動彈出至獨立視窗", - "description": "" + "popupWindow": { + "message": "影片最大化後自動彈出至獨立視窗", + "description": "" }, "needOtherAddon": { - "message": "**要啟用此功能需另外安裝 Popup Window 套件：", - "description": "" + "message": "**要啟用此功能需另外安裝 Popup Window 套件：", + "description": "" }, "installPopupWindow": { - "message": "https://addons.mozilla.org/firefox/addon/popup-window/", - "description": "" - }, + "message": "https://addons.mozilla.org/firefox/addon/popup-window/", + "description": "" + }, "delayForHideCursor": { - "message": "最大化影片後，於", - "description": "" + "message": "最大化影片後，於", + "description": "" }, "delayForHideCursor2": { - "message": "秒後自動隱藏滑鼠游標。", - "description": "" + "message": "秒後自動隱藏滑鼠游標。", + "description": "" }, - "iconColor": { - "message": "工具列圖示顏色", - "description": "" + "iconColor": { + "message": "工具列圖示顏色", + "description": "" }, "iconColorBlack": { - "message": "黑", - "description": "" + "message": "黑", + "description": "" }, "iconColorWhite": { - "message": "白", - "description": "" + "message": "白", + "description": "" } } From af77a08b9cea91511d5efaca61698c9ff6ac9fae Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sat, 27 Oct 2018 14:48:03 +0800 Subject: [PATCH 11/33] 1. Add keyboard shortcut. --- _locales/en/messages.json | 12 ++++ _locales/zh_TW/messages.json | 12 ++++ manifest.json | 8 ++- options.css | 19 +++++-- options.html | 13 +++++ options.js | 106 +++++++++++++++++++++++++++++++++++ script/background.js | 90 +++++++++++++++++++++-------- 7 files changed, 231 insertions(+), 29 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 2b5fa27..a68d9c5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -74,5 +74,17 @@ "iconColorWhite": { "message": "White", "description": "" + }, + "hotkey": { + "message": "Keyboard shortcut", + "description": "" + }, + "invalidSetting": { + "message": "invalid setting", + "description": "" + }, + "disableHotkey": { + "message": "Disable shortcut", + "description": "" } } diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index 6b13c5f..5d3b23a 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -74,5 +74,17 @@ "iconColorWhite": { "message": "白", "description": "" + }, + "hotkey": { + "message": "熱鍵", + "description": "" + }, + "invalidSetting": { + "message": "無效的設定值", + "description": "" + }, + "disableHotkey": { + "message": "停用熱鍵", + "description": "" } } diff --git a/manifest.json b/manifest.json index ee67d99..0c4dfb0 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.8", + "version": "0.0.9", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", @@ -14,7 +14,7 @@ "applications": { "gecko": { "id": "MaximizeVideo@ettoolong", - "strict_min_version": "51.0" + "strict_min_version": "60.0" } }, "developer": { @@ -49,5 +49,9 @@ "page": "options.html", "open_in_tab": false, "browser_style": true + }, + "commands": { + "maximizeVideo": { + } } } diff --git a/options.css b/options.css index 22aaa24..f25e38a 100644 --- a/options.css +++ b/options.css @@ -13,10 +13,21 @@ div.col { width: 60px; } -select.itemInput { - display: inline-block; - width: 250px; - margin-left:12px; +select { + margin-left:4px; + margin-right:6px; +} + +.invalid { + box-shadow: 1px 1px 4px #f20, -1px -1px 4px #f20; +} + +.error { + color: red; +} + +.hide { + display: none; } .delayForHideCursor { diff --git a/options.html b/options.html index f88f000..b4aba56 100644 --- a/options.html +++ b/options.html @@ -69,6 +69,19 @@
+
+
+ + + + + +
+
+
diff --git a/options.js b/options.js index fb97bf0..1c24347 100644 --- a/options.js +++ b/options.js @@ -6,6 +6,32 @@ const saveToPreference = (id, value) => { chrome.storage.local.set(update); }; +const checkCommand = (id, cb) => { + let modifier = document.querySelector('select[group='+id+'][type=modifier]'); + let modifier2 = document.querySelector('select[group='+id+'][type=modifier2]'); + let key = document.querySelector('select[group='+id+'][type=key]'); + [modifier, modifier2, key].forEach(item => item.classList.remove('invalid')); + + switch (true) { + case !key.value && !modifier.value && !modifier2.value: + cb({update:true, message:'disableHotkey'}); + break; + + case !key.value && !!(modifier.value || modifier2.value): + key.classList.add('invalid'); + cb({update:false, message:'invalidSetting'}); + break; + + case !modifier.value && !/^F[1-9][0-2]?$/.test(key.value): // must have modiefer unless function key + modifier.classList.add('invalid'); + cb({update:false, message:'invalidSetting'}); + break; + + default: + cb({update:true, message:''}); + } +} + const handleVelueChange = id => { let elem = document.getElementById(id); if(elem) { @@ -25,6 +51,33 @@ const handleVelueChange = id => { saveToPreference(id, parseInt(elem.value)); }); } + else if(elemType === 'command') { + for(let selectName of ['modifier', 'modifier2', 'key']) { + let select = document.querySelector('select[group='+id+'][type='+selectName+']'); + select.addEventListener('input', event => { + let label = document.querySelector('label[group='+id+']'); + label.classList.add('hide'); + label.classList.remove('error'); + checkCommand( id, result => { + if(result.update) { + let keys = []; + for(let selectName2 of ['modifier', 'modifier2', 'key']) { + let select2 = document.querySelector('select[group='+id+'][type='+selectName2+']'); + keys.push(select2.value); + } + saveToPreference(id, keys.join('+')); + } + else { + label.classList.add('error'); + } + if(result.message !== '') { + label.textContent = chrome.i18n.getMessage(result.message); + label.classList.remove('hide'); + } + }); + }); + } + } else if(elemType === 'radioGroup') { let radios = Array.from(elem.querySelectorAll('input[name='+id+']')); for(let radio of radios) { @@ -56,6 +109,21 @@ const setValueToElem = (id, value) => { } } } + else if(elemType === 'command') { + let keys = value.split('+'); + if(keys.length !== 3) keys = ['','','']; + let cmd = { modifier: keys[0], modifier2: keys[1], key: keys[2] }; + for(let selectName of ['modifier', 'modifier2', 'key']) { + let select = document.querySelector('select[group='+id+'][type='+selectName+']'); + let options = Array.from(select.querySelectorAll('option')); + for(let option of options) { + if(option.getAttribute('value') === cmd[selectName]) { + option.selected = true; + break; + } + } + } + } else if(elemType === 'radioGroup') { let radios = Array.from(elem.querySelectorAll('input[name='+id+']')); for(let radio of radios) { @@ -68,6 +136,41 @@ const setValueToElem = (id, value) => { } }; +const createCommandElem = (os) => { + let modifier = os === 'mac' ? + [{value:'', text:''},{value:'MacCtrl', text:'Ctrl'}, {value:'Alt', text:'Option'}, {value:'Ctrl', text:'Command'}] : + [{value:'', text:''}, {value:'Ctrl', text:'Ctrl'}, {value:'Alt', text:'Alt'}]; + let modifier2 = ['', 'Shift']; + let key = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', + 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', + '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', + 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', + 'Comma', 'Period', 'Home', 'End', 'PageUp', 'PageDown', 'Space', + 'Insert', 'Delete', 'Up', 'Down', 'Left', 'Right']; + let commandModifier = document.querySelector('select[group=shortcut][type=modifier]'); + let commandModifier2 = document.querySelector('select[group=shortcut][type=modifier2]'); + let commandKey = document.querySelector('select[group=shortcut][type=key]'); + + for(let k of modifier) { + let elem = document.createElement("option"); + elem.setAttribute('value', k.value); + elem.textContent = k.text; + commandModifier.appendChild(elem); + } + for(let k of modifier2) { + let elem = document.createElement("option"); + elem.setAttribute('value', k); + elem.textContent = k; + commandModifier2.appendChild(elem); + } + for(let k of key) { + let elem = document.createElement("option"); + elem.setAttribute('value', k); + elem.textContent = k; + commandKey.appendChild(elem); + } +} + const init = preferences => { currentPrefs = preferences; for(let p in preferences) { @@ -81,6 +184,9 @@ const init = preferences => { }; window.addEventListener('load', event => { + browser.runtime.getPlatformInfo().then(info => { + createCommandElem(info.os); + }); chrome.storage.local.get(results => { if ((typeof results.length === 'number') && (results.length > 0)) { results = results[0]; diff --git a/script/background.js b/script/background.js index 59afaa5..96cf992 100644 --- a/script/background.js +++ b/script/background.js @@ -11,7 +11,8 @@ let defaultPreference = { autoHideCursor: false, delayForHideCursor: 5, iconColor: 0, - version: 4 + shortcut: 'Ctrl+Shift+M', + version: 5 }; let preferences = {}; @@ -37,6 +38,9 @@ const storageChangeHandler = (changes, area) => { case 'iconColor': setBrowserActionIcon(); break; + case 'shortcut': + applyCommand(); + break; } } } @@ -70,6 +74,7 @@ const loadPreference = () => { } } setBrowserActionIcon(); + applyCommand(); }); }; @@ -87,29 +92,54 @@ window.addEventListener('DOMContentLoaded', event => { chrome.browserAction.disable(); chrome.browserAction.onClicked.addListener(tab => { - let hashCode = getHashCode(); - chrome.tabs.sendMessage(tab.id, { - action: 'setVideoMask', - toolbarAction: preferences.toolbarAction, - hashCode: hashCode - }); + execBrowserAction(tab); }); +const applyCommand = () => { + let keys = preferences.shortcut.split('+'); + if(keys.length !== 3) keys = defaultPreference.shortcut.split('+'); + let shortcut = keys.filter(item => item).join('+'); + try { + if(shortcut !== '') { + browser.commands.update({ + name: 'maximizeVideo', + shortcut: shortcut + }); + } + else { + browser.commands.reset('maximizeVideo'); + } + } catch(ex){} +}; + +const execBrowserAction = (tab) => { + if(!['about:addons', 'about:blank'].includes(tab.url)) { + let hashCode = getHashCode(); + chrome.tabs.sendMessage(tab.id, { + action: 'setVideoMask', + toolbarAction: preferences.toolbarAction, + hashCode: hashCode + }); + } +}; + chrome.tabs.onUpdated.addListener((tabId, changeInfo, tabInfo) => { - try{ - chrome.tabs.sendMessage(tabId, { - action: 'getReadyStatus' - }, response => { - if(response){ - if(response.readyStatus) { - chrome.browserAction.enable(tabId); - } - else { - chrome.browserAction.disable(tabId); + if(!['about:addons', 'about:blank'].includes(tabInfo.url)) { + try{ + chrome.tabs.sendMessage(tabId, { + action: 'getReadyStatus' + }, response => { + if(response){ + if(response.readyStatus) { + chrome.browserAction.enable(tabId); + } + else { + chrome.browserAction.disable(tabId); + } } - } - }); - } catch(ex){} + }); + } catch(ex){} + } }); chrome.tabs.query({}, tabs => { @@ -131,6 +161,23 @@ chrome.tabs.query({}, tabs => { } }); +chrome.commands.onCommand.addListener(command => { + if (command === "maximizeVideo") { + chrome.tabs.query({active: true, currentWindow: true}, tabs => { + if ((typeof tabs !== 'undefined') && (tabs.length > 0)) { + let tab = tabs[0]; + browser.browserAction.isEnabled({tabId: tab.id}).then(result => { + if(result === true) { + execBrowserAction(tab); + } + }); + } + else { + } + }); + } +}); + const messageHandler = (message, sender, sendResponse) => { // console.log(message); if(message.action === 'tabReady'){ @@ -187,9 +234,6 @@ const externalMessageHandler = (message, sender, sendResponse) => { if(message.action === 'maximizeVideo' && message.tabId !== undefined) { let toolbarAction = preferences.toolbarAction; - let supportFlash = preferences.supportFlash; - let minWidth = preferences.minWidth; - let minHeight = preferences.minHeight; let hashCode = getHashCode(); if(message.autoSelect !== undefined) { toolbarAction = message.autoSelect === true ? 1 : 0; From 7d08bbf9fa8365ba0880abc178a548297648c5c0 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sun, 3 Mar 2019 21:28:48 +0800 Subject: [PATCH 12/33] 1. Fix ratio issue. --- manifest.json | 2 +- script/content-script.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 0c4dfb0..05cafd5 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.9", + "version": "0.0.10", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", diff --git a/script/content-script.js b/script/content-script.js index 9826df6..74b9928 100644 --- a/script/content-script.js +++ b/script/content-script.js @@ -139,6 +139,7 @@ let vnStyle = [ 'visibility:visible !important;', 'border-width:0 !important;', 'cursor:default !important;', + 'object-fit:contain !important;', 'z-index: 2147483639 !important;', 'background:black !important;'].join(''); let vnStyleList = [ From 93fd63db0fe34076a76d0a6606c804b2ea240107 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 22 Mar 2019 20:12:25 +0800 Subject: [PATCH 13/33] 1. Remove hotkey preference UI. 2. Fix Youtube fullscreen issue. --- _locales/en/messages.json | 12 +- _locales/zh_TW/messages.json | 12 +- options.css => css/options.css | 17 --- {script => js}/background.js | 32 ++--- {script => js}/content-script.js | 228 ++++++++++++++++++++++++++++++- js/options.js | 92 +++++++++++++ manifest.json | 12 +- options.html | 17 +-- options.js | 198 --------------------------- 9 files changed, 340 insertions(+), 280 deletions(-) rename options.css => css/options.css (54%) rename {script => js}/background.js (92%) rename {script => js}/content-script.js (78%) create mode 100644 js/options.js delete mode 100644 options.js diff --git a/_locales/en/messages.json b/_locales/en/messages.json index a68d9c5..0c78ed1 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -75,16 +75,8 @@ "message": "White", "description": "" }, - "hotkey": { - "message": "Keyboard shortcut", - "description": "" - }, - "invalidSetting": { - "message": "invalid setting", - "description": "" - }, - "disableHotkey": { - "message": "Disable shortcut", + "execute": { + "message": "Maximize video", "description": "" } } diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index 5d3b23a..fe0d8b7 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -75,16 +75,8 @@ "message": "白", "description": "" }, - "hotkey": { - "message": "熱鍵", - "description": "" - }, - "invalidSetting": { - "message": "無效的設定值", - "description": "" - }, - "disableHotkey": { - "message": "停用熱鍵", + "execute": { + "message": "影片最大化", "description": "" } } diff --git a/options.css b/css/options.css similarity index 54% rename from options.css rename to css/options.css index f25e38a..2b8eac3 100644 --- a/options.css +++ b/css/options.css @@ -13,23 +13,6 @@ div.col { width: 60px; } -select { - margin-left:4px; - margin-right:6px; -} - -.invalid { - box-shadow: 1px 1px 4px #f20, -1px -1px 4px #f20; -} - -.error { - color: red; -} - -.hide { - display: none; -} - .delayForHideCursor { width: 50px; } diff --git a/script/background.js b/js/background.js similarity index 92% rename from script/background.js rename to js/background.js index 96cf992..a6622c4 100644 --- a/script/background.js +++ b/js/background.js @@ -11,8 +11,7 @@ let defaultPreference = { autoHideCursor: false, delayForHideCursor: 5, iconColor: 0, - shortcut: 'Ctrl+Shift+M', - version: 5 + version: 6 }; let preferences = {}; @@ -38,9 +37,6 @@ const storageChangeHandler = (changes, area) => { case 'iconColor': setBrowserActionIcon(); break; - case 'shortcut': - applyCommand(); - break; } } } @@ -74,7 +70,6 @@ const loadPreference = () => { } } setBrowserActionIcon(); - applyCommand(); }); }; @@ -95,23 +90,6 @@ chrome.browserAction.onClicked.addListener(tab => { execBrowserAction(tab); }); -const applyCommand = () => { - let keys = preferences.shortcut.split('+'); - if(keys.length !== 3) keys = defaultPreference.shortcut.split('+'); - let shortcut = keys.filter(item => item).join('+'); - try { - if(shortcut !== '') { - browser.commands.update({ - name: 'maximizeVideo', - shortcut: shortcut - }); - } - else { - browser.commands.reset('maximizeVideo'); - } - } catch(ex){} -}; - const execBrowserAction = (tab) => { if(!['about:addons', 'about:blank'].includes(tab.url)) { let hashCode = getHashCode(); @@ -218,6 +196,14 @@ const messageHandler = (message, sender, sendResponse) => { action: 'cancelMaximaMode' }); } + else if(message.action === 'videoHotkey'){ + chrome.tabs.sendMessage(sender.tab.id, { + action: 'videoHotkey', + keyCode: message.keyCode, + shiftKey: message.shiftKey, + ctrlKey: message.ctrlKey + }); + } //return true; }; diff --git a/script/content-script.js b/js/content-script.js similarity index 78% rename from script/content-script.js rename to js/content-script.js index 74b9928..f3fe80e 100644 --- a/script/content-script.js +++ b/js/content-script.js @@ -1,6 +1,176 @@ let currentPrefs = {}; let init = false; +const shortcutFuncs = { + toggleCaptions: function(v){ + const validTracks = []; + for(let i = 0; i < v.textTracks.length; ++i){ + const tt = v.textTracks[i]; + if(tt.mode === 'showing'){ + tt.mode = 'disabled'; + if(v.textTracks.addEventListener){ + // If text track event listeners are supported + // (they are on the most recent Chrome), add + // a marker to remember the old track. Use a + // listener to delete it if a different track + // is selected. + v.cbhtml5vsLastCaptionTrack = tt.label; + function cleanup(e){ + for(let i = 0; i < v.textTracks.length; ++i){ + const ott = v.textTracks[i]; + if(ott.mode === 'showing'){ + delete v.cbhtml5vsLastCaptionTrack; + v.textTracks.removeEventListener('change', cleanup); + return; + } + } + } + v.textTracks.addEventListener('change', cleanup); + } + return; + }else if(tt.mode !== 'hidden'){ + validTracks.push(tt); + } + } + // If we got here, none of the tracks were selected. + if(validTracks.length === 0){ + return true; // Do not prevent default if no UI activated + } + // Find the best one and select it. + validTracks.sort(function(a, b){ + + if(v.cbhtml5vsLastCaptionTrack){ + const lastLabel = v.cbhtml5vsLastCaptionTrack; + + if(a.label === lastLabel && b.label !== lastLabel){ + return -1; + }else if(b.label === lastLabel && a.label !== lastLabel){ + return 1; + } + } + + const aLang = a.language.toLowerCase(), + bLang = b.language.toLowerCase(), + navLang = navigator.language.toLowerCase(); + + if(aLang === navLang && bLang !== navLang){ + return -1; + }else if(bLang === navLang && aLang !== navLang){ + return 1; + } + + const aPre = aLang.split('-')[0], + bPre = bLang.split('-')[0], + navPre = navLang.split('-')[0]; + + if(aPre === navPre && bPre !== navPre){ + return -1; + }else if(bPre === navPre && aPre !== navPre){ + return 1; + } + + return 0; + })[0].mode = 'showing'; + }, + + togglePlay: function(v){ + if(v.paused) + v.play(); + else + v.pause(); + }, + + toStart: function(v){ + v.currentTime = 0; + }, + + toEnd: function(v){ + v.currentTime = v.duration; + }, + + skipLeft: function(v,key,shift,ctrl){ + if(shift) + v.currentTime -= 10; + else if(ctrl) + v.currentTime -= 1; + else + v.currentTime -= 5; + }, + + skipRight: function(v,key,shift,ctrl){ + if(shift) + v.currentTime += 10; + else if(ctrl) + v.currentTime += 1; + else + v.currentTime += 5; + }, + + increaseVol: function(v){ + if(v.volume <= 0.9) v.volume += 0.1; + else v.volume = 1; + }, + + decreaseVol: function(v){ + if(v.volume >= 0.1) v.volume -= 0.1; + else v.volume = 0; + }, + + toggleMute: function(v){ + v.muted = !v.muted; + }, + + toggleFS: function(v){ + v.requestFullscreen(); + }, + + slow: function(v,key,shift){ + if(v.playbackRate >= 0.25) v.playbackRate -= 0.25; + else v.playbackRate = 0.01; + }, + + fast: function(v,key,shift){ + v.playbackRate += 0.25; + }, + + normalSpeed: function(v,key,shift){ + v.playbackRate = v.defaultPlaybackRate; + }, + + toPercentage: function(v,key){ + v.currentTime = v.duration * (key - 48) / 10.0; + }, +}; + +const keyFuncs = { + 32 : shortcutFuncs.togglePlay, // Space + 75 : shortcutFuncs.togglePlay, // K + 35 : shortcutFuncs.toEnd, // End + 48 : shortcutFuncs.toStart, // 0 + 36 : shortcutFuncs.toStart, // Home + 37 : shortcutFuncs.skipLeft, // Left arrow + 74 : shortcutFuncs.skipLeft, // J + 39 : shortcutFuncs.skipRight, // Right arrow + 76 : shortcutFuncs.skipRight, // L + 38 : shortcutFuncs.increaseVol, // Up arrow + 40 : shortcutFuncs.decreaseVol, // Down arrow + 77 : shortcutFuncs.toggleMute, // M + 70 : shortcutFuncs.toggleFS, // F + 67 : shortcutFuncs.toggleCaptions, // C + 188: shortcutFuncs.slow, // Comma + 190: shortcutFuncs.fast, // Period + 191: shortcutFuncs.normalSpeed, // Forward slash + 49 : shortcutFuncs.toPercentage, // 1 + 50 : shortcutFuncs.toPercentage, // 2 + 51 : shortcutFuncs.toPercentage, // 3 + 52 : shortcutFuncs.toPercentage, // 4 + 53 : shortcutFuncs.toPercentage, // 5 + 54 : shortcutFuncs.toPercentage, // 6 + 55 : shortcutFuncs.toPercentage, // 7 + 56 : shortcutFuncs.toPercentage, // 8 + 57 : shortcutFuncs.toPercentage, // 9 +}; + function MVUniversal() {} MVUniversal.prototype={ topTags: [], @@ -440,7 +610,54 @@ window.addEventListener('message', e => { window.addEventListener('keydown', event => { if(event.key === 'Escape' && mvImpl.status === 'selectVideo') { chrome.runtime.sendMessage({action: 'cancelSelectMode'}); + } else if (mvImpl.status === 'maximaVideo') { + if(event.altKey || event.metaKey){ + return true; + } + const func = keyFuncs[event.keyCode]; + if(func){ + //send message to background script ! + //func(mvImpl.mainNode, event.keyCode, event.shiftKey, event.ctrlKey); + if(event.keyCode === 70) {// fullscreen + mvImpl.mainNode.requestFullscreen(); + } + else { + let msg = {action: 'videoHotkey', keyCode: event.keyCode, shiftKey: event.shiftKey, ctrlKey: event.ctrlKey}; + chrome.runtime.sendMessage(msg); + } + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); + return false; + } + return true; } +}, true); + +const handleKeyEvent = (event) => { + if (mvImpl.status === 'maximaVideo') { + if(event.altKey || event.metaKey){ + return true; + } + const func = keyFuncs[event.keyCode]; + if(func){ + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); + return false; + } + return true; + } +} +window.addEventListener('keypress', handleKeyEvent, true); +window.addEventListener('keyup', handleKeyEvent, true); +window.addEventListener('DOMContentLoaded', event => { + document.addEventListener('fullscreenchange', event => { + if (mvImpl.status === 'maximaVideo') { + event.stopPropagation(); + event.stopImmediatePropagation(); + } + }, true); }); function inRect(point, rect) { @@ -571,7 +788,13 @@ function setHideCursorTimer() { } chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { - if(message.action === 'maximizeVideo') { + if(message.action === 'videoHotkey') { + if(mvImpl.mainNode.tagName === 'VIDEO') { + const func = keyFuncs[message.keyCode]; + func(mvImpl.mainNode, message.keyCode, message.shiftKey, message.ctrlKey); + } + } + else if(message.action === 'maximizeVideo') { if(mvImpl.status === 'maximaVideo') return; mvImpl.status = 'maximaVideo'; @@ -597,6 +820,9 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { } mvImpl.strict = message.strict; maximizeVideo(elem); + if(mvImpl.mainNode.tagName === 'VIDEO') { + mvImpl.mainNode.focus({preventScroll:true}); + } chrome.runtime.sendMessage({action: 'popupWindow'}); } } diff --git a/js/options.js b/js/options.js new file mode 100644 index 0000000..fb97bf0 --- /dev/null +++ b/js/options.js @@ -0,0 +1,92 @@ +let currentPrefs = {}; + +const saveToPreference = (id, value) => { + let update = {}; + update[id] = value; + chrome.storage.local.set(update); +}; + +const handleVelueChange = id => { + let elem = document.getElementById(id); + if(elem) { + let elemType = elem.getAttribute('type'); + if(elemType === 'checkbox') { + elem.addEventListener('input', event => { + saveToPreference(id, elem.checked ? true : false); + }); + } + else if(elemType === 'number') { + elem.addEventListener('input', event => { + saveToPreference(id, parseInt(elem.value)); + }); + } + else if(elemType === 'option') { + elem.addEventListener('input', event => { + saveToPreference(id, parseInt(elem.value)); + }); + } + else if(elemType === 'radioGroup') { + let radios = Array.from(elem.querySelectorAll('input[name='+id+']')); + for(let radio of radios) { + radio.addEventListener('input', event => { + if(radio.checked) + saveToPreference(id, parseInt(radio.getAttribute('value'))); + }); + } + } + } +}; + +const setValueToElem = (id, value) => { + let elem = document.getElementById(id); + if(elem) { + let elemType = elem.getAttribute('type'); + if(elemType === 'checkbox') { + elem.checked = value; + } + if(elemType === 'number') { + elem.value = value; + } + else if(elemType === 'option') { + let options = Array.from(elem.querySelectorAll('option')); + for(let option of options) { + if(parseInt(option.getAttribute('value')) === value) { + option.selected = true; + break; + } + } + } + else if(elemType === 'radioGroup') { + let radios = Array.from(elem.querySelectorAll('input[name='+id+']')); + for(let radio of radios) { + if(parseInt(radio.getAttribute('value')) === value) { + radio.checked = true; + break; + } + } + } + } +}; + +const init = preferences => { + currentPrefs = preferences; + for(let p in preferences) { + setValueToElem(p, preferences[p]); + handleVelueChange(p); + } + let l10nTags = Array.from(document.querySelectorAll('[data-l10n-id]')); + l10nTags.forEach(tag => { + tag.textContent = chrome.i18n.getMessage(tag.getAttribute('data-l10n-id')); + }); +}; + +window.addEventListener('load', event => { + chrome.storage.local.get(results => { + if ((typeof results.length === 'number') && (results.length > 0)) { + results = results[0]; + } + if (results.version) { + init(results); + } + }); +}, true); diff --git a/manifest.json b/manifest.json index 05cafd5..dacd672 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.10", + "version": "0.0.11", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", @@ -14,7 +14,7 @@ "applications": { "gecko": { "id": "MaximizeVideo@ettoolong", - "strict_min_version": "60.0" + "strict_min_version": "66.0" } }, "developer": { @@ -22,13 +22,13 @@ "url": "https://github.com/ettoolong/MaximizeVideo" }, "background": { - "scripts": ["script/background.js"] + "scripts": ["js/background.js"] }, "content_scripts": [ { "matches": ["http://*/*","https://*/*","file:///*"], - "js": ["script/content-script.js"], + "js": ["js/content-script.js"], "css": ["css/maximizeVideo.css"], "all_frames": true, "run_at": "document_start" @@ -41,8 +41,7 @@ }, "permissions": [ "storage", - "tabs", - "activeTab" + "tabs" ], "default_locale": "en", "options_ui": { @@ -52,6 +51,7 @@ }, "commands": { "maximizeVideo": { + "description": "__MSG_execute__" } } } diff --git a/options.html b/options.html index b4aba56..f757190 100644 --- a/options.html +++ b/options.html @@ -2,8 +2,8 @@ - - + + @@ -69,19 +69,6 @@
-
-
- - - - - -
-
-
diff --git a/options.js b/options.js deleted file mode 100644 index 1c24347..0000000 --- a/options.js +++ /dev/null @@ -1,198 +0,0 @@ -let currentPrefs = {}; - -const saveToPreference = (id, value) => { - let update = {}; - update[id] = value; - chrome.storage.local.set(update); -}; - -const checkCommand = (id, cb) => { - let modifier = document.querySelector('select[group='+id+'][type=modifier]'); - let modifier2 = document.querySelector('select[group='+id+'][type=modifier2]'); - let key = document.querySelector('select[group='+id+'][type=key]'); - [modifier, modifier2, key].forEach(item => item.classList.remove('invalid')); - - switch (true) { - case !key.value && !modifier.value && !modifier2.value: - cb({update:true, message:'disableHotkey'}); - break; - - case !key.value && !!(modifier.value || modifier2.value): - key.classList.add('invalid'); - cb({update:false, message:'invalidSetting'}); - break; - - case !modifier.value && !/^F[1-9][0-2]?$/.test(key.value): // must have modiefer unless function key - modifier.classList.add('invalid'); - cb({update:false, message:'invalidSetting'}); - break; - - default: - cb({update:true, message:''}); - } -} - -const handleVelueChange = id => { - let elem = document.getElementById(id); - if(elem) { - let elemType = elem.getAttribute('type'); - if(elemType === 'checkbox') { - elem.addEventListener('input', event => { - saveToPreference(id, elem.checked ? true : false); - }); - } - else if(elemType === 'number') { - elem.addEventListener('input', event => { - saveToPreference(id, parseInt(elem.value)); - }); - } - else if(elemType === 'option') { - elem.addEventListener('input', event => { - saveToPreference(id, parseInt(elem.value)); - }); - } - else if(elemType === 'command') { - for(let selectName of ['modifier', 'modifier2', 'key']) { - let select = document.querySelector('select[group='+id+'][type='+selectName+']'); - select.addEventListener('input', event => { - let label = document.querySelector('label[group='+id+']'); - label.classList.add('hide'); - label.classList.remove('error'); - checkCommand( id, result => { - if(result.update) { - let keys = []; - for(let selectName2 of ['modifier', 'modifier2', 'key']) { - let select2 = document.querySelector('select[group='+id+'][type='+selectName2+']'); - keys.push(select2.value); - } - saveToPreference(id, keys.join('+')); - } - else { - label.classList.add('error'); - } - if(result.message !== '') { - label.textContent = chrome.i18n.getMessage(result.message); - label.classList.remove('hide'); - } - }); - }); - } - } - else if(elemType === 'radioGroup') { - let radios = Array.from(elem.querySelectorAll('input[name='+id+']')); - for(let radio of radios) { - radio.addEventListener('input', event => { - if(radio.checked) - saveToPreference(id, parseInt(radio.getAttribute('value'))); - }); - } - } - } -}; - -const setValueToElem = (id, value) => { - let elem = document.getElementById(id); - if(elem) { - let elemType = elem.getAttribute('type'); - if(elemType === 'checkbox') { - elem.checked = value; - } - if(elemType === 'number') { - elem.value = value; - } - else if(elemType === 'option') { - let options = Array.from(elem.querySelectorAll('option')); - for(let option of options) { - if(parseInt(option.getAttribute('value')) === value) { - option.selected = true; - break; - } - } - } - else if(elemType === 'command') { - let keys = value.split('+'); - if(keys.length !== 3) keys = ['','','']; - let cmd = { modifier: keys[0], modifier2: keys[1], key: keys[2] }; - for(let selectName of ['modifier', 'modifier2', 'key']) { - let select = document.querySelector('select[group='+id+'][type='+selectName+']'); - let options = Array.from(select.querySelectorAll('option')); - for(let option of options) { - if(option.getAttribute('value') === cmd[selectName]) { - option.selected = true; - break; - } - } - } - } - else if(elemType === 'radioGroup') { - let radios = Array.from(elem.querySelectorAll('input[name='+id+']')); - for(let radio of radios) { - if(parseInt(radio.getAttribute('value')) === value) { - radio.checked = true; - break; - } - } - } - } -}; - -const createCommandElem = (os) => { - let modifier = os === 'mac' ? - [{value:'', text:''},{value:'MacCtrl', text:'Ctrl'}, {value:'Alt', text:'Option'}, {value:'Ctrl', text:'Command'}] : - [{value:'', text:''}, {value:'Ctrl', text:'Ctrl'}, {value:'Alt', text:'Alt'}]; - let modifier2 = ['', 'Shift']; - let key = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', - 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', - '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', - 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', - 'Comma', 'Period', 'Home', 'End', 'PageUp', 'PageDown', 'Space', - 'Insert', 'Delete', 'Up', 'Down', 'Left', 'Right']; - let commandModifier = document.querySelector('select[group=shortcut][type=modifier]'); - let commandModifier2 = document.querySelector('select[group=shortcut][type=modifier2]'); - let commandKey = document.querySelector('select[group=shortcut][type=key]'); - - for(let k of modifier) { - let elem = document.createElement("option"); - elem.setAttribute('value', k.value); - elem.textContent = k.text; - commandModifier.appendChild(elem); - } - for(let k of modifier2) { - let elem = document.createElement("option"); - elem.setAttribute('value', k); - elem.textContent = k; - commandModifier2.appendChild(elem); - } - for(let k of key) { - let elem = document.createElement("option"); - elem.setAttribute('value', k); - elem.textContent = k; - commandKey.appendChild(elem); - } -} - -const init = preferences => { - currentPrefs = preferences; - for(let p in preferences) { - setValueToElem(p, preferences[p]); - handleVelueChange(p); - } - let l10nTags = Array.from(document.querySelectorAll('[data-l10n-id]')); - l10nTags.forEach(tag => { - tag.textContent = chrome.i18n.getMessage(tag.getAttribute('data-l10n-id')); - }); -}; - -window.addEventListener('load', event => { - browser.runtime.getPlatformInfo().then(info => { - createCommandElem(info.os); - }); - chrome.storage.local.get(results => { - if ((typeof results.length === 'number') && (results.length > 0)) { - results = results[0]; - } - if (results.version) { - init(results); - } - }); -}, true); From fcdc24c9e0340d4866f627cddc9c5835089063f4 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sat, 11 May 2019 18:02:03 +0800 Subject: [PATCH 14/33] 1. Support bleacherreport.com --- js/content-script.js | 18 ++++++++++++++++++ manifest.json | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/js/content-script.js b/js/content-script.js index f3fe80e..8ba74dc 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -171,6 +171,15 @@ const keyFuncs = { 57 : shortcutFuncs.toPercentage, // 9 }; +const srcProxy = { + 'bleacherreport.com': { + play: (node) => { + let elem = node.parentNode.parentNode.querySelector('.amp-interactive'); + elem.click(); + } + } +} + function MVUniversal() {} MVUniversal.prototype={ topTags: [], @@ -216,6 +225,15 @@ MVUniversal.prototype={ if(this.status === 'maximaVideo') event.stopImmediatePropagation(); }, true); + node.addEventListener('play', event => { + if (!node.src) { + let proxy = srcProxy[window.location.host] + if (proxy) { + event.preventDefault(); + proxy.play(node); + } + } + }, true); } } } diff --git a/manifest.json b/manifest.json index dacd672..9e7aebd 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.11", + "version": "0.0.12", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From 563eb9e8a53da68670607d214246fee0aae0cbeb Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 13 Dec 2019 23:04:53 +0800 Subject: [PATCH 15/33] add icon border --- icon/icon.svg | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/icon/icon.svg b/icon/icon.svg index d9168d0..b88cd6b 100644 --- a/icon/icon.svg +++ b/icon/icon.svg @@ -1,10 +1,10 @@ -Layer 1 - +Layer 1 + - + - + - + \ No newline at end of file From c7cfd9213c4deeb40125b019886d35087a1df14c Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 13 Dec 2019 23:08:08 +0800 Subject: [PATCH 16/33] 1. fix bug for Twitch 2. support original Youtube video controls --- _locales/en/messages.json | 4 ++ _locales/zh_TW/messages.json | 4 ++ css/maximizeVideo.css | 12 ++++++ js/background.js | 43 +++++++++++++++---- js/content-script.js | 81 ++++++++++++++++++++++++++---------- manifest.json | 11 ++++- options.html | 7 ++++ 7 files changed, 129 insertions(+), 33 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 0c78ed1..3ea7399 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -78,5 +78,9 @@ "execute": { "message": "Maximize video", "description": "" + }, + "youtubeControllers": { + "message": "Keep original video controls on Youtube", + "description": "" } } diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index fe0d8b7..9e89539 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -78,5 +78,9 @@ "execute": { "message": "影片最大化", "description": "" + }, + "youtubeControllers": { + "message": "在 Youtube 網站使用原有的播放器控制列", + "description": "" } } diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index c3bf0c7..31aca46 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -39,10 +39,18 @@ opacity: 1 !important; } +.hover-display[mvclass=core] { + width: 100% !important; +} + .hover-display[mvclass=core]:hover { opacity: 1 !important; } +.hover-display[mvclass=core] .pl-pinned-panel { + display: none !important; +} + html[mvclass=core], body[mvclass=show], body[mvclass=show-t] { @@ -83,3 +91,7 @@ body[mvclass=show-t] { .mvVideoBlock:hover { opacity: 0.5; } + +[mvclass="show-t"] [data-a-target="player-settings-submenu-advanced-toggle-mini"] { + display:none !important; +} diff --git a/js/background.js b/js/background.js index a6622c4..4b8c1ff 100644 --- a/js/background.js +++ b/js/background.js @@ -11,7 +11,8 @@ let defaultPreference = { autoHideCursor: false, delayForHideCursor: 5, iconColor: 0, - version: 6 + youtubeControllers: false, + version: 7 }; let preferences = {}; @@ -185,16 +186,40 @@ const messageHandler = (message, sender, sendResponse) => { }); } else if(message.action === 'maximizeVideo'){ - chrome.tabs.sendMessage(sender.tab.id, { - action: 'maximizeVideo', - hashCode: message.hashCode, - strict: message.strict - }); + const exec = ({youtubeControllers}) => { + chrome.tabs.sendMessage(sender.tab.id, { + action: 'maximizeVideo', + hashCode: message.hashCode, + strict: message.strict, + youtubeControllers + }); + } + + if (preferences.youtubeControllers && sender.tab.url.startsWith('https://www.youtube.com/watch')) { + exec({youtubeControllers: true}) + chrome.tabs.sendMessage(sender.tab.id, { + action: 'maximizeVideo-ytb', + }); + } else { + exec({youtubeControllers: false}) + } } else if(message.action === 'cancelMaximaMode'){ - chrome.tabs.sendMessage(sender.tab.id, { - action: 'cancelMaximaMode' - }); + const exec = ({youtubeControllers}) => { + chrome.tabs.sendMessage(sender.tab.id, { + action: 'cancelMaximaMode', + youtubeControllers + }); + } + + if (preferences.youtubeControllers && sender.tab.url.startsWith('https://www.youtube.com/watch')) { + exec({youtubeControllers: true}) + chrome.tabs.sendMessage(sender.tab.id, { + action: 'cancelMaximaMode-ytb', + }); + } else { + exec({youtubeControllers: false}) + } } else if(message.action === 'videoHotkey'){ chrome.tabs.sendMessage(sender.tab.id, { diff --git a/js/content-script.js b/js/content-script.js index 8ba74dc..1abcb9f 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -180,12 +180,37 @@ const srcProxy = { } } +const setMiniPlayer = (impl, disable) => { + const settingsButton = document.querySelector('[data-a-target="player-settings-button"]'); + try { + settingsButton.click(); + document.querySelector('[data-a-target="player-settings-menu-item-advanced"]').click(); + const menuItem = document.querySelector('[data-a-target="player-settings-submenu-advanced-toggle-mini"]'); + const input = menuItem.querySelector('input'); + if (disable) { + if (input.checked) { + impl.miniPlayer = true; + input.click(); + } + } else { + if (!!impl.miniPlayer && !input.checked) { + input.click(); + } + } + } catch (e) { + } finally { + settingsButton.click(); + } +} + function MVUniversal() {} MVUniversal.prototype={ topTags: [], mvClass: 'show', setCoreNode: function () { }, + restoreCoreNode: function () { + }, getMainNode: function (node) { return node; }, @@ -243,19 +268,16 @@ MVTwitch.prototype={ topTags: ['body', 'html'], mvClass: 'show-t', setCoreNode: function () { - let coreNode = document.querySelector('.pl-controls-bottom'); - if(!coreNode) { - coreNode = document.querySelector('.player-controls-bottom'); - } + let coreNode = document.querySelector('.player-controls'); coreNode.parentNode.setAttribute('mvclass', 'core'); coreNode.setAttribute('mvclass', 'core'); - let streamstatus = document.querySelector('.player-streamstatus'); - if(streamstatus) { - streamstatus.setAttribute('mvclass', 'core'); - } + setMiniPlayer(this, true); + }, + restoreCoreNode: function () { + setMiniPlayer(this, false); }, getMainNode: function (node) { - return document.querySelector('.video-player .video-player__container'); + return document.querySelector('.video-player__container'); }, setControllers: function (show, node) { }, @@ -269,20 +291,17 @@ MVETwitch.prototype={ mvClass: 'show-t', setCoreNode: function () { let controlsNode = document.querySelector('.pl-controls-bottom'); - if(!controlsNode) { - controlsNode = document.querySelector('.player-controls-bottom'); - } controlsNode.setAttribute('mvclass', 'core'); controlsNode.parentNode.setAttribute('mvclass', 'core'); - let streamstatus = document.querySelector('.player-streamstatus'); - if(streamstatus) { - streamstatus.setAttribute('mvclass', 'core'); - } + let hoverDisplay = document.querySelector('.hover-display'); + hoverDisplay.setAttribute('mvclass', 'core'); let playerui = document.querySelector('.player-ui'); if(playerui) { playerui.setAttribute('mvclass', 'core'); } }, + restoreCoreNode: function () { + }, getMainNode: function (node) { return node; }, @@ -299,6 +318,8 @@ MVNetflix.prototype={ setCoreNode: function () { document.querySelector('.controls').setAttribute('mvclass', 'core'); }, + restoreCoreNode: function () { + }, getMainNode: function (node) { return node; }, @@ -367,6 +388,13 @@ function getHashCode(length) { } let selfId = getHashCode(HASHCODE_LENGTH); +function isYoutubeEmbed () { + return window.location.href.startsWith('https://www.youtube.com/embed/'); +} +function isYoutubeWatch () { + return window.location.href.startsWith('https://www.youtube.com/watch'); +} + function addToMvCover (elemInfo) { // console.log('[addToMvCover] ' + JSON.stringify(elemInfo, null, 4)); // console.log(new Date()); @@ -513,7 +541,10 @@ function maximizeMainNode() { }; function restoreVideo() { - mvImpl.setControllers(false); + if (!mvImpl.selectedNode) return; + if (!mvImpl.youtubeControllers || (!isYoutubeEmbed() && !isYoutubeWatch())) { + mvImpl.setControllers(false); + } lockMainNodeStyle(false); mvImpl.mainNode.setAttribute('style', mvImpl.originalStyle); @@ -544,13 +575,17 @@ function maximizeVideo(selectedNode) { }; mvImpl.selectedNode = selectedNode; - mvImpl.setControllers(true); + if (!mvImpl.youtubeControllers || (!isYoutubeEmbed() && !isYoutubeWatch())) { + mvImpl.setControllers(true); + } mvImpl.mainNode = mvImpl.getMainNode(selectedNode); if(window !== window.top) { //this video is in iframe window.parent.postMessage({action: 'getId', senderId: selfId, nextAction: 'setVideoNode'},'*'); } mvImpl.registerEvents(mvImpl.mainNode); - hideAllSibling(mvImpl.mainNode); + if (!mvImpl.youtubeControllers || (!isYoutubeEmbed() && !isYoutubeWatch())) { + hideAllSibling(mvImpl.mainNode); + } maximizeMainNode(); } @@ -671,7 +706,7 @@ window.addEventListener('keypress', handleKeyEvent, true); window.addEventListener('keyup', handleKeyEvent, true); window.addEventListener('DOMContentLoaded', event => { document.addEventListener('fullscreenchange', event => { - if (mvImpl.status === 'maximaVideo') { + if (mvImpl.status === 'maximaVideo' && !mvImpl.youtubeControllers && !mvImpl instanceof MVTwitch && !mvImpl instanceof MVETwitch) { event.stopPropagation(); event.stopImmediatePropagation(); } @@ -706,7 +741,7 @@ function isVisible(elem, elemRect) { function getElemInfo(elem) { let elemRect = elem.getBoundingClientRect(); - if(window.location.href.startsWith('https://www.youtube.com/embed/') && !elem.src) { + if(isYoutubeEmbed() && !elem.src) { let newElemRect = { bottom: elemRect.bottom, height: elemRect.height, @@ -830,7 +865,8 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { }); mvImpl.setCoreNode(); mvImpl.currentHashCode = message.hashCode; - if(window.location.href.startsWith('https://www.youtube.com/embed/') && !elem.src) { + mvImpl.youtubeControllers = message.youtubeControllers; + if(isYoutubeEmbed() && !elem.src) { elem.click(); elem.addEventListener('progress', ()=>{ elem.pause(); @@ -912,6 +948,7 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { } else if(message.action === 'cancelMaximaMode') { mvImpl.status = 'normal'; + mvImpl.restoreCoreNode(); restoreVideo(); } return true; diff --git a/manifest.json b/manifest.json index 9e7aebd..97f7a5b 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.12", + "version": "0.0.13", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", @@ -11,7 +11,7 @@ "64": "icon/icon.svg", "96": "icon/icon.svg" }, - "applications": { + "browser_specific_settings": { "gecko": { "id": "MaximizeVideo@ettoolong", "strict_min_version": "66.0" @@ -32,6 +32,13 @@ "css": ["css/maximizeVideo.css"], "all_frames": true, "run_at": "document_start" + }, + { + "matches": ["https://www.youtube.com/*"], + "js": ["js/ytb.js"], + "css": ["css/ytb.css"], + "all_frames": false, + "run_at": "document_start" } ], "browser_action": { diff --git a/options.html b/options.html index f757190..e042a86 100644 --- a/options.html +++ b/options.html @@ -82,6 +82,13 @@
+
+
+ + +
+
+ From 111bd621efb009c50f34811369f7175ca3fd028b Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 13 Dec 2019 23:08:51 +0800 Subject: [PATCH 17/33] 1. support original Youtube video controls --- css/ytb.css | 32 ++++++++++++++++++++++++++++++++ js/ytb.js | 31 +++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 css/ytb.css create mode 100644 js/ytb.js diff --git a/css/ytb.css b/css/ytb.css new file mode 100644 index 0000000..260c5cf --- /dev/null +++ b/css/ytb.css @@ -0,0 +1,32 @@ +body.mvytp { + overflow: hidden !important; +} + +body.mvytp .ytp-size-button { + display: none !important; +} + +body.mvytp #movie_player { + position: fixed !important; + /* z-index: 999999999999 !important; */ + z-index: 2100 !important; + bottom: 0px !important; + right: 0px !important; + left: 0px !important; + top: 0px !important; +} + +body.mvytp .html5-video-container { + height: 100% !important; + width: 100% !important; +} + +body.mvytp .html5-video-container .html5-main-video { + height: 100% !important; + width: 100% !important; + bottom: 0px !important; + right: 0px !important; + left: 0px !important; + top: 0px !important; + background: #000 !important; +} diff --git a/js/ytb.js b/js/ytb.js new file mode 100644 index 0000000..47911a9 --- /dev/null +++ b/js/ytb.js @@ -0,0 +1,31 @@ +chrome.runtime.onMessage.addListener((message) => { + if(message.action === 'maximizeVideo-ytb') { + const ytpSizeButton = document.querySelector('.ytp-size-button'); + if (ytpSizeButton) { + document.body.classList.add('mvytp'); + const ytdWatchFlexy = document.querySelector('ytd-watch-flexy'); + let theater_mode = ytdWatchFlexy.hasAttribute('theater'); + if (!theater_mode) { + ytdWatchFlexy.setAttribute('mv', ''); + ytpSizeButton.click(); + } + setTimeout(()=>{ + window.dispatchEvent(new Event('resize')); + }, 10); + } + } + else if(message.action === 'cancelMaximaMode-ytb') { + const ytpSizeButton = document.querySelector('.ytp-size-button'); + if (ytpSizeButton) { + document.body.classList.remove('mvytp'); + const ytdWatchFlexy = document.querySelector('ytd-watch-flexy'); + if (ytdWatchFlexy.hasAttribute('mv')) { + ytdWatchFlexy.removeAttribute('mv'); + window.dispatchEvent(new Event('resize')) + setTimeout(()=>{ + ytpSizeButton.click(); + }, 10); + } + } + } +}) From 798f110269e743403e8fe9d1cf700acadfd87ffa Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sat, 25 Jul 2020 15:40:56 +0800 Subject: [PATCH 18/33] fix issue #30 --- js/content-script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/content-script.js b/js/content-script.js index 1abcb9f..704dbfe 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -664,7 +664,7 @@ window.addEventListener('keydown', event => { if(event.key === 'Escape' && mvImpl.status === 'selectVideo') { chrome.runtime.sendMessage({action: 'cancelSelectMode'}); } else if (mvImpl.status === 'maximaVideo') { - if(event.altKey || event.metaKey){ + if (event.altKey || event.metaKey || event.ctrlKey) { return true; } const func = keyFuncs[event.keyCode]; From 6ee8282d1e892d1f591e177a9436eeafb1b7c742 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sat, 25 Jul 2020 15:44:08 +0800 Subject: [PATCH 19/33] fix issue #24 --- js/background.js | 18 ++++++++++++++++++ js/content-script.js | 1 + manifest.json | 3 ++- 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/js/background.js b/js/background.js index 4b8c1ff..e80d9a4 100644 --- a/js/background.js +++ b/js/background.js @@ -162,6 +162,20 @@ const messageHandler = (message, sender, sendResponse) => { if(message.action === 'tabReady'){ chrome.browserAction.enable(sender.tab.id); } + else if(message.action === 'execContentScript'){ + chrome.tabs.executeScript(sender.tab.Id, { + file: 'js/content-script.js', + frameId: sender.frameId, + runAt: 'document_end' + }, () => { + chrome.tabs.sendMessage(sender.tab.id, { + action: 'scanVideo', + supportFlash: message.supportFlash !== undefined ? message.supportFlash : preferences.supportFlash, + minWidth: message.minWidth !== undefined ? message.minWidth : preferences.minWidth, + minHeight: message.minHeight !== undefined ? message.minHeight : preferences.minHeight + }, {frameId: sender.frameId}); + }); + } else if(message.action === 'popupWindow'){ if(preferences.popupWindow) { chrome.runtime.sendMessage('PopupWindow@ettoolong', @@ -172,6 +186,10 @@ const messageHandler = (message, sender, sendResponse) => { } } else if(message.action === 'scanVideo'){ + chrome.tabs.executeScript(sender.tab.Id, { + code: '(function(){if(window !== window.top && !window.selfId) chrome.runtime.sendMessage({action: "execContentScript"})})();', + allFrames: true + }); chrome.tabs.sendMessage(sender.tab.id, { action: 'scanVideo', hashCode: message.hashCode, diff --git a/js/content-script.js b/js/content-script.js index 704dbfe..f611d90 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -387,6 +387,7 @@ function getHashCode(length) { return hashCode; } let selfId = getHashCode(HASHCODE_LENGTH); +window.selfId = selfId; function isYoutubeEmbed () { return window.location.href.startsWith('https://www.youtube.com/embed/'); diff --git a/manifest.json b/manifest.json index 97f7a5b..0375380 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.13", + "version": "0.0.14", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", @@ -47,6 +47,7 @@ "default_icon": "icon/icon_b.svg" }, "permissions": [ + "http://*/*", "https://*/*", "file:///*", "storage", "tabs" ], From db4b2786df882a68fd7f23ae9e1c3a69df273ac7 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Tue, 28 Jul 2020 00:35:28 +0800 Subject: [PATCH 20/33] fix dysfunction with Dark Reader --- js/content-script.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js/content-script.js b/js/content-script.js index f611d90..3972a31 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -349,14 +349,13 @@ let vnStyle = [ 'border-width:0 !important;', 'cursor:default !important;', 'object-fit:contain !important;', - 'z-index: 2147483639 !important;', - 'background:black !important;'].join(''); + 'z-index: 2147483639 !important;'].join(''); let vnStyleList = [ 'position', 'top', 'left', 'min-width', 'min-height', 'width', 'height', 'max-width', 'max-height', 'margin', 'padding', 'visibility', 'border-width', - 'cursor', 'background']; + 'cursor']; if(window.location.href.startsWith('https://www.twitch.tv/')) { mvImpl = new MVTwitch(); From 6436b397a621baf1742fb6adbb495d9f406b4b8e Mon Sep 17 00:00:00 2001 From: ettoolong Date: Tue, 28 Jul 2020 02:41:58 +0800 Subject: [PATCH 21/33] workaround for conflict with Dark Reader --- js/content-script.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/js/content-script.js b/js/content-script.js index 3972a31..c0a2a25 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -349,13 +349,16 @@ let vnStyle = [ 'border-width:0 !important;', 'cursor:default !important;', 'object-fit:contain !important;', - 'z-index: 2147483639 !important;'].join(''); + 'z-index: 2147483639 !important;', + 'background-repeat: repeat !important;', + 'background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w=="); !important;'].join(''); let vnStyleList = [ 'position', 'top', 'left', 'min-width', 'min-height', 'width', 'height', 'max-width', 'max-height', 'margin', 'padding', 'visibility', 'border-width', - 'cursor']; + 'cursor', 'background-image', + 'background-repeat']; if(window.location.href.startsWith('https://www.twitch.tv/')) { mvImpl = new MVTwitch(); From 2608452d1f5ae244522f0d7d852c49ffb5c690a9 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 31 Jul 2020 20:11:04 +0800 Subject: [PATCH 22/33] add background image checking --- js/content-script.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/js/content-script.js b/js/content-script.js index c0a2a25..07d5c9e 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -350,15 +350,13 @@ let vnStyle = [ 'cursor:default !important;', 'object-fit:contain !important;', 'z-index: 2147483639 !important;', - 'background-repeat: repeat !important;', - 'background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w=="); !important;'].join(''); +].join(''); let vnStyleList = [ 'position', 'top', 'left', 'min-width', 'min-height', 'width', 'height', 'max-width', 'max-height', 'margin', 'padding', 'visibility', 'border-width', - 'cursor', 'background-image', - 'background-repeat']; + 'cursor']; if(window.location.href.startsWith('https://www.twitch.tv/')) { mvImpl = new MVTwitch(); @@ -513,29 +511,36 @@ function lockMainNodeStyle(lock) { function maximizeMainNode() { let originalStyle = mvImpl.originalStyle = (mvImpl.mainNode.getAttribute('style') || ''); + let noBgImage = window.getComputedStyle(mvImpl.mainNode, null).backgroundImage === 'none'; + let fixedStyle = vnStyle; + let fixedStyleList = noBgImage ? [...vnStyleList, 'background-image', 'background-repeat'] : [...vnStyleList] + if (noBgImage) { + fixedStyle += 'background-repeat: repeat !important;background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w=="); !important;'; + } let vnNewStyle = ''; originalStyle = originalStyle.trim().replace(/\r\n/g, '\r').replace(/\n/g, '\r').replace(/\r/g, ''); - if(originalStyle === '') { - vnNewStyle = vnStyle; + if (originalStyle === '') { + vnNewStyle = fixedStyle; } else { let styles = originalStyle.split(';'); let slist = []; - for(let s of styles) { + for (let s of styles) { let t = /([a-zA-Z-]{2,})\s?:\s?(.+)/; if(t.test(s)) { let m = s.split(t); let key = m[1]; let value = m[2]; - if(!vnStyleList.includes(key)) + if (!fixedStyleList.includes(key)) { slist.push(key+':'+value); + } } } - if(slist.length === 0) { - vnNewStyle = vnStyle; + if (slist.length === 0) { + vnNewStyle = fixedStyle; } else { - vnNewStyle = vnStyle + slist.join(';')+';'; + vnNewStyle = fixedStyle + slist.join(';')+';'; } } mvImpl.vnNewStyle = vnNewStyle; From 2af15d7e5e4b772050eef16683145d715c79b158 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 31 Jul 2020 21:23:29 +0800 Subject: [PATCH 23/33] remove tabs permissions --- manifest.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/manifest.json b/manifest.json index 0375380..c03d3ef 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.14", + "version": "0.0.15", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", @@ -48,8 +48,7 @@ }, "permissions": [ "http://*/*", "https://*/*", "file:///*", - "storage", - "tabs" + "storage" ], "default_locale": "en", "options_ui": { From be9f6463be5075eae2a69b7a1afd44a0bc841f5e Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sun, 2 Aug 2020 11:13:32 +0800 Subject: [PATCH 24/33] fix #33 --- js/background.js | 4 ++-- js/content-script.js | 6 +++--- manifest.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/js/background.js b/js/background.js index e80d9a4..eb53acd 100644 --- a/js/background.js +++ b/js/background.js @@ -213,7 +213,7 @@ const messageHandler = (message, sender, sendResponse) => { }); } - if (preferences.youtubeControllers && sender.tab.url.startsWith('https://www.youtube.com/watch')) { + if (preferences.youtubeControllers && message.url.startsWith('https://www.youtube.com/watch')) { exec({youtubeControllers: true}) chrome.tabs.sendMessage(sender.tab.id, { action: 'maximizeVideo-ytb', @@ -230,7 +230,7 @@ const messageHandler = (message, sender, sendResponse) => { }); } - if (preferences.youtubeControllers && sender.tab.url.startsWith('https://www.youtube.com/watch')) { + if (preferences.youtubeControllers && message.url.startsWith('https://www.youtube.com/watch')) { exec({youtubeControllers: true}) chrome.tabs.sendMessage(sender.tab.id, { action: 'cancelMaximaMode-ytb', diff --git a/js/content-script.js b/js/content-script.js index 07d5c9e..ef81a3f 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -440,7 +440,7 @@ function addToMvCover (elemInfo) { if(event.button === 0) { event.stopImmediatePropagation(); event.preventDefault(); - let msg = {action: 'maximizeVideo', hashCode: elemInfo.hashCode}; + let msg = {action: 'maximizeVideo', url: window.location.href, hashCode: elemInfo.hashCode}; try{ if(event.shiftKey && event.layerX < 10 && event.layerY < 10 ) msg.strict = true; } catch (ex){} @@ -472,7 +472,7 @@ function addToMvCover (elemInfo) { } if(selected) { mvImpl.toolbarAction = 0; - chrome.runtime.sendMessage({action: 'maximizeVideo', hashCode: selected.getAttribute('mvMaskHash')}); + chrome.runtime.sendMessage({action: 'maximizeVideo', url: window.location.href, hashCode: selected.getAttribute('mvMaskHash')}); } } } @@ -923,7 +923,7 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { } else if(mvImpl.status === 'maximaVideo') { clearHideCursorTimer(); - chrome.runtime.sendMessage({action: 'cancelMaximaMode'}); + chrome.runtime.sendMessage({action: 'cancelMaximaMode', url: window.location.href}); } } } diff --git a/manifest.json b/manifest.json index c03d3ef..409ce5e 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.15", + "version": "0.0.16", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From bb0353569741bd47400349184acab3b6fdef6c79 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Mon, 3 Aug 2020 00:34:22 +0800 Subject: [PATCH 25/33] fix a styling bug --- js/content-script.js | 2 +- manifest.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/content-script.js b/js/content-script.js index ef81a3f..9c250b5 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -515,7 +515,7 @@ function maximizeMainNode() { let fixedStyle = vnStyle; let fixedStyleList = noBgImage ? [...vnStyleList, 'background-image', 'background-repeat'] : [...vnStyleList] if (noBgImage) { - fixedStyle += 'background-repeat: repeat !important;background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w=="); !important;'; + fixedStyle += 'background-repeat: repeat !important;background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w==") !important;'; } let vnNewStyle = ''; originalStyle = originalStyle.trim().replace(/\r\n/g, '\r').replace(/\n/g, '\r').replace(/\r/g, ''); diff --git a/manifest.json b/manifest.json index 409ce5e..150cee4 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.16", + "version": "0.0.17", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From f0845b2fdb7f2cb9872ec9a25e774f4250afb9f1 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Mon, 3 Aug 2020 01:46:16 +0800 Subject: [PATCH 26/33] fix background-image style issue --- css/maximizeVideo.css | 5 +++++ js/content-script.js | 6 +----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index 31aca46..e710dd6 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -25,6 +25,11 @@ will-change:auto !important; } +video[mvclass=core] { + background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w==") !important; + background-repeat: repeat !important; +} + .controls[mvclass=core], .hover-display[mvclass=core], .pl-controls-bottom[mvclass=core], diff --git a/js/content-script.js b/js/content-script.js index 9c250b5..7c11ccc 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -511,12 +511,8 @@ function lockMainNodeStyle(lock) { function maximizeMainNode() { let originalStyle = mvImpl.originalStyle = (mvImpl.mainNode.getAttribute('style') || ''); - let noBgImage = window.getComputedStyle(mvImpl.mainNode, null).backgroundImage === 'none'; let fixedStyle = vnStyle; - let fixedStyleList = noBgImage ? [...vnStyleList, 'background-image', 'background-repeat'] : [...vnStyleList] - if (noBgImage) { - fixedStyle += 'background-repeat: repeat !important;background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w==") !important;'; - } + let fixedStyleList = [...vnStyleList] let vnNewStyle = ''; originalStyle = originalStyle.trim().replace(/\r\n/g, '\r').replace(/\n/g, '\r').replace(/\r/g, ''); if (originalStyle === '') { From 02801e06cc7a73b1c4b718c70a67fbc454d694ae Mon Sep 17 00:00:00 2001 From: ettoolong Date: Mon, 3 Aug 2020 01:47:43 +0800 Subject: [PATCH 27/33] update version code --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 150cee4..b22c0c2 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.17", + "version": "0.0.18", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From d29fad7811b7acdcf835000e29e89fea6dada648 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Sat, 4 Sep 2021 11:51:40 +0800 Subject: [PATCH 28/33] fix issue #43 --- css/maximizeVideo.css | 2 ++ manifest.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index e710dd6..6d6f915 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -23,6 +23,8 @@ -webkit-transformStyle:flat !important; border-width:0px !important; will-change:auto !important; + mask-image: unset !important; + -webkit-mask-image: unset !important; } video[mvclass=core] { diff --git a/manifest.json b/manifest.json index b22c0c2..616f37d 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.18", + "version": "0.0.19", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From 39681c12a3dbac38db428867f6d1167011ba8fe9 Mon Sep 17 00:00:00 2001 From: Kevin Mehta <42982854+kimehta@users.noreply.github.com> Date: Thu, 16 Dec 2021 20:04:11 -0600 Subject: [PATCH 29/33] master - set background color black replace background black base64 image with black background color --- css/maximizeVideo.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index 6d6f915..a49a1bc 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -28,8 +28,7 @@ } video[mvclass=core] { - background-image: url("data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/w==") !important; - background-repeat: repeat !important; + background-color:black; } .controls[mvclass=core], From e4a122158580c4b652769cc0923404aabe9b4d18 Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 7 Jan 2022 11:10:29 +0800 Subject: [PATCH 30/33] update version --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 616f37d..63a51de 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.19", + "version": "0.0.20", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", From 1a286290a9e6a17c0038f28b2726180433e1efea Mon Sep 17 00:00:00 2001 From: ettoolong Date: Thu, 22 Aug 2024 20:46:57 +0800 Subject: [PATCH 31/33] support shadow-DOM --- css/maximizeVideo.css | 4 +- js/background.js | 10 ++-- js/content-script.js | 114 +++++++++++++++++++++++++++++++++++------- manifest.json | 2 +- options.html | 4 +- 5 files changed, 108 insertions(+), 26 deletions(-) diff --git a/css/maximizeVideo.css b/css/maximizeVideo.css index a49a1bc..3d73593 100644 --- a/css/maximizeVideo.css +++ b/css/maximizeVideo.css @@ -20,11 +20,13 @@ transform: none !important; -webkit-transform:none !important; transform-style:flat !important; - -webkit-transformStyle:flat !important; + -webkit-transform-style:flat !important; border-width:0px !important; will-change:auto !important; mask-image: unset !important; -webkit-mask-image: unset !important; + container-type: normal !important; + background: none !important; } video[mvclass=core] { diff --git a/js/background.js b/js/background.js index eb53acd..560beb5 100644 --- a/js/background.js +++ b/js/background.js @@ -5,14 +5,14 @@ let selectedVideo = null; let defaultPreference = { popupWindow: false, toolbarAction: 0, - supportFlash: true, + // supportFlash: true, minWidth: 100, minHeight: 100, autoHideCursor: false, delayForHideCursor: 5, iconColor: 0, youtubeControllers: false, - version: 7 + version: 8 }; let preferences = {}; @@ -170,7 +170,7 @@ const messageHandler = (message, sender, sendResponse) => { }, () => { chrome.tabs.sendMessage(sender.tab.id, { action: 'scanVideo', - supportFlash: message.supportFlash !== undefined ? message.supportFlash : preferences.supportFlash, + // supportFlash: message.supportFlash !== undefined ? message.supportFlash : preferences.supportFlash, minWidth: message.minWidth !== undefined ? message.minWidth : preferences.minWidth, minHeight: message.minHeight !== undefined ? message.minHeight : preferences.minHeight }, {frameId: sender.frameId}); @@ -193,7 +193,7 @@ const messageHandler = (message, sender, sendResponse) => { chrome.tabs.sendMessage(sender.tab.id, { action: 'scanVideo', hashCode: message.hashCode, - supportFlash: message.supportFlash !== undefined ? message.supportFlash : preferences.supportFlash, + // supportFlash: message.supportFlash !== undefined ? message.supportFlash : preferences.supportFlash, minWidth: message.minWidth !== undefined ? message.minWidth : preferences.minWidth, minHeight: message.minHeight !== undefined ? message.minHeight : preferences.minHeight }); @@ -272,7 +272,7 @@ const externalMessageHandler = (message, sender, sendResponse) => { action: 'setVideoMask', toolbarAction: toolbarAction, hashCode: hashCode, - supportFlash: message.supportFlash !== undefined ? message.supportFlash : preferences.supportFlash, + // supportFlash: message.supportFlash !== undefined ? message.supportFlash : preferences.supportFlash, minWidth: message.minWidth !== undefined ? message.minWidth : preferences.minWidth, minHeight: message.minHeight !== undefined ? message.minHeight : preferences.minHeight }); diff --git a/js/content-script.js b/js/content-script.js index 7c11ccc..c53f955 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -336,12 +336,12 @@ let vnStyle = [ 'position:fixed !important;', 'top:0 !important;', 'left:0 !important;', - 'min-width:0 !important;', - 'min-height:0 !important;', - 'width:100% !important;', - 'height:100% !important;', - 'max-width:100% !important;', - 'max-height:100% !important;', + 'min-width:100vw !important;', + 'min-height:100vh !important;', + 'width:100vw !important;', + 'height:100vh !important;', + 'max-width:100vw !important;', + 'max-height:100vh !important;', 'margin:0 !important;', 'padding:0 !important;', 'transform:none !important;', @@ -561,7 +561,8 @@ function restoreVideo() { } }; -function maximizeVideo(selectedNode) { +function maximizeVideo(selectedNode, chain = []) { + const _chain = [...chain] const hideAllSibling = (node) => { if(node === mvImpl.mainNode) { node.setAttribute('mvclass', 'core'); @@ -571,9 +572,16 @@ function maximizeVideo(selectedNode) { } let parent = node.parentNode; - if(parent && parent.nodeType === Node.ELEMENT_NODE) { - if(!mvImpl.topTags.includes(parent.tagName.toLocaleLowerCase())) { - hideAllSibling(parent); + if(parent) { + if (parent.nodeType === Node.ELEMENT_NODE ) { + if(!mvImpl.topTags.includes(parent.tagName.toLocaleLowerCase())) { + hideAllSibling(parent); + } + } else if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { + if (_chain.length) { + parent = _chain.pop() + hideAllSibling(parent); + } } } }; @@ -844,6 +852,78 @@ function setHideCursorTimer() { } } + +function findVideoElements(selector) { + const elements = [] + + document.querySelectorAll(selector).forEach(element => { + elements.push(element) + }) + + const shadowRoots = [] + const _findShadowRoots = (root) => { + root.querySelectorAll('*').forEach(element => { + // No shadow root? Continue. + if (!element.shadowRoot) { + return + } + shadowRoots.push(element) + _findShadowRoots(element.shadowRoot) + }) + } + _findShadowRoots(document) + if (shadowRoots.length) { + for(const e of shadowRoots) { + const v = e.shadowRoot.querySelector(selector) + if (v) { + elements.push(v) + } + } + } + return elements +} + +function findVideoElement(selector) { + const videoElem = document.querySelector(selector) + if (videoElem) { + return { elem: videoElem, chain: []} + } + + const _findShadowRoots = (root, chain) => { + let res = { elem: null, chain: chain} + root.querySelectorAll('*').forEach(element => { + // No shadow root? Continue. + if (!element.shadowRoot) { + return + } + if (!element.querySelector('#shadowStyle')) { + const shadowStyle = document.createElement('style'); + shadowStyle.setAttribute('id', 'shadowStyle') + shadowStyle.textContent = ` + :host([mvclass=show]) *:not([mvclass=show]):not([mvclass=core]) { + display:none !important; + opacity:0 !important; + visibility: hidden !important; + } + `; + element.appendChild(shadowStyle); + } + const e = element.shadowRoot.querySelector(selector) + if (e) { + res = {elem: e, chain: [ ...chain, element ]} + } else { + const res2 = _findShadowRoots(element.shadowRoot, [ ...chain, element ]) + if (res2.elem) { + res = res2 + } + } + }) + return res + } + const res = _findShadowRoots(document, []) + return res +} + chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { if(message.action === 'videoHotkey') { if(mvImpl.mainNode.tagName === 'VIDEO') { @@ -862,7 +942,7 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { v.pause(); } - let elem = document.querySelector('video[mvHashCode="'+message.hashCode+'"],embed[mvHashCode="'+message.hashCode+'"][type="application/x-shockwave-flash"],object[mvHashCode="'+message.hashCode+'"][type="application/x-shockwave-flash"]'); + let { elem, chain } = findVideoElement('video[mvHashCode="'+message.hashCode+'"]') if(elem) { initPrefs( ()=>{ setHideCursorTimer(); @@ -877,7 +957,7 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { },{capture: true, once: true}); } mvImpl.strict = message.strict; - maximizeVideo(elem); + maximizeVideo(elem, chain); if(mvImpl.mainNode.tagName === 'VIDEO') { mvImpl.mainNode.focus({preventScroll:true}); } @@ -908,7 +988,7 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { cover.setAttribute('mvMaskHash', message.hashCode); document.body.appendChild(cover); let msg = {action: 'scanVideo', hashCode: message.hashCode}; - if(message.supportFlash !== undefined) msg.supportFlash = message.supportFlash; + // if(message.supportFlash !== undefined) msg.supportFlash = message.supportFlash; if(message.minWidth !== undefined) msg.minWidth = message.minWidth; if(message.minHeight !== undefined) msg.minHeight = message.minHeight; chrome.runtime.sendMessage(msg); @@ -926,13 +1006,13 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { else if(message.action === 'scanVideo') { mvImpl.status = 'selectVideo'; // console.log('scanVideo'); - let selector = message.supportFlash ? 'video,embed[type="application/x-shockwave-flash"],object[type="application/x-shockwave-flash"]' : 'video'; - let elements = document.querySelectorAll(selector); + const selector = 'video'; + let elements = findVideoElements(selector) const _uploadElemInfo = () => { mvImpl.scanVideoTimer = null; if(mvImpl.status === 'selectVideo'){ uploadElemInfo(elements, message.minWidth, message.minHeight ); - elements = document.querySelectorAll(selector); + elements = findVideoElements(selector); uploadElemInfo(elements, message.minWidth, message.minHeight, true); mvImpl.scanVideoTimer = setTimeout(_uploadElemInfo, 200); } @@ -955,7 +1035,7 @@ chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { mvImpl.restoreCoreNode(); restoreVideo(); } - return true; + return false; }); if(window === window.top) { diff --git a/manifest.json b/manifest.json index 63a51de..3e85bd0 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.20", + "version": "0.0.23", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg", diff --git a/options.html b/options.html index e042a86..8b3023c 100644 --- a/options.html +++ b/options.html @@ -45,10 +45,10 @@ -
+
From 7888cf495b26c36548fcc91a3856b40f4f6b4918 Mon Sep 17 00:00:00 2001 From: d3fault Date: Mon, 9 Dec 2024 14:30:32 -0700 Subject: [PATCH 32/33] add save+restore scrollbar positions (fix #63) --- js/content-script.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/content-script.js b/js/content-script.js index c53f955..d287825 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -559,10 +559,17 @@ function restoreVideo() { node.removeAttribute('mvclass'); } } + + if(mvImpl.scrollPosition) { + window.scrollTo(mvImpl.scrollPosition.x, mvImpl.scrollPosition.y); + } }; function maximizeVideo(selectedNode, chain = []) { const _chain = [...chain] + + mvImpl.scrollPosition = { x: window.scrollX, y: window.scrollY }; + const hideAllSibling = (node) => { if(node === mvImpl.mainNode) { node.setAttribute('mvclass', 'core'); From cf03bb3227f218067998076ebdc781b72b14569e Mon Sep 17 00:00:00 2001 From: ettoolong Date: Fri, 13 Dec 2024 10:19:37 +0800 Subject: [PATCH 33/33] update version --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 3e85bd0..294ec48 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "description": "__MSG_extDescription__", "manifest_version": 2, "name": "__MSG_extName__", - "version": "0.0.23", + "version": "0.0.24", "homepage_url": "https://github.com/ettoolong/MaximizeVideo", "icons": { "16": "icon/icon.svg",