From 6a4d95f988e7782080de3056fe60522404ea4a12 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 11 Aug 2020 19:38:53 +0200
Subject: adding vitrine

---
 .../viewer/player/components.utility/index.js      | 14 ++++++++++
 .../player/components.utility/media.citation.js    | 29 +++++++++++++++++++++
 .../player/components.utility/media.vitrine.js     | 30 ++++++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/index.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js

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

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/index.js b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
new file mode 100644
index 0000000..be38cac
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import {
+  MediaCitation
+} from './media.citation'
+
+import {
+  Vitrine
+} from './media.vitrine'
+
+export {
+  MediaCitation,
+  Vitrine,
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
new file mode 100644
index 0000000..7b3212d
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+
+export const MediaCitation = ({ media }) => {
+  if (media.settings.bibliography) {
+    return (
+      <div className='citation' dangerouslySetInnerHTML={{ __html: media.settings.bibliography }} />
+    )
+  }
+  return (
+    <div className='citation'>
+      {media.author}
+      {', '}
+      {media.pre_title}
+      <i>{media.title}</i>
+      {media.post_title}
+      {'. '}
+      {media.date && (
+        ' ' + media.date + '.'
+      )}
+      {media.medium && (
+        ' ' + media.medium + '.'
+      )}
+      {media.source && (
+        ' ' + media.source.trim()
+      )}
+    </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
new file mode 100644
index 0000000..abe0241
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+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)
+  return (
+    <div className='vitrine-items'>
+      {image_order.map(id => {
+        const thumbnail = thumbnail_lookup[id]
+        return (
+          <VitrineItem key={id} image={thumbnail} width={width} />
+        )
+      })}
+    </div>
+  )
+}
+
+const VitrineItem = ({ image, width }) => {
+  return (
+    <div className='vitrine-item' style={{ width }}>
+      <div className='vitrine-image'>
+        <img src={image.url} />
+      </div>
+      {ZoomPlus}
+    </div>
+  )
+}
-- 
cgit v1.2.3-70-g09d2