enhance(frontend): リアクション選択時に音を流せるように (#12441)

* (add) リアクション選択時に音を鳴らせるように

* Update Changelog

* tweak sound

* tweak sound

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
かっこかり 2023-11-26 13:04:44 +09:00 committed by GitHub
parent d32631d159
commit 5bdae9f6d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 29 additions and 2 deletions

View File

@ -23,6 +23,7 @@
### Client ### Client
- Enhance: 絵文字のオートコンプリート機能強化 #12364 - Enhance: 絵文字のオートコンプリート機能強化 #12364
- Enhance: ユーザーのRawデータを表示するページが復活 - Enhance: ユーザーのRawデータを表示するページが復活
- Enhance: リアクション選択時に音を鳴らせるように
- fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
- Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367
- Fix: コードエディタが正しく表示されない問題を修正 - Fix: コードエディタが正しく表示されない問題を修正

1
locales/index.d.ts vendored
View File

@ -1943,6 +1943,7 @@ export interface Locale {
"notification": string; "notification": string;
"antenna": string; "antenna": string;
"channel": string; "channel": string;
"reaction": string;
}; };
"_ago": { "_ago": {
"future": string; "future": string;

View File

@ -1848,6 +1848,7 @@ _sfx:
notification: "通知" notification: "通知"
antenna: "アンテナ受信" antenna: "アンテナ受信"
channel: "チャンネル通知" channel: "チャンネル通知"
reaction: "リアクション選択時"
_ago: _ago:
future: "未来" future: "未来"

Binary file not shown.

Binary file not shown.

View File

@ -163,6 +163,7 @@ import { focusPrev, focusNext } from '@/scripts/focus.js';
import { checkWordMute } from '@/scripts/check-word-mute.js'; import { checkWordMute } from '@/scripts/check-word-mute.js';
import { userPage } from '@/filters/user.js'; import { userPage } from '@/filters/user.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import * as sound from '@/scripts/sound.js';
import { defaultStore, noteViewInterruptors } from '@/store.js'; import { defaultStore, noteViewInterruptors } from '@/store.js';
import { reactionPicker } from '@/scripts/reaction-picker.js'; import { reactionPicker } from '@/scripts/reaction-picker.js';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
@ -336,6 +337,8 @@ function react(viaKeyboard = false): void {
pleaseLogin(); pleaseLogin();
showMovedDialog(); showMovedDialog();
if (appearNote.reactionAcceptance === 'likeOnly') { if (appearNote.reactionAcceptance === 'likeOnly') {
sound.play('reaction');
if (props.mock) { if (props.mock) {
return; return;
} }
@ -354,6 +357,8 @@ function react(viaKeyboard = false): void {
} else { } else {
blur(); blur();
reactionPicker.show(reactButton.value, reaction => { reactionPicker.show(reactButton.value, reaction => {
sound.play('reaction');
if (props.mock) { if (props.mock) {
emit('reaction', reaction); emit('reaction', reaction);
return; return;

View File

@ -210,6 +210,7 @@ import { checkWordMute } from '@/scripts/check-word-mute.js';
import { userPage } from '@/filters/user.js'; import { userPage } from '@/filters/user.js';
import { notePage } from '@/filters/note.js'; import { notePage } from '@/filters/note.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import * as sound from '@/scripts/sound.js';
import { defaultStore, noteViewInterruptors } from '@/store.js'; import { defaultStore, noteViewInterruptors } from '@/store.js';
import { reactionPicker } from '@/scripts/reaction-picker.js'; import { reactionPicker } from '@/scripts/reaction-picker.js';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
@ -369,6 +370,8 @@ function react(viaKeyboard = false): void {
pleaseLogin(); pleaseLogin();
showMovedDialog(); showMovedDialog();
if (appearNote.reactionAcceptance === 'likeOnly') { if (appearNote.reactionAcceptance === 'likeOnly') {
sound.play('reaction');
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: appearNote.id, noteId: appearNote.id,
reaction: '❤️', reaction: '❤️',
@ -383,6 +386,8 @@ function react(viaKeyboard = false): void {
} else { } else {
blur(); blur();
reactionPicker.show(reactButton.value, reaction => { reactionPicker.show(reactButton.value, reaction => {
sound.play('reaction');
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: appearNote.id, noteId: appearNote.id,
reaction: reaction, reaction: reaction,

View File

@ -28,6 +28,7 @@ import MkReactionEffect from '@/components/MkReactionEffect.vue';
import { claimAchievement } from '@/scripts/achievements.js'; import { claimAchievement } from '@/scripts/achievements.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import * as sound from '@/scripts/sound.js';
const props = defineProps<{ const props = defineProps<{
reaction: string; reaction: string;
@ -59,6 +60,10 @@ async function toggleReaction() {
}); });
if (confirm.canceled) return; if (confirm.canceled) return;
if (oldReaction !== props.reaction) {
sound.play('reaction');
}
if (mock) { if (mock) {
emit('reactionToggled', props.reaction, (props.count - 1)); emit('reactionToggled', props.reaction, (props.count - 1));
return; return;
@ -75,6 +80,8 @@ async function toggleReaction() {
} }
}); });
} else { } else {
sound.play('reaction');
if (mock) { if (mock) {
emit('reactionToggled', props.reaction, (props.count + 1)); emit('reactionToggled', props.reaction, (props.count + 1));
return; return;

View File

@ -38,7 +38,7 @@ import { defaultStore } from '@/store.js';
const masterVolume = computed(defaultStore.makeGetterSetter('sound_masterVolume')); const masterVolume = computed(defaultStore.makeGetterSetter('sound_masterVolume'));
const soundsKeys = ['note', 'noteMy', 'notification', 'antenna', 'channel'] as const; const soundsKeys = ['note', 'noteMy', 'notification', 'antenna', 'channel', 'reaction'] as const;
const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({ const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({
note: defaultStore.reactiveState.sound_note, note: defaultStore.reactiveState.sound_note,
@ -46,6 +46,7 @@ const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({
notification: defaultStore.reactiveState.sound_notification, notification: defaultStore.reactiveState.sound_notification,
antenna: defaultStore.reactiveState.sound_antenna, antenna: defaultStore.reactiveState.sound_antenna,
channel: defaultStore.reactiveState.sound_channel, channel: defaultStore.reactiveState.sound_channel,
reaction: defaultStore.reactiveState.sound_reaction,
}); });
async function updated(type: keyof typeof sounds.value, sound) { async function updated(type: keyof typeof sounds.value, sound) {

View File

@ -38,6 +38,8 @@ export const soundsTypes = [
'syuilo/waon', 'syuilo/waon',
'syuilo/popo', 'syuilo/popo',
'syuilo/triple', 'syuilo/triple',
'syuilo/bubble1',
'syuilo/bubble2',
'syuilo/poi1', 'syuilo/poi1',
'syuilo/poi2', 'syuilo/poi2',
'syuilo/pirori', 'syuilo/pirori',
@ -77,7 +79,7 @@ export async function loadAudio(file: string, useCache = true) {
return audioBuffer; return audioBuffer;
} }
export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notification') { export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notification' | 'reaction') {
const sound = defaultStore.state[`sound_${type}`]; const sound = defaultStore.state[`sound_${type}`];
if (_DEV_) console.log('play', type, sound); if (_DEV_) console.log('play', type, sound);
if (sound.type == null) return; if (sound.type == null) return;

View File

@ -411,6 +411,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: { type: 'syuilo/square-pico', volume: 1 }, default: { type: 'syuilo/square-pico', volume: 1 },
}, },
sound_reaction: {
where: 'device',
default: { type: 'syuilo/bubble2', volume: 1 },
},
})); }));
// TODO: 他のタブと永続化されたstateを同期 // TODO: 他のタブと永続化されたstateを同期