feat: add music to front page of instance (#6)

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div v-if="instance" :class="$style.root">
+	<PwVisitorMusic/>
 	<div :class="[$style.main, $style.panel]">
 		<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl ? $style.wideIcon : $style.mainIcon"/>
 		<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
@@ -61,6 +62,7 @@ import * as Misskey from 'misskey-js';
 import sanitizeHtml from '@/utility/sanitize-html.js';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
+import PwVisitorMusic from '@/components/PwVisitorMusic.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkInfo from '@/components/MkInfo.vue';

packages/frontend/src/components/PwVisitorMusic.vue

@@ -0,0 +1,30 @@
+<template v-if="instance">
+	<audio v-if="instance.musicEnabled" ref="audioRef" :src="instance.musicSource" loop></audio>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { instance } from '@/instance.js';
+
+const audioRef = ref<HTMLAudioElement | null>(null);
+const hasPlayed = ref(false);
+
+const playMusic = () => {
+	if (audioRef.value && !hasPlayed.value && instance.musicEnabled) {
+		audioRef.value.volume = 0.2;
+		audioRef.value.play().catch(() => {
+			// Ignore autoplay errors
+		});
+		hasPlayed.value = true;
+		document.removeEventListener('click', playMusic);
+	}
+};
+
+onMounted(() => {
+	document.addEventListener('click', playMusic);
+});
+
+onUnmounted(() => {
+	document.removeEventListener('click', playMusic);
+});
+</script>

packages/frontend/src/pages/admin/branding.vue

@@ -54,6 +54,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
 				</MkInput>
 
+					<MkSwitch v-model="musicEnabled">
+						<template #label>Enable Login Music</template>
+						<template #caption>Play music when users visit the login page</template>
+					</MkSwitch>
+
+					<MkInput v-model="musicSource" type="url">
+						<template #prefix><i class="ti ti-link"></i></template>
+						<template #label>Login Music URL</template>
+					</MkInput>
+
 				<FromSlot>
 					<template #label>{{ i18n.ts.defaultLike }}</template>
 					<MkCustomEmoji v-if="defaultLike.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="defaultLike" :normal="true" :noStyle="true"/>
@@ -129,6 +139,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { instance, fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
+import MkSwitch from '@/components/MkSwitch.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
 
@@ -138,6 +149,8 @@ const app192IconUrl = ref<string | null>(null);
 const app512IconUrl = ref<string | null>(null);
 const bannerUrl = ref<string | null>(null);
 const backgroundImageUrl = ref<string | null>(null);
+const musicSource = ref<string | null>(null);
+const musicEnabled = ref<boolean>(false);
 const themeColor = ref<string | null>(null);
 const defaultLightTheme = ref<string | null>(null);
 const defaultDarkTheme = ref<string | null>(null);
@@ -157,6 +170,8 @@ async function init() {
 	app512IconUrl.value = meta.app512IconUrl;
 	bannerUrl.value = meta.bannerUrl;
 	backgroundImageUrl.value = meta.backgroundImageUrl;
+	musicSource.value = meta.musicSource;
+	musicEnabled.value = meta.musicEnabled;
 	themeColor.value = meta.themeColor;
 	defaultLightTheme.value = meta.defaultLightTheme;
 	defaultDarkTheme.value = meta.defaultDarkTheme;
@@ -177,6 +192,8 @@ function save() {
 		app512IconUrl: app512IconUrl.value,
 		bannerUrl: bannerUrl.value,
 		backgroundImageUrl: backgroundImageUrl.value,
+		musicSource: musicSource.value,
+		musicEnabled: musicEnabled.value,
 		themeColor: themeColor.value === '' ? null : themeColor.value,
 		defaultLightTheme: defaultLightTheme.value === '' ? null : defaultLightTheme.value,
 		defaultDarkTheme: defaultDarkTheme.value === '' ? null : defaultDarkTheme.value,