fade in video opacity when it starts playing

2 files changed, 13 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
index a70cd1f..60ba7c9 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
@@ -10,8 +10,9 @@ export const FullscreenImage = ({ element, media, transitionDuration }) => {
     color: color.textColor,
     transitionDuration,
   }
+  
   let url;
-  console.log(element, item)
+  // console.log(element, item)
   if (item.type === 'gallery') {
     const index = parseInt(element.settings.frame_index)
     const frame_id = item.settings.image_order[index]
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}