Additional geoblock support (#1552)

* Remove claim from channel page when geoblock conditions hits

Ticket: 1100

* Handle geoblocked channel page

## Ticket
1100

## Issue
"If a channel is geoblocked, the entire channel page (even showing titles, etc. would be against the law)"

static/app-strings.json

@@ -2189,6 +2189,7 @@
   "No limit": "No limit",
   "Search results are being filtered by language. Click here to change the setting.": "Search results are being filtered by language. Click here to change the setting.",
   "Content unavailable": "Content unavailable",
+  "Channel unavailable": "Channel unavailable",
   "There are language translations available for your location! Do you want to switch from English?": "There are language translations available for your location! Do you want to switch from English?",
   "Homepage and language translations are available for your location! Do you want to switch?": "Homepage and language translations are available for your location! Do you want to switch?",
   "A homepage is available for your location! Do you want to switch?": "A homepage is available for your location! Do you want to switch?",

ui/component/claimPreview/index.js

@@ -7,6 +7,7 @@ import {
   makeSelectReflectingClaimForUri,
   selectTitleForUri,
   selectDateForUri,
+  selectGeoRestrictionForUri,
 } from 'redux/selectors/claims';
 import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
 import { makeSelectCollectionIsMine } from 'redux/selectors/collections';
@@ -42,6 +43,7 @@ const select = (state, props) => {
     isResolvingRepost: props.uri && selectIsUriResolving(state, props.repostUrl),
     nsfw: claim ? isClaimNsfw(claim) : false,
     banState: selectBanStateForUri(state, props.uri),
+    geoRestriction: selectGeoRestrictionForUri(state, props.uri),
     hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
     isSubscribed: props.uri && selectIsSubscribedForUri(state, props.uri),
     streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),

ui/component/claimPreview/view.jsx

@@ -61,6 +61,7 @@ type Props = {
   type: string,
   nonClickable?: boolean,
   banState: { blacklisted?: boolean, filtered?: boolean, muted?: boolean, blocked?: boolean },
+  geoRestriction: ?GeoRestriction,
   hasVisitedUri: boolean,
   blockedUris: Array<string>,
   actions: boolean | Node | string | number,
@@ -145,6 +146,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     onClick,
     actions,
     banState,
+    geoRestriction,
     includeSupportAction,
     renderActions,
     hideMenu = false,
@@ -277,6 +279,10 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     shouldHide = true;
   }
 
+  if (!shouldHide && !claimIsMine && geoRestriction) {
+    shouldHide = true;
+  }
+
   if (!shouldHide && customShouldHide && claim) {
     if (customShouldHide(claim)) {
       shouldHide = true;
@@ -321,6 +327,10 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     return null;
   }
 
+  if (geoRestriction && !claimIsMine) {
+    return null; // Ignore 'showNullPlaceholder'
+  }
+
   if (placeholder === 'loading' || (uri && !claim && isResolvingUri)) {
     return <ClaimPreviewLoading isChannel={isChannelUri} type={type} />;
   }

ui/component/claimPreviewTile/index.js

@@ -4,6 +4,8 @@ import {
   selectIsUriResolving,
   selectTitleForUri,
   selectDateForUri,
+  selectGeoRestrictionForUri,
+  selectClaimIsMine,
 } from 'redux/selectors/claims';
 import { doFileGet } from 'redux/actions/file';
 import { doResolveUri } from 'redux/actions/claims';
@@ -25,9 +27,11 @@ const select = (state, props) => {
     mediaDuration,
     date: props.uri && selectDateForUri(state, props.uri),
     isResolvingUri: props.uri && selectIsUriResolving(state, props.uri),
+    claimIsMine: props.uri && selectClaimIsMine(state, claim),
     thumbnail: getThumbnailFromClaim(claim),
     title: props.uri && selectTitleForUri(state, props.uri),
     banState: selectBanStateForUri(state, props.uri),
+    geoRestriction: selectGeoRestrictionForUri(state, props.uri),
     showMature: selectShowMatureContent(state),
     isMature: claim ? isClaimNsfw(claim) : false,
     isLivestream,

ui/component/claimPreviewTile/view.jsx

@@ -35,11 +35,13 @@ type Props = {
   mediaDuration?: string,
   resolveUri: (string) => void,
   isResolvingUri: boolean,
+  claimIsMine: boolean,
   history: { push: (string) => void },
   thumbnail: string,
   title: string,
   placeholder: boolean,
   banState: { blacklisted?: boolean, filtered?: boolean, muted?: boolean, blocked?: boolean },
+  geoRestriction: ?GeoRestriction,
   getFile: (string) => void,
   streamingUrl: string,
   isMature: boolean,
@@ -66,12 +68,14 @@ function ClaimPreviewTile(props: Props) {
     uri,
     date,
     isResolvingUri,
+    claimIsMine,
     thumbnail,
     title,
     resolveUri,
     claim,
     placeholder,
     banState,
+    geoRestriction,
     getFile,
     streamingUrl,
     isMature,
@@ -147,6 +151,10 @@ function ClaimPreviewTile(props: Props) {
     shouldHide = true;
   }
 
+  if (!shouldHide && geoRestriction && !claimIsMine) {
+    shouldHide = true;
+  }
+
   if (!shouldHide && !placeholder) {
     shouldHide =
       banState.blacklisted ||

ui/page/show/view.jsx

@@ -260,6 +260,19 @@ export default function ShowPage(props: Props) {
     );
   }
 
+  if (geoRestriction && !claimIsMine) {
+    return (
+      <div className="main--empty">
+        <Yrbl
+          title={__(isChannel ? 'Channel unavailable' : 'Content unavailable')}
+          subtitle={__(geoRestriction.message || '')}
+          type="sad"
+          alwaysShow
+        />
+      </div>
+    );
+  }
+
   if (claim.name.length && claim.name[0] === '@') {
     return <ChannelPage uri={uri} location={location} />;
   }
@@ -282,14 +295,6 @@ export default function ShowPage(props: Props) {
     );
   }
 
-  if (geoRestriction) {
-    return (
-      <div className="main--empty">
-        <Yrbl title={__('Content unavailable')} subtitle={__(geoRestriction.message || '')} type="sad" alwaysShow />
-      </div>
-    );
-  }
-
   if (showLiveStream) {
     return (
       <React.Suspense fallback={null}>