41 lines
1.5 KiB
React
41 lines
1.5 KiB
React
|
// @flow
|
||
|
|
import React from 'react';
|
||
|
|
import * as ICONS from 'constants/icons';
|
||
|
|
import SettingsRow from 'component/settingsRow';
|
||
|
|
import { FormField } from 'component/common/form';
|
||
|
|
import useBrowserNotifications from '$web/component/browserNotificationSettings/use-browser-notifications';
|
||
|
|
import 'scss/component/notifications-blocked.scss';
|
||
|
|
import Icon from 'component/common/icon';
|
||
|
|
|
||
|
|
const BrowserNotificationsBlocked = () => {
|
||
|
|
return (
|
||
|
|
<div className="notificationsBlocked">
|
||
|
|
<Icon className="notificationsBlocked__icon" color="#E50054" icon={ICONS.ALERT} size={32} />
|
||
|
|
<div>
|
||
|
|
<span>{__('Heads up: browser notifications are currently blocked in this browser.')}</span>
|
||
|
|
<span className={'notificationsBlocked__subText'}>
|
||
|
|
{__('To enable push notifications please configure your browser to allow notifications on odysee.com.')}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const BrowserNotificationSettings = () => {
|
||
|
|
const { pushSupported, pushEnabled, pushPermission, pushToggle } = useBrowserNotifications();
|
||
|
|
|
||
|
|
if (!pushSupported) return null;
|
||
|
|
if (pushPermission === 'denied') return <BrowserNotificationsBlocked />;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SettingsRow
|
||
|
|
title={__('Browser Notifications')}
|
||
|
|
subtitle={__("Receive push notifications in this browser, even when you're not on odysee.com")}
|
||
|
|
>
|
||
|
|
<FormField type="checkbox" name="browserNotification" onChange={pushToggle} checked={pushEnabled} />
|
||
|
|
</SettingsRow>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BrowserNotificationSettings;
|