Port settings.

2026-03-07 01:15:28 +00:00 · 2021-06-19 22:37:12 +01:00
parent b4bc2262ae
commit 31d8950ea1
48 changed files with 3056 additions and 106 deletions
--- a/src/pages/settings/panes/Notifications.tsx
+++ b/src/pages/settings/panes/Notifications.tsx
@@ -0,0 +1,142 @@
+import { Text } from "preact-i18n";
+import styles from "./Panes.module.scss";
+import Checkbox from "../../../components/ui/Checkbox";
+import { connectState } from "../../../redux/connector";
+import { WithDispatcher } from "../../../redux/reducers";
+import { useContext, useEffect, useState } from "preact/hooks";
+import { urlBase64ToUint8Array } from "../../../lib/conversion";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { NotificationOptions } from "../../../redux/reducers/settings";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+
+interface Props {
+    options?: NotificationOptions;
+}
+
+export function Component(props: Props & WithDispatcher) {
+    const client = useContext(AppContext);
+    const { openScreen } = useIntermediate();
+    const [pushEnabled, setPushEnabled] = useState<undefined | boolean>(
+        undefined
+    );
+
+    // Load current state of pushManager.
+    useEffect(() => {
+        navigator.serviceWorker?.getRegistration().then(async registration => {
+            const sub = await registration?.pushManager?.getSubscription();
+            setPushEnabled(sub !== null && sub !== undefined);
+        });
+    }, []);
+
+    return (
+        <div className={styles.notifications}>
+            <h3>
+                <Text id="app.settings.pages.notifications.push_notifications" />
+            </h3>
+            <Checkbox
+                disabled={!("Notification" in window)}
+                checked={props.options?.desktopEnabled ?? false}
+                onChange={async desktopEnabled => {
+                    if (desktopEnabled) {
+                        let permission = await Notification.requestPermission();
+                        if (permission !== "granted") {
+                            return openScreen({
+                                id: "error",
+                                error: "DeniedNotification"
+                            });
+                        }
+                    }
+
+                    props.dispatcher({
+                        type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
+                        options: { desktopEnabled }
+                    });
+                }}
+            >
+                <Text id="app.settings.pages.notifications.enable_desktop" />
+                <p>
+                    <Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
+                </p>
+            </Checkbox>
+            <Checkbox
+                disabled={typeof pushEnabled === "undefined"}
+                checked={pushEnabled ?? false}
+                onChange={async pushEnabled => {
+                    const reg = await navigator.serviceWorker?.getRegistration();
+                    if (reg) {
+                        if (pushEnabled) {
+                            const sub = await reg.pushManager.subscribe({
+                                userVisibleOnly: true,
+                                applicationServerKey: urlBase64ToUint8Array(
+                                    client.configuration!.vapid
+                                )
+                            });
+
+                            // tell the server we just subscribed
+                            const json = sub.toJSON();
+                            if (json.keys) {
+                                client.req("POST", "/push/subscribe", {
+                                    endpoint: sub.endpoint,
+                                    ...json.keys
+                                } as any);
+                                setPushEnabled(true);
+                            }
+                        } else {
+                            const sub = await reg.pushManager.getSubscription();
+                            sub?.unsubscribe();
+                            setPushEnabled(false);
+
+                            client.req("POST", "/push/unsubscribe");
+                        }
+                    }
+                }}
+            >
+                <Text id="app.settings.pages.notifications.enable_push" />
+                <p>
+                    <Text id="app.settings.pages.notifications.descriptions.enable_push" />
+                </p>
+            </Checkbox>
+            <h3>
+                <Text id="app.settings.pages.notifications.sounds" />
+            </h3>
+            <Checkbox
+                checked={props.options?.soundEnabled ?? true}
+                onChange={soundEnabled =>
+                    props.dispatcher({
+                        type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
+                        options: { soundEnabled }
+                    })
+                }
+            >
+                <Text id="app.settings.pages.notifications.enable_sound" />
+                <p>
+                    <Text id="app.settings.pages.notifications.descriptions.enable_sound" />
+                </p>
+            </Checkbox>
+            <Checkbox
+                checked={props.options?.outgoingSoundEnabled ?? true}
+                onChange={outgoingSoundEnabled =>
+                    props.dispatcher({
+                        type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
+                        options: { outgoingSoundEnabled }
+                    })
+                }
+            >
+                <Text id="app.settings.pages.notifications.enable_outgoing_sound" />
+                <p>
+                    <Text id="app.settings.pages.notifications.descriptions.enable_outgoing_sound" />
+                </p>
+            </Checkbox>
+        </div>
+    );
+}
+
+export const Notifications = connectState(
+    Component,
+    state => {
+        return {
+            options: state.settings.notification
+        };
+    },
+    true
+);