Skip to content

Commit

Permalink
Added permissions required overlay to popup for Firefox (#283)
Browse files Browse the repository at this point in the history
  • Loading branch information
NikkelM authored May 21, 2024
1 parent 2ebf7d5 commit c97f609
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 118 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
# Changelog

## v3.1.2-beta
## v3.1.2

<!--Releasenotes start-->
- Fixed the shuffle button not showing up if the user is on a different version of the YouTube UI.
- Firefox: If not already granted, the extension will now ask for permissions whenever the popup is opened.
- Fixed a bug that would cause the changelog page to show changes from an incorrect version in some cases.
- Updated versioning scheme for a better distinction between stable and beta versions.
<!--Releasenotes end-->
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "random-youtube-video",
"version": "3.1.1",
"version": "3.1.2",
"description": "Customize, shuffle and play random videos from any YouTube channel.",
"scripts": {
"dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",
Expand Down
66 changes: 41 additions & 25 deletions src/html/popup/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ if (isPopup) {
}
}

const isFirefox = typeof browser !== "undefined";
const domElements = getPopupDomElements();
await setPopupDomElementValuesFromConfig(domElements);
await setPopupDomElemenEventListeners(domElements);
Expand All @@ -41,7 +42,7 @@ try {
// --- Private ---
// Get relevant DOM elements
function getPopupDomElements() {
/* global reviewDonationDiv, reviewDiv, donationDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
/* global reviewDonationDiv, reviewDiv, donationDiv, firefoxPermissionsNeededDiv, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, dailyQuotaNoticeDiv */
/* eslint no-undef: "error" */
return {
body: document.body,
Expand All @@ -57,6 +58,10 @@ function getPopupDomElements() {
donationDiv: reviewDonationDiv.children.namedItem("donationDiv"),
// Donation close button
donationOverlayCloseButton: donationDiv.children.namedItem("donationOverlayCloseButton"),
// Firefox permissions needed div
firefoxPermissionsNeededDiv: document.getElementById("firefoxPermissionsNeededDiv"),
// Firefox permissions needed button
firefoxPermissionsNeededButton: document.getElementById("firefoxPermissionsNeededButton"),

// GLOBAL SETTINGS
// Custom API key: Option toggle
Expand Down Expand Up @@ -429,34 +434,45 @@ async function setPopupDomElemenEventListeners(domElements) {
});
}

// When the popup is opened, checks if an overlay should be shown
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");
// If we are on Firefox and have not been granted permissions, show the overlay and then ask for permissions
if (isFirefox && !await browser.permissions.contains({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] })) {
domElements.firefoxPermissionsNeededDiv.classList.remove("hidden");

domElements.firefoxPermissionsNeededButton.addEventListener("click", async function () {
browser.permissions.request({ permissions: ["tabs"], origins: ["*://*.youtube.com/*"] });
window.close();
});
} 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");
} else {
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");
}
});
}

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
Expand Down
115 changes: 26 additions & 89 deletions static/html/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,9 @@ <h1>Random YouTube Video</h1>
<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
>
<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>
Expand All @@ -69,15 +53,23 @@ <h1>Random YouTube Video</h1>
<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
>
<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>

<div id="firefoxPermissionsNeededDiv" class="overlayDiv hidden">
<div>
<h3>Permissions needed!</h3>
<br />
<p>To function, the extension requires your permission to access YouTube.com pages:</p>
<br />
<button id="firefoxPermissionsNeededButton" class="randomYoutubeVideoButton" type="button">Grant permissions now!</button>
</div>
</div>

<!-- OPTIONS START -->
<!-- <h2>Extension Settings</h2> -->
<p class="grey-text">Hover over an option to view a more detailed explanation.</p>
Expand All @@ -87,9 +79,7 @@ <h3>General Video Settings</h3>
<div class="optionsRow">
<!-- Shuffling: Open in new tab option toggle -->
<div class="toggle optionsRow-item">
<label
id="shuffleOpenInNewTabOption"
title="If this is enabled, shuffled videos will open in a new tab instead of the current one. This setting is ignored when using the shuffle button displayed in the popup, which will always open a new tab.">
<label id="shuffleOpenInNewTabOption" title="If this is enabled, shuffled videos will open in a new tab instead of the current one. This setting is ignored when using the shuffle button displayed in the popup, which will always open a new tab.">
Open in new tab
<input type="checkbox" id="shuffleOpenInNewTabOptionToggle" />
<span class="slider"></span>
Expand All @@ -110,10 +100,7 @@ <h3>General Video Settings</h3>
<div id="shuffleIgnoreShortsOptionDropdownDiv" class="optionTextInput" style="margin-top: -4px">
<p class="displayInline" title="Choose if the extension should shuffle from all videos uploaded on the channel, ignore shorts, or shuffle only from shorts.">Shorts handling</p>
<!-- Dropdown menu START -->
<select
id="shuffleIgnoreShortsOptionDropdown"
class="displayInline"
title="Choose if the extension should shuffle from all videos uploaded on the channel, ignore shorts, or shuffle only from shorts.">
<select id="shuffleIgnoreShortsOptionDropdown" class="displayInline" title="Choose if the extension should shuffle from all videos uploaded on the channel, ignore shorts, or shuffle only from shorts.">
<option value="1" title="The extension will include both shorts and normal videos in the shuffle.">Include shorts</option>
<option value="2" title="Shorts will be ignored when shuffling.">Ignore shorts</option>
<option value="0" title="The extension will only shuffle from shorts uploaded on channels (normal videos are ignored).">Only shorts</option>
Expand All @@ -128,20 +115,15 @@ <h3>General Video Settings</h3>
<div class="optionsRow">
<!-- Shuffling: Open as playlist option toggle -->
<div class="toggle optionsRow-item">
<label
id="shuffleOpenAsPlaylistOption"
title="If this is enabled, shuffling will choose multiple videos and open a temporary playlist that contains these videos. Use the input field to the right to choose how many videos should be in that playlist.">
<label id="shuffleOpenAsPlaylistOption" title="If this is enabled, shuffling will choose multiple videos and open a temporary playlist that contains these videos. Use the input field to the right to choose how many videos should be in that playlist.">
Open a playlist
<input type="checkbox" id="shuffleOpenAsPlaylistOptionToggle" />
<span class="slider"></span>
</label>
</div>

