サウンド設定など

src/client/app.vue

@@ -93,7 +93,7 @@
 					<fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span>
 					<i v-if="$store.getters.isSignedIn && ($store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes)"><fa :icon="faCircle"/></i>
 				</button>
-				<router-link class="item" active-class="active" to="/settings">
+				<router-link class="item" active-class="active" to="/preferences">
 					<fa :icon="faCog" fixed-width/><span class="text">{{ $t('settings') }}</span>
 				</router-link>
 			</div>
@@ -578,13 +578,19 @@ export default Vue.extend({
 
 		onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
-			this.$root.stream.send('readNotification', {
-				id: notification.id
-			});
+			if (true) {
+				this.$root.stream.send('readNotification', {
+					id: notification.id
+				});
 
-			this.$root.new(MkToast, {
-				notification
-			});
+				this.$root.new(MkToast, {
+					notification
+				});
+			}
+
+			const audio = new Audio(`/assets/sounds/${this.$store.state.device.sfxNotification}.mp3`);
+			audio.volume = this.$store.state.device.sfxVolume;
+			audio.play();
 		},
 
 		onMousedown(e) {

src/client/components/timeline.vue

@@ -21,6 +21,11 @@ export default Vue.extend({
 		},
 		antenna: {
 			required: false
+		},
+		sound: {
+			type: Boolean,
+			required: false,
+			default: false,
 		}
 	},
 
@@ -46,6 +51,12 @@ export default Vue.extend({
 
 		const prepend = note => {
 			(this.$refs.tl as any).prepend(note);
+
+			if (this.sound) {
+				const audio = new Audio(`/assets/sounds/${this.$store.state.device.sfxNote}.mp3`);
+				audio.volume = this.$store.state.device.sfxVolume;
+				audio.play();
+			}
 		};
 
 		const onUserAdded = () => {

src/client/components/ui/select.vue

@@ -56,7 +56,7 @@ export default Vue.extend({
 			}
 		},
 		filled(): boolean {
-			return this.v != '' && this.v != null;
+			return true;
 		}
 	},
 	mounted() {
@@ -100,6 +100,7 @@ export default Vue.extend({
 
 	> .input {
 		display: flex;
+		position: relative;
 
 		&:before {
 			content: '';

src/client/mios.ts

@@ -197,6 +197,10 @@ export default class MiOS extends EventEmitter {
 				this.store.dispatch('mergeMe', {
 					hasUnreadMessagingMessage: true
 				});
+
+				const audio = new Audio(`/assets/sounds/${this.store.state.device.sfxChatBg}.mp3`);
+				audio.volume = this.store.state.device.sfxVolume;
+				audio.play();
 			});
 
 			main.on('readAllAntennas', () => {

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 {

src/client/router.ts

@@ -46,7 +46,7 @@ export const router = new VueRouter({
 		{ path: '/my/groups', component: page('my-groups/index') },
 		{ path: '/my/groups/:group', component: page('my-groups/group') },
 		{ path: '/my/antennas', component: page('my-antennas/index') },
-		{ path: '/settings', component: page('settings/index') },
+		{ path: '/preferences', component: page('preferences/index') },
 		{ path: '/instance', component: page('instance/index') },
 		{ path: '/instance/emojis', component: page('instance/emojis') },
 		{ path: '/instance/users', component: page('instance/users') },

src/client/store.ts

@@ -41,6 +41,11 @@ const defaultDeviceSettings = {
 	imageNewTab: false,
 	showFixedPostForm: false,
 	useNotificationsPopup: true,
+	sfxVolume: 0.3,
+	sfxNote: 'syuilo/pope1',
+	sfxNotification: 'syuilo/pope2',
+	sfxChat: 'syuilo/waon',
+	sfxChatBg: null,
 	userData: {},
 };