Merge pull request #2060 from ZBoxApp/PLT-7-channel

PLT-7: Refactoring frontend (chunk 11)

1 files changed, 24 insertions, 4 deletions

diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index d11f8a21c..90885e495 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -9,10 +9,20 @@ 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;
 
-export default class ViewImageModal extends React.Component {
+const holders = defineMessages({
+    loading: {
+        id: 'view_image.loading',
+        defaultMessage: 'Loading '
+    }
+});
+
+class ViewImageModal extends React.Component {
     constructor(props) {
         super(props);
 
@@ -235,6 +245,7 @@ export default class ViewImageModal extends React.Component {
                         fileUrl={fileUrl}
                         fileInfo={this.state.fileInfo}
                         maxHeight={this.state.imgHeight}
+                        formatMessage={this.props.intl.formatMessage}
                     />
                 );
             } else {
@@ -243,6 +254,7 @@ export default class ViewImageModal extends React.Component {
                         filename={filename}
                         fileUrl={fileUrl}
                         fileInfo={fileInfo}
+                        formatMessage={this.props.intl.formatMessage}
                     />
                 );
             }
@@ -250,7 +262,12 @@ export default class ViewImageModal extends React.Component {
             // 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} />;
+            content = (
+                <LoadingImagePreview
+                    progress={progress}
+                    loading={this.props.intl.formatMessage(holders.loading)}
+                />
+            );
         }
 
         let leftArrow = null;
@@ -335,6 +352,7 @@ ViewImageModal.defaultProps = {
     startId: 0
 };
 ViewImageModal.propTypes = {
+    intl: intlShape.isRequired,
     show: React.PropTypes.bool.isRequired,
     onModalDismissed: React.PropTypes.func.isRequired,
     filenames: React.PropTypes.array,
@@ -344,12 +362,12 @@ ViewImageModal.propTypes = {
     startId: React.PropTypes.number
 };
 
-function LoadingImagePreview({progress}) {
+function LoadingImagePreview({progress, loading}) {
     let progressView = null;
     if (progress) {
         progressView = (
             <span className='loader-percent'>
-                {'Loading ' + progress + '%'}
+                {loading + progress + '%'}
             </span>
         );
     }
@@ -386,3 +404,5 @@ function ImagePreview({filename, fileUrl, fileInfo, maxHeight}) {
         </a>
     );
 }
+
+export default injectIntl(ViewImageModal);
\ No newline at end of file