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/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/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/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..04a39140 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,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 ----- 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/css/popup.css b/static/css/popup.css index b5ea11c4..47aa7b6b 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 */ @@ -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; +} \ No newline at end of file diff --git a/static/html/changelog.html b/static/html/changelog.html index 28740d91..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 3f113234..73c40ac6 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.

@@ -205,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 d829d5ad..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 68504e97..965443ee 100644 --- a/static/html/welcome.html +++ b/static/html/welcome.html @@ -54,16 +54,16 @@

Did you know...

diff --git a/static/icons/heart.png b/static/icons/heart.png new file mode 100644 index 00000000..4fd393f5 Binary files /dev/null and b/static/icons/heart.png differ 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": [ {