ReactJS / GatsbyJS Изменить все экземпляры узлов видео

Question

Мне нужно отключить звук всех экземпляров видео, прежде чем включать звук включенного экземпляра.Каков наилучший способ инициировать это действие?

Компонент «Вызов видео» - циклическое воспроизведение всех видео.

<ol className="videos">
  {data.allFile.nodes.map((node, i) => {
    return (
      <li key={i} className="video">
        <Video vid={node.publicURL} />
      </li>
    )
  })}
</ol>

Компонент видео - вывод видео и добавление обработчика кликов для отключения и включения звука.

import React from 'react'

const Video = (props) => {
  const [mute, setMute] = React.useState(true)

  const clickHandler = () => {
    setMute(!mute)
  }

  return (
    <video autoPlay="1" loop="1" muted={(mute ? true : false)} onClick= {clickHandler}>
      <source src={props.vid} type="video/mp4" />
    </video>
  )
}

export default Video

Answer 1

Используйте mute в качестве опоры для элемента Video Component вместо состояния для компонента Video.Таким образом, вы можете быть уверены, что только ОДИН видеоролик включен.Пример:

const VideoList = () => {
  const [active, setActive] = useState(0);

  <ol className="videos">
    {data.allFile.nodes.map((node) => {
      return (
        <li key={node.id} className="video">
          <Video vid={node.publicURL} mute={active !== node.id} onClick={() => setActive(active !== node.id ? node.id : -1)} />
        </li>
      )
    })}
  </ol>
};

const Video = (props) => {
  return (
    <video autoPlay="1" loop="1" muted={props.mute} onClick={props.onClick}>
      <source src={props.vid} type="video/mp4" />
    </video>
  )
}

Таким образом, компонент VideoList контролирует, отключено или нет каждое видео.

Обратите внимание, что использование индекса массива не лучший способ справиться с этим, особенноесли ваш массив видео может изменяться со временем.

РЕДАКТИРОВАТЬ:

Если вы хотите убедиться, что все видео при первом рендере отключены, просто установите значение по умолчанию для состояния -1.

const [active, setActive] = useState(-1);