import { Row, Col, Spin, Typography, Button } from 'antd';
import React, { FC, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { accessTokenAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
import {
registerWebPushNotifications,
saveNotificationRegistration,
} from '../../../services/notifications-service';
import styles from './BrowserNotifyModal.module.scss';
import isPushNotificationSupported from '../../../utils/browserPushNotifications';
const { Title } = Typography;
const NotificationsNotSupported = () => (
Browser notifications are not supported in your browser.
);
export type PermissionPopupPreviewProps = {
start: () => void;
};
const PermissionPopupPreview: FC = ({ start }) => (
{window.location.toString()} wants to
Show notifications
);
const NotificationsEnabled = () => (
Notifications are enabled
To disable push notifications from {window.location.hostname.toString()} access your browser
permissions for this site and turn off notifications.
Learn more.
);
export const BrowserNotifyModal = () => {
const [error, setError] = useState(null);
const accessToken = useRecoilValue(accessTokenAtom);
const config = useRecoilValue(clientConfigStateAtom);
const [browserPushPermissionsPending, setBrowserPushPermissionsPending] =
useState(false);
const notificationsPermitted =
isPushNotificationSupported() && Notification.permission !== 'default';
const { notifications } = config;
const { browser } = notifications;
const { publicKey } = browser;
const browserPushSupported = browser.enabled && isPushNotificationSupported();
// If notification permissions are granted, show user info how to disable them
if (notificationsPermitted) {
return ;
}
const startBrowserPushRegistration = async () => {
// If notification permissions are already denied or granted, don't do anything.
if (isPushNotificationSupported() && Notification.permission !== 'default') {
return;
}
setBrowserPushPermissionsPending(true);
try {
const subscription = await registerWebPushNotifications(publicKey);
saveNotificationRegistration('BROWSER_PUSH_NOTIFICATION', subscription, accessToken);
setError(null);
} catch (e) {
setError(
`Error registering for live notifications: ${e.message}. Make sure you're not inside a private browser environment or have previously disabled notifications for this stream.`,
);
}
setBrowserPushPermissionsPending(false);
};
if (!browserPushSupported) {
return ;
}
return (
Browser Notifications
Get notified right in the browser each time this stream goes live. Blah blah blah more
description text goes here.
{error}