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

---
 animism-align/frontend/app/common/app.css          |  6 +-
 animism-align/frontend/app/constants.js            |  3 +-
 .../frontend/app/utils/annotation.utils.js         |  2 +-
 .../components/annotations/annotation.form.js      |  3 +-
 .../annotationForms/annotationForm.gallery.js      | 69 ++++++++++++++++++++++
 .../annotationForms/annotationForm.image.js        | 13 ++++
 .../annotationForms/annotationForm.utility.js      | 27 ++++++---
 .../annotationForms/annotationForm.video.js        | 10 ++++
 .../annotations/annotationForms/index.js           |  7 +++
 .../annotationTypes/annotationTypes.gallery.js     | 50 ++++++++++++++++
 .../annotations/annotationTypes/index.js           |  7 +++
 .../views/paragraph/components/paragraph.list.js   |  4 +-
 .../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 +++
 25 files changed, 423 insertions(+), 52 deletions(-)
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
 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')

diff --git a/animism-align/frontend/app/common/app.css b/animism-align/frontend/app/common/app.css
index e9efdc3..cca40fd 100644
--- a/animism-align/frontend/app/common/app.css
+++ b/animism-align/frontend/app/common/app.css
@@ -80,7 +80,7 @@ li {
 /* headings */
 
 h1 {
-  color: #eee;
+  /*color: #eee;*/
   margin-bottom: 1.25rem;
   font-size: 1.5rem;
   font-weight: normal;
@@ -90,12 +90,12 @@ div:first-child > h1:first-child,
   margin-top: 0;
 }
 h2 {
-  color: #eee;
+  /*color: #eee;*/
   font-size: 1.25rem;
   font-weight: normal;
 }
 h3 {
-  color: #eee;
+  /*color: #eee;*/
   margin-top: 0;
   margin-bottom: 1.25rem;
   font-size: 1.0rem;
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 1acdf5b..69f2b44 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -43,7 +43,7 @@ export const TEXT_ANNOTATION_TYPES = new Set([
 ])
 
 export const MEDIA_ANNOTATION_TYPES = new Set([
-  'image', 'carousel', 'grid',
+  'image', 'carousel', 'grid', 'gallery',
   'video',
   'vitrine',
 ])
@@ -66,6 +66,7 @@ export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([
 
 export const CURTAIN_COLORS = [
   { label: 'white', backgroundColor: '#ffffff', textColor: '#000000' },
+  { label: 'light gray', backgroundColor: '#eeeeee', textColor: '#000000' },
   { label: 'dark blue', backgroundColor: '#1a1f33', textColor: '#ffffff' },
   { label: 'dark gray', backgroundColor: '#222222', textColor: '#ffffff' },
   { label: 'black', backgroundColor: '#000000', textColor: '#ffffff' },
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 6dab36d..1af08a2 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -17,7 +17,7 @@ export const annotationFadeTimings = annotation => {
 }
 
 export const thumbnailURL = media => {
-  console.log(media)
+  // console.log(media)
   switch (media.type) {
     case 'video': return media.settings.video.thumbnail_url
     case 'image': return media.settings.thumbnail.url
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index 80a960f..caf64be 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -15,7 +15,8 @@ import { annotationFormLookup } from './annotationForms'
 const ANNOTATION_TYPES = [
   'sentence', 'section_heading', 'heading_text', 'paragraph_end',
   'video',
-  'image', 'image_carousel',
+  'image',
+  'gallery', 'grid', 'vitrine',
   'curtain', 'intro',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
new file mode 100644
index 0000000..e85c6f3
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
+import { TextInput, Select, Checkbox } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
+
+export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  if (!media.lookup) return <div />
+  const { lookup, order } = media
+  const image_list_items = order.filter(id => lookup[id].type === 'gallery').map(id => {
+    const image = lookup[id]
+    return {
+      name: image.id,
+      label: image.author + ' - ' + image.title
+    }
+  })
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Title"
+        name="title"
+        placeholder="Enter title or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Inline"
+        name="inline"
+        checked={annotation.settings.inline}
+        onChange={handleSettingsSelect}
+      />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <AnnotationFormFullscreen
+          annotation={annotation}
+          handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 9ca5295..285dbcc 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { Select, Checkbox } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
 
@@ -23,18 +24,30 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         defaultOption='Choose an image'
         onChange={handleSettingsSelect}
       />
+      
       <Checkbox
         label="Fullscreen"
         name="fullscreen"
         checked={annotation.settings.fullscreen}
         onChange={handleSettingsSelect}
       />
+
       <Checkbox
         label="Inline"
         name="inline"
         checked={annotation.settings.inline}
         onChange={handleSettingsSelect}
       />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
         <AnnotationFormFullscreen
           annotation={annotation}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index 750c3a7..4220eff 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -44,6 +44,15 @@ export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, h
         autoComplete="off"
       />
 
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       <AnnotationFormFullscreen
         annotation={annotation}
         handleSettingsChange={handleSettingsChange}
@@ -65,6 +74,15 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         autoComplete="off"
       />
 
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       <AnnotationFormFullscreen
         alwaysAccessible
         annotation={annotation}
@@ -82,15 +100,6 @@ export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, han
   } = annotationFadeTimings(annotation)
   return (
     <div>
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
       <TextInput
         title="Total duration"
         name="duration"
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 6f58d60..9d15b44 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { Select, Checkbox } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
 
@@ -41,6 +42,15 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         checked={annotation.settings.inline}
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
         <AnnotationFormFullscreen
           annotation={annotation}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index dd601bc..f8b3698 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -10,6 +10,10 @@ import {
   AnnotationFormImage,
 } from './annotationForm.image'
 
+import {
+  AnnotationFormGallery,
+} from './annotationForm.gallery'
+
 import {
   AnnotationFormCurtain,
   AnnotationFormIntro,
@@ -21,4 +25,7 @@ export const annotationFormLookup = {
   video: AnnotationFormVideo,
   intro: AnnotationFormIntro,
   curtain: AnnotationFormCurtain,
+  gallery: AnnotationFormGallery,
+  grid: AnnotationFormGallery,
+  vitrine: AnnotationFormGallery,
 }
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
new file mode 100644
index 0000000..e25f78e
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+
+import { durationToHeight } from 'app/utils/align.utils'
+import { capitalize } from 'app/utils'
+import { annotationFadeTimings, thumbnailURL } from 'app/utils/annotation.utils'
+
+import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
+
+export const AnnotationGallery = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
+  const { text } = annotation
+  const className = selected ? 'annotation media gallery selected' : 'annotation media gallery'
+  if (checkAnnotationMediaNotReady(annotation, media)) {
+    return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
+  }
+  const mediaItem = media[annotation.settings.media_id]
+
+  const {
+    fadeInDuration, fadeOutDuration, duration,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  } = annotationFadeTimings(annotation)
+  const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto'
+  const fadeInHeight = durationToHeight(fadeInDuration, timeline)
+  const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
+
+  const style = {
+    top: y,
+  }
+  if (annotation.settings.fullscreen && !annotation.settings.inline) {
+    style.height = durationHeight
+  }
+
+  return (
+    <div
+      className={className}
+      style={style}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      <div className='meta center'>
+        <div>
+          {capitalize(annotation.type)}<br/>
+          <i>{mediaItem.title}</i><br />
+          {mediaItem.author}<br />
+          {mediaItem.date}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index 5b13496..512ce6d 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -15,6 +15,10 @@ import {
   AnnotationImage,
 } from './annotationTypes.image'
 
+import {
+  AnnotationGallery,
+} from './annotationTypes.gallery'
+
 import {
   AnnotationCurtain,
   AnnotationIntro,
@@ -27,6 +31,9 @@ export const AnnotationElementLookup = {
   paragraph_end: React.memo(AnnotationParagraphEnd),
   video: React.memo(AnnotationVideo),
   image: React.memo(AnnotationImage),
+  gallery: React.memo(AnnotationGallery),
+  grid: React.memo(AnnotationGallery),
+  vitrine: React.memo(AnnotationGallery),
   intro: React.memo(AnnotationIntro),
   curtain: React.memo(AnnotationCurtain),
 }
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 473a0e9..2cc54a0 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -3,7 +3,7 @@ import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import { floatLT, floatInRange } from 'app/utils'
+import { floatLT, floatInRange, capitalize } from 'app/utils'
 import ParagraphForm from '../components/paragraph.form'
 
 class ParagraphList extends Component {
@@ -77,7 +77,7 @@ class ParagraphList extends Component {
           />
         )
       } else {
-        return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div>
+        return <div key={paragraph.id}>{'(' + capitalize(paragraph.type) + ')'}</div>
       }
     })
   }
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