summaryrefslogtreecommitdiff
path: root/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
diff options
context:
space:
mode:
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js')
-rw-r--r--animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js14
1 files changed, 11 insertions, 3 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index 2fdcba7..213f17c 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -20,6 +20,8 @@ class FullscreenVideo extends Component {
seek: 0.0,
// whether or not the scrubber is scrubbing
scrubbing: false,
+ // whether or not the video is ready and displaying an image
+ ready: false,
}
constructor(props) {
super(props)
@@ -46,7 +48,7 @@ class FullscreenVideo extends Component {
}
}
handlePlay() {
-
+ this.setState({ ready: true })
}
handlePause() {
@@ -62,7 +64,7 @@ class FullscreenVideo extends Component {
render() {
const { element, media, transitionDuration, playing } = this.props
- const { duration, seconds } = this.state
+ const { duration, seconds, ready } = this.state
const { color } = element
const item = media.lookup[element.settings.media_id]
const style = {
@@ -70,13 +72,19 @@ class FullscreenVideo extends Component {
color: color.textColor,
transitionDuration,
}
+ const playerStyle = {
+ opacity: ready ? 1.0 : 0.0
+ }
//
return (
<div
className='fullscreen-element video'
style={style}
>
- <div className='vimeoPlayer'>
+ <div
+ className='videoPlayer'
+ style={playerStyle}
+ >
<VimeoPlayer
video={item.url}
paused={!playing}