1 files changed, 35 insertions, 22 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 1f81aae..880d17b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -9,31 +9,44 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
 
-  let url;
-  if (item.type === 'gallery' && item.settings.display_lookup[annotation.settings.frame_index]) {
-    url = item.settings.display_lookup[annotation.settings.frame_index].url
+  let url, captionItem;
+  if (item.type === 'gallery') {
+    const index = parseInt(annotation.settings.frame_index)
+    const frame_id = item.settings.image_order[index]
+    const frame = item.settings.display_lookup[frame_id]
+    if (!frame) {
+      console.error("Slide not found:", annotation.settings.frame_index)
+      return <div />
+    }
+    url = frame.url
+    captionItem = item.settings.caption_lookup[frame_id] || item
   } else {
     url = item.settings.display.url
+    captionItem = item
+  }
+  if (annotation.settings.hide_caption) {
+    captionItem = null
   }
 
-  if (annotation.settings.fullscreen) {
-    return (
-      <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-        <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}}>
-          <div className="speaker-icon">{SpeakerIcon}</div>
-        </div>
-        <MediaCitation media={item} />
-      </div>
-    )
-  } else {
-    return (
-      <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-        <div className="image-container">
-          <img src={url} />
-          <div className="speaker-icon">{SpeakerIcon}</div>
-        </div>
-        <MediaCitation media={item} />
+  // "fullscreen-style inline images"
+  // if (annotation.settings.fullscreen) {
+  //   return (
+  //     <div className="media image fullscreen" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
+  //       <div className="img" style={{ backgroundImage: 'url(' + url + ')'}}>
+  //         <div className="speaker-icon">{SpeakerIcon}</div>
+  //       </div>
+  //       <MediaCitation media={captionItem} />
+  //     </div>
+  //   )
+  // } else {
+  return (
+    <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
+      <div className="image-container">
+        <img src={url} />
+        <div className="speaker-icon">{SpeakerIcon}</div>
       </div>
-    )
-  }
+      <MediaCitation media={captionItem} />
+    </div>
+  )
+  // }
 }