Merge pull request #1990 from kjonathan024/improvement/1959

IT/1959 Loop/Repeat Parity
code-charity · Feb 8, 2024 · 282f7d6 · 282f7d6
2 parents d03068a + 03e0502
commit 282f7d6
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 12 deletions.
diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js
@@ -339,28 +339,46 @@ ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer = function () {
 				path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 
 			button.className = 'improvedtube-player-button';
+            button.id = 'it-below-player-loop';
 			button.dataset.tooltip = 'Loop';
-			svg.style.opacity = '.5';
+            svg.style.opacity = '.5';
 			svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
 			path.setAttributeNS(null, 'd', 'M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z');
+            var otherButton = document.querySelector('#it-repeat-button');
+
+            function matchLoopState(opacity) {
+                if (ImprovedTube.storage.player_repeat_button === true) {
+                    var otherButton = document.querySelector('#it-repeat-button');
+                    otherButton.children[0].style.opacity = opacity;
+                }
+                svg.style.opacity = opacity;
+            }
 
 			button.onclick = function () {
 				var video = ImprovedTube.elements.video,
 					svg = this.children[0];
 
 				if (video.hasAttribute('loop')) {
 					video.removeAttribute('loop');
-
-					svg.style.opacity = '.5';
+                    matchLoopState('.5')
 				} else if (!/ad-showing/.test(ImprovedTube.elements.player.className)) {
 					video.setAttribute('loop', '');
-
-					svg.style.opacity = '1';
+                    matchLoopState('1')
 				}
 			};
-
+            
 			svg.appendChild(path); 	button.appendChild(svg);
 			section.insertAdjacentElement('afterend', button)
+
+            if(ImprovedTube.storage.player_repeat_button === true) {
+                if (document.querySelector('#it-repeat-button').style.opacity === '1') {
+                    matchLoopState('1');
+                    var video = ImprovedTube.elements.video;
+                    if (!video.hasAttribute('loop')) {
+                        video.setAttribute('loop', '');
+                    }
+                }
+            }
 		}
 			if (this.storage.below_player_pip !== false) {
 			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
@@ -680,32 +680,48 @@ ImprovedTube.playerRepeatButton = function (node) {
 
 		svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
 		path.setAttributeNS(null, 'd', 'M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z');
-
 		svg.appendChild(path);
 
+		function matchLoopState(opacity) {
+			if (ImprovedTube.storage.below_player_loop !== false) {
+				var otherButton = document.querySelector('#it-below-player-loop');
+				otherButton.children[0].style.opacity = opacity;
+			}
+			svg.style.opacity = opacity;
+		}
+
 		this.createPlayerButton({
 			id: 'it-repeat-button',
 			child: svg,
+			opacity: 1,
 			onclick: function () {
 				var video = ImprovedTube.elements.video;
 
 				if (video.hasAttribute('loop')) {
 					video.removeAttribute('loop');
-
-					this.style.opacity = '.5';
+					matchLoopState('.5')
 				} else if (!/ad-showing/.test(ImprovedTube.elements.player.className)) {
 					video.setAttribute('loop', '');
-
-					this.style.opacity = '1';
+					matchLoopState('1')
 				}
 			},
-			title: 'Repeat'
+			title: 'Repeat',
 		});
+		if(ImprovedTube.storage.below_player_loop !== false) {
+			var otherButton = document.querySelector('#it-below-player-loop');
+			if (document.querySelector('#it-below-player-loop').style.opacity === '1') {
+				matchLoopState('1');
+				if (!video.hasAttribute('loop')) {
+					video.setAttribute('loop', '');
+				}
+			}
+		}
 
 		if (this.storage.player_always_repeat === true) {
 			setTimeout(function () {
 				ImprovedTube.elements.video.setAttribute('loop', '');
 				ImprovedTube.elements.buttons['it-repeat-styles'].style.opacity = '1';
+				matchLoopState('1');
 			}, 100);
 		}
 	}