2 files changed, 26 insertions, 8 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 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;