adding grid

1 files changed, 42 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
new file mode 100644
index 0000000..5bba2d5
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
+
+export const Grid = ({ 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='grid-container'>
+      {image_order.map(id => {
+        const image = display_lookup[id]
+        const caption = (caption_lookup && caption_lookup[id]) || {}
+        // console.log(image)
+        return (
+          <GridItem key={id} image={image} caption={caption} />
+        )
+      })}
+    </div>
+  )
+}
+
+const GridItem = ({ image, caption }) => {
+  console.log(image)
+  return (
+    <div className='grid-item'>
+      <div className='grid-image'>
+        <img src={image.url} />
+      </div>
+      {caption.caption && (
+        <div className='grid-caption'>
+          {caption.caption}
+        </div>
+      )}
+    </div>
+  )
+}