summaryrefslogtreecommitdiffstats
path: root/web/react/components/view_image.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/view_image.jsx')
-rw-r--r--web/react/components/view_image.jsx186
1 files changed, 113 insertions, 73 deletions
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index 7b096c629..4b2f8f650 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -5,6 +5,8 @@ var Client = require('../utils/client.jsx');
var utils = require('../utils/utils.jsx');
module.exports = React.createClass({
+ displayName: "ViewImageModal",
+ canSetState: false,
handleNext: function() {
var id = this.state.imgId + 1;
if (id > this.props.filenames.length-1) {
@@ -31,42 +33,41 @@ module.exports = React.createClass({
return;
};
- var src = "";
- if (this.props.imgCount > 0) {
- src = this.props.filenames[id];
+ var filename = this.props.filenames[id];
+
+ var fileInfo = utils.splitFileLocation(filename);
+ var fileType = utils.getFileType(fileInfo.ext);
+
+ if (fileType === "image") {
+ var self = this;
+ var img = new Image();
+ img.load(this.getPreviewImagePath(filename),
+ function(){
+ var progress = self.state.progress;
+ progress[id] = img.completedPercentage;
+ self.setState({ progress: progress });
+ });
+ img.onload = function(imgid) {
+ return function() {
+ var loaded = self.state.loaded;
+ loaded[imgid] = true;
+ self.setState({ loaded: loaded });
+ $(self.refs.image.getDOMNode()).css("max-height",imgHeight);
+ };
+ }(id);
+ var images = this.state.images;
+ images[id] = img;
+ this.setState({ images: images });
} else {
- var fileInfo = utils.splitFileLocation(this.props.filenames[id]);
- // This is a temporary patch to fix issue with old files using absolute paths
- if (fileInfo.path.indexOf("/api/v1/files/get") !== -1) {
- fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
- }
- fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
- src = fileInfo['path'] + '_preview.jpg';
+ // there's nothing to load for non-image files
+ var loaded = this.state.loaded;
+ loaded[id] = true;
+ this.setState({ loaded: loaded });
}
-
- var self = this;
- var img = new Image();
- img.load(src,
- function(){
- var progress = self.state.progress;
- progress[id] = img.completedPercentage;
- self.setState({ progress: progress });
- });
- img.onload = function(imgid) {
- return function() {
- var loaded = self.state.loaded;
- loaded[imgid] = true;
- self.setState({ loaded: loaded });
- $(self.refs.image.getDOMNode()).css("max-height",imgHeight);
- };
- }(id);
- var images = this.state.images;
- images[id] = img;
- this.setState({ images: images });
},
componentDidUpdate: function() {
- if (this.refs.image) {
- if (this.state.loaded[this.state.imgId]) {
+ if (this.state.loaded[this.state.imgId]) {
+ if (this.refs.imageWrap) {
$(this.refs.imageWrap.getDOMNode()).removeClass("default");
}
}
@@ -91,6 +92,12 @@ module.exports = React.createClass({
$(self.refs.imageFooter.getDOMNode()).removeClass("footer--show");
}
);
+
+ // keep track of whether or not this component is mounted so we can safely set the state asynchronously
+ this.canSetState = true;
+ },
+ componentWillUnmount: function() {
+ this.canSetState = false;
},
getPublicLink: function(e) {
data = {};
@@ -112,62 +119,78 @@ module.exports = React.createClass({
loaded.push(false);
progress.push(0);
}
- return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {} };
+ return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {} };
},
render: function() {
if (this.props.filenames.length < 1 || this.props.filenames.length-1 < this.state.imgId) {
return <div/>;
}
- var fileInfo = utils.splitFileLocation(this.props.filenames[this.state.imgId]);
+ var filename = this.props.filenames[this.state.imgId];
+ var fileUrl = utils.getFileUrl(filename);
- var name = fileInfo['name'] + '.' + fileInfo['ext'];
+ var name = decodeURIComponent(utils.getFileName(filename));
- var loading = "";
+ var content;
var bgClass = "";
- var img = {};
- if (!this.state.loaded[this.state.imgId]) {
+ if (this.state.loaded[this.state.imgId]) {
+ var fileInfo = utils.splitFileLocation(filename);
+ var fileType = utils.getFileType(fileInfo.ext);
+
+ if (fileType === "image") {
+ // image files just show a preview of the file
+ content = (
+ <a href={fileUrl} target="_blank">
+ <img ref="image" src={this.getPreviewImagePath(filename)}/>
+ </a>
+ );
+ } else {
+ // non-image files include a section providing details about the file
+ var infoString = "File type " + fileInfo.ext.toUpperCase();
+ if (this.state.fileSizes[filename] && this.state.fileSizes[filename] >= 0) {
+ infoString += ", Size " + utils.fileSizeToString(this.state.fileSizes[filename]);
+ }
+
+ content = (
+ <div className="file-details__container">
+ <a className={"file-details__preview"} href={fileUrl} target="_blank">
+ <span className="file-details__preview-helper" />
+ <img ref="image" src={this.getPreviewImagePath(filename)} />
+ </a>
+ <div className="file-details">
+ <div className="file-details__name">{name}</div>
+ <div className="file-details__info">{infoString}</div>
+ </div>
+ </div>
+ );
+
+ // asynchronously request the actual size of this file
+ if (!(filename in this.state.fileSizes)) {
+ var self = this;
+
+ utils.getFileSize(utils.getFileUrl(filename), function(fileSize) {
+ if (self.canSetState) {
+ var fileSizes = self.state.fileSizes;
+ fileSizes[filename] = fileSize;
+ self.setState(fileSizes);
+ }
+ });
+ }
+ }
+ } else {
+ // display a progress indicator when the preview for an image is still loading
var percentage = Math.floor(this.state.progress[this.state.imgId]);
- loading = (
- <div key={name+"_loading"}>
- <img ref="placeholder" className="loader-image" src="/static/images/load.gif" />
+ content = (
+ <div>
+ <img className="loader-image" src="/static/images/load.gif" />
{ percentage > 0 ?
<span className="loader-percent" >{"Previewing " + percentage + "%"}</span>
: ""}
</div>
);
bgClass = "black-bg";
- } else if (this.state.viewed) {
- for (var id in this.state.images) {
- var info = utils.splitFileLocation(this.props.filenames[id]);
- var preview_filename = "";
- if (this.props.imgCount > 0) {
- preview_filename = this.props.filenames[this.state.imgId];
- } else {
- // This is a temporary patch to fix issue with old files using absolute paths
- if (info.path.indexOf("/api/v1/files/get") !== -1) {
- info.path = info.path.split("/api/v1/files/get")[1];
- }
- info.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + info.path;
- preview_filename = info['path'] + '_preview.jpg';
- }
-
- var imgClass = "hidden";
- if (this.state.loaded[id] && this.state.imgId == id) imgClass = "";
-
- img[info['path']] = <a key={info['path']} className={imgClass} href={info.path+"."+info.ext} target="_blank"><img ref="image" src={preview_filename}/></a>;
- }
}
- var imgFragment = React.addons.createFragment(img);
-
- // This is a temporary patch to fix issue with old files using absolute paths
- var download_link = this.props.filenames[this.state.imgId];
- if (download_link.indexOf("/api/v1/files/get") !== -1) {
- download_link = download_link.split("/api/v1/files/get")[1];
- }
- download_link = utils.getWindowLocationOrigin() + "/api/v1/files/get" + download_link;
-
return (
<div className="modal fade image_modal" ref="modal" id={this.props.modalId} tabIndex="-1" role="dialog" aria-hidden="true">
<div className="modal-dialog modal-image">
@@ -175,7 +198,7 @@ module.exports = React.createClass({
<div ref="imageBody" className="modal-body image-body">
<div ref="imageWrap" className={"image-wrapper default " + bgClass}>
<div className="modal-close" data-dismiss="modal"></div>
- {imgFragment}
+ {content}
<div ref="imageFooter" className="modal-button-bar">
<span className="pull-left text">{"Image "+(this.state.imgId+1)+" of "+this.props.filenames.length}</span>
<div className="image-links">
@@ -185,10 +208,9 @@ module.exports = React.createClass({
<span className="text"> | </span>
</div>
: "" }
- <a href={download_link} download={decodeURIComponent(name)} className="text">Download</a>
+ <a href={fileUrl} download={name} className="text">Download</a>
</div>
</div>
- {loading}
</div>
{ this.props.filenames.length > 1 ?
<a className="modal-prev-bar" href="#" onClick={this.handlePrev}>
@@ -205,5 +227,23 @@ module.exports = React.createClass({
</div>
</div>
);
+ },
+ // Returns the path to a preview image that can be used to represent a file.
+ getPreviewImagePath: function(filename) {
+ var fileInfo = utils.splitFileLocation(filename);
+ var fileType = utils.getFileType(fileInfo.ext);
+
+ if (fileType === "image") {
+ // This is a temporary patch to fix issue with old files using absolute paths
+ if (fileInfo.path.indexOf("/api/v1/files/get") !== -1) {
+ fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+ }
+ fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
+
+ return fileInfo.path + '_preview.jpg';
+ } else {
+ // only images have proper previews, so just use a placeholder icon for non-images
+ return utils.getPreviewImagePathForFileType(fileType);
+ }
}
});
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-19 18:58:38 +0000