62 lines
2 KiB
React
62 lines
2 KiB
React
|
// @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>
|
||
|
|
);
|
||
|
|
};
|