From 49695dd3935c4d9f441fba2a1c9519de03cfd30d Mon Sep 17 00:00:00 2001
From: Bill Thiede <git@xinu.tv>
Date: Wed, 26 Feb 2020 09:21:07 -0800
Subject: [PATCH] Preserve aspect ratio in debug thumbnails.

---
 react-slideshow/src/App.css |  2 +-
 react-slideshow/src/App.tsx | 21 +++++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/react-slideshow/src/App.css b/react-slideshow/src/App.css
index aa87e4b..b05d68c 100644
--- a/react-slideshow/src/App.css
+++ b/react-slideshow/src/App.css
@@ -3,7 +3,7 @@ body, html, #root {
 }
 
 #ui {
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.5);
   bottom: 0;
   line-height: 3em;
   position: 'absolute';
diff --git a/react-slideshow/src/App.tsx b/react-slideshow/src/App.tsx
index 2c2ecd0..7277439 100644
--- a/react-slideshow/src/App.tsx
+++ b/react-slideshow/src/App.tsx
@@ -173,37 +173,42 @@ class Album extends React.Component<AlbumProps, AlbumState> {
         backgroundSize: 'cover',
       };
       let prefetchStyle: React.CSSProperties = {
+        backgroundColor: 'rgba(127, 127, 127, 0.5)',
+        backgroundPosition: 'center center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        bottom: 0,
+        height: '25%',
         position: 'absolute',
         width: '25%',
-        height: '25%',
-        bottom: 0,
       };
       let leftPrefetchStyle: React.CSSProperties = {
         left: 0,
+        backgroundImage: `url(/api/image/${prevImage.id}?w=${w}&h=${h})`,
         ...prefetchStyle
       };
       let rightPrefetchStyle: React.CSSProperties = {
         right: 0,
+        backgroundImage: `url(/api/image/${nextImage.id}?w=${w}&h=${h})`,
         ...prefetchStyle
       };
       let ui;
       if (showUI) {
+        // TODO(wathiede): set image as background of the div in the style.
         ui = <div id="ui">
-          <img
+          <div
           style={leftPrefetchStyle}
           onClick={(e)=>{
             e.stopPropagation();
             this.setState({idx: prevIdx})
-          }}
-          src={`/api/image/${prevImage.id}?w=${w}&h=${h}`} alt="prefetch prev" />
+          }}></div>
           <div className="meta">{image.filename}</div>
-          <img
+          <div
           style={rightPrefetchStyle}
           onClick={(e)=>{
             e.stopPropagation();
             this.setState({idx: nextIdx})
-          }}
-          src={`/api/image/${nextImage.id}?w=${w}&h=${h}`} alt="prefetch next" />
+          }}></div>
         </div>;
       }
       return <div style={style} onClick={(e)=>{