gallery

9 files changed, 79 insertions, 7 deletions

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 ad30333..837bd5e 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
+import { timestampToSeconds } from 'app/utils'
 import actions from 'app/actions'
 
 class ViewerRouter extends Component {
@@ -20,8 +21,11 @@ class ViewerRouter extends Component {
       case 'checklist':
         actions.viewer.showComponent('checklist')
         break
-      case 'seek':
-        actions.audio.seek(456)
+      case 'vitrine':
+        actions.audio.seek(timestampToSeconds('7:36'))
+        break
+      case 'gallery':
+        actions.audio.seek(timestampToSeconds('27:36'))
         break
       case 'end':
         break
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 70ad8ac..eb43e23 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 } from '../components.utility'
+import { MediaCitation, Vitrine, Gallery } from '../components.utility'
 
 export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
@@ -31,11 +31,15 @@ export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnot
     backgroundColor: color.backgroundColor,
     color: color.textColor,
   }
+
   return (
     <div
       className='inline-element media gallery'
-      style={style}
     >
+      <div style={style} className='gallery-container'>
+        <Gallery media={item} />
+      </div>
+      <MediaCitation media={item} />
     </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
index be38cac..c3ef614 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
@@ -8,7 +8,12 @@ import {
   Vitrine
 } from './media.vitrine'
 
+import {
+  Gallery
+} from './media.gallery'
+
 export {
   MediaCitation,
   Vitrine,
+  Gallery,
 }
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
index 7acf601..624e493 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -1,3 +1,20 @@
+/* gallery */
+
+.gallery {
+}
+.keen-slider {
+}
+.gallery-container {
+  padding: 1rem;
+}
+.gallery-item {
+  height: calc(100vh - 9rem);
+  width: 50vw;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
 /* vitrine */
 
 .vitrine .heading {
@@ -63,4 +80,4 @@
 }
 .inline-element.vitrine .heading {
   padding-top: 8rem;
-}
\ No newline at end of file
+}
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
new file mode 100644
index 0000000..d92f360
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.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 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(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>
+  )
+}
+
+const GalleryItem = ({ image }) => {
+  return (
+    <div className='keen-slider__slide gallery-item' style={{
+      backgroundImage: 'url(' + image.url + ')',
+    }} />
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index 133653d..2f62ff5 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -27,7 +27,7 @@ class PlayerFullscreen extends Component {
     const elements = timeline.filter(element => (
       floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
     ))
-    console.log(elements)
+    // console.log(elements)
     if (elements.length) {
       const lastElement = elements[elements.length - 1]
       if (lastElement.color && lastElement.color.textColor === '#ffffff') {
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index c7fb7ea..d59259f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -13,7 +13,7 @@ import './checklist/checklist.css'
 import './player/player.container.css'
 import './player/player.fullscreen.css'
 import './player/player.transcript.css'
-import './player/components.utility/vitrine.css'
+import './player/components.utility/media.css'
 
 import actions from 'app/actions'
 import { Loader } from 'app/common'
diff --git a/animism-align/package-lock.json b/animism-align/package-lock.json
index 3df35f4..823a094 100644
--- a/animism-align/package-lock.json
+++ b/animism-align/package-lock.json
@@ -7820,6 +7820,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keen-slider": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-5.2.2.tgz",
+      "integrity": "sha512-u/DsU/pfzYBQ12K+SB8jGEsZz6lRlZw5/QykDhi91gctL0oPmgVFxqgSgX6slfmcYxcyNAVNyqR7z6xmt3JU6A=="
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
diff --git a/animism-align/package.json b/animism-align/package.json
index efbbe06..e44a6cc 100644
--- a/animism-align/package.json
+++ b/animism-align/package.json
@@ -43,6 +43,7 @@
     "fetch-jsonp": "^1.1.3",
     "file-saver": "^2.0.2",
     "history": "^4.10.1",
+    "keen-slider": "^5.2.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "node-fetch": "^2.6.0",