From 12896bd23eeba79884245c1c29fdc568cf21a7fa Mon Sep 17 00:00:00 2001
From: Christopher Speller <crspeller@gmail.com>
Date: Mon, 14 Mar 2016 08:50:46 -0400
Subject: Converting to Webpack. Stage 1.

---
 web/react/components/view_image.jsx | 422 ------------------------------------
 1 file changed, 422 deletions(-)
 delete mode 100644 web/react/components/view_image.jsx

(limited to 'web/react/components/view_image.jsx')

diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
deleted file mode 100644
index 713fbf80b..000000000
--- a/web/react/components/view_image.jsx
+++ /dev/null
@@ -1,422 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import * as AsyncClient from '../utils/async_client.jsx';
-import * as Client from '../utils/client.jsx';
-import * as Utils from '../utils/utils.jsx';
-import AudioVideoPreview from './audio_video_preview.jsx';
-import Constants from '../utils/constants.jsx';
-import FileInfoPreview from './file_info_preview.jsx';
-import FileStore from '../stores/file_store.jsx';
-import ViewImagePopoverBar from './view_image_popover_bar.jsx';
-
-import {intlShape, injectIntl, defineMessages} from 'mm-intl';
-
-const Modal = ReactBootstrap.Modal;
-const KeyCodes = Constants.KeyCodes;
-
-const holders = defineMessages({
-    loading: {
-        id: 'view_image.loading',
-        defaultMessage: 'Loading '
-    }
-});
-
-class ViewImageModal extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.showImage = this.showImage.bind(this);
-        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.onModalShown = this.onModalShown.bind(this);
-        this.onModalHidden = this.onModalHidden.bind(this);
-
-        this.onFileStoreChange = this.onFileStoreChange.bind(this);
-
-        this.getPublicLink = this.getPublicLink.bind(this);
-        this.onMouseEnterImage = this.onMouseEnterImage.bind(this);
-        this.onMouseLeaveImage = this.onMouseLeaveImage.bind(this);
-
-        this.state = {
-            imgId: this.props.startId,
-            fileInfo: null,
-            imgHeight: '100%',
-            loaded: Utils.fillArray(false, this.props.filenames.length),
-            progress: Utils.fillArray(0, this.props.filenames.length),
-            showFooter: false
-        };
-    }
-
-    handleNext(e) {
-        if (e) {
-            e.stopPropagation();
-        }
-        let id = this.state.imgId + 1;
-        if (id > this.props.filenames.length - 1) {
-            id = 0;
-        }
-        this.showImage(id);
-    }
-
-    handlePrev(e) {
-        if (e) {
-            e.stopPropagation();
-        }
-        let id = this.state.imgId - 1;
-        if (id < 0) {
-            id = this.props.filenames.length - 1;
-        }
-        this.showImage(id);
-    }
-
-    handleKeyPress(e) {
-        if (e.keyCode === KeyCodes.RIGHT) {
-            this.handleNext();
-        } else if (e.keyCode === KeyCodes.LEFT) {
-            this.handlePrev();
-        }
-    }
-
-    onModalShown(nextProps) {
-        $(window).on('keyup', this.handleKeyPress);
-
-        this.showImage(nextProps.startId);
-
-        FileStore.addChangeListener(this.onFileStoreChange);
-    }
-
-    onModalHidden() {
-        $(window).off('keyup', this.handleKeyPress);
-
-        if (this.refs.video) {
-            this.refs.video.stop();
-        }
-
-        FileStore.removeChangeListener(this.onFileStoreChange);
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.show === true && this.props.show === false) {
-            this.onModalShown(nextProps);
-        } else if (nextProps.show === false && this.props.show === true) {
-            this.onModalHidden();
-        }
-
-        if (!Utils.areObjectsEqual(this.props.filenames, nextProps.filenames)) {
-            this.setState({
-                loaded: Utils.fillArray(false, nextProps.filenames.length),
-                progress: Utils.fillArray(0, nextProps.filenames.length)
-            });
-        }
-    }
-
-    onFileStoreChange(filename) {
-        const id = this.props.filenames.indexOf(filename);
-
-        if (id !== -1) {
-            if (id === this.state.imgId) {
-                this.setState({
-                    fileInfo: FileStore.getInfo(filename)
-                });
-            }
-
-            if (!this.state.loaded[id]) {
-                this.loadImage(id, filename);
-            }
-        }
-    }
-
-    showImage(id) {
-        this.setState({imgId: id});
-
-        const imgHeight = $(window).height() - 100;
-        this.setState({imgHeight});
-
-        const filename = this.props.filenames[id];
-
-        if (!FileStore.hasInfo(filename)) {
-            // the image will actually be loaded once we know what we need to load
-            AsyncClient.getFileInfo(filename);
-            return;
-        }
-
-        this.setState({
-            fileInfo: FileStore.getInfo(filename)
-        });
-
-        if (!this.state.loaded[id]) {
-            this.loadImage(id, filename);
-        }
-    }
-
-    loadImage(id, filename) {
-        const fileInfo = FileStore.getInfo(filename);
-        const fileType = Utils.getFileType(fileInfo.extension);
-
-        if (fileType === 'image') {
-            let previewUrl;
-            if (fileInfo.has_image_preview) {
-                previewUrl = Utils.getPreviewImagePath(filename);
-            } else {
-                // some images (eg animated gifs) just show the file itself and not a preview
-                previewUrl = Utils.getFileUrl(filename);
-            }
-
-            const img = new Image();
-            img.load(
-                previewUrl,
-                () => {
-                    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});
-            };
-        } else {
-            // there's nothing to load for non-image files
-            var loaded = this.state.loaded;
-            loaded[id] = true;
-            this.setState({loaded});
-        }
-    }
-
-    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,
-            (serverData) => {
-                if (Utils.isMobile()) {
-                    window.location.href = serverData.public_link;
-                } else {
-                    window.open(serverData.public_link);
-                }
-            },
-            () => {
-                //Do Nothing on error
-            }
-        );
-    }
-
-    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 <div/>;
-        }
-
-        const filename = this.props.filenames[this.state.imgId];
-        const fileUrl = Utils.getFileUrl(filename, true);
-
-        var content;
-        if (this.state.loaded[this.state.imgId]) {
-            // this.state.fileInfo is for the current image and we shoudl have it before we load the image
-            const fileInfo = this.state.fileInfo;
-            const fileType = Utils.getFileType(fileInfo.extension);
-
-            if (fileType === 'image') {
-                content = (
-                    <ImagePreview
-                        filename={filename}
-                        fileUrl={fileUrl}
-                        fileInfo={fileInfo}
-                        maxHeight={this.state.imgHeight}
-                    />
-                );
-            } else if (fileType === 'video' || fileType === 'audio') {
-                content = (
-                    <AudioVideoPreview
-                        filename={filename}
-                        fileUrl={fileUrl}
-                        fileInfo={this.state.fileInfo}
-                        maxHeight={this.state.imgHeight}
-                        formatMessage={this.props.intl.formatMessage}
-                    />
-                );
-            } else {
-                content = (
-                    <FileInfoPreview
-                        filename={filename}
-                        fileUrl={fileUrl}
-                        fileInfo={fileInfo}
-                        formatMessage={this.props.intl.formatMessage}
-                    />
-                );
-            }
-        } else {
-            // display a progress indicator when the preview for an image is still loading
-            const progress = Math.floor(this.state.progress[this.state.imgId]);
-
-            content = (
-                <LoadingImagePreview
-                    progress={progress}
-                    loading={this.props.intl.formatMessage(holders.loading)}
-                />
-            );
-        }
-
-        let leftArrow = null;
-        let rightArrow = null;
-        if (this.props.filenames.length > 1) {
-            leftArrow = (
-                <a
-                    ref='previewArrowLeft'
-                    className='modal-prev-bar'
-                    href='#'
-                    onClick={this.handlePrev}
-                >
-                    <i className='image-control image-prev'/>
-                </a>
-            );
-
-            rightArrow = (
-                <a
-                    ref='previewArrowRight'
-                    className='modal-next-bar'
-                    href='#'
-                    onClick={this.handleNext}
-                >
-                    <i className='image-control image-next'/>
-                </a>
-            );
-        }
-
-        let closeButtonClass = 'modal-close';
-        if (this.state.showFooter) {
-            closeButtonClass += ' modal-close--show';
-        }
-
-        return (
-            <Modal
-                show={this.props.show}
-                onHide={this.props.onModalDismissed}
-                className='image_modal'
-                dialogClassName='modal-image'
-            >
-                <Modal.Body
-                    modalClassName='image-body'
-                    onClick={this.props.onModalDismissed}
-                >
-                    <div
-                        className={'image-wrapper'}
-                        onClick={this.props.onModalDismissed}
-                    >
-                        <div
-                            onMouseEnter={this.onMouseEnterImage}
-                            onMouseLeave={this.onMouseLeaveImage}
-                            onClick={(e) => e.stopPropagation()}
-                        >
-                            <div
-                                className={closeButtonClass}
-                                onClick={this.props.onModalDismissed}
-                            />
-                            {content}
-                            <ViewImagePopoverBar
-                                show={this.state.showFooter}
-                                fileId={this.state.imgId}
-                                totalFiles={this.props.filenames.length}
-                                filename={name}
-                                fileURL={fileUrl}
-                                getPublicLink={this.getPublicLink}
-                            />
-                        </div>
-                    </div>
-                    {leftArrow}
-                    {rightArrow}
-                </Modal.Body>
-            </Modal>
-        );
-    }
-}
-
-ViewImageModal.defaultProps = {
-    show: false,
-    filenames: [],
-    channelId: '',
-    userId: '',
-    startId: 0
-};
-ViewImageModal.propTypes = {
-    intl: intlShape.isRequired,
-    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
-};
-
-function LoadingImagePreview({progress, loading}) {
-    let progressView = null;
-    if (progress) {
-        progressView = (
-            <span className='loader-percent'>
-                {loading + progress + '%'}
-            </span>
-        );
-    }
-
-    return (
-        <div className='view-image__loading'>
-            <img
-                className='loader-image'
-                src='/static/images/load.gif'
-            />
-            {progressView}
-        </div>
-    );
-}
-
-LoadingImagePreview.propTypes = {
-    progress: React.PropTypes.number,
-    loading: React.PropTypes.string
-};
-
-function ImagePreview({filename, fileUrl, fileInfo, maxHeight}) {
-    let previewUrl;
-    if (fileInfo.has_preview_image) {
-        previewUrl = Utils.getPreviewImagePath(filename);
-    } else {
-        previewUrl = fileUrl;
-    }
-
-    return (
-        <a
-            href={fileUrl}
-            target='_blank'
-            download={true}
-        >
-            <img
-                style={{maxHeight}}
-                src={previewUrl}
-            />
-        </a>
-    );
-}
-
-ImagePreview.propTypes = {
-    filename: React.PropTypes.string.isRequired,
-    fileUrl: React.PropTypes.string.isRequired,
-    fileInfo: React.PropTypes.object.isRequired,
-    maxHeight: React.PropTypes.number.isRequired
-};
-
-export default injectIntl(ViewImageModal);
-- 
cgit v1.2.3-1-g7c22