From 24661f00461f0ea56c290770c698f8671e66bb37 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 13 Aug 2020 18:35:58 +0200
Subject: scrolling viewer sections

---
 .../components.fullscreen/fullscreen.video.js      |  2 +-
 .../player/components.utility/media.citation.js    |  8 +++-
 .../app/views/viewer/player/player.container.js    |  1 +
 .../app/views/viewer/player/player.fullscreen.js   |  1 +
 .../app/views/viewer/sections/sections.css         | 30 ++++++++++++++-
 .../app/views/viewer/sections/viewer.sections.js   | 44 +++++++++++-----------
 .../frontend/app/views/viewer/viewer.actions.js    | 12 +++---
 7 files changed, 67 insertions(+), 31 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer')

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index 6ca7ec8..a048fa1 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -9,7 +9,7 @@ export const FullscreenVideo = ({ element, media, transitionDuration }) => {
     color: color.textColor,
     transitionDuration,
   }
-  console.log(item, window.innerWidth, window.innerHeight)
+  console.log(item)
   return (
     <div
       className='fullscreen-element video'
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
index 7b3212d..14c8c53 100644
--- 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
@@ -10,9 +10,13 @@ export const MediaCitation = ({ media }) => {
     <div className='citation'>
       {media.author}
       {', '}
-      {media.pre_title}
+      {media.pre_title && (
+        media.pre_title + ' '
+      )}
       <i>{media.title}</i>
-      {media.post_title}
+      {media.post_title && (
+        ' ' + media.post_title
+      )}
       {'. '}
       {media.date && (
         ' ' + media.date + '.'
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 0ac5662..8a23720 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -36,6 +36,7 @@ class PlayerContainer extends Component {
       }
       return false
     })
+    
     if (!insideSection) {
       actions.viewer.setCurrentSection(sections[sections.length-1], null)
     }
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 a4acef9..133653d 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -27,6 +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)
     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/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index a94b712..0ca84a2 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -8,7 +8,6 @@
   background: black;
   color: white;
   display: block;
-  white-space: nowrap;
   transition: transform 0.2s;
   transform: translateZ(0) translateY(25rem);
   border-top: 1px solid #fff;
@@ -17,10 +16,37 @@
   transform: translateZ(0) translateY(0);
 }
 .checklist-open .viewer-sections {
-  transform: translateZ(0) translateY(calc(3rem - 100vh));
+  transform: translateZ(0) translateY(calc(3rem - 100vh - 4px));
   z-index: 20;
 }
 
+/* scrolling part */
+
+.viewer-sections .viewer-sections-scroll {
+  width: 100%;
+  white-space: nowrap;
+  overflow-y: auto;
+}
+.viewer-sections-scroll::-webkit-scrollbar {
+  cursor: pointer;
+  user-select: none;
+  height: 4px
+}
+.viewer-sections-scroll::-webkit-scrollbar-button {
+  display: block;
+  width: 0;
+  height: 0;
+}
+.viewer-sections-scroll::-webkit-scrollbar-track-piece {
+  background:rgba(211,211,211,0.8);
+}
+.viewer-sections-scroll::-webkit-scrollbar-thumb {
+  display: block;
+  background: #000;
+}
+
+/* clickable section indicators */
+
 .viewer-sections .viewer-section {
   display: inline-flex;
   white-space: normal;
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index f4abbd6..4bb61ec 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -12,29 +12,31 @@ class ViewerSections extends Component {
     const { sections } = this.props
     return (
       <div className="viewer-sections">
-        {sections.map(section => {
-          // console.log(section)
-          return (
-            <div
-              className="viewer-section"
-              key={section.index}
-              onClick={() => actions.viewer.seekToSection(section)}
-            >
-              <div>
-                <div className="section-thumbnail" style={{
-                  backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')',
-                }}/>
-                <div className="section-title">
-                  {ROMAN_NUMERALS[section.index]}<br />
-                  {section.title}
-                </div>
-                <div className="section-media">
-                  {section.mediaLabels}
+        <div className="viewer-sections-scroll">
+          {sections.map(section => {
+            // console.log(section)
+            return (
+              <div
+                className="viewer-section"
+                key={section.index}
+                onClick={() => actions.viewer.seekToSection(section)}
+              >
+                <div>
+                  <div className="section-thumbnail" style={{
+                    backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')',
+                  }}/>
+                  <div className="section-title">
+                    {ROMAN_NUMERALS[section.index]}<br />
+                    {section.title}
+                  </div>
+                  <div className="section-media">
+                    {section.mediaLabels}
+                  </div>
                 </div>
               </div>
-            </div>
-          )
-        })}
+            )
+          })}
+        </div>
         <ViewerSectionsNav />
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 1547606..ae2bf5b 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -80,10 +80,12 @@ 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]
-      currentSection.media.push({
-        start_ts: annotation.start_ts,
-        media
-      })
+      if (!media.settings.hide_in_bibliography) {
+        currentSection.media.push({
+          start_ts: annotation.start_ts,
+          media
+        })
+      }
 
       // get the display string for this media type
       if (media.type in MEDIA_LABEL_TYPES) {
@@ -93,7 +95,7 @@ export const loadSections = () => dispatch => {
       // increment the media tally
       mediaIndex += 1
 
-      // non-fullscreen, inline media should be displayed in the transcript.
+      // non-fullscreen (or fullscreen-inline) media should be displayed in the transcript.
       if (!annotation.settings.fullscreen || annotation.settings.inline) {
         sectionTextAnnotationOrder.push(annotation.id)
       }
-- 
cgit v1.2.3-70-g09d2