Added review overlays after a certain number of shuffles

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## v3.0.0 (Unreleased)
+## v3.0.0
 
 <!--Releasenotes start-->
 - Shorts pages are now supported! Shuffle buttons can now be found on all shorts pages.

README.md

@@ -22,7 +22,7 @@ Firefox:
 	<img src="https://img.shields.io/amo/stars/random-youtube-video?label=rating"
 		alt="Firefox rating"></a>
 <a href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/">
-	<img alt="Mozilla Add-on" src="https://img.shields.io/amo/users/random-youtube-video?label=users"
+	<img alt="Firefox Add-on" src="https://img.shields.io/amo/users/random-youtube-video?label=users"
 		alt="Firefox users"></a>
 <br>
 <br>

package.json

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

src/background.js

@@ -10,7 +10,8 @@ async function initExtension() {
 	if (configSync.previousVersion === null) {
 		console.log(`Extension was installed for the first time (v${manifestData.version})`);
 		await setSyncStorageValue("previousVersion", manifestData.version);
-		await chrome.tabs.create({ url: "html/welcome.html" });
+		const welcomeUrl = chrome.runtime.getURL("html/welcome.html");
+		await chrome.tabs.create({ url: welcomeUrl });
 	} else if (configSync.previousVersion < manifestData.version) {
 		await handleExtensionUpdate(manifestData, configSync.previousVersion);
 	}

src/config.js

@@ -24,6 +24,7 @@ export const configSyncDefaults = {
 	"currentChannelId": null,
 	"currentChannelName": null,
 	// The number of videos the user has shuffled so far
+	// Does not count multiple times if a playlist is shuffled, so is actually numShuffledTimesTotal
 	"numShuffledVideosTotal": 0,
 	// These two properties determine the amount of quota remaining today, and the time at which the quota will next reset (daily resets at midnight)
 	"userQuotaRemainingToday": 200,
@@ -37,6 +38,10 @@ export const configSyncDefaults = {
 	"wasLastRickRolledInYear": "1970",
 	// Used when updating the extension
 	"previousVersion": null,
+	// If the message asking for a review has been shown yet
+	"reviewMessageShown": false,
+	// If the message asking for a donation has been shown yet
+	"donationMessageShown": false,
 };
 
 export const shufflingHints = [

src/html/popup/popup.js

@@ -28,17 +28,29 @@ if (isPopup) {
 const domElements = getPopupDomElements();
 await setPopupDomElementValuesFromConfig(domElements);
 await setPopupDomElemenEventListeners(domElements);
+await determineOverlayVisibility(domElements);
 
 // ----- DOM -----
 // --- Private ---
 // Get relevant DOM elements
 function getPopupDomElements() {
-	/* global customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
+	/* global reviewDonationDiv, reviewDiv, donationDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
 	/* eslint no-undef: "error" */
 	return {
-		// Body element
 		body: document.body,
 
+		// OVERLAY
+		// Review/Donation div
+		reviewDonationDiv: document.getElementById("reviewDonationDiv"),
+		// Review div
+		reviewDiv: reviewDonationDiv.children.namedItem("reviewDiv"),
+		// Review close button
+		reviewOverlayCloseButton: reviewDiv.children.namedItem("reviewOverlayCloseButton"),
+		// Donation div
+		donationDiv: reviewDonationDiv.children.namedItem("donationDiv"),
+		// Donation close button
+		donationOverlayCloseButton: donationDiv.children.namedItem("donationOverlayCloseButton"),
+
 		// GLOBAL SETTINGS
 		// Custom API key: Option toggle
 		useCustomApiKeyOptionToggle: document.getElementById("useCustomApiKeyOptionToggle"),
@@ -410,6 +422,36 @@ async function setPopupDomElemenEventListeners(domElements) {
 	});
 }
 
+async function determineOverlayVisibility(domElements) {
+	if (!configSync.reviewMessageShown && configSync.numShuffledVideosTotal < 150 && configSync.numShuffledVideosTotal >= 20) {
+		domElements.reviewDiv.classList.remove("hidden");
+		domElements.reviewDonationDiv.classList.remove("hidden");
+		await setSyncStorageValue("reviewMessageShown", true);
+
+		domElements.reviewOverlayCloseButton.addEventListener("click", function () {
+			domElements.reviewDonationDiv.classList.add("hidden");
+			domElements.reviewDiv.classList.add("hidden");
+		});
+	} else if (!configSync.donationMessageShown && configSync.numShuffledVideosTotal >= 150) {
+		domElements.donationDiv.classList.remove("hidden");
+		domElements.reviewDonationDiv.classList.remove("hidden");
+		await setSyncStorageValue("donationMessageShown", true);
+
+		domElements.donationOverlayCloseButton.addEventListener("click", function () {
+			domElements.reviewDonationDiv.classList.add("hidden");
+			domElements.donationDiv.classList.add("hidden");
+		});
+	}
+
+	domElements.reviewDonationDiv.addEventListener("click", function (event) {
+		if (event.target === this) {
+			reviewDonationDiv.classList.add("hidden");
+			domElements.reviewDiv.classList.add("hidden");
+			domElements.donationDiv.classList.add("hidden");
+		}
+	});
+}
+
 // 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 -----

src/html/welcome.js

@@ -73,17 +73,18 @@ async function setPopupDomElemenEventListeners(domElements) {
 
 	// Open options page button
 	domElements.openOptionsPageButton.addEventListener("click", async function () {
-		await chrome.tabs.create({ url: "html/popup.html" });
+		const optionsUrl = chrome.runtime.getURL("html/popup.html");
+		await chrome.tabs.create({ url: optionsUrl });
 	});
 
 	// View changelog button
 	domElements.viewChangelogButton.addEventListener("click", async function () {
 		await setSyncStorageValue("lastViewedChangelogVersion", chrome.runtime.getManifest().version);
 
-		const tabUrl = chrome.runtime.getURL("html/changelog.html");
-		let mustOpenTab = await tryFocusingTab(tabUrl);
+		const changelogUrl = chrome.runtime.getURL("html/changelog.html");
+		let mustOpenTab = await tryFocusingTab(changelogUrl);
 		if (mustOpenTab) {
-			await chrome.tabs.create({ url: "html/changelog.html" });
+			await chrome.tabs.create({ url: changelogUrl });
 		}
 	});
 }

static/css/popup.css

@@ -140,6 +140,27 @@
 	margin-bottom: 4px;
 }
 
+.overlayDiv {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+	background-color: rgba(0, 0, 0, 0.8);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.overlayDiv div {
+	background-color: var(--randomYoutubeVideo-bg-color);
+	color: var(--randomYoutubeVideo-fg-color);
+	padding: 15px;
+	border-radius: 5px;
+	margin: 0px 20px;
+}
+
 /*
  * Options Row
  */
@@ -336,14 +357,8 @@ select:hover {
 	color: var(--randomYoutubeVideo-grey-fg-color);
 }
 
-/*
- * Footer
- */
-#randomYoutubeVideoFooter {
-	padding: 8px 0;
-}
-
-#randomYoutubeVideoFooter .footerLink {
+/* A link that looks like a button */
+.buttonLink {
 	color: var(--randomYoutubeVideo-fg-color);
 	display: inline-block;
 	text-decoration: none;
@@ -354,10 +369,17 @@ select:hover {
 	margin: 2px 1px;
 }
 
-#randomYoutubeVideoFooter .footerLink:hover {
+.buttonLink:hover {
 	background-color: #444;
 }
 
-#randomYoutubeVideoFooter .footerLink:active {
+.buttonLink:active {
 	background-color: #555;
 }
+
+/*
+ * Footer
+ */
+#randomYoutubeVideoFooter {
+	padding: 8px 0;
+}

static/html/changelog.html

@@ -50,28 +50,28 @@ <h3><i>Did you know...</i></h3>
 				<footer id="randomYoutubeVideoFooter">
 					Leave a review:
 					<a
-						class="footerLink"
+						class="buttonLink"
 						href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
 						target="_blank"
 						rel="noopener"
 						title="Leave a review on the Chrome Web Store"
 						>Chrome</a
 					>
-					<a class="footerLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Mozilla Add-Ons page"
+					<a class="buttonLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Firefox Add-Ons page"
 						>Firefox</a
 					>
 					<a
-						class="footerLink"
+						class="buttonLink"
 						href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
 						target="_blank"
 						rel="noopener"
 						title="Leave a review on the Edge Add-Ons page"
 						>Edge</a
 					>
 					<br />
-					<a class="footerLink" href="https://github.com/NikkelM/Random-YouTube-Video" target="_blank" rel="noopener" title="View the source code or get into contact with the developer">GitHub</a>
-					<a class="footerLink" href="https://github.com/NikkelM/Random-YouTube-Video/blob/main/CHANGELOG.md" target="_blank" rel="noopener">Full Changelog</a>
-					<a class="footerLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate</a>
+					<a class="buttonLink" href="https://github.com/NikkelM/Random-YouTube-Video" target="_blank" rel="noopener" title="View the source code or get into contact with the developer">GitHub</a>
+					<a class="buttonLink" href="https://github.com/NikkelM/Random-YouTube-Video/blob/main/CHANGELOG.md" target="_blank" rel="noopener">Full Changelog</a>
+					<a class="buttonLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate</a>
 				</footer>
 			</div>
 		</div>

static/html/popup.html

@@ -12,6 +12,72 @@
 		<div id="randomYoutubeVideo">
 			<h1>Random YouTube Video</h1>
 
+			<!-- OVERLAY DIVS -->
+			<div id="reviewDonationDiv" class="overlayDiv hidden">
+				<div id="reviewDiv" class="hidden">
+					<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100%; font-size: 18px">
+						<img src="../icons/icon-32-red.png" alt="Random YouTube Video icon" />
+						<p>&nbsp;+ You =&nbsp;</p>
+						<img src="../icons/heart.png" alt="Random YouTube Video icon" />
+						<p>&nbsp;?</p>
+					</div>
+					<p>
+						Are you enjoying the extension?<br />
+						Please consider leaving a review - it helps other people find it!
+					</p>
+					<br />
+					<p>
+						Review on:
+						<a
+							class="buttonLink"
+							href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
+							target="_blank"
+							rel="noopener"
+							title="Leave a review on the Chrome Web Store"
+							>Chrome</a
+						>
+						<a class="buttonLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Firefox Add-Ons page"
+							>Firefox</a
+						>
+						<a
+							class="buttonLink"
+							href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
+							target="_blank"
+							rel="noopener"
+							title="Leave a review on the Edge Add-Ons page"
+							>Edge</a
+						>
+						<br />
+						<br />
+					</p>
+					<button id="reviewOverlayCloseButton" class="randomYoutubeVideoButton" type="button">Maybe later</button>
+				</div>
+
+				<div id="donationDiv" class="hidden">
+					<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100%; font-size: 18px">
+						<img src="../icons/icon-32-red.png" alt="Random YouTube Video icon" />
+						<p>&nbsp;+ You =&nbsp;</p>
+						<img src="../icons/heart.png" alt="Random YouTube Video icon" />
+						<p>&nbsp;?</p>
+					</div>
+					<p>
+						You've been using the extension a lot - thank you!
+						<br />
+						<br />
+						Please consider donating to make it possible for me to keep developing and maintaining it in the future.
+					</p>
+					<br />
+					<a class="buttonLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate on Ko-Fi</a>
+					<p style="display: inline">or</p>
+					<a class="buttonLink" href="https://github.com/sponsors/NikkelM" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension"
+						>Sponsor on GitHub</a
+					>
+					<br />
+					<br />
+					<button id="donationOverlayCloseButton" class="randomYoutubeVideoButton" type="button">Maybe later</button>
+				</div>
+			</div>
+
 			<!-- OPTIONS START -->
 			<!-- <h2>Extension Settings</h2> -->
 			<p class="grey-text">Hover over an option to view a more detailed explanation.</p>
@@ -205,26 +271,26 @@ <h3 title="These settings are for people with some technical knowledge. Don't wo
 			<footer id="randomYoutubeVideoFooter">
 				Leave a review:
 				<a
-					class="footerLink"
+					class="buttonLink"
 					href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
 					target="_blank"
 					rel="noopener"
 					title="Leave a review on the Chrome Web Store"
 					>Chrome</a
 				>
-				<a class="footerLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Mozilla Add-Ons page">Firefox</a>
+				<a class="buttonLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Firefox Add-Ons page">Firefox</a>
 				<a
-					class="footerLink"
+					class="buttonLink"
 					href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
 					target="_blank"
 					rel="noopener"
 					title="Leave a review on the Edge Add-Ons page"
 					>Edge</a
 				>
 				<br />
-				<a class="footerLink" href="https://github.com/NikkelM/Random-YouTube-Video" target="_blank" rel="noopener" title="View the source code or get into contact with the developer">GitHub</a>
+				<a class="buttonLink" href="https://github.com/NikkelM/Random-YouTube-Video" target="_blank" rel="noopener" title="View the source code or get into contact with the developer">GitHub</a>
 				<button class="randomYoutubeVideoButton" id="viewChangelogButton" type="button" title="View the latest changes to the extension">Changelog</button>
-				<a class="footerLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate</a>
+				<a class="buttonLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate</a>
 			</footer>
 		</div>
 

static/html/shufflingPage.html

@@ -31,26 +31,26 @@ <h3><i>Did you know...</i></h3>
 			<footer id="randomYoutubeVideoFooter">
 				Leave a review:
 				<a
-					class="footerLink"
+					class="buttonLink"
 					href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
 					target="_blank"
 					rel="noopener"
 					title="Leave a review on the Chrome Web Store"
 					>Chrome</a
 				>
-				<a class="footerLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Mozilla Add-Ons page">Firefox</a>
+				<a class="buttonLink" href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/" target="_blank" rel="noopener" title="Leave a review on the Firefox Add-Ons page">Firefox</a>
 				<a
-					class="footerLink"
+					class="buttonLink"
 					href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
 					target="_blank"
 					rel="noopener"
 					title="Leave a review on the Edge Add-Ons page"
 					>Edge</a
 				>
 				<br />
-				<a class="footerLink" href="https://github.com/NikkelM/Random-YouTube-Video" target="_blank" rel="noopener" title="View the source code or get into contact with the developer">GitHub</a>
+				<a class="buttonLink" href="https://github.com/NikkelM/Random-YouTube-Video" target="_blank" rel="noopener" title="View the source code or get into contact with the developer">GitHub</a>
 				<button class="randomYoutubeVideoButton" id="viewChangelogButton" type="button" title="View the latest changes to the extension">Changelog</button>
-				<a class="footerLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate</a>
+				<a class="buttonLink" href="https://ko-fi.com/nikkelm" target="_blank" rel="noopener" title="Show your appreciation and support the development of the extension">Donate</a>
 			</footer>
 		</div>