add thumbnail fallback for non-playable content

src/renderer/page/file/view.jsx

@@ -20,6 +20,7 @@ import * as settings from 'constants/settings';
 import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
+import classnames from 'classnames';
 
 type Props = {
   claim: Claim,
@@ -149,11 +150,23 @@ class FilePage extends React.Component<Props> {
           </section>
         ) : (
           <section className="card">
-            {isPlayable ? (
-              <Video className="content__embedded" uri={uri} />
-            ) : (
+            {isPlayable && <Video className="content__embedded" uri={uri} />}
+            {!isPlayable &&
+              (thumbnail ? (
                 <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
-            )}
+              ) : (
+                <div
+                  className={classnames('content__empty', {
+                    'content__empty--nsfw': shouldObscureThumbnail,
+                  })}
+                >
+                  <div className="card__media-text">
+                    {__('This content is not playable.')}
+                    <br />
+                    {__('To view this, click the download link below.')}
+                  </div>
+                </div>
+              ))}
             <div className="card__content">
               <div className="card__title-identity--file">
                 <h1 className="card__title card__title--file">{title}</h1>

src/renderer/scss/component/_card.scss

@@ -23,17 +23,17 @@
     padding-top: var(--video-aspect-ratio);
   }
 
-  .card__media-text {
-    // for the weird padding required for dynamic height
-    // this lets the text sit in the middle instead of the bottom
-    margin-top: calc(var(--video-aspect-ratio) * -1);
-  }
-
   .channel-name {
     font-size: 12px;
   }
 }
 
+.card__media-text {
+  // for the weird padding required for dynamic height
+  // this lets the text sit in the middle instead of the bottom
+  margin-top: calc(var(--video-aspect-ratio) * -1);
+}
+
 .card--link {
   cursor: pointer;
 }

src/renderer/scss/component/_content.scss

@@ -78,6 +78,20 @@
   color: var(--color-white);
 }
 
+.content__empty {
+  background-color: black;
+  width: 100%;
+  padding-top: var(--video-aspect-ratio);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-white);
+
+  &.content__empty--nsfw {
+    background-color: var(--color-error);
+  }
+}
+
 img {
   max-height: 100%;
   max-width: 100%;