サウンド設定など

src/client/pages/index.home.vue

@@ -19,7 +19,7 @@
 	<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>
 
 	<x-post-form class="post-form _panel" fixed v-if="$store.state.device.showFixedPostForm"/>
-	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" @before="before()" @after="after()" @queue="queueUpdated"/>
+	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" :sound="true" @before="before()" @after="after()" @queue="queueUpdated"/>
 </div>
 </template>
 

src/client/pages/messaging-room.vue

@@ -185,11 +185,9 @@ export default Vue.extend({
 
 		onMessage(message) {
 			// サウンドを再生する
-			if (this.$store.state.device.enableSounds) {
-				const sound = new Audio(`${url}/assets/message.mp3`);
-				sound.volume = this.$store.state.device.soundVolume;
-				sound.play();
-			}
+			const audio = new Audio(`/assets/sounds/${this.$store.state.device.sfxChat}.mp3`);
+			audio.volume = this.$store.state.device.sfxVolume;
+			audio.play();
 
 			const isBottom = this.isBottom();
 

src/client/pages/preferences/index.vue

@@ -5,6 +5,36 @@
 
 	<x-theme/>
 
+	<section class="_card">
+		<div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div>
+		<div class="_content">
+			{{ $t('volume') }}
+			<input type="range" v-model="sfxVolume" min="0" max="1" step="0.1"/>
+		</div>
+		<div class="_content">
+			<mk-select v-model="sfxNote">
+				<template #label>{{ $t('_sfx.note') }}</template>
+				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
+				<template #text><button class="_textButton" @click="listen(sfxNote)" v-if="sfxNote"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
+			</mk-select>
+			<mk-select v-model="sfxNotification">
+				<template #label>{{ $t('_sfx.notification') }}</template>
+				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
+				<template #text><button class="_textButton" @click="listen(sfxNotification)" v-if="sfxNotification"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
+			</mk-select>
+			<mk-select v-model="sfxChat">
+				<template #label>{{ $t('_sfx.chat') }}</template>
+				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
+				<template #text><button class="_textButton" @click="listen(sfxChat)" v-if="sfxChat"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
+			</mk-select>
+			<mk-select v-model="sfxChatBg">
+				<template #label>{{ $t('_sfx.chatBg') }}</template>
+				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
+				<template #text><button class="_textButton" @click="listen(sfxChatBg)" v-if="sfxChatBg"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
+			</mk-select>
+		</div>
+	</section>
+
 	<section class="_card">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('accessibility') }}</div>
 		<div class="_content">
@@ -45,7 +75,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faImage, faCog } from '@fortawesome/free-solid-svg-icons';
+import { faImage, faCog, faMusic, faPlay } from '@fortawesome/free-solid-svg-icons';
 import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
@@ -55,6 +85,17 @@ import XTheme from './theme.vue';
 import i18n from '../../i18n';
 import { langs } from '../../config';
 
+const sounds = [
+	null,
+	'syuilo/pope1',
+	'syuilo/pope2',
+	'syuilo/waon',
+	'aisha/1',
+	'aisha/2',
+	'aisha/3',
+	'noizenecio/kick_gaba',
+];
+
 export default Vue.extend({
 	i18n,
 
@@ -78,7 +119,8 @@ export default Vue.extend({
 			langs,
 			lang: localStorage.getItem('lang'),
 			fontSize: localStorage.getItem('fontSize'),
-			faImage, faCog
+			sounds,
+			faImage, faCog, faMusic, faPlay
 		}
 	},
 
@@ -117,6 +159,31 @@ export default Vue.extend({
 			get() { return this.$store.state.device.useNotificationsPopup; },
 			set(value) { this.$store.commit('device/set', { key: 'useNotificationsPopup', value }); }
 		},
+
+		sfxVolume: {
+			get() { return this.$store.state.device.sfxVolume; },
+			set(value) { this.$store.commit('device/set', { key: 'sfxVolume', value }); }
+		},
+
+		sfxNote: {
+			get() { return this.$store.state.device.sfxNote; },
+			set(value) { this.$store.commit('device/set', { key: 'sfxNote', value }); }
+		},
+
+		sfxNotification: {
+			get() { return this.$store.state.device.sfxNotification; },
+			set(value) { this.$store.commit('device/set', { key: 'sfxNotification', value }); }
+		},
+
+		sfxChat: {
+			get() { return this.$store.state.device.sfxChat; },
+			set(value) { this.$store.commit('device/set', { key: 'sfxChat', value }); }
+		},
+
+		sfxChatBg: {
+			get() { return this.$store.state.device.sfxChatBg; },
+			set(value) { this.$store.commit('device/set', { key: 'sfxChatBg', value }); }
+		},
 	},
 
 	watch: {
@@ -137,6 +204,12 @@ export default Vue.extend({
 	},
 
 	methods: {
+		listen(sound) {
+			const audio = new Audio(`/assets/sounds/${sound}.mp3`);
+			audio.volume = this.$store.state.device.sfxVolume;
+			audio.play();
+		},
+
 		cacheClear() {
 			// Clear cache (service worker)
 			try {