2 files changed, 19 insertions, 10 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index 781378e..fb949db 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -13,6 +13,11 @@ import {
 } from './inline.image'
 
 import {
+  InlineGallery,
+  InlineVitrine,
+} from './inline.gallery'
+
+import {
   Intro
 } from './inline.utility'
 
@@ -27,4 +32,6 @@ export const inlineComponents = {
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
   intro: React.memo(Intro),
+  vitrine: InlineVitrine,
+  gallery: InlineGallery,
 }
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 34a8633..70ad8ac 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -1,37 +1,39 @@
 import React from 'react'
 
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { MediaCitation, Vitrine } from '../components.utility'
 
-export const InlineVitrine = ({ element, media, transitionDuration }) => {
-  const { color } = element
-  const item = media.lookup[element.settings.media_id]
+export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
   const style = {
     backgroundColor: color.backgroundColor,
     color: color.textColor,
-    transitionDuration,
   }
   return (
     <div
-      className='media vitrine'
+      className='inline-element media vitrine'
       style={style}
     >
+      {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>}
       <Vitrine media={item} />
       <MediaCitation media={item} />
     </div>
   )
 }
 
-export const InlineGallery = ({ element, media, transitionDuration }) => {
-  const { color } = element
-  const item = media.lookup[element.settings.media_id]
+export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
   const style = {
     backgroundColor: color.backgroundColor,
     color: color.textColor,
-    transitionDuration,
   }
   return (
     <div
-      className='media gallery'
+      className='inline-element media gallery'
       style={style}
     >
     </div>