Add view count funtionality

Author: GRVYDEV

src/App.js

@@ -13,6 +13,10 @@ const appReducer = (state, action) => {
     case "initStream": {
       return { ...state, stream: action.stream };
     }
+    case "info": {
+      return { ...state, viewers: action.viewers };
+    }
+
     default: {
       return { ...state };
     }
@@ -21,6 +25,7 @@ const appReducer = (state, action) => {
 
 const initialState = {
   stream: null,
+  viewers: null,
 };
 
 const App = () => {
@@ -96,6 +101,11 @@ const App = () => {
           console.log("Candidate");
           pc.addIceCandidate(offerCandidate);
           return;
+        case "info":
+          dispatch({
+            type: "info",
+            viewers: JSON.parse(msg.data).no_connections,
+          });
       }
     };
   }
@@ -106,7 +116,7 @@ const App = () => {
       <MainContainer>
         <VideoContainer>
           <VideoPlayer src={state.stream} />
-          <VideoDetails />
+          <VideoDetails viewers={state.viewers} />
         </VideoContainer>
         <LiveChat></LiveChat>
       </MainContainer>

src/components/VideoDetails.jsx

@@ -1,25 +1,32 @@
 import React from "react";
+import PropTypes from "prop-types";
 import {
   DetailHeadingBox,
   VideoDetailsContainer,
   DetailsTitle,
   DetailsHeading,
+  DetailsTop,
   AlphaTag,
+  ViewerTag,
 } from "../styles/videoDetailsStyles";
 import { LightspeedLogoURL } from "../assets/constants";
 
-const VideoDetails = () => {
+const VideoDetails = ({ viewers }) => {
   return (
     <VideoDetailsContainer>
+      <DetailsTop>
+        <AlphaTag>
+          <i className="fas fa-construction badge-icon"></i>
+          <span>Alpha</span>
+        </AlphaTag>
+        <ViewerTag>
+          <i className="fas fa-user-friends"></i>
+          <span>{viewers}</span>
+        </ViewerTag>
+      </DetailsTop>
       <DetailHeadingBox>
         <DetailsTitle>
-          <AlphaTag>
-            <i className="fas fa-construction badge-icon"></i>
-            <span>Alpha</span>
-          </AlphaTag>
-          <DetailsHeading>
-            Welcome to Project Lightspeed - The future of live entertainment
-          </DetailsHeading>
+          <DetailsHeading>Welcome to Project Lightspeed</DetailsHeading>
         </DetailsTitle>
         <img id="detail-img" src={LightspeedLogoURL}></img>
       </DetailHeadingBox>
@@ -28,3 +35,7 @@ const VideoDetails = () => {
 };
 
 export default VideoDetails;
+
+VideoDetails.propTypes = {
+  viewers: PropTypes.number,
+};

src/styles/liveChatStyles.js

@@ -6,7 +6,7 @@ export const ChatContainer = styled.div`
   position: relative;
   color: #fff;
   margin: 0 2.5em;
-  min-width: 20em;
+  min-width: 25em;
 
   @media only screen and (max-width: 1024px) {
     margin: 1em 0.3em;

src/styles/videoDetailsStyles.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const VideoDetailsContainer = styled.div`
+export const VideoDetailsContainer = styled.div `
   width: 100%;
   background-color: #242731;
   text-align: left;
@@ -9,33 +9,60 @@ export const VideoDetailsContainer = styled.div`
   border-radius: 32px;
 `;
 
-export const DetailHeadingBox = styled.div`
+export const DetailHeadingBox = styled.div `
   display: flex;
   flex-direction: row;
-  justify-content: space-evenly;
+  justify-content: space-between;
   margin: 0 2em 3em 2em;
 
   img {
     height: 130px;
     width: 130px;
-    margin: auto;
+    
 
     @media only screen and (max-width: 1024px) {
       display: none;
     }
   }
 `;
 
-export const DetailsTitle = styled.div`
+export const DetailsTitle = styled.div `
   display: flex;
   flex-direction: column;
+  justify-content: center;
+`;
+
+export const DetailsTop = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding-left: 2rem;
 `;
 
-export const DetailsHeading = styled.h4`
+export const DetailsHeading = styled.h4 `
   font-size: 30px;
 `;
+export const ViewerTag = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  height: 35px;
+  width: 110px;
+  
 
-export const AlphaTag = styled.div`
+  border-radius: 8px;
+
+  i {
+    margin: auto 0;
+  }
+
+  span {
+    margin: auto 0;
+    font-weight: 600;
+  }
+`;
+export const AlphaTag = styled.div `
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
@@ -52,4 +79,4 @@ export const AlphaTag = styled.div`
   span {
     margin: auto 0;
   }
-`;
+`;