Resolve conflicts and improve alert

RocketChat · Apr 5, 2022 · c9cfb77 · c9cfb77
1 parent d04ad98
commit c9cfb77
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 56 deletions.
diff --git a/app/components/clientsideonly/videostreamer.js b/app/components/clientsideonly/videostreamer.js
@@ -5,27 +5,32 @@ import Head from "next/head";
 import { useEffect, useState } from "react";
 
 export default function Videostreamer(props) {
-  const [ping, setPing] = useState(false)
+  const [ping, setPing] = useState(false);
+
   const pingStream = async () => {
-    const response = await fetch(props.src)
+    const response = await fetch(props.src);
     if (response.ok) {
       setPing(true)
     }
-    return;
-  }
-  useEffect(() => {
-    setInterval(() => {
-      pingStream().catch(e => {
-        console.error("Stream error", e)
-      setPing(false)
-    })
-    }, 60000)
 
-  }, [])
+    return response;
+  };
+  useEffect(() => {
+    setInterval(async () => {
+      pingStream()
+        .catch((e) => {
+          console.error("Stream error", e);
+          setPing(false);
+          return
+        });
+
+    }, 30000);
+  }, []);
 
   const handleToast = () => {
-    setPing(true)
-  }
+    setPing(true);
+  };
+
   return (
     <>
       <Head>
@@ -45,7 +50,7 @@ export default function Videostreamer(props) {
         <video
           autoPlay
           id="my-video"
-          class="video-js vjs-big-play-centered vjs-responsive"
+          className="video-js vjs-big-play-centered vjs-responsive"
           controls
           preload="auto"
           poster={props.poster}
@@ -60,23 +65,37 @@ export default function Videostreamer(props) {
             </a>
           </p>
         </video>
-        <Alert show={!ping} handleToast={handleToast}/>
-
+        <Alert
+          show={!ping}
+          handleToast={handleToast}
+        />
       </Col>
     </>
   );
 }
 
-const Alert = ({handleToast, show}) => {
+const Alert = ({ handleToast, show }) => {
   return (
-    <ToastContainer show={show} position="bottom-start" style={{zIndex: "10"}} className="p-3">
-    <Toast show={show} onClose={handleToast} bg="info">
-      <Toast.Header>
-        <strong className="me-auto">Stream Alert!</strong>
-        <small className="text-muted">just now</small>
-      </Toast.Header>
-      <Toast.Body>Thank you for tuning in! Looks like the streaming has stopped! Please stay tune!</Toast.Body>
-    </Toast>
-  </ToastContainer>
-  )
-}
+    <ToastContainer
+      position="bottom-start"
+      style={{ zIndex: "10" }}
+      className="p-3"
+    >
+      <Toast
+        show={show}
+        onClose={handleToast}
+        delay={60000}
+        autohide
+        bg="warning"
+      >
+        <Toast.Header>
+          <strong className="me-auto">Stream Alert!</strong>
+        </Toast.Header>
+        <Toast.Body>
+          Thank you for watching! Looks like the streaming has stopped! Please
+          stay tune and refresh the page if this alert does not shows up!
+        </Toast.Body>
+      </Toast>
+    </ToastContainer>
+  );
+};
diff --git a/app/pages/virtualconf/mainstage/[id].js b/app/pages/virtualconf/mainstage/[id].js
@@ -1,12 +1,12 @@
-import Head from 'next/head';
-import { useEffect, useState } from 'react';
-import { Container, Button } from 'react-bootstrap';
-import Videostreamer from '../../../components/clientsideonly/videostreamer';
-import InAppChat from '../../../components/inappchat/inappchat';
-import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
-import styles from '../../../styles/Videostreamer.module.css';
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import { Container, Button } from "react-bootstrap";
+import Videostreamer from "../../../components/clientsideonly/videostreamer";
+import InAppChat from "../../../components/inappchat/inappchat";
+import { useMediaQuery } from "@rocket.chat/fuselage-hooks";
+import styles from "../../../styles/Videostreamer.module.css";
 import { FaRocketchat } from "react-icons/fa";
-import { getIPInfo } from '../../../lib/geoAPI';
+import { getIPInfo } from "../../../lib/geoAPI";
 
 const rid = "GENERAL";
 const host = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://community.liaison.rocketchat.digital";
@@ -15,38 +15,47 @@ const otherLink = process.env.NEXT_PUBLIC_SERVER_STREAM_LINK1
 
 export default function ConfMainStage({ cookies, ipInfo }) {
   const [openChat, setOpenChat] = useState(true);
-  const isSmallScreen = useMediaQuery('(max-width: 992px)');
-  const [streamLink, setStreamLink] = useState("https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4")
+  const isSmallScreen = useMediaQuery("(max-width: 992px)");
+  const [streamLink, setStreamLink] = useState(asiaLink);
 
   const handleOpenChat = () => {
     setOpenChat((prevState) => !prevState);
   };
-  
+
   useEffect(() => {
-    if (ipInfo.timezone.split('/')[0] == "Asia") {
-      setStreamLink(asiaLink)
-    }
-    else {
-      setStreamLink(otherLink)
+    try {
+      if (
+        ipInfo == null ||
+        ipInfo.timezone == undefined ||
+        ipInfo.timezone == null
+      ) {
+        return;
+      }
+      if (ipInfo.timezone.split("/")[0] == "Asia") {
+        setStreamLink(asiaLink);
+      } else {
+        setStreamLink(otherLink);
+      }
+    } catch {
+      return;
     }
-  }, [])
-
+  }, []);
 
   return (
     <>
-      <div className='d-flex flex-column flex-lg-row '>
+      <div className="d-flex flex-column flex-lg-row ">
         <Head>
           <title>Virtual Conference Main Stage</title>
           <meta
-            name='description'
-            content='Demonstration main stage for a virtual conference'
+            name="description"
+            content="Demonstration main stage for a virtual conference"
           />
         </Head>
         <Container fluid className={styles.videoContainer}>
           <Videostreamer
-            poster='/gsocsmall.jpg'
+            poster="/gsocsmall.jpg"
             src={streamLink}
-            type='application/vnd.apple.mpegurl'
+            type="application/vnd.apple.mpegurl"
           ></Videostreamer>
         </Container>
         {isSmallScreen ? (
@@ -68,8 +77,11 @@ export default function ConfMainStage({ cookies, ipInfo }) {
 }
 
 ConfMainStage.getInitialProps = async (ctx) => {
-  const res = await getIPInfo()
-
-  return { ipInfo: res.data }
-}
+  try {
+    const res = await getIPInfo();
 
+    return { ipInfo: res.data };
+  } catch {
+    return { ipInfo: null };
+  }
+};