Moved API quota info, updated default open in new tab option

CHANGELOG.md

@@ -1,11 +1,17 @@
 # Changelog
 
-## v3.1.10
+## v3.1.11
 
 <!--Releasenotes start-->
-- News page will no longer open after updating from v3.1.5 or an earlier version.
+- Changed the default settings to not open shuffled videos in a new tab.
+- Moved the informative text about remaining YouTube API quota to the advanced settings menu.
+- Updated the welcome page for a better experience.
 <!--Releasenotes end-->
 
+## v3.1.10
+
+- News page will no longer open after updating from v3.1.5 or an earlier version.
+
 ## v3.1.9
 
 - Temporarily disabled the news feature.

README.md

@@ -100,6 +100,15 @@ You may also test the extension with Firefox by running `npm run dev:firefox`, w
 - Run `npm run dev:android` to load the extension in Firefox for Android.
 - Your device or emulator should now open Firefox for Android with the extension loaded.
 
+### Testing
+
+The project contains a number of different test suites, for different environments and purposes:
+
+- All tests: Run with `npm run test:all`
+- Unit tests: Run with `npm test`
+- "Compatibility tests": Run with `npm run test:compatibility` and optionally the `:headless` or `:headful` suffixes
+	- These tests are used to ensure that the extension runs as expected in a live browser environment, for Chrome only at the moment. They utilize `puppeteer` to start a browser session and interact with the extension.
+
 ### Versioning
 
 The `manifest.json` contains two version numbers: `version` and `version_name`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "random-youtube-video",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Customize, shuffle and play random videos from any YouTube channel.",
   "scripts": {
     "dev": "concurrently \"npm run dev:chromium\" \"npm run dev:firefox\"",
@@ -12,11 +12,11 @@
     "build:firefox": "webpack --env browser=firefox --config webpack.prod.cjs",
     "lint": "eslint --ext .ts,.js --max-warnings=0 . --ignore-path .eslintignore",
     "lint:firefox": "web-ext lint --source-dir ./dist/firefox",
-    "test": "c8 --reporter=lcov --reporter=text mocha ./test/testSetup.js ./test/chromeStorage.test.js ./test/**/*.test.js --exclude ./test/compatibility*.test.js --require mocha-suppress-logs",
+    "test": "c8 --reporter=lcov --reporter=text mocha ./test/testSetup.js ./test/chromeStorage.test.js ./test/*.test.js --require mocha-suppress-logs",
     "test:all": "npm run test && npm run test:compatibility",
-    "test:compatibility": "mocha ./test/testSetup.js ./test/compatibility*.test.js --require mocha-suppress-logs --retries 3",
-    "test:compatibility:headless": "mocha ./test/testSetup.js ./test/compatibility.test.js ./test/compatibility.headless.test.js --require mocha-suppress-logs --retries 3",
-    "test:compatibility:headful": "mocha ./test/testSetup.js ./test/compatibility.headful.test.js --require mocha-suppress-logs --retries 3"
+    "test:compatibility": "mocha ./test/testSetup.js ./test/compatibility/compatibility*.test.js --require mocha-suppress-logs --retries 3",
+    "test:compatibility:headless": "mocha ./test/testSetup.js ./test/compatibility/compatibility.test.js ./test/compatibility/compatibility.headless.test.js --require mocha-suppress-logs --retries 3",
+    "test:compatibility:headful": "mocha ./test/testSetup.js ./test/compatibility/compatibility.headful.test.js --require mocha-suppress-logs --retries 3"
   },
   "type": "module",
   "devDependencies": {
@@ -46,7 +46,7 @@
     "sinon": "^15.1.0",
     "sinon-chrome": "^3.0.1",
     "web-ext": "^8.0.0",
-    "webpack": "^5.73.0",
+    "webpack": "^5.95.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"
   },

src/config.js

