Merge pull request #2457 from raszpl/patch-17

fixing PiP / Auto PiP

_locales/en/messages.json

@@ -41,9 +41,6 @@
     "hideLogo": {
         "message": "Logo: Hide!"
     },
-    "2160p": {
-        "message": "2160p - 4K"
-    },
     "about": {
         "message": "About"
     },
@@ -153,7 +150,13 @@
         "message": "Auto"
     },
     "Auto_PiP_picture_in_picture": {
-        "message": "Auto-PiP (picture in picture)"
+        "message": "Auto-PiP (Picture in Picture)"
+    },
+    "playerAutoPipOutside": {
+        "message": "Auto-PiP only outside source Tab"
+    },
+    "PipRequiresUserInteraction": {
+        "message": "PiP requires recent User interaction with source page. This is Chrome Picture-in-Picture API limitations and we cant do anything to bypass it. Works best with Autoplay disabled and manual Play control or deliberately clicking somewhere on the page before switching Tabs."
     },
     "autoFullscreen": {
         "message": "Auto-fullscreen"

js&css/web-accessible/functions.js

@@ -128,12 +128,11 @@ ImprovedTube.ytElementsHandler = function (node) {
 			this.howLongAgoTheVideoWasUploaded();
 			this.channelVideosCount();
 		}
-	}
-	 // else if (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-video-primary-info-renderer')) {
+	//} else if (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-video-primary-info-renderer')) {
 	// 	if (document.documentElement.dataset.pageType === 'video') {
 	// 		this.hideDetailButton(node.querySelector('#flexible-item-buttons').children);
 	// 	}
