Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-12 23:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Video component refactored to be used through dispatch method only

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-16 15:00:37 +02:00
parent 425f50724d
commit bde6e72e7c
2 changed files with 18 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/Player/Player.js
View file

@ -46,6 +46,7 @@ class Player extends Component {
label: 'English'
}]);
this.dispatch('setProp', 'selectedSubtitleTrackId', 'https://raw.githubusercontent.com/caitp/ng-media/master/example/assets/captions/bunny-en.vtt');
this.dispatch('command', 'load', this.props.stream);
}
onEnded = () => {
@ -74,7 +75,6 @@ class Player extends Component {
<Video
ref={this.videoRef}
className={styles['layer']}
stream={this.props.stream}
onEnded={this.onEnded}
onError={this.onError}
onPropValue={this.onPropValue}

37
src/routes/Player/Video/Video.js
View file

@ -13,19 +13,6 @@ class Video extends Component {
this.video = null;
}
componentDidMount() {
const Video = this.selectVideoImplementation();
this.video = new Video(this.containerRef.current);
this.video.on('ended', this.props.onEnded);
this.video.on('error', this.props.onError);
this.video.on('propValue', this.props.onPropValue);
this.video.on('propChanged', this.props.onPropChanged);
this.video.constructor.manifest.props.forEach((propName) => {
this.dispatch('observeProp', propName);
});
this.dispatch('command', 'load', this.props.stream, this.props.extra);
}
shouldComponentUpdate() {
return false;
}
@ -34,8 +21,8 @@ class Video extends Component {
this.dispatch('command', 'destroy');
}
selectVideoImplementation = () => {
if (this.props.stream.ytId) {
selectVideoImplementation = (stream, extra) => {
if (stream.ytId) {
return YouTubeVideo;
} else {
return HTMLVideo;
@ -43,6 +30,21 @@ class Video extends Component {
}
dispatch = (...args) => {
if (args[0] === 'command' && args[1] === 'load') {
const Video = this.selectVideoImplementation(args[2], args[3]);
if (this.video === null || this.video.constructor !== Video) {
this.dispatch('command', 'destroy');
this.video = new Video(this.containerRef.current);
this.video.on('ended', this.props.onEnded);
this.video.on('error', this.props.onError);
this.video.on('propValue', this.props.onPropValue);
this.video.on('propChanged', this.props.onPropChanged);
this.video.constructor.manifest.props.forEach((propName) => {
this.dispatch('observeProp', propName);
});
}
}
try {
this.video && this.video.dispatch(...args);
} catch (e) {
@ -59,15 +61,10 @@ class Video extends Component {
Video.propTypes = {
className: PropTypes.string,
stream: PropTypes.object.isRequired,
extra: PropTypes.object.isRequired,
onEnded: PropTypes.func.isRequired,
onError: PropTypes.func.isRequired,
onPropValue: PropTypes.func.isRequired,
onPropChanged: PropTypes.func.isRequired
};
Video.defaultProps = {
extra: Object.freeze({})
};
export default Video;