From c89b17daf372c1cc6f83e5b456f888676990e721 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 3 Nov 2020 17:45:00 +0100
Subject: fade in video opacity when it starts playing

---
 .../player/components.inline/inline.image.js       |  57 ++++++-----
 .../player/components.inline/inline.video.js       | 110 ++++++++++++---------
 2 files changed, 98 insertions(+), 69 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player/components.inline')

diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 1f81aae..880d17b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -9,31 +9,44 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
 
-  let url;
-  if (item.type === 'gallery' && item.settings.display_lookup[annotation.settings.frame_index]) {
-    url = item.settings.display_lookup[annotation.settings.frame_index].url
+  let url, captionItem;
+  if (item.type === 'gallery') {
+    const index = parseInt(annotation.settings.frame_index)
+    const frame_id = item.settings.image_order[index]
+    const frame = item.settings.display_lookup[frame_id]
+    if (!frame) {
+      console.error("Slide not found:", annotation.settings.frame_index)
+      return <div />
+    }
+    url = frame.url
+    captionItem = item.settings.caption_lookup[frame_id] || item
   } else {
     url = item.settings.display.url
+    captionItem = item
+  }
+  if (annotation.settings.hide_caption) {
+    captionItem = null
   }
 
-  if (annotation.settings.fullscreen) {
-    return (
-      <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-        <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}}>
-          <div className="speaker-icon">{SpeakerIcon}</div>
-        </div>
-        <MediaCitation media={item} />
-      </div>
-    )
-  } else {
-    return (
-      <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-        <div className="image-container">
-          <img src={url} />
-          <div className="speaker-icon">{SpeakerIcon}</div>
-        </div>
-        <MediaCitation media={item} />
+  // "fullscreen-style inline images"
+  // if (annotation.settings.fullscreen) {
+  //   return (
+  //     <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
+  //       <div className="img" style={{ backgroundImage: 'url(' + url + ')'}}>
+  //         <div className="speaker-icon">{SpeakerIcon}</div>
+  //       </div>
+  //       <MediaCitation media={captionItem} />
+  //     </div>
+  //   )
+  // } else {
+  return (
+    <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
+      <div className="image-container">
+        <img src={url} />
+        <div className="speaker-icon">{SpeakerIcon}</div>
       </div>
-    )
-  }
+      <MediaCitation media={captionItem} />
+    </div>
+  )
+  // }
 }
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>
-  )
 }
-- 
cgit v1.2.3-70-g09d2