adding vitrine

2 files changed, 29 insertions, 0 deletions

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),
 }