From 9ac64eb6a718401c9f77d9238ceab88f0c970d83 Mon Sep 17 00:00:00 2001 From: Rafael Date: Wed, 16 Mar 2022 15:21:31 -0300 Subject: [PATCH] Fix layout shift --- ui/component/fileRenderInitiator/view.jsx | 7 +---- ui/component/livestreamChatLayout/view.jsx | 6 ---- ui/page/livestream/view.jsx | 32 ++++++++-------------- ui/scss/component/_main.scss | 19 ++++++++----- 4 files changed, 24 insertions(+), 40 deletions(-) diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx index 6b41b69c9..761e564ba 100644 --- a/ui/component/fileRenderInitiator/view.jsx +++ b/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(); @@ -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 - ? (layountRendered || isMobile) && isCurrentClaimLive - : isFree || claimWasPurchased; + const canViewFile = isLivestreamClaim ? isCurrentClaimLive : isFree || claimWasPurchased; const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode) || isCurrentClaimLive; const isText = RENDER_MODES.TEXT_MODES.includes(renderMode); diff --git a/ui/component/livestreamChatLayout/view.jsx b/ui/component/livestreamChatLayout/view.jsx index 7f183829b..322e4325a 100644 --- a/ui/component/livestreamChatLayout/view.jsx +++ b/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); diff --git a/ui/page/livestream/view.jsx b/ui/page/livestream/view.jsx index b12588ce9..886e28da6 100644 --- a/ui/page/livestream/view.jsx +++ b/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(); - 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 ( - + ) } > {isInitialized && ( - - - + )} ); diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 386f046f4..7731aeba6 100644 --- a/ui/scss/component/_main.scss +++ b/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; }