Ytdyklly

The use case that this code tries to meet is

There will be an interview session where the video calling is done between two participants, interviewer(ER) and interviewee(EE) For this i need to have a video element and reference that video element using ref. For ER its a localStreamRef and for EE its remoteStreamRef. To use ref, i need to have that video element already because attaching the stream in the video element is done inside componentDidMount by listening to the sockets from there.

The conditions that i have to fulfill is, if the event is

1. event1 - Show ER and EE screen


2. event2 - Only EE screen


3. event3 - Only ER screen


4. event4 - ER, EE and Screen Recording screen(this is also a video
   element)


5. event5 - ER and SS


6. event6 - EE and SS


7. event7 - SS only

To achieve this i did the code following way but its too much repeated

import React from "react";

import isElectron from "is-electron";

import styled from "styled-components";



const Wrapper = styled.div``;



const PowerPoint = styled.div`

  color: #fff;

  text-align: center;

  background: #2d3561;

  position: relative;

  & > video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    object-fit: cover;

  }

`;



const VideoPanel = styled.video`

  max-width: 100%;

  width: 400px;

  height: auto;

  transition: all 0.3s ease;

  transform: rotateY(180deg);

  -webkit-transform: rotateY(180deg);

  -moz-transform: rotateY(180deg);

  ${props =>

    props.left &&

    `

    position: absolute;

    bottom: 50px;

    left: 50px;

    z-index: 1;

    transition: all 1s ease;

    width: 400px;

  `};

  ${props =>

    props.right &&

    `

    position: absolute;

    bottom: 50px;

    right: 50px;

    z-index: 1;

    transition: all 1s ease;

  `}

  &.fullscreen {

    position: absolute;

    top: 0;

    left: 0;

    transform: translateY(0);

    width: 100%;

    height: 100%;

  }

`;

const VideoPanels = styled.div`

  width: 100%;

  height: auto;

  position: absolute;

  top: 80%;

  left: 0;

  width: 100%;

  transform: translateY(-50%);

  transition: all 0.3s ease;

  &.fullscreen {

    position: absolute;

    top: 0;

    left: 0;

    transform: translateY(0);

    ${VideoPanel} {

      width: 100%;

      height: 100%;

    }

  }

`;



const user = JSON.parse(localStorage.getItem("user"));



const Studio = ({ interviewer, interviewee, ...props }) => {

  const [hotkeys, setHotkeys] = React.useState("event4");

  React.useEffect(() => {

    return () => {

      window.ipcRenderer.removeAllListeners("eventListened");

    };

  }, );

  React.useEffect(

    () => {

      console.log("user", user);

      console.log(

        "remoteJoined",

        props.isRemoteJoined,

        user !== null && user.data.isInterviewer

      );

      if (

        isElectron() &&

        props.isRemoteJoined &&

        (user !== null && user.data.isInterviewer)

      ) {

        window.ipcRenderer.on("eventListened", (event, hotkeys) => {

          setHotkeys(hotkeys);

        });

      }

    },

    [props.isRemoteJoined]

  );

  const renderVideo = () => {

    switch (hotkeys) {

      case "event1":

        return (

          <React.Fragment>

            <PowerPoint style={{ display: "none" }}>

              <video autoPlay id="screenshare" style={{ display: "none" }} />

            </PowerPoint>



            <VideoPanel

              ref={interviewer}

              autoPlay

              muted="muted"

              id="local-media"

              left

            />

            <VideoPanel

              ref={interviewee}

              autoPlay

              muted="muted"

              id="remote-media"

              className="fullscreen"

            />

          </React.Fragment>

        );

      case "event2": {

        return (

          <React.Fragment>

            <PowerPoint style={{ display: "none" }}>

              <video autoPlay id="screenshare" style={{ display: "none" }} />

            </PowerPoint>

            <VideoPanel

              ref={interviewer}

              autoPlay

              muted="muted"

              id="local-media"

              style={{ display: "none" }}

            />

            <VideoPanel

              ref={interviewee}

              autoPlay

              className="fullscreen"

              id="remote-media interviewee-for-now"

            />

          </React.Fragment>

        );

      }

      case "event3": {

        return (

          <React.Fragment>

            <PowerPoint style={{ display: "none" }}>

              <video autoPlay id="screenshare" style={{ display: "none" }} />

            </PowerPoint>

            <VideoPanel

              ref={interviewer}

              autoPlay

              muted="muted"

              className="fullscreen"

            />

            <VideoPanel

              ref={interviewee}

              autoPlay

              id="remote-media"

              style={{ display: "none" }}

            />

          </React.Fragment>

        );

      }

      case "event4": {

        return (

          <React.Fragment>

            <PowerPoint>

              <video autoPlay id="screenshare" />

            </PowerPoint>

            <VideoPanel ref={interviewer} autoPlay muted="muted" left />

            <VideoPanel ref={interviewee} autoPlay id="remote-media" right />

          </React.Fragment>

        );

      }

      case "event5": {

        return (

          <React.Fragment>

            <PowerPoint>

              <video autoPlay id="screenshare" />

            </PowerPoint>

            <VideoPanel ref={interviewer} autoPlay muted="muted" />

            <VideoPanel

              ref={interviewee}

              autoPlay

              id="remote-media"

              style={{ display: "none" }}

            />

          </React.Fragment>

        );

      }

      case "event6": {

        return (

          <React.Fragment>

            <PowerPoint>

              <video autoPlay id="screenshare" />

            </PowerPoint>

            <VideoPanel

              ref={interviewer}

              autoPlay

              muted="muted"

              style={{ display: "none" }}

            />

            <VideoPanel ref={interviewee} autoPlay id="remote-media" />

          </React.Fragment>

        );

      }

      default:

        return (

          <React.Fragment>

            <PowerPoint>

              <video autoPlay id="screenshare" />

            </PowerPoint>

            <VideoPanels

              className={

                hotkeys === "event2" || hotkeys === "event3" ? "fullscreen" : ""

              }

            >

              <VideoPanel ref={interviewer} autoPlay muted="muted" />

              <VideoPanel ref={interviewee} autoPlay id="remote-media" />

            </VideoPanels>

          </React.Fragment>

        );

    }

  };

  console.log("hotkeys", hotkeys !== "event1");

  return (

    <React.Fragment>

      <Wrapper>{renderVideo()}</Wrapper>

    </React.Fragment>

  );

};



export default Studio;

My question is, in the renderVideo, the code are too much duplicated due to many conditions. The styling to show the screen is done in that way. How can this code be refactored to make it clean and remove code duplication?