Merge tag 'v3.9.0' into v3.10.0

.wiki/Configuration.md

@@ -57,6 +57,11 @@ Location: `backend/config/default.json`
 | `customLoggingPerModule.[module].hideType` | Where `[module]` is a module name specify hideType as you would `defaultLogging.hideType` to overwrite default. |
 | `customLoggingPerModule.[module].blacklistedTerms` | Where `[module]` is a module name specify blacklistedTerms as you would `defaultLogging.blacklistedTerms` to overwrite default. |
 | `configVersion` | Version of the config. Every time the template changes, you should change your config accordingly and update the configVersion. |
+| `experimental.weight_stations` | Experimental option to use weights when autofilling stations, looking at the weight[X] tag for songs. If true, enables for all stations using default tag name. If an object, key msut b station id's, and if true enables for those stations with default weight tag name, or you can specify an alternative tag name by setting the value to a string. |
+| `experimental.weight_stations` | Experimental option to use weights when autofilling stations, looking at the weight[X] tag for songs. Must be an object, key must be station id's, value can be true or a string. If true, it uses tag name `weight`. If a string, it uses that string as the tag name. |
+| `experimental.queue_autofill_skip_last_x_played` | Experimental option to not autofill songs that were played recently. Must be an object, key must be station id's, value must be a number. The number equals how many songs it will consider recent and use when checking if it can autofill. |
+| `experimental.queue_add_before_autofilled` | Experimental option to have requested songs in queue appear before autofilled songs, based on the autofill number. Must be true or an object. If true, it's enabled for all stations. If an object, key must be station id's, value must be true to enable for that station. |
+| `experimental.disable_youtube_search` | Experimental option to disable YouTube search on the backend. If true, this option is enabled. |
 
 ## Frontend
 
@@ -80,7 +85,6 @@ Location: `frontend/dist/config/default.json`
 | `siteSettings.logo_small` | Path to the small white logo image, by default it is `/assets/favicon/mstile-144x144.png`. |
 | `siteSettings.sitename` | Should be the name of the site. |
 | `siteSettings.footerLinks` | Add custom links to footer by specifying `"title": "url"`, e.g. `"GitHub": "https://github.com/Musare/Musare"`. You can disable about, team and news links (but not the pages themselves) by setting them to false, e.g. `"about": false`. |
-| `siteSettings.mediasession` | Whether to enable mediasession functionality. |
 | `siteSettings.christmas` | Whether to enable christmas theming. |
 | `siteSettings.registrationDisabled` | If set to true, users can't register accounts. |
 | `messages.accountRemoval` | Message to return to users on account removal. |
@@ -93,6 +97,9 @@ Location: `frontend/dist/config/default.json`
 | `debug.version` | Allow the website/users to view the current package.json version. [^1] |
 | `skipConfigVersionCheck` | Skips checking if the config version is outdated or not. Should almost always be set to false. |
 | `configVersion` | Version of the config. Every time the template changes, you should change your config accordingly and update the configVersion. |
+| `experimental.changable_listen_mode` | Experimental option to allows users on stations to close the player. If true, enables for all stations. If an array of station id's, enable for just those stations. |
+| `experimental.disable_youtube_search` | Experimental option to disable YouTube search on the frontend. If true, this option is enabled. |
+| `experimental.media_session` | Experimental option to enable media session functionality. |
 
 [^1]: Requires a frontend restart to update. The data will be available from the frontend console and by the frontend code.
 

CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [v3.9.0] - 2023-01-01
+
+This release includes all changes from v3.9.0-rc1, in addition to the following.
+Upgrade instructions can be found at [.wiki/Upgrading](.wiki/Upgrading.md).
+
+### Fixed
+
+- fix: Draggable list items sometimes had wrong key
+- fix: Downgraded axios to 1.1.3 to fix Discogs API requests
+- fix: YouTube API_CALL job would improperly pause the current job
+whilst not waiting for child jobs
+- fix: Add/remove song to/from playlist could throw error if not an official song
+
+## [v3.9.0-rc1] - 2022-12-10
+
+Upgrade instructions can be found at [.wiki/Upgrading](.wiki/Upgrading.md).
+
+### Added
+
+- feat: Added station setting to configure skip vote threshold
+- feat: Added experimental configuration of song weight when autofilling station
+- feat: Added experimental configuration to prevent repeating recently played
+songs in stations
+- feat: Added experimental configuration to add user requested songs above
+autofilled songs in queue
+- feat: Added experimental station mode to allow users to close player
+- feat: Added ability to add songs to queue and playlist with YouTube URL
+- feat: Added experimental configuration to disable YouTube search
+
+### Changed
+
+- refactor: Renamed frontend configuration option `siteSettings.mediasession`
+to `experimental.media_session`
+
+### Fixed
+
+- fix: Unable to bulk update song genres and artists
+- fix: Auto suggest results blocking input
+- fix: useForm original value can be reactive
+- fix: Unable to open Edit Playlist with christmas theme in frontend production
+- fix: Blue profile picture becomes red with christmas theme
+- fix: Christmas lights can overlay and be overlayed by incorrect elements
+
 ## [v3.8.0] - 2022-11-11
 
 This release includes all changes from v3.8.0-rc1 and v3.8.0-rc2.

backend/config/template.json

@@ -114,5 +114,19 @@
 			]
 		}
 	},
-	"configVersion": 11
+	"configVersion": 11,
+	"experimental": {
+		"weight_stations": {
+			"STATION_ID": true,
+			"STATION_ID_2": "alternative_weight"
+		},
+		"queue_autofill_skip_last_x_played": {
+			"STATION_ID": 5,
+			"STATION_ID_2": 10
+		},
+		"queue_add_before_autofilled": [
+			"STATION_ID"
+		],
+		"disable_youtube_search": true
+	}
 }

backend/logic/actions/playlists.js

