Fix thumbnail

ui/page/embedWrapper/index.js

@@ -5,11 +5,12 @@ import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
 import { doResolveUri } from 'redux/actions/claims';
 import { buildURI } from 'util/lbryURI';
 import { doPlayUri } from 'redux/actions/content';
+import { selectShouldObscurePreviewForUri } from 'redux/selectors/content';
 import { selectCostInfoForUri, doFetchCostInfoForUri, selectBlackListedOutpoints } from 'lbryinc';
 import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
 import { doFetchActiveLivestreams, doFetchChannelLiveStatus } from 'redux/actions/livestream';
 import { selectIsActiveLivestreamForUri, selectActiveLivestreams } from 'redux/selectors/livestream';
-import { isStreamPlaceholderClaim } from 'util/claim';
+import { getThumbnailFromClaim, isStreamPlaceholderClaim } from 'util/claim';
 
 const select = (state, props) => {
   const { match } = props;
@@ -30,6 +31,8 @@ const select = (state, props) => {
     isCurrentClaimLive: canonicalUrl && selectIsActiveLivestreamForUri(state, canonicalUrl),
     isLivestreamClaim: isStreamPlaceholderClaim(claim),
     activeLivestreams: selectActiveLivestreams(state),
+    obscurePreview: selectShouldObscurePreviewForUri(state, uri),
+    claimThumbnail: getThumbnailFromClaim(claim),
   };
 };
 

ui/page/embedWrapper/view.jsx

@@ -9,6 +9,9 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import { formatLbryUrlForWeb, formatLbryChannelName } from 'util/url';
 import { useHistory } from 'react-router';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
+// $FlowFixMe cannot resolve ...
+import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
 
 const LIVESTREAM_STATUS_CHECK_INTERVAL = 30 * 1000;
 
@@ -22,6 +25,8 @@ type Props = {
   isCurrentClaimLive: boolean,
   isLivestreamClaim: boolean,
   activeLivestreams: ?any,
+  claimThumbnail?: string,
+  obscurePreview: boolean,
   doResolveUri: (uri: string) => void,
   doPlayUri: (uri: string) => void,
   doFetchCostInfoForUri: (uri: string) => void,
@@ -44,6 +49,8 @@ const EmbedWrapperPage = (props: Props) => {
     isCurrentClaimLive,
     isLivestreamClaim: liveClaim,
     activeLivestreams,
+    claimThumbnail,
+    obscurePreview,
     doResolveUri,
     doPlayUri,
     doFetchCostInfoForUri,
@@ -55,10 +62,14 @@ const EmbedWrapperPage = (props: Props) => {
 
   const {
     location: { search },
+    push,
   } = useHistory();
 
   const { claim_id: claimId, canonical_url: canonicalUrl, signing_channel: channelClaim } = claim || {};
 
+  const containerRef = React.useRef<any>();
+  const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
+
   const channelUrl = channelClaim && formatLbryChannelName(channelClaim.canonical_url);
   const urlParams = new URLSearchParams(search);
   const embedLightBackground = urlParams.get('embedBackgroundLight');
@@ -77,8 +88,32 @@ const EmbedWrapperPage = (props: Props) => {
         (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
         (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
     );
+  const isLiveClaimStopped = liveClaim && !readyToDisplay;
 
-  React.useEffect(doFetchActiveLivestreams, [doFetchActiveLivestreams]);
+  React.useEffect(() => {
+    if (!claimThumbnail) return;
+
+    setTimeout(() => {
+      let newThumbnail = claimThumbnail;
+
+      if (
+        containerRef.current &&
+        containerRef.current.parentElement &&
+        containerRef.current.parentElement.offsetWidth
+      ) {
+        const w = containerRef.current.parentElement.offsetWidth;
+        newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: w, height: w });
+      }
+
+      if (newThumbnail !== thumbnail) {
+        setThumbnail(newThumbnail);
+      }
+    }, 200);
+  }, [claimThumbnail, thumbnail]);
+
+  React.useEffect(() => {
+    if (doFetchActiveLivestreams) doFetchActiveLivestreams();
+  }, [doFetchActiveLivestreams]);
 
   // Establish web socket connection for viewer count.
   React.useEffect(() => {
@@ -141,29 +176,58 @@ const EmbedWrapperPage = (props: Props) => {
   }
 
   return (
-    <div className={classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })}>
+    <div
-      <EmbedContext.Provider value>
+      className={
-        {readyToDisplay ? (
+        isLiveClaimStopped
-          <FileRender uri={uri} embedded />
+          ? 'embed__inline-button'
-        ) : (
+          : classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })
-          <div className="embed__loading">
+      }
-            <FileViewerEmbeddedTitle uri={uri} />
+      style={
+        isLiveClaimStopped
+          ? thumbnail && !obscurePreview
+            ? { backgroundImage: `url("${thumbnail}")`, height: '100%' }
+            : {}
+          : undefined
+      }
+    >
+      {!isLiveClaimStopped ? (
+        <EmbedContext.Provider value>
+          {readyToDisplay ? (
+            <FileRender uri={uri} embedded />
+          ) : (
+            <div className="embed__loading">
+              <FileViewerEmbeddedTitle uri={uri} />
 
-            <div className="embed__loading-text">
+              <div className="embed__loading-text">
-              {loading && <Spinner delayed light />}
+                {loading && <Spinner delayed light />}
-              {noContentFound && <h1>{__('No content found.')}</h1>}
+                {noContentFound && <h1>{__('No content found.')}</h1>}
-              {isPaidContent && (
+                {isPaidContent && (
-                <div>
+                  <div>
-                  <h1>{__('Paid content cannot be embedded.')}</h1>
+                    <h1>{__('Paid content cannot be embedded.')}</h1>
-                  <div className="section__actions--centered">
+                    <div className="section__actions--centered">
-                    <Button label={__('Watch on %SITE_NAME%', { SITE_NAME })} button="primary" href={contentLink} />
+                      <Button label={__('Watch on %SITE_NAME%', { SITE_NAME })} button="primary" href={contentLink} />
+                    </div>
                   </div>
-                </div>
+                )}
-              )}
+              </div>
             </div>
-          </div>
+          )}
-        )}
+        </EmbedContext.Provider>
-      </EmbedContext.Provider>
+      ) : (
+        <>
+          <FileViewerEmbeddedTitle uri={uri} />
+
+          <Button
+            onClick={() => {
+              const formattedUrl = formatLbryUrlForWeb(uri);
+              push(formattedUrl);
+            }}
+            iconSize={30}
+            title={__('View')}
+            className="button--icon button--view"
+          />
+        </>
+      )}
     </div>
   );
 };