diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx index 111700890..edd001c6e 100644 --- a/ui/component/fileRenderInitiator/view.jsx +++ b/ui/component/fileRenderInitiator/view.jsx @@ -109,14 +109,15 @@ export default function FileRenderInitiator(props: Props) { // Find out current channels status + active live claim React.useEffect(() => { - if (!channelClaimId || !isLivestreamClaim) return; + // isCurrentClaimLive = already fetched + if (!channelClaimId || !isLivestreamClaim || isCurrentClaimLive) return; const fetch = () => doFetchChannelLiveStatus(channelClaimId); const intervalId = setInterval(fetch, LIVESTREAM_STATUS_CHECK_INTERVAL); return () => clearInterval(intervalId); - }, [channelClaimId, doFetchChannelLiveStatus, isLivestreamClaim]); + }, [channelClaimId, doFetchChannelLiveStatus, isCurrentClaimLive, isLivestreamClaim]); React.useEffect(() => { if (!claimThumbnail) return; diff --git a/ui/redux/actions/livestream.js b/ui/redux/actions/livestream.js index e9a8036a4..2cf9a899f 100644 --- a/ui/redux/actions/livestream.js +++ b/ui/redux/actions/livestream.js @@ -111,13 +111,18 @@ const findActiveStreams = async ( }; export const doFetchChannelLiveStatus = (channelId: string) => async (dispatch: Dispatch) => { + const statusForId = `live-status-${channelId}`; + // const localStatus = window.localStorage.getItem(statusForId); + try { const { channelStatus, channelData } = await fetchLiveChannel(channelId); if (channelStatus === LiveStatus.NOT_LIVE) { dispatch({ type: ACTIONS.REMOVE_CHANNEL_FROM_ACTIVE_LIVESTREAMS, data: { channelId } }); + window.localStorage.removeItem(statusForId); return; } + if (channelStatus === LiveStatus.UNKNOWN) { return; } @@ -130,8 +135,11 @@ export const doFetchChannelLiveStatus = (channelId: string) => async (dispatch: channelData[channelId].claimUri = liveClaim.stream.canonical_url; dispatch({ type: ACTIONS.ADD_CHANNEL_TO_ACTIVE_LIVESTREAMS, data: { ...channelData } }); } + + window.localStorage.setItem(statusForId, channelStatus); } catch (err) { dispatch({ type: ACTIONS.REMOVE_CHANNEL_FROM_ACTIVE_LIVESTREAMS, data: { channelId } }); + window.localStorage.removeItem(statusForId); } }; diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss index 92c56ebb7..b89d12063 100644 --- a/ui/scss/component/_content.scss +++ b/ui/scss/component/_content.scss @@ -240,7 +240,6 @@ } &:after { content: ''; - background: rgba(255, 255, 255, 0.5); top: 0; left: 0; bottom: 0; diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index 48d74c26f..f0b32e2cb 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -420,8 +420,8 @@ .file-viewer__embedded-header { position: absolute; - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: minmax(5rem, calc(100% - 7rem)) 1fr; width: 100%; top: 0; opacity: 1; @@ -435,7 +435,7 @@ border-top-right-radius: var(--border-radius); .button { - padding: var(--spacing-s); + padding: var(--spacing-xxs); color: var(--color-white); z-index: 2; @@ -470,7 +470,6 @@ } .file-viewer__embedded-title { - max-width: 75%; z-index: 2; display: flex; align-items: center; @@ -479,13 +478,7 @@ } .file-viewer__embedded-info { - display: flex; - align-items: center; - font-size: var(--font-small); - margin-left: var(--spacing-m); - white-space: nowrap; - position: relative; - overflow: hidden; + justify-self: flex-end; & > *:not(:last-child) { margin-right: var(--spacing-s); diff --git a/ui/scss/component/_livestream-chat.scss b/ui/scss/component/_livestream-chat.scss index ac23fb5b4..2a2255a1a 100644 --- a/ui/scss/component/_livestream-chat.scss +++ b/ui/scss/component/_livestream-chat.scss @@ -25,10 +25,6 @@ $recent-msg-button__height: 2rem; } } - @media (min-width: $breakpoint-large) { - margin-left: var(--spacing-l); - } - @media (min-width: $breakpoint-small) { top: calc(var(--header-height) + var(--spacing-m)) !important; position: sticky; diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 48073240e..386f046f4 100644 --- a/ui/scss/component/_main.scss +++ b/ui/scss/component/_main.scss @@ -578,8 +578,13 @@ body { .main--livestream { @extend .main--file-page; + @media (min-width: 1750px) { + padding: 0; + } + .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; @@ -608,6 +613,7 @@ body { @media (max-width: $breakpoint-medium) { padding: 0 var(--spacing-s); + .card__main-actions { .claim-preview__wrapper { a { diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index ed8dd6f25..06fdbadb1 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -210,7 +210,6 @@ .file-viewer__embedded-header { .file-viewer__embedded-title { - width: calc(100% - 120px); .button__label { display: inline-block; width: 100%;