From b25f6956e03358bd91c781f5a54b1536bc0cafdb Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Sat, 29 Dec 2018 13:51:13 +0100
Subject: [PATCH] fix video support

---
 src/components/Photobook.jsx     | 51 --------------------------------
 src/components/SourceOverlay.jsx |  4 ++-
 src/scss/mediaoverlay.scss       | 17 +++++++----
 3 files changed, 14 insertions(+), 58 deletions(-)
 delete mode 100644 src/components/Photobook.jsx

diff --git a/src/components/Photobook.jsx b/src/components/Photobook.jsx
deleted file mode 100644
index 5c65261..0000000
--- a/src/components/Photobook.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-
-class Photobook extends React.Component {
-
-
-  constructor(props) {
-    super(props)
-    this.state ={
-      isLoading: true,
-      isLoaded: false
-    }
-    this.loadImgs = this.loadImgs.bind(this)
-  }
-
-  loadImgs() {
-    console.log(this.props.src)
-    Promise.resolve()
-      .then(fetch(this.props.src))
-      .then(res => {
-        console.log(res)
-      })
-      .then(() => {
-        this.setState({ isLoading: false, isLoaded: true })
-      })
-  }
-
-  componentDidMount() {
-    if (this.state.isLoading) this.loadImgs()
-  }
-
-  // componentWillReceiveProps(nextProps) {
-  //
-  //   if (!src.length) return this.setState({ isLoading: false, isLoaded: false })
-  //   this.setState({ isLoading: true, isLoaded: false })
-  // }
-
-  render() {
-    if (this.state.isLoading) {
-      return <div>Loading</div>
-    }
-    return <div>Ciao</div>
-  }
-}
-
-Photobook.propTypes = {
-  loader: false,
-  unloader: false,
-  src: []
-}
-
-export default Photobook
diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx
index 9e75798..724de27 100644
--- a/src/components/SourceOverlay.jsx
+++ b/src/components/SourceOverlay.jsx
@@ -15,11 +15,13 @@ class SourceOverlay extends React.Component {
   }
 
   renderVideo() {
+    // NB: assume only one video
     return (
       <div className="media-player">
         <Player
+          className='source-video'
           playsInline
-          src={`${this.props.source.path}.mp4`}
+          src={this.props.source.paths[0]}
         />
       </div>
     )
diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss
index 3a6619b..9046ba7 100644
--- a/src/scss/mediaoverlay.scss
+++ b/src/scss/mediaoverlay.scss
@@ -147,11 +147,16 @@ $header-inset: 10px;
 .source-image-container {
   padding: 0 25px;
   overflow-y: scroll;
-  max-height: 100%;
-  .source-image {
-    max-width: calc(100% - 20px);
-    max-height: 100%;
-    padding: 10px;
-  }
+  height: 100%;
 }
 
+.source-image, .source-video {
+  max-width: calc(100% - 20px);
+  max-height: 350px !important;
+  height: 100%;
+  padding: 10px;
+}
+
+.media-player {
+  overflow-y: hidden;
+}