From d94ac6fa8509a883f4f51f62887da9b9b5084740 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 22 Oct 2020 15:35:02 +0200
Subject: add uploadable poster image to videos and make them auto inline

---
 .../player/components.inline/inline.video.js       | 25 +++++++++++++++-------
 1 file changed, 17 insertions(+), 8 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.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}
-- 
cgit v1.2.3-70-g09d2