Settings: Link notification sounds to playSound.

Fix: Restore hooks.ts patch, additionally use numbers.

src/context/Settings.tsx

@@ -4,28 +4,47 @@
 //
 // Replace references to SettingsContext with connectState in the future
 // if it does cause problems though.
+//
+// This now also supports Audio stuff.
 
-import { Settings } from "../redux/reducers/settings";
+import { DEFAULT_SOUNDS, Settings, SoundOptions } from "../redux/reducers/settings";
+import { playSound, Sounds } from "../assets/sounds/Audio";
 import { connectState } from "../redux/connector";
+import defaultsDeep from "lodash.defaultsdeep";
 import { Children } from "../types/Preact";
 import { createContext } from "preact";
+import { useMemo } from "preact/hooks";
 
 export const SettingsContext = createContext<Settings>({} as any);
+export const SoundContext = createContext<(sound: Sounds) => void>({} as any);
 
 interface Props {
     children?: Children,
     settings: Settings
 }
 
-function Settings(props: Props) {
+function Settings({ settings, children }: Props) {
+    console.info(settings.notification);
+    const play = useMemo(() => {
+        const enabled: SoundOptions = defaultsDeep(settings.notification ?? {}, DEFAULT_SOUNDS);
+        return (sound: Sounds) => {
+            console.info('check if we can play sound', enabled[sound]);
+            if (enabled[sound]) {
+                playSound(sound);
+            }
+        };
+    }, [ settings.notification ]);
+
     return (
-        <SettingsContext.Provider value={props.settings}>
-            { props.children }
+        <SettingsContext.Provider value={settings}>
+            <SoundContext.Provider value={play}>
+                { children }
+            </SoundContext.Provider>
         </SettingsContext.Provider>
     )
 }
 
-export default connectState(Settings, state => {
+export default connectState<Omit<Props, 'settings'>>(Settings, state => {
     return {
         settings: state.settings
     }

src/context/Voice.tsx

@@ -5,6 +5,7 @@ import { AppContext } from "./revoltjs/RevoltClient";
 import type VoiceClient from "../lib/vortex/VoiceClient";
 import type { ProduceType, VoiceUser } from "../lib/vortex/Types";
 import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { SoundContext } from "./Settings";
 
 export enum VoiceStatus {
     LOADING = 0,
@@ -106,6 +107,7 @@ export default function Voice({ children }: Props) {
                 } catch (error) {
                     console.error(error);
                     setStatus(VoiceStatus.READY);
+                    return;
                 }
 
                 setStatus(VoiceStatus.CONNECTED);
@@ -154,6 +156,8 @@ export default function Voice({ children }: Props) {
     }, [ client ]);
 
     const { forceUpdate } = useForceUpdate();
+    const playSound = useContext(SoundContext);
+
     useEffect(() => {
         if (!client?.supported()) return;
 
@@ -164,8 +168,14 @@ export default function Voice({ children }: Props) {
         client.on("startProduce",  forceUpdate);
         client.on("stopProduce", forceUpdate);
 
-        client.on("userJoined", forceUpdate);
-        client.on("userLeft", forceUpdate);
+        client.on("userJoined", () => {
+            playSound('call_join');
+            forceUpdate();
+        });
+        client.on("userLeft", () => {
+            playSound('call_leave');
+            forceUpdate();
+        });
         client.on("userStartProduce", forceUpdate);
         client.on("userStopProduce", forceUpdate);
         client.on("close", forceUpdate);

src/context/index.tsx

@@ -4,23 +4,26 @@ import { BrowserRouter as Router } from "react-router-dom";
 
 import Intermediate from './intermediate/Intermediate';
 import Client from './revoltjs/RevoltClient';
-import Voice from "./Voice";
+import Settings from "./Settings";
 import Locale from "./Locale";
+import Voice from "./Voice";
 import Theme from "./Theme";
 
 export default function Context({ children }: { children: Children }) {
     return (
         <Router>
             <State>
-                <Locale>
-                    <Intermediate>
-                        <Client>
-                            <Voice>
-                                <Theme>{children}</Theme>
-                            </Voice>
-                        </Client>
-                    </Intermediate>
-                </Locale>
+                <Settings>
+                    <Locale>
+                        <Intermediate>
+                            <Client>
+                                <Voice>
+                                    <Theme>{children}</Theme>
+                                </Voice>
+                            </Client>
+                        </Intermediate>
+                    </Locale>
+                </Settings>
             </State>
         </Router>
     );

src/context/revoltjs/Notifications.tsx

@@ -1,10 +1,10 @@
 import { decodeTime } from "ulid";
+import { SoundContext } from "../Settings";
 import { AppContext } from "./RevoltClient";
 import { useTranslation } from "../../lib/i18n";
 import { Users } from "revolt.js/dist/api/objects";
 import { useContext, useEffect } from "preact/hooks";
 import { connectState } from "../../redux/connector";
-import { playSound } from "../../assets/sounds/Audio";
 import { Message, SYSTEM_USER_ID, User } from "revolt.js";
 import { NotificationOptions } from "../../redux/reducers/settings";
 import { Route, Switch, useHistory, useParams } from "react-router-dom";
@@ -27,8 +27,6 @@ async function createNotification(title: string, options: globalThis.Notificatio
 function Notifier(props: Props) {
     const translate = useTranslation();
     const showNotification = props.options?.desktopEnabled ?? false;
-    // const playIncoming = props.options?.soundEnabled ?? true;
-    // const playOutgoing = props.options?.outgoingSoundEnabled ?? true;
 
     const client = useContext(AppContext);
     const { guild: guild_id, channel: channel_id } = useParams<{
@@ -36,13 +34,13 @@ function Notifier(props: Props) {
         channel: string;
     }>();
     const history = useHistory();
+    const playSound = useContext(SoundContext);
 
     async function message(msg: Message) {
         if (msg.author === client.user!._id) return;
         if (msg.channel === channel_id && document.hasFocus()) return;
         if (client.user?.status?.presence === Users.Presence.Busy) return;
 
-        // Sounds.playInbound();
         playSound('message');
         if (!showNotification) return;
 

src/context/revoltjs/hooks.ts

@@ -11,8 +11,9 @@ export interface HookContext {
 export function useForceUpdate(context?: HookContext): HookContext {
     const client = useContext(AppContext);
     if (context) return context;
-    /*const H = useState(undefined);
-    var updateState: (_: undefined) => void;
+
+    const H = useState(0);
+    var updateState: (_: number) => void;
     if (Array.isArray(H)) {
         let [, u] = H;
         updateState = u;
@@ -20,9 +21,8 @@ export function useForceUpdate(context?: HookContext): HookContext {
         console.warn('Failed to construct using useState.');
         console.warn(H);
         updateState = ()=>{};
-    }*/
+    }
 
-    const [, updateState] = useState(0);
     return { client, forceUpdate: () => updateState(Math.random()) };
 }
 
@@ -99,7 +99,7 @@ export function useDMs(context?: HookContext) {
 
     return map
         .toArray()
-        .filter(x => x.channel_type === 'DirectMessage' || x.channel_type === 'Group' || x.channel_type === 'SavedMessages') as (Channels.GroupChannel | Channels.DirectMessageChannel | Channels.SavedMessagesChannel)[];
+        .filter(x => (x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group' || x.channel_type === 'SavedMessages') as (Channels.GroupChannel | Channels.DirectMessageChannel | Channels.SavedMessagesChannel)[];
 }
 
 export function useUserPermission(id: string, context?: HookContext) {