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

---
 .../frontend/app/views/viewer/nav/nav.css          |  9 +++
 .../frontend/app/views/viewer/nav/viewer.icons.js  | 10 ++++
 .../frontend/app/views/viewer/nav/viewer.router.js |  7 +--
 .../components.fullscreen/fullscreen.gallery.js    | 41 ++++++++++++++
 .../viewer/player/components.fullscreen/index.js   |  6 ++
 .../player/components.inline/inline.image.js       | 27 +--------
 .../player/components.inline/inline.video.js       |  7 +--
 .../viewer/player/components.utility/index.js      | 14 +++++
 .../player/components.utility/media.citation.js    | 29 ++++++++++
 .../player/components.utility/media.vitrine.js     | 30 ++++++++++
 .../app/views/viewer/player/player.fullscreen.css  | 65 ++++++++++++++++++++++
 .../transcript/components/elementTypes.gallery.js  | 22 ++++++++
 .../views/viewer/transcript/components/index.js    |  7 +++
 13 files changed, 239 insertions(+), 35 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
 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
 create mode 100644 animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js

(limited to 'animism-align/frontend/app/views/viewer')

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 2c17621..922bd01 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -222,3 +222,12 @@
     display: none;
   }
 }
+
+/* Zoom Plus */
+
+.zoomPlus {
+  width: 40px; height: 40px;
+}
+.zoomPlus path {
+  stroke: white;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 183c3e0..002e00e 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -82,3 +82,13 @@ export const PlayerTime = ({ play_ts, duration }) => (
     </span>
   </span>
 )
+
+// zoom button
+
+export const ZoomPlus = (
+  <svg className='zoomPlus' version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <path d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z
+      M20,5.5C12,5.5,5.5,12,5.5,20c0,8,6.5,14.5,14.5,14.5S34.5,28,34.5,20C34.5,12,28,5.5,20,5.5z M27.5,19.5h-7v-7h-1v7h-7v1h7v7h1v-7
+      h7V19.5z"/>
+  </svg>
+)
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
index 75aaed7..ad30333 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -20,11 +20,8 @@ class ViewerRouter extends Component {
       case 'checklist':
         actions.viewer.showComponent('checklist')
         break
-      case 'fullscreenImage':
-        break
-      case 'fullscreenVideo':
-        break
-      case 'fullscreenCarousel':
+      case 'seek':
+        actions.audio.seek(456)
         break
       case 'end':
         break
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
new file mode 100644
index 0000000..31a4176
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { MediaCitation, Vitrine } from '../components.utility'
+
+export const FullscreenVitrine = ({ element, media, transitionDuration }) => {
+  const { color } = element
+  const item = media.lookup[element.settings.media_id]
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+    transitionDuration,
+  }
+  console.log(item)
+  return (
+    <div
+      className='fullscreen-element vitrine'
+      style={style}
+    >
+      {element.settings.title && <div className='heading'>{element.settings.title}</div>}
+      <Vitrine media={item} />
+      <MediaCitation media={item} />
+    </div>
+  )
+}
+
+export const FullscreenGallery = ({ element, media, transitionDuration }) => {
+  const { color } = element
+  const item = media.lookup[element.settings.media_id]
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+    transitionDuration,
+  }
+  return (
+    <div
+      className='fullscreen-element gallery'
+      style={style}
+    >
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
index f533123..538632f 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
@@ -8,6 +8,10 @@ import {
   FullscreenVideo
 } from './fullscreen.video'
 
+import {
+  FullscreenVitrine
+} from './fullscreen.gallery'
+
 import {
   FullscreenCurtain
 } from './fullscreen.utility'
@@ -16,4 +20,6 @@ export const fullscreenComponents = {
   curtain: React.memo(FullscreenCurtain),
   video: React.memo(FullscreenVideo),
   image: React.memo(FullscreenImage),
+  // gallery: React.memo(FullscreenGallery),
+  vitrine: React.memo(FullscreenVitrine),
 }
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 0312a8f..0e2d205 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -1,31 +1,6 @@
 import React, { Component } from 'react'
 
-export const MediaCitation = ({ media }) => {
-  if (media.citation) {
-    return (
-      <div className='citation' dangerouslySetInnerHTML={{ _html: media.citation }} />
-    )
-  }
-  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>
-  )
-}
+import { MediaCitation } from '../components.utility'
 
 export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 2b3449c..fc24f9e 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
 import VimeoPlayer from '@u-wave/react-vimeo'
-import {
-  CURTAIN_COLOR_LOOKUP,
-} from 'app/constants'
-import { MediaCitation } from './inline.image'
+
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
+import { MediaCitation } from '../components.utility'
 
 export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
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>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 8d38fa0..29f68c2 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -53,3 +53,68 @@
   background-repeat: no-repeat;
   background-position: center center;
 }
+
+/* vitrine */
+
+.viewer-fullscreen .fullscreen-element.vitrine {
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.vitrine .heading {
+  font-family: "Freight Text", serif;
+  font-size: 3rem;
+  line-height: 1.28;
+  width: 80%;
+  margin: 0 auto;
+  padding-bottom: 2rem;
+  text-align: center;
+}
+.vitrine .citation {
+  width: 45rem;
+  margin: 0 auto;
+  padding: 1rem 0;
+  font-family: "Neue Haas Unica";
+  color: #888;
+}
+
+.viewer-fullscreen .fullscreen-element.vitrine .heading {
+  margin-top: 4rem;
+}
+.viewer-fullscreen .fullscreen-element.vitrine .citation {
+  margin-bottom: 3rem;
+}
+
+.vitrine-items {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+.vitrine-items .vitrine-item {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(45vh - 7rem);
+}
+.vitrine-items .vitrine-item .vitrine-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 80%;
+  cursor: pointer;
+}
+.vitrine-items .vitrine-item .vitrine-image img {
+  max-width: 100%;
+  max-height: 100%;
+  pointer-events: none;
+}
+.vitrine-items .vitrine-item .zoomPlus {
+  cursor: pointer;  
+}
+.vitrine-items .vitrine-item:hover .zoomPlus path {
+  stroke: #000;
+}
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
new file mode 100644
index 0000000..0eb8b19
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+
+import { MediaCitation } from './elementTypes.image'
+
+export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  if (!media.lookup) return <div />
+  const className = currentParagraph ? 'media current' : 'media'
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
+  return (
+    <div
+      className={className}
+      onClick={e => onAnnotationClick(e, paragraph, annotation)}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      {"["}
+      <MediaCitation media={item} />
+      {"]"}
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/index.js b/animism-align/frontend/app/views/viewer/transcript/components/index.js
index a2433ae..5cf7196 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/index.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/index.js
@@ -12,6 +12,10 @@ import {
   MediaImage
 } from './elementTypes.image'
 
+import {
+  MediaGallery
+} from './elementTypes.gallery'
+
 export const transcriptElementLookup = {
   paragraph: React.memo(Paragraph),
   intro_paragraph: React.memo(Paragraph),
@@ -22,4 +26,7 @@ export const transcriptElementLookup = {
   header: React.memo(ParagraphHeading),
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
+  gallery: React.memo(MediaGallery),
+  grid: React.memo(MediaGallery),
+  vitrine: React.memo(MediaGallery),
 }
-- 
cgit v1.2.3-70-g09d2