Merge pull request #1233 from miikkatu/obscure-nsfw-content-title

Obscure NSFW content title

src/renderer/component/fileCard/view.jsx

@@ -1,19 +1,17 @@
 // @flow
 import * as React from 'react';
 import { normalizeURI } from 'lbryURI';
+import Button from 'component/button';
 import CardMedia from 'component/cardMedia';
 import TruncatedText from 'component/common/truncated-text';
 import Icon from 'component/common/icon';
 import FilePrice from 'component/filePrice';
 import UriIndicator from 'component/uriIndicator';
-import NsfwOverlay from 'component/nsfwOverlay';
 import * as icons from 'constants/icons';
 import classnames from 'classnames';
 
 // TODO: iron these out
 type Props = {
-  isResolvingUri: boolean,
-  resolveUri: string => void,
   uri: string,
   claim: ?{ claim_id: string },
   fileInfo: ?{},
@@ -78,6 +76,24 @@ class FileCard extends React.PureComponent<Props> {
         <CardMedia nsfw={shouldObscureNsfw} thumbnail={thumbnail} />
         <div className="card-media__internal-links">{showPrice && <FilePrice uri={uri} />}</div>
 
+        {shouldObscureNsfw ? (
+          <div className="card__title-identity">
+            <div className="card__title--small">
+              <TruncatedText lines={3}>
+                {__('This content is obscured because it is NSFW. You can change this in ')}
+                <Button
+                  button="link"
+                  label={__('Settings.')}
+                  onClick={e => {
+                    // Don't propagate to the onClick handler of parent element
+                    e.stopPropagation();
+                    navigate('/settings');
+                  }}
+                />
+              </TruncatedText>
+            </div>
+          </div>
+        ) : (
           <div className="card__title-identity">
             <div className="card__title--small">
               <TruncatedText lines={3}>{title}</TruncatedText>
@@ -94,6 +110,7 @@ class FileCard extends React.PureComponent<Props> {
               )}
             </div>
           </div>
+        )}
       </section>
     );
     /* eslint-enable jsx-a11y/click-events-have-key-events */