[IMPROVE] Change minor UI for mainstage (#124)

* Restyle mainstage * Add error alert * remove unused code * Update app/components/clientsideonly/videostreamer.js Co-authored-by: Debdut Chakraborty <[email protected]>
RocketChat · Apr 4, 2022 · 39202ef · 39202ef
1 parent 33a649f
commit 39202ef
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 30 deletions.
diff --git a/app/components/clientsideonly/videostreamer.js b/app/components/clientsideonly/videostreamer.js
@@ -1,39 +1,82 @@
-import { Col } from 'react-bootstrap';
-import styles from '../../styles/Videostreamer.module.css';
-import Script from 'next/script';
-import Head from 'next/head';
+import { Col, Toast, ToastContainer } from "react-bootstrap";
+import styles from "../../styles/Videostreamer.module.css";
+import Script from "next/script";
+import Head from "next/head";
+import { useEffect, useState } from "react";
 
 export default function Videostreamer(props) {
+  const [ping, setPing] = useState(false)
+  const pingStream = async () => {
+    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)
+
+  }, [])
+
+  const handleToast = () => {
+    setPing(true)
+  }
   return (
     <>
       <Head>
         <link
-          href='https://vjs.zencdn.net/7.17.0/video-js.css'
-          rel='stylesheet'
+          href="https://vjs.zencdn.net/7.17.0/video-js.css"
+          rel="stylesheet"
         />
       </Head>
       <Script
-        src='https://vjs.zencdn.net/7.17.0/video.min.js'
-        strategy='afterInteractive'
+        src="https://vjs.zencdn.net/7.17.0/video.min.js"
+        strategy="afterInteractive"
         onLoad={() =>
           console.log(`script loaded correctly, window.FB has been populated`)
         }
       />
       <Col>
-        <video-js
-          fluid
-          id='my-video'
-          class='video-js vjs-big-play-centered'
+        <video
+          autoPlay
+          id="my-video"
+          class="video-js vjs-big-play-centered vjs-responsive"
           controls
-          preload='auto'
-          width='1280'
-          height='720'
+          preload="auto"
           poster={props.poster}
           data-setup='{"fluid": true}'
         >
           <source src={props.src} type={props.type}></source>
-        </video-js>
+          <p class="vjs-no-js">
+            To view this video please enable JavaScript, and consider upgrading
+            to a web browser that
+            <a href="https://videojs.com/html5-video-support/" target="_blank">
+              supports HTML5 video
+            </a>
+          </p>
+        </video>
+        <Alert show={!ping} handleToast={handleToast}/>
+
       </Col>
     </>
   );
 }
+
+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>
+  )
+}
diff --git a/app/pages/virtualconf/mainstage/[id].js b/app/pages/virtualconf/mainstage/[id].js
@@ -5,6 +5,7 @@ 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";
 
 const rid = process.env.NEXT_PUBLIC_ROCKET_CHAT_CONF_RID;
 const host = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://community.liaison.rocketchat.digital";
@@ -30,8 +31,8 @@ export default function ConfMainStage({ cookies }) {
         <Container fluid className={styles.videoContainer}>
           <Videostreamer
             poster='/gsocsmall.jpg'
-            src='https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4'
-            type='video/mp4'
+            src='https://{redacted}/hls/stream.m3u8'
+            type='application/vnd.apple.mpegurl'
           ></Videostreamer>
         </Container>
         {isSmallScreen ? (
@@ -42,16 +43,9 @@ export default function ConfMainStage({ cookies }) {
           <Button
             className={`${styles.chatButton} border border-danger`}
             onClick={handleOpenChat}
+            variant="danger"
           >
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              fill='currentColor'
-              class='bi bi-chat-dots'
-              viewBox='0 0 16 16'
-            >
-              <path d='M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z' />
-              <path d='m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z' />
-            </svg>
+            <FaRocketchat size={25} />
           </Button>
         )}
       </div>

diff --git a/app/styles/Videostreamer.module.css b/app/styles/Videostreamer.module.css
@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   background: black;
+  width: 79%;
 }
 .video {
   height: 100vh;
@@ -12,8 +13,6 @@
 }
 .chatButton {
   width: 4rem;
-  background-color: transparent;
-  color: white;
   position: absolute;
   z-index: 1;
   right: 1rem;
@@ -22,12 +21,15 @@
 }
 .chatButton:hover {
   background-color: transparent;
-  color: white;
+  color: #f5455c;
 }
 
 @media (max-width: 1200px) {
 }
 @media (max-width: 992px) {
+  .videoContainer {
+    border: 10px solid white;
+  }
 }
 @media (max-width: 768px) {
   .chatButton {