fix: fix warnings on stream (#1817)

* fix: fix warnings on stream * fix: hide warning when browser broadcast
livepeer · Jul 28, 2023 · 7465f7d · 7465f7d · vercel · Jul 31, 2023
1 parent d838954
commit 7465f7d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 25 deletions.
diff --git 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 (
     <Box
       css={{
-        mb: "$7",
+        mb: "$4",
       }}>
-      {!stream.isHealthy && (
+      {!stream.isHealthy && !isBrowserBroadcastLive && (
         <>
-          {stream?.issues?.map((issue) => (
+          {stream?.issues?.slice(0, 1)?.map((issue) => (
             <Banner
-              title="Ingest error"
+              title="Ingest warning"
               description={issue}
               titleCss={{
                 color: "$yellow11",
                 fontWeight: 600,
+                fontSize: "14px",
               }}
               descriptionCss={{
                 color: "$yellow11",
+                fontSize: "12px",
               }}
               css={{
                 background: "$yellow2",

diff --git a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
@@ -11,11 +11,11 @@ import { Share2Icon } from "@radix-ui/react-icons";
 import { Stream } from "livepeer";
 import AssetSharePopup from "../../AssetDetails/AssetSharePopup";
 
-import { useEffect, useMemo, useState } from "react";
-import { FiKey, FiVideo } from "react-icons/fi";
-import ActiveStream from "./ActiveStream";
-import StreamSetupBox from "../StreamSetupBox";
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import { FaKey, FaVideo } from "react-icons/fa";
+import { FiVideo } from "react-icons/fi";
+import StreamSetupBox from "../StreamSetupBox";
+import ActiveStream from "./ActiveStream";
 
 export type StreamPlayerBoxProps = {
   stream: Stream;
@@ -24,6 +24,9 @@ export type StreamPlayerBoxProps = {
   globalSrtIngestUrl: string;
   globalPlaybackUrl: string;
   invalidateStream: () => void;
+
+  isBroadcastLive: boolean;
+  setIsBroadcastLive: Dispatch<SetStateAction<boolean>>;
 };
 
 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 (
     <Box
@@ -79,7 +83,7 @@ const StreamPlayerBox = ({
             border: "1px solid $neutral6",
             overflow: "hidden",
           }}>
-          {showBroadcast ? (
+          {isBroadcastLive ? (
             <LivepeerBroadcast streamKey={stream.streamKey} />
           ) : stream.isActive ? (
             <ActiveStream playbackId={stream.playbackId} />
@@ -132,14 +136,14 @@ const StreamPlayerBox = ({
                 flex: 2,
               }}
               disabled={isStreamActiveFromExternal}
-              onClick={() => setShowBroadcast((prev) => !prev)}>
+              onClick={() => setIsBroadcastLive((prev) => !prev)}>
               <Box
                 as={FiVideo}
                 css={{
                   mr: "$1",
                 }}
               />
-              {showBroadcast ? "Stop broadcast" : "Go live"}
+              {isBroadcastLive ? "Stop broadcast" : "Go live"}
             </Button>
           </Tooltip>
         </Flex>

diff --git 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 = ({
         <Box css={{ px: "$6", py: "$2" }}>
           {stream ? (
             <>
-              <StreamHealthWarningAlert stream={stream} />
+              <StreamHealthWarningAlert
+                stream={stream}
+                isBrowserBroadcastLive={isBroadcastLive}
+              />
               <Flex>
                 <Box
                   css={{
@@ -153,6 +157,8 @@ const StreamDetail = ({
                       globalIngestUrl={globalIngestUrl}
                       globalSrtIngestUrl={globalSrtIngestUrl}
                       invalidateStream={invalidateStream}
+                      isBroadcastLive={isBroadcastLive}
+                      setIsBroadcastLive={setIsBroadcastLive}
                     />
                   </Box>
                 </Box>