1
\$\begingroup\$

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 repetitive.

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?

\$\endgroup\$
  • \$\begingroup\$ I think for local stream display you have to have switch statements but what about remote stream? maybe just rendering all the video components (and powerpoint components), and passing all the stream data as props,then in the each child component check if the prop is empty or not in the componentLifeCycle methods? if the props is empty them don't render that video tag if no then attach the stream to the video element? \$\endgroup\$ – P.hunter Mar 14 '19 at 4:14
  • \$\begingroup\$ I did not quite understand you. Can you put the sample code in the answer section, please? \$\endgroup\$ – Serenity Mar 14 '19 at 4:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.