From a2a31057ea9e4c7e23f846eeaaa7c286948fb452 Mon Sep 17 00:00:00 2001 From: ImprovedTube Date: Sun, 29 Oct 2023 05:31:30 +0100 Subject: [PATCH] re-revert #1798 & edit --- .../appearance/comments/comments.css | 2 +- .../appearance/player/player.css | 34 +++++++++++++------ js&css/extension/www.youtube.com/styles.css | 16 ++++++++- js&css/web-accessible/functions.js | 5 ++- .../web-accessible/www.youtube.com/player.js | 34 +++++++++++++++++++ menu/skeleton-parts/player.js | 4 +++ 6 files changed, 82 insertions(+), 13 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 264cd09db..0478063ca 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 2b0ed0be4..9044cd9be 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; -} +} */ /*-------------------------------------------------------------- @@ -395,6 +395,13 @@ html[data-page-type=video][it-player-size='max_width'] .ytp-fit-cover-video .htm # FULL HEIGHT "Full window" --------------------------------------------------------------*/ +/*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; +} + html[data-page-type=video][it-player-size='full_window'] { --it-player-size: 100vh;} @@ -411,6 +418,7 @@ html[data-page-type=video][it-player-size='full_window'] ytd-watch-flexy[full-bl # "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 +491,24 @@ 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, 100vh) - var(--it-header-size, 0)) !important; +/* width: auto !important; + height: calc(var(--it-player-size, 100vh) - var(--it-header-size, 0)) !important; + */ max-height: none !important; + max-width: 100% !important; + height: var(--height, 64vh) !important; + width: var(--width, 36vw) !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 @@ -528,8 +542,8 @@ html[data-page-type='video'][it-player-size]:not([it-player-size='do_not_change' html[data-page-type='video'][it-player-size='custom'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy:not([theater]):not([fullscreen]) #player-container, html[data-page-type='video'][it-player-size='custom'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy[theater]:not([fullscreen]) #player-theater-container { - width: var(--it-player-width, 60vw) !important; - height: var(--it-player-height, 30vh) !important; + width: var(--it-player-width, 64vw) !important; + height: var(--it-player-height, 36vh) !important; margin: 0 auto; min-height: auto !important; max-height: none !important; diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 70ab5c407..146d57fc5 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -181,6 +181,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; @@ -193,7 +207,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 { diff --git a/js&css/web-accessible/functions.js b/js&css/web-accessible/functions.js index c50ef9376..0fc45b275 100644 --- a/js&css/web-accessible/functions.js +++ b/js&css/web-accessible/functions.js @@ -162,6 +162,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(); @@ -302,6 +303,7 @@ ImprovedTube.videoPageUpdate = function () { ImprovedTube.playerRepeatButton(); ImprovedTube.playerRotateButton(); ImprovedTube.playerPopupButton(); + ImprovedTube.playerFitToWinButton(); ImprovedTube.playerControls(); } }; @@ -356,6 +358,7 @@ ImprovedTube.initPlayer = function () { ImprovedTube.playerRepeatButton(); ImprovedTube.playerRotateButton(); ImprovedTube.playerPopupButton(); + ImprovedTube.playerFitToWinButton(); ImprovedTube.playerControls(); setTimeout(function () { @@ -503,7 +506,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 a79cc91d1..056771ceb 100644 --- a/js&css/web-accessible/www.youtube.com/player.js +++ b/js&css/web-accessible/www.youtube.com/player.js @@ -672,6 +672,40 @@ ImprovedTube.playerRotateButton = function () { this.elements.buttons['it-rotate-styles'].remove(); } }; + +/*------------------------------------------------------------------------------ +FIT-TO-WIN BUTTON +------------------------------------------------------------------------------*/ +ImprovedTube.playerFitToWinButton = function () { + if (this.storage.player_fit_to_win_button === true && (/watch\?/.test(location.href))) { + 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 () { + 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' + }); + } 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); + } +}; /*------------------------------------------------------------------------------ POPUP PLAYER ------------------------------------------------------------------------------*/ diff --git a/menu/skeleton-parts/player.js b/menu/skeleton-parts/player.js index e10d74f38..5254cc3f2 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: 'Fit to Window' + }, player_popup_button: { component: 'switch', text: 'popupPlayer'