<!-- Shuffling: Open as playlist number of videos input -->
<div
id="shuffleNumVideosInPlaylistDiv"
class="optionsRow-item optionTextInput"
title="Choose how many videos should be in the playlist when shuffling. YouTube limits the number of videos in this playlist type to 50. With higher values the shuffle may take slightly longer than usual.">
<div id="shuffleNumVideosInPlaylistDiv" class="optionsRow-item optionTextInput" title="Choose how many videos should be in the playlist when shuffling. YouTube limits the number of videos in this playlist type to 50. With higher values the shuffle may take slightly longer than usual.">
<p>Videos in playlist:</p>
<input type="number" inputmode="numeric" class="numberInput" max="50" min="1" id="shuffleNumVideosInPlaylistInput" name="shuffleNumVideosInPlaylistInput" value="5" />
</div>
Expand All @@ -160,39 +142,14 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
<select id="channelCustomOptionsDropdown" class="displayInline" title="Choose from one of the provided options in the dropdown to customize your shuffling experience on this channel.">
<option value="allVideosOption" option-width="190px" title="No filters are applied, and a random video from all uploaded videos will be chosen.">all videos on this channel.</option>
<option value="dateOption" option-width="205px" title="Only videos uploaded on or after the chosen date will be considered when shuffling.">videos uploaded after date:</option>
<option value="videoIdOption" option-width="190px" title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling.">
videos after video with ID:
</option>
<option value="percentageOption" option-width="206px" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">
the most recent % of videos:
</option>
<option value="videoIdOption" option-width="190px" title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling.">videos after video with ID:</option>
<option value="percentageOption" option-width="206px" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">the most recent % of videos:</option>
</select>
<!-- Dropdown menu END -->
<!-- Input fields per option START -->
<input
type="date"
class="hidden dateInput"
id="channelCustomOptionsDateOptionInput"
name="channelCustomOptionsDateOptionInput"
title="Only videos uploaded on or after the chosen date will be considered when shuffling." />
<input
type="text"
inputmode="text"
class="hidden youtubeIdInput"
maxlength="11"
id="channelCustomOptionsVideoIdOptionInput"
name="channelCustomOptionsVideoIdOptionInput"
title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling."
placeholder="Enter Video ID" />
<input
type="number"
inputmode="numeric"
class="hidden displayInline numberInput noArrows"
max="100"
min="1"
id="channelCustomOptionsPercentageOptionInput"
name="channelCustomOptionsPercentageOptionInput"
title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling." />
<input type="date" class="hidden dateInput" id="channelCustomOptionsDateOptionInput" name="channelCustomOptionsDateOptionInput" title="Only videos uploaded on or after the chosen date will be considered when shuffling." />
<input type="text" inputmode="text" class="hidden youtubeIdInput" maxlength="11" id="channelCustomOptionsVideoIdOptionInput" name="channelCustomOptionsVideoIdOptionInput" title="Only videos uploaded on or after the day the video with the given ID was uploaded will be considered when shuffling." placeholder="Enter Video ID" />
<input type="number" inputmode="numeric" class="hidden displayInline numberInput noArrows" max="100" min="1" id="channelCustomOptionsPercentageOptionInput" name="channelCustomOptionsPercentageOptionInput" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling." />
<p id="channelCustomOptionsPercentageOptionP" class="hidden displayInline" title="Only the most recent X% of videos uploaded to the channel will be considered when shuffling.">%</p>
<!-- Input fields per option END -->
</div>
Expand Down Expand Up @@ -236,13 +193,7 @@ <h3 title="These settings are for people with some technical knowledge. Don't wo
</div>

<p style="margin-top: 6px">Your custom API key:</p>
<input
type="text"
id="customApiKeyInputField"
name="customApiKeyInputField"
style="width: 80%"
title="Enter your YouTube API key here. It will not be shared with anyone."
placeholder="Enter API key here. It won't be shared with anyone." />
<input type="text" id="customApiKeyInputField" name="customApiKeyInputField" style="width: 80%" title="Enter your YouTube API key here. It will not be shared with anyone." placeholder="Enter API key here. It won't be shared with anyone." />
<br />
<div id="customApiKeyInputInfoDiv" class="hidden">
<p id="customApiKeyInputInfoText"></p>
Expand Down Expand Up @@ -270,23 +221,9 @@ <h3 title="These settings are for people with some technical knowledge. Don't wo

<footer id="randomYoutubeVideoFooter">
Leave a review:
<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://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
>
<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 />
<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>
Expand Down
4 changes: 2 additions & 2 deletions static/manifest.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "Random YouTube Video",
"description": "Customize, shuffle and play random videos from any YouTube channel.",
"version": "3.1.1",
"version_name": "3.1.2-beta",
"version": "3.1.2",
"version_name": "3.1.2",
"manifest_version": 3,
"content_scripts": [
{
Expand Down

0 comments on commit c97f609

Please sign in to comment.