サウンド設定など

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: "タイムライン上部に投稿フォームを表示する"
newNoteRecived: "新しいノートがあります"
useNotificationsPopup: "通知一覧をポップアップで表示"
sounds: "サウンド"
listen: "聴く"
none: "なし"
volume: "音量"
_sfx:
note: "ノート"
notification: "通知"
chat: "チャット"
chatBg: "チャット(バックグラウンド)"
_ago:
unknown: "謎"

View File

@ -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) {

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: {
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 = () => {

View File

@ -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: '';

View File

@ -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', () => {

View File

@ -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>

View File

@ -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();

View File

@ -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 {

View File

@ -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') },

View File

@ -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: {},
};