From 0202dc21fbc4a89dc5d4154eebd5fbb2b1b1a487 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Wed, 11 Sep 2019 09:27:03 -0400
Subject: [PATCH] improves messaging over thumbs and drives tv paid content to
 app

---
 src/ui/component/fileViewerInitiator/view.jsx | 34 +++++++++++++++++++
 src/ui/scss/component/_yrbl.scss              |  5 +++
 2 files changed, 39 insertions(+)

diff --git a/src/ui/component/fileViewerInitiator/view.jsx b/src/ui/component/fileViewerInitiator/view.jsx
index 0ed381a9e..435534a65 100644
--- a/src/ui/component/fileViewerInitiator/view.jsx
+++ b/src/ui/component/fileViewerInitiator/view.jsx
@@ -86,6 +86,40 @@ export default function FileViewer(props: Props) {
     }
   }, [autoplay, viewFile, isStreamable, hasCostInfo, cost]);
 
+  // @if TARGET='web'
+  if (costInfo && costInfo.cost > 0) {
+    return (
+      <div
+        disabled={!hasCostInfo}
+        style={!obscurePreview && thumbnail ? { backgroundImage: `url("${thumbnail}")` } : {}}
+        onClick={supported && viewFile}
+        className={classnames({
+          content__cover: supported,
+          'content__cover--disabled': !supported,
+          'card__media--nsfw': obscurePreview,
+          'card__media--disabled': !fileInfo && insufficientCredits,
+        })}
+      >
+        {!supported && (
+          <Yrbl
+            type="happy"
+            title={__('Paid Content')}
+            subtitle={
+              <Fragment>
+                <p>{__(`We're not ready to keep track of your paid content on LBRY.TV yet.`)}</p>
+                <p>
+                  {__('Good news, though! You can')}{' '}
+                  <Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" />{' '}
+                  {'and have access to paid content.'}
+                </p>
+              </Fragment>
+            }
+          />
+        )}
+      </div>
+    );
+  }
+  // @endif
   return (
     <div
       disabled={!hasCostInfo}
diff --git a/src/ui/scss/component/_yrbl.scss b/src/ui/scss/component/_yrbl.scss
index c03f0640c..528c90f51 100644
--- a/src/ui/scss/component/_yrbl.scss
+++ b/src/ui/scss/component/_yrbl.scss
@@ -5,6 +5,11 @@
   vertical-align: middle;
   text-align: left;
   margin-bottom: var(--spacing-xlarge);
+  background-color: rgba($lbry-white, 0.8);
+  [data-mode='dark'] & {
+    background-color: rgba($lbry-black, 0.8);
+  }
+  padding: 5px;
 }
 
 .yrbl {