@@ -1243,7 +1243,7 @@ export default {
 					const { _id, youtubeId, title, artists, thumbnail } = newSong;
 					const { likes, dislikes } = ratings;
 
-					SongsModule.runJob("UPDATE_SONG", { songId: _id });
+					if (_id) SongsModule.runJob("UPDATE_SONG", { songId: _id });
 
 					if (playlist.type === "user-liked") {
 						CacheModule.runJob("PUB", {
@@ -1903,7 +1903,7 @@ export default {
 					if (ratings && (playlist.type === "user-liked" || playlist.type === "user-disliked")) {
 						const { likes, dislikes } = ratings;
 
-						SongsModule.runJob("UPDATE_SONG", { songId: _id });
+						if (_id) SongsModule.runJob("UPDATE_SONG", { songId: _id });
 
 						if (playlist.type === "user-liked") {
 							CacheModule.runJob("PUB", {

backend/logic/actions/songs.js

@@ -1280,8 +1280,13 @@ export default {
 							next(err);
 							return;
 						}
-						SongsModule.runJob("UPDATE_SONGS", { songIds: songsFound });
+						SongsModule.runJob("UPDATE_SONGS", { songIds: songsFound }, this)
-						next();
+							.then(() => {
+								next();
+							})
+							.catch(err => {
+								next(err);
+							});
 					});
 				}
 			],
@@ -1408,8 +1413,13 @@ export default {
 							next(err);
 							return;
 						}
-						SongsModule.runJob("UPDATE_SONGS", { songIds: songsFound });
+						SongsModule.runJob("UPDATE_SONGS", { songIds: songsFound })
-						next();
+							.then(() => {
+								next();
+							})
+							.catch(err => {
+								next(err);
+							});
 					});
 				}
 			],

backend/logic/actions/stations.js

@@ -296,7 +296,19 @@ CacheModule.runJob("SUB", {
 
 		stationModel.findOne(
 			{ _id: stationId },
-			["_id", "name", "displayName", "description", "type", "privacy", "owner", "requests", "autofill", "theme"],
+			[
+				"_id",
+				"name",
+				"displayName",
+				"description",
+				"type",
+				"privacy",
+				"owner",
+				"requests",
+				"autofill",
+				"theme",
+				"skipVoteThreshold"
+			],
 			(err, station) => {
 				WSModule.runJob("EMIT_TO_ROOMS", {
 					rooms: [`station.${stationId}`, `manage-station.${stationId}`, "admin.stations"],
@@ -820,7 +832,8 @@ export default {
 						owner: station.owner,
 						blacklist: station.blacklist,
 						theme: station.theme,
-						djs: station.djs
+						djs: station.djs,
+						skipVoteThreshold: station.skipVoteThreshold
 					};
 
 					StationsModule.userList[session.socketId] = station._id;
@@ -964,7 +977,8 @@ export default {
 						paused: station.paused,
 						currentSong: station.currentSong,
 						isFavorited: station.isFavorited,
-						djs: station.djs
+						djs: station.djs,
+						skipVoteThreshold: station.skipVoteThreshold
 					};
 
 					next(null, data);
@@ -1322,7 +1336,8 @@ export default {
 				},
 
 				(previousStation, next) => {
-					const { name, displayName, description, privacy, requests, autofill, theme } = newStation;
+					const { name, displayName, description, privacy, requests, autofill, theme, skipVoteThreshold } =
+						newStation;
 					const { enabled, limit, mode } = autofill;
 					// This object makes sure only certain properties can be changed by a user
 					const setObject = {
@@ -1334,7 +1349,8 @@ export default {
 						"autofill.enabled": enabled,
 						"autofill.limit": limit,
 						"autofill.mode": mode,
-						theme
+						theme,
+						skipVoteThreshold
 					};
 
 					stationModel.updateOne({ _id: stationId }, { $set: setObject }, { runValidators: true }, err => {

backend/logic/cache/index.js

@@ -386,6 +386,66 @@ class _CacheModule extends CoreClass {
 		});
 	}
 
+	/**
+	 * Adds a value to a list in Redis using LPUSH
+	 *
+	 * @param {object} payload - object containing payload
+	 * @param {string} payload.key -  name of the list
+	 * @param {*} payload.value - the value we want to set
+	 * @param {boolean} [payload.stringifyJson=true] - stringify 'value' if it's an Object or Array
+	 * @returns {Promise} - returns a promise (resolve, reject)
+	 */
+	LPUSH(payload) {
+		return new Promise((resolve, reject) => {
+			let { key, value } = payload;
+
+			if (mongoose.Types.ObjectId.isValid(key)) key = key.toString();
+			// automatically stringify objects and arrays into JSON
+			if (["object", "array"].includes(typeof value)) value = JSON.stringify(value);
+
+			CacheModule.client
+				.LPUSH(key, value)
+				.then(() => resolve())
+				.catch(err => reject(new Error(err)));
+		});
+	}
+
+	/**
+	 * Gets the length of a Redis list
+	 *
+	 * @param {object} payload - object containing payload
+	 * @param {string} payload.key -  name of the list
+	 * @returns {Promise} - returns a promise (resolve, reject)
+	 */
+	LLEN(payload) {
+		return new Promise((resolve, reject) => {
+			const { key } = payload;
+
+			CacheModule.client
+				.LLEN(key)
+				.then(len => resolve(len))
+				.catch(err => reject(new Error(err)));
+		});
+	}
+
+	/**
+	 * Removes an item from a list using RPOP
+	 *
+	 * @param {object} payload - object containing payload
+	 * @param {string} payload.key -  name of the list
+	 * @returns {Promise} - returns a promise (resolve, reject)
+	 */
+	RPOP(payload) {
+		return new Promise((resolve, reject) => {
+			const { key } = payload;
+
+			CacheModule.client
+				.RPOP(key)
+				.then(() => resolve())
+				.catch(err => reject(new Error(err)));
+		});
+	}
+
 	/**
 	 * Removes a value from a list in Redis
 	 *

backend/logic/db/index.js

@@ -13,7 +13,7 @@ const REQUIRED_DOCUMENT_VERSIONS = {
 	queueSong: 1,
 	report: 6,
 	song: 9,
-	station: 8,
+	station: 9,
 	user: 4,
 	youtubeApiRequest: 1,
 	youtubeVideo: 1,

backend/logic/db/schemas/station.js

@@ -54,5 +54,6 @@ export default {
 	theme: { type: String, enum: ["blue", "purple", "teal", "orange", "red"], default: "blue" },
 	blacklist: [{ type: mongoose.Schema.Types.ObjectId, ref: "playlists" }],
 	djs: [{ type: mongoose.Schema.Types.ObjectId, ref: "users" }],
-	documentVersion: { type: Number, default: 8, required: true }
+	skipVoteThreshold: { type: Number, min: 0, max: 100, default: 50, required: true },
+	documentVersion: { type: Number, default: 9, required: true }
 };

backend/logic/migration/migrations/migration24.js

@@ -0,0 +1,28 @@
+/**
+ * Migration 24
+ *
+ * Migration for setting station skip vote threshold
+ *
+ * @param {object} MigrationModule - the MigrationModule
+ * @returns {Promise} - returns promise
+ */
+export default async function migrate(MigrationModule) {
+	const stationModel = await MigrationModule.runJob("GET_MODEL", { modelName: "station" }, this);
+
+	return new Promise((resolve, reject) => {
+		this.log("INFO", `Migration 24. Updating stations with document version 8.`);
+		stationModel.updateMany(
+			{ documentVersion: 8 },
+			{
+				$set: {
+					documentVersion: 9,
+					skipVoteThreshold: 100
+				}
+			},
+			err => {
+				if (err) reject(new Error(err));
+				else resolve();
+			}
+		);
+	});
+}

backend/logic/stations.js

@@ -1,4 +1,5 @@
 import async from "async";
+import config from "config";
 
 import CoreClass from "../core";
 
@@ -12,6 +13,7 @@ let WSModule;
 let PlaylistsModule;
 let NotificationsModule;
 let MediaModule;
+let SongsModule;
 
 class _StationsModule extends CoreClass {
 	// eslint-disable-next-line require-jsdoc
@@ -34,6 +36,7 @@ class _StationsModule extends CoreClass {
 		PlaylistsModule = this.moduleManager.modules.playlists;
 		NotificationsModule = this.moduleManager.modules.notifications;
 		MediaModule = this.moduleManager.modules.media;
+		SongsModule = this.moduleManager.modules.songs;
 
 		this.userList = {};
 		this.usersPerStation = {};
@@ -533,7 +536,7 @@ class _StationsModule extends CoreClass {
 						} else next(null, playlist.songs, station);
 					},
 
-					(_playlistSongs, station, next) => {
+					async (_playlistSongs, station) => {
 						let playlistSongs = JSON.parse(JSON.stringify(_playlistSongs));
 						if (station.autofill.mode === "sequential") {
 							if (station.currentSongIndex <= playlistSongs.length) {
@@ -544,17 +547,77 @@ class _StationsModule extends CoreClass {
 						const currentRequests = station.queue.filter(song => !song.requestedBy).length;
 						const songsStillNeeded = station.autofill.limit - currentRequests;
 						const currentSongs = station.queue;
-						const currentYoutubeIds = station.queue.map(song => song.youtubeId);
+						let currentYoutubeIds = station.queue.map(song => song.youtubeId);
 						const songsToAdd = [];
 						let lastSongAdded = null;
 
 						if (station.currentSong && station.currentSong.youtubeId)
 							currentYoutubeIds.push(station.currentSong.youtubeId);
 
+						// Block for experiment: queue_autofill_skip_last_x_played
+						if (config.has(`experimental.queue_autofill_skip_last_x_played.${stationId}`)) {
+							const redisList = `experimental:queue_autofill_skip_last_x_played:${stationId}`;
+							// Get list of last x youtube video's played, to make sure they can't be autofilled
+							const listOfYoutubeIds = await CacheModule.runJob("LRANGE", { key: redisList }, this);
+							currentYoutubeIds = [...currentYoutubeIds, ...listOfYoutubeIds];
+						}
+
+						// Block for experiment: weight_stations
+						if (
+							config.has(`experimental.weight_stations.${stationId}`) &&
+							!!config.get(`experimental.weight_stations.${stationId}`)
+						) {
+							const weightTagName =
+								config.get(`experimental.weight_stations.${stationId}`) === true
+									? "weight"
+									: config.get(`experimental.weight_stations.${stationId}`);
+							const weightMap = {};
+							const getYoutubeIds = playlistSongs
+								.map(playlistSong => playlistSong.youtubeId)
+								.filter(youtubeId => currentYoutubeIds.indexOf(youtubeId) === -1);
+
+							const { songs } = await SongsModule.runJob("GET_SONGS", { youtubeIds: getYoutubeIds });
+
+							const weightRegex = new RegExp(`${weightTagName}\\[(\\d+)\\]`);
+
+							songs.forEach(song => {
+								let weight = 1;
+
+								song.tags.forEach(tag => {
+									const regexResponse = weightRegex.exec(tag);
+									if (regexResponse) weight = Number(regexResponse[1]);
+								});
+
+								if (Number.isNaN(weight)) weight = 1;
+								weight = Math.round(weight);
+								weight = Math.max(1, weight);
+								weight = Math.min(10000, weight);
+
+								weightMap[song.youtubeId] = weight;
+							});
+
+							const adjustedPlaylistSongs = [];
+
+							playlistSongs.forEach(playlistSong => {
+								Array.from({ length: weightMap[playlistSong.youtubeId] }).forEach(() => {
+									adjustedPlaylistSongs.push(playlistSong);
+								});
+							});
+
+							const { array } = await UtilsModule.runJob(
+								"SHUFFLE",
+								{ array: adjustedPlaylistSongs },
+								this
+							);
+
+							playlistSongs = array;
+						}
+
 						playlistSongs.every(song => {
 							if (
 								songsToAdd.length < songsStillNeeded &&
-								currentYoutubeIds.indexOf(song.youtubeId) === -1
+								currentYoutubeIds.indexOf(song.youtubeId) === -1 &&
+								!songsToAdd.find(songToAdd => songToAdd.youtubeId === song.youtubeId)
 							) {
 								lastSongAdded = song;
 								songsToAdd.push(song);
@@ -574,10 +637,10 @@ class _StationsModule extends CoreClass {
 							if (indexOfLastSong !== -1) currentSongIndex = indexOfLastSong;
 						}
 
-						next(null, currentSongs, songsToAdd, currentSongIndex);
+						return { currentSongs, songsToAdd, currentSongIndex };
 					},
 
-					(currentSongs, songsToAdd, currentSongIndex, next) => {
+					({ currentSongs, songsToAdd, currentSongIndex }, next) => {
 						const songs = [];
 						async.eachLimit(
 							songsToAdd.map(song => song.youtubeId),
@@ -830,7 +893,11 @@ class _StationsModule extends CoreClass {
 							err => {
 								if (err) return next(err);
 
-								if (!station.paused && users.length <= skipVotes) shouldSkip = true;
+								if (
+									!station.paused &&
+									Math.min(skipVotes, users.length) / users.length >= station.skipVoteThreshold / 100
+								)
+									shouldSkip = true;
 								return next(null, shouldSkip);
 							}
 						);
@@ -931,11 +998,46 @@ class _StationsModule extends CoreClass {
 							});
 					},
 
-					(song, station, next) => {
+					async (song, station) => {
 						const $set = {};
 
 						if (song === null) $set.currentSong = null;
 						else {
+							// Block for experiment: queue_autofill_skip_last_x_played
+							if (config.has(`experimental.queue_autofill_skip_last_x_played.${payload.stationId}`)) {
+								const redisList = `experimental:queue_autofill_skip_last_x_played:${payload.stationId}`;
+								const maxListLength = Number(
+									config.get(`experimental.queue_autofill_skip_last_x_played.${payload.stationId}`)
+								);
+
+								// Add youtubeId to list for this station in Redis list
+								await CacheModule.runJob(
+									"LPUSH",
+									{
+										key: `experimental:queue_autofill_skip_last_x_played:${payload.stationId}`,
+										value: song.youtubeId
+									},
+									this
+								);
+
+								const currentListLength = await CacheModule.runJob("LLEN", { key: redisList }, this);
+
+								// Removes oldest youtubeId from list for this station in Redis list
+								if (currentListLength > maxListLength) {
+									const amount = currentListLength - maxListLength;
+									const promises = Array.from({ length: amount }).map(() =>
+										CacheModule.runJob(
+											"RPOP",
+											{
+												key: `experimental:queue_autofill_skip_last_x_played:${payload.stationId}`
+											},
+											this
+										)
+									);
+									await Promise.all(promises);
+								}
+							}
+
 							$set.currentSong = {
 								_id: song._id,
 								youtubeId: song.youtubeId,
@@ -953,10 +1055,10 @@ class _StationsModule extends CoreClass {
 						$set.startedAt = Date.now();
 						$set.timePaused = 0;
 						if (station.paused) $set.pausedAt = Date.now();
-						next(null, $set, station);
+						return { $set, station };
 					},
 
-					($set, station, next) => {
+					({ $set, station }, next) => {
 						StationsModule.stationModel.updateOne({ _id: station._id }, { $set }, err => {
 							if (err) return next(err);
 
@@ -1804,14 +1906,14 @@ class _StationsModule extends CoreClass {
 					(song, station, next) => {
 						song.requestedBy = requestUser;
 						song.requestedAt = Date.now();
-						if (station.queue.length === 0) return next(null, song);
+						if (station.queue.length === 0) return next(null, song, station);
 						if (
 							requestUser &&
 							station.queue.filter(queueSong => queueSong.requestedBy === song.requestedBy).length >=
 								station.requests.limit
 						)
 							return next(`The max amount of songs per user is ${station.requests.limit}.`);
-						return next(null, song);
+						return next(null, song, station);
 					},
 
 					// (song, station, next) => {
@@ -1861,7 +1963,39 @@ class _StationsModule extends CoreClass {
 					// 	return next(null, song);
 					// },
 
-					(song, next) => {
+					(song, station, next) => {
+						if (config.has(`experimental.queue_add_before_autofilled`)) {
+							const queueAddBeforeAutofilled = config.get(`experimental.queue_add_before_autofilled`);
+
+							if (
+								queueAddBeforeAutofilled === true ||
+								(Array.isArray(queueAddBeforeAutofilled) &&
+									queueAddBeforeAutofilled.indexOf(stationId) !== -1)
+							) {
+								let position = station.queue.length;
+
+								if (station.autofill.enabled && station.queue.length >= station.autofill.limit) {
+									position = -station.autofill.limit;
+								}
+
+								StationsModule.stationModel.updateOne(
+									{ _id: stationId },
+									{
+										$push: {
+											queue: {
+												$each: [song],
+												$position: position
+											}
+										}
+									},
+									{ runValidators: true },
+									next
+								);
+
+								return;
+							}
+						}
+
 						StationsModule.stationModel.updateOne(
 							{ _id: stationId },
 							{ $push: { queue: song } },

backend/logic/youtube.js

@@ -216,6 +216,7 @@ class _YouTubeModule extends CoreClass {
 				})
 				.catch(err => {
 					YouTubeModule.log("ERROR", "SEARCH", `${err.message}`);
+					if (err.message === "Searching with YouTube is disabled.") return reject(err);
 					return reject(new Error("An error has occured. Please try again later."));
 				});
 		});
@@ -498,9 +499,9 @@ class _YouTubeModule extends CoreClass {
 				})
 				.catch(err => {
 					YouTubeModule.log("ERROR", "GET_CHANNEL_UPLOADS_PLAYLIST_ID", `${err.message}`);
-					if (err.message === "Request failed with status code 404") {
+					if (err.message === "Request failed with status code 404")
 						return reject(new Error("Channel not found. Is the channel public/unlisted?"));
-					}
+					if (err.message === "Searching with YouTube is disabled.") return reject(err);
 					return reject(new Error("An error has occured. Please try again later."));
 				});
 		});
@@ -588,9 +589,9 @@ class _YouTubeModule extends CoreClass {
 				(err, channelId) => {
 					if (err) {
 						YouTubeModule.log("ERROR", "GET_CHANNEL_ID_FROM_CUSTOM_URL", `${err.message || err}`);
-						if (err.message === "Request failed with status code 404") {
+						if (err.message === "Request failed with status code 404")
 							return reject(new Error("Channel not found. Is the channel public/unlisted?"));
-						}
+						if (err.message === "Searching with YouTube is disabled.") return reject(err);
 						return reject(new Error("An error has occured. Please try again later."));
 					}
 
@@ -714,9 +715,8 @@ class _YouTubeModule extends CoreClass {
 				})
 				.catch(err => {
 					YouTubeModule.log("ERROR", "GET_PLAYLIST_PAGE", `${err.message}`);
-					if (err.message === "Request failed with status code 404") {
+					if (err.message === "Request failed with status code 404")
 						return reject(new Error("Playlist not found. Is the playlist public/unlisted?"));
-					}
 					return reject(new Error("An error has occured. Please try again later."));
 				});
 		});
@@ -1014,6 +1014,14 @@ class _YouTubeModule extends CoreClass {
 		return new Promise((resolve, reject) => {
 			const { params } = payload;
 
+			if (
+				config.has("experimental.disable_youtube_search") &&
+				config.get("experimental.disable_youtube_search")
+			) {
+				reject(new Error("Searching with YouTube is disabled."));
+				return;
+			}
+
 			YouTubeModule.runJob(
 				"API_CALL",
 				{
@@ -1061,15 +1069,11 @@ class _YouTubeModule extends CoreClass {
 				youtubeApiRequest.save();
 
 				const { ...keylessParams } = payload.params;
-				CacheModule.runJob(
+				CacheModule.runJob("HSET", {
-					"HSET",
+					table: "youtubeApiRequestParams",
-					{
+					key: youtubeApiRequest._id.toString(),
-						table: "youtubeApiRequestParams",
+					value: JSON.stringify(keylessParams)
-						key: youtubeApiRequest._id.toString(),
+				}).then();
-						value: JSON.stringify(keylessParams)
-					},
-					this
-				).then();
 
 				YouTubeModule.apiCalls.push({ date: youtubeApiRequest.date, quotaCost });
 
@@ -1082,15 +1086,11 @@ class _YouTubeModule extends CoreClass {
 						if (response.data.error) {
 							reject(new Error(response.data.error));
 						} else {
-							CacheModule.runJob(
+							CacheModule.runJob("HSET", {
-								"HSET",
+								table: "youtubeApiRequestResults",
-								{
+								key: youtubeApiRequest._id.toString(),
-									table: "youtubeApiRequestResults",
+								value: JSON.stringify(response.data)
-									key: youtubeApiRequest._id.toString(),
+							}).then();
-									value: JSON.stringify(response.data)
-								},
-								this
-							).then();
 
 							resolve({ response });
 						}

frontend/dist/config/template.json

@@ -26,7 +26,6 @@
 		"footerLinks": {
 			"GitHub": "https://github.com/Musare/Musare"
 		},
-		"mediasession": false,
 		"christmas": false,
 		"registrationDisabled": false,
 		"githubAuthentication": false
@@ -46,5 +45,12 @@
 		"version": true
 	},
 	"skipConfigVersionCheck": false,
-	"configVersion": 13
+	"configVersion": 13,
+	"experimental": {
+		"changable_listen_mode": [
+			"STATION_ID"
+		],
+		"disable_youtube_search": true,
+		"media_session": false
+	}
 }

frontend/package.json

@@ -22,48 +22,48 @@
   "devDependencies": {
     "@pinia/testing": "^0.0.14",
     "@types/can-autoplay": "^3.0.1",
-    "@types/dompurify": "^2.3.4",
+    "@types/dompurify": "^2.4.0",
     "@types/marked": "^4.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/parser": "^5.45.0",
-    "@vitest/coverage-c8": "^0.24.1",
+    "@vitest/coverage-c8": "^0.24.5",
-    "@vue/test-utils": "^2.1.0",
+    "@vue/test-utils": "^2.2.4",
-    "eslint": "^8.25.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.6.0",
+    "eslint-plugin-vue": "^9.8.0",
-    "jsdom": "^20.0.1",
+    "jsdom": "^20.0.3",
     "less": "^4.1.3",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
-    "vite-plugin-dynamic-import": "^1.1.1",
+    "vite-plugin-dynamic-import": "^1.2.4",
-    "vitest": "^0.24.1",
+    "vitest": "^0.24.5",
     "vue-eslint-parser": "^9.1.0",
-    "vue-tsc": "^1.0.6"
+    "vue-tsc": "^1.0.10"
   },
   "dependencies": {
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
-    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue": "^3.2.0",
     "can-autoplay": "^3.0.2",
     "chart.js": "^3.9.1",
     "config": "^3.3.8",
     "date-fns": "^2.29.3",
-    "dompurify": "^2.4.0",
+    "dompurify": "^2.4.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "lofig": "^1.3.4",
-    "marked": "^4.1.1",
+    "marked": "^4.2.3",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.0.23",
+    "pinia": "^2.0.27",
     "toasters": "^2.3.1",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.3",
-    "vite": "^3.1.7",
+    "vite": "^3.2.4",
-    "vue": "^3.2.40",
+    "vue": "^3.2.45",
     "vue-chartjs": "^4.1.2",
     "vue-content-loader": "^2.0.1",
-    "vue-draggable-list": "^0.1.1",
+    "vue-draggable-list": "^0.1.3",
     "vue-i18n": "^9.2.2",
-    "vue-json-pretty": "^2.2.2",
+    "vue-json-pretty": "^2.2.3",
-    "vue-router": "^4.1.5",
+    "vue-router": "^4.1.6",
     "vue-tippy": "^6.0.0-alpha.65"
   }
 }

frontend/src/components/AutoSuggest.vue

@@ -72,7 +72,7 @@ const blurAutosuggestItem = event => {
 </script>
 
 <template>
-	<div>
+	<div class="autosuggest-container-wrapper">
 		<input
 			v-model="value"
 			class="input"
@@ -110,7 +110,7 @@ const blurAutosuggestItem = event => {
 </template>
 
 <style lang="less" scoped>
-.night-mode .autosuggest-container {
+.night-mode .autosuggest-container-wrapper .autosuggest-container {
 	background-color: var(--dark-grey) !important;
 
 	.autosuggest-item {
@@ -125,40 +125,44 @@ const blurAutosuggestItem = event => {
 	}
 }
 
-.autosuggest-container {
+.autosuggest-container-wrapper {
-	position: absolute;
+	position: relative;
-	background: var(--white);
+
-	width: calc(100% + 1px);
+	.autosuggest-container {
-	top: 35px;
+		position: absolute;
-	z-index: 200;
+		background: var(--white);
-	overflow: auto;
+		width: calc(100% + 1px);
-	max-height: 98px;
+		top: 35px;
-	clear: both;
+		z-index: 200;
-
+		overflow: auto;
-	.autosuggest-item {
+		max-height: 98px;
-		padding: 8px;
+		clear: both;
-		display: block;
+
-		border: 1px solid var(--light-grey-2);
+		.autosuggest-item {
-		margin-top: -1px;
+			padding: 8px;
-		line-height: 16px;
+			display: block;
-		cursor: pointer;
+			border: 1px solid var(--light-grey-2);
-		-webkit-user-select: none;
+			margin-top: -1px;
-		-ms-user-select: none;
+			line-height: 16px;
-		-moz-user-select: none;
+			cursor: pointer;
-		user-select: none;
+			-webkit-user-select: none;
-	}
+			-ms-user-select: none;
-
+			-moz-user-select: none;
-	.autosuggest-item:hover,
+			user-select: none;
-	.autosuggest-item:focus {
+		}
-		background-color: var(--light-grey);
+
-	}
+		.autosuggest-item:hover,
-
+		.autosuggest-item:focus {
-	.autosuggest-item:first-child {
+			background-color: var(--light-grey);
-		border-top: none;
+		}
-	}
+
-
+		.autosuggest-item:first-child {
-	.autosuggest-item:last-child {
+			border-top: none;
-		border-radius: 0 0 @border-radius @border-radius;
+		}
+
+		.autosuggest-item:last-child {
+			border-radius: 0 0 @border-radius @border-radius;
+		}
 	}
 }
 </style>

frontend/src/components/ChristmasLights.vue

@@ -59,7 +59,7 @@ const { loggedIn } = storeToRefs(userAuthStore);
 			border-top-right-radius: 50%;
 			border-bottom-left-radius: 50%;
 			border-bottom-right-radius: 50%;
-			z-index: 2;
+			z-index: 11;
 			animation: christmas-lights 30s ease infinite;
 
 			&::before {
@@ -152,7 +152,7 @@ const { loggedIn } = storeToRefs(userAuthStore);
 		.christmas-wire {
 			flex: 1;
 			margin-bottom: 15px;
-			z-index: 1;
+			z-index: 10;
 
 			border-top: 2px solid var(--primary-color);
 			border-radius: 50%;

frontend/src/components/MainFooter.vue

@@ -46,7 +46,7 @@ onMounted(async () => {
 		<div class="container">
 			<div class="footer-content">
 				<div id="footer-copyright">
-					<p>© Copyright Musare 2015 - 2022</p>
+					<p>© Copyright Musare 2015 - 2023</p>
 				</div>
 				<router-link id="footer-logo" to="/">
 					<img

frontend/src/components/MainHeader.vue

@@ -193,7 +193,7 @@ onMounted(async () => {
 	position: relative;
 	background-color: var(--primary-color);
 	height: 64px;
-	z-index: 3;
+	z-index: 100;
 
 	&.transparent {
 		background-color: transparent !important;
@@ -243,7 +243,7 @@ onMounted(async () => {
 		}
 
 		span {
-			background-color: var(--white);
+			background-color: var(--white) !important;
 			display: block;
 			height: 1px;
 			left: 50%;
@@ -331,6 +331,7 @@ onMounted(async () => {
 			top: 100%;
 			position: absolute;
 			background: var(--white);
+			z-index: 100;
 		}
 
 		.nav-menu.is-active {

frontend/src/components/Modal.vue

@@ -41,7 +41,9 @@ onMounted(async () => {
 				<span class="delete material-icons" @click="closeCurrentModal()"
 					>highlight_off</span
 				>
-				<christmas-lights v-if="christmas" small :lights="5" />
+				<Transition>
+					<christmas-lights v-if="christmas" small :lights="5" />
+				</Transition>
 			</header>
 			<section class="modal-card-body">
 				<slot name="body" />

frontend/src/components/ProfilePicture.vue

@@ -67,7 +67,7 @@ onMounted(async () => {
 		}
 
 		&.blue {
-			background-color: var(--primary-color);
+			background-color: var(--blue);
 			color: var(--white);
 		}
 		&.orange {

frontend/src/components/Queue.vue

@@ -141,7 +141,7 @@ onUpdated(() => {
 		>
 			<draggable-list
 				v-model:list="queue"
-				item-key="_id"
+				item-key="youtubeId"
 				@start="drag = true"
 				@end="drag = false"
 				@update="repositionSongInQueue"
@@ -153,6 +153,7 @@ onUpdated(() => {
 						:requested-by="true"
 						:disabled-actions="[]"
 						:ref="el => (songItems[`song-item-${index}`] = el)"
+						:key="`queue-song-item-${element.youtubeId}`"
 					>
 						<template
 							v-if="hasPermission('stations.queue.reposition')"

frontend/src/components/Request.vue

@@ -6,6 +6,7 @@ import { useStationStore } from "@/stores/station";
 import { useManageStationStore } from "@/stores/manageStation";
 import { useSearchYoutube } from "@/composables/useSearchYoutube";
 import { useSearchMusare } from "@/composables/useSearchMusare";
+import { useYoutubeDirect } from "@/composables/useYoutubeDirect";
 
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
@@ -25,6 +26,7 @@ const props = defineProps({
 
 const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
 const { musareSearch, searchForMusareSongs } = useSearchMusare();
+const { youtubeDirect, addToQueue } = useYoutubeDirect();
 
 const { socket } = useWebsocketsStore();
 const stationStore = useStationStore();
@@ -35,6 +37,7 @@ const manageStationStore = useManageStationStore({
 const tab = ref("songs");
 const sitename = ref("Musare");
 const tabs = ref({});
+const experimentalDisableYoutubeSearch = ref(false);
 
 const station = computed({
 	get() {
@@ -116,6 +119,16 @@ const addSongToQueue = (youtubeId: string, index?: number) => {
 onMounted(async () => {
 	sitename.value = await lofig.get("siteSettings.sitename");
 
+	lofig.get("experimental").then(experimental => {
+		if (
+			experimental &&
+			Object.hasOwn(experimental, "disable_youtube_search") &&
+			experimental.disable_youtube_search
+		) {
+			experimentalDisableYoutubeSearch.value = true;
+		}
+	});
+
 	showTab("songs");
 });
 </script>
@@ -221,7 +234,34 @@ onMounted(async () => {
 					</div>
 				</div>
 
-				<div class="youtube-search">
+				<div class="youtube-direct">
+					<label class="label"> Add a YouTube song from a URL </label>
+					<div class="control is-grouped input-with-button">
+						<p class="control is-expanded">
+							<input
+								class="input"
+								type="text"
+								placeholder="Enter your YouTube song URL here..."
+								v-model="youtubeDirect"
+								@keyup.enter="addToQueue(station._id)"
+							/>
+						</p>
+						<p class="control">
+							<a
+								class="button is-info"
+								@click="addToQueue(station._id)"
+								><i class="material-icons icon-with-button"
+									>add</i
+								>Add</a
+							>
+						</p>
+					</div>
+				</div>
+
+				<div
+					class="youtube-search"
+					v-if="!experimentalDisableYoutubeSearch"
+				>
 					<label class="label"> Search for a song on YouTube </label>
 					<div class="control is-grouped input-with-button">
 						<p class="control is-expanded">

frontend/src/components/RunJobDropdown.vue

@@ -75,7 +75,7 @@ const runJob = job => {
 			<div class="nav-dropdown-items" v-if="jobs.length > 0">
 				<quick-confirm
 					v-for="(job, index) in jobs"
-					:key="`job-${index}`"
+					:key="`job-${index}-${job.name}-${job.id}`"
 					placement="top"
 					@confirm="runJob(job)"
 				>

frontend/src/components/SongItem.vue

@@ -172,7 +172,7 @@ onUnmounted(() => {
 					<strong>
 						<user-link
 							v-if="song.requestedBy"
-							:key="song._id"
+							:key="song.youtubeId"
 							:user-id="song.requestedBy"
 						/>
 						<span v-else>station</span>

frontend/src/components/__snapshots__/Modal.spec.ts.snap

@@ -8,7 +8,9 @@ exports[`Modal component > renders slots 1`] = `
     <header class=\\"modal-card-head\\">
       <div>Toggle Mobile Sidebar Slot</div>
       <h2 class=\\"modal-card-title is-marginless\\">Modal</h2><span class=\\"delete material-icons\\">highlight_off</span>
-      <!--v-if-->
+      <transition-stub appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+        <!--v-if-->
+      </transition-stub>
     </header>
     <section class=\\"modal-card-body\\">
       <div>Body Slot</div>

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -3,6 +3,7 @@ import { defineAsyncComponent, ref, watch, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { useSearchYoutube } from "@/composables/useSearchYoutube";
 import { useSearchMusare } from "@/composables/useSearchMusare";
+import { useYoutubeDirect } from "@/composables/useYoutubeDirect";
 import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
 const SongItem = defineAsyncComponent(
@@ -20,6 +21,7 @@ const editPlaylistStore = useEditPlaylistStore({ modalUuid: props.modalUuid });
 const { playlist } = storeToRefs(editPlaylistStore);
 
 const sitename = ref("Musare");
+const experimentalDisableYoutubeSearch = ref(false);
 
 const {
 	youtubeSearch,
@@ -36,6 +38,8 @@ const {
 	addMusareSongToPlaylist
 } = useSearchMusare();
 
+const { youtubeDirect, addToPlaylist } = useYoutubeDirect();
+
 watch(
 	() => youtubeSearch.value.songs.results,
 	songs => {
@@ -89,6 +93,16 @@ watch(
 
 onMounted(async () => {
 	sitename.value = await lofig.get("siteSettings.sitename");
+
+	lofig.get("experimental").then(experimental => {
+		if (
+			experimental &&
+			Object.hasOwn(experimental, "disable_youtube_search") &&
+			experimental.disable_youtube_search
+		) {
+			experimentalDisableYoutubeSearch.value = true;
+		}
+	});
 });
 </script>
 
@@ -164,7 +178,25 @@ onMounted(async () => {
 
 		<br v-if="musareSearch.results.length > 0" />
 
-		<div>
+		<label class="label"> Add a YouTube song from a URL </label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					placeholder="Enter your YouTube song URL here..."
+					v-model="youtubeDirect"
+					@keyup.enter="addToPlaylist(playlist._id)"
+				/>
+			</p>
+			<p class="control">
+				<a class="button is-info" @click="addToPlaylist(playlist._id)"
+					><i class="material-icons icon-with-button">add</i>Add</a
+				>
+			</p>
+		</div>
+
+		<div v-if="!experimentalDisableYoutubeSearch">
 			<label class="label"> Search for a song from YouTube </label>
 			<div class="control is-grouped input-with-button">
 				<p class="control is-expanded">

frontend/src/components/modals/EditPlaylist/index.vue

@@ -404,7 +404,7 @@ onBeforeUnmount(() => {
 						<draggable-list
 							v-if="playlistSongs.length > 0"
 							v-model:list="playlistSongs"
-							item-key="_id"
+							item-key="youtubeId"
 							@start="drag = true"
 							@end="drag = false"
 							@update="repositionSong"
@@ -420,6 +420,7 @@ onBeforeUnmount(() => {
 											(songItems[`song-item-${index}`] =
 												el)
 									"
+									:key="`playlist-song-${element.youtubeId}`"
 								>
 									<template #tippyActions>
 										<i

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
+import { onMounted, ref } from "vue";
 
 import { useEditSongStore } from "@/stores/editSong";
 
 import { useSearchYoutube } from "@/composables/useSearchYoutube";
+import { useYoutubeDirect } from "@/composables/useYoutubeDirect";
 
 import SearchQueryItem from "../../../SearchQueryItem.vue";
 
@@ -19,74 +21,112 @@ const { form, newSong } = storeToRefs(editSongStore);
 const { updateYoutubeId } = editSongStore;
 
 const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
+const { youtubeDirect, getYoutubeVideoId } = useYoutubeDirect();
 
-const selectSong = result => {
+const experimentalDisableYoutubeSearch = ref(false);
-	updateYoutubeId(result.id);
 
-	if (newSong)
+const selectSong = (youtubeId, result = null) => {
+	updateYoutubeId(youtubeId);
+
+	if (newSong && result)
 		form.value.setValue({
 			title: result.title,
 			thumbnail: result.thumbnail
 		});
 };
+
+onMounted(() => {
+	lofig.get("experimental").then(experimental => {
+		if (
+			experimental &&
+			Object.hasOwn(experimental, "disable_youtube_search") &&
+			experimental.disable_youtube_search
+		) {
+			experimentalDisableYoutubeSearch.value = true;
+		}
+	});
+});
 </script>
 
 <template>
 	<div class="youtube-tab">
-		<label class="label"> Search for a song from YouTube </label>
+		<label class="label"> Add a YouTube song from a URL </label>
 		<div class="control is-grouped input-with-button">
 			<p class="control is-expanded">
 				<input
 					class="input"
 					type="text"
-					placeholder="Enter your YouTube query here..."
+					placeholder="Enter your YouTube song URL here..."
-					v-model="youtubeSearch.songs.query"
+					v-model="youtubeDirect"
-					autofocus
+					@keyup.enter="selectSong(getYoutubeVideoId())"
-					@keyup.enter="searchForSongs()"
 				/>
 			</p>
 			<p class="control">
-				<button
+				<a
 					class="button is-info"
-					@click.prevent="searchForSongs()"
+					@click="selectSong(getYoutubeVideoId())"
+					><i class="material-icons icon-with-button">add</i>Add</a
 				>
-					<i class="material-icons icon-with-button">search</i>Search
-				</button>
 			</p>
 		</div>
 
-		<div
+		<div v-if="!experimentalDisableYoutubeSearch">
-			v-if="youtubeSearch.songs.results.length > 0"
+			<label class="label"> Search for a song from YouTube </label>
-			id="song-query-results"
+			<div class="control is-grouped input-with-button">
-		>
+				<p class="control is-expanded">
-			<search-query-item
+					<input
-				v-for="result in youtubeSearch.songs.results"
+						class="input"
-				:key="result.id"
+						type="text"
-				:result="result"
+						placeholder="Enter your YouTube query here..."
+						v-model="youtubeSearch.songs.query"
+						autofocus
+						@keyup.enter="searchForSongs()"
+					/>
+				</p>
+				<p class="control">
+					<button
+						class="button is-info"
+						@click.prevent="searchForSongs()"
+					>
+						<i class="material-icons icon-with-button">search</i
+						>Search
+					</button>
+				</p>
+			</div>
+
+			<div
+				v-if="youtubeSearch.songs.results.length > 0"
+				id="song-query-results"
 			>
-				<template #actions>
+				<search-query-item
-					<i
+					v-for="result in youtubeSearch.songs.results"
-						class="material-icons icon-selected"
+					:key="result.id"
-						v-if="result.id === form.inputs.youtubeId.value"
+					:result="result"
-						key="selected"
+				>
-						>radio_button_checked
+					<template #actions>
-					</i>
+						<i
-					<i
+							class="material-icons icon-selected"
-						class="material-icons icon-not-selected"
+							v-if="result.id === form.inputs.youtubeId.value"
-						v-else
+							key="selected"
-						@click.prevent="selectSong(result)"
+							>radio_button_checked
-						key="not-selected"
+						</i>
-						>radio_button_unchecked
+						<i
-					</i>
+							class="material-icons icon-not-selected"
-				</template>
+							v-else
-			</search-query-item>
+							@click.prevent="selectSong(result.id, result)"
-
+							key="not-selected"
-			<button
+							>radio_button_unchecked
-				class="button is-primary load-more-button"
+						</i>
-				@click.prevent="loadMoreSongs()"
+					</template>
-			>
+				</search-query-item>
-				Load more...
+
-			</button>
+				<button
+					class="button is-primary load-more-button"
+					@click.prevent="loadMoreSongs()"
+				>
+					Load more...
+				</button>
+			</div>
 		</div>
 	</div>
 </template>

frontend/src/components/modals/ImportAlbum.vue

@@ -628,12 +628,12 @@ onBeforeUnmount(() => {
 					<draggable-list
 						v-if="playlistSongs.length > 0"
 						v-model:list="playlistSongs"
-						item-key="_id"
+						item-key="youtubeId"
 						:group="`import-album-${modalUuid}-songs`"
 					>
 						<template #item="{ element }">
 							<song-item
-								:key="`playlist-song-${element._id}`"
+								:key="`playlist-song-${element.youtubeId}`"
 								:song="element"
 							>
 							</song-item>
@@ -657,12 +657,12 @@ onBeforeUnmount(() => {
 						<div class="track-box-songs-drag-area">
 							<draggable-list
 								v-model:list="trackSongs[index]"
-								item-key="_id"
+								item-key="youtubeId"
 								:group="`import-album-${modalUuid}-songs`"
 							>
 								<template #item="{ element }">
 									<song-item
-										:key="`track-song-${element._id}`"
+										:key="`track-song-${element.youtubeId}`"
 										:song="element"
 									>
 									</song-item>

frontend/src/components/modals/ManageStation/Settings.vue

@@ -60,6 +60,7 @@ const { inputs, save, setOriginalValue } = useForm(
 		},
 		theme: station.value.theme,
 		privacy: station.value.privacy,
+		skipVoteThreshold: station.value.skipVoteThreshold,
 		requestsEnabled: station.value.requests.enabled,
 		requestsAccess: station.value.requests.access,
 		requestsLimit: station.value.requests.limit,
@@ -77,6 +78,7 @@ const { inputs, save, setOriginalValue } = useForm(
 				description: values.description,
 				theme: values.theme,
 				privacy: values.privacy,
+				skipVoteThreshold: values.skipVoteThreshold,
 				requests: {
 					...oldStation.requests,
 					enabled: values.requestsEnabled,
@@ -121,6 +123,7 @@ watch(station, value => {
 		description: value.description,
 		theme: value.theme,
 		privacy: value.privacy,
+		skipVoteThreshold: value.skipVoteThreshold,
 		requestsEnabled: value.requests.enabled,
 		requestsAccess: value.requests.access,
 		requestsLimit: value.requests.limit,
@@ -181,6 +184,24 @@ watch(station, value => {
 				</div>
 			</div>
 
+			<div class="small-section">
+				<label class="label">
+					Skip Vote Threshold
+					<info-icon
+						tooltip="The % of logged-in station users required to vote to skip a song"
+					/>
+				</label>
+				<div class="control is-expanded input-slider">
+					<input
+						v-model="inputs['skipVoteThreshold'].value"
+						type="range"
+						min="0"
+						max="100"
+					/>
+					<span>{{ inputs["skipVoteThreshold"].value }}%</span>
+				</div>
+			</div>
+
 			<div
 				class="requests-settings"
 				:class="{ enabled: inputs['requestsEnabled'].value }"
@@ -342,6 +363,107 @@ watch(station, value => {
 		}
 	}
 
+	.input-slider {
+		display: flex;
+
+		input[type="range"] {
+			-webkit-appearance: none;
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			min-width: 100px;
+			background: transparent;
+		}
+
+		input[type="range"]:focus {
+			outline: none;
+		}
+
+		input[type="range"]::-webkit-slider-runnable-track {
+			width: 100%;
+			height: 5.2px;
+			cursor: pointer;
+			box-shadow: 0;
+			background: var(--light-grey-3);
+			border-radius: @border-radius;
+			border: 0;
+		}
+
+		input[type="range"]::-webkit-slider-thumb {
+			box-shadow: 0;
+			border: 0;
+			height: 19px;
+			width: 19px;
+			border-radius: 100%;
+			background: var(--primary-color);
+			cursor: pointer;
+			-webkit-appearance: none;
+			margin-top: -6.5px;
+		}
+
+		input[type="range"]::-moz-range-track {
+			width: 100%;
+			height: 5.2px;
+			cursor: pointer;
+			box-shadow: 0;
+			background: var(--light-grey-3);
+			border-radius: @border-radius;
+			border: 0;
+		}
+
+		input[type="range"]::-moz-range-thumb {
+			box-shadow: 0;
+			border: 0;
+			height: 19px;
+			width: 19px;
+			border-radius: 100%;
+			background: var(--primary-color);
+			cursor: pointer;
+			-webkit-appearance: none;
+			margin-top: -6.5px;
+		}
+		input[type="range"]::-ms-track {
+			width: 100%;
+			height: 5.2px;
+			cursor: pointer;
+			box-shadow: 0;
+			background: var(--light-grey-3);
+			border-radius: @border-radius;
+		}
+
+		input[type="range"]::-ms-fill-lower {
+			background: var(--light-grey-3);
+			border: 0;
+			border-radius: 0;
+			box-shadow: 0;
+		}
+
+		input[type="range"]::-ms-fill-upper {
+			background: var(--light-grey-3);
+			border: 0;
+			border-radius: 0;
+			box-shadow: 0;
+		}
+
+		input[type="range"]::-ms-thumb {
+			box-shadow: 0;
+			border: 0;
+			height: 15px;
+			width: 15px;
+			border-radius: 100%;
+			background: var(--primary-color);
+			cursor: pointer;
+			-webkit-appearance: none;
+			margin-top: 1.5px;
+		}
+
+		& > span {
+			min-width: 40px;
+			margin-left: 10px;
+			text-align: center;
+		}
+	}
+
 	.requests-settings,
 	.autofill-settings {
 		display: flex;

frontend/src/composables/useForm.ts

@@ -96,7 +96,7 @@ export const useForm = (
 				name,
 				{
 					...input,
-					originalValue: input.value,
+					originalValue: JSON.parse(JSON.stringify(input.value)),
 					sourceChanged: false
 				}
 			])

frontend/src/composables/useYoutubeDirect.ts

@@ -0,0 +1,90 @@
+import { ref } from "vue";
+import Toast from "toasters";
+import { AddSongToPlaylistResponse } from "@musare_types/actions/PlaylistsActions";
+import { useWebsocketsStore } from "@/stores/websockets";
+
+const youtubeVideoUrlRegex =
+	/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=)?([\w-]{11})$/;
+const youtubeVideoIdRegex = /^([\w-]{11})$/;
+
+export const useYoutubeDirect = () => {
+	const youtubeDirect = ref("");
+
+	const { socket } = useWebsocketsStore();
+
+	const getYoutubeVideoId = () => {
+		const youtubeVideoUrlParts = youtubeVideoUrlRegex.exec(
+			youtubeDirect.value.trim()
+		);
+		if (youtubeVideoUrlParts) {
+			// eslint-disable-next-line prefer-destructuring
+			return youtubeVideoUrlParts[5];
+		}
+
+		const youtubeVideoIdParts = youtubeVideoIdRegex.exec(
+			youtubeDirect.value.trim()
+		);
+		if (youtubeVideoIdParts) {
+			// eslint-disable-next-line prefer-destructuring
+			return youtubeVideoIdParts[1];
+		}
+
+		return null;
+	};
+
+	const addToPlaylist = (playlistId: string) => {
+		const youtubeVideoId = getYoutubeVideoId();
+
+		if (!youtubeVideoId)
+			new Toast(
+				`Could not determine the YouTube video id from the provided URL.`
+			);
+		else {
+			socket.dispatch(
+				"playlists.addSongToPlaylist",
+				false,
+				youtubeVideoId,
+				playlistId,
+				(res: AddSongToPlaylistResponse) => {
+					if (res.status !== "success")
+						new Toast(`Error: ${res.message}`);
+					else {
+						new Toast(res.message);
+						youtubeDirect.value = "";
+					}
+				}
+			);
+		}
+	};
+
+	const addToQueue = (stationId: string) => {
+		const youtubeVideoId = getYoutubeVideoId();
+
+		if (!youtubeVideoId)
+			new Toast(
+				`Could not determine the YouTube video id from the provided URL.`
+			);
+		else {
+			socket.dispatch(
+				"stations.addToQueue",
+				stationId,
+				youtubeVideoId,
+				res => {
+					if (res.status !== "success")
+						new Toast(`Error: ${res.message}`);
+					else {
+						new Toast(res.message);
+						youtubeDirect.value = "";
+					}
+				}
+			);
+		}
+	};
+
+	return {
+		youtubeDirect,
+		addToPlaylist,
+		addToQueue,
+		getYoutubeVideoId
+	};
+};

frontend/src/index.html

@@ -19,7 +19,7 @@
 		/>
 		<meta
 			name="copyright"
-			content="© Copyright Musare 2015-2022 All Right Reserved"
+			content="© Copyright Musare 2015-2023 All Right Reserved"
 		/>
 
 		<link

frontend/src/main.ts

@@ -408,7 +408,14 @@ createSocket().then(async socket => {
 		});
 	});
 
-	if (await lofig.get("siteSettings.mediasession")) ms.init();
+	lofig.get("experimental").then(experimental => {
+		if (
+			experimental &&
+			Object.hasOwn(experimental, "media_session") &&
+			experimental.media_session
+		)
+			ms.init();
+	});
 
 	app.mount("#root");
 });

frontend/src/pages/Station/index.vue

@@ -86,9 +86,13 @@ const beforeMediaModalLocalPausedLock = ref(false);
 const beforeMediaModalLocalPaused = ref(null);
 const persistentToastCheckerInterval = ref(null);
 const persistentToasts = ref([]);
-const mediasession = ref(false);
 const christmas = ref(false);
 const sitename = ref("Musare");
+// Experimental options
+const experimentalChangableListenModeEnabled = ref(false);
+const experimentalChangableListenMode = ref("listen_and_participate"); // Can be either listen_and_participate or participate
+const experimentalMediaSession = ref(false);
+// End experimental options
 // NEW
 const videoLoading = ref();
 const startedAt = ref();
@@ -285,6 +289,7 @@ const resizeSeekerbar = () => {
 		(getTimeElapsed() / 1000 / currentSong.value.duration) * 100;
 };
 const calculateTimeElapsed = () => {
+	if (experimentalChangableListenMode.value === "participate") return;
 	if (
 		playerReady.value &&
 		!noSong.value &&
@@ -403,6 +408,7 @@ const toggleSkipVote = (message?) => {
 	});
 };
 const youtubeReady = () => {
+	if (experimentalChangableListenMode.value === "participate") return;
 	if (!player.value) {
 		ms.setYTReady(false);
 		player.value = new window.YT.Player("stationPlayer", {
@@ -575,7 +581,7 @@ const setCurrentSong = data => {
 
 	clearTimeout(window.stationNextSongTimeout);
 
-	if (mediasession.value) updateMediaSessionData(_currentSong);
+	if (experimentalMediaSession.value) updateMediaSessionData(_currentSong);
 
 	startedAt.value = _startedAt;
 	updateStationPaused(_paused);
@@ -697,7 +703,8 @@ const changeVolume = () => {
 	}
 };
 const resumeLocalPlayer = () => {
-	if (mediasession.value) updateMediaSessionData(currentSong.value);
+	if (experimentalMediaSession.value)
+		updateMediaSessionData(currentSong.value);
 	if (!noSong.value) {
 		if (playerReady.value) {
 			player.value.seekTo(
@@ -708,7 +715,8 @@ const resumeLocalPlayer = () => {
 	}
 };
 const pauseLocalPlayer = () => {
-	if (mediasession.value) updateMediaSessionData(currentSong.value);
+	if (experimentalMediaSession.value)
+		updateMediaSessionData(currentSong.value);
 	if (!noSong.value) {
 		timeBeforePause.value = getTimeElapsed();
 		if (playerReady.value) player.value.pauseVideo();
@@ -809,9 +817,11 @@ const resetKeyboardShortcutsHelper = () => {
 const sendActivityWatchVideoData = () => {
 	if (
 		!stationPaused.value &&
-		!localPaused.value &&
+		(!localPaused.value ||
+			experimentalChangableListenMode.value === "participate") &&
 		!noSong.value &&
-		player.value.getPlayerState() === window.YT.PlayerState.PLAYING
+		(experimentalChangableListenMode.value === "participate" ||
+			player.value.getPlayerState() === window.YT.PlayerState.PLAYING)
 	) {
 		if (activityWatchVideoLastStatus.value !== "playing") {
 			activityWatchVideoLastStatus.value = "playing";
@@ -845,11 +855,17 @@ const sendActivityWatchVideoData = () => {
 					  ),
 			source: `station#${station.value.name}`,
 			hostname: window.location.hostname,
-			playerState: Object.keys(window.YT.PlayerState).find(
+			playerState:
-				key =>
+				experimentalChangableListenMode.value === "participate"
-					window.YT.PlayerState[key] === player.value.getPlayerState()
+					? "none"
-			),
+					: Object.keys(window.YT.PlayerState).find(
-			playbackRate: playbackRate.value
+							key =>
+								window.YT.PlayerState[key] ===
+								player.value.getPlayerState()
+					  ),
+			playbackRate: playbackRate.value,
+			experimentalChangableListenMode:
+				experimentalChangableListenMode.value
 		};
 
 		aw.sendVideoData(videoData);
@@ -858,6 +874,26 @@ const sendActivityWatchVideoData = () => {
 	}
 };
 
+const experimentalChangableListenModeChange = newMode => {
+	experimentalChangableListenMode.value = newMode;
+	localStorage.setItem(
+		`experimental_changeable_listen_mode_${station.value._id}`,
+		newMode
+	);
+
+	if (newMode === "participate") {
+		// Destroy the YouTube player
+		if (player.value) {
+			player.value.destroy();
+			player.value = null;
+			playerReady.value = false;
+		}
+	} else {
+		// Recreate the YouTube player
+		youtubeReady();
+	}
+};
+
 watch(
 	() => autoRequest.value.length,
 	() => {
@@ -897,6 +933,8 @@ onMounted(async () => {
 		);
 	}, 1000);
 
+	const experimental = await lofig.get("experimental");
+
 	socket.onConnect(() => {
 		clearTimeout(window.stationNextSongTimeout);
 
@@ -922,6 +960,28 @@ onMounted(async () => {
 					djs
 				} = res.data;
 
+				if (experimental && experimental.changable_listen_mode) {
+					if (experimental.changable_listen_mode === true)
+						experimentalChangableListenModeEnabled.value = true;
+					else if (
+						Array.isArray(experimental.changable_listen_mode) &&
+						experimental.changable_listen_mode.indexOf(_id) !== -1
+					)
+						experimentalChangableListenModeEnabled.value = true;
+				}
+				if (experimentalChangableListenModeEnabled.value) {
+					console.log(
+						`Experimental changeable listen mode is enabled`
+					);
+					const experimentalChangeableListenModeLS =
+						localStorage.getItem(
+							`experimental_changeable_listen_mode_${_id}`
+						);
+					if (experimentalChangeableListenModeLS)
+						experimentalChangableListenMode.value =
+							experimentalChangeableListenModeLS;
+				}
+
 				// change url to use station name instead of station id
 				if (name !== stationIdentifier.value) {
 					// eslint-disable-next-line no-restricted-globals
@@ -1406,9 +1466,16 @@ onMounted(async () => {
 	});
 
 	frontendDevMode.value = await lofig.get("mode");
-	mediasession.value = await lofig.get("siteSettings.mediasession");
 	christmas.value = await lofig.get("siteSettings.christmas");
 	sitename.value = await lofig.get("siteSettings.sitename");
+	lofig.get("experimental").then(experimental => {
+		if (
+			experimental &&
+			Object.hasOwn(experimental, "media_session") &&
+			experimental.media_session
+		)
+			experimentalMediaSession.value = true;
+	});
 
 	ms.setListeners(0, {
 		play: () => {
@@ -1441,7 +1508,7 @@ onMounted(async () => {
 onBeforeUnmount(() => {
 	document.getElementsByTagName("html")[0].style.cssText = "";
 
-	if (mediasession.value) {
+	if (experimentalMediaSession.value) {
 		ms.removeListeners(0);
 		ms.removeMediaSessionData(0);
 	}
@@ -1564,7 +1631,184 @@ onBeforeUnmount(() => {
 						</div>
 					</div>
 					<div id="station-right-column" class="column">
-						<div class="player-container quadrant" v-show="!noSong">
+						<div
+							class="experimental-listen-mode-container quadrant"
+							v-if="
+								experimentalChangableListenModeEnabled &&
+								!noSong
+							"
+							v-show="
+								experimentalChangableListenMode ===
+								'participate'
+							"
+						>
+							<button
+								class="button is-primary"
+								@click="
+									experimentalChangableListenModeChange(
+										'listen_and_participate'
+									)
+								"
+							>
+								<i class="material-icons icon-with-button"
+									>music_note</i
+								>
+								<span>Listen to music</span>
+							</button>
+							<button
+								v-if="!skipVotesLoaded"
+								class="button is-primary disabled"
+								content="Skip votes have not been loaded yet"
+								v-tippy
+							>
+								<i class="material-icons icon-with-button"
+									>skip_next</i
+								>
+								Vote to skip the current song
+							</button>
+							<button
+								v-else-if="loggedIn"
+								:class="[
+									'button',
+									'is-primary',
+									{ voted: currentSong.voted }
+								]"
+								@click="toggleSkipVote()"
+								:content="`${
+									currentSong.voted ? 'Remove vote' : 'Vote'
+								} to Skip Song`"
+								v-tippy
+							>
+								<i class="material-icons icon-with-button"
+									>skip_next</i
+								>
+								Vote to skip the current song -
+								{{ currentSong.skipVotes }} votes
+							</button>
+							<button
+								v-else
+								class="button is-primary disabled"
+								content="Log in to vote to skip songs"
+								v-tippy="{ theme: 'info' }"
+							>
+								<i class="material-icons icon-with-button"
+									>skip_next</i
+								>
+								Vote to skip the current song -
+								{{ currentSong.skipVotes }} votes
+							</button>
+							<div class="row">
+								<!-- Ratings -->
+								<div
+									class="ratings"
+									v-if="ratingsLoaded && ownRatingsLoaded"
+									:class="{
+										liked: currentSong.liked,
+										disliked: currentSong.disliked
+									}"
+								>
+									<!-- Like Song Button -->
+									<button
+										class="button is-success like-song"
+										@click="toggleLike()"
+										content="Like Song"
+										v-tippy
+									>
+										<i
+											class="material-icons icon-with-button"
+											:class="{
+												liked: currentSong.liked
+											}"
+											>thumb_up_alt</i
+										>{{ currentSong.likes }}
+									</button>
+
+									<!-- Dislike Song Button -->
+									<button
+										class="button is-danger dislike-song"
+										@click="toggleDislike()"
+										content="Dislike Song"
+										v-tippy
+									>
+										<i
+											class="material-icons icon-with-button"
+											:class="{
+												disliked: currentSong.disliked
+											}"
+											>thumb_down_alt</i
+										>{{ currentSong.dislikes }}
+									</button>
+								</div>
+								<div id="ratings" class="disabled" v-else>
+									<!-- Like Song Button -->
+									<button
+										class="button is-success like-song disabled"
+										content="Ratings have not been loaded yet"
+										v-tippy
+									>
+										<i
+											class="material-icons icon-with-button"
+											>thumb_up_alt</i
+										>
+									</button>
+
+									<!-- Dislike Song Button -->
+									<button
+										class="button is-danger dislike-song disabled"
+										content="Ratings have not been loaded yet"
+										v-tippy
+									>
+										<i
+											class="material-icons icon-with-button"
+											>thumb_down_alt</i
+										>
+									</button>
+								</div>
+								<add-to-playlist-dropdown
+									:song="currentSong"
+									placement="top-end"
+								>
+									<template #button>
+										<div
+											id="add-song-to-playlist"
+											content="Add Song to Playlist"
+											v-tippy
+										>
+											<div class="control has-addons">
+												<button
+													class="button is-primary"
+												>
+													<i class="material-icons">
+														playlist_add
+													</i>
+												</button>
+												<button
+													class="button"
+													id="dropdown-toggle"
+												>
+													<i class="material-icons">
+														{{
+															showPlaylistDropdown
+																? "expand_more"
+																: "expand_less"
+														}}
+													</i>
+												</button>
+											</div>
+										</div>
+									</template>
+								</add-to-playlist-dropdown>
+							</div>
+						</div>
+						<div
+							class="player-container quadrant"
+							v-show="
+								!noSong &&
+								(!experimentalChangableListenModeEnabled ||
+									experimentalChangableListenMode ===
+										'listen_and_participate')
+							"
+						>
 							<div id="video-container">
 								<div
 									id="stationPlayer"
@@ -1786,6 +2030,26 @@ onBeforeUnmount(() => {
 										>
 										{{ currentSong.skipVotes }}
 									</button>
+
+									<!-- Close player window -->
+									<button
+										v-if="
+											experimentalChangableListenModeEnabled
+										"
+										class="button is-primary"
+										content="Close this player window"
+										@click="
+											experimentalChangableListenModeChange(
+												'participate'
+											)
+										"
+										v-tippy
+									>
+										<i
+											class="material-icons icon-with-button"
+											>cancel_presentation</i
+										>
+									</button>
 								</div>
 								<div id="duration">
 									<p>
@@ -2022,7 +2286,7 @@ onBeforeUnmount(() => {
 								:class="{ 'no-currently-playing': noSong }"
 							>
 								<song-item
-									:key="`songItem-currentSong-${currentSong._id}`"
+									:key="`songItem-currentSong-${currentSong.youtubeId}`"
 									:song="currentSong"
 									:duration="false"
 									:requested-by="true"
@@ -2035,7 +2299,7 @@ onBeforeUnmount(() => {
 								class="quadrant"
 							>
 								<song-item
-									:key="`songItem-nextSong-${nextSong._id}`"
+									:key="`songItem-nextSong-${nextSong.youtubeId}`"
 									:song="nextSong"
 									:duration="false"
 									:requested-by="true"
@@ -2682,7 +2946,7 @@ onBeforeUnmount(() => {
 		var(--dark-red) 1rem 2rem
 	);
 
-	background-size: 200% 200%;
+	background-size: 200% 100%;
 	animation: christmas 20s linear infinite;
 }
 
@@ -2801,11 +3065,56 @@ onBeforeUnmount(() => {
 	animation-delay: 11s;
 }
 
+.experimental-listen-mode-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	row-gap: 16px;
+	padding: 16px 16px;
+
+	.row {
+		display: flex;
+		flex-direction: row;
+		column-gap: 16px;
+
+		.ratings {
+			flex: 2;
+			display: flex;
+			flex-direction: row;
+			column-gap: 16px;
+
+			button {
+				flex: 1;
+			}
+		}
+
+		.addToPlaylistDropdown {
+			flex: 1;
+
+			.button.is-primary {
+				flex: 1;
+			}
+		}
+	}
+}
+
 /* Tablet view fix */
 @media (max-width: 768px) {
 	.bg-bubbles li:nth-child(10) {
 		display: none;
 	}
+
+	.experimental-listen-mode-container {
+		row-gap: 8px;
+
+		.row {
+			column-gap: 8px;
+
+			.ratings {
+				column-gap: 8px;
+			}
+		}
+	}
 }
 
 @-webkit-keyframes square {

frontend/vite.config.js

@@ -151,6 +151,16 @@ export default {
 				find: "@",
 				replacement: path.resolve(__dirname, "src")
 			}
+		],
+		extensions: [
+			".mjs",
+			".js",
+			".mts",
+			".ts",
+			".jsx",
+			".tsx",
+			".json",
+			".vue"
 		]
 	},
 	define: {