refactor: move mediasession to experimental option

.wiki/Configuration.md

@@ -85,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. |
@@ -100,6 +99,7 @@ Location: `frontend/dist/config/default.json`
 | `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.
 

frontend/dist/config/template.json

@@ -26,7 +26,6 @@
 		"footerLinks": {
 			"GitHub": "https://github.com/Musare/Musare"
 		},
-		"mediasession": false,
 		"christmas": false,
 		"registrationDisabled": false,
 		"githubAuthentication": false
@@ -51,6 +50,7 @@
 		"changable_listen_mode": [
 			"STATION_ID"
 		],
-		"disable_youtube_search": true
+		"disable_youtube_search": true,
+		"media_session": false
 	}
 }

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,12 +86,12 @@ 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();
@@ -581,7 +581,7 @@ const setCurrentSong = data => {
 
 	clearTimeout(window.stationNextSongTimeout);
 
-	if (mediasession.value) updateMediaSessionData(_currentSong);
+	if (experimentalMediaSession.value) updateMediaSessionData(_currentSong);
 
 	startedAt.value = _startedAt;
 	updateStationPaused(_paused);
@@ -703,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(
@@ -714,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();
@@ -1464,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: () => {
@@ -1499,7 +1508,7 @@ onMounted(async () => {
 onBeforeUnmount(() => {
 	document.getElementsByTagName("html")[0].style.cssText = "";
 
-	if (mediasession.value) {
+	if (experimentalMediaSession.value) {
 		ms.removeListeners(0);
 		ms.removeMediaSessionData(0);
 	}