Элементы управления React Player - обработчики видеоизображений HTML5, не распознающие видеообъект

Question

Я новичок в среде React, поэтому я все еще изучаю синтаксис и шаблоны JSX.

Я пытаюсь подключить пользовательский интерфейс управления видео к элементу видео HTML5, но безрезультатно.

Я могу заставить отдельные кнопки PLAY и PAUSE управлять видео с помощью простой функции onClick, но когда я комбинирую PLAY / PAUSE как элемент переключения с компонентом, я не могу понять, как объединитьЗначок PLAY / PAUSE переключает события с помощью функций handlePlay () / handlePause ().

Я уверен, что это шаг новичка, который я пропускаю, но я в значительной степени застрял здесь ... любая обратная связь будет высоко оценена.

* РЕДАКТИРОВАТЬ: добавили эту строку в «PlaybackControls» (onClick = {isPlaying? Console.log ('PLAYING!'): Console.log ('PAUSED!')})

Theconsole.log () печатает «ИГРАТЬ!»и "ПРИОСТАНОВЛЕНО!"Событие onClick, как и ожидалось ... но если я заменим console.log () на вызовы функций handlePlay () и handlePause () ... ничего не произойдет.

Чего мне не хватает?

Пример моего кода приведен ниже:

import React, { Component } from 'react';

import { PlaybackControls, PlayButton, PauseButton, FormattedTime, 
TimeMarker, ProgressBar } from 'react-player-controls';

import customControls from './customControls.scss';

export default class Video01 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isPlayable: true,
      isPlaying: false,
      showPrevious: false,
      hasPrevious: false,
      showNext: false,
      hasNext: false
    }


    this.handlePlay = this.handlePlay.bind(this)
    this.handlePause = this.handlePause.bind(this)
}

  componentDidMount() {

  }

  componentWillMount() {

  }

/**********************************************************************\
    Video Playback Controls
\**********************************************************************/

    handlePlay () {
      if (this.props.isPlayable) {
        this.props.onPlaybackChange(true)
        this.refs.video01Ref.play()
      }
    }

    handlePause () {
      this.props.onPlaybackChange(false)
      this.refs.video01Ref.pause()
    }

  render() {

    return (
      <div>

      <div className={styles.container} data-tid="container">

        <div className={styles.videoContainer} data-tid="videoContainer">

        <video ref="video01Ref" src="./video/myVideo.webm" type="video/webm" />

        </div>

        </div>

        <div className={customControls.ControlsWrapper}>

          <PlaybackControls className={customControls.PlayButton, customControls.PauseButton}
            isPlayable={this.state.isPlayable}
            isPlaying={this.state.isPlaying}
            showPrevious={false}
            hasPrevious={false}
            showNext={false}
            hasNext={false}
            onPlaybackChange={isPlaying => this.setState(Object.assign({}, this.state, { isPlaying: isPlaying }))}
onClick={isPlaying ? console.log('PLAYING!') : console.log('PAUSED!')}

              />

              <ProgressBar className={customControls.ProgressBar} />

              <TimeMarker className={customControls.TimeMarker} />

            </div>

            </div>
        );
      }
    }

Answer 1

Я немного продвинулся, поэтому решил ответить на свой вопрос в надежде получить отзывы от хороших гуру Samaritan React / JSX.

Я все еще знакомлюсь с синтаксисом React / JSX, но мне действительно нравится то, что я узнал до сих пор.Модульный подход, безусловно, гораздо более эффективен, так как он связан с памятью / оптимизацией ... и позволяет намного легче определять ошибки и ошибки.С учетом сказанного ... вот что я обнаружил до сих пор:

• Я понял, как воспроизвести / приостановить видео с помощью внешнего компонента (пользовательские элементы управления плеером).
• Iузнал, что было бы разумно спроектировать мой макет с отдельными (вложенными) компонентами, в отличие от одного большого беспорядка (т. е. отдельных компонентов, которые объединены в класс, который затем вставляется в мой компонент, который вставляется в мой)

