从外部组件切换全屏时取消静音 react-player

Question

我有一个 VideoItem- 和一个 Player- 组件

在 VideoList 中单击一个按钮并进入全屏模式（按预期工作）单击全屏时我将取消播放器静音。

如何将“静音”更改从 VideoList 传递到 Player？在我的 Player 中，我还有一个“取消静音”按钮（它也按预期工作：

这是我目前所拥有的

VideoItem.jsx

import React, { useRef, useState, useEffect } from "react"
import { findDOMNode } from "react-dom"
import screenfull from "screenfull"
import VideoPlayer from "./VideoPlayer"

const VideoList = (videos) => {
  const ref = useRef()

  const toggleFullScreen = () => {
    screenfull.request(findDOMNode(ref.current))
  }

  const unMute = () => {
    console.log("Should pass Mute state to player", muted)
  }
  return (
   <>
     <VideoPlayer
            ref={ref}
            mute={muted}
            videoURL={videoUrl}
     />
     <a
       href="#"
       onClick={e => {
         e.preventDefault()
         unMute()
         toggleFullScreen()
       }}
     >
      Show Fullscreen
     </a>
  )
}

Player.jsx

import React, { forwardRef, useState, useEffect } from "react"
import ReactPlayer from "react-player"
const VideoPlayer = forwardRef((props, ref, mute) => {
  let [muteState, setMuteState] = useState(true)

  return (
    <>
      <i className={`fal fa-volume-${muteState ? "up" : "mute"}`}
         onClick={() => {
           setMuteState(!muteState)
         }}
      />
      <ReactPlayer
          ref={ref}
          muted={muteState}
          loop={true}
          playing={true}
          url={props.videoURL}
        />
    </>
  )
}

谢谢！

Answer 1

当您尝试从父级设置状态时，这通常表明您应该向上移动状态并让子级由父级控制：

const VideoList = (videos) => {
  const player = useRef();
  const [muted, setMuted] = useState(true);
  const [fullscreen, setFullscreen] = useState(false);

  const handleToggleMute = () => setMuted(current => !current);

  const handleFullscreen = event => {
    event.preventDefault();
    setMuted(false);
    setFullscreen(true);
  };

  return (
   <>
     <VideoPlayer
       ref={ref}
       muted={muted}
       fullscreen={fullscreen}
       videoURL={videoUrl}
       onToggleMute={handleToggleMute}
     />
     <a href="#" onClick={handleFullscreen}>Show Fullscreen</a>
  )
}

我还会将 useEffect 与另一个状态 fullscreen 一起使用，以避免必须转发视频播放器的引用。

const VideoPlayer = ({videoURL, muted, fullscreen, onToggleMute}) => {
  const playerRef = useRef();

  useEffect(() => {
      if (fullscreen) {
        const videoElem = playerRef.current.getInternalPlayer();
        screenfull.request(videoElem);
      }
  }, [fullscreen]);

  return (
    <>
      <i 
        className={`fal fa-volume-${muted ? "up" : "mute"}`}
        onClick={onToggleMute}
      />
      <ReactPlayer
        ref={playerRef}
        muted={muted}
        loop={true}
        playing={true}
        url={videoURL}
      />
    </>
  )
}

从外部组件切换全屏时取消静音 react-player

unmute react-player when fullscreen is toggled from outer component

reactjs

react-player