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

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

* Update Changelog

* tweak sound

* tweak sound

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

CHANGELOG.md

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

locales/index.d.ts

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

locales/ja-JP.yml

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

packages/frontend/src/components/MkNote.vue

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

packages/frontend/src/components/MkNoteDetailed.vue

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

packages/frontend/src/components/MkReactionsViewer.reaction.vue

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

packages/frontend/src/pages/settings/sounds.vue

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

packages/frontend/src/scripts/sound.ts

@@ -38,6 +38,8 @@ export const soundsTypes = [
 	'syuilo/waon',
 	'syuilo/popo',
 	'syuilo/triple',
+	'syuilo/bubble1',
+	'syuilo/bubble2',
 	'syuilo/poi1',
 	'syuilo/poi2',
 	'syuilo/pirori',
@@ -77,7 +79,7 @@ export async function loadAudio(file: string, useCache = true) {
 	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}`];
 	if (_DEV_) console.log('play', type, sound);
 	if (sound.type == null) return;

packages/frontend/src/store.ts

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