tweaked sounds on some buttons, renamed play_sound to playSound

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),
+        "post": new Audio(sound_success),
-        "boost": 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];

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);

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');
     }
 

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>

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}`}>

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/>

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>

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>