Merge pull request #2149 from SanderDebets/master

Add Cinema Mode

_locales/en/messages.json

@@ -908,6 +908,15 @@
     "player_fit_to_win_button": {
         "message": "Fit to window"
     },
+    "player_cinema_mode_button": {
+        "message": "Cinema Mode"
+    },
+    "player_auto_hide_cinema_mode_when_paused": {
+        "message": "Auto Hide Cinema Mode on Pause"
+    },
+    "player_auto_cinema_mode": {
+        "message": "Auto Cinema Mode"
+    },
     "player_rotate_button": {
         "message": "Rotate video"
     },

js&css/web-accessible/functions.js

@@ -317,6 +317,7 @@ ImprovedTube.videoPageUpdate = function () {
 		ImprovedTube.playerRotateButton();
 		ImprovedTube.playerPopupButton();
 		ImprovedTube.playerFitToWinButton();
+		ImprovedTube.playerCinemaModeButton();
 		ImprovedTube.playerHamburgerButton();
 		ImprovedTube.playerControls();
 	}
@@ -339,6 +340,7 @@ ImprovedTube.playerOnPlay = function () {
 
 			ImprovedTube.autoplayDisable();
 			ImprovedTube.playerLoudnessNormalization();
+			ImprovedTube.playerCinemaModeEnable();
 
 			return original.apply(this, arguments);
 		}
@@ -417,6 +419,8 @@ ImprovedTube.playerOnPause = function (event) {
 	}
 	ImprovedTube.played_time = 0;
 	ImprovedTube.playerControls();