@@ -9,8 +9,8 @@ export const configSyncDefaults = {
 	// If the user has enabled sharing video ID's with the database
 	"databaseSharingEnabledOption": true,
 	// These properties influence the behavior of the "Shuffle" button
-	"shuffleOpenInNewTabOption": true,
-	"shuffleReUseNewTabOption": true,
+	"shuffleOpenInNewTabOption": false,
+	"shuffleReUseNewTabOption": false,
 	// 0 = only shorts, 1 = no option set (shorts are included), 2 = ignore shorts
 	"shuffleIgnoreShortsOption": 1,
 	"shuffleOpenAsPlaylistOption": true,

src/html/popup/popup.js

@@ -42,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, customApiKeyInputDiv, customApiKeyInputInfoDiv, shuffleNumVideosInPlaylistDiv, channelCustomOptionsDiv, channelCustomOptionsDropdownDiv, forYourInformationDiv, advancedSettingsDiv, dailyQuotaNoticeDiv */
 	/* eslint no-undef: "error" */
 	return {
 		body: document.body,
@@ -121,15 +121,16 @@ function getPopupDomElements() {
 		// Database sharing: Option toggle
 		dbSharingOptionToggle: document.getElementById("dbSharingOptionToggle"),
 
+		// Daily quota notice div
+		dailyQuotaNoticeDiv: advancedSettingsDiv.children.namedItem("dailyQuotaNoticeDiv"),
+		// Daily quota notice: Text
+		dailyQuotaNoticeText: dailyQuotaNoticeDiv.children.namedItem("dailyQuotaNoticeText"),
+
 		// FYI - FOR YOUR INFORMATION
 		// FYI div
 		forYourInformationDiv: document.getElementById("forYourInformationDiv"),
 		// FYI: Number of shuffled videos text
 		numberOfShuffledVideosText: forYourInformationDiv.children.namedItem("numberOfShuffledVideosText"),
-		// FYI: Daily quota notice div
-		dailyQuotaNoticeDiv: forYourInformationDiv.children.namedItem("dailyQuotaNoticeDiv"),
-		// Daily quota notice: Text
-		dailyQuotaNoticeText: dailyQuotaNoticeDiv.children.namedItem("dailyQuotaNoticeText"),
 
 		// FOOTER
 		// View changelog button

static/html/popup.html

@@ -200,13 +200,7 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 					<br />
 					<button class="randomYoutubeVideoButton" id="customApiKeySubmitButton" type="button">Submit</button>
 				</div>
-			</div>
-			<!-- OPTIONS END -->
 
-			<!-- FYI -->
-			<div id="forYourInformationDiv">
-				<!-- Number of shuffled videos -->
-				<p id="numberOfShuffledVideosText" style="margin-bottom: 6px; margin-top: 6px">You have shuffled 0 times until now.</p>
 				<!-- Daily quota notice -->
 				<div
 					id="dailyQuotaNoticeDiv"
@@ -218,6 +212,13 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 				</div>
 				<!-- Daily quota notice end -->
 			</div>
+			<!-- OPTIONS END -->
+
+			<!-- FYI -->
+			<div id="forYourInformationDiv">
+				<!-- Number of shuffled videos -->
+				<p id="numberOfShuffledVideosText" style="margin-bottom: 6px; margin-top: 6px">You have shuffled 0 times until now.</p>
+			</div>
 			<!-- FYI end -->
 
 			<footer id="randomYoutubeVideoFooter">

static/html/welcome.html

@@ -23,13 +23,13 @@ <h3>To be able to use the extension, you <b>MUST</b></h3>
 				<br />
 				<br />
 				<h3>Before you can start and see 'Shuffle' buttons, you need to</h3>
-				<button id="reloadAllYouTubePagesButton" class="randomYoutubeVideoButton highlight-green" style="font-size: 20px">click me to reload all <i>YouTube.com</i> pages</button>
+				<button id="reloadAllYouTubePagesButton" class="randomYoutubeVideoButton highlight-green" style="font-size: 20px">click me to reload all <i>YouTube</i> pages</button>
 				<p>or do so manually.</p>
 				<p id="reloadText">
 					<br />
 					<br />
 					If you have any open YouTube pages, you will need to reload them to have 'Shuffle' buttons added to them.<br />
-					Don't have any videos running? Use the button above to automatically reload all YouTube pages open in your browser.
+					Use the button above to automatically reload all YouTube pages open in your browser, or do so manually.
 				</p>
 			</div>
 
@@ -38,16 +38,8 @@ <h3>Before you can start and see 'Shuffle' buttons, you need to</h3>
 			<h3>Customize your experience:</h3>
 			<button id="openOptionsPageButton" class="randomYoutubeVideoButton highlight-green" style="font-size: 20px">Open the options page</button>
 			<p>or open the popup for the same experience at any time.</p>
-			<br />
-			<p>
-				Some options are shown depending on the last channel you've visited - try opening the popup after doing so! <br />
-				Pin the popup to easily access the options at all times.
-			</p>
 
 			<br />
-			<br />
-			<p><i>Happy shuffling!</i></p>
-
 			<br />
 			<br />
 			<div id="shufflingHint">

static/manifest.json

@@ -1,8 +1,8 @@
 {
 	"name": "Random YouTube Video",
 	"description": "Customize, shuffle and play random videos from any YouTube channel.",
-	"version": "3.1.10",
-	"version_name": "3.1.10",
+	"version": "3.1.11",
+	"version_name": "3.1.11",
 	"manifest_version": 3,
 	"content_scripts": [
 		{

test/chromeStorage.test.js

@@ -18,7 +18,6 @@ describe('chromeStorage', function () {
 				for (let i = 0; i < Object.keys(configSyncDefaults).length; i++) {
 					expect(setArgs[i + 1]).to.eql([{ [Object.keys(configSyncDefaults)[i]]: Object.values(configSyncDefaults)[i] }]);
 				}
-				expect(setArgs[setArgs.length - 1]).to.eql([configSyncDefaults]);
 
 				expect(removeArgs).to.eql([["thisKeyShouldBeRemoved"]]);
 

test/compatibility.headful.test.js → test/compatibility/compatibility.headful.test.js

@@ -13,7 +13,7 @@ describe("headful compatibility", function () {
 		let browser, page;
 
 		before(async () => {
-			const extensionPath = join(__dirname, "../dist/chromium");
+			const extensionPath = join(__dirname, "../../dist/chromium");
 
 			browser = await puppeteer.launch({
 				headless: false, // Extensions only work in head-full mode

test/playlistPermutations.js

@@ -1,4 +1,4 @@
-import { configSyncDefaults } from "../src/config.js";
+import { configSyncDefaults } from "./testConfig.js";
 
 // ---------- Constants used by the permutations ----------
 // Keep these in sync with the values compared against in the tests
@@ -19,12 +19,6 @@ export const times = {
 }
 
 // ---------- Config ----------
-// Any overrides to the default that needs to be different for the tests
-const overrides = {
-	shuffleOpenAsPlaylistOption: true
-};
-const configSyncTestDefaults = { ...configSyncDefaults, ...overrides };
-
 // The configSync should always be the default, with these settings being changed
 // This allows us to not have to define something for every setting
 const configSyncModifiers = [
@@ -123,7 +117,7 @@ for (const useCustomApiKeyOption of configSyncModifiers[0]) {
 			// Exclude invalid combinations
 			if (!useCustomApiKeyOption && (customYoutubeApiKey !== null || databaseSharingEnabledOption)) continue;
 
-			let modifiedConfigSync = deepCopy(configSyncTestDefaults);
+			let modifiedConfigSync = deepCopy(configSyncDefaults);
 			modifiedConfigSync.useCustomApiKeyOption = useCustomApiKeyOption;
 			modifiedConfigSync.customYoutubeApiKey = customYoutubeApiKey;
 			modifiedConfigSync.databaseSharingEnabledOption = databaseSharingEnabledOption;
@@ -142,7 +136,7 @@ for (const shuffleOpenInNewTabOption of configSyncModifiers[3]) {
 			if (!shuffleOpenInNewTabOption && shuffleReUseNewTabOption) continue;
 			if (!shuffleReUseNewTabOption && shuffleTabId !== null) continue;
 
-			let modifiedConfigSync = deepCopy(configSyncTestDefaults);
+			let modifiedConfigSync = deepCopy(configSyncDefaults);
 			modifiedConfigSync.shuffleOpenInNewTabOption = shuffleOpenInNewTabOption;
 			modifiedConfigSync.shuffleReUseNewTabOption = shuffleReUseNewTabOption;
 			modifiedConfigSync.shuffleTabId = shuffleTabId;
@@ -156,7 +150,7 @@ configSyncPermutations.openInNewTabPermutations = openInNewTabPermutations;
 // Ignore shorts
 const ignoreShortsPermutations = [];
 for (const shuffleIgnoreShortsOption of configSyncModifiers[6]) {
-	let modifiedConfigSync = deepCopy(configSyncTestDefaults);
+	let modifiedConfigSync = deepCopy(configSyncDefaults);
 	modifiedConfigSync.shuffleIgnoreShortsOption = shuffleIgnoreShortsOption;
 
 	ignoreShortsPermutations.push(modifiedConfigSync);
@@ -167,7 +161,7 @@ configSyncPermutations.ignoreShortsPermutations = ignoreShortsPermutations;
 const openAsPlaylistPermutations = [];
 for (const shuffleOpenAsPlaylistOption of configSyncModifiers[7]) {
 	for (const shuffleNumVideosInPlaylist of configSyncModifiers[8]) {
-		let modifiedConfigSync = deepCopy(configSyncTestDefaults);
+		let modifiedConfigSync = deepCopy(configSyncDefaults);
 		// Always open in a new tab, so we can check the stub
 		modifiedConfigSync.shuffleOpenInNewTabOption = true;
 
@@ -189,7 +183,7 @@ for (const activeOption of configSyncModifiers[9]) {
 		// The allVideosOption and percentageOption do not error out if no value is set
 		if (["allVideosOption", "percentageOption"].includes(activeOption) && channelSettingsPermutation.type === "empty") continue;
 
-		let modifiedConfigSync = deepCopy(configSyncTestDefaults);
+		let modifiedConfigSync = deepCopy(configSyncDefaults);
 		let usedChannelSettingsPermutation = deepCopy(channelSettingsPermutation);
 
 		usedChannelSettingsPermutation.template.activeOption = activeOption;
@@ -578,7 +572,7 @@ export function needsDBInteraction(permutation) {
 }
 
 // Determine whether or not a permutation needs to interact with the YouTube API
-export function needsYTAPIInteraction(permutation, configSync = configSyncTestDefaults) {
+export function needsYTAPIInteraction(permutation, configSync = configSyncDefaults) {
 	const databaseSharing = configSync.databaseSharingEnabledOption;
 	if (databaseSharing) {
 		return (needsDBInteraction(permutation) &&