From 39e58807ae7314afe81abbef6c02520865828578 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Costa?= <joaolscosta@tecnico.ulisboa.pt>
Date: Mon, 18 Mar 2024 19:31:59 +0000
Subject: [PATCH] Fix #2069: Transparent top bar stops working when scroll.
 This commit resolves issue #2069, where the transparent top bar would lose
 its transparency effect upon scrolling. The issue was addressed by removing
 unnecessary icons and adjusting opacity settings to maintain the desired
 transparent appearance even during scrolling. It also have modifications that
 admin requested to.

---
 .../appearance/header/header.css              | 17 ++++----
 .../www.youtube.com/appearance.js             | 39 +++++++++++--------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/js&css/extension/www.youtube.com/appearance/header/header.css b/js&css/extension/www.youtube.com/appearance/header/header.css
index 338d8d838..8fdf3fda7 100644
--- a/js&css/extension/www.youtube.com/appearance/header/header.css
+++ b/js&css/extension/www.youtube.com/appearance/header/header.css
@@ -135,19 +135,20 @@ html[it-header-transparent=true] ytd-masthead #logo-icon {
 /*--------------------------------------------------------------
 # HIDE RIGHT BUTTONS
 --------------------------------------------------------------*/
-html[it-header-hide-right-buttons='true'] #masthead #container #end {visibility: hidden !important; pointer-events: none !important;}
+html[it-header-hide-right-buttons='true'] #masthead #container #end {
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
 
 /* Define initial opacity for the icons */
 html[it-header-transparent=true] ytd-masthead #end {
     opacity: 1;
-    transition: opacity0.25 , 2s;
+    transition: opacity 2s ease;
 }
 
 /* Change opacity when scrolling down */
 html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #end {
     opacity: 0;
-    pointer-events: none;
-	transition: opacity0.25 , 2s;
 }
 
 /*--------------------------------------------------------------
@@ -160,16 +161,14 @@ html[it-header-transparent=true] #country-code {
     display: none !important;
 }
 /*--------------------------------------------------------------
-# HIDE VOICE SEARCH BUTTON
+# VOICE SEARCH BUTTON
 --------------------------------------------------------------*/
 
 /* Show the voice search button when scrolled to the top */
-html[it-header-transparent=false] #voice-search-button {
+html[it-header-transparent=true] #voice-search-button {
     display: block !important;
-}
+	background-color: black !important;
 
-html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #voice-search-button {
-	display: none;
 }
 
 /*--------------------------------------------------------------
diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js
index b5bb89e98..564149a9a 100644
--- a/js&css/web-accessible/www.youtube.com/appearance.js
+++ b/js&css/web-accessible/www.youtube.com/appearance.js
@@ -564,18 +564,21 @@ ImprovedTube.channelVideosCount = function () {
         xhr.send();
     }
 };
-
 /*------------------------------------------------------------------------------
- TURN TOP BAR TRANSPARENT WHEN SCROLLING
+TURN TOP BAR TRANSPARENT WHEN SCROLLING
 ------------------------------------------------------------------------------*/
+
 window.addEventListener('scroll', function () {
-    var masthead = document.querySelector('html[it-header-transparent=true] ytd-masthead');
-    var endButtons = masthead.querySelector('#end');
+    // Check if header transparency is enabled
+    if (ImprovedTube.storage.header_transparent === true) {
+        var masthead = document.querySelector('html[it-header-transparent=true] ytd-masthead');
+        var endButtons = masthead.querySelector('#end');
 
-    if (window.scrollY === 0) {
-        endButtons.style.visibility = 'visible';
-    } else {
-        endButtons.style.visibility = 'hidden';
+        if (window.scrollY === 0) {
+            endButtons.style.visibility = 'visible';
+        } else {
+            endButtons.style.visibility = 'hidden';
+        }
     }
 });
 
@@ -593,7 +596,7 @@ function handleScroll() {
 }
 
 /*------------------------------------------------------------------------------
- CHECK IF USER IS SCROLLING
+CHECK IF USER IS SCROLLING
 ------------------------------------------------------------------------------*/
 window.addEventListener("scroll", handleScroll);
 
@@ -612,7 +615,6 @@ var scrollDirection = getScrollDirection();
 window.addEventListener('scroll', function() {
     var direction = scrollDirection();
     if (direction === 'down') {
-
         document.documentElement.setAttribute('data-scroll-direction', 'down');
     } else {
         document.documentElement.removeAttribute('data-scroll-direction');
@@ -620,14 +622,17 @@ window.addEventListener('scroll', function() {
 });
 
 /*------------------------------------------------------------------------------
- SHOW/HIDE VOICE SEARCH BUTTON
+SHOW/HIDE VOICE SEARCH BUTTON
 ------------------------------------------------------------------------------*/
 window.addEventListener('scroll', function() {
-    var voiceSearchButton = document.getElementById('voice-search-button');
-    if (window.scrollY === 0) {
-        // At the top of the page, show the voice search button
-        voiceSearchButton.style.display = 'block';
-    } else {
-        voiceSearchButton.style.display = 'none';
+    // Check if header transparency is enabled
+    if (ImprovedTube.storage.header_transparent === true) {
+        var voiceSearchButton = document.getElementById('voice-search-button');
+        if (window.scrollY === 0) {
+            // At the top of the page, show the voice search button
+            voiceSearchButton.style.display = 'block';
+        } else {
+            voiceSearchButton.style.display = 'none';
+        }
     }
 });