Skip to content

Commit

Permalink
Skip to the next video on click
Browse files Browse the repository at this point in the history
  • Loading branch information
doguscan committed Dec 20, 2017
1 parent 12723a7 commit 6a7a06d
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 3 deletions.
15 changes: 14 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ class App extends Component {
this.onNextButtonClick = this.onNextButtonClick.bind(this);
this.onWtfButtonClick = this.onWtfButtonClick.bind(this);
this._onEnd = this._onEnd.bind(this);
this._onPause = this._onPause.bind(this);
this.incrementIndex = this.incrementIndex.bind(this);
this._onYoutubePlayerClicked = this._onYoutubePlayerClicked.bind(this);
}

onNextButtonClick() {
Expand All @@ -39,6 +41,10 @@ class App extends Component {
this.incrementIndex();
}

_onPause(event){
this.incrementIndex();
}

incrementIndex() {
let index = this.state.index;
if ((index + 1) === this.state.data.length) index = -1;
Expand All @@ -62,6 +68,12 @@ class App extends Component {
});
}

_onYoutubePlayerClicked(){
let index = this.state.index;
if ((index + 1) === this.state.data.length) index = -1;
this.setState({index: index + 1, wtfCount: this.state.data[index + 1].wtfCount});
}

render() {
let data = this.state.data[this.state.index] ? this.state.data[this.state.index] : undefined;
return (
Expand All @@ -76,7 +88,8 @@ class App extends Component {
<button onClick={this.onNextButtonClick}>Next</button>
{data && <button onClick={this.onWtfButtonClick}>What The Fuck Did I Just See</button>}
{data && <span>{this.state.wtfCount}</span>}
{data && <YoutubePlayer videoId={data.url} onEnd={this._onEnd}/>}
{data && <YoutubePlayer videoId={data.url} onEnd={this._onEnd}
onPause={this._onPause}/>}
</header>
</div>
</div>
Expand Down
11 changes: 9 additions & 2 deletions src/components/youtube-player.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ import React from 'react';
import YouTube from 'react-youtube';

class YoutubePlayer extends React.Component {

constructor(props){
super(props);
this._onPause = this._onPause.bind(this);
}

render() {
const opts = {
height: '100%',
Expand All @@ -23,12 +29,13 @@ class YoutubePlayer extends React.Component {
opts={opts}
onReady={this._onReady}
onEnd={this._onEnd.bind(this)}
onClick={this._onClick}
onPause={this._onPause}
/>
);
}

_onClick(event){
_onPause(event){
this.props.onPause();
}

_onReady(event) {
Expand Down

0 comments on commit 6a7a06d

Please sign in to comment.