refactor

ui/component/channelContent/view.jsx

@@ -13,6 +13,7 @@ import LivestreamLink from 'component/livestreamLink';
 import { Form, FormField } from 'component/common/form';
 import ScheduledStreams from 'component/scheduledStreams';
 import { SearchResults } from './internal/searchResults';
+import useFetchLiveStatus from 'effects/use-fetch-live';
 
 const TYPES_TO_ALLOW_FILTER = ['stream', 'repost'];
 
@@ -90,12 +91,7 @@ function ChannelContent(props: Props) {
   const isInitialized = Boolean(activeLivestreamForChannel) || activeLivestreamInitialized;
   const isChannelBroadcasting = Boolean(activeLivestreamForChannel);
 
-  // Find out current channels status + active live claim.
+  useFetchLiveStatus(claimId, doFetchChannelLiveStatus);
-  React.useEffect(() => {
-    doFetchChannelLiveStatus(claimId);
-    const intervalId = setInterval(() => doFetchChannelLiveStatus(claimId), 30000);
-    return () => clearInterval(intervalId);
-  }, [claimId, doFetchChannelLiveStatus]);
 
   const showScheduledLiveStreams = claimType !== 'collection'; // ie. not on the playlist page.
 

ui/component/fileRenderInitiator/view.jsx

@@ -17,6 +17,7 @@ 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';
 
 type Props = {
   channelClaimId: ?string,
@@ -106,13 +107,7 @@ export default function FileRenderInitiator(props: Props) {
     history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(pathname)}`);
   }
 
-  // Find out current channels status + active live claim
+  useFetchLiveStatus(channelClaimId, doFetchChannelLiveStatus);
-  React.useEffect(() => {
-    // isCurrentClaimLive = already fetched
-    if (!channelClaimId || !isLivestreamClaim || isCurrentClaimLive) return;
-
-    doFetchChannelLiveStatus(channelClaimId);
-  }, [channelClaimId, doFetchChannelLiveStatus, isCurrentClaimLive, isLivestreamClaim]);
 
   React.useEffect(() => {
     if (!claimThumbnail) return;

ui/effects/use-fetch-live.js

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import { LIVESTREAM_STATUS_CHECK_INTERVAL_SOON, LIVESTREAM_STATUS_CHECK_INTERVAL } from 'constants/livestream';
+
+export default function useFetchLiveStatus(
+  channelClaimId: ?string,
+  doFetchChannelLiveStatus: (string) => void,
+  fasterPoll?: boolean
+) {
+  // Find out current channels status + active live claim every 30 seconds
+  React.useEffect(() => {
+    if (!channelClaimId) return;
+
+    const fetch = () => doFetchChannelLiveStatus(channelClaimId || '');
+    const interval = fasterPoll ? LIVESTREAM_STATUS_CHECK_INTERVAL_SOON : LIVESTREAM_STATUS_CHECK_INTERVAL;
+
+    fetch();
+
+    const intervalId = setInterval(fetch, interval);
+
+    return () => clearInterval(intervalId);
+  }, [channelClaimId, doFetchChannelLiveStatus, fasterPoll]);
+}

ui/page/embedWrapper/index.js

@@ -19,15 +19,28 @@ const select = (state, props) => {
   const uri = claimName ? buildURI({ claimName, claimId }) : '';
 
   const claim = selectClaimForUri(state, uri);
-  const { canonical_url: canonicalUrl } = claim || {};
+  const { canonical_url: canonicalUrl, signing_channel: channelClaim, txid, nout } = claim || {};
+
+  const { claim_id: channelClaimId, canonical_url: channelUri, txid: channelTxid, channelNout } = channelClaim || {};
+  const haveClaim = Boolean(claim);
+  const nullClaim = claim === null;
 
   return {
     uri,
-    claim,
+    claimId,
-    costInfo: selectCostInfoForUri(state, uri),
+    haveClaim,
-    streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
+    nullClaim,
-    isResolvingUri: selectIsUriResolving(state, uri),
+    canonicalUrl,
-    blackListedOutpoints: selectBlackListedOutpoints(state),
+    txid,
+    nout,
+    channelUri,
+    channelClaimId,
+    channelTxid,
+    channelNout,
+    costInfo: uri && selectCostInfoForUri(state, uri),
+    streamingUrl: uri && makeSelectStreamingUrlForUri(uri)(state),
+    isResolvingUri: uri && selectIsUriResolving(state, uri),
+    blackListedOutpoints: haveClaim && selectBlackListedOutpoints(state),
     isCurrentClaimLive: canonicalUrl && selectIsActiveLivestreamForUri(state, canonicalUrl),
     isLivestreamClaim: isStreamPlaceholderClaim(claim),
     obscurePreview: selectShouldObscurePreviewForUri(state, uri),

ui/page/embedWrapper/view.jsx

@@ -13,12 +13,20 @@ 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';
-const LIVESTREAM_STATUS_CHECK_INTERVAL = 30 * 1000;
 
 type Props = {
   uri: string,
-  claim: ?any,
+  claimId: ?string,
+  haveClaim: boolean,
+  nullClaim: boolean,
+  canonicalUrl: ?string,
+  txid: ?string,
+  nout: ?string,
+  channelUri: ?string,
+  channelClaimId: ?string,
+  channelTxid: ?string,
+  channelNout: ?string,
   costInfo: any,
   streamingUrl: string,
   isResolvingUri: boolean,
@@ -40,10 +48,19 @@ type Props = {
 
 export const EmbedContext = React.createContext<any>();
 
-const EmbedWrapperPage = (props: Props) => {
+export default function EmbedWrapperPage(props: Props) {
   const {
     uri,
-    claim,
+    claimId,
+    haveClaim,
+    nullClaim,
+    canonicalUrl,
+    txid,
+    nout,
+    channelUri,
+    channelClaimId,
+    channelTxid,
+    channelNout,
     costInfo,
     streamingUrl,
     isResolvingUri,
@@ -67,31 +84,27 @@ const EmbedWrapperPage = (props: Props) => {
     location: { search },
   } = useHistory();
 
-  const { claim_id: claimId, canonical_url: canonicalUrl, signing_channel: channelClaim } = claim || {};
-
   const containerRef = React.useRef<any>();
   const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
   const [livestreamsFetched, setLivestreamsFetched] = React.useState(false);
 
-  const channelUrl = channelClaim && formatLbryChannelName(channelClaim.canonical_url);
+  const channelUrl = channelUri && formatLbryChannelName(channelUri);
   const urlParams = new URLSearchParams(search);
   const embedLightBackground = urlParams.get('embedBackgroundLight');
-  const haveClaim = Boolean(claim);
+  const readyToDisplay = isCurrentClaimLive || (haveClaim && streamingUrl);
-  const readyToDisplay = isCurrentClaimLive || (claim && streamingUrl);
   const isLiveClaimFetching = isLivestreamClaim && !activeLivestreamInitialized;
-  const isLiveClaimStopped = isLivestreamClaim && !isLiveClaimFetching && !readyToDisplay;
+  const isLiveClaimNotPlaying = isLivestreamClaim && !isLiveClaimFetching && !readyToDisplay;
-  const loading = (!claim && isResolvingUri) || isLiveClaimFetching;
+  const loading = (!haveClaim && isResolvingUri) || isLiveClaimFetching;
-  const noContentFound = claim === null && !isResolvingUri;
+  const noContentFound = nullClaim && !isResolvingUri;
-  const isPaidContent = costInfo && costInfo.cost > 0;
+  const hasCost = costInfo && costInfo.cost > 0;
   const contentLink = formatLbryUrlForWeb(uri);
-  const signingChannel = claim && claim.signing_channel;
   const isClaimBlackListed =
-    claim &&
+    haveClaim &&
     blackListedOutpoints &&
     blackListedOutpoints.some(
       (outpoint) =>
-        (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
+        (channelUrl && outpoint.txid === channelTxid && outpoint.nout === channelNout) ||
-        (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
+        (outpoint.txid === txid && outpoint.nout === nout)
     );
 
   React.useEffect(() => {
@@ -142,10 +155,10 @@ const EmbedWrapperPage = (props: Props) => {
       doResolveUri(uri);
     }
 
-    if (uri && haveClaim && costInfo && costInfo.cost === 0) {
+    if (uri && haveClaim && !hasCost) {
       doPlayUri(uri);
     }
-  }, [doResolveUri, uri, doPlayUri, haveClaim, costInfo]);
+  }, [doPlayUri, doResolveUri, hasCost, haveClaim, uri]);
 
   React.useEffect(() => {
     if (haveClaim && uri && doFetchCostInfoForUri) {
@@ -153,18 +166,7 @@ const EmbedWrapperPage = (props: Props) => {
     }
   }, [uri, haveClaim, doFetchCostInfoForUri]);
 
-  // Find out current channels status + active live claim every 30 seconds
+  useFetchLiveStatus(livestreamsFetched ? channelClaimId : undefined, doFetchChannelLiveStatus);
-  React.useEffect(() => {
-    if (!channelClaim || !livestreamsFetched) return;
-
-    const { claim_id: channelClaimId } = channelClaim || {};
-
-    doFetchChannelLiveStatus(channelClaimId);
-
-    const intervalId = setInterval(() => doFetchChannelLiveStatus(channelClaimId), LIVESTREAM_STATUS_CHECK_INTERVAL);
-
-    return () => clearInterval(intervalId);
-  }, [livestreamsFetched, channelClaim, doFetchChannelLiveStatus]);
 
   if (isClaimBlackListed) {
     return (
@@ -190,57 +192,47 @@ const EmbedWrapperPage = (props: Props) => {
     );
   }
 
+  if (isLiveClaimNotPlaying) {
+    return (
+      <div
+        className="embed__inline-button"
+        style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")`, height: '100%' } : {}}
+      >
+        <FileViewerEmbeddedTitle uri={uri} />
+
+        <a target="_blank" rel="noopener noreferrer" href={formatLbryUrlForWeb(uri)}>
+          <Button iconSize={30} title={__('View')} className="button--icon button--view" />
+        </a>
+      </div>
+    );
+  }
+
   return (
-    <div
+    <div className={classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })}>
-      className={
+      <EmbedContext.Provider value>
-        isLiveClaimStopped
+        {readyToDisplay ? (
-          ? 'embed__inline-button'
+          <FileRender uri={uri} embedded />
-          : classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })
+        ) : (
-      }
+          <div className="embed__loading">
-      style={
+            <FileViewerEmbeddedTitle uri={uri} />
-        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 || (!claim && !noContentFound)) && <Spinner delayed light />}
+              {(loading || (!haveClaim && !noContentFound)) && <Spinner delayed light />}
 
