From 0b14ebe734dda4934670bc960e2c6350bfd2123f Mon Sep 17 00:00:00 2001 From: NikkelM <57323886+NikkelM@users.noreply.github.com> Date: Sat, 2 Dec 2023 17:18:41 +0000 Subject: [PATCH 1/5] Added overlay messages asking for reviews and donations --- src/config.js | 5 +++ src/html/popup/popup.js | 42 +++++++++++++++++++++++-- static/css/popup.css | 27 ++++++++++++++-- static/html/popup.html | 68 +++++++++++++++++++++++++++++++++++++++- static/icons/heart.png | Bin 0 -> 1152 bytes 5 files changed, 136 insertions(+), 6 deletions(-) create mode 100644 static/icons/heart.png diff --git a/src/config.js b/src/config.js index 9a3f8fd3..639999f6 100644 --- a/src/config.js +++ b/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 = [ diff --git a/src/html/popup/popup.js b/src/html/popup/popup.js index 16c9020f..6cb52789 100644 --- a/src/html/popup/popup.js +++ b/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,32 @@ async function setPopupDomElemenEventListeners(domElements) { }); } +async function determineOverlayVisibility(domElements) { + if (!configSync.reviewMessageShown && configSync.numShuffledVideosTotal < 150 && configSync.numShuffledVideosTotal >= 20) { + domElements.reviewDonationDiv.classList.remove("hidden"); + domElements.reviewDiv.classList.remove("hidden"); + await setSyncStorageValue("reviewMessageShown", true); + + domElements.reviewOverlayCloseButton.addEventListener("click", function () { + domElements.reviewDonationDiv.classList.add("hidden"); + }); + } else if (!configSync.donationMessageShown && configSync.numShuffledVideosTotal >= 150) { + domElements.reviewDonationDiv.classList.remove("hidden"); + domElements.donationDiv.classList.remove("hidden"); + await setSyncStorageValue("donationMessageShown", true); + + domElements.donationOverlayCloseButton.addEventListener("click", function () { + domElements.reviewDonationDiv.classList.add("hidden"); + }); + } + + domElements.reviewDonationDiv.addEventListener("click", function (event) { + if (event.target === this) { + this.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 ----- diff --git a/static/css/popup.css b/static/css/popup.css index b5ea11c4..276d5eea 100644 --- a/static/css/popup.css +++ b/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 */ @@ -343,7 +364,7 @@ select:hover { padding: 8px 0; } -#randomYoutubeVideoFooter .footerLink { +.footerLink { color: var(--randomYoutubeVideo-fg-color); display: inline-block; text-decoration: none; @@ -354,10 +375,10 @@ select:hover { margin: 2px 1px; } -#randomYoutubeVideoFooter .footerLink:hover { +.footerLink:hover { background-color: #444; } -#randomYoutubeVideoFooter .footerLink:active { +.footerLink:active { background-color: #555; } diff --git a/static/html/popup.html b/static/html/popup.html index 3f113234..65fc8dac 100644 --- a/static/html/popup.html +++ b/static/html/popup.html @@ -12,6 +12,72 @@
Hover over an option to view a more detailed explanation.
@@ -212,7 +278,7 @@zkAdqBD(O;>rBSjXMdN7b-Z%3{MYqn
z&-%BVzZMxjeyE%A{cGZ+&KZ;2a(^V4KDn>My*lFCXMe%%8$4awn
Review on: Chrome - Firefox Random YouTube Video Please consider donating to make it possible for me to keep developing and maintaining it in the future.
or
- Sponsor on GitHub