03f69eff86
* fix type error fix is subscribed check - Persist subscription data locally - add / remove subscription during log in / out - Use store directly in hook Add toast error if subscription fails Revert removal of v2 hotfix linting issue Add custom notification handler - fix isSupported flag - make icon color compatible with light/dark theme - fix icon on notifications blocked banner wip: add push notification banner to notifications page. - ignore failed deletions via internal API - add ua parsing package - add more robust meta data to token save refactor naming + add push toggle to notification button shift some code around update css naming o proper BEM notation update notifications UI remove now unneeded util function Update push notification system to sue firebase sdk separate service worker webpack bundling update service worker to use firebase sdk Add firebase config Add firebase and remove filemanager Stub out the basics for browser push notifications. * fix safari * try smaller image for badge * add token validation with server, refactor code * remove param * add special icon for web notification badge * add translations * add missing trans for toast error * add pushRequest method that will not prompt users who have subscribed but since disabled notifications in the settings.
40 lines
1.5 KiB
JavaScript
40 lines
1.5 KiB
JavaScript
// @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;
|