-	else if (name === 'YTD-PLAYLIST-HEADER-RENDERER' || (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-playlist-panel-renderer'))) {
+	} else if (name === 'YTD-PLAYLIST-HEADER-RENDERER' || (name === 'YTD-MENU-RENDERER' && node.classList.contains('ytd-playlist-panel-renderer'))) {
 		this.playlistPopupUpdate();
 	} else if (name === 'YTD-SUBSCRIBE-BUTTON-RENDERER'
 		   || name === 'YT-SUBSCRIBE-BUTTON-VIEW-MODEL'
@@ -395,7 +394,6 @@ var timeUpdateInterval = null;
 var noTimeUpdate = null;
 
 ImprovedTube.playerOnTimeUpdate = function () {
-	var currentTime = Date.now();
 	if (!timeUpdateInterval) {
 		timeUpdateInterval = setInterval(function () {
 			if (ImprovedTube.video_src !== this.src) {

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

@@ -77,26 +77,25 @@ ImprovedTube.playerHdThumbnail = function () {
  ALWAYS SHOW PROGRESS BAR
 ------------------------------------------------------------------------------*/
 ImprovedTube.showProgressBar = function () {
-
-	var player = ImprovedTube.elements.player;
+	const player = ImprovedTube.elements.player;
 
 	if (player && player.className.indexOf("ytp-autohide") !== -1) {
-		var played = (player.getCurrentTime() * 100) / player.getDuration(),
+		const played = (player.getCurrentTime() * 100) / player.getDuration(),
 			loaded = player.getVideoBytesLoaded() * 100,
 			play_bars = player.querySelectorAll(".ytp-play-progress"),
-			load_bars = player.querySelectorAll(".ytp-load-progress"),
-			width = 0,
+			load_bars = player.querySelectorAll(".ytp-load-progress");
+		let width = 0,
 			progress_play = 0,
 			progress_load = 0;
 
-		for (var i = 0, l = play_bars.length; i < l; i++) {
+		for (let i = 0, l = play_bars.length; i < l; i++) {
 			width += play_bars[i].offsetWidth;
 		}
 
-		var width_percent = width / 100;
+		const width_percent = width / 100;
 
-		for (var i = 0, l = play_bars.length; i < l; i++) {
-			var a = play_bars[i].offsetWidth / width_percent,
+		for (let i = 0, l = play_bars.length; i < l; i++) {
+			let a = play_bars[i].offsetWidth / width_percent,
 				b = 0,
 				c = 0;
 
@@ -415,10 +414,7 @@ ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer = function () {
 				path.setAttributeNS(null, 'd', 'M19 7h-8v6h8V7zm2-4H3C2 3 1 4 1 5v14c0 1 1 2 2 2h18c1 0 2-1 2-2V5c0-1-1-2-2-2zm0 16H3V5h18v14z');
 
 				button.onclick = function () {
-					var video = document.querySelector('#movie_player video');
-					if (video) {
-						video.requestPictureInPicture();
-					}
+					ImprovedTube.enterPip();
 				};
 
 				svg.appendChild(path);	button.appendChild(svg);
@@ -496,10 +492,11 @@ ImprovedTube.dayOfWeek = function () {
 	if (this.storage.day_of_week === true) {
 		var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 		setTimeout(function () {
-			var videoDate; try {
+			var videoDate;
+			try {
 				videoDate = JSON.parse(document.querySelector('#microformat script')?.textContent)?.uploadDate
-			} //YouTube related video or internal link?
-			catch {
+			} catch {
+				//YouTube related video or internal link?
 				try {
 					videoDate = document.querySelector("[itemprop=datePublished]").content;
 				} catch { }

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

@@ -7,12 +7,12 @@ ImprovedTube.autoplayDisable = function (videoElement) {
 		|| this.storage.channel_trailer_autoplay === false) {
 		const player = this.elements.player || videoElement.closest('.html5-video-player') || videoElement.closest('#movie_player'); // #movie_player: outdated since 2024?
 
-		if (this.video_url !== location.href) {
-			this.user_interacted = false;
-		}
+		if (this.video_url !== location.href) this.user_interacted = false;
 
-		// if (no user clicks) and (no ads playing) and
-		// ( there is a player and ( (it is not in a playlist and auto play is off ) or ( playlist auto play is off and in a playlist ) ) ) or (if we are in a channel and the channel trailer autoplay is off)  )
+		// if (there is a player) and (no user clicks) and (no ads playing)
+		// and ( ( it is not in a playlist and auto play is off )
+		//    or ( playlist auto play is off and in a playlist )
+		//    or ( we are in a channel and the channel trailer autoplay is off ) )
 
 		// user didnt click
 		if (player && !this.user_interacted
@@ -75,19 +75,38 @@ ImprovedTube.playerAutopauseWhenSwitchingTabs = function () {
 	}
 };
 /*------------------------------------------------------------------------------
+PICTURE IN PICTURE (PIP)
+------------------------------------------------------------------------------*/
+ImprovedTube.enterPip = function (disable) {
+	const video = this.elements.video;
+
+	if (!disable
+		&& video
+		&& document.pictureInPictureEnabled
+		&& typeof video.requestPictureInPicture == 'function') {
+
+		video.requestPictureInPicture().then(() => {
+			if (video.paused) {
+				// manually send Play message to "Auto-pause while I'm not in the tab", paused PiP wont do it automatically.
+				document.dispatchEvent(new CustomEvent('it-play'));
+			}
+			return true;
+		}).catch((err) => console.error('playerAutoPip: Failed to enter Picture-in-Picture mode', err));
+	} else if (document.pictureInPictureElement && typeof document.exitPictureInPicture == 'function') {
+		document.exitPictureInPicture();
+		return false;
+	}
+};
+/*------------------------------------------------------------------------------
 AUTO PIP WHEN SWITCHING TABS
 ------------------------------------------------------------------------------*/
 ImprovedTube.playerAutoPip = function () {
-	const video = ImprovedTube.elements.video;
-
-	if (this.storage.player_autoPip === true && video) {
-		(async () => {
-			try {
-				await video.requestPictureInPicture();
-			  } catch (error) {
-				console.error('Failed to enter Picture-in-Picture mode', error);
-			  }
-		  })();
+	const video = this.elements.video;
+
+	if (this.storage.player_autoPip && this.storage.player_autoPip_outside && this.focus) {
+		this.enterPip(true);
+	} else if (this.storage.player_autoPip && !this.focus && !video?.paused) {
+		this.enterPip();
 	}
 };
 /*------------------------------------------------------------------------------
@@ -421,7 +440,7 @@ ImprovedTube.subtitlesUserSettings = function () {
 					break;
 			}
 
-			if (ytSettings?.hasOwnProperty(value)) {
+			if (Object.keys(ytSettings).includes(value)) {
 				ytSettings[value] = setting;
 			} else {
 				console.error('subtitlesUserSettings failed at: ', value, setting);

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

@@ -151,14 +151,9 @@ ImprovedTube.shortcutQuality = function (key) {
 	ImprovedTube.playerQuality(label[resolution.indexOf(key.replace('shortcutQuality', ''))]);
 };
 /*------------------------------------------------------------------------------
-4.7.2 PICTURE IN PICTURE
+4.7.2 PICTURE IN PICTURE (PIP)
 ------------------------------------------------------------------------------*/
-ImprovedTube.shortcutPictureInPicture = function () {
-	const video = ImprovedTube.elements.video;
-	if (video && document.pictureInPictureEnabled && typeof video.requestPictureInPicture == 'function') {
-		video.requestPictureInPicture().then().catch((err) => console.error(err));
-	}
-};
+ImprovedTube.shortcutPictureInPicture = this.enterPip;
 /*------------------------------------------------------------------------------
 4.7.3 TOGGLE CONTROLS
 ------------------------------------------------------------------------------*/