Add sound to reactions

Signed-off-by: limepotato <limepot@protonmail.ch>

locales/en-US.yml

@@ -1472,6 +1472,7 @@ _sfx:
   chatBg: "Chat (Background)"
   antenna: "Antennas"
   channel: "Channel notifications"
+  reaction: "Reaction"
 _ago:
   future: "Future"
   justNow: "Just now"

packages/client/src/components/MkNote.vue

@@ -283,6 +283,7 @@ import { getWordSoftMute } from "@/scripts/check-word-mute";
 import { useRouter } from "@/router";
 import { userPage } from "@/filters/user";
 import * as os from "@/os";
+import * as sound from '@/scripts/sound.js';
 import { defaultStore, noteViewInterruptors } from "@/store";
 import { reactionPicker } from "@/scripts/reaction-picker";
 import { $i } from "@/account";
@@ -390,6 +391,8 @@ function react(viaKeyboard = false): void {
 	reactionPicker.show(
 		reactButton.value,
 		(reaction) => {
+			sound.play('reaction');
+
 			os.api("notes/reactions/create", {
 				noteId: appearNote.id,
 				reaction: reaction,

packages/client/src/components/MkNoteDetailed.vue

@@ -177,6 +177,7 @@ import { pleaseLogin } from "@/scripts/please-login";
 import { getWordSoftMute } from "@/scripts/check-word-mute";
 import { userPage } from "@/filters/user";
 import * as os from "@/os";
+import * as sound from '@/scripts/sound.js';
 import { defaultStore, noteViewInterruptors } from "@/store";
 import { reactionPicker } from "@/scripts/reaction-picker";
 import { $i } from "@/account";
@@ -273,6 +274,8 @@ function react(viaKeyboard = false): void {
 	reactionPicker.show(
 		reactButton.value,
 		(reaction) => {
+			sound.play('reaction');
+
 			os.api("notes/reactions/create", {
 				noteId: note.id,
 				reaction: reaction,

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

@@ -28,6 +28,7 @@ import XReactionIcon from "@/components/MkReactionIcon.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { $i } from "@/account";
+import * as sound from '@/scripts/sound.js';
 
 const props = defineProps<{
 	reaction: string;
@@ -53,6 +54,7 @@ const toggleReaction = () => {
 			noteId: props.note.id,
 		}).then(() => {
 			if (oldReaction !== props.reaction) {
+				sound.play('reaction');
 				os.api("notes/reactions/create", {
 					noteId: props.note.id,
 					reaction: props.reaction,
@@ -60,6 +62,8 @@ const toggleReaction = () => {
 			}
 		});
 	} else {
+		sound.play('reaction');
+
 		os.api("notes/reactions/create", {
 			noteId: props.note.id,
 			reaction: props.reaction,

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

@@ -71,6 +71,7 @@ const sounds = ref({
 	chatBg: ColdDeviceStorage.get("sound_chatBg"),
 	antenna: ColdDeviceStorage.get("sound_antenna"),
 	channel: ColdDeviceStorage.get("sound_channel"),
+	reaction: ColdDeviceStorage.get("sound_reaction"),
 });
 
 const soundsTypes = await os.api("get-sounds");

packages/client/src/store.ts

@@ -388,6 +388,7 @@ export class ColdDeviceStorage {
 		sound_chatBg: { type: 'syuilo/waon', volume: 0.5 },
 		sound_antenna: { type: 'syuilo/triple', volume: 0.5 },
 		sound_channel: { type: 'syuilo/square-pico', volume: 0.5 },
+		sound_reaction: { type: 'syuilo/bubble2', volume: 1 },
 	};
 
 	public static watchers = [];