From 12f38a67c585957ee9370bbe2e526317a66750b6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 14 Jul 2024 03:25:34 -0600
Subject: [PATCH] Add sound to reactions

Signed-off-by: limepotato <limepot@protonmail.ch>
---
 locales/en-US.yml                                             | 1 +
 packages/client/src/components/MkNote.vue                     | 3 +++
 packages/client/src/components/MkNoteDetailed.vue             | 3 +++
 packages/client/src/components/MkReactionsViewer.reaction.vue | 4 ++++
 packages/client/src/pages/settings/sounds.vue                 | 1 +
 packages/client/src/store.ts                                  | 1 +
 6 files changed, 13 insertions(+)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 3fd04d50e..927a21bf7 100644
--- a/locales/en-US.yml
+++ b/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"
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index baa34ffa9..c4b036aee 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/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,
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index d3cbf19a1..40ff7d1e1 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/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,
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 9c8177074..fe4f31cef 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/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,
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index bc890a569..d0dc9582d 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/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");
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index abfea8f43..abe15bd12 100644
--- a/packages/client/src/store.ts
+++ b/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 = [];