From 28a05da79d7e287d2b6a3b26d2f814b39377417e Mon Sep 17 00:00:00 2001 From: Jonathan Kahn <63828254+kjonathan024@users.noreply.github.com> Date: Tue, 6 Feb 2024 10:15:11 -0500 Subject: [PATCH 1/3] Linked repeat and loop buttons so the button states are visually and functionally linked when both active. --- .../www.youtube.com/appearance.js | 30 +++++++++++++++---- .../web-accessible/www.youtube.com/player.js | 30 +++++++++++++++---- 2 files changed, 48 insertions(+), 12 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 7052ac9a5..07665133c 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -340,9 +340,21 @@ ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer = function () { button.className = 'improvedtube-player-button'; 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) { + var otherButton = document.querySelector('#it-repeat-button'); + if (otherButton) { + otherButton.children[0].style.opacity = opacity; + svg.style.opacity = opacity; + } + else { + svg.style.opacity = opacity; + } + } button.onclick = function () { var video = ImprovedTube.elements.video, @@ -350,17 +362,23 @@ ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer = function () { 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(otherButton && otherButton.children[0].style.opacity === '1') { + var video = ImprovedTube.elements.video; + matchLoopState('1'); + 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 index 48323f2ed..40aa16b96 100644 --- a/js&css/web-accessible/www.youtube.com/player.js +++ b/js&css/web-accessible/www.youtube.com/player.js @@ -680,32 +680,50 @@ 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); + var otherButton = document.querySelector('.improvedtube-player-button'); + function matchLoopState(opacity) { + var otherButton = document.querySelector('.improvedtube-player-button'); + if (otherButton) { + otherButton.children[0].style.opacity = opacity; + svg.style.opacity = opacity; + } + else { + 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(otherButton && otherButton.children[0].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); } } From c1532077075f78961dcab996f906491e7c241914 Mon Sep 17 00:00:00 2001 From: Jonathan Kahn <63828254+kjonathan024@users.noreply.github.com> Date: Wed, 7 Feb 2024 14:19:15 -0500 Subject: [PATCH 2/3] Added id name for loop button below player, Fixed querySelector to be by id for this button. --- js&css/web-accessible/www.youtube.com/appearance.js | 1 + js&css/web-accessible/www.youtube.com/player.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 07665133c..d79e3a718 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -339,6 +339,7 @@ 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.setAttributeNS(null, 'viewBox', '0 0 24 24'); diff --git a/js&css/web-accessible/www.youtube.com/player.js b/js&css/web-accessible/www.youtube.com/player.js index 40aa16b96..e3a60c07d 100644 --- a/js&css/web-accessible/www.youtube.com/player.js +++ b/js&css/web-accessible/www.youtube.com/player.js @@ -681,10 +681,10 @@ 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); - var otherButton = document.querySelector('.improvedtube-player-button'); + var otherButton = document.querySelector('#it-below-player-loop'); function matchLoopState(opacity) { - var otherButton = document.querySelector('.improvedtube-player-button'); + var otherButton = document.querySelector('#it-below-player-loop'); if (otherButton) { otherButton.children[0].style.opacity = opacity; svg.style.opacity = opacity; From 03e05026bbfb976e4e0070bb3c8ac08b5b699df1 Mon Sep 17 00:00:00 2001 From: Jonathan Kahn <63828254+kjonathan024@users.noreply.github.com> Date: Wed, 7 Feb 2024 15:58:24 -0500 Subject: [PATCH 3/3] Used storage values to reduce querySelector requests until necessary for checks. --- .../www.youtube.com/appearance.js | 21 +++++++++--------- .../web-accessible/www.youtube.com/player.js | 22 +++++++++---------- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index d79e3a718..4c8b68433 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -347,14 +347,11 @@ ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer = function () { var otherButton = document.querySelector('#it-repeat-button'); function matchLoopState(opacity) { - var otherButton = document.querySelector('#it-repeat-button'); - if (otherButton) { + if (ImprovedTube.storage.player_repeat_button === true) { + var otherButton = document.querySelector('#it-repeat-button'); otherButton.children[0].style.opacity = opacity; - svg.style.opacity = opacity; - } - else { - svg.style.opacity = opacity; } + svg.style.opacity = opacity; } button.onclick = function () { @@ -373,11 +370,13 @@ ImprovedTube.improvedtubeYoutubeButtonsUnderPlayer = function () { svg.appendChild(path); button.appendChild(svg); section.insertAdjacentElement('afterend', button) - if(otherButton && otherButton.children[0].style.opacity === '1') { - var video = ImprovedTube.elements.video; - matchLoopState('1'); - if (!video.hasAttribute('loop')) { - video.setAttribute('loop', ''); + 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', ''); + } } } } diff --git a/js&css/web-accessible/www.youtube.com/player.js b/js&css/web-accessible/www.youtube.com/player.js index e3a60c07d..36dd90768 100644 --- a/js&css/web-accessible/www.youtube.com/player.js +++ b/js&css/web-accessible/www.youtube.com/player.js @@ -681,17 +681,13 @@ 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); - var otherButton = document.querySelector('#it-below-player-loop'); function matchLoopState(opacity) { - var otherButton = document.querySelector('#it-below-player-loop'); - if (otherButton) { + 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; - } - else { - svg.style.opacity = opacity; } + svg.style.opacity = opacity; } this.createPlayerButton({ @@ -711,11 +707,13 @@ ImprovedTube.playerRepeatButton = function (node) { }, title: 'Repeat', }); - - if(otherButton && otherButton.children[0].style.opacity === '1') { - matchLoopState('1'); - if (!video.hasAttribute('loop')) { - video.setAttribute('loop', ''); + 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', ''); + } } }