From e936388f10e4f458fe618765d026923aa2fe5ee1 Mon Sep 17 00:00:00 2001 From: D-Rekk Date: Fri, 20 Oct 2023 21:05:16 +0200 Subject: [PATCH 1/4] create fit-to-window player toggle --- js&css/web-accessible/functions.js | 4 ++- .../web-accessible/www.youtube.com/player.js | 35 +++++++++++++++++++ menu/skeleton-parts/player.js | 4 +++ 3 files changed, 42 insertions(+), 1 deletion(-) diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js index b95a91411..dd22ccb80 100644 --- a/js&css/web-accessible/functions.js +++ b/js&css/web-accessible/functions.js @@ -160,6 +160,7 @@ ImprovedTube.ytElementsHandler = function (node) { // if (this.storage.player_autoplay === false) { ImprovedTube.elements.player.stopVideo(); } ImprovedTube.elements.video = node.querySelector('video'); ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls'); + ImprovedTube.elements.player_right_controls = node.querySelector('.ytp-right-controls'); ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image'); ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button'); ImprovedTube.playerSize(); @@ -350,6 +351,7 @@ ImprovedTube.initPlayer = function () { ImprovedTube.playerRepeatButton(); ImprovedTube.playerRotateButton(); ImprovedTube.playerPopupButton(); + ImprovedTube.fitToWinButton(); ImprovedTube.playerControls(); setTimeout(function () { @@ -497,7 +499,7 @@ ImprovedTube.setCookie = function (name, value) { }; ImprovedTube.createPlayerButton = function (options) { - var controls = this.elements.player_left_controls; + var controls = options.position == "right" ? this.elements.player_right_controls : this.elements.player_left_controls; if (controls) { var button = document.createElement('button'); diff --git a/js&css/web-accessible/www.youtube.com/player.js b/js&css/web-accessible/www.youtube.com/player.js index 6e7e35223..fdf13602a 100644 --- a/js&css/web-accessible/www.youtube.com/player.js +++ b/js&css/web-accessible/www.youtube.com/player.js @@ -658,6 +658,41 @@ ImprovedTube.playerRotateButton = function () { this.elements.buttons['it-rotate-styles'].remove(); } }; + +/*------------------------------------------------------------------------------ +FIT-TO-WIN BUTTON +------------------------------------------------------------------------------*/ +ImprovedTube.fitToWinButton = function () { + if (this.storage.player_fit_to_win_button === true && (/watch\?/.test(location.href))) { + // const svgMarkup = ``; + const svgMarkup = ` + `; + + let tempContainer = document.createElement("div"); + tempContainer.innerHTML = svgMarkup; + const svg = tempContainer.firstChild; + this.createPlayerButton({ + id: 'it-fit-to-win-player-button', + child: svg, + opacity: 0.85, + position: "right", + onclick: function () { + var isFTW = document.querySelector("html").getAttribute("it-player-size") == "fit_to_window" + if (isFTW) { + ImprovedTube.storage.player_size = "do_not_change"; + document.querySelector("html").setAttribute(`it-player-size`, "do_not_change"); + } else { + ImprovedTube.storage.player_size = "fit_to_window"; + document.querySelector("html").setAttribute(`it-player-size`, "fit_to_window"); + } + window.dispatchEvent(new Event('resize')); + }, + title: 'Fit-To-Window' + }); + } else if (this.elements.buttons['it-fit-to-win-player-button']) { + this.elements.buttons['it-fit-to-win-player-button'].remove(); + } +}; /*------------------------------------------------------------------------------ POPUP PLAYER ------------------------------------------------------------------------------*/ diff --git a/menu/skeleton-parts/player.js b/menu/skeleton-parts/player.js index e10d74f38..cb55a93fe 100644 --- a/menu/skeleton-parts/player.js +++ b/menu/skeleton-parts/player.js @@ -1027,6 +1027,10 @@ extension.skeleton.main.layers.section.player.on.click = { component: 'switch', text: 'rotate' }, + player_fit_to_win_button: { + component: 'switch', + text: 'fitToWindow' + }, player_popup_button: { component: 'switch', text: 'popupPlayer' From d0934908eedaddb987092dc44ac140ab95572afb Mon Sep 17 00:00:00 2001 From: D-Rekk Date: Fri, 20 Oct 2023 22:28:46 +0200 Subject: [PATCH 2/4] update fit-to-window styles --- .../appearance/comments/comments.css | 2 +- .../appearance/player/player.css | 21 ++++++++++++------- js&css/extension/www.youtube.com/styles.css | 16 +++++++++++++- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/comments/comments.css b/js&css/extension/www.youtube.com/appearance/comments/comments.css index 1bb2abd9a..00e59234d 100644 --- a/js&css/extension/www.youtube.com/appearance/comments/comments.css +++ b/js&css/extension/www.youtube.com/appearance/comments/comments.css @@ -88,7 +88,7 @@ min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !impo html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0; flex-grow: 1;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary::before { content: ""; height: 24px; display: block;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary-inner {padding-top: 24px;} + html[data-page-type=video][it-comments-sidebar='true'][it-player-size="do_not_change"] ytd-watch-flexy #primary-inner {padding-top: 24px;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;} /* BORDERS */ diff --git a/js&css/extension/www.youtube.com/appearance/player/player.css b/js&css/extension/www.youtube.com/appearance/player/player.css index ad2d0f197..c59c9d27a 100644 --- a/js&css/extension/www.youtube.com/appearance/player/player.css +++ b/js&css/extension/www.youtube.com/appearance/player/player.css @@ -217,7 +217,7 @@ html[data-page-type=video][it-header-position=normal] ytd-app, html[data-page-type=video][it-header-position=static] ytd-app { --it-header-size: 56px; } - +/* html[data-page-type=video]:not([it-header-position]) ytd-watch-flexy:not([theater]), html[data-page-type=video][it-header-position=normal] ytd-watch-flexy:not([theater]), html[data-page-type=video][it-header-position=static] ytd-watch-flexy:not([theater]) { @@ -234,7 +234,7 @@ html[data-page-type=video]:not([it-header-position]) div#page:not(.watch-wide), html[data-page-type=video][it-header-position=normal] div#page:not(.watch-wide), html[data-page-type=video][it-header-position=static] div#page:not(.watch-wide) { --it-header-size: 70px; -} +} */ /*-------------------------------------------------------------- @@ -396,6 +396,7 @@ html[data-page-type=video][it-player-size='max_width'] .ytp-fit-cover-video .htm --------------------------------------------------------------*/ /*outdated line?*/ html[data-page-type=video][it-player-size='full_window'] ytd-watch-flexy[theater]:not([fullscreen]) #player-wide-container, +html[data-page-type=video][it-player-size='fit_to_window'] ytd-watch-flexy[full-bleed-player]:not([fullscreen]) #full-bleed-container.ytd-watch-flexy, html[data-page-type=video][it-player-size='full_window'] ytd-watch-flexy[full-bleed-player]:not([fullscreen]) #full-bleed-container.ytd-watch-flexy { height: calc(var(--it-player-size) - var(--it-header-size)) !important; max-height: var(--it-player-size) !important; @@ -411,6 +412,7 @@ html[data-page-type=video][it-player-size='full_window'] .ytp-fit-cover-video .h # "FIT TO WINDOW" (needs update) --------------------------------------------------------------*/ +html[data-page-type="video"][it-player-size="fit_to_window"] ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #primary {padding-top:0} html[data-page-type=video][it-player-size='fit_to_window'] { --it-player-size: 100vh;} @@ -483,18 +485,21 @@ html[data-page-type='video'][it-player-size]:not([it-player-size='do_not_change' align-items: center !important; } -[data-page-type='video'][it-player-size='fit_to_window'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy[theater]:not([fullscreen]) .html5-video-player { - display: table !important; - width: auto !important; -} [data-page-type='video'][it-player-size='fit_to_window'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy[theater]:not([fullscreen]) video { position: static !important; - width: auto !important; - height: calc(var(--it-player-size) - var(--it-header-size)) !important; max-height: none !important; + max-width: 100% !important; + height: var(--height) !important; + width: var(--width) !important; + } +[data-page-type='video'][it-player-size='fit_to_window'] ytd-app:not([player-fullscreen_]) #container { + --height: calc(var(--it-player-size) - var(--it-header-size)); + --ratio: calc(var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio)); + --width: calc(var(--height) * var(--ratio)); +} /*-------------------------------------------------------------- # THEATER: OFF diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 096de9f21..4e0bd8c0c 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -169,6 +169,20 @@ html[it-mini-player-cursor='nw-resize']::after { /*------------------------------------------------------------------------------ # ------------------------------------------------------------------------------*/ +.ytp-right-controls{ + display: flex; +} + +#it-fit-to-win-player-button{ + order: 1; +} +.ytp-fullscreen-button{ + order: 2; +} + +#ftw-icon path { + fill: none; +} .it-player-button { position: relative !important; display: flex !important; @@ -181,7 +195,7 @@ html[it-mini-player-cursor='nw-resize']::after { .it-player-button>svg { width: 56% !important; height: auto !important; - fill: #fff !important; + fill: #fff; } .it-player-button--tooltip { From 9faf650a29c895cb4b75d44409b6e24c708d1945 Mon Sep 17 00:00:00 2001 From: D-Rekk Date: Fri, 20 Oct 2023 22:31:56 +0200 Subject: [PATCH 3/4] improve fit-to-window toggle script --- .../web-accessible/www.youtube.com/player.js | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/player.js b/js&css/web-accessible/www.youtube.com/player.js index fdf13602a..0e0f64d92 100644 --- a/js&css/web-accessible/www.youtube.com/player.js +++ b/js&css/web-accessible/www.youtube.com/player.js @@ -664,9 +664,8 @@ FIT-TO-WIN BUTTON ------------------------------------------------------------------------------*/ ImprovedTube.fitToWinButton = function () { if (this.storage.player_fit_to_win_button === true && (/watch\?/.test(location.href))) { - // const svgMarkup = ``; - const svgMarkup = ` - `; + const svgMarkup = ` + `; let tempContainer = document.createElement("div"); tempContainer.innerHTML = svgMarkup; @@ -677,15 +676,14 @@ ImprovedTube.fitToWinButton = function () { opacity: 0.85, position: "right", onclick: function () { - var isFTW = document.querySelector("html").getAttribute("it-player-size") == "fit_to_window" - if (isFTW) { - ImprovedTube.storage.player_size = "do_not_change"; - document.querySelector("html").setAttribute(`it-player-size`, "do_not_change"); - } else { - ImprovedTube.storage.player_size = "fit_to_window"; - document.querySelector("html").setAttribute(`it-player-size`, "fit_to_window"); - } - window.dispatchEvent(new Event('resize')); + let previousSize = ImprovedTube.storage.player_size === "fit_to_window" ? "do_not_change" : ImprovedTube.storage.player_size; + let isFTW = document.querySelector("html").getAttribute("it-player-size") === "fit_to_window" + if (isFTW) { + document.querySelector("html").setAttribute(`it-player-size`, previousSize); + } else { + document.querySelector("html").setAttribute(`it-player-size`, "fit_to_window"); + } + window.dispatchEvent(new Event('resize')); }, title: 'Fit-To-Window' }); From ca9c7c732441d4aebb1bf8c0ea287ae53516e3b5 Mon Sep 17 00:00:00 2001 From: D-Rekk Date: Fri, 20 Oct 2023 23:24:47 +0200 Subject: [PATCH 4/4] update fit-to-window toggle --- js&css/web-accessible/functions.js | 3 ++- js&css/web-accessible/www.youtube.com/player.js | 11 ++++++----- menu/skeleton-parts/player.js | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js index dd22ccb80..a47424ef1 100644 --- a/js&css/web-accessible/functions.js +++ b/js&css/web-accessible/functions.js @@ -297,6 +297,7 @@ ImprovedTube.videoPageUpdate = function () { ImprovedTube.playerRepeatButton(); ImprovedTube.playerRotateButton(); ImprovedTube.playerPopupButton(); + ImprovedTube.playerFitToWinButton(); ImprovedTube.playerControls(); } }; @@ -351,7 +352,7 @@ ImprovedTube.initPlayer = function () { ImprovedTube.playerRepeatButton(); ImprovedTube.playerRotateButton(); ImprovedTube.playerPopupButton(); - ImprovedTube.fitToWinButton(); + ImprovedTube.playerFitToWinButton(); ImprovedTube.playerControls(); setTimeout(function () { diff --git a/js&css/web-accessible/www.youtube.com/player.js b/js&css/web-accessible/www.youtube.com/player.js index 0e0f64d92..602befa2e 100644 --- a/js&css/web-accessible/www.youtube.com/player.js +++ b/js&css/web-accessible/www.youtube.com/player.js @@ -662,7 +662,7 @@ ImprovedTube.playerRotateButton = function () { /*------------------------------------------------------------------------------ FIT-TO-WIN BUTTON ------------------------------------------------------------------------------*/ -ImprovedTube.fitToWinButton = function () { +ImprovedTube.playerFitToWinButton = function () { if (this.storage.player_fit_to_win_button === true && (/watch\?/.test(location.href))) { const svgMarkup = ` `; @@ -679,16 +679,17 @@ ImprovedTube.fitToWinButton = function () { let previousSize = ImprovedTube.storage.player_size === "fit_to_window" ? "do_not_change" : ImprovedTube.storage.player_size; let isFTW = document.querySelector("html").getAttribute("it-player-size") === "fit_to_window" if (isFTW) { - document.querySelector("html").setAttribute(`it-player-size`, previousSize); + document.querySelector("html").setAttribute("it-player-size", previousSize); } else { - document.querySelector("html").setAttribute(`it-player-size`, "fit_to_window"); + document.querySelector("html").setAttribute("it-player-size", "fit_to_window"); } - window.dispatchEvent(new Event('resize')); + window.dispatchEvent(new Event("resize")); }, - title: 'Fit-To-Window' + title: 'Fit To Window' }); } else if (this.elements.buttons['it-fit-to-win-player-button']) { this.elements.buttons['it-fit-to-win-player-button'].remove(); + document.querySelector("html").setAttribute("it-player-size", ImprovedTube.storage.player_size); } }; /*------------------------------------------------------------------------------ diff --git a/menu/skeleton-parts/player.js b/menu/skeleton-parts/player.js index cb55a93fe..5254cc3f2 100644 --- a/menu/skeleton-parts/player.js +++ b/menu/skeleton-parts/player.js @@ -1029,7 +1029,7 @@ extension.skeleton.main.layers.section.player.on.click = { }, player_fit_to_win_button: { component: 'switch', - text: 'fitToWindow' + text: 'Fit to Window' }, player_popup_button: { component: 'switch',