forked from abner/for-legacy-web
138 lines
5.6 KiB
TypeScript
138 lines
5.6 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
|
|
|
import styles from "./Panes.module.scss";
|
|
import { Text } from "preact-i18n";
|
|
import { useEffect, useState } from "preact/hooks";
|
|
|
|
import { Checkbox, Column } from "@revoltchat/ui";
|
|
|
|
import { urlBase64ToUint8Array } from "../../../lib/conversion";
|
|
|
|
import { useApplicationState } from "../../../mobx/State";
|
|
|
|
import { useClient } from "../../../controllers/client/ClientController";
|
|
import { modalController } from "../../../controllers/modals/ModalController";
|
|
|
|
export const Notifications = observer(() => {
|
|
const client = useClient();
|
|
const settings = useApplicationState().settings;
|
|
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>
|
|
<Column>
|
|
<Checkbox
|
|
disabled={!("Notification" in window)}
|
|
value={settings.get("notifications:desktop", false)!}
|
|
title={
|
|
<Text id="app.settings.pages.notifications.enable_desktop" />
|
|
}
|
|
description={
|
|
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
|
|
}
|
|
onChange={async (desktopEnabled) => {
|
|
if (desktopEnabled) {
|
|
const permission =
|
|
await Notification.requestPermission();
|
|
|
|
if (permission !== "granted") {
|
|
return modalController.push({
|
|
type: "error",
|
|
error: "DeniedNotification",
|
|
});
|
|
}
|
|
}
|
|
|
|
settings.set("notifications:desktop", desktopEnabled);
|
|
}}
|
|
/>
|
|
<Checkbox
|
|
disabled={typeof pushEnabled === "undefined"}
|
|
value={pushEnabled ?? false}
|
|
title={
|
|
<Text id="app.settings.pages.notifications.enable_push" />
|
|
}
|
|
description={
|
|
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
|
|
}
|
|
onChange={async (pushEnabled) => {
|
|
try {
|
|
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.api.post("/push/subscribe", {
|
|
endpoint: sub.endpoint,
|
|
...(json.keys as {
|
|
p256dh: string;
|
|
auth: string;
|
|
}),
|
|
});
|
|
setPushEnabled(true);
|
|
}
|
|
} else {
|
|
const sub =
|
|
await reg.pushManager.getSubscription();
|
|
sub?.unsubscribe();
|
|
setPushEnabled(false);
|
|
|
|
client.api.post("/push/unsubscribe");
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to enable push!", err);
|
|
}
|
|
}}
|
|
/>
|
|
</Column>
|
|
<h3>
|
|
<Text id="app.settings.pages.notifications.sounds" />
|
|
</h3>
|
|
<Column>
|
|
{settings.sounds.getState().map(({ id, enabled }) => (
|
|
<Checkbox
|
|
key={id}
|
|
value={enabled}
|
|
title={
|
|
<Text
|
|
id={`app.settings.pages.notifications.sound.${id}`}
|
|
/>
|
|
}
|
|
onChange={(enabled) =>
|
|
settings.sounds.setEnabled(id, enabled)
|
|
}
|
|
/>
|
|
))}
|
|
</Column>
|
|
</div>
|
|
);
|
|
});
|