From 2f3b14b4dfdc94aece04a67fdbb3ed99f9f012c1 Mon Sep 17 00:00:00 2001
From: kyle hoell <kyle.hoell@gmail.com>
Date: Sun, 6 Dec 2020 20:34:15 -0500
Subject: [PATCH] updated UI for popup window

---
 src/components/PopupWindow/PopupWindow.js |  43 ++++++++
 src/styles/components/_Popup-window.scss  | 116 ++++++++++++++++------
 2 files changed, 130 insertions(+), 29 deletions(-)

diff --git a/src/components/PopupWindow/PopupWindow.js b/src/components/PopupWindow/PopupWindow.js
index 0d143f8..f5361aa 100644
--- a/src/components/PopupWindow/PopupWindow.js
+++ b/src/components/PopupWindow/PopupWindow.js
@@ -1,6 +1,8 @@
 import Spinner from ".././Spinner";
 import capitalize from "../../utils/capitalize";
 import React from "react";
+import moment from "moment";
+import bytes from "bytes";
 
 class PopupWindow extends React.Component {
 
@@ -11,6 +13,47 @@ class PopupWindow extends React.Component {
 
     render() {
 
+        return (
+            <div className={this.props.popupFile.metadata.isVideo ? "popup-window popup-window-video" : "popup-window"} ref={this.props.wrapperRef}>
+
+                <p className="popup-window__title">{capitalize(this.props.popupFile.filename)}</p>
+
+                <div className={this.props.popupFile.metadata.isVideo ? "popup-window-wrapper popup-window-wrapper-video" : "popup-window-wrapper"}>
+
+                    {!this.props.popupFile.metadata.isVideo ? 
+                        <div className="popup-window__image__wrapper">
+                            
+                        {!this.props.popupFile.metadata.hasThumbnail ? <h3 className="popup-window__subtitle">No Preview Available</h3> : undefined}
+            
+                        {!this.props.popupFile.metadata.hasThumbnail ? <img className={this.props.state.imageClassname} src={this.props.state.image}/> 
+                        : <img className={this.props.state.imageClassname} onClick={this.props.setPhotoViewerWindow} src={this.props.state.image} onError={this.props.thumbnailOnError}/>}
+
+                        <div className={this.props.state.spinnerClassname}>
+                            {!this.props.popupFile.metadata.hasThumbnail ? undefined : <Spinner />}
+                        </div>
+                    </div>    
+                        :
+                        <video className="popup-window__video" 
+                                src={this.props.state.video}
+                                ref={this.props.video} 
+                                type="video/mp4"
+                                controls>
+                            Your browser does not support the video tag.
+                        </video>}
+                    <div>
+                        <div>
+                            <p className="popup-file-details-title">File Size: {bytes(+this.props.popupFile.metadata.size)}</p>
+                            <p className="popup-file-details-title">Created: {moment(this.props.popupFile.uploadDate).format("L")}</p>
+                            <div className="popup-window-button-wrapper">
+                                <button className={this.props.popupFile.metadata.isVideo ? "button popup-window__button popup-window__button-video" : "button popup-window__button"} onClick={() => this.props.downloadFile(this.props.popupFile._id, this.props.popupFile)}>Download</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <img className="popup-window__close-button" onClick={this.props.hidePopupWindow} src="/images/close_icon.png"/>
+            </div>
+        )
         
         return (
             <div className="popup-window" ref={this.props.wrapperRef}>
diff --git a/src/styles/components/_Popup-window.scss b/src/styles/components/_Popup-window.scss
index 6dfa022..4385713 100644
--- a/src/styles/components/_Popup-window.scss
+++ b/src/styles/components/_Popup-window.scss
@@ -6,6 +6,7 @@
     margin: 0 auto;
     left: 50%;
     top: 50%;
+    max-width: 800px;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
@@ -23,10 +24,22 @@
         width: 100%;
         height: 100%;
         z-index: 5;
+        max-width: unset;
     }
     
 }
 
+.popup-window-video {
+    height: unset;
+
+    @media (max-width: $desktop-breakpoint) {
+        width: 100%;
+        height: 100%;
+        z-index: 5;
+        max-width: unset;
+    }
+}
+
 .popup-window--gone {
 
     display: none;
@@ -41,6 +54,13 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+    font-size: 21px;
+    height: 35px;
+    margin-bottom: 0;
+
+    @media (max-width: $desktop-breakpoint) {
+        overflow: hidden;
+    }
 }
 
 .popup-window__subtitle {
@@ -104,14 +124,18 @@
     }
 }
 
+.popup-window__button-video {
+    margin-bottom: 14px;
+}
+
 .popup-window__image__wrapper {
-    // width: inherit;
+
     flex-direction: column-reverse;
     align-items: center;
     display: flex;
     margin-bottom: 50px;
     height: 50%;
-    width: 80%;
+    width: 38%;
     max-width: 80%;
     overflow: hidden;
     position: relative;
@@ -119,35 +143,36 @@
     max-height: 50%;
 
     @media (max-width: $desktop-breakpoint) {
-        // flex-direction: column-reverse;
-        // align-items: center;
-        // display: flex;
-        // margin-bottom: 50px;
-        // overflow: visible;
-        // // height: 65%;
-        // // width: 99%;
-        // max-width: 100%;
-        // overflow: hidden;
-        // position: relative;
-        // justify-content: center;
-        // // max-height: 50%;
-        // height: 70%;
-        // width: 100%;
-        // max-height: 70%;
 
-        flex-direction: column-reverse;
-        align-items: center;
-        display: flex;
-        margin-bottom: 50px;
-        overflow: visible;
-        /* max-width: 100%; */
-        //overflow: hidden;
-        position: relative;
-        justify-content: center;
-        height: 100vh;
-        width: 100vw;
+        width: 98%;
+        max-width: 98%;
     }
 
+    // flex-direction: column-reverse;
+    // align-items: center;
+    // display: flex;
+    // margin-bottom: 50px;
+    // height: 50%;
+    // width: 80%;
+    // max-width: 80%;
+    // overflow: hidden;
+    // position: relative;
+    // justify-content: center;
+    // max-height: 50%;
+
+    // @media (max-width: $desktop-breakpoint) {
+
+    //     flex-direction: column-reverse;
+    //     align-items: center;
+    //     display: flex;
+    //     margin-bottom: 50px;
+    //     overflow: visible;
+    //     position: relative;
+    //     justify-content: center;
+    //     height: 100vh;
+    //     width: 100vw;
+    // }
+
 }
 
 .popup-window__spinner__wrapper {
@@ -167,6 +192,39 @@
     max-height: 70%;
     max-width: 95%;
     border-radius: 3px;
+}
 
-    
+.popup-window-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+    @media (max-width: $desktop-breakpoint) {
+
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
+.popup-window-wrapper-video {
+    flex-direction: column;
+    justify-content: space-evenly;
+
+    @media (max-width: $desktop-breakpoint) {
+        justify-content: center;
+    }
+}
+
+.popup-file-details-title {
+    font-family: "Roboto",sans-serif;
+    font-weight: 300;
+}
+
+.popup-window-button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file