+	ImprovedTube.playerCinemaModeDisable();
+
 };
 
 ImprovedTube.playerOnEnded = function (event) {
@@ -534,7 +538,6 @@ ImprovedTube.setCookie = function (name, value) {
 
 ImprovedTube.createPlayerButton = function (options) {
 	var controls = options.position == "right" ? this.elements.player_right_controls : this.elements.player_left_controls;
-
 	if (controls) {
 		var button = document.createElement('button');
 
@@ -552,7 +555,7 @@ ImprovedTube.createPlayerButton = function (options) {
 			tooltip.style.top = rect.top - 8 + 'px';
 
 			tooltip.textContent = this.dataset.title;
-
+			tooltip.style.zIndex = 10001; // needed for cinema mode
 			function mouseleave() {
 				tooltip.remove();
 

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

@@ -824,6 +824,111 @@ ImprovedTube.playerFitToWinButton = function () {
 		});
 	} 
 };
+
+
+/*------------------------------------------------------------------------------
+CINEMA MODE BUTTON
+------------------------------------------------------------------------------*/
+var xpath = function(xpathToExecute){
+	var result = [];
+	var nodesSnapshot = document.evaluate(xpathToExecute, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+	for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
+	  result.push( nodesSnapshot.snapshotItem(i) );
+	}
+	return result;
+  }
+
+function createOverlay() {
+	var overlay = document.createElement('div');
+	overlay.id = 'overlay_cinema';
+	overlay.style.position = 'fixed';
+	overlay.style.top = '0';
+	overlay.style.left = '0';
+	overlay.style.width = '100%';
+	overlay.style.height = '100%';
+	overlay.style.backgroundColor = 'rgba(0, 0, 0, 1)';
+	overlay.style.zIndex = '9999';
+	overlay.style.display = 'block';
+	document.body.appendChild(overlay);
+  }
+
+ImprovedTube.playerCinemaModeButton = function () {
+	if (this.storage.player_cinema_mode_button === true && (/watch\?/.test(location.href))) {
+		var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+		path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+		svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
+		// TODO: change path such that cinema mode has its own unique icon
+		path.setAttributeNS(null, 'd', 'm 2.1852 2.2 h 3.7188 h 5.2974 h 5.184 h 3.5478 c 0.6012 0 1.1484 0.2737 1.5444 0.7113 c 0.396 0.4396 0.6408 1.047 0.6408 1.7143 v 1.4246 v 11.4386 v 1.4166 c 0 0.6673 -0.2466 1.2747 -0.6408 1.7143 c -0.396 0.4396 -0.9432 0.7113 -1.5444 0.7113 h -3.456 c -0.0288 0.006 -0.0594 0.008 -0.0918 0.008 c -0.0306 0 -0.0612 -0.002 -0.0918 -0.008 h -5.0004 c -0.0288 0.006 -0.0594 0.008 -0.0918 0.008 c -0.0306 0 -0.0612 -0.002 -0.0918 -0.008 h -5.1138 c -0.0288 0.006 -0.0594 0.008 -0.0918 0.008 c -0.0306 0 -0.0612 -0.002 -0.0918 -0.008 h -3.627 c -0.6012 0 -1.1484 -0.2737 -1.5444 -0.7113 s -0.6408 -1.047 -0.6408 -1.7143 v -1.4166 v -11.4386 v -1.4246 c 0 -0.6673 0.2466 -1.2747 0.6408 -1.7143 c 0.396 -0.4376 0.9432 -0.7113 1.5444 -0.7113 l 0 0 z m 7.749 6.2418 l 3.6954 2.8611 c 0.0576 0.04 0.1098 0.0959 0.1512 0.1618 c 0.1656 0.2657 0.1044 0.6274 -0.1332 0.8112 l -3.681 2.8252 c -0.09 0.0819 -0.207 0.1319 -0.333 0.1319 c -0.2916 0 -0.5274 -0.2617 -0.5274 -0.5854 v -5.7283 h 0.0018 c 0 -0.1159 0.0306 -0.2318 0.0936 -0.3337 c 0.1674 -0.2637 0.495 -0.3277 0.7326 -0.1439 l 0 0 z m 6.9768 9.6324 v 2.0879 h 3.0204 c 0.3114 0 0.594 -0.1419 0.7992 -0.3696 c 0.2052 -0.2278 0.333 -0.5415 0.333 -0.8871 v -0.8312 h -4.1526 l 0 0 z m -1.053 2.0879 v -2.0879 h -4.1292 v 2.0879 h 4.1292 l 0 0 z m -5.1822 0 v -2.0879 h -4.2444 v 2.0879 h 4.2444 l 0 0 z m -5.2992 0 v -2.0879 h -4.3236 v 0.8312 c 0 0.3457 0.1278 0.6593 0.333 0.8871 c 0.2052 0.2278 0.4878 0.3696 0.7992 0.3696 h 3.1914 l 0 0 z m -4.3236 -3.2567 h 4.851 h 5.2974 h 5.184 h 4.68 v -10.2697 h -4.68 h -5.184 h -5.2974 h -4.851 v 10.2697 l 0 0 z m 14.805 -11.4386 v -2.0979 h -4.1292 v 2.0959 h 4.1292 l 0 0.002 z m 1.053 -2.0979 v 2.0959 h 4.1526 v -0.8392 c 0 -0.3457 -0.1278 -0.6593 -0.333 -0.8871 c -0.2052 -0.2278 -0.4878 -0.3696 -0.7992 -0.3696 h -3.0204 l 0 0 z m -6.2352 2.0979 v -2.0979 h -4.2444 v 2.0959 h 4.2444 l 0 0.002 z m -5.2992 0 v -2.0979 h -3.1914 c -0.3114 0 -0.594 0.1419 -0.7992 0.3696 c -0.2052 0.2278 -0.333 0.5415 -0.333 0.8871 v 0.8392 h 4.3236 l 0 0.002 z');
+
+		svg.appendChild(path);
+
+		this.createPlayerButton({
+			id: 'it-cinema-mode-button',
+			child: svg,
+			// position: "right", // using right only works when we also have fit to window button enabled for some reason
+			opacity: 0.64,
+			onclick: function () {
+				var player = xpath('//*[@id="movie_player"]/div[1]/video')[0].parentNode.parentNode
+				console.log(player)
+				if (player.style.zIndex == 10000){
+					player.style.zIndex = 1;
+					svg.parentNode.style.opacity = 0.64;
+					svg.parentNode.style.zIndex = 1;
+				}
+				else {
+					player.style.zIndex = 10000;
+					svg.parentNode.style.opacity = 1;
+				}
+
+
+				var overlay = document.getElementById('overlay_cinema');
+				if (!overlay) {
+					createOverlay();
+				} else {
+					overlay.style.display = overlay.style.display === 'none' || overlay.style.display === '' ? 'block' : 'none';
+				}
+				console.log(overlay)
+			},
+			title: 'Cinema Mode'
+		});
+	} 
+}
+
+ImprovedTube.playerCinemaModeDisable = function () {
+	var overlay = document.getElementById('overlay_cinema');
+	if (overlay && this.storage.player_auto_hide_cinema_mode_when_paused === true) {
+		overlay.style.display = 'none'
+		var player = xpath('//*[@id="movie_player"]/div[1]/video')[0].parentNode.parentNode
+		player.style.zIndex = 1;
+		var cinemaModeButton = xpath('//*[@id="it-cinema-mode-button"]')[0]
+		cinemaModeButton.style.opacity = 0.64
+
+	}
+}
+
+ImprovedTube.playerCinemaModeEnable = function () {
+	if ((/watch\?/.test(location.href))) {
+		var overlay = document.getElementById('overlay_cinema');
+		if (this.storage.player_auto_cinema_mode === true && !overlay) {
+			createOverlay();
+			overlay = document.getElementById('overlay_cinema');
+		}
+
+		console.log(overlay && this.storage.player_auto_hide_cinema_mode_when_paused === true || this.storage.player_auto_cinema_mode === true && overlay)
+		if (overlay && this.storage.player_auto_hide_cinema_mode_when_paused === true || this.storage.player_auto_cinema_mode === true && overlay) {
+			overlay.style.display = 'block'
+			var player = xpath('//*[@id="movie_player"]/div[1]/video')[0].parentNode.parentNode
+			player.style.zIndex = 10000;
+			console.log(player)
+			var cinemaModeButton = xpath('//*[@id="it-cinema-mode-button"]')[0]
+			cinemaModeButton.style.opacity = 1
+		}
+	}
+
+}
+
+
 /*------------------------------------------------------------------------------
 HAMBURGER MENU
 ------------------------------------------------------------------------------*/

menu/skeleton-parts/player.js

@@ -1019,6 +1019,20 @@ extension.skeleton.main.layers.section.player.on.click = {
 			component: 'switch',
 			text: 'player_fit_to_win_button'
 		},
+		player_cinema_mode_button: {
+			component: 'switch',
+			text: 'player_cinema_mode_button',
+			id: 'player_cinema_mode_button'
+		},
+		player_auto_cinema_mode: {
+			component: 'switch',
+			text: 'player_auto_cinema_mode',
+			id: 'player_auto_cinema_mode'
+		},
+		player_auto_hide_cinema_mode_when_paused: {
+			component: 'switch',
+			text: 'player_auto_hide_cinema_mode_when_paused'
+		},
 		player_rotate_button: {
 			component: 'switch',
 			text: 'rotate'

menu/styles/sub-options.css

@@ -55,7 +55,9 @@ NIGHT MODE
 #forced-playback-speed[data-value='true'] + .satus-switch,
 #forced-playback-speed[data-value='true'] + .satus-switch + .satus-switch,
 #forced-playback-speed[data-value='true'] + .satus-switch + .satus-switch + .satus-slider, 
-#player_repeat_button + .satus-switch,
+#player_repeat_button + .satus-switch, 
+#player_cinema_mode_button +.satus-switch,
+#player_auto_cinema_mode +.satus-switch,
 #player_screenshot_button[data-value='true']  + .satus-switch,
 #player_screenshot_button[data-value='true']  + .satus-switch + .satus-select,
  /*--------------------------------------------------------------