Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useEffect中使用messageContextRef无效 #303

Closed
Ys-OoO opened this issue Oct 30, 2023 · 1 comment
Closed

useEffect中使用messageContextRef无效 #303

Ys-OoO opened this issue Oct 30, 2023 · 1 comment

Comments

@Ys-OoO
Copy link

Ys-OoO commented Oct 30, 2023

我在父组件中通过改变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
Copy link
Collaborator

ambar commented Nov 6, 2023

duplicate of #302

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants