lbry-desktop/ui/component/geoRestictionInfo/view.jsx
infinite-persistence 58167210ea Geoblock: show warning for own content
## Issue
Contents aren't block if you own them, but need to tell creator that is it blocked for others.

## Change
- Show a banner on Content and Channel Page for this scenario.
- Hover tooltip is available for the full text. For mobile, tapping it reveals the message.

Note that this only applies to the locale from where the creator is viewing it from. We can ignore locale, but would then need to display _all_ geo-restrictions related to the content in a list.
2022-05-25 08:51:08 -04:00

47 lines
1.3 KiB
JavaScript

// @flow
import React from 'react';
import './style.scss';
import Card from 'component/common/card';
import Icon from 'component/common/icon';
import Tooltip from 'component/common/tooltip';
import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
import { parseURI } from 'util/lbryURI';
type Props = {
uri: string,
geoRestriction: ?GeoRestriction,
doOpenModal: (string, {}) => void,
};
export default function GeoRestrictionInfo(props: Props) {
const { uri, geoRestriction, doOpenModal } = props;
if (!geoRestriction) {
return null;
}
const { isChannel } = parseURI(uri);
const title = __(isChannel ? 'Channel unavailable' : 'Content unavailable');
const msg = <Card title={title} subtitle={__(geoRestriction.message || '')} />;
function showMsg() {
doOpenModal(MODALS.CONFIRM, {
title: title,
subtitle: __(geoRestriction.message || ''),
onConfirm: (closeModal) => closeModal(),
hideCancel: true,
});
}
return (
<Tooltip title={msg} followCursor>
<div className="geo-restriction-info" onClick={showMsg}>
<div className="geo-restriction-info__container">
<Icon icon={ICONS.EYE_OFF} size={24} />
<span className="geo-restriction-info__title">{title}</span>
</div>
</div>
</Tooltip>
);
}