code is repeated to show the video elements as per the condition

Question

Based on the command, i need to show the video element. I mean, the usecase is something like if 1 then only Interviewer(ER) video, if 2 then Interviewee(EE) video and if 3 then both video, if 4 then both with powerpoint in the background. To show the video element, i need to use ref in the componentDidMount where socket is being listened to add the stream using ref to get the video element.

I have done this way where the code is repeated too much

const Frame1 = styled.div`
  background: #6f729b;
  text-align: center;
  > video {
    width: 100%;
    object-fit: cover;
  }
`;
const Frame2 = styled.div`
  > video {
    width: 400px;
    height: auto;
  }
`;

const Frame3 = styled.div`
  > video {
    width: 400px;
    height: auto;
  }
`;

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

const Studio = ({ localRef, remoteRef, ...props }) => {
  const [hotkeys, setHotkeys] = React.useState("event1");
  React.useEffect(() => {
    return () => {
      window.ipcRenderer.removeAllListeners("eventListened");
    };
  }, []);
  React.useEffect(
    () => {
      if (
        isElectron() &&
        props.clientJoined &&
        (user !== null && user.data.isInteviewer)
      ) {
        window.ipcRenderer.on("eventListened", (event, hotkeys) => {
          setHotkeys(hotkeys);
        });
      }
    },
    [props.clientJoined]
  );

  console.log("remoteRef", props.clientJoined);
  const renderVideo = () => {
    // const { hotkeys, localRef, remoteRef } = props;
    console.log("hotkeys", hotkeys);
    switch (hotkeys) {
      // ER and EE
      case "event1":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3 className="right" />
          </React.Fragment>
        );
      // EE
      case "event2":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
                style={{ display: "none" }}
              />
            </Frame2>
            <Frame3 className="right" />
          </React.Fragment>
        );
      // ER
      case "event3":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="local-media"
                style={{ display: "none" }}
              />
            </Frame2>
            <Frame3 className="right" />
          </React.Fragment>
        );
      case "event4":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video autoPlay id="screenshare" style={{ display: "none" }} />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3 className="right">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame3>
          </React.Fragment>
        );
      // ER and SR
      case "event5":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen" />
            <Frame2>
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3>
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
                style={{ display: "none" }}
              />
            </Frame3>
          </React.Fragment>
        );
      // EE and SR
      case "event6":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen" />
            <Frame2>
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
                style={{ display: "none" }}
              />
            </Frame2>
            <Frame3>
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame3>
          </React.Fragment>
        );
      default:
        return (
          <React.Fragment>
            <Frame1 className="fullscreen" />
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3 className="right">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame3>
          </React.Fragment>
        );
    }
  };
  return (
    <React.Fragment>
      <Column>
        <ContentWrapper>
          {renderVideo(props)}
        </ContentWrapper>
      </Column>
    </React.Fragment>
  );
};

export default Studio;

So my question is how do i remove this code duplication?

Answer 1

Wouldn't it be possible to add events as a parameter to every frame that can decide for what events the components would be visible? Like instead of const Frame1 = you could use

    const Frame = styled.div`
    > video {
    width: 400px;
    height: auto;
    frameId: "1"
    events: ["event-1", "event-2"]
  }
`;

In the render function, this could be called by using

    return(
        frames.filter(frame => frame.events.includes(hotkeys).map(frame => { 
            return(
                <GenericFrame
                     frameId={frame.id}
                     .....

and so forth.