Consolidate timeout thumbnail effect

ui/component/fileRenderInitiator/view.jsx

@@ -9,15 +9,13 @@ import classnames from 'classnames';
 import * as PAGES from 'constants/pages';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import Button from 'component/button';
-import { getThumbnailCdnUrl } from 'util/thumbnail';
 import Nag from 'component/common/nag';
-// $FlowFixMe cannot resolve ...
-import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
 import * as COLLECTIONS_CONSTS from 'constants/collections';
 import { LayoutRenderContext } from 'page/livestream/view';
 import { formatLbryUrlForWeb } from 'util/url';
 import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
 import useFetchLiveStatus from 'effects/use-fetch-live';
+import useThumbnail from 'effects/use-thumbnail';
 
 type Props = {
   channelClaimId: ?string,
@@ -78,7 +76,6 @@ export default function FileRenderInitiator(props: Props) {
   const isMobile = useIsMobile();
 
   const containerRef = React.useRef<any>();
-  const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
 
   const { search, href, state: locationState, pathname } = location;
   const urlParams = search && new URLSearchParams(search);
@@ -109,28 +106,7 @@ export default function FileRenderInitiator(props: Props) {
 
   useFetchLiveStatus(channelClaimId, doFetchChannelLiveStatus);
 
-  React.useEffect(() => {
+  const thumbnail = useThumbnail(claimThumbnail, containerRef);
-    if (!claimThumbnail) return;
-
-    const timer = 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);
-
-    return () => clearTimeout(timer);
-  }, [claimThumbnail, thumbnail]);
 
   function handleClick() {
     if (embedded && !isPlayable) {

ui/effects/use-thumbnail.js

@@ -0,0 +1,34 @@
+// @flow
+import { getThumbnailCdnUrl } from 'util/thumbnail';
+import React from 'react';
+// $FlowFixMe cannot resolve ...
+import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
+
+export default function useThumbnail(claimThumbnail: ?string, containerRef: any) {
+  const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
+
+  React.useEffect(() => {
+    if (!claimThumbnail) return;
+
+    const timer = 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);
+
+    return () => clearTimeout(timer);
+  }, [claimThumbnail, containerRef, thumbnail]);
+
+  return thumbnail;
+}

ui/page/embedWrapper/view.jsx

@@ -9,11 +9,10 @@ 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';
 import Yrbl from 'component/yrbl';
 // $FlowFixMe cannot resolve ...
-import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
 import useFetchLiveStatus from 'effects/use-fetch-live';
+import useThumbnail from 'effects/use-thumbnail';
 
 type Props = {
   uri: string,
@@ -85,7 +84,6 @@ export default function EmbedWrapperPage(props: Props) {
   } = useHistory();
 
   const containerRef = React.useRef<any>();
-  const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
   const [livestreamsFetched, setLivestreamsFetched] = React.useState(false);
 
   const channelUrl = channelUri && formatLbryChannelName(channelUri);
@@ -107,26 +105,7 @@ export default function EmbedWrapperPage(props: Props) {
         (outpoint.txid === txid && outpoint.nout === nout)
     );
 
-  React.useEffect(() => {
+  const thumbnail = useThumbnail(claimThumbnail, containerRef);
-    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 && isLivestreamClaim) {