work on ui, settings, sounds

targoninc · Jun 1, 2024 · 1eae7ee · 1eae7ee
1 parent f79acef
commit 1eae7ee
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 25 deletions.
diff --git a/ui/actions.mjs b/ui/actions.mjs
@@ -18,20 +18,21 @@ export function toast(message, type = "info", timeout = 5) {
     }, timeout * 1000);
 }
 
-export function notify(image, title, subtitle, message, timeout = 7) {
+export function notify(image, title, subtitle, message, onclick = () => {}, timeout = 7) {
     const notification = create("div")
         .classes("card", "flex", "notification")
         .styles("animation-duration", `${timeout}s`)
+        .onclick(onclick)
         .children(
             create("img")
                 .classes("notification-image")
                 .src(image)
                 .build(),
             create("div")
-                .classes("flex-v", "notification-content")
+                .classes("flex-v", "no-gap", "notification-content")
                 .children(
                     create("div")
-                        .classes("notification-title")
+                        .classes("notification-title", "bold")
                         .text(title)
                         .build(),
                     create("div")
@@ -111,4 +112,9 @@ export function toggleInstanceEnabled(instances, instance) {
             toast("Failed to toggle instance enabled", "negative");
         }
     });
+}
+
+export function playSound(name) {
+    const audio = new Audio(`/sounds/${name}.mp3`);
+    audio.play();
 }
diff --git a/ui/api/Hooks.mjs b/ui/api/Hooks.mjs
@@ -1,9 +1,9 @@
 import {Api} from "./Api.mjs";
-import {toast} from "../actions.mjs";
+import {playSound, testImage, toast} from "../actions.mjs";
 import {signal, store} from "https://fjs.targoninc.com/f.js";
 import {Live} from "../live/Live.mjs";
 import {Store} from "./Store.mjs";
-import {localNotificationsEnabled, systemNotificationsEnabled} from "./LocalSetting.mjs";
+import {currentSound, localNotificationsEnabled, soundEnabled, systemNotificationsEnabled} from "./LocalSetting.mjs";
 import {Notifier} from "../live/Notifier.mjs";
 
 export class Hooks {
@@ -76,9 +76,12 @@ export function addMessage(channel, message) {
     if (systemNotificationsEnabled()) {
         new Notification(`New message from ${message.sender.displayname ?? message.sender.username}`, {
             body: message.text,
-            icon: message.sender.avatar,
+            icon: message.sender.avatar ?? testImage,
         });
     }
+    if (soundEnabled()) {
+        playSound(currentSound());
+    }
 }
 
 export function removeMessage(channel, messageId) {

diff --git a/ui/api/LocalSetting.mjs b/ui/api/LocalSetting.mjs
@@ -40,3 +40,19 @@ export function setSystemNotificationsEnabled(enabled) {
     }
     LocalSetting.set("systemNotifications", enabled);
 }
+
+export function soundEnabled() {
+    return LocalSetting.getBoolean("sound");
+}
+
+export function setSoundEnabled(enabled) {
+    LocalSetting.set("sound", enabled);
+}
+
+export function currentSound() {
+    return LocalSetting.getString("currentSound");
+}
+
+export function setCurrentSound(sound) {
+    LocalSetting.set("currentSound", sound);
+}
diff --git a/ui/base.css b/ui/base.css
@@ -10,6 +10,7 @@
     --white: #efe9e7ff;
     --white-2: #e7ddda;
     --white-3: #ded2ce;
+    --white-4: #d6c9c5;
     --blue: #16bac5ff;
     --green: #6a994eff;
     --red: #bc4749ff;
@@ -32,6 +33,7 @@
         --bg: var(--white);
         --bg-2: var(--white-2);
         --bg-3: var(--white-3);
+        --bg-4: var(--white-4);
         --text: var(--black);
         --text-2: var(--black-2);
         --text-3: var(--black-3);
@@ -51,6 +53,7 @@
         --text: var(--white);
         --text-2: var(--white-2);
         --text-3: var(--white-3);
+        --text-4: var(--white-4);
     }
 }
 

