Fix layout shift

ui/component/fileRenderInitiator/view.jsx

@@ -14,7 +14,6 @@ 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';
@@ -73,8 +72,6 @@ export default function FileRenderInitiator(props: Props) {
     doFetchChannelLiveStatus,
   } = props;
 
-  const layountRendered = React.useContext(LayoutRenderContext);
-
   const isMobile = useIsMobile();
 
   const containerRef = React.useRef<any>();
@@ -90,9 +87,7 @@ export default function FileRenderInitiator(props: Props) {
   const shouldAutoplay = !embedded && (forceAutoplayParam || urlTimeParam || autoplay);
 
   const isFree = costInfo && costInfo.cost === 0;
-  const canViewFile = isLivestreamClaim
+  const canViewFile = isLivestreamClaim ? isCurrentClaimLive : isFree || claimWasPurchased;
-    ? (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,7 +52,6 @@ type Props = {
   doSuperChatList: (uri: string) => void,
   claimsByUri: { [string]: any },
   doFetchUserMemberships: (claimIdCsv: string) => void,
-  setLayountRendered: (boolean) => void,
 };
 
 export default function LivestreamChatLayout(props: Props) {
@@ -74,7 +73,6 @@ export default function LivestreamChatLayout(props: Props) {
     doSuperChatList,
     doFetchUserMemberships,
     claimsByUri,
-    setLayountRendered,
   } = props;
 
   const isMobile = useIsMobile() && !isPopoutWindow;
@@ -169,10 +167,6 @@ 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,7 +7,6 @@ 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" */));
@@ -27,8 +26,6 @@ type Props = {
   doUserSetReferrer: (string) => void,
 };
 
-export const LayoutRenderContext = React.createContext<any>();
-
 export default function LivestreamPage(props: Props) {
   const {
     activeLivestreamForChannel,
@@ -45,13 +42,10 @@ 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);
@@ -154,12 +148,10 @@ export default function LivestreamPage(props: Props) {
   }, [uri, stringifiedClaim, isAuthenticated, doUserSetReferrer]);
 
   React.useEffect(() => {
-    if (!layountRendered) return;
-
     doSetPrimaryUri(uri);
 
     return () => doSetPrimaryUri(null);
-  }, [doSetPrimaryUri, layountRendered, uri]);
+  }, [doSetPrimaryUri, uri]);
 
   return (
     <Page
@@ -171,23 +163,21 @@ export default function LivestreamPage(props: Props) {
         !hideComments &&
         isInitialized && (
           <React.Suspense fallback={null}>
-            <LivestreamChatLayout uri={uri} setLayountRendered={setLayountRendered} />
+            <LivestreamChatLayout uri={uri} />
           </React.Suspense>
         )
       }
     >
       {isInitialized && (
-        <LayoutRenderContext.Provider value={layountRendered}>
+        <LivestreamLayout
-          <LivestreamLayout
+          uri={uri}
-            uri={uri}
+          hideComments={hideComments}
-            hideComments={hideComments}
+          release={release}
-            release={release}
+          isCurrentClaimLive={isCurrentClaimLive}
-            isCurrentClaimLive={isCurrentClaimLive}
+          showLivestream={showLivestream}
-            showLivestream={showLivestream}
+          showScheduledInfo={showScheduledInfo}
-            showScheduledInfo={showScheduledInfo}
+          activeStreamUri={activeStreamUri}
-            activeStreamUri={activeStreamUri}
+        />
-          />
-        </LayoutRenderContext.Provider>
       )}
     </Page>
   );

ui/scss/component/_main.scss

@@ -580,18 +580,23 @@ body {
 
   @media (min-width: 1750px) {
     padding: 0;
+    width: 100%;
+    max-width: var(--page-max-width--filepage);
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr minmax(0, var(--livestream-comments-width));
+    justify-content: space-between;
+    justify-items: end;
+    gap: var(--spacing-m);
+
+    .livestream__chat {
+      margin: 0 !important;
+    }
   }
 
   .card-stack {
     margin-bottom: var(--spacing-m);
 
-    @media (min-width: ($breakpoint-large + 300px)) {
-      max-width: calc(var(--page-max-width--filepage) / 1.25);
-      margin-left: auto;
-      margin-right: auto;
-      width: calc(100% - var(--livestream-comments-width));
-    }
-
     @media (max-width: $breakpoint-medium) {
       max-width: none;
     }