-                {noContentFound && <h1>{__('No content found.')}</h1>}
+              {noContentFound && <h1>{__('No content found.')}</h1>}
 
-                {isPaidContent && (
+              {hasCost && (
-                  <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} />
-
-          <a target="_blank" rel="noopener noreferrer" href={formatLbryUrlForWeb(uri)}>
-            <Button iconSize={30} title={__('View')} className="button--icon button--view" />
-          </a>
-        </>
-      )}
     </div>
   );
-};
+}
-
-export default EmbedWrapperPage;

ui/page/livestream/view.jsx

@@ -1,18 +1,14 @@
 // @flow
 import { formatLbryChannelName } from 'util/url';
 import { lazyImport } from 'util/lazyImport';
-import {
+import { LIVESTREAM_STARTS_SOON_BUFFER, LIVESTREAM_STARTED_RECENTLY_BUFFER } from 'constants/livestream';
-  LIVESTREAM_STATUS_CHECK_INTERVAL,
-  LIVESTREAM_STATUS_CHECK_INTERVAL_SOON,
-  LIVESTREAM_STARTS_SOON_BUFFER,
-  LIVESTREAM_STARTED_RECENTLY_BUFFER,
-} from 'constants/livestream';
 import analytics from 'analytics';
 import LivestreamLayout from 'component/livestreamLayout';
 import moment from 'moment';
 import Page from 'component/page';
 import React from 'react';
 import { useIsMobile } from 'effects/use-screensize';
