inline vitrine

1 files changed, 12 insertions, 10 deletions

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>