enhance(frontend): make default volume of video 30%

packages/frontend/src/components/MkMediaBanner.vue

@@ -17,7 +17,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:title="media.name"
 			controls
 			preload="metadata"
-			@volumechange="volumechange"
 		/>
 	</div>
 	<a
@@ -33,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { onMounted, shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { soundConfigStore } from '@/scripts/sound.js';
 import { i18n } from '@/i18n.js';
@@ -43,15 +42,13 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-const audioEl = $shallowRef<HTMLAudioElement | null>();
+const audioEl = shallowRef<HTMLAudioElement>();
 let hide = $ref(true);
 
-function volumechange() {
-	if (audioEl) soundConfigStore.set('mediaVolume', audioEl.volume);
-}
-
-onMounted(() => {
-	if (audioEl) audioEl.volume = soundConfigStore.state.mediaVolume;
+watch(audioEl, () => {
+	if (audioEl.value) {
+		audioEl.value.volume = 0.3;
+	}
 });
 </script>