add uploadable poster image to videos and make them auto inline

5 files changed, 45 insertions, 14 deletions

diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 2e53be1..41e0e3b 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -40,6 +40,12 @@ export const thumbnailURL = media => {
   }
 }
 
+export const posterURL = data => {
+  if (!data.settings.video) return null
+  if (data.settings.poster) return data.settings.poster.url
+  return data.settings.video.thumbnail_url
+}
+
 export const sectionProgress = (section, play_ts) => {
   return (clamp(play_ts, section.start_ts, section.end_ts) - section.start_ts) / section.duration
 }
diff --git a/animism-align/frontend/app/views/media/components/media.formVideo.js b/animism-align/frontend/app/views/media/components/media.formVideo.js
index a586bb8..493a10c 100644
--- a/animism-align/frontend/app/views/media/components/media.formVideo.js
+++ b/animism-align/frontend/app/views/media/components/media.formVideo.js
@@ -2,8 +2,10 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import VimeoPlayer from '@u-wave/react-vimeo'
 
+import actions from 'app/actions'
 import { capitalize } from 'app/utils'
-import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+import { posterURL } from 'app/utils/annotation.utils'
+import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader, FileInputField } from 'app/common'
 
 import { getVimeoMetadata } from 'app/views/media/media.actions'
 
@@ -62,12 +64,13 @@ export default class MediaVideoForm extends Component {
     }
     // uploadData['__image_filename'] = file.filename
     return actions.upload.upload(uploadData).then(data => {
-      this.handleSettingsChange("poster", data.res)
+      this.handleSettingsSelect("poster", data.res)
     })
   }
 
   render() {
     const { data } = this.props
+    const poster_url = posterURL(data)
     return (
       <div className='videoForm'>
         <TextInput
@@ -85,11 +88,11 @@ export default class MediaVideoForm extends Component {
               <VimeoPlayer video={data.url} />
             </LabelDescription>
 
-            {data.settings.video &&
+            {poster_url &&
               <LabelDescription className='thumbnail'>
-                {data.settings.poster &&
-                  <img src={data.settings.poster ? data.settings.poster.url : data.settings.video.thumbnail} />
-                }
+                <a href={poster_url} target="_blank">
+                  <img src={poster_url} />
+                </a>
               </LabelDescription>
             }
 
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 cf3043b..a5b3757 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
@@ -4,6 +4,7 @@ import VimeoPlayer from 'app/utils/vendor/vimeo'
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 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 />
@@ -20,17 +21,25 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli
     height: height + 32,
     backgroundColor: color.backgroundColor,
   }
+
+  // if this is a fullscreen video, display the poster image
+  if (annotation.settings.fullscreen && !annotation.settings.inline) {
+    style.backgroundImage = 'url(' + posterURL(item) + ')'
+    return (
+      <div className={className}>
+        <div className='videoPoster' style={style}>
+          <div className="speaker-icon">{SpeakerIcon}</div>
+        </div>
+        <MediaCitation media={item} />
+      </div>
+    )
+  }
+
   const poster = annotation.settings.poster ? {
-    backgroundImage: 'url(' + item.settings.video.thumbnail_url + ')',
-    backgroundSize: '50%',
-    backgroundPosition: 'center center',
-    backgroundRepeat: 'no-repeat',
+    backgroundImage: 'url(' + posterURL(item) + ')',
   } : {}
-  // console.log(annotation.settings)
   return (
-    <div
-      className={className}
-    >
+    <div className={className}>
       <div className='videoPlayer' style={style}>
         <VimeoPlayer
           video={item.url}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 9b6e3da..c0eb1ea 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -221,6 +221,15 @@
   height: 100%;
   padding: 0 !important;
 }
+.player-transcript .media.video .videoPoster {
+  cursor: pointer;
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: calc(100vh - 15rem) !important;
+  padding: 1rem 0;
+}
 .player-transcript .media.image .speaker-icon {
   bottom: 0;
   right: 0;
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index f3e3465..3fbe47b 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -128,6 +128,10 @@ export const loadSections = () => dispatch => {
     if ((FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) && !annotation.settings.inline) {
       const event = makeFullscreenEvent(eventIndex++, annotation)
       currentSection.fullscreenTimeline.push(event)
+      // for videos, we probably want to show a poster image
+      if (annotation.type === 'video' && !annotation.settings.hide_poster_inline) {
+        sectionTextAnnotationOrder.push(annotation.id)
+      }
     }
 
     // add text annotations to section annotation order