inline vitrine

5 files changed, 39 insertions, 15 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 002e00e..8403865 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -87,8 +87,8 @@ export const PlayerTime = ({ play_ts, duration }) => (
 
 export const ZoomPlus = (
   <svg className='zoomPlus' version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
-    <path d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z
-      M20,5.5C12,5.5,5.5,12,5.5,20c0,8,6.5,14.5,14.5,14.5S34.5,28,34.5,20C34.5,12,28,5.5,20,5.5z M27.5,19.5h-7v-7h-1v7h-7v1h7v7h1v-7
-      h7V19.5z"/>
+    <path className='ring' d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z M20,5.5C12,5.5,5.5,12,5.5,20c0,8,6.5,14.5,14.5,14.5S34.5,28,34.5,20C34.5,12,28,5.5,20,5.5z" />
+    <path className='ring-inner' d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z" />
+    <path className='cross' d="M27.5,19.5h-7v-7h-1v7h-7v1h7v7h1v-7h7V19.5z"/>
   </svg>
 )
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>
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
index abe0241..b2c7944 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
@@ -5,7 +5,7 @@ import { ZoomPlus } from '../../nav/viewer.icons.js'
 export const Vitrine = ({ media }) => {
   const { image_order, image_lookup, thumbnail_lookup } = media.settings
   const width = (Math.floor(100 / image_order.length * 2) - 2) + 'vw'
-  console.log(width)
+  // console.log(width)
   return (
     <div className='vitrine-items'>
       {image_order.map(id => {
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css b/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
index 171ab84..7acf601 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
@@ -46,6 +46,21 @@
 .vitrine-items .vitrine-item .zoomPlus {
   cursor: pointer;  
 }
-.vitrine-items .vitrine-item:hover .zoomPlus path {
+.vitrine-items .vitrine-item:hover .zoomPlus .cross {
   stroke: #000;
+  stroke-width: 0.5;
 }
+.vitrine-items .vitrine-item:hover .zoomPlus .ring {
+  fill: #fff;
+}
+.vitrine-items .vitrine-item .zoomPlus .ring-inner {
+  stroke: transparent;
+  fill: transparent;
+}
+.vitrine-items .vitrine-item:hover .zoomPlus .ring-inner {
+  fill: #fff;
+  stroke: #fff;
+}
+.inline-element.vitrine .heading {
+  padding-top: 8rem;
+}
\ No newline at end of file