From 99e9219e0268b070128b1e04df17cf5f949d3869 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Sat, 29 Dec 2018 12:48:45 +0100
Subject: [PATCH] definitive img support

---
 src/components/SourceOverlay.jsx | 17 ++++++++++-------
 src/scss/mediaoverlay.scss       |  9 +++++++++
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx
index fbf55d4..e29be26 100644
--- a/src/components/SourceOverlay.jsx
+++ b/src/components/SourceOverlay.jsx
@@ -26,13 +26,17 @@ class SourceOverlay extends React.Component {
 
   renderPhoto() {
     const imageExts = ['.jpg', '.png']
-    const possibleUrls = imageExts.map(ext => `${this.props.source.path}${ext}`)
+    const extraUrls = imageExts.map(ext => `${this.props.source.path}${ext}`)
+    const possibleUrls = [ this.props.source.path, ...extraUrls ]
     return (
-      <Img
-        src={possibleUrls}
-        loader={<Spinner />}
-        unloader={<NoSource failedUrls={possibleUrls} />}
-      />
+      <div className='source-image-container'>
+        <Img
+          className='source-image'
+          src={possibleUrls}
+          loader={<Spinner />}
+          unloader={<NoSource failedUrls={possibleUrls} />}
+        />
+      </div>
     )
   }
 
@@ -55,7 +59,6 @@ class SourceOverlay extends React.Component {
   }
 
   _renderSwitch() {
-    // console.table(this.props.source)
     switch(this.props.source.type) {
       case 'Video':
         return this.renderVideo()
diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss
index 68dd676..a9bf0f7 100644
--- a/src/scss/mediaoverlay.scss
+++ b/src/scss/mediaoverlay.scss
@@ -142,3 +142,12 @@ $header-inset: 10px;
     margin-right: 1em;
   }
 }
+
+.source-image-container {
+  padding: 0 25px;
+  .source-image {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+