vitrine modal

1 files changed, 38 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
new file mode 100644
index 0000000..2033465
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+
+import { ZoomPlus } from '../../nav/viewer.icons.js'
+
+import actions from 'app/actions'
+
+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)
+  return (
+    <div className='vitrine-items'>
+      {image_order.map(id => {
+        const thumbnail = thumbnail_lookup[id]
+        return (
+          <VitrineItem
+            key={id}
+            media={media}
+            id={id}
+            image={thumbnail}
+            width={width}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+const VitrineItem = ({ media, id, image, width }) => {
+  return (
+    <div className='vitrine-item' style={{ width }} onClick={() => actions.viewer.openVitrineModal(media, id)}>
+      <div className='vitrine-image'>
+        <img src={image.url} />
+      </div>
+      {ZoomPlus}
+    </div>
+  )
+}