704452732a
* Add hints if an error occurs subscribing to notifications * Update import (type/linting issue) * disable optimization for debugging * Revert "disable optimization for debugging" This reverts commit 5b837f94e97b7488a7dc565e7f74d399e19c286f. * improve detection of notification support + improve ux / ui surrounding that * update translations
61 lines
2 KiB
JavaScript
61 lines
2 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import * as ICONS from 'constants/icons';
|
|
import Icon from 'component/common/icon';
|
|
import { Modal } from 'modal/modal';
|
|
import 'scss/component/notifications-blocked.scss';
|
|
|
|
type InlineMessageProps = {
|
|
title: string,
|
|
children: React.Node,
|
|
};
|
|
|
|
const InlineMessage = (props: InlineMessageProps) => {
|
|
const { title, children } = props;
|
|
return (
|
|
<div className="notificationsBlocked">
|
|
<Icon className="notificationsBlocked__icon" color="#E50054" icon={ICONS.ALERT} size={32} />
|
|
<div>
|
|
<span>{title}</span>
|
|
<span className={'notificationsBlocked__subText'}>{children}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const BrowserNotificationsBlocked = () => {
|
|
return (
|
|
<InlineMessage title={__('Heads up: browser notifications are currently blocked in this browser.')}>
|
|
{__('To enable push notifications please configure your browser to allow notifications on odysee.com.')}
|
|
</InlineMessage>
|
|
);
|
|
};
|
|
|
|
export const BrowserNotificationHints = () => {
|
|
return (
|
|
<InlineMessage title={__("Browser notifications aren't supported. Here's a few tips:")}>
|
|
<ul className={'notificationsBlocked__subText notificationsBlocked__subTextList'}>
|
|
<li>{__("Notifications aren't available when in incognito or private mode.")}</li>
|
|
<li>
|
|
{__(
|
|
"On Firefox, notifications won't function if cookies are set to clear on browser close. Please disable or add an exception for Odysee, then refresh."
|
|
)}
|
|
</li>
|
|
<li>{__('For Brave, enable google push notifications in settings.')}</li>
|
|
<li>{__('Check browser settings to see if notifications are disabled or otherwise restricted.')}</li>
|
|
</ul>
|
|
</InlineMessage>
|
|
);
|
|
};
|
|
|
|
type ModalProps = {
|
|
doHideModal: () => void,
|
|
};
|
|
export const BrowserNotificationErrorModal = (props: ModalProps) => {
|
|
const { doHideModal } = props;
|
|
return (
|
|
<Modal type="card" isOpen onAborted={doHideModal}>
|
|
<BrowserNotificationHints />
|
|
</Modal>
|
|
);
|
|
};
|