Я все еще пытаюсь понять, как передавать реквизит между компонентами.Концепция состояний и свойств имеет смысл для меня, но мне не хватает фундаментального понимания того, как правильно выполнять рабочий процесс.Я уверен, что это как-то связано с жизненными циклами React, но это совершенно отдельный разговор.

Пока пример моего обновленного кода опубликован ниже.Я могу воспроизводить / приостанавливать видео HTML5 с внешними компонентами (пользовательские элементы управления проигрывателя), но как передать элемент props обратно компонентам пользовательских элементов управления?Например, как мне сопоставить реквизиты по умолчанию (то есть «currentTime», «duration», «seek», «end» => с «currentTime», «totalTime», «onSeek» и т. Д.)?

Прошу прощения за мою длинную напыщенную речь, но любые отзывы будут очень благодарны.Вот мой обновленный код:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { PlaybackControls, PlayButton, PauseButton, FormattedTime, TimeMarker, TimeMarkerType, ProgressBar } from 'react-player-controls';

import customControls from './customControls.scss';

export default class CustomControls01 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEnabled: true,
      isPlayable: true,
      isPlaying: false,
      showPrevious: false,
      hasPrevious: false,
      showNext: false,
      hasNext: false,
      totalTime: 28,
      currentTime: 0,
      bufferedTime: 0,
      isSeekable: true,
      lastSeekStart: 0,
      lastSeekEnd: 0,
      markerSeparator: ' / ',
      firstMarkerType: TimeMarkerType.ELAPSED,
      secondMarkerType: TimeMarkerType.DURATION,
    }

    this.handlePlay = this.handlePlay.bind(this)
    this.handlePause = this.handlePause.bind(this)
}

    componentDidMount() {

    }

    componentWillUnmount() {

    }

/**********************************************************************\
  Video Playback Controls
\**********************************************************************/

  handlePlay() {
    vid01.play()
  }

  handlePause() {
    vid01.pause()
  }

  render() {

    const { isPlayable, isPlaying, showPrevious, showNext, hasPrevious, hasNext, totalTime, currentTime, markerSeparator, firstMarkerType, secondMarkerType, bufferedTime, isSeekable, lastSeekStart, lastSeekEnd, lastIntent, className, extraClasses, childClasses, style, childrenStyles, onPlaybackChange } = this.props;

    const TimeMarkerType = {
      ELAPSED: 'ELAPSED',
      REMAINING: 'REMAINING',
      REMAINING_NEGATIVE: 'REMAINING_NEGATIVE',
      DURATION: 'DURATION',
    }

    return (

        <div className={customControls.ControlsWrapper}>

          <PlaybackControls className={customControls.PlayButton, customControls.PauseButton}
            isPlayable={this.state.isPlayable}
            isPlaying={this.state.isPlaying}
            showPrevious={false}
            hasPrevious={false}
            showNext={false}
            hasNext={false}
            onPlaybackChange={isPlaying => this.setState({ ...this.state, isPlaying }, isPlaying ? (vid01) => this.handlePlay(isPlaying, isPlayable) : (vid01) => this.handlePause(isPlaying, isPlayable))}
          />

          <ProgressBar className={customControls.ProgressBar}
            totalTime={this.state.totalTime}
            currentTime={this.state.currentTime}
            bufferedTime={this.state.bufferedTime}
            isSeekable={this.state.isSeekable}
            onSeek={time => this.setState((vid01) => ({ currentTime: time }))}
            onSeekStart={time => this.setState((vid01) => ({ lastSeekStart: time }))}
            onSeekEnd={time => this.setState((vid01) => ({ lastSeekEnd: time }))}
            onIntent={time => this.setState((vid01) => ({ lastIntent: time }))}
          />

          <TimeMarker className={customControls.TimeMarker}
            totalTime={this.state.totalTime}
            currentTime={this.state.currentTime}
            markerSeparator={this.state.markerSeparator}
            firstMarkerType={this.state.firstMarkerType}
            secondMarkerType={this.state.secondMarkerType}
          />

        </div>

    );
  }
}

CustomControls01.propTypes = {
};