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 @@

Random YouTube Video

+ + +

Hover over an option to view a more detailed explanation.

@@ -212,7 +278,7 @@

Chrome - Firefox + Firefox f*BZC zIG9zkAdqBD(O;>rBSjXMdN7b-Z%3{MYqn z&-%BVzZMxjeyE%A{cGZ+&KZ;2a(^V4KDn>My*lFCXMe%%8$4awn%WM?8^`q`(4!o<3m@l6n-;9d**Fb?c^6VX?u{?qU=7 z?pt{ASw_~gPx=*vu96yQ|8aU^4>YUn+_{(KR=#TRkhP0zJA}wgN%_Ics}iz zFu~x7?zRsbT!mUVuDQru+!n}qFd|@g)8EIttPUP}BC;&Sip$t=mcaa0OP{kgH(nfK zV)-vD_VSRB&iVlUom|PxY2UVMc~WpcH@A27I8OI#yLQW8s2t&)pUffR$0fswJUp^>hEQHY_b zm9d4Dv9Y#+ft7)Q*wbAdC>nC}Q!>*kacfB5!DIr|paHj`Br`X)xFj*R08@{NDa4Y< T9r7oDdKf%i{an^LB{Ts5WM-;6 literal 0 HcmV?d00001 From ca1f38850d2d992658f81aaa4e510c0344f7a7a9 Mon Sep 17 00:00:00 2001 From: NikkelM <57323886+NikkelM@users.noreply.github.com> Date: Sat, 2 Dec 2023 17:18:58 +0000 Subject: [PATCH 2/5] Use new Firefox Add-On store name --- README.md | 2 +- static/html/changelog.html | 2 +- static/html/shufflingPage.html | 2 +- static/html/welcome.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 883608b2..bc3e336f 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Firefox: Firefox rating - Mozilla Add-on

diff --git a/static/html/changelog.html b/static/html/changelog.html index 28740d91..9d6738bd 100644 --- a/static/html/changelog.html +++ b/static/html/changelog.html @@ -57,7 +57,7 @@

Did you know...

title="Leave a review on the Chrome Web Store" >Chrome - Firefox Did you know... title="Leave a review on the Chrome Web Store" >Chrome - Firefox + Firefox Did you know... title="Leave a review on the Chrome Web Store" >Chrome - Firefox + Firefox Date: Sat, 2 Dec 2023 17:37:22 +0000 Subject: [PATCH 3/5] Switched order in which divs are shown, make sure to hide everything --- src/html/popup/popup.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/html/popup/popup.js b/src/html/popup/popup.js index 6cb52789..04a39140 100644 --- a/src/html/popup/popup.js +++ b/src/html/popup/popup.js @@ -424,26 +424,30 @@ 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"); + 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.reviewDonationDiv.classList.remove("hidden"); 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) { - this.classList.add("hidden"); + reviewDonationDiv.classList.add("hidden"); + domElements.reviewDiv.classList.add("hidden"); + domElements.donationDiv.classList.add("hidden"); } }); } From f687fed51fd60e45aa419921fa1b947e8af47505 Mon Sep 17 00:00:00 2001 From: NikkelM <57323886+NikkelM@users.noreply.github.com> Date: Sat, 2 Dec 2023 17:39:18 +0000 Subject: [PATCH 4/5] Renamed footerLink to buttonLink --- static/css/popup.css | 21 +++++++++++---------- static/html/changelog.html | 12 ++++++------ static/html/popup.html | 20 ++++++++++---------- static/html/shufflingPage.html | 10 +++++----- static/html/welcome.html | 10 +++++----- 5 files changed, 37 insertions(+), 36 deletions(-) diff --git a/static/css/popup.css b/static/css/popup.css index 276d5eea..47aa7b6b 100644 --- a/static/css/popup.css +++ b/static/css/popup.css @@ -357,14 +357,8 @@ select:hover { color: var(--randomYoutubeVideo-grey-fg-color); } -/* - * Footer - */ -#randomYoutubeVideoFooter { - padding: 8px 0; -} - -.footerLink { +/* A link that looks like a button */ +.buttonLink { color: var(--randomYoutubeVideo-fg-color); display: inline-block; text-decoration: none; @@ -375,10 +369,17 @@ select:hover { margin: 2px 1px; } -.footerLink:hover { +.buttonLink:hover { background-color: #444; } -.footerLink:active { +.buttonLink:active { background-color: #555; } + +/* + * Footer + */ +#randomYoutubeVideoFooter { + padding: 8px 0; +} \ No newline at end of file diff --git a/static/html/changelog.html b/static/html/changelog.html index 9d6738bd..1aba2a4e 100644 --- a/static/html/changelog.html +++ b/static/html/changelog.html @@ -50,18 +50,18 @@

Did you know...

diff --git a/static/html/popup.html b/static/html/popup.html index 65fc8dac..73c40ac6 100644 --- a/static/html/popup.html +++ b/static/html/popup.html @@ -29,18 +29,18 @@

Random YouTube Video

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.


-
Donate on Ko-Fi + Donate on Ko-Fi

or

- Sponsor on GitHub
@@ -271,16 +271,16 @@

Leave a review: Chrome - Firefox + Firefox GitHub + GitHub - Donate + Donate diff --git a/static/html/shufflingPage.html b/static/html/shufflingPage.html index 5aec5a5d..0f6e75bf 100644 --- a/static/html/shufflingPage.html +++ b/static/html/shufflingPage.html @@ -31,16 +31,16 @@

Did you know...

diff --git a/static/html/welcome.html b/static/html/welcome.html index aded577f..965443ee 100644 --- a/static/html/welcome.html +++ b/static/html/welcome.html @@ -54,16 +54,16 @@

Did you know...

From e06caff42be9885cfdebcdd8eb3fa588dd9895c3 Mon Sep 17 00:00:00 2001 From: NikkelM <57323886+NikkelM@users.noreply.github.com> Date: Sat, 2 Dec 2023 17:49:40 +0000 Subject: [PATCH 5/5] Bumped version, fixed URL bug in Firefox --- CHANGELOG.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- src/background.js | 3 ++- src/html/welcome.js | 9 +++++---- static/manifest.json | 2 +- 6 files changed, 12 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 959e8779..ff7dd975 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## v3.0.0 (Unreleased) +## v3.0.0 - Shorts pages are now supported! Shuffle buttons can now be found on all shorts pages. diff --git a/package-lock.json b/package-lock.json index f8411743..72c5cbe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "random-youtube-video", - "version": "2.2.3", + "version": "3.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "random-youtube-video", - "version": "2.2.3", + "version": "3.0.0", "dependencies": { "@babel/runtime": "^7.18.6", "firebase": "^9.22.0" diff --git a/package.json b/package.json index b0a3cc91..a832069f 100644 --- a/package.json +++ b/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\"", diff --git a/src/background.js b/src/background.js index ee592df1..231e3d86 100644 --- a/src/background.js +++ b/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); } diff --git a/src/html/welcome.js b/src/html/welcome.js index d5de7480..729f6afa 100644 --- a/src/html/welcome.js +++ b/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 }); } }); } \ No newline at end of file diff --git a/static/manifest.json b/static/manifest.json index 2d1f2fb7..078d6a4f 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -1,7 +1,7 @@ { "name": "Random YouTube Video", "description": "Customize, shuffle and play random videos from any YouTube channel.", - "version": "2.3.0", + "version": "3.0.0", "manifest_version": 3, "content_scripts": [ {