zhihu / griffith

A React-based web video player
https://codesandbox.io/embed/p03wm0o80
MIT License
2.5k stars 226 forks source link

useEffect中使用messageContextRef无效 #303

Closed Ys-OoO closed 1 year ago

Ys-OoO commented 1 year ago

我在父组件中通过改变url props 来改变当前要播放时的视频源,但是我需要切换时从0开始播放。 当我这么写的时候,ACTION触发无效:

export default function IVideo({ url, ...props }) {
  const messageContextRef = useMessageContextRef();

  useEffect(() => {
          messageContextRef .dispatchAction(ACTIONS.TIME_UPDATE, { currentTime: 0 });
          messageContextRef .dispatchAction(ACTIONS.PLAY);
  }, [url]);

  return (
    <div className={style.videoPlayer} {...props}>
      <Player
        messageContextRef={messageContextRef}
        shouldObserveResize={true}
        initialObjectFit={'contain'}
        className={style.player}
        locale="zh-Hans"
        // autoplay={true}
        disablePictureInPicture={true}
        hiddenQualityMenu={true}
        sources={{
          hd: {
            play_url: url,
          },
        }}
      />
    </div>
  );
}

但是使用button 添加onClick的时候dispatchAction有效,但是我实际触发的方式是父组件监听了键盘事件来切换url。 为此我使用了各种方法,最后通过useEffect向外抛出ref实现了:

export default function IVideo({ url, exposeRef = () => {}, ...props }) {
  const messageContextRef = useMessageContextRef();

  useEffect(() => {
    exposeRef(messageContextRef);
  }, [messageContextRef]);

  return (
    <div className={style.videoPlayer} {...props}>
      <Player
        messageContextRef={messageContextRef}
        shouldObserveResize={true}
        initialObjectFit={'contain'}
        className={style.player}
        locale="zh-Hans"
        // autoplay={true}
        disablePictureInPicture={true}
        hiddenQualityMenu={true}
        sources={{
          hd: {
            play_url: url,
          },
        }}
      />
    </div>
  );
}
<IVideo
                  url={videoUrl}
                  exposeRef={(ref) => {
                    setVideoRef(ref);
                  }}
/>

在键盘事件中使用了videoRef.dispatchAction(),达到了效果 我认为这是一个bug,或者可能是我使用有误?想知道为什么会这样。

ambar commented 1 year ago

duplicate of #302