From a0cfa87f52a9ba82a3f35878bbe7ab8221804e60 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 13 Aug 2020 19:17:20 +0200
Subject: gallery

---
 .../frontend/app/views/viewer/nav/viewer.router.js |  8 ++-
 .../player/components.inline/inline.gallery.js     |  8 ++-
 .../viewer/player/components.utility/index.js      |  5 ++
 .../viewer/player/components.utility/media.css     | 83 ++++++++++++++++++++++
 .../player/components.utility/media.gallery.js     | 36 ++++++++++
 .../viewer/player/components.utility/vitrine.css   | 66 -----------------
 .../app/views/viewer/player/player.fullscreen.js   |  2 +-
 .../frontend/app/views/viewer/viewer.container.js  |  2 +-
 8 files changed, 138 insertions(+), 72 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.css
 create 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/vitrine.css

(limited to 'animism-align/frontend')

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/media.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
new file mode 100644
index 0000000..624e493
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -0,0 +1,83 @@
+/* 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 {
+  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
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/components.utility/vitrine.css b/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
deleted file mode 100644
index 7acf601..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/vitrine.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/* 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;
-}
\ No newline at end of file
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'
-- 
cgit v1.2.3-70-g09d2