diff --git a/packages/www/components/StreamDetails/StreamHealthWarningAlert/index.tsx b/packages/www/components/StreamDetails/StreamHealthWarningAlert/index.tsx index ade29dacc4..2cac18f2b8 100644 --- a/packages/www/components/StreamDetails/StreamHealthWarningAlert/index.tsx +++ b/packages/www/components/StreamDetails/StreamHealthWarningAlert/index.tsx @@ -4,29 +4,33 @@ import { Stream } from "livepeer"; import { Box } from "@livepeer/design-system"; export type StreamHealthWarningAlertProps = { + isBrowserBroadcastLive: boolean; stream: Stream & { isHealthy?: boolean; issues?: string[] }; }; const StreamHealthWarningAlert = ({ stream, + isBrowserBroadcastLive, }: StreamHealthWarningAlertProps) => { return ( - {!stream.isHealthy && ( + {!stream.isHealthy && !isBrowserBroadcastLive && ( <> - {stream?.issues?.map((issue) => ( + {stream?.issues?.slice(0, 1)?.map((issue) => ( void; + + isBroadcastLive: boolean; + setIsBroadcastLive: Dispatch>; }; const StreamPlayerBox = ({ @@ -33,15 +36,16 @@ const StreamPlayerBox = ({ globalSrtIngestUrl, globalPlaybackUrl, invalidateStream, + isBroadcastLive, + setIsBroadcastLive, }: StreamPlayerBoxProps) => { const [activeTab, setSwitchTab] = useState<"Browser" | "Streaming Software">( "Browser" ); - const [showBroadcast, setShowBroadcast] = useState(false); const isStreamActiveFromExternal = useMemo( - () => !showBroadcast && stream.isActive, - [showBroadcast, stream.isActive] + () => !isBroadcastLive && stream.isActive, + [isBroadcastLive, stream.isActive] ); useEffect(() => { @@ -51,10 +55,10 @@ const StreamPlayerBox = ({ }, [isStreamActiveFromExternal]); useEffect(() => { - if (showBroadcast) { + if (isBroadcastLive) { setSwitchTab("Browser"); } - }, [showBroadcast]); + }, [isBroadcastLive]); return ( - {showBroadcast ? ( + {isBroadcastLive ? ( ) : stream.isActive ? ( @@ -132,14 +136,14 @@ const StreamPlayerBox = ({ flex: 2, }} disabled={isStreamActiveFromExternal} - onClick={() => setShowBroadcast((prev) => !prev)}> + onClick={() => setIsBroadcastLive((prev) => !prev)}> - {showBroadcast ? "Stop broadcast" : "Go live"} + {isBroadcastLive ? "Stop broadcast" : "Go live"} diff --git a/packages/www/layouts/streamDetail.tsx b/packages/www/layouts/streamDetail.tsx index 5717d30688..c003769ff7 100644 --- a/packages/www/layouts/streamDetail.tsx +++ b/packages/www/layouts/streamDetail.tsx @@ -1,16 +1,15 @@ import { Box, Flex } from "@livepeer/design-system"; -import Layout from "layouts/dashboard"; -import { useRouter } from "next/router"; -import { useApi, useLoggedIn } from "hooks"; -import { useEffect, useState, useMemo } from "react"; +import EmbedVideoDialog from "components/AssetDetails/EmbedVideoDialog"; import Spinner from "components/Spinner"; import { Variant as StatusVariant } from "components/StatusBadge"; -import StreamPlayerBox from "components/StreamDetails/StreamPlayerBox/"; -import StreamSetupBox from "components/StreamDetails/StreamSetupBox"; -import StreamHeadingBox from "components/StreamDetails/StreamHeadingBox"; import StreamChildrenHeadingBox from "components/StreamDetails/StreamChildrenHeadingBox"; -import EmbedVideoDialog from "components/AssetDetails/EmbedVideoDialog"; +import StreamHeadingBox from "components/StreamDetails/StreamHeadingBox"; import StreamHealthWarningAlert from "components/StreamDetails/StreamHealthWarningAlert"; +import StreamPlayerBox from "components/StreamDetails/StreamPlayerBox/"; +import { useApi, useLoggedIn } from "hooks"; +import Layout from "layouts/dashboard"; +import { useRouter } from "next/router"; +import { useEffect, useMemo, useState } from "react"; const StreamDetail = ({ breadcrumbs, @@ -34,6 +33,8 @@ const StreamDetail = ({ const [lastSession, setLastSession] = useState(null); const [lastSessionLoading, setLastSessionLoading] = useState(false); + const [isBroadcastLive, setIsBroadcastLive] = useState(false); + useEffect(() => { if (user && user.admin && stream && !lastSessionLoading) { setLastSessionLoading(true); @@ -132,7 +133,10 @@ const StreamDetail = ({ {stream ? ( <> - +