add download link on screen for lbry.tv

ui/component/fileViewerInitiator/index.js

@@ -8,6 +8,7 @@ import {
   makeSelectMediaTypeForUri,
   makeSelectContentTypeForUri,
   makeSelectUriIsStreamable,
+  makeSelectClaimForUri,
 } from 'lbry-redux';
 import { makeSelectCostInfoForUri } from 'lbryinc';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@@ -35,6 +36,7 @@ const select = (state, props) => ({
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   isAutoPlayable: makeSelectCanAutoplay(props.uri)(state),
   isText: makeSelectIsText(props.uri)(state),
+  claim: makeSelectClaimForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({

ui/component/fileViewerInitiator/view.jsx

@@ -3,11 +3,12 @@
 // The actual viewer for a file exists in TextViewer and FloatingViewer
 // They can't exist in one component because we need to handle/listen for the start of a new file view
 // while a file is currently being viewed
-import React, { useEffect, useCallback, Fragment } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
 import isUserTyping from 'util/detect-typing';
 import Yrbl from 'component/yrbl';
+import I18nMessage from 'component/i18nMessage';
 
 const SPACE_BAR_KEYCODE = 32;
 
@@ -29,6 +30,7 @@ type Props = {
   costInfo: any,
   isAutoPlayable: boolean,
   inline: boolean,
+  claim: StreamClaim,
 };
 
 export default function FileViewerInitiator(props: Props) {
@@ -48,6 +50,7 @@ export default function FileViewerInitiator(props: Props) {
     hasCostInfo,
     costInfo,
     isAutoPlayable,
+    claim,
   } = props;
   const cost = costInfo && costInfo.cost;
   const forceVideo = ['application/x-ext-mkv', 'video/x-matroska'].includes(contentType);
@@ -56,13 +59,21 @@ export default function FileViewerInitiator(props: Props) {
   const fileStatus = fileInfo && fileInfo.status;
   const webStreamOnly = contentType === 'application/pdf' || mediaType === 'text';
   const supported = IS_WEB ? (!cost && isStreamable) || webStreamOnly || forceVideo : true;
+  const { name, claim_id: claimId, value } = claim;
+  const fileName = value && value.source && value.source.name;
+  const downloadUrl = `/$/download/${name}/${claimId}`;
 
-  function getMessage() {
-    if (IS_WEB && cost) {
-      return __('Paid Content Not Supported on lbry.tv');
+  function getTitle() {
+    let message = __('Unsupported File');
+    // @if TARGET='web'
+    if (cost) {
+      message = __('Paid Content Not Supported on lbry.tv');
+    } else {
+      message = __("We're not quite ready to display this file on lbry.tv yet");
     }
+    // @endif
 
-    return __('Unsupported File');
+    return message;
   }
 
   // Wrap this in useCallback because we need to use it to the keyboard effect
@@ -108,7 +119,7 @@ export default function FileViewerInitiator(props: Props) {
     <div
       disabled={!hasCostInfo}
       style={!obscurePreview && supported && thumbnail && !isPlaying ? { backgroundImage: `url("${thumbnail}")` } : {}}
-      onClick={supported && viewFile}
+      onClick={supported ? viewFile : undefined}
       className={classnames({
         content__cover: supported,
         'content__cover--disabled': !supported,
@@ -120,15 +131,19 @@ export default function FileViewerInitiator(props: Props) {
       {!supported && (
         <Yrbl
           type="happy"
-          title={getMessage()}
+          title={getTitle()}
           subtitle={
-            <Fragment>
-              <p>
-                {__('Good news, though! You can')}{' '}
-                <Button button="link" label={__('Download the app')} href="https://lbry.com/get" />{' '}
-                {__('and gain access to everything.')}
-              </p>
-            </Fragment>
+            <I18nMessage
+              tokens={{
+                download_the_app: <Button button="link" label={__('download the app')} href="https://lbry.com/get" />,
+                download_this_file: (
+                  <Button button="link" label={__('download this file')} download={fileName} href={downloadUrl} />
+                ),
+              }}
+            >
+              Good news, though! You can %download_the_app% and gain access to everything, or %download_this_file% and
+              view it on your device.
+            </I18nMessage>
           }
         />
       )}