1 files changed, 47 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js
new file mode 100644
index 0000000..da83c4f
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
+
+export const Gallery = ({ media, annotation }) => {
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  const style = {
+    backgroundColor: color.backgroundColor,
+    // color: color.textColor,
+  }
+
+  // console.log(display_lookup)
+  // console.log(width)
+  return (
+    <div style={style} className='gallery-container'>
+      <div className='gallery-items'>
+        <div className='gallery-scroll'>
+          {image_order.map(id => {
+            const image = display_lookup[id]
+            const caption = (caption_lookup && caption_lookup[id]) || {}
+            // console.log(image)
+            return (
+              <GalleryItem key={id} image={image} caption={caption} />
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const GalleryItem = ({ image, caption }) => {
+  // console.log(image)
+  return (
+    <div className='gallery-item'>
+      <div className='gallery-image'>
+        <img src={image.url} />
+      </div>
+      {caption.caption && (
+        <div className='gallery-caption'>
+          {caption.caption}
+        </div>
+      )}
+    </div>
+  )
+}