From 27d593acaf023ba15b3c81cbe72e90f754523078 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 19 Aug 2020 17:22:33 +0200
Subject: vitrine modal

---
 animism-align/frontend/app/types.js                |   1 +
 .../frontend/app/views/viewer/modals/modals.css    |  66 +++++++++
 .../app/views/viewer/modals/modals.vitrine.js      |  63 +++++++++
 .../components.fullscreen/fullscreen.gallery.js    |   2 +-
 .../player/components.inline/inline.gallery.js     |   2 +-
 .../player/components.inline/inline.image.js       |   2 +-
 .../player/components.inline/inline.video.js       |   2 +-
 .../views/viewer/player/components.media/index.js  |  29 ++++
 .../player/components.media/media.carousel.js      |  36 +++++
 .../player/components.media/media.citation.js      |  33 +++++
 .../views/viewer/player/components.media/media.css | 157 +++++++++++++++++++++
 .../player/components.media/media.gallery.js       |  47 ++++++
 .../viewer/player/components.media/media.grid.js   |  42 ++++++
 .../player/components.media/media.vitrine.js       |  38 +++++
 .../viewer/player/components.utility/index.js      |  29 ----
 .../player/components.utility/media.carousel.js    |  36 -----
 .../player/components.utility/media.citation.js    |  33 -----
 .../viewer/player/components.utility/media.css     | 157 ---------------------
 .../player/components.utility/media.gallery.js     |  47 ------
 .../viewer/player/components.utility/media.grid.js |  42 ------
 .../player/components.utility/media.vitrine.js     |  30 ----
 .../app/views/viewer/player/player.transcript.css  |   2 +-
 .../frontend/app/views/viewer/viewer.actions.js    |   9 ++
 .../frontend/app/views/viewer/viewer.container.js  |   3 +
 .../frontend/app/views/viewer/viewer.reducer.js    |  23 +++
 25 files changed, 552 insertions(+), 379 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/modals/modals.css
 create mode 100644 animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.media/index.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.media/media.citation.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.media/media.css
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.media/media.grid.js
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
 delete mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/index.js
 delete mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
 delete mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
 delete mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.css
 delete mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
 delete mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
 delete mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js

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

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 6822d20..ae27685 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -27,6 +27,7 @@ export const audio = with_type('audio', [
 export const viewer = with_type('viewer', [
   'load_sections', 'toggle_component',
   'set_current_section', 'set_nav_style',
+  'open_vitrine_modal', 'close_vitrine_modal',
 ])
 
 export const site = with_type('site', [
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css
new file mode 100644
index 0000000..370e588
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -0,0 +1,66 @@
+/* vitrine modal */
+
+.vitrine-modal {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 20;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  background: white;
+}
+.vitrine-modal.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.vitrine-modal .vitrine-modal-content {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+}
+.vitrine-modal .vitrine-modal-content > div {
+  width: 50%;
+  height: 100%;
+}
+.vitrine-modal .vitrine-image {
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.vitrine-modal .vitrine-text {
+  background: white;
+  color: black;
+  font-family: "Freight Text", serif;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.vitrine-modal .vitrine-text > div {
+  max-width: 45vw;
+  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
+}
+.vitrine-modal .vitrine-text-content {
+  white-space: pre-wrap;
+}
+.vitrine-modal .vitrine-caption {
+  margin-bottom: 1.5rem;
+}
+.vitrine-modal .vitrine-close {
+  position: absolute;
+  top: 23px;
+  right: 32px;
+}
+.vitrine-modal .vitrine-close svg {
+  cursor: pointer;
+  width: 26px;
+  height: 20px;
+}
+.vitrine-modal .vitrine-close svg line {
+  stroke: #000;
+}
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
new file mode 100644
index 0000000..88b785c
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { EfluxClose } from '../nav/eflux.icons'
+
+class VitrineModal extends Component {
+  render() {
+    const { open, media, index } = this.props.vitrineModal
+    if (!media) {
+      return (
+        <div className='vitrine-modal'></div>
+      )
+    }
+    const className = open ? 'vitrine-modal open' : 'vitrine-modal'
+    const id = media.settings.image_order[index]
+    const image = (media.settings.display_lookup || media.settings.image_lookup)[id]
+    const caption = media.settings.caption_lookup[id]
+    return (
+      <div className={className}>
+        <div className='vitrine-modal-content'>
+          <div className='vitrine-image' style={{
+            backgroundImage: 'url(' + image.url + ')',
+          }} />
+          <div className='vitrine-text'>
+            <div>
+              {caption.title && <VitrineCaption caption={caption} />}
+              <div className='vitrine-text-content'>
+                {caption.long_caption || caption.caption}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
+          {EfluxClose}
+        </div>
+      </div>
+    )
+  }
+}
+
+const VitrineCaption = ({ caption }) => {
+  return (
+    <div className='vitrine-caption'>
+      {caption.author && (
+        <span>{caption.author}</span>
+      )}
+      {caption.title && (
+        <span><br /><i>{caption.title}</i></span>
+      )}
+      {caption.date && (
+        <span><br />{caption.date}</span>
+      )}
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+  vitrineModal: state.viewer.vitrineModal,
+})
+
+export default connect(mapStateToProps)(VitrineModal)
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
index 58bcfaa..0549f09 100644
--- 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
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { MediaCitation, Vitrine } from '../components.utility'
+import { MediaCitation, Vitrine } from '../components.media'
 
 export const FullscreenVitrine = ({ element, media, transitionDuration }) => {
   const { color } = element
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 0086372..d2a460c 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.utility'
+import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.media'
 
 export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
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 0e2d205..176d661 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,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { MediaCitation } from '../components.utility'
+import { MediaCitation } from '../components.media'
 
 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 e34bfa6..179c50d 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
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import VimeoPlayer from '@u-wave/react-vimeo'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { MediaCitation } from '../components.utility'
+import { MediaCitation } from '../components.media'
 
 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.media/index.js b/animism-align/frontend/app/views/viewer/player/components.media/index.js
new file mode 100644
index 0000000..4fcf649
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/index.js
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import {
+  MediaCitation
+} from './media.citation'
+
+import {
+  Vitrine
+} from './media.vitrine'
+
+import {
+  Gallery
+} from './media.gallery'
+
+import {
+  Carousel
+} from './media.carousel'
+
+import {
+  Grid
+} from './media.grid'
+
+export {
+  MediaCitation,
+  Vitrine,
+  Gallery,
+  Carousel,
+  Grid,
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
new file mode 100644
index 0000000..cfd1e48
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { useKeenSlider } from "keen-slider/react"
+import "keen-slider/keen-slider.min.css"
+
+export const Carousel = ({ media }) => {
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
+
+  const [sliderRef] = useKeenSlider({
+    slidesPerView: 2,
+    mode: "free-snap",
+    spacing: 15,
+    centered: true,
+    loop: false
+  });
+  // console.log(display_lookup)
+  // console.log(width)
+  return (
+    <div ref={sliderRef} className='keen-slider carousel-items'>
+      {image_order.map(id => {
+        const image = display_lookup[id]
+        console.log(image)
+        return (
+          <CarouselItem key={id} image={image} />
+        )
+      })}
+    </div>
+  )
+}
+
+const CarouselItem = ({ image }) => {
+  return (
+    <div className='keen-slider__slide carousel-item' style={{
+      backgroundImage: 'url(' + image.url + ')',
+    }} />
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js b/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js
new file mode 100644
index 0000000..14c8c53
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js
@@ -0,0 +1,33 @@
+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 && (
+        media.pre_title + ' '
+      )}
+      <i>{media.title}</i>
+      {media.post_title && (
+        ' ' + 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.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
new file mode 100644
index 0000000..62eb9af
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -0,0 +1,157 @@
+/* carousel */
+
+.carousel-container {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+}
+.carousel-item {
+  height: calc(100vh - 9rem);
+  width: 50vw;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+/* gallery */
+
+.gallery-container {
+  overflow-x: scroll;
+  width: 100%;
+  padding: 1rem 1rem 0.5rem 1rem;
+  margin-bottom: 1.5rem;
+}
+.gallery-scroll {
+  display: flex;
+  flex-direction: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.gallery-item {
+  padding-right: 1rem;
+}
+.gallery-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 25rem;
+}
+.gallery-image img {
+  display: block;
+  max-height: 25rem;
+}
+.gallery-caption {
+  margin-top: 0.5rem;
+  color: #888;
+}
+
+.gallery-container::-webkit-scrollbar {
+  cursor: pointer;
+  user-select: none;
+  height: 4px
+}
+.gallery-container::-webkit-scrollbar-button {
+  display: block;
+  width: 0;
+  height: 0;
+}
+.gallery-container::-webkit-scrollbar-track-piece {
+  background:rgba(211,211,211,0.8);
+}
+.gallery-container::-webkit-scrollbar-thumb {
+  display: block;
+  background: #000;
+}
+
+/* grid */
+
+.grid-container {
+  margin: 0 auto 1.5rem auto;
+  width: 45rem;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.grid-item {
+  width: 22rem;
+  margin-bottom: 0.5rem;
+}
+.grid-item:nth-child(odd) {
+  margin-right: 1rem;
+}
+.grid-item img {
+  display: block;
+  width: 22rem;
+}
+.grid-caption {
+  margin-top: 0.5rem;
+  color: #888;
+}
+
+/* vitrine */
+
+.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;
+}
+.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 - 6rem);
+}
+.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 .cross {
+  stroke: #000;
+  stroke-width: 0.5;
+}
+.vitrine-items .vitrine-item:hover .zoomPlus .ring {
+  fill: #fff;
+}
+.vitrine-items .vitrine-item .zoomPlus .ring-inner {
+  stroke: transparent;
+  fill: transparent;
+}
+.vitrine-items .vitrine-item:hover .zoomPlus .ring-inner {
+  fill: #fff;
+  stroke: #fff;
+}
+.inline-element.vitrine .heading {
+  padding-top: 8rem;
+}
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>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.grid.js b/animism-align/frontend/app/views/viewer/player/components.media/media.grid.js
new file mode 100644
index 0000000..93b8696
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/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>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
new file mode 100644
index 0000000..2033465
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+
+import { ZoomPlus } from '../../nav/viewer.icons.js'
+
+import actions from 'app/actions'
+
+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}
+            media={media}
+            id={id}
+            image={thumbnail}
+            width={width}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+const VitrineItem = ({ media, id, image, width }) => {
+  return (
+    <div className='vitrine-item' style={{ width }} onClick={() => actions.viewer.openVitrineModal(media, id)}>
+      <div className='vitrine-image'>
+        <img src={image.url} />
+      </div>
+      {ZoomPlus}
+    </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
deleted file mode 100644
index 4fcf649..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import {
-  MediaCitation
-} from './media.citation'
-
-import {
-  Vitrine
-} from './media.vitrine'
-
-import {
-  Gallery
-} from './media.gallery'
-
-import {
-  Carousel
-} from './media.carousel'
-
-import {
-  Grid
-} from './media.grid'
-
-export {
-  MediaCitation,
-  Vitrine,
-  Gallery,
-  Carousel,
-  Grid,
-}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
deleted file mode 100644
index cfd1e48..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import { useKeenSlider } from "keen-slider/react"
-import "keen-slider/keen-slider.min.css"
-
-export const Carousel = ({ media }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
-
-  const [sliderRef] = useKeenSlider({
-    slidesPerView: 2,
-    mode: "free-snap",
-    spacing: 15,
-    centered: true,
-    loop: false
-  });
-  // console.log(display_lookup)
-  // console.log(width)
-  return (
-    <div ref={sliderRef} className='keen-slider carousel-items'>
-      {image_order.map(id => {
-        const image = display_lookup[id]
-        console.log(image)
-        return (
-          <CarouselItem key={id} image={image} />
-        )
-      })}
-    </div>
-  )
-}
-
-const CarouselItem = ({ image }) => {
-  return (
-    <div className='keen-slider__slide carousel-item' style={{
-      backgroundImage: 'url(' + image.url + ')',
-    }} />
-  )
-}
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
deleted file mode 100644
index 14c8c53..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
+++ /dev/null
@@ -1,33 +0,0 @@
-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 && (
-        media.pre_title + ' '
-      )}
-      <i>{media.title}</i>
-      {media.post_title && (
-        ' ' + 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.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
deleted file mode 100644
index 62eb9af..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ /dev/null
@@ -1,157 +0,0 @@
-/* carousel */
-
-.carousel-container {
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-}
-.carousel-item {
-  height: calc(100vh - 9rem);
-  width: 50vw;
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat;
-}
-
-/* gallery */
-
-.gallery-container {
-  overflow-x: scroll;
-  width: 100%;
-  padding: 1rem 1rem 0.5rem 1rem;
-  margin-bottom: 1.5rem;
-}
-.gallery-scroll {
-  display: flex;
-  flex-direction: row nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.gallery-item {
-  padding-right: 1rem;
-}
-.gallery-image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 25rem;
-}
-.gallery-image img {
-  display: block;
-  max-height: 25rem;
-}
-.gallery-caption {
-  margin-top: 0.5rem;
-  color: #888;
-}
-
-.gallery-container::-webkit-scrollbar {
-  cursor: pointer;
-  user-select: none;
-  height: 4px
-}
-.gallery-container::-webkit-scrollbar-button {
-  display: block;
-  width: 0;
-  height: 0;
-}
-.gallery-container::-webkit-scrollbar-track-piece {
-  background:rgba(211,211,211,0.8);
-}
-.gallery-container::-webkit-scrollbar-thumb {
-  display: block;
-  background: #000;
-}
-
-/* grid */
-
-.grid-container {
-  margin: 0 auto 1.5rem auto;
-  width: 45rem;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.grid-item {
-  width: 22rem;
-  margin-bottom: 0.5rem;
-}
-.grid-item:nth-child(odd) {
-  margin-right: 1rem;
-}
-.grid-item img {
-  display: block;
-  width: 22rem;
-}
-.grid-caption {
-  margin-top: 0.5rem;
-  color: #888;
-}
-
-/* vitrine */
-
-.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;
-}
-.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 - 6rem);
-}
-.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 .cross {
-  stroke: #000;
-  stroke-width: 0.5;
-}
-.vitrine-items .vitrine-item:hover .zoomPlus .ring {
-  fill: #fff;
-}
-.vitrine-items .vitrine-item .zoomPlus .ring-inner {
-  stroke: transparent;
-  fill: transparent;
-}
-.vitrine-items .vitrine-item:hover .zoomPlus .ring-inner {
-  fill: #fff;
-  stroke: #fff;
-}
-.inline-element.vitrine .heading {
-  padding-top: 8rem;
-}
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
deleted file mode 100644
index da83c4f..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ /dev/null
@@ -1,47 +0,0 @@
-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>
-  )
-}
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
deleted file mode 100644
index 93b8696..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
+++ /dev/null
@@ -1,42 +0,0 @@
-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>
-  )
-}
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
deleted file mode 100644
index b2c7944..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
+++ /dev/null
@@ -1,30 +0,0 @@
-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.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 69abda2..d771424 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -168,7 +168,7 @@
   color: white;
   font-family: "Freight Text", serif;
   font-size: 12vh;
-  line-height: 1.3;
+  line-height: 1.25;
   text-align: center;
 }
 .site-intro .inner span {
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 6efe644..bc0a3a8 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -188,3 +188,12 @@ export const seekToMediaItem = mediaItem => dispatch => {
   actions.viewer.hideComponent('nav')
   actions.viewer.hideComponent('checklist')
 }
+
+export const openVitrineModal = (media, id) => dispatch => {
+  console.log(media)
+  const index = media.settings.image_order.indexOf(id)
+  dispatch({ type: types.viewer.open_vitrine_modal, media, index })
+}
+export const closeVitrineModal = (media, id) => dispatch => {
+  dispatch({ type: types.viewer.close_vitrine_modal })
+}
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index d59259f..b207f4a 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -10,6 +10,7 @@ import './nav/eflux.css'
 import './sections/sections.css'
 import './transcript/transcript.css'
 import './checklist/checklist.css'
+import './modals/modals.css'
 import './player/player.container.css'
 import './player/player.fullscreen.css'
 import './player/player.transcript.css'
@@ -25,6 +26,7 @@ import EfluxChrome from './nav/eflux.chrome'
 import Player from './player/player.container'
 import Transcript from './transcript/transcript.container'
 import Checklist from './checklist/checklist.container'
+import VitrineModal from './modals/modals.vitrine'
 
 class ViewerContainer extends Component {
   constructor(props) {
@@ -83,6 +85,7 @@ class ViewerContainer extends Component {
             <Checklist />
             <Route exact path='/viewer/:component/' component={ViewerRouter} />
           </div>
+          <VitrineModal />
         </div>
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 5ebe657..693c764 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -9,6 +9,11 @@ const initialState = {
   currentSection: null,
   nextSection: null,
   navStyle: 'white',
+  vitrineModal: {
+    open: false,
+    media: null,
+    index: null,
+  },
   options: {
   }
 }
@@ -42,6 +47,24 @@ export default function viewerReducer(state = initialState, action) {
         navStyle: action.color,
       }
 
+    case types.viewer.open_vitrine_modal:
+      return {
+        ...state,
+        vitrineModal: {
+          open: true,
+          media: action.media,
+          index: action.index,
+        }
+      }
+
+    case types.viewer.close_vitrine_modal:
+      return {
+        ...state,
+        vitrineModal: {
+          open: false,
+        }
+      }
+
     default:
       return state
   }
-- 
cgit v1.2.3-70-g09d2