From b9445cf832afb2b6550b5dfcc87ee4b87f4d11c5 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Mon, 8 Jul 2024 11:56:26 +0100
Subject: [PATCH] tweaked sounds on some buttons, renamed play_sound to
 playSound

---
 src/lib/sound.js                      |  6 +++---
 src/lib/stores/compose.js             |  4 ++++
 src/lib/ui/Button.svelte              |  4 ++--
 src/lib/ui/Composer.svelte            |  5 ++++-
 src/lib/ui/Navigation.svelte          |  4 ++--
 src/lib/ui/post/ActionBar.svelte      | 11 ++++++++---
 src/lib/ui/post/ActionButton.svelte   |  4 ++--
 src/lib/ui/post/ReactionButton.svelte |  4 ++--
 8 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/stores/compose.js

diff --git a/src/lib/sound.js b/src/lib/sound.js
index 3aa0e58..377b833 100644
--- a/src/lib/sound.js
+++ b/src/lib/sound.js
@@ -6,12 +6,12 @@ let sounds;
 if (typeof Audio !== typeof undefined) {
     sounds = {
         "default": new Audio(sound_log),
-        "post": new Audio(sound_hello),
-        "boost": new Audio(sound_success),
+        "post": new Audio(sound_success),
+        "boost": new Audio(sound_hello),
     };
 }
 
-export function play_sound(name) {
+export function playSound(name) {
     if (name === false) return;
     if (!name) name = "default";
     const sound = sounds[name];
diff --git a/src/lib/stores/compose.js b/src/lib/stores/compose.js
new file mode 100644
index 0000000..2fe3b96
--- /dev/null
+++ b/src/lib/stores/compose.js
@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const show = writable(false);
+export const reply_post = writable(null);
diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte
index ea68fc4..22e4d87 100644
--- a/src/lib/ui/Button.svelte
+++ b/src/lib/ui/Button.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { play_sound } from '../sound.js';
+    import { playSound } from '../sound.js';
     import { createEventDispatcher } from 'svelte';
     import { afterUpdate } from 'svelte';
 
@@ -21,7 +21,7 @@
             location = href;
             return;
         }
-        play_sound(sound);
+        playSound(sound);
         dispatch('click');
     }
 
diff --git a/src/lib/ui/Composer.svelte b/src/lib/ui/Composer.svelte
index 60e18ed..b290d14 100644
--- a/src/lib/ui/Composer.svelte
+++ b/src/lib/ui/Composer.svelte
@@ -6,6 +6,7 @@
     import { parsePost } from '$lib/post.js';
     import { timeline } from '$lib/timeline.js';
     import { createEventDispatcher } from 'svelte';
+    import { playSound } from '$lib/sound';
 
     import Button from '@cf/ui/Button.svelte';
     import PostIcon from '@cf/icons/post.svg';
@@ -67,6 +68,8 @@
         let new_post_parsed = await parsePost(new_post);
 
         timeline.update(current => [new_post_parsed, ...current]);
+
+        playSound("post");
         dispatch("compose_finished")
     }
 
@@ -140,7 +143,7 @@
                 </svelte:fragment>
             </Button>
         </div>
-        <Button filled={true} centered={true} class="postbtn" on:click={buildPost}>
+        <Button filled={true} centered={true} class="postbtn" on:click={buildPost} sound={false}>
             <svelte:fragment slot="icon">
                 <PostIcon/>
             </svelte:fragment>
diff --git a/src/lib/ui/Navigation.svelte b/src/lib/ui/Navigation.svelte
index fe2c2f8..a5bedfd 100644
--- a/src/lib/ui/Navigation.svelte
+++ b/src/lib/ui/Navigation.svelte
@@ -3,7 +3,7 @@
     import { account } from '$lib/stores/account.js';
     import { server } from '$lib/client/server.js';
     import { app } from '$lib/client/app.js';
-    import { play_sound } from '$lib/sound.js';
+    import { playSound } from '$lib/sound.js';
     import { getTimeline } from '$lib/timeline.js';
     import { getNotifications } from '$lib/notifications.js';
     import { goto } from '$app/navigation';
@@ -169,7 +169,7 @@
         </div>
 
         <div id="account-button">
-            <img src={$account.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
+            <img src={$account.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => playSound()}>
             <div class="account-name" aria-hidden="true">
                 <a href={$account.url} class="nickname" title={$account.nickname}>{@html $account.rich_name}</a>
                 <span class="username" title={`@${$account.username}@${$account.host}`}>
diff --git a/src/lib/ui/post/ActionBar.svelte b/src/lib/ui/post/ActionBar.svelte
index ebaccb9..5a98d4f 100644
--- a/src/lib/ui/post/ActionBar.svelte
+++ b/src/lib/ui/post/ActionBar.svelte
@@ -5,6 +5,7 @@
     import { account } from '@cf/store/account';
     import { timeline } from '$lib/timeline';
     import { parseReactions } from '$lib/post';
+    import { playSound } from '$lib/sound';
 
     import ActionButton from './ActionButton.svelte';
 
@@ -22,10 +23,14 @@
         if (!$app || !$app.token) return;
 
         let data;
-        if (post.boosted)
+        if (post.boosted) {
+            playSound();
             data = await api.unboostPost($server.host, $app.token, post.id);
-        else
+        } else {
+            playSound("boost");
             data = await api.boostPost($server.host, $app.token, post.id);
+        }
+
         if (!data) {
             console.error(`Failed to boost post ${post.id}`);
             return;
@@ -72,7 +77,7 @@
     <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
         <ReplyIcon/>
     </ActionButton>
-    <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost" disabled={!$account}>
+    <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} disabled={!$account}>
         <RepostIcon/>
         <svelte:fragment slot="activeIcon">
             <RepostIcon/>
diff --git a/src/lib/ui/post/ActionButton.svelte b/src/lib/ui/post/ActionButton.svelte
index d338c19..c502c47 100644
--- a/src/lib/ui/post/ActionButton.svelte
+++ b/src/lib/ui/post/ActionButton.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { play_sound } from '../../sound.js';
+    import { playSound } from '../../sound.js';
     import { createEventDispatcher } from 'svelte';
     const dispatch = createEventDispatcher();
 
@@ -13,7 +13,7 @@
 
     function click() {
         if (disabled) return;
-        play_sound(sound);
+        playSound(sound);
         dispatch('click');
     }
 </script>
diff --git a/src/lib/ui/post/ReactionButton.svelte b/src/lib/ui/post/ReactionButton.svelte
index c6355f8..6b933b1 100644
--- a/src/lib/ui/post/ReactionButton.svelte
+++ b/src/lib/ui/post/ReactionButton.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { play_sound } from '../../sound.js';
+    import { playSound } from '../../sound.js';
     import { createEventDispatcher } from 'svelte';
     const dispatch = createEventDispatcher();
 
@@ -12,7 +12,7 @@
     export let sound = "default";
 
     function click() {
-        play_sound(sound);
+        playSound(sound);
         dispatch('click');
     }
 </script>