gallery captions

3 files changed, 24 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
index 6ad5d0a..1519c40 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -25,12 +25,19 @@
   align-items: flex-start;
 }
 .gallery-item {
-  height: 25rem;
-  max-height: 90vh;
   padding-right: 1rem;
 }
-.gallery-item img {
-  height: 100%;
+.gallery-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 25rem;
+}
+.gallery-image img {
+  max-height: 25rem;
+}
+.gallery-caption {
+  margin-top: 0.5rem;
 }
 
 .gallery-container::-webkit-scrollbar {
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
index 0d08c11..3ad16b2 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react'
 
 export const Gallery = ({ media }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
-
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
   // console.log(display_lookup)
   // console.log(width)
   return (
@@ -10,9 +9,10 @@ export const Gallery = ({ media }) => {
       <div className='gallery-scroll'>
         {image_order.map(id => {
           const image = display_lookup[id]
+          const caption = (caption_lookup && caption_lookup[id]) || {}
           // console.log(image)
           return (
-            <GalleryItem key={id} image={image} />
+            <GalleryItem key={id} image={image} caption={caption} />
           )
         })}
       </div>
@@ -20,10 +20,18 @@ export const Gallery = ({ media }) => {
   )
 }
 
-const GalleryItem = ({ image }) => {
+const GalleryItem = ({ image, caption }) => {
+  console.log(image)
   return (
     <div className='gallery-item'>
-      <img src={image.url} />
+      <div className='gallery-image'>
+        <img src={image.url} />
+      </div>
+      {caption.caption && (
+        <div className='gallery-caption'>
+          {caption.caption}
+        </div>
+      )}
     </div>
   )
 }
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 25f1f62..b1fe91b 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -87,7 +87,6 @@
 }
 .player-transcript .media span {
   margin-right: 0;
-  border-bottom: 1px solid;
   cursor: pointer;
 }