From 4c57cdd99f8540744ac45f6e5a06200eb7954b77 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Tue, 21 Jul 2020 15:26:56 +0800
Subject: [PATCH] Block mature content when accessed directly from URL

## Issue:
Fixes 4549 `Mature content + navigating to URLs directly`
_If a user navigates to mature content directly, we currently show the page even if mature content setting is not enabled. With our recent mature content verification setting, we should hide the page until the user turns it on - we can prompt directly on the file page._

## Changes:
1. Show basic info of the claim like URL and Title, so that user knows which page is being blocked.
2. Initially, I had 2 "boxes" -- one for the title and another for the message. It felt a bit messy, so `FileTitle` was augmented to house everything in one box.
---
 CHANGELOG.md                    |  1 +
 static/app-strings.json         |  2 ++
 ui/component/fileTitle/view.jsx | 38 +++++++++++++++++++++++++++------
 ui/page/file/index.js           |  2 ++
 ui/page/file/view.jsx           | 21 ++++++++++++++----
 5 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71d24e937..3bd96c1a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Show "YT Creator" label in File Page as well _community pr!_ ([#4523](https://github.com/lbryio/lbry-desktop/pull/4523))
 - Add option to retry video stream on failure _community pr!_ ([#4541](https://github.com/lbryio/lbry-desktop/pull/4541))
 - Allow blocking channels from comments ([#4557](https://github.com/lbryio/lbry-desktop/pull/4557))
+- Block mature content when accessed directly from URL _community pr!_ ([#4560](https://github.com/lbryio/lbry-desktop/pull/4560))
 
 ### Changed
 
diff --git a/static/app-strings.json b/static/app-strings.json
index 78492554b..5b2238195 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1260,6 +1260,8 @@
   "Links": "Links",
   "LBRY URL": "LBRY URL",
   "Download Link": "Download Link",
+  "Mature content blocked": "Mature content blocked",
+  "Change %settings%": "Change %settings%", 
   "There was an error with LBRY first publishing.": "There was an error with LBRY first publishing.",
   "Automagically upload to your youtube channel.": "Automagically upload to your youtube channel.",
   "Your file was published to LBRY, but the YouTube upload failed.": "Your file was published to LBRY, but the YouTube upload failed.",
diff --git a/ui/component/fileTitle/view.jsx b/ui/component/fileTitle/view.jsx
index 03ced6396..7ba829830 100644
--- a/ui/component/fileTitle/view.jsx
+++ b/ui/component/fileTitle/view.jsx
@@ -7,15 +7,21 @@ import FileSubtitle from 'component/fileSubtitle';
 import FileAuthor from 'component/fileAuthor';
 import FileActions from 'component/fileActions';
 import Card from 'component/common/card';
+import * as ICONS from 'constants/icons';
+import Icon from 'component/common/icon';
+import I18nMessage from 'component/i18nMessage';
+import Button from 'component/button';
+import * as PAGES from 'constants/pages';
 
 type Props = {
   uri: string,
   title: string,
   nsfw: boolean,
+  isNsfwBlocked: boolean,
 };
 
 function FileTitle(props: Props) {
-  const { title, uri, nsfw } = props;
+  const { title, uri, nsfw, isNsfwBlocked } = props;
 
   return (
     <Card
@@ -39,14 +45,32 @@ function FileTitle(props: Props) {
         </React.Fragment>
       }
       actions={
-        <div>
-          <div className="section">
-            <FileActions uri={uri} />
+        isNsfwBlocked ? (
+          <div className="main--empty">
+            <h2 className="card__title card__title">
+              <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
+              {__('Mature content blocked')}
+            </h2>
+            <div>
+              <I18nMessage
+                tokens={{
+                  settings: <Button button="link" label={__('Content Settings')} navigate={`/$/${PAGES.SETTINGS}`} />,
+                }}
+              >
+                Change %settings%
+              </I18nMessage>
+            </div>
           </div>
-          <div className="section">
-            <FileAuthor uri={uri} />
+        ) : (
+          <div>
+            <div className="section">
+              <FileActions uri={uri} />
+            </div>
+            <div className="section">
+              <FileAuthor uri={uri} />
+            </div>
           </div>
-        </div>
+        )
       }
     />
   );
diff --git a/ui/page/file/index.js b/ui/page/file/index.js
index bee1aada8..8fa3ef7ba 100644
--- a/ui/page/file/index.js
+++ b/ui/page/file/index.js
@@ -7,6 +7,7 @@ import {
   makeSelectClaimForUri,
   makeSelectMetadataForUri,
   makeSelectChannelForClaimUri,
+  makeSelectClaimIsNsfw,
 } from 'lbry-redux';
 import { makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
@@ -19,6 +20,7 @@ const select = (state, props) => ({
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   metadata: makeSelectMetadataForUri(props.uri)(state),
   obscureNsfw: !selectShowMatureContent(state),
+  isMature: makeSelectClaimIsNsfw(props.uri)(state),
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   isSubscribed: makeSelectIsSubscribed(props.uri)(state),
   channelUri: makeSelectChannelForClaimUri(props.uri, true)(state),
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index 53d067432..4de328c88 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -32,6 +32,8 @@ type Props = {
   channelUri: string,
   renderMode: string,
   markSubscriptionRead: (string, string) => void,
+  obscureNsfw: boolean,
+  isMature: boolean,
 };
 
 class FilePage extends React.Component<Props> {
@@ -130,8 +132,22 @@ class FilePage extends React.Component<Props> {
     );
   }
 
+  renderBlockedPage() {
+    const { uri } = this.props;
+    return (
+      <Page>
+        <ClaimUri uri={uri} />
+        <FileTitle uri={uri} isNsfwBlocked />
+      </Page>
+    );
+  }
+
   render() {
-    const { uri, renderMode, costInfo } = this.props;
+    const { uri, renderMode, costInfo, obscureNsfw, isMature } = this.props;
+
+    if (obscureNsfw && isMature) {
+      return this.renderBlockedPage();
+    }
 
     return (
       <Page className="file-page">
@@ -141,11 +157,8 @@ class FilePage extends React.Component<Props> {
         <div className="section columns">
           <div className="card-stack">
             <FileDescription uri={uri} />
-
             <FileValues uri={uri} />
-
             <FileDetails uri={uri} />
-
             <Card
               title={__('Leave a Comment')}
               actions={