サウンド設定など
This commit is contained in:
parent
f456feb3ff
commit
e7205d9cc2
|
@ -424,6 +424,16 @@ deleteAll: "全て削除"
|
||||||
showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
|
showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
|
||||||
newNoteRecived: "新しいノートがあります"
|
newNoteRecived: "新しいノートがあります"
|
||||||
useNotificationsPopup: "通知一覧をポップアップで表示"
|
useNotificationsPopup: "通知一覧をポップアップで表示"
|
||||||
|
sounds: "サウンド"
|
||||||
|
listen: "聴く"
|
||||||
|
none: "なし"
|
||||||
|
volume: "音量"
|
||||||
|
|
||||||
|
_sfx:
|
||||||
|
note: "ノート"
|
||||||
|
notification: "通知"
|
||||||
|
chat: "チャット"
|
||||||
|
chatBg: "チャット(バックグラウンド)"
|
||||||
|
|
||||||
_ago:
|
_ago:
|
||||||
unknown: "謎"
|
unknown: "謎"
|
||||||
|
|
|
@ -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.
|
@ -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 = () => {
|
||||||
|
|
|
@ -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: '';
|
||||||
|
|
|
@ -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', () => {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
|
@ -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') },
|
||||||
|
|
|
@ -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: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue