Merge 45a5f32 into 5377eb7

CHANGELOG.md

@@ -1,11 +1,15 @@
 # Changelog
 
-## v3.1.6
+## v3.1.7-beta
 
 <!--Releasenotes start-->
+- Added a hint in the popup if no channel has yet been visited.
+<!--Releasenotes end-->
+
+## v3.1.6
+
 - Reverted UI changes made while the playlist generation feature was broken.
 - Removed hints from the breaking news page.
-<!--Releasenotes end-->
 
 ## v3.1.5
 

src/html/popup/popup.js

@@ -82,6 +82,10 @@ function getPopupDomElements() {
 		channelCustomOptionsDiv: document.getElementById("channelCustomOptionsDiv"),
 		// Custom options per channel: Channel name and description
 		channelCustomOptionsHeader: channelCustomOptionsDiv.children.namedItem("channelCustomOptionsHeader"),
+		// Custom options per channel: Options explanation
+		channelCustomOptionsExplanationP: channelCustomOptionsDiv.children.namedItem("channelCustomOptionsExplanationP"),
+		// Custom options per channel: No channel has been visited div
+		channelNoneVisitedYetP: channelCustomOptionsDiv.children.namedItem("channelNoneVisitedYetP"),
 		// Custom options per channel: Dropdown menu Div (only for reference below)
 		channelCustomOptionsDropdownDiv: channelCustomOptionsDiv.children.namedItem("channelCustomOptionsDropdownDiv"),
 		// Dropdown menu div: Dropdown menu
@@ -182,8 +186,12 @@ async function setPopupDomElementValuesFromConfig(domElements) {
 	updateDomElementsDependentOnChannel(domElements);
 
 	// ----- Custom options per channel div -----
-	if (configSync.currentChannelId) {
-		domElements.channelCustomOptionsDiv.classList.remove("hidden");
+	if (!configSync.currentChannelId) {
+		domElements.channelCustomOptionsExplanationP.classList.add("hidden");
+		domElements.channelNoneVisitedYetP.classList.remove("hidden");
+
+		domElements.popupShuffleButton.classList.add("hidden");
+		domElements.channelCustomOptionsDropdownDiv.classList.add("disabled");
 	}
 
 	// Contains logic for all the "For your information" div content
@@ -491,13 +499,13 @@ async function determineOverlayVisibility(domElements) {
 // Responsible for all DOM elements that need a reference to the current channel
 async function updateDomElementsDependentOnChannel(domElements) {
 	// ----- Custom options per channel: Channel name and description -----
-	domElements.channelCustomOptionsHeader.innerText = `Channel Settings: ${configSync.currentChannelName}`;
+	domElements.channelCustomOptionsHeader.innerText = configSync.currentChannelName ? `Channel Settings: ${configSync.currentChannelName}` : "Channel Settings";
 
 	// ----- Custom options per channel: Dropdown menu -----
 	updateChannelSettingsDropdownMenu(domElements);
 
 	// ----- Popup shuffle button -----
-	domElements.popupShuffleButton.innerText = `Shuffle from: ${configSync.currentChannelName}`;
+	domElements.popupShuffleButton.innerText = configSync.currentChannelName ? `Shuffle from: ${configSync.currentChannelName}`: "This will be a shuffle button!";
 }
 
 async function updateChannelSettingsDropdownMenu(domElements) {

static/html/popup.html

@@ -131,9 +131,11 @@ <h3>Shuffle Settings</h3>
 
 			<!-- Settings for the most recently visited channel -->
 			<div id="channel">
-				<div id="channelCustomOptionsDiv" class="hidden">
+				<div id="channelCustomOptionsDiv">
 					<h3 id="channelCustomOptionsHeader">Channel settings</h3>
-					<p class="grey-text">Customize your most recently visited channel.</p>
+					<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>
 					<!-- 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>

static/manifest.json

@@ -2,7 +2,7 @@
 	"name": "Random YouTube Video",
 	"description": "Customize, shuffle and play random videos from any YouTube channel.",
 	"version": "3.1.6",
-	"version_name": "3.1.6",
+	"version_name": "3.1.7-beta",
 	"manifest_version": 3,
 	"content_scripts": [
 		{