Re-fix layout shift

ui/component/fileRenderInitiator/view.jsx

@@ -14,6 +14,7 @@ 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';
@@ -72,6 +73,8 @@ export default function FileRenderInitiator(props: Props) {
     doFetchChannelLiveStatus,
   } = props;
 
+  const layountRendered = React.useContext(LayoutRenderContext);
+
   const isMobile = useIsMobile();
 
   const containerRef = React.useRef<any>();
@@ -87,7 +90,9 @@ export default function FileRenderInitiator(props: Props) {
   const shouldAutoplay = !embedded && (forceAutoplayParam || urlTimeParam || autoplay);
 
   const isFree = costInfo && costInfo.cost === 0;
-  const canViewFile = isLivestreamClaim ? isCurrentClaimLive : isFree || claimWasPurchased;
+  const canViewFile = isLivestreamClaim
+    ? (layountRendered || isMobile) && isCurrentClaimLive
+    : isFree || claimWasPurchased;
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode) || isCurrentClaimLive;
   const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
 

ui/component/livestreamChatLayout/view.jsx

@@ -52,6 +52,7 @@ type Props = {
   doSuperChatList: (uri: string) => void,
   claimsByUri: { [string]: any },
   doFetchUserMemberships: (claimIdCsv: string) => void,
+  setLayountRendered: (boolean) => void,
 };
 
 export default function LivestreamChatLayout(props: Props) {
@@ -73,6 +74,7 @@ export default function LivestreamChatLayout(props: Props) {
     doSuperChatList,
     doFetchUserMemberships,
     claimsByUri,
+    setLayountRendered,
   } = props;
 
   const isMobile = useIsMobile() && !isPopoutWindow;
@@ -167,6 +169,10 @@ export default function LivestreamChatLayout(props: Props) {
     if (setCustomViewMode) setCustomViewMode(VIEW_MODES.SUPERCHAT);
   }
 
+  React.useEffect(() => {
+    if (setLayountRendered) setLayountRendered(true);
+  }, [setLayountRendered]);
+
   React.useEffect(() => {
     if (customViewMode && customViewMode !== viewMode) {
       setViewMode(customViewMode);

ui/page/livestream/view.jsx

@@ -7,6 +7,7 @@ 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" */));
@@ -26,6 +27,8 @@ type Props = {
   doUserSetReferrer: (string) => void,
 };
 
+export const LayoutRenderContext = React.createContext<any>();
+
 export default function LivestreamPage(props: Props) {
   const {
     activeLivestreamForChannel,
@@ -42,10 +45,13 @@ export default function LivestreamPage(props: Props) {
     doUserSetReferrer,
   } = props;
 
+  const isMobile = useIsMobile();
+
   const [activeStreamUri, setActiveStreamUri] = React.useState(false);
   const [showLivestream, setShowLivestream] = React.useState(false);
   const [showScheduledInfo, setShowScheduledInfo] = React.useState(false);
   const [hideComments, setHideComments] = React.useState(false);
+  const [layountRendered, setLayountRendered] = React.useState(chatDisabled || isMobile);
 
   const isInitialized = Boolean(activeLivestreamForChannel) || activeLivestreamInitialized;
   const isChannelBroadcasting = Boolean(activeLivestreamForChannel);
@@ -148,10 +154,12 @@ export default function LivestreamPage(props: Props) {
   }, [uri, stringifiedClaim, isAuthenticated, doUserSetReferrer]);
 
   React.useEffect(() => {
+    if (!layountRendered) return;
+
     doSetPrimaryUri(uri);
 
     return () => doSetPrimaryUri(null);
-  }, [doSetPrimaryUri, uri]);
+  }, [doSetPrimaryUri, layountRendered, uri]);
 
   return (
     <Page
@@ -163,21 +171,23 @@ export default function LivestreamPage(props: Props) {
         !hideComments &&
         isInitialized && (
           <React.Suspense fallback={null}>
-            <LivestreamChatLayout uri={uri} />
+            <LivestreamChatLayout uri={uri} setLayountRendered={setLayountRendered} />
           </React.Suspense>
         )
       }
     >
       {isInitialized && (
-        <LivestreamLayout
+        <LayoutRenderContext.Provider value={layountRendered}>
-          uri={uri}
+          <LivestreamLayout
-          hideComments={hideComments}
+            uri={uri}
-          release={release}
+            hideComments={hideComments}
-          isCurrentClaimLive={isCurrentClaimLive}
+            release={release}
-          showLivestream={showLivestream}
+            isCurrentClaimLive={isCurrentClaimLive}
-          showScheduledInfo={showScheduledInfo}
+            showLivestream={showLivestream}
-          activeStreamUri={activeStreamUri}
+            showScheduledInfo={showScheduledInfo}
-        />
+            activeStreamUri={activeStreamUri}
+          />
+        </LayoutRenderContext.Provider>
       )}
     </Page>
   );