Skip to content

Commit 2e93157

Browse files
NikkelMNikkelM
authored
Added review overlays after a certain number of shuffles (#252)
1 parent 4e496ff commit 2e93157

File tree

15 files changed

+181
-44
lines changed

15 files changed

+181
-44
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Changelog
22

3-
## v3.0.0 (Unreleased)
3+
## v3.0.0
44

55
<!--Releasenotes start-->
66
- Shorts pages are now supported! Shuffle buttons can now be found on all shorts pages.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Firefox:
2222
<img src="https://img.shields.io/amo/stars/random-youtube-video?label=rating"
2323
alt="Firefox rating"></a>
2424
<a href="https://addons.mozilla.org/en-GB/firefox/addon/random-youtube-video/">
25-
<img alt="Mozilla Add-on" src="https://img.shields.io/amo/users/random-youtube-video?label=users"
25+
<img alt="Firefox Add-on" src="https://img.shields.io/amo/users/random-youtube-video?label=users"
2626
alt="Firefox users"></a>
2727
<br>
2828
<br>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "random-youtube-video",
3-
"version": "2.3.0",
3+
"version": "3.0.0",
44
"description": "Customize, shuffle and play random videos from any YouTube channel.",
55
"scripts": {
66
"dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",

‎src/background.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ async function initExtension() {
1010
if (configSync.previousVersion === null) {
1111
console.log(`Extension was installed for the first time (v${manifestData.version})`);
1212
await setSyncStorageValue("previousVersion", manifestData.version);
13-
await chrome.tabs.create({ url: "html/welcome.html" });
13+
const welcomeUrl = chrome.runtime.getURL("html/welcome.html");
14+
await chrome.tabs.create({ url: welcomeUrl });
1415
} else if (configSync.previousVersion < manifestData.version) {
1516
await handleExtensionUpdate(manifestData, configSync.previousVersion);
1617
}

‎src/config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const configSyncDefaults = {
2424
"currentChannelId": null,
2525
"currentChannelName": null,
2626
// The number of videos the user has shuffled so far
27+
// Does not count multiple times if a playlist is shuffled, so is actually numShuffledTimesTotal
2728
"numShuffledVideosTotal": 0,
2829
// These two properties determine the amount of quota remaining today, and the time at which the quota will next reset (daily resets at midnight)
2930
"userQuotaRemainingToday": 200,
@@ -37,6 +38,10 @@ export const configSyncDefaults = {
3738
"wasLastRickRolledInYear": "1970",
3839
// Used when updating the extension
3940
"previousVersion": null,
41+
// If the message asking for a review has been shown yet
42+
"reviewMessageShown": false,
43+
// If the message asking for a donation has been shown yet
44+
"donationMessageShown": false,
4045
};
4146

4247
export const shufflingHints = [

‎src/html/popup/popup.js‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,29 @@ if (isPopup) {
2828
const domElements = getPopupDomElements();
2929
await setPopupDomElementValuesFromConfig(domElements);
3030
await setPopupDomElemenEventListeners(domElements);
31+
await determineOverlayVisibility(domElements);
3132

3233
// ----- DOM -----
3334
// --- Private ---
3435
// Get relevant DOM elements
3536
function getPopupDomElements() {
36-
/* global customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
37+
/* global reviewDonationDiv, reviewDiv, donationDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
3738
/* eslint no-undef: "error" */
3839
return {
39-
// Body element
4040
body: document.body,
4141

42+
// OVERLAY
43+
// Review/Donation div
44+
reviewDonationDiv: document.getElementById("reviewDonationDiv"),
45+
// Review div
46+
reviewDiv: reviewDonationDiv.children.namedItem("reviewDiv"),
47+
// Review close button
48+
reviewOverlayCloseButton: reviewDiv.children.namedItem("reviewOverlayCloseButton"),
49+
// Donation div
50+
donationDiv: reviewDonationDiv.children.namedItem("donationDiv"),
51+
// Donation close button
52+
donationOverlayCloseButton: donationDiv.children.namedItem("donationOverlayCloseButton"),
53+
4254
// GLOBAL SETTINGS
4355
// Custom API key: Option toggle
4456
useCustomApiKeyOptionToggle: document.getElementById("useCustomApiKeyOptionToggle"),
@@ -410,6 +422,36 @@ async function setPopupDomElemenEventListeners(domElements) {
410422
});
411423
}
412424

425+
async function determineOverlayVisibility(domElements) {
426+
if (!configSync.reviewMessageShown && configSync.numShuffledVideosTotal < 150 && configSync.numShuffledVideosTotal >= 20) {
427+
domElements.reviewDiv.classList.remove("hidden");
428+
domElements.reviewDonationDiv.classList.remove("hidden");
429+
await setSyncStorageValue("reviewMessageShown", true);
430+
431+
domElements.reviewOverlayCloseButton.addEventListener("click", function () {
432+
domElements.reviewDonationDiv.classList.add("hidden");
433+
domElements.reviewDiv.classList.add("hidden");
434+
});
435+
} else if (!configSync.donationMessageShown && configSync.numShuffledVideosTotal >= 150) {
436+
domElements.donationDiv.classList.remove("hidden");
437+
domElements.reviewDonationDiv.classList.remove("hidden");
438+
await setSyncStorageValue("donationMessageShown", true);
439+
440+
domElements.donationOverlayCloseButton.addEventListener("click", function () {
441+
domElements.reviewDonationDiv.classList.add("hidden");
442+
domElements.donationDiv.classList.add("hidden");
443+
});
444+
}
445+
446+
domElements.reviewDonationDiv.addEventListener("click", function (event) {
447+
if (event.target === this) {
448+
reviewDonationDiv.classList.add("hidden");
449+
domElements.reviewDiv.classList.add("hidden");
450+
domElements.donationDiv.classList.add("hidden");
451+
}
452+
});
453+
}
454+
413455
// Responsible for all DOM elements that need a reference to the current channel
414456
async function updateDomElementsDependentOnChannel(domElements) {
415457
// ----- Custom options per channel: Channel name and description -----

‎src/html/welcome.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,17 +73,18 @@ async function setPopupDomElemenEventListeners(domElements) {
7373

7474
// Open options page button
7575
domElements.openOptionsPageButton.addEventListener("click", async function () {
76-
await chrome.tabs.create({ url: "html/popup.html" });
76+
const optionsUrl = chrome.runtime.getURL("html/popup.html");
77+
await chrome.tabs.create({ url: optionsUrl });
7778
});
7879

7980
// View changelog button
8081
domElements.viewChangelogButton.addEventListener("click", async function () {
8182
await setSyncStorageValue("lastViewedChangelogVersion", chrome.runtime.getManifest().version);
8283

83-
const tabUrl = chrome.runtime.getURL("html/changelog.html");
84-
let mustOpenTab = await tryFocusingTab(tabUrl);
84+
const changelogUrl = chrome.runtime.getURL("html/changelog.html");
85+
let mustOpenTab = await tryFocusingTab(changelogUrl);
8586
if (mustOpenTab) {
86-
await chrome.tabs.create({ url: "html/changelog.html" });
87+
await chrome.tabs.create({ url: changelogUrl });
8788
}
8889
});
8990
}

‎static/css/popup.css‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,27 @@
140140
margin-bottom: 4px;
141141
}
142142

143+
.overlayDiv {
144+
position: fixed;
145+
top: 0;
146+
left: 0;
147+
width: 100%;
148+
height: 100%;
149+
z-index: 1000;
150+
background-color: rgba(0, 0, 0, 0.8);
151+
display: flex;
152+
align-items: center;
153+
justify-content: center;
154+
}
155+
156+
.overlayDiv div {
157+
background-color: var(--randomYoutubeVideo-bg-color);
158+
color: var(--randomYoutubeVideo-fg-color);
159+
padding: 15px;
160+
border-radius: 5px;
161+
margin: 0px 20px;
162+
}
163+
143164
/*
144165
* Options Row
145166
*/
@@ -336,14 +357,8 @@ select:hover {
336357
color: var(--randomYoutubeVideo-grey-fg-color);
337358
}
338359

339-
/*
340-
* Footer
341-
*/
342-
#randomYoutubeVideoFooter {
343-
padding: 8px 0;
344-
}
345-
346-
#randomYoutubeVideoFooter .footerLink {
360+
/* A link that looks like a button */
361+
.buttonLink {
347362
color: var(--randomYoutubeVideo-fg-color);
348363
display: inline-block;
349364
text-decoration: none;
@@ -354,10 +369,17 @@ select:hover {
354369
margin: 2px 1px;
355370
}
356371

357-
#randomYoutubeVideoFooter .footerLink:hover {
372+
.buttonLink:hover {
358373
background-color: #444;
359374
}
360375

361-
#randomYoutubeVideoFooter .footerLink:active {
376+
.buttonLink:active {
362377
background-color: #555;
363378
}
379+
380+
/*
381+
* Footer
382+
*/
383+
#randomYoutubeVideoFooter {
384+
padding: 8px 0;
385+
}

‎static/html/changelog.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,28 +50,28 @@ <h3><i>Did you know...</i></h3>
5050
<footer id="randomYoutubeVideoFooter">
5151
Leave a review:
5252
<a
53-
class="footerLink"
53+
class="buttonLink"
5454
href="https://chromewebstore.google.com/detail/random-youtube-video/kijgnjhogkjodpakfmhgleobifempckf"
5555
target="_blank"
5656
rel="noopener"
5757
title="Leave a review on the Chrome Web Store"
5858
>Chrome</a
5959
>
60-
<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"
60+
<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"
6161
>Firefox</a
6262
>
6363
<a
64-
class="footerLink"
64+
class="buttonLink"
6565
href="https://microsoftedge.microsoft.com/addons/detail/random-youtube-video/fccfflipicelkilpmgniblpoflkbhdbe"
6666
target="_blank"
6767
rel="noopener"
6868
title="Leave a review on the Edge Add-Ons page"
6969
>Edge</a
7070
>
7171
<br />
72-
<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>
73-
<a class="footerLink" href="https://github.com/NikkelM/Random-YouTube-Video/blob/main/CHANGELOG.md" target="_blank" rel="noopener">Full Changelog</a>
74-
<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>
72+
<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>
73+
<a class="buttonLink" href="https://github.com/NikkelM/Random-YouTube-Video/blob/main/CHANGELOG.md" target="_blank" rel="noopener">Full Changelog</a>
74+
<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>
7575
</footer>
7676
</div>
7777
</div>

0 commit comments

Comments
 (0)