+import useFetchLiveStatus from 'effects/use-fetch-live';
 
 const LivestreamChatLayout = lazyImport(() => import('component/livestreamChatLayout' /* webpackChunkName: "chat" */));
 
@@ -100,18 +96,7 @@ export default function LivestreamPage(props: Props) {
   // Find out current channels status + active live claim every 30 seconds (or 15 if not live)
   const fasterPoll = !isCurrentClaimLive && (claimReleaseStartingSoonStatic() || claimReleaseStartedRecentlyStatic());
 
-  React.useEffect(() => {
+  useFetchLiveStatus(livestreamChannelId, doFetchChannelLiveStatus, fasterPoll);
-    const fetch = () => doFetchChannelLiveStatus(livestreamChannelId);
-
-    fetch();
-
-    const intervalId = setInterval(
-      fetch,
-      fasterPoll ? LIVESTREAM_STATUS_CHECK_INTERVAL_SOON : LIVESTREAM_STATUS_CHECK_INTERVAL
-    );
-
-    return () => clearInterval(intervalId);
-  }, [livestreamChannelId, doFetchChannelLiveStatus, fasterPoll]);
 
   React.useEffect(() => {
     setActiveStreamUri(!isCurrentClaimLive && isChannelBroadcasting ? activeLivestreamForChannel.claimUri : false);