Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

videoComponent attached to state

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-11-07 16:51:05 +02:00
parent e346703d4b
commit ef3fd37ac9
2 changed files with 9 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,15 +11,14 @@ class Player extends Component {
volume: null, volume: null,
duration: null, duration: null,
paused: null, paused: null,
prepared: false videoComponent: null
}; };
} }
componentDidMount() { componentDidMount() {
this.prepareStream() this.prepareStream()
.then(({ source, component }) => { .then(({ source, videoComponent }) => {
this.VideoComponent = component; this.setState({ videoComponent }, () => {
this.setState({ prepared: true }, () => {
this.video.dispatch('command', 'load', { this.video.dispatch('command', 'load', {
source: source source: source
}); });
@ -35,7 +34,7 @@ class Player extends Component {
nextState.volume !== this.state.volume || nextState.volume !== this.state.volume ||
nextState.duration !== this.state.duration || nextState.duration !== this.state.duration ||
nextState.paused !== this.state.paused || nextState.paused !== this.state.paused ||
nextState.prepared !== this.state.prepared; nextState.videoComponent !== this.state.videoComponent;
} }
assignVideo = (video) => { assignVideo = (video) => {
@ -45,7 +44,7 @@ class Player extends Component {
prepareStream = () => { prepareStream = () => {
return Promise.resolve({ return Promise.resolve({
source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
component: ReactHTMLVideo videoComponent: ReactHTMLVideo
}); });
} }
@ -66,14 +65,14 @@ class Player extends Component {
} }
renderVideo() { renderVideo() {
if (!this.state.prepared) { if (this.state.videoComponent === null) {
return null; return null;
} }
return ( return (
<this.VideoComponent <this.state.videoComponent
ref={this.assignVideo} ref={this.assignVideo}
className={styles['video-layer']} className={styles['layer']}
onPropChanged={this.onPropChanged} onPropChanged={this.onPropChanged}
onPropValue={this.onPropValue} onPropValue={this.onPropValue}
onEnded={this.onEnded} onEnded={this.onEnded}

3
src/routes/Player/styles.less
View file

@ -4,11 +4,10 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
.video-layer { .layer {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }