inline video

3 files changed, 65 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 74ea3bf..de76368 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -80,6 +80,33 @@
   padding-right: 1.25rem;
 }
 
+.viewer-nav .next-section-thumbnail {
+  position: absolute;
+  right: 0;
+  bottom: -9rem;
+  display: block;
+  border-radius: 1rem;
+  width: 12rem;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
+  background-size: cover;
+  background-position: center center;
+  transition: transform 0.2s;
+  transform: translateZ(0);
+  cursor: pointer;
+}
+.viewer-nav .nav-next {
+  transition: transform 0.2s;
+  transform: translateZ(0);
+}
+.viewer-nav.hovering-next .nav-next {
+  transform: translateZ(0) translateY(-8.5rem);
+}
+.viewer-nav.hovering-next .next-section-thumbnail {
+  transform: translateZ(0) translateY(-9rem);
+}
+
 /* Arrows */
 
 .arrow svg {
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index 7ca8687..e242e8a 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -5,12 +5,29 @@ import actions from 'app/actions'
 import { ROMAN_NUMERALS } from 'app/constants'
 import { Arrow } from './viewer.icons'
 import NavPlayer from './nav.player'
+import { thumbnailURL } from 'app/utils/annotation.utils'
 
 class NavParent extends Component {
+  state = {
+    hovering: false,
+    suppressHover: false,
+  }
+  constructor(props){
+    super(props)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+  }
+  handleMouseEnter(){
+    if (this.state.suppressHover) return
+    this.setState({ hovering: true })
+  }
+  handleMouseLeave(){
+    this.setState({ hovering: false, suppressHover: false })
+  }
   render() {
     const { viewer } = this.props
     return (
-      <div className={"viewer-nav " + viewer.navStyle}>
+      <div className={"viewer-nav " + viewer.navStyle + " " + (this.state.hovering ? 'hovering-next': '')} onMouseLeave={this.handleMouseLeave}>
         <div className='nav-row main-nav'>
           <div className='nav-section-name'>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
@@ -25,7 +42,7 @@ class NavParent extends Component {
             </span>
           </div>
           <NavPlayer />
-          <div className='nav-next'>
+          <div className='nav-next' onMouseEnter={this.handleMouseEnter}>
             {viewer.nextSection &&
               <span className="next-link link" onClick={() => actions.viewer.seekToSection(viewer.nextSection)}>
                 Next
@@ -34,6 +51,16 @@ class NavParent extends Component {
             }
           </div>
         </div>
+        {viewer.nextSection &&
+          <div className="next-section-thumbnail"
+            onClick={() => {
+              actions.viewer.seekToSection(viewer.nextSection)
+              this.setState({ hovering: false, suppressHover: true })
+            }}
+            style={{
+            backgroundImage: viewer.nextSection.media.length && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')',
+          }}/>
+        }
       </div>
     )
   }
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 463ca8e..72ed67b 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
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import VimeoPlayer from '@u-wave/react-vimeo'
 
 import { MediaCitation } from './inline.image'
 
@@ -13,9 +14,15 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
       className={className}
       onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
-      {"["}
+      <VimeoPlayer
+        video={item.url}
+        autoplay muted
+        controls={false}
+        byline={false}
+        width={window.innerWidth}
+        height={window.innerHeight * 0.8}
+      />
       <MediaCitation media={item} />
-      {"]"}
     </div>
   )
 }