Merge pull request #1798 from D-Rekk/player-sizes

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 */

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,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

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 {

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');

js&css/web-accessible/www.youtube.com/player.js

@@ -664,6 +664,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 = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="ftw-icon">
+		<path d="M21 3 9 15"/><path d="M12 3H3v18h18v-9"/><path d="M16 3h5v5"/><path d="M14 15H9v-5"/></svg>`;
+
+    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
 ------------------------------------------------------------------------------*/

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'