From b8a69f767c768d3ca0cebc73553a2b37e68e9347 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Fri, 24 Jul 2015 17:04:02 -0400 Subject: Added preview images for non-image files --- web/react/components/view_image.jsx | 47 +++++++++++++++++++++++-------------- web/react/utils/utils.jsx | 13 ++++++++++ 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 6ba76c0f8..bd61bd9c9 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -31,17 +31,14 @@ module.exports = React.createClass({ return; }; - 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; - var src = fileInfo['path'] + '_preview.jpg'; + var filename = this.props.filenames[id]; + + var fileInfo = utils.splitFileLocation(filename); + var fileType = utils.getFileType(fileInfo.ext); var self = this; var img = new Image(); - img.load(src, + img.load(this.getPreviewImagePath(filename), function(){ var progress = self.state.progress; progress[id] = img.completedPercentage; @@ -134,20 +131,17 @@ module.exports = React.createClass({ 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 = ""; - - // 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 filename = this.props.filenames[id]; + var fileInfo = utils.splitFileLocation(filename); var imgClass = "hidden"; if (this.state.loaded[id] && this.state.imgId == id) imgClass = ""; - img[info['path']] = ; + img[fileInfo.path] = ( + + + + ); } } @@ -197,5 +191,22 @@ module.exports = React.createClass({ ); + }, + 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); + } } }); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index aa59201cb..e48ffed9a 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -533,6 +533,19 @@ module.exports.getFileType = function(ext) { return "other"; }; +module.exports.getPreviewImagePathForFileType = function(fileType) { + fileType = fileType.toLowerCase(); + + var icon; + if (fileType in Constants.ICON_FROM_TYPE) { + icon = Constants.ICON_FROM_TYPE[fileType]; + } else { + icon = Constants.ICON_FROM_TYPE["other"]; + } + + return "/static/images/icons/" + icon + ".png"; +}; + module.exports.getIconClassName = function(fileType) { fileType = fileType.toLowerCase(); -- cgit v1.2.3-1-g7c22