From 58167210ea2519732fa39fc0824d64d2e39d4679 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 25 May 2022 13:57:51 +0800
Subject: [PATCH] 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.
---
 ui/component/channelContent/view.jsx      |  3 ++
 ui/component/fileTitleSection/view.jsx    |  2 +
 ui/component/geoRestictionInfo/index.js   | 14 +++++++
 ui/component/geoRestictionInfo/style.scss | 26 +++++++++++++
 ui/component/geoRestictionInfo/view.jsx   | 47 +++++++++++++++++++++++
 ui/component/postViewer/view.jsx          |  2 +
 6 files changed, 94 insertions(+)
 create mode 100644 ui/component/geoRestictionInfo/index.js
 create mode 100644 ui/component/geoRestictionInfo/style.scss
 create mode 100644 ui/component/geoRestictionInfo/view.jsx

diff --git a/ui/component/channelContent/view.jsx b/ui/component/channelContent/view.jsx
index 98ba02009..901165aa5 100644
--- a/ui/component/channelContent/view.jsx
+++ b/ui/component/channelContent/view.jsx
@@ -3,6 +3,7 @@ import { SIMPLE_SITE } from 'config';
 import * as CS from 'constants/claim_search';
 import * as ICONS from 'constants/icons';
 import React, { Fragment } from 'react';
+import GeoRestrictionInfo from 'component/geoRestictionInfo';
 import HiddenNsfwClaims from 'component/hiddenNsfwClaims';
 import { useHistory } from 'react-router-dom';
 import Button from 'component/button';
@@ -102,6 +103,8 @@ function ChannelContent(props: Props) {
 
   return (
     <Fragment>
+      <GeoRestrictionInfo uri={uri} />
+
       {!fetching && Boolean(claimsInChannel) && !channelIsBlocked && !channelIsBlackListed && (
         <HiddenNsfwClaims uri={uri} />
       )}
diff --git a/ui/component/fileTitleSection/view.jsx b/ui/component/fileTitleSection/view.jsx
index d52931d2d..03af96299 100644
--- a/ui/component/fileTitleSection/view.jsx
+++ b/ui/component/fileTitleSection/view.jsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { normalizeURI } from 'util/lbryURI';
 import FilePrice from 'component/filePrice';
+import GeoRestrictionInfo from 'component/geoRestictionInfo';
 import ClaimInsufficientCredits from 'component/claimInsufficientCredits';
 import FileSubtitle from 'component/fileSubtitle';
 import ClaimAuthor from 'component/claimAuthor';
@@ -59,6 +60,7 @@ export default function FileTitleSection(props: Props) {
               <span className="badge badge--tag-mature">{__('Mature')}</span>
             </span>
           )}
+          <GeoRestrictionInfo uri={uri} />
         </>
       }
       titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
diff --git a/ui/component/geoRestictionInfo/index.js b/ui/component/geoRestictionInfo/index.js
new file mode 100644
index 000000000..c1198c89a
--- /dev/null
+++ b/ui/component/geoRestictionInfo/index.js
@@ -0,0 +1,14 @@
+import GeoRestrictionInfo from './view';
+import { connect } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { selectGeoRestrictionForUri } from 'redux/selectors/claims';
+
+const select = (state, props) => ({
+  geoRestriction: selectGeoRestrictionForUri(state, props.uri),
+});
+
+const perform = {
+  doOpenModal,
+};
+
+export default connect(select, perform)(GeoRestrictionInfo);
diff --git a/ui/component/geoRestictionInfo/style.scss b/ui/component/geoRestictionInfo/style.scss
new file mode 100644
index 000000000..1c9a5b510
--- /dev/null
+++ b/ui/component/geoRestictionInfo/style.scss
@@ -0,0 +1,26 @@
+// "--color-text-error" is too bright, while "--color-error" isn't adjusted for
+// light theme. Using the value of RED_COLOR from icon.jsx.
+$text-color: #e2495e;
+
+.geo-restriction-info {
+  display: flex;
+  margin: var(--spacing-m) 0;
+  align-items: center;
+  flex-direction: column;
+  background: var(--color-card-background);
+  border-radius: var(--border-radius);
+  color: $text-color;
+}
+
+.geo-restriction-info__container {
+  display: flex;
+  align-items: center;
+  margin-top: var(--spacing-l);
+  margin-bottom: var(--spacing-l);
+}
+
+.geo-restriction-info__title {
+  font-size: var(--font-large);
+  font-style: italic;
+  margin-left: var(--spacing-s);
+}
diff --git a/ui/component/geoRestictionInfo/view.jsx b/ui/component/geoRestictionInfo/view.jsx
new file mode 100644
index 000000000..d07d0716b
--- /dev/null
+++ b/ui/component/geoRestictionInfo/view.jsx
@@ -0,0 +1,47 @@
+// @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>
+  );
+}
diff --git a/ui/component/postViewer/view.jsx b/ui/component/postViewer/view.jsx
index 85c32415c..d1367fb41 100644
--- a/ui/component/postViewer/view.jsx
+++ b/ui/component/postViewer/view.jsx
@@ -4,6 +4,7 @@ import * as ICONS from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
 import { formatCredits } from 'util/format-credits';
 import FileDetails from 'component/fileDetails';
+import GeoRestictionInfo from 'component/geoRestictionInfo';
 import ClaimAuthor from 'component/claimAuthor';
 import FileTitle from 'component/fileTitle';
 import FileActions from 'component/fileActions';
@@ -53,6 +54,7 @@ function PostViewer(props: Props) {
   return (
     <div className="post">
       <FileTitle uri={uri} className="post__title" />
+      <GeoRestictionInfo uri={uri} />
       <div
         className={classnames('post__info', {
           'post__info--expanded': expand !== EXPAND.NONE,