From 268ae2f8a416527f5d71c0f53345da4c267c8216 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 13 Aug 2020 17:02:43 +0200
Subject: inline vitrine

---
 .../player/components.inline/inline.gallery.js     | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js')

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>
-- 
cgit v1.2.3-70-g09d2