// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. const Client = require('../utils/client.jsx'); const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); const ViewImagePopoverBar = require('./view_image_popover_bar.jsx'); const Modal = ReactBootstrap.Modal; const KeyCodes = Constants.KeyCodes; export default class ViewImageModal extends React.Component { constructor(props) { super(props); this.canSetState = false; this.loadImage = this.loadImage.bind(this); this.handleNext = this.handleNext.bind(this); this.handlePrev = this.handlePrev.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); this.getPublicLink = this.getPublicLink.bind(this); this.getPreviewImagePath = this.getPreviewImagePath.bind(this); this.onModalShown = this.onModalShown.bind(this); this.onModalHidden = this.onModalHidden.bind(this); this.onMouseEnterImage = this.onMouseEnterImage.bind(this); this.onMouseLeaveImage = this.onMouseLeaveImage.bind(this); var loaded = []; var progress = []; for (var i = 0; i < this.props.filenames.length; i++) { loaded.push(false); progress.push(0); } this.state = { imgId: this.props.startId, imgHeight: '100%', loaded: loaded, progress: progress, images: {}, fileSizes: {}, showFooter: false }; } handleNext(e) { if (e) { e.stopPropagation(); } var id = this.state.imgId + 1; if (id > this.props.filenames.length - 1) { id = 0; } this.setState({imgId: id}); this.loadImage(id); } handlePrev(e) { if (e) { e.stopPropagation(); } var id = this.state.imgId - 1; if (id < 0) { id = this.props.filenames.length - 1; } this.setState({imgId: id}); this.loadImage(id); } handleKeyPress(e) { if (!e || !this.props.show) { return; } else if (e.keyCode === KeyCodes.RIGHT) { this.handleNext(); } else if (e.keyCode === KeyCodes.LEFT) { this.handlePrev(); } } onModalShown(nextProps) { this.setState({imgId: nextProps.startId}); this.loadImage(nextProps.startId); } onModalHidden() { if (this.refs.video) { var video = ReactDOM.findDOMNode(this.refs.video); video.pause(); video.currentTime = 0; } } componentWillReceiveProps(nextProps) { if (nextProps.show === true && this.props.show === false) { this.onModalShown(nextProps); } else if (nextProps.show === false && this.props.show === true) { this.onModalHidden(); } } loadImage(id) { var imgHeight = $(window).height() - 100; this.setState({imgHeight}); var filename = this.props.filenames[id]; var fileInfo = Utils.splitFileLocation(filename); var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { var img = new Image(); img.load(this.getPreviewImagePath(filename), () => { const progress = this.state.progress; progress[id] = img.completedPercentage; this.setState({progress}); }); img.onload = () => { const loaded = this.state.loaded; loaded[id] = true; this.setState({loaded}); }; var images = this.state.images; images[id] = img; this.setState({images}); } else { // there's nothing to load for non-image files var loaded = this.state.loaded; loaded[id] = true; this.setState({loaded}); } } componentDidMount() { $(window).on('keyup', this.handleKeyPress); // keep track of whether or not this component is mounted so we can safely set the state asynchronously this.canSetState = true; } componentWillUnmount() { this.canSetState = false; $(window).off('keyup', this.handleKeyPress); } getPublicLink() { var data = {}; data.channel_id = this.props.channelId; data.user_id = this.props.userId; data.filename = this.props.filenames[this.state.imgId]; Client.getPublicLink(data, function sucess(serverData) { if (Utils.isMobile()) { window.location.href = serverData.public_link; } else { window.open(serverData.public_link); } }, function error() {} ); } getPreviewImagePath(filename) { // Returns the path to a preview image that can be used to represent a file. 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'; } // only images have proper previews, so just use a placeholder icon for non-images return Utils.getPreviewImagePathForFileType(fileType); } onMouseEnterImage() { this.setState({showFooter: true}); } onMouseLeaveImage() { this.setState({showFooter: false}); } render() { if (this.props.filenames.length < 1 || this.props.filenames.length - 1 < this.state.imgId) { return
; } var filename = this.props.filenames[this.state.imgId]; var fileUrl = Utils.getFileUrl(filename); var name = decodeURIComponent(Utils.getFileName(filename)); var content; var bgClass = ''; 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 = ( ); } else if (fileType === 'video' || fileType === 'audio') { let width = Constants.WEB_VIDEO_WIDTH; let height = Constants.WEB_VIDEO_HEIGHT; if (Utils.isMobile()) { width = Constants.MOBILE_VIDEO_WIDTH; height = Constants.MOBILE_VIDEO_HEIGHT; } content = ( ); } 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 = (
{name}
{infoString}
); bgClass = 'white-bg'; // asynchronously request the actual size of this file if (!(filename in this.state.fileSizes)) { Client.getFileInfo( filename, function success(data) { if (this.canSetState) { var fileSizes = this.state.fileSizes; fileSizes[filename] = parseInt(data.size, 10); this.setState(fileSizes); } }.bind(this), function fail() {} ); } } } else { // display a progress indicator when the preview for an image is still loading var percentage = Math.floor(this.state.progress[this.state.imgId]); if (percentage) { content = (
{'Previewing ' + percentage + '%'}
); } else { content = (
); } bgClass = 'black-bg'; } var leftArrow = ''; var rightArrow = ''; if (this.props.filenames.length > 1) { leftArrow = ( ); rightArrow = ( ); } let closeButtonClass = 'modal-close'; if (this.state.showFooter) { closeButtonClass += ' modal-close--show'; } return (
e.stopPropagation()} >
{content}
{leftArrow} {rightArrow} ); } } ViewImageModal.defaultProps = { show: false, filenames: [], channelId: '', userId: '', startId: 0 }; ViewImageModal.propTypes = { show: React.PropTypes.bool.isRequired, onModalDismissed: React.PropTypes.func.isRequired, filenames: React.PropTypes.array, modalId: React.PropTypes.string, channelId: React.PropTypes.string, userId: React.PropTypes.string, startId: React.PropTypes.number };