サウンド設定など

This commit is contained in:
syuilo 2020-02-20 02:40:53 +09:00
parent f456feb3ff
commit e7205d9cc2
18 changed files with 125 additions and 17 deletions

View file

@ -424,6 +424,16 @@ deleteAll: "全て削除"
showFixedPostForm: "タイムライン上部に投稿フォームを表示する" showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
newNoteRecived: "新しいノートがあります" newNoteRecived: "新しいノートがあります"
useNotificationsPopup: "通知一覧をポップアップで表示" useNotificationsPopup: "通知一覧をポップアップで表示"
sounds: "サウンド"
listen: "聴く"
none: "なし"
volume: "音量"
_sfx:
note: "ノート"
notification: "通知"
chat: "チャット"
chatBg: "チャット(バックグラウンド)"
_ago: _ago:
unknown: "謎" unknown: "謎"

View file

@ -93,7 +93,7 @@
<fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span> <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> <i v-if="$store.getters.isSignedIn && ($store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes)"><fa :icon="faCircle"/></i>
</button> </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> <fa :icon="faCog" fixed-width/><span class="text">{{ $t('settings') }}</span>
</router-link> </router-link>
</div> </div>
@ -578,13 +578,19 @@ export default Vue.extend({
onNotification(notification) { onNotification(notification) {
// TODO: () // TODO: ()
this.$root.stream.send('readNotification', { if (true) {
id: notification.id this.$root.stream.send('readNotification', {
}); id: notification.id
});
this.$root.new(MkToast, { this.$root.new(MkToast, {
notification notification
}); });
}
const audio = new Audio(`/assets/sounds/${this.$store.state.device.sfxNotification}.mp3`);
audio.volume = this.$store.state.device.sfxVolume;
audio.play();
}, },
onMousedown(e) { onMousedown(e) {

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -21,6 +21,11 @@ export default Vue.extend({
}, },
antenna: { antenna: {
required: false required: false
},
sound: {
type: Boolean,
required: false,
default: false,
} }
}, },
@ -46,6 +51,12 @@ export default Vue.extend({
const prepend = note => { const prepend = note => {
(this.$refs.tl as any).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 = () => { const onUserAdded = () => {

View file

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

View file

@ -197,6 +197,10 @@ export default class MiOS extends EventEmitter {
this.store.dispatch('mergeMe', { this.store.dispatch('mergeMe', {
hasUnreadMessagingMessage: true 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', () => { main.on('readAllAntennas', () => {

View file

@ -19,7 +19,7 @@
<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/> <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-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> </div>
</template> </template>

View file

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

View file

@ -5,6 +5,36 @@
<x-theme/> <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"> <section class="_card">
<div class="_title"><fa :icon="faCog"/> {{ $t('accessibility') }}</div> <div class="_title"><fa :icon="faCog"/> {{ $t('accessibility') }}</div>
<div class="_content"> <div class="_content">
@ -45,7 +75,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; 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 MkInput from '../../components/ui/input.vue';
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
import MkSwitch from '../../components/ui/switch.vue'; import MkSwitch from '../../components/ui/switch.vue';
@ -55,6 +85,17 @@ import XTheme from './theme.vue';
import i18n from '../../i18n'; import i18n from '../../i18n';
import { langs } from '../../config'; 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({ export default Vue.extend({
i18n, i18n,
@ -78,7 +119,8 @@ export default Vue.extend({
langs, langs,
lang: localStorage.getItem('lang'), lang: localStorage.getItem('lang'),
fontSize: localStorage.getItem('fontSize'), 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; }, get() { return this.$store.state.device.useNotificationsPopup; },
set(value) { this.$store.commit('device/set', { key: 'useNotificationsPopup', value }); } 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: { watch: {
@ -137,6 +204,12 @@ export default Vue.extend({
}, },
methods: { methods: {
listen(sound) {
const audio = new Audio(`/assets/sounds/${sound}.mp3`);
audio.volume = this.$store.state.device.sfxVolume;
audio.play();
},
cacheClear() { cacheClear() {
// Clear cache (service worker) // Clear cache (service worker)
try { try {

View file

@ -46,7 +46,7 @@ export const router = new VueRouter({
{ path: '/my/groups', component: page('my-groups/index') }, { path: '/my/groups', component: page('my-groups/index') },
{ path: '/my/groups/:group', component: page('my-groups/group') }, { path: '/my/groups/:group', component: page('my-groups/group') },
{ path: '/my/antennas', component: page('my-antennas/index') }, { 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', component: page('instance/index') },
{ path: '/instance/emojis', component: page('instance/emojis') }, { path: '/instance/emojis', component: page('instance/emojis') },
{ path: '/instance/users', component: page('instance/users') }, { path: '/instance/users', component: page('instance/users') },

View file

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