From d167e18f0048344c54685a08c19113a84a995ed9 Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Sat, 17 Oct 2015 01:58:34 +0200
Subject: PLT-616: Enable playing of animated GIF in thumbnails and preview

---
 web/react/components/view_image.jsx | 70 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

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

diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index 322e68c17..c8356b2fa 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -38,7 +38,10 @@ export default class ViewImageModal extends React.Component {
             progress: progress,
             images: {},
             fileSizes: {},
-            showFooter: false
+            fileMimes: {},
+            showFooter: false,
+            isPlaying: {},
+            isLoading: {}
         };
     }
     handleNext(e) {
@@ -122,6 +125,28 @@ export default class ViewImageModal extends React.Component {
             this.setState({loaded});
         }
     }
+    playGif(e, filename, fileUrl) {
+        var isLoading = this.state.isLoading;
+        var isPlaying = this.state.isPlaying;
+
+        isLoading[filename] = fileUrl;
+        this.setState({isLoading});
+
+        var img = new Image();
+        img.load(fileUrl);
+        img.onload = () => {
+            delete isLoading[filename];
+            isPlaying[filename] = fileUrl;
+            this.setState({isPlaying, isLoading});
+        };
+        img.onError = () => {
+            delete isLoading[filename];
+            this.setState({isLoading});
+        };
+
+        e.stopPropagation();
+        e.preventDefault();
+    }
     componentDidMount() {
         $(window).on('keyup', this.handleKeyPress);
 
@@ -154,6 +179,10 @@ export default class ViewImageModal extends React.Component {
         var fileType = Utils.getFileType(fileInfo.ext);
 
         if (fileType === 'image') {
+            if (typeof this.state.isPlaying[filename] !== 'undefined') {
+                return this.state.isPlaying[filename];
+            }
+
             // 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];
@@ -189,12 +218,51 @@ export default class ViewImageModal extends React.Component {
             var fileType = Utils.getFileType(fileInfo.ext);
 
             if (fileType === 'image') {
+                if (!(filename in this.state.fileMimes)) {
+                    Client.getFileInfo(
+                        filename,
+                        (data) => {
+                            if (this.canSetState) {
+                                var fileMimes = this.state.fileMimes;
+                                fileMimes[filename] = data.mime;
+                                this.setState(fileMimes);
+                            }
+                        },
+                        () => {}
+                    );
+                }
+
+                var playButton = '';
+                if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading) && !(filename in this.state.isPlaying)) {
+                    playButton = (
+                        <div
+                            className='file-play-button'
+                            onClick={(e) => this.playGif(e, filename, fileUrl)}
+                        >
+                            {"►"}
+                        </div>
+                    );
+                }
+
+                var loadingIndicator = '';
+                if (this.state.isLoading[filename] === fileUrl) {
+                    loadingIndicator = (
+                        <img
+                            className='spinner file__loading'
+                            src='/static/images/load.gif'
+                        />
+                    );
+                    playButton = '';
+                }
+
                 // image files just show a preview of the file
                 content = (
                     <a
                         href={fileUrl}
                         target='_blank'
                     >
+                        {loadingIndicator}
+                        {playButton}
                         <img
                             style={{maxHeight: this.state.imgHeight}}
                             ref='image'
-- 
cgit v1.2.3-1-g7c22


From cd5df514c7d3130c9765a8160dfd31abccb8b741 Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Mon, 19 Oct 2015 22:30:00 +0200
Subject: Add stop button to stop animated gifs

---
 web/react/components/view_image.jsx | 45 ++++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 13 deletions(-)

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

diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index c8356b2fa..fbe32cb07 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -147,6 +147,14 @@ export default class ViewImageModal extends React.Component {
         e.stopPropagation();
         e.preventDefault();
     }
+    stopGif(e, filename) {
+        var isPlaying = this.state.isPlaying;
+        delete isPlaying[filename];
+        this.setState({isPlaying});
+
+        e.stopPropagation();
+        e.preventDefault();
+    }
     componentDidMount() {
         $(window).on('keyup', this.handleKeyPress);
 
@@ -179,7 +187,7 @@ export default class ViewImageModal extends React.Component {
         var fileType = Utils.getFileType(fileInfo.ext);
 
         if (fileType === 'image') {
-            if (typeof this.state.isPlaying[filename] !== 'undefined') {
+            if (filename in this.state.isPlaying) {
                 return this.state.isPlaying[filename];
             }
 
@@ -232,16 +240,27 @@ export default class ViewImageModal extends React.Component {
                     );
                 }
 
-                var playButton = '';
-                if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading) && !(filename in this.state.isPlaying)) {
-                    playButton = (
-                        <div
-                            className='file-play-button'
-                            onClick={(e) => this.playGif(e, filename, fileUrl)}
-                        >
-                            {"►"}
-                        </div>
-                    );
+                var playbackControls = '';
+                if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading)) {
+                    if (filename in this.state.isPlaying) {
+                        playbackControls = (
+                            <div
+                                className='file-playback-controls stop'
+                                onClick={(e) => this.stopGif(e, filename)}
+                            >
+                                {"◼"}
+                            </div>
+                        );
+                    } else {
+                        playbackControls = (
+                            <div
+                                className='file-playback-controls play'
+                                onClick={(e) => this.playGif(e, filename, fileUrl)}
+                            >
+                                {"►"}
+                            </div>
+                        );
+                    }
                 }
 
                 var loadingIndicator = '';
@@ -252,7 +271,7 @@ export default class ViewImageModal extends React.Component {
                             src='/static/images/load.gif'
                         />
                     );
-                    playButton = '';
+                    playbackControls = '';
                 }
 
                 // image files just show a preview of the file
@@ -262,7 +281,7 @@ export default class ViewImageModal extends React.Component {
                         target='_blank'
                     >
                         {loadingIndicator}
-                        {playButton}
+                        {playbackControls}
                         <img
                             style={{maxHeight: this.state.imgHeight}}
                             ref='image'
-- 
cgit v1.2.3-1-g7c22


From b9c637ec82d28684029573af119606575f4978d0 Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Wed, 21 Oct 2015 18:15:04 +0200
Subject: Change stop symbol to another one since chrome-win can't display it

---
 web/react/components/view_image.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index fbe32cb07..bea6ce7a5 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -248,7 +248,7 @@ export default class ViewImageModal extends React.Component {
                                 className='file-playback-controls stop'
                                 onClick={(e) => this.stopGif(e, filename)}
                             >
-                                {"◼"}
+                                {"■"}
                             </div>
                         );
                     } else {
-- 
cgit v1.2.3-1-g7c22

