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

@@ -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
 

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.",

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>
+        isNsfwBlocked ? (
-          <div className="section">
+          <div className="main--empty">
-            <FileActions uri={uri} />
+            <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>
+        )
       }
     />
   );

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),

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={