React Player Controls - HTML5 video event handlers not recognizing video object - html

Question

I'm new to the React framework, so I'm still learning JSX syntax and patterns.
I am attempting to hook a custom video control UI into an HTML5 video element, but to no avail.
I can get the individual PLAY and PAUSE buttons to control the video with a simple onClick function, but when I combine PLAY/PAUSE as a toggle element with the component, I can't figure out how to combine the PLAY/PAUSE icon toggle events with my handlePlay()/handlePause() functions.
I'm sure this is a novice step that I am missing, but I am pretty much stuck here...any feedback will be much appreciated.
*EDIT: added this line inside "PlaybackControls" ( onClick={isPlaying ? console.log('PLAYING!') : console.log('PAUSED!')} )
The console.log() prints 'PLAYNING!' and 'PAUSED!' onClick event, as expected...but if I replace the console.log()s with calls to the "handlePlay()" and "handlePause()" functions...nothing happens.
What am I missing?
A sample of my code is listed below:
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

I made a bit of progress so I decided to answer my own question, in hopes of spurring some feedback from some good Samaritan React/JSX gurus.
I am still getting familiar with the React/JSX syntax, but I am really liking what I have learned so far. The modular approach is definitely much more efficient as it relates to memory/optimization...and it makes it much easier to pin-point bugs and errors. With that being said...here's what I discovered so far:
I figured out how to play/pause my video via an external component (Custom Player Controls).
I learned that it is wise to engineer my layout with individual(nested) components, as opposed to one large mess (i.e. , and are individual components that are combined into a class, which is then inserted into my component, which is inserted into my )
What I am still trying to figure out is how to pass props between components. The concept of States and Properties makes sense to me, but I am lacking some fundamental understanding of how to properly execute a workflow. I am sure it has something to do with React Life Cycles, but that's an entirely separate conversation.
For now, an example of my updated code is posted below. I am able to Play/Pause an HTML5 video with and external components (Custom Player Controls), but how to I pass the props element back to the custom controls components? For example, how do I map the default props (i.e. "currentTime", "duration", "seeking", "ended" => to the "currentTime", "totalTime", "onSeek", etc.)?
Pardon my lengthy rant, but any feedback will be greatly appreciate. Here's my updated code:
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 = {
};