higher res curtain bg

3 files changed, 36 insertions, 8 deletions

diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index a5d3f39..5bf21b5 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -17,6 +17,7 @@ export const annotationFadeTimings = annotation => {
 }
 
 export const thumbnailURL = media => {
+  let image_id
   // console.log(media)
   switch (media.type) {
     case 'video':
@@ -35,7 +36,7 @@ export const thumbnailURL = media => {
       if (!media.settings.image_order || !media.settings.image_order.length) {
         return null
       }
-      const image_id = media.settings.image_order[0]
+      image_id = media.settings.image_order[0]
       return media.settings.thumbnail_lookup[image_id].url
 
     default:
@@ -43,10 +44,37 @@ 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 displayThumbnailURL = media => {
+  let image_id
+  switch (media.type) {
+    case 'video':
+      if (media.settings.poster) {
+        return media.settings.poster.url
+      }
+      return media.settings.video.thumbnail_url
+
+    case 'image':
+      return media.settings.display.url
+
+    case 'gallery':
+      if (media.settings.thumbnail) {
+        return media.settings.thumbnail.url
+      }
+      if (!media.settings.image_order || !media.settings.image_order.length) {
+        return null
+      }
+      image_id = media.settings.image_order[0]
+      return media.settings.display_lookup[image_id].url
+
+    default:
+      return null
+  }
+}
+
+export const posterURL = media => {
+  if (!media.settings.video) return null
+  if (media.settings.poster) return media.settings.poster.url
+  return media.settings.video.thumbnail_url
 }
 
 export const sectionProgress = (section, play_ts) => {
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
index a58f29c..5ec4833 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { EPILEPSY_WARNING, ROMAN_NUMERALS } from 'app/constants'
-import { thumbnailURL } from 'app/utils/annotation.utils'
+import { displayThumbnailURL } from 'app/utils/annotation.utils'
 
 export const FullscreenCurtain = ({ element, transitionDuration }) => {
   // console.log(element, isEntering)
@@ -13,7 +13,7 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => {
   }
   console.log(element)
   const curtainBackground = element.mediaItem && {
-    backgroundImage: 'url(' + (thumbnailURL(element.mediaItem)) + ')',
+    backgroundImage: 'url(' + (displayThumbnailURL(element.mediaItem)) + ')',
   }
   let texts = []
   // console.log(element)
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 28ac255..4f7b33d 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -144,7 +144,7 @@ iframe {
   opacity: 0;
 }
 .fullscreen-element.curtain.fade-enter-done .curtain-background {
-  opacity: 0.3;
+  opacity: 0.25;
 }
 .fullscreen-element.curtain.fade-exit div,
 .fullscreen-element.curtain.fade-exit-done div {