diff --git a/ui/classes.css b/ui/classes.css
@@ -392,6 +392,12 @@
 
 .notification {
     animation: fade-out var(--animation-time) forwards;
+    transition: transform var(--animation-time) ease;
+    cursor: pointer;
+}
+
+.notification:hover {
+    transform: translateX(-3px);
 }
 
 @keyframes fade-out {
@@ -419,4 +425,8 @@
 
 .notification-title, .notification-subtitle, .notification-message {
     word-wrap: anywhere;
+}
+
+.notification-message {
+    font-size: 0.8em;
 }
diff --git a/ui/components/channel.mjs b/ui/components/channel.mjs
@@ -25,6 +25,7 @@ export class ChannelTemplates {
                     .classes("flex-v", "no-gap")
                     .children(
                         create("span")
+                            .classes("bold")
                             .text(channel.name)
                             .build(),
                         create("span")

diff --git a/ui/components/common.mjs b/ui/components/common.mjs
@@ -52,18 +52,29 @@ export class CommonTemplates {
             ).build();
     }
 
-    static select(options, onchange) {
+    static select(label, options, value, onchange) {
         return create("div")
-            .classes("select")
+            .classes("flex", "align-center")
             .children(
-                create("select")
-                    .onchange(onchange)
+                create("span")
+                    .text(label)
+                    .build(),
+                create("div")
+                    .classes("select")
                     .children(
-                        ...options.map(option => {
-                            return create("option")
-                                .text(option)
-                                .build();
-                        })
+                        create("select")
+                            .onchange(onchange)
+                            .children(
+                                ...options.map(option => {
+                                    const selected = computedSignal(value, value => option.value === value);
+
+                                    return create("option")
+                                        .text(option.text)
+                                        .value(option.value)
+                                        .selected(selected)
+                                        .build();
+                                })
+                            ).build()
                     ).build()
             ).build();
     }

diff --git a/ui/components/layout.mjs b/ui/components/layout.mjs
@@ -39,6 +39,7 @@ export class LayoutTemplates {
             .classes("flex-pane")
             .styles("min-width", minWidth)
             .styles("max-width", maxWidth)
+            .styles("width", maxWidth)
             .children(content)
             .id(id)
             .build();

diff --git a/ui/components/pages/settings.mjs b/ui/components/pages/settings.mjs
@@ -7,8 +7,9 @@ import {popup, removePopups, testImage, toast, toggleAllowlist, toggleInstanceEn
 import {PopupComponents} from "../popup.mjs";
 import {Popups} from "../../api/Popups.mjs";
 import {
-    localNotificationsEnabled,
-    setLocalNotificationsEnabled, setSystemNotificationsEnabled,
+    currentSound,
+    localNotificationsEnabled, setCurrentSound,
+    setLocalNotificationsEnabled, setSoundEnabled, setSystemNotificationsEnabled, soundEnabled,
     systemNotificationsEnabled
 } from "../../api/LocalSetting.mjs";
 
@@ -373,13 +374,27 @@ export class SettingsComponent {
 
     static settings() {
         const notifs_on = signal(localNotificationsEnabled());
+        const notifs_color = computedSignal(notifs_on, on => on ? "var(--green)" : "var(--red)");
         notifs_on.subscribe(v => {
             setLocalNotificationsEnabled(v ? "true" : "false");
         });
         const system_notifs_on = signal(systemNotificationsEnabled());
+        const system_notifs_color = computedSignal(system_notifs_on, on => on ? "var(--green)" : "var(--red)");
         system_notifs_on.subscribe(v => {
             setSystemNotificationsEnabled(v);
         });
+        const notifText = computedSignal(notifs_on, on => on ? "Disable local notifications (in-window popups)" : "Enable local notifications (in-window popups)");
+        const systemNotifText = computedSignal(system_notifs_on, on => on ? "Disable system notifications" : "Enable system notifications");
+        const sound_on = signal(soundEnabled());
+        sound_on.subscribe(v => {
+            setSoundEnabled(v);
+        });
+        const sound_color = computedSignal(sound_on, on => on ? "var(--green)" : "var(--red)");
+        const soundText = computedSignal(sound_on, on => on ? "Disable sound" : "Enable sound");
+        const sound = signal(currentSound());
+        sound.subscribe(v => {
+            setCurrentSound(v);
+        });
 
         return create("div")
             .classes("flex-v", "card")
@@ -390,12 +405,17 @@ export class SettingsComponent {
                 create("div")
                     .classes("flex-v")
                     .children(
-                        CommonTemplates.checkbox("notifications_check", "Enable local notifications (in-window popups)", notifs_on, (e) => {
-                            notifs_on.value = e.target.checked;
-                        }),
-                        CommonTemplates.checkbox("system_notifications_check", "Enable system notifications (browser popups)", system_notifs_on, (e) => {
-                            system_notifs_on.value = e.target.checked;
-                        }),
+                        CommonTemplates.circleToggle(notifText, notifs_color, () => { notifs_on.value = !notifs_on.value }),
+                        CommonTemplates.circleToggle(systemNotifText, system_notifs_color, () => { system_notifs_on.value = !system_notifs_on.value }),
+                        CommonTemplates.circleToggle(soundText, sound_color, () => { sound_on.value = !sound_on.value }),
+                        CommonTemplates.select("New message sound", [
+                            { text: "Bloom", value: "bloom" },
+                            { text: "Chord", value: "chord" },
+                            { text: "Drop", value: "drop" },
+                            { text: "Sky", value: "sky" },
+                        ], sound, (e) => {
+                            sound.value = e.target.value;
+                        })
                     ).build(),
             ).build();
     }

diff --git a/ui/live/Notifier.mjs b/ui/live/Notifier.mjs
@@ -10,9 +10,15 @@ export class Notifier {
             return;
         }
 
+        const reference = channel.type === "dm" ? "DM" : channel.name;
         notify(message.sender.avatar ?? testImage,
             message.sender.displayname ?? message.sender.username,
-            "in " + channel.name,
-            truncate(message.text, 150));
+            "in " + reference,
+            truncate(message.text, 150),
+            () => {
+                if (channelId !== Store.get('currentChannelId')) {
+                    window.router.navigate(`/chat/${channelId}`);
+                }
+            });
     }
 }
diff --git a/ui/sounds/bloom.mp3 b/ui/sounds/bloom.mp3
diff --git a/ui/sounds/chord.mp3 b/ui/sounds/chord.mp3
diff --git a/ui/sounds/drop.mp3 b/ui/sounds/drop.mp3
diff --git a/ui/sounds/sky.mp3 b/ui/sounds/sky.mp3