gallery vs carousel

12 files changed, 141 insertions, 38 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 16548ee..cd2b3fd 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -50,6 +50,7 @@ export const MEDIA_ANNOTATION_TYPES = new Set([
 
 export const MEDIA_LABEL_TYPES = {
   image: 'Image Gallery',
+  gallery: 'Image Gallery',
   carousel: 'Image Gallery',
   grid: 'Image Gallery',
   video: 'Video',
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 f8b3698..ab63c98 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
@@ -27,5 +27,6 @@ export const annotationFormLookup = {
   curtain: AnnotationFormCurtain,
   gallery: AnnotationFormGallery,
   grid: AnnotationFormGallery,
+  carousel: AnnotationFormGallery,
   vitrine: AnnotationFormGallery,
 }
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 512ce6d..f69e81f 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
@@ -34,6 +34,7 @@ export const AnnotationElementLookup = {
   gallery: React.memo(AnnotationGallery),
   grid: React.memo(AnnotationGallery),
   vitrine: React.memo(AnnotationGallery),
+  carousel: React.memo(AnnotationGallery),
   intro: React.memo(AnnotationIntro),
   curtain: React.memo(AnnotationCurtain),
 }
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 eb43e23..277a237 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 } from '../components.utility'
+import { MediaCitation, Vitrine, Gallery, Carousel } from '../components.utility'
 
 export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
@@ -18,9 +18,9 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot
     >
       {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>}
       <Vitrine media={item} />
-      <MediaCitation media={item} />
     </div>
   )
+  // <MediaCitation media={item} />
 }
 
 export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
@@ -43,3 +43,24 @@ export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnot
     </div>
   )
 }
+
+export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+  }
+
+  return (
+    <div
+      className='inline-element media carousel'
+    >
+      <div style={style} className='carousel-container'>
+        <Carousel media={item} />
+      </div>
+      <MediaCitation media={item} />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
index 943b02a..084fbf4 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
@@ -4,7 +4,7 @@ export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, o
   let className = 'site-intro'
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
-  console.log(item)
+  // console.log(item)
   const style = {
     backgroundImage: 'url(' + item.settings.file.url + ')',
   }
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 fc24f9e..e34bfa6 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
@@ -16,7 +16,7 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
     color: color.textColor,
   }
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
-  console.log(annotation.settings)
+  // console.log(annotation.settings)
   return (
     <div
       className={className}
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
index c3ef614..c4ac419 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
@@ -12,8 +12,13 @@ import {
   Gallery
 } from './media.gallery'
 
+import {
+  Carousel
+} from './media.carousel'
+
 export {
   MediaCitation,
   Vitrine,
   Gallery,
+  Carousel,
 }
\ 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
new file mode 100644
index 0000000..cfd1e48
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/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.utility/media.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
index 624e493..6ad5d0a 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -1,13 +1,9 @@
-/* gallery */
+/* carousel */
 
-.gallery {
-}
-.keen-slider {
-}
-.gallery-container {
+.carousel-container {
   padding: 1rem;
 }
-.gallery-item {
+.carousel-item {
   height: calc(100vh - 9rem);
   width: 50vw;
   background-size: contain;
@@ -15,6 +11,47 @@
   background-repeat: no-repeat;
 }
 
+/* gallery */
+
+.gallery-container {
+  overflow-x: scroll;
+  width: 100%;
+  padding: 1rem;
+}
+.gallery-scroll {
+  display: flex;
+  flex-direction: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.gallery-item {
+  height: 25rem;
+  max-height: 90vh;
+  padding-right: 1rem;
+}
+.gallery-item img {
+  height: 100%;
+}
+
+.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;
+}
+
+
 /* vitrine */
 
 .vitrine .heading {
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
index d92f360..0d08c11 100644
--- 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
@@ -1,36 +1,29 @@
 import React, { Component } from 'react'
-import { useKeenSlider } from "keen-slider/react"
-import "keen-slider/keen-slider.min.css"
 
 export const Gallery = ({ 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(display_lookup)
   // console.log(width)
   return (
-    <div ref={sliderRef} className='keen-slider gallery-items'>
-      {image_order.map(id => {
-        const image = display_lookup[id]
-        console.log(image)
-        return (
-          <GalleryItem key={id} image={image} />
-        )
-      })}
+    <div className='gallery-items'>
+      <div className='gallery-scroll'>
+        {image_order.map(id => {
+          const image = display_lookup[id]
+          // console.log(image)
+          return (
+            <GalleryItem key={id} image={image} />
+          )
+        })}
+      </div>
     </div>
   )
 }
 
 const GalleryItem = ({ image }) => {
   return (
-    <div className='keen-slider__slide gallery-item' style={{
-      backgroundImage: 'url(' + image.url + ')',
-    }} />
+    <div className='gallery-item'>
+      <img src={image.url} />
+    </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index 0ca84a2..621df22 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -16,7 +16,7 @@
   transform: translateZ(0) translateY(0);
 }
 .checklist-open .viewer-sections {
-  transform: translateZ(0) translateY(calc(3rem - 100vh - 4px));
+  transform: translateZ(0) translateY(calc(3rem - 100vh));
   z-index: 20;
 }
 
@@ -27,6 +27,7 @@
   white-space: nowrap;
   overflow-y: auto;
 }
+/*
 .viewer-sections-scroll::-webkit-scrollbar {
   cursor: pointer;
   user-select: none;
@@ -44,6 +45,7 @@
   display: block;
   background: #000;
 }
+*/
 
 /* clickable section indicators */
 
@@ -55,6 +57,9 @@
   font-size: 16px;
   cursor: pointer;
 }
+.viewer-sections .viewer-section:last-child {
+  margin-right: 1rem;
+}
 .viewer-section > div {
   height: 20rem;
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index ae2bf5b..6efe644 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -34,6 +34,7 @@ export const loadSections = () => dispatch => {
 
   // dedupe the labels that we see in each section
   let currentMediaLabels = {}
+  let seenMedia = {}
 
   // keep track of all annotations that constitute the "text" of the essay
   // these include sentences, headings, and inline media. used to build paragraphs, then reset.
@@ -58,7 +59,7 @@ export const loadSections = () => dispatch => {
     if (annotation.type === 'section_heading') {
       // finish off the previous section.
       if (currentSection) {
-        currentSection.mediaLabels = Object.keys(currentMediaLabels).join(', ')
+        currentSection.mediaLabels = Object.keys(currentMediaLabels).sort().join(', ')
         currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index)
         currentSection.end_ts = currentSection.paragraphs[currentSection.paragraphs.length - 1].end_ts
       }
@@ -80,16 +81,18 @@ export const loadSections = () => dispatch => {
     if (MEDIA_ANNOTATION_TYPES.has(annotation.type)) {
       // fetch the media and add it to the list of media (TODO: handle carousels)
       const media = mediaLookup[annotation.settings.media_id]
-      if (!media.settings.hide_in_bibliography) {
+      if (!media.settings.hide_in_bibliography && !(media.id in seenMedia)) {
         currentSection.media.push({
           start_ts: annotation.start_ts,
           media
         })
+        seenMedia[media.id] = true
       }
 
       // get the display string for this media type
-      if (media.type in MEDIA_LABEL_TYPES) {
-        currentMediaLabels[MEDIA_LABEL_TYPES[media.type]] = true
+      // console.log(annotation.type, media.type)
+      if (annotation.type in MEDIA_LABEL_TYPES) {
+        currentMediaLabels[MEDIA_LABEL_TYPES[annotation.type]] = true
       }
 
       // increment the media tally
@@ -120,7 +123,7 @@ export const loadSections = () => dispatch => {
 
   // finished processing all annotations. finish off the last section.
   if (currentSection) {
-    currentSection.mediaLabels = Object.keys(currentMediaLabels).join(', ')
+    currentSection.mediaLabels = Object.keys(currentMediaLabels).sort().join(', ')
     currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index)
     currentSection.end_ts = timeline.duration
   }