ui/js/component/fileCard/view.jsx

@@ -97,6 +97,7 @@ class FileCard extends React.PureComponent {
               <TruncatedText lines={2}>{description}</TruncatedText>
             </div>
           </Link>
+        </div>
         {obscureNsfw &&
           this.state.hovered &&
           <div className="card-overlay">
@@ -112,7 +113,6 @@ class FileCard extends React.PureComponent {
               />.
             </p>
           </div>}
-        </div>
       </section>
     );
   }

ui/js/component/video/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { doCloseModal } from "actions/app";
+import { doNavigate } from "actions/app";
 import { selectCurrentModal } from "selectors/app";
 import { doPurchaseUri, doLoadVideo } from "actions/content";
 import {
@@ -13,6 +14,7 @@ import {
   makeSelectDownloadingForUri,
 } from "selectors/file_info";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
+import { selectObscureNsfw } from "selectors/app";
 import Video from "./view";
 
 const makeSelect = () => {
@@ -27,6 +29,7 @@ const makeSelect = () => {
     costInfo: selectCostInfo(state, props),
     fileInfo: selectFileInfo(state, props),
     metadata: selectMetadata(state, props),
+    obscureNsfw: selectObscureNsfw(state),
     modal: selectCurrentModal(state),
     isLoading: selectIsLoading(state, props),
     isDownloading: selectIsDownloading(state, props),
@@ -37,6 +40,7 @@ const makeSelect = () => {
 };
 
 const perform = dispatch => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
   loadVideo: uri => dispatch(doLoadVideo(uri)),
   purchaseUri: uri => dispatch(doPurchaseUri(uri, "affirmPurchaseAndPlay")),
   closeModal: () => dispatch(doCloseModal()),

ui/js/component/video/view.jsx

@@ -1,13 +1,18 @@
 import React from "react";
 import lbry from "lbry";
 import VideoPlayer from "./internal/player";
+import Link from "component/link";
+import FileActions from "component/fileActions";
 import VideoPlayButton from "./internal/play-button";
 import LoadingScreen from "./internal/loading-screen";
 
 class Video extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = { isPlaying: false };
+    this.state = {
+      isPlaying: false,
+      showNsfwHelp: false,
+    };
   }
 
   startPlaying() {
@@ -16,23 +21,46 @@ class Video extends React.PureComponent {
     });
   }
 
+  handleMouseOver() {
+    if (
+      this.props.obscureNsfw &&
+      this.props.metadata &&
+      this.props.metadata.nsfw
+    ) {
+      this.setState({
+        showNsfwHelp: true,
+      });
+    }
+  }
+
+  handleMouseOut() {
+    if (this.state.showNsfwHelp) {
+      this.setState({
+        showNsfwHelp: false,
+      });
+    }
+  }
+
   render() {
     const {
       metadata,
       isLoading,
       isDownloading,
       fileInfo,
+      navigate,
       contentType,
     } = this.props;
     const { isPlaying = false } = this.state;
 
     const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
+    const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
     const mediaType = lbry.getMediaType(
       contentType,
       fileInfo && fileInfo.file_name
     );
 
     let loadStatusMessage = "";
+    let onClick = () => navigate("/show", { uri });
 
     if (fileInfo && fileInfo.completed && !fileInfo.written_bytes) {
       loadStatusMessage = __(
@@ -47,6 +75,7 @@ class Video extends React.PureComponent {
     }
 
     let klasses = [];
+    klasses.push(obscureNsfw ? "video--obscured " : "");
     if (isLoading || isDownloading) klasses.push("video-embedded", "video");
     if (mediaType === "video") {
       klasses.push("video-embedded", "video");
@@ -59,7 +88,11 @@ class Video extends React.PureComponent {
     const poster = metadata.thumbnail;
 
     return (
-      <div className={klasses.join(" ")}>
+      <div
+        className={klasses.join(" ")}
+        onMouseEnter={this.handleMouseOver.bind(this)}
+        onMouseLeave={this.handleMouseOut.bind(this)}
+      >
         {isPlaying &&
           (!isReadyToPlay
             ? <LoadingScreen status={loadStatusMessage} />
@@ -81,6 +114,20 @@ class Video extends React.PureComponent {
               mediaType={mediaType}
             />
           </div>}
+        {this.state.showNsfwHelp &&
+          <div className="card-overlay">
+            <p>
+              {__(
+                "This content is Not Safe For Work. To view adult content, please change your"
+              )}
+              {" "}
+              <Link
+                className="button-text"
+                onClick={() => navigate("/settings")}
+                label={__("Settings")}
+              />.
+            </p>
+          </div>}
       </div>
     );
   }

ui/js/lbry.js

@@ -323,7 +323,9 @@ lbry.getMediaType = function(contentType, fileName) {
       return "video";
     } else if (/^mp3|m4a|aac|wav|flac|ogg|opus$/i.test(ext)) {
       return "audio";
-    } else if (/^html|htm|xml|pdf|odf|doc|docx|md|markdown|txt|org$/i.test(ext)) {
+    } else if (
+      /^html|htm|xml|pdf|odf|doc|docx|md|markdown|txt|epub|org$/i.test(ext)
+    ) {
       return "document";
     } else {
       return "unknown";

ui/js/page/filePage/index.js

@@ -10,6 +10,7 @@ import {
   makeSelectMetadataForUri,
 } from "selectors/claims";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
+import { selectObscureNsfw } from "selectors/app";
 import FilePage from "./view";
 
 const makeSelect = () => {
@@ -24,6 +25,7 @@ const makeSelect = () => {
     contentType: selectContentType(state, props),
     costInfo: selectCostInfo(state, props),
     metadata: selectMetadata(state, props),
+    obscureNsfw: selectObscureNsfw(state),
     fileInfo: selectFileInfo(state, props),
   });
 

ui/js/page/filePage/view.jsx

@@ -81,6 +81,7 @@ class FilePage extends React.PureComponent {
     const uriIndicator = <UriIndicator uri={uri} />;
     const mediaType = lbry.getMediaType(contentType);
     const player = require("render-media");
+    const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
     const isPlayable =
       Object.values(player.mime).indexOf(contentType) !== -1 ||
       mediaType === "audio";
@@ -94,7 +95,7 @@ class FilePage extends React.PureComponent {
               ? <Thumbnail src={metadata.thumbnail} />
               : <Thumbnail />}
         </section>
-        <section className="card">
+        <section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
           <div className="card__inner">
             <div className="card__title-identity">
               {!fileInfo || fileInfo.written_bytes <= 0

ui/scss/_global.scss

@@ -40,6 +40,7 @@ $box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2)
 $transition-standard: .225s ease;
 
 $blur-intensity: 8px;
+$blur-intensity-video: 20px;
 
 @mixin clearfix()
 {

ui/scss/component/_video.scss

@@ -33,6 +33,11 @@ video {
     transform: translateY(-50%);
   }
 }
+.video--obscured .video__cover
+{
+  position: relative;
+  filter: blur($blur-intensity-video);
+}
 
 
 .video__loading-screen {