feat: added experimental option to disable YouTube search on the frontend

.wiki/Configuration.md

@@ -98,6 +98,7 @@ Location: `frontend/dist/config/default.json`
 | `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. |
 
 [^1]: Requires a frontend restart to update. The data will be available from the frontend console and by the frontend code.
 

frontend/dist/config/template.json

@@ -50,6 +50,7 @@
 	"experimental": {
 		"changable_listen_mode": [
 			"STATION_ID"
-		]
+		],
+		"disable_youtube_search": true
 	}
 }

frontend/src/components/Request.vue

@@ -37,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() {
@@ -118,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>
@@ -247,7 +258,10 @@ onMounted(async () => {
 					</div>
 				</div>
 
-				<div class="youtube-search">
+				<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/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -21,6 +21,7 @@ const editPlaylistStore = useEditPlaylistStore({ modalUuid: props.modalUuid });
 const { playlist } = storeToRefs(editPlaylistStore);
 
 const sitename = ref("Musare");
+const experimentalDisableYoutubeSearch = ref(false);
 
 const {
 	youtubeSearch,
@@ -92,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>
 
@@ -185,7 +196,7 @@ onMounted(async () => {
 			</p>
 		</div>
 
-		<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/EditSong/Tabs/Youtube.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
+import { onMounted, ref } from "vue";
 
 import { useEditSongStore } from "@/stores/editSong";
 
@@ -22,6 +23,8 @@ const { updateYoutubeId } = editSongStore;
 const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
 const { youtubeDirect, getYoutubeVideoId } = useYoutubeDirect();
 
+const experimentalDisableYoutubeSearch = ref(false);
+
 const selectSong = (youtubeId, result = null) => {
 	updateYoutubeId(youtubeId);
 
@@ -31,6 +34,18 @@ const selectSong = (youtubeId, result = null) => {
 			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>
@@ -55,60 +70,63 @@ const selectSong = (youtubeId, result = null) => {
 			</p>
 		</div>
 
-		<label class="label"> Search for a song from YouTube </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..."
-					v-model="youtubeSearch.songs.query"
-					autofocus
-					@keyup.enter="searchForSongs()"
-				/>
-			</p>
-			<p class="control">
+		<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">
+					<input
+						class="input"
+						type="text"
+						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"
+			>
+				<search-query-item
+					v-for="result in youtubeSearch.songs.results"
+					:key="result.id"
+					:result="result"
+				>
+					<template #actions>
+						<i
+							class="material-icons icon-selected"
+							v-if="result.id === form.inputs.youtubeId.value"
+							key="selected"
+							>radio_button_checked
+						</i>
+						<i
+							class="material-icons icon-not-selected"
+							v-else
+							@click.prevent="selectSong(result.id, result)"
+							key="not-selected"
+							>radio_button_unchecked
+						</i>
+					</template>
+				</search-query-item>
+
 				<button
-					class="button is-info"
-					@click.prevent="searchForSongs()"
+					class="button is-primary load-more-button"
+					@click.prevent="loadMoreSongs()"
 				>
-					<i class="material-icons icon-with-button">search</i>Search
+					Load more...
 				</button>
-			</p>
-		</div>
-
-		<div
-			v-if="youtubeSearch.songs.results.length > 0"
-			id="song-query-results"
-		>
-			<search-query-item
-				v-for="result in youtubeSearch.songs.results"
-				:key="result.id"
-				:result="result"
-			>
-				<template #actions>
-					<i
-						class="material-icons icon-selected"
-						v-if="result.id === form.inputs.youtubeId.value"
-						key="selected"
-						>radio_button_checked
-					</i>
-					<i
-						class="material-icons icon-not-selected"
-						v-else
-						@click.prevent="selectSong(result.id, result)"
-						key="not-selected"
-						>radio_button_unchecked
-					</i>
-				</template>
-			</search-query-item>
-
-			<button
-				class="button is-primary load-more-button"
-				@click.prevent="loadMoreSongs()"
-			>
-				Load more...
-			</button>
+			</div>
 		</div>
 	</div>
 </template>