fade in video opacity when it starts playing

1 files changed, 63 insertions, 47 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index d7cc967..513293a 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -6,61 +6,77 @@ import { SpeakerIcon } from '../../nav/viewer.icons'
 import { MediaCitation } from '../components.media'
 import { posterURL } from 'app/utils/annotation.utils'
 
-export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationClick }) => {
-  if (!media.lookup) return <div />
-  // const { color } = element
-  const className = currentParagraph ? 'media video current' : 'media video'
-  const annotation = paragraph.annotations[0]
-  const item = media.lookup[annotation.settings.media_id]
-  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
-  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-  const height = window.innerHeight - (17 * 16)
-  let style = {
-    color: color.textColor,
-    height: height + 32,
-    backgroundColor: color.backgroundColor,
+export class MediaVideo extends Component {
+  state = {
+    ready: false,
   }
+  constructor(props) {
+    super(props)
+    this.handlePlay = this.handlePlay.bind(this)
+  }
+  handlePlay() {
+    this.setState({ ready: true })
+  }
+  render() {
+    const { paragraph, media, currentParagraph, onAnnotationClick } = this.props
+    const { ready } = this.state
+    if (!media.lookup) return <div />
+    // const { color } = element
+    const className = currentParagraph ? 'media video current' : 'media video'
+    const annotation = paragraph.annotations[0]
+    const item = media.lookup[annotation.settings.media_id]
+    if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
+    const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+    const height = window.innerHeight - (17 * 16)
+    let style = {
+      color: color.textColor,
+      height: height + 32,
+      backgroundColor: color.backgroundColor,
+    }
 
-  // if this is a fullscreen video, display the poster image
-  if (annotation.settings.fullscreen && !annotation.settings.inline) {
-    const color = CURTAIN_COLOR_LOOKUP[annotation.settings.poster_background_color || annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-    style.color = color.textColor
-    style.backgroundColor = color.backgroundColor
-    style.backgroundImage = 'url(' + posterURL(item) + ')'
-    if (annotation.settings.poster_size) {
-      style.backgroundSize = annotation.settings.poster_size
+    // if this is a fullscreen video, display the poster image
+    if (annotation.settings.fullscreen && !annotation.settings.inline) {
+      const color = CURTAIN_COLOR_LOOKUP[annotation.settings.poster_background_color || annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+      style.color = color.textColor
+      style.backgroundColor = color.backgroundColor
+      style.backgroundImage = 'url(' + posterURL(item) + ')'
+      if (annotation.settings.poster_size) {
+        style.backgroundSize = annotation.settings.poster_size
+      }
+      return (
+        <div className={className}>
+          <div
+            className='videoPoster'
+            style={style}
+            onClick={e => onAnnotationClick(e, paragraph, annotation)}
+          >
+            <div className="speaker-icon">{SpeakerIcon}</div>
+          </div>
+          <MediaCitation media={item} />
+        </div>
+      )
     }
+
+    const poster = annotation.settings.poster ? {
+      backgroundImage: 'url(' + posterURL(item) + ')',
+    } : {}
+    style.opacity = ready ? 1.0 : 0.0
     return (
       <div className={className}>
-        <div
-          className='videoPoster'
-          style={style}
-          onClick={e => onAnnotationClick(e, paragraph, annotation)}
-        >
-          <div className="speaker-icon">{SpeakerIcon}</div>
+        <div className='videoPlayer' style={style}>
+          <VimeoPlayer
+            video={item.url}
+            autoplay={annotation.settings.autoplay}
+            muted={true}
+            responsive={true}
+            controls={false}
+            byline={false}
+            style={poster}
+            onPlay={this.handlePlay}
+          />
         </div>
         <MediaCitation media={item} />
       </div>
     )
   }
-
-  const poster = annotation.settings.poster ? {
-    backgroundImage: 'url(' + posterURL(item) + ')',
-  } : {}
-  return (
-    <div className={className}>
-      <div className='videoPlayer' style={style}>
-        <VimeoPlayer
-          video={item.url}
-          autoplay={annotation.settings.autoplay}
-          muted={true}
-          responsive={true}
-          controls={false}
-          byline={false}
-          style={poster}
-        />
-      </div>
-      <MediaCitation media={item} />
-    </div>
-  )
 }