Question

基于命令，我需要显示视频元素。我的意思是，用例类似于：如果只有1个，则只有Interviewer（ER）视频，如果有2个，则只有Interviewee（EE）视频，如果有3个，则都是两个视频，如果有4个，则都带有PowerPoint在后台。为了显示视频元素，我需要在componentDidMount中使用ref，其中正在监听套接字以使用ref添加流以获取视频元素。

我这样做是在重复代码太多的地方

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;

所以我的问题是如何删除此重复代码？

Answer 1

是否不可能将events作为参数添加到可以确定组件可见的事件的每个帧中？喜欢代替const Frame1 = 您可以使用

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

在render函数中，可以使用

来调用

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

等等。

重复代码以根据条件显示视频元素

1 个答案: