Added options to hide shuffle buttons on video and/or channel pages (#…

…325)

CHANGELOG.md

@@ -1,11 +1,16 @@
 # Changelog
 
-## v3.1.12
+## v3.1.13
 
 <!--Releasenotes start-->
-- Removed "tabs" permission from the extension, enhancing privacy.
+- Added accessibility options: Under "Advanced Settings", choose to not show shuffle buttons on video or channel pages.
+- Added some smoothed animations to the popup when expanding and collapsing the advanced settings.
 <!--Releasenotes end-->
 
+## v3.1.12
+
+- Removed "tabs" permission from the extension, enhancing privacy.
+
 ## v3.1.11
 
 - Changed the default settings to not open shuffled videos in a new tab.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "random-youtube-video",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Customize, shuffle and play random videos from any YouTube channel.",
   "scripts": {
     "dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",

src/config.js

@@ -14,6 +14,10 @@ export const configSyncDefaults = {
 	// 0 = only shorts, 1 = no option set (shorts are included), 2 = ignore shorts
 	"shuffleIgnoreShortsOption": 1,
 	"shuffleOpenAsPlaylistOption": true,
+	// If the shuffle button should be shown on video pages
+	"showShuffleButtonOnVideoPagesOption": true,
+	// If the shuffle button should be shown on channel pages
+	"showShuffleButtonOnChannelPagesOption": true,
 	// How many random videos to add to a playlist (0-50)
 	"shuffleNumVideosInPlaylist": 10,
 	// If shuffled videos are opened in a new tab, save the tab ID of that tab here to reuse the tab when the user shuffles again
@@ -43,10 +47,10 @@ export const configSyncDefaults = {
 	// If the message asking for a donation has been shown yet
 	"donationMessageShown": false,
 	// The id/date of the last viewed news article
-	"lastViewedNewsId": null,
+	"lastViewedNewsId": null, // Currently not in use
 	// The next time we should check for news (once per day)
 	// We delay the first check by 24 hours to not immediately show the news after a user has installed the extension
-	"nextNewsCheckTime": new Date(new Date().setHours(24, 0, 0, 0)).getTime()
+	"nextNewsCheckTime": new Date(new Date().setHours(24, 0, 0, 0)).getTime(), // Currently not in use
 };
 
 export const isFirefox = typeof browser !== "undefined";
@@ -81,7 +85,7 @@ export const shufflingHints = [
 	"Use the 'Open in playlist' option to open shuffled videos in the uploads playlist of the channel! You can customize how many videos are added to the playlist!",
 	"You can choose to ignore, include, or only shuffle from shorts uploaded on a channel!",
 	"Use the 'Use custom API key' option to provide your own YouTube API key, which will be used instead of the extension's keys. This removes the API quota limit and allows you to opt out of sharing video IDs with other users!",
-	
+
 	// Channel options
 	"The extension popup allows you to customize the shuffling experience for the most recently visited channel at any time!",
 	"You can choose from a number of filters to choose what videos are considered when shuffling from a specific channel!",

src/content.js

@@ -34,6 +34,11 @@ async function startDOMObserver(event) {
 
 	let pageType = getPageTypeFromURL(window.location.href);
 
+	// Do not build a shuffle button if the user has opted to not show it on the current page type
+	if ((pageType == "video" && !configSync.showShuffleButtonOnVideoPagesOption) || (pageType == "channel" && !configSync.showShuffleButtonOnChannelPagesOption)) {
+		return;
+	}
+
 	// Get the channel id from the event data
 	let channelId;
 	let channelName;

src/html/htmlUtils.js

@@ -39,7 +39,32 @@ export function animateSlideOut(targetElement, shouldSlideOut = null) {
 		setTimeout(function () {
 			targetElement.style.height = targetHeight + 'px';
 			adjustParentContainerHeight(targetElement, targetHeight);
+
+			// Start scrolling to the bottom of the page
+			const startTime = performance.now();
+			const duration = 800; // Adjust the duration to match the animation duration
+			const initialScrollY = window.scrollY;
+
+			function scrollStep(timestamp) {
+				const progress = Math.min((timestamp - startTime) / duration, 1);
+				window.scrollTo(0, initialScrollY + (document.body.scrollHeight - initialScrollY) * progress);
+
+				if (progress < 1) {
+					requestAnimationFrame(scrollStep);
+				}
+			}
+
+			requestAnimationFrame(scrollStep);
 		}, 0);
+
+		targetElement.addEventListener(
+			"transitionend",
+			function () {
+				// Ensure the page is scrolled to the bottom after the animation
+				window.scrollTo(0, document.body.scrollHeight);
+			}, {
+			once: true
+		});
 	} else {
 		// Sliding in
 		const oldHeight = targetElement.clientHeight;

src/html/popup/popup.js

@@ -109,6 +109,12 @@ function getPopupDomElements() {
 		// Advanced settings expand button
 		advancedSettingsExpandButton: document.getElementById("advancedSettingsExpandButton"),
 
+		// Accessibility
+		// Hide button on video pages
+		showShuffleButtonOnVideoPagesOptionToggle: document.getElementById("showShuffleButtonOnVideoPagesOptionToggle"),
+		// Hide button on channel pages
+		showShuffleButtonOnChannelPagesOptionToggle: document.getElementById("showShuffleButtonOnChannelPagesOptionToggle"),
+
 		// Custom API key: Option toggle
 		useCustomApiKeyOptionToggle: document.getElementById("useCustomApiKeyOptionToggle"),
 		// Custom API key: Input
@@ -195,6 +201,10 @@ async function setPopupDomElementValuesFromConfig(domElements) {
 		domElements.channelCustomOptionsDropdownDiv.classList.add("disabled");
 	}
 
+	// ----- Accessibility
+	domElements.showShuffleButtonOnVideoPagesOptionToggle.checked = configSync.showShuffleButtonOnVideoPagesOption;
+	domElements.showShuffleButtonOnChannelPagesOptionToggle.checked = configSync.showShuffleButtonOnChannelPagesOption;
+
 	// Contains logic for all the "For your information" div content
 	updateFYIDiv(domElements);
 
@@ -403,6 +413,20 @@ async function setPopupDomElementEventListeners(domElements) {
 		manageDependents(domElements, domElements.advancedSettingsExpandButton, domElements.advancedSettingsDiv.classList.contains("active"));
 	});
 
+	// Accessibility: Show shuffle button on video pages
+	domElements.showShuffleButtonOnVideoPagesOptionToggle.addEventListener("change", async function () {
+		await setSyncStorageValue("showShuffleButtonOnVideoPagesOption", this.checked);
+
+		manageDependents(domElements, domElements.showShuffleButtonOnVideoPagesOptionToggle, this.checked);
+	});
+
+	// Accessibility: Show shuffle button on channel pages
+	domElements.showShuffleButtonOnChannelPagesOptionToggle.addEventListener("change", async function () {
+		await setSyncStorageValue("showShuffleButtonOnChannelPagesOption", this.checked);
+
+		manageDependents(domElements, domElements.showShuffleButtonOnChannelPagesOptionToggle, this.checked);
+	});
+
 	// Custom API key: Option toggle
 	domElements.useCustomApiKeyOptionToggle.addEventListener("change", async function () {
 		await setSyncStorageValue("useCustomApiKeyOption", this.checked);

static/css/popup.css

@@ -239,6 +239,10 @@
 	margin-bottom: 4px;
 }
 
+.optionTextInput input::placeholder {
+	color: #ddd;
+}
+
 .optionTextInput input.numberInput {
 	width: 40px;
 	text-align: left;
@@ -330,6 +334,12 @@ select:hover {
 /*
  * Links
  */
+.whiteLink {
+	color: var(--randomYoutubeVideo-fg-color);
+	display: inline-block;
+	text-decoration: none;
+}
+
 /* A link whose text is white and turns grey when hovered over */
 .whiteGreyLink {
 	color: var(--randomYoutubeVideo-fg-color);

static/css/toggle.css

@@ -1,30 +1,30 @@
 .toggle label {
-  position: relative;
-  display: inline-block;
-  width: 9em;
-  height: 3.5em;
+	position: relative;
+	display: inline-block;
+	width: 9em;
+	height: 3.5em;
 }
 
 .toggle input {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
- 
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
 .toggle .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 1.6em;
+	position: absolute;
+	cursor: pointer;
+	top: 1.6em;
 	left: 2.85em;
-  width: 3.5em;
-  height: 1.5em;
-  background-color: #c32e04; 
-  border-radius: 1em; 
-  transition: all .3s ease-in-out;
+	width: 3.5em;
+	height: 1.5em;
+	background-color: #c32e04;
+	border-radius: 1em;
+	transition: all 0.3s ease-in-out;
 }
 
 .toggle .disabled {
@@ -35,23 +35,23 @@
 .toggle .disabled > .slider {
 	cursor: default !important;
 }
- 
+
 .toggle .slider::before {
-  position: absolute;
-  content: "";
-  height: 1.1em;
-  width: 1.1em;
-  left: .2em;
-  bottom: .2em;
-  background-color: white;
-  border-radius: 50%;
-  transition: all .3s ease-in-out;
+	position: absolute;
+	content: "";
+	height: 1.1em;
+	width: 1.1em;
+	left: 0.2em;
+	bottom: 0.2em;
+	background-color: white;
+	border-radius: 50%;
+	transition: all 0.3s ease-in-out;
 }
 
 .toggle input:checked + .slider {
-  background-color: #5a9900; 
+	background-color: #5a9900;
 }
- 
+
 .toggle input:checked + .slider::before {
-  transform: translateX(2em);
-}
+	transform: translateX(2em);
+}

static/html/popup.html

@@ -135,7 +135,7 @@ <h3>Shuffle Settings</h3>
 					<h3 id="channelCustomOptionsHeader">Channel settings</h3>
 					<p id="channelCustomOptionsExplanationP" class="grey-text">Customize your most recently visited channel.</p>
 					<!-- Shown if no channel has yet been visited -->
-					<p id="channelNoneVisitedYetP" class="grey-text hidden">Visit a YouTube channel, video or short<br />to customize it's shuffle settings here!</p>
+					<p id="channelNoneVisitedYetP" class="grey-text hidden">Visit a YouTube channel, video or short<br />to customize a channels' shuffle settings here!</p>
 					<!-- Custom options per channel: Choose option from dropdown -->
 					<div id="channelCustomOptionsDropdownDiv" class="optionTextInput" style="margin-top: 8px">
 						<p class="displayInline" title="Choose from one of the provided options in the dropdown to customize your shuffling experience on this channel.">Shuffle from</p>
@@ -159,9 +159,35 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 				</div>
 			</div>
 
+			<!-- IMPORTANT: When changing content in this div, also adjust the animation duration in animateSlideOut() -->
 			<button id="advancedSettingsExpandButton" class="randomYoutubeVideoButton importantButton" title="These settings are for people with some technical knowledge. Don't worry if you don't know what they're about, they don't add any features!"><b>Show Advanced Settings</b></button>
-			<div id="advancedSettingsDiv" class="slideOutContainer">
+			<div id="advancedSettingsDiv" class="slideOutContainer" style="background-color: #111">
+				<!-- First row start -->
+				<h3 id="accessibilityOptionsHeader">Accessibility settings</h3>
+				<p id="showShuffleButtonOnPageTypesP" class="displayInline" title="Control which page types a shuffle button will be added to when browsing YouTube. Reload the page to apply the setting.">Show a shuffle button on...</p>
+				<div class="optionsRow">
+					<!-- Accessibility: Hide shuffle button on video/channel pages -->
+					<div class="toggle optionsRow-item">
+						<label id="showShuffleButtonOnVideoPagesOption" title="If this is enabled, a shuffle button will be shown on video pages. Disable if you notice issues with the YouTube layout or when zooming in on the page. Reload YouTube to apply the setting.">
+							Video pages
+							<input type="checkbox" id="showShuffleButtonOnVideoPagesOptionToggle" />
+							<span class="slider"></span>
+						</label>
+					</div>
+
+					<div class="toggle optionsRow-item">
+						<label id="showShuffleButtonOnChannelPagesOption" title="If this is enabled, a shuffle button will be shown on channel pages. Disable if you notice issues with the YouTube layout or when zooming in on the page. Reload YouTube to apply the setting.">
+							Channel pages
+							<input type="checkbox" id="showShuffleButtonOnChannelPagesOptionToggle" />
+							<span class="slider"></span>
+						</label>
+					</div>
+				</div>
+				<!-- First row end -->
+
+				<!-- Second row start -->
 				<!-- Custom API key: Option toggle -->
+				<h3 id="apiOptionsHeader">API settings</h3>
 				<div class="optionsRow">
 					<div class="toggle optionsRow-item">
 						<label
@@ -184,19 +210,20 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 						</label>
 					</div>
 				</div>
+				<!-- Second row end -->
 
 				<!-- Custom API key: Input -->
 				<div id="customApiKeyInputDiv" class="optionTextInput slideOutContainer">
 					<!-- Learn how to get an API key -->
 					<p class="grey-text displayInline">Follow the</p>
-					<a class="whiteGreyLink displayInline" href="https://developers.google.com/youtube/v3/getting-started" target="_blank" rel="noopener">official guide</a>
+					<a class="whiteLink displayInline" href="https://developers.google.com/youtube/v3/getting-started" target="_blank" rel="noopener">official guide</a>
 					<p class="grey-text displayInline">to learn how to get an API key.</p>
 
 					<!-- <p style="margin-top: 6px">Your custom API key:</p> -->
 					<div id="customApiKeyInputInfoDiv">
 						<p id="customApiKeyInputInfoText">Your custom API key:</p>
 					</div>
-					<input type="text" id="customApiKeyInputField" name="customApiKeyInputField" style="width: 80%" title="Enter your YouTube API key here. It will not be shared with anyone." placeholder="Enter API key here. It won't be shared with anyone." />
+					<input type="text" id="customApiKeyInputField" name="customApiKeyInputField" style="width: 80%;" title="Enter your YouTube API key here. It will not be shared with anyone." placeholder="Enter API key here. It won't be shared with anyone." />
 					<br />
 					<button class="randomYoutubeVideoButton" id="customApiKeySubmitButton" type="button">Submit</button>
 				</div>
@@ -211,6 +238,7 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 					<p class="displayInline">requests to the YouTube API remaining today.<br />Use a custom API key to remove this limit.</p>
 				</div>
 				<!-- Daily quota notice end -->
+				<br />
 			</div>
 			<!-- OPTIONS END -->
 

static/manifest.json

@@ -1,8 +1,8 @@
 {
 	"name": "Random YouTube Video",
 	"description": "Customize, shuffle and play random videos from any YouTube channel.",
-	"version": "3.1.12",
-	"version_name": "3.1.12",
+	"version": "3.1.13",
+	"version_name": "3.1.13",
 	"manifest_version": 3,
 	"content_scripts": [
 		{