From 14e171fd132fc92ddb6e8f14f72797c1fd7697ce Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 17 Aug 2020 15:30:01 +0200
Subject: adding grid

---
 .../viewer/player/components.utility/media.grid.js | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js

(limited to 'animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js')

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