oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated UI for popup window

Browse Source
This commit is contained in:
kyle hoell
2020-12-06 20:34:15 -05:00
parent 596c72f970
commit 2f3b14b4df
2 changed files with 130 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PopupWindow/PopupWindow.js
+43
View File
@@ -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}>