Merge pull request #1098 from florianorben/PLT-616

PLT-616: Enable playing of animated GIF in thumbnails and preview

api/file.go

@@ -23,6 +23,7 @@ import (
 	"image/jpeg"
 	"io"
 	"io/ioutil"
+	"mime"
 	"net/http"
 	"net/url"
 	"os"
@@ -331,9 +332,18 @@ func getFileInfo(c *Context, w http.ResponseWriter, r *http.Request) {
 
 	w.Header().Set("Cache-Control", "max-age=2592000, public")
 
+	var mimeType string
+	ext := filepath.Ext(filename)
+	if model.IsFileExtImage(ext) {
+		mimeType = model.GetImageMimeType(ext)
+	} else {
+		mimeType = mime.TypeByExtension(ext)
+	}
+
 	result := make(map[string]string)
 	result["filename"] = filename
 	result["size"] = size
+	result["mime"] = mimeType
 	w.Write([]byte(model.MapToJson(result)))
 }
 

web/react/components/file_attachment.jsx

@@ -10,9 +10,12 @@ export default class FileAttachment extends React.Component {
         super(props);
 
         this.loadFiles = this.loadFiles.bind(this);
+        this.playGif = this.playGif.bind(this);
+        this.stopGif = this.stopGif.bind(this);
+        this.addBackgroundImage = this.addBackgroundImage.bind(this);
 
         this.canSetState = false;
-        this.state = {fileSize: -1};
+        this.state = {fileSize: -1, mime: '', playing: false, loading: false, format: ''};
     }
     componentDidMount() {
         this.loadFiles();
@@ -28,15 +31,9 @@ export default class FileAttachment extends React.Component {
         var filename = this.props.filename;
 
         if (filename) {
-            var fileInfo = utils.splitFileLocation(filename);
+            var fileInfo = this.getFileInfoFromName(filename);
             var type = utils.getFileType(fileInfo.ext);
 
-            // 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;
-
             if (type === 'image') {
                 var self = this; // Need this reference since we use the given "this"
                 $('<img/>').attr('src', fileInfo.path + '_thumb.jpg').load(function loadWrapper(path, name) {
@@ -58,11 +55,7 @@ export default class FileAttachment extends React.Component {
                                 $(imgDiv).addClass('normal');
                             }
 
-                            var re1 = new RegExp(' ', 'g');
+                            self.addBackgroundImage(name, path);
-                            var re2 = new RegExp('\\(', 'g');
-                            var re3 = new RegExp('\\)', 'g');
-                            var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
-                            $(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg)');
                         }
                     };
                 }(fileInfo.path, filename));
@@ -93,6 +86,75 @@ export default class FileAttachment extends React.Component {
 
         return true;
     }
+    playGif(e, filename) {
+        var img = new Image();
+        var fileUrl = utils.getFileUrl(filename);
+
+        this.setState({loading: true});
+        img.load(fileUrl);
+        img.onload = () => {
+            var state = {playing: true, loading: false};
+
+            switch (true) {
+            case img.width > img.height:
+                state.format = 'landscape';
+                break;
+            case img.height > img.width:
+                state.format = 'portrait';
+                break;
+            default:
+                state.format = 'quadrat';
+                break;
+            }
+
+            this.setState(state);
+
+            // keep displaying background image for a short moment while browser is
+            // loading gif, to prevent white background flashing through
+            setTimeout(() => this.removeBackgroundImage.bind(this)(filename), 100);
+        };
+        img.onError = () => this.setState({loading: false});
+
+        e.stopPropagation();
+    }
+    stopGif(e, filename) {
+        this.setState({playing: false});
+        this.addBackgroundImage(filename);
+        e.stopPropagation();
+    }
+    getFileInfoFromName(name) {
+        var fileInfo = utils.splitFileLocation(name);
+
+        // 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;
+    }
+    addBackgroundImage(name, path) {
+        var fileUrl = path;
+
+        if (name in this.refs) {
+            if (!path) {
+                fileUrl = this.getFileInfoFromName(name).path;
+            }
+
+            var imgDiv = ReactDOM.findDOMNode(this.refs[name]);
+            var re1 = new RegExp(' ', 'g');
+            var re2 = new RegExp('\\(', 'g');
+            var re3 = new RegExp('\\)', 'g');
+            var url = fileUrl.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+
+            $(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg)');
+        }
+    }
+    removeBackgroundImage(name) {
+        if (name in this.refs) {
+            $(ReactDOM.findDOMNode(this.refs[name])).css('background-image', 'initial');
+        }
+    }
     render() {
         var filename = this.props.filename;
 
@@ -100,15 +162,71 @@ export default class FileAttachment extends React.Component {
         var fileUrl = utils.getFileUrl(filename);
         var type = utils.getFileType(fileInfo.ext);
 
-        var thumbnail;
+        var playbackControls = '';
-        if (type === 'image') {
+        var loadedFile = '';
-            thumbnail = (
+        var loadingIndicator = '';
+        if (this.state.mime === 'image/gif') {
+            playbackControls = (
                 <div
-                    ref={filename}
+                    className='file-playback-controls play'
-                    className='post__load'
+                    onClick={(e) => this.playGif(e, filename)}
-                    style={{backgroundImage: 'url(/static/images/load.gif)'}}
+                >
+                    {"►"}
+                </div>
+            );
+        }
+        if (this.state.playing) {
+            loadedFile = (
+                <img
+                    className={'file__loaded ' + this.state.format}
+                    src={fileUrl}
                 />
             );
+            playbackControls = (
+                <div
+                    className='file-playback-controls stop'
+                    onClick={(e) => this.stopGif(e, filename)}
+                >
+                    {"■"}
+                </div>
+            );
+        }
+        if (this.state.loading) {
+            loadingIndicator = (
+                <img
+                    className='spinner file__loading'
+                    src='/static/images/load.gif'
+                />
+            );
+            playbackControls = '';
+        }
+
+        var thumbnail;
+        if (type === 'image') {
+            if (this.state.playing) {
+                thumbnail = (
+                    <div
+                        ref={filename}
+                        className='post__load'
+                        style={{backgroundImage: 'url(/static/images/load.gif)'}}
+                    >
+                        {playbackControls}
+                        {loadedFile}
+                    </div>
+                );
+            } else {
+                thumbnail = (
+                    <div
+                        ref={filename}
+                        className='post__load'
+                        style={{backgroundImage: 'url(/static/images/load.gif)'}}
+                    >
+                        {loadingIndicator}
+                        {playbackControls}
+                        {loadedFile}
+                    </div>
+                );
+            }
         } else {
             thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>;
         }
@@ -119,7 +237,7 @@ export default class FileAttachment extends React.Component {
                 filename,
                 function success(data) {
                     if (this.canSetState) {
-                        this.setState({fileSize: parseInt(data.size, 10)});
+                        this.setState({fileSize: parseInt(data.size, 10), mime: data.mime});
                     }
                 }.bind(this),
                 function error() {}

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,36 @@ 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();
+    }
+    stopGif(e, filename) {
+        var isPlaying = this.state.isPlaying;
+        delete isPlaying[filename];
+        this.setState({isPlaying});
+
+        e.stopPropagation();
+        e.preventDefault();
+    }
     componentDidMount() {
         $(window).on('keyup', this.handleKeyPress);
 
@@ -154,6 +187,10 @@ export default class ViewImageModal extends React.Component {
         var fileType = Utils.getFileType(fileInfo.ext);
 
         if (fileType === 'image') {
+            if (filename in this.state.isPlaying) {
+                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 +226,62 @@ 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 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 = '';
+                if (this.state.isLoading[filename] === fileUrl) {
+                    loadingIndicator = (
+                        <img
+                            className='spinner file__loading'
+                            src='/static/images/load.gif'
+                        />
+                    );
+                    playbackControls = '';
+                }
+
                 // image files just show a preview of the file
                 content = (
                     <a
                         href={fileUrl}
                         target='_blank'
                     >
+                        {loadingIndicator}
+                        {playbackControls}
                         <img
                             style={{maxHeight: this.state.imgHeight}}
                             ref='image'

web/react/utils/utils.jsx

@@ -544,6 +544,7 @@ export function applyTheme(theme) {
     if (theme.buttonBg) {
         changeCss('.btn.btn-primary', 'background:' + theme.buttonBg, 1);
         changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1);
+        changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
     }
 
     if (theme.buttonColor) {

web/sass-files/sass/partials/_files.scss

@@ -133,12 +133,34 @@
     height: 100%;
     background-color: #FFF;
     background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
     &.small {
       background-position: center;
     }
     &.normal {
       background-position: top left;
     }
+    .spinner.file__loading {
+        position: absolute;
+        left: 50%;
+        margin-left: -16px;
+        top: 50%;
+        margin-top: -16px;
+    }
+    .file__loaded {
+        max-width: initial;
+        &.landscape, &.quadrat {
+            height: 100px;
+        }
+        &.portrait {
+            width: 120px;
+        }
+    }
+    &:hover .file-playback-controls.stop {
+        @include opacity(1);
+    }
   }
   .post-image__thumbnail {
     float: left;
@@ -215,3 +237,20 @@
     }
   }
 }
+
+.file-playback-controls {
+    position: absolute;
+    right: 5px;
+    bottom: 0;
+    font-size: 22px;
+    cursor: pointer;
+    z-index: 2;
+    -webkit-transition: opacity 0.6s;
+    -moz-transition: opacity 0.6s;
+    -o-transition: opacity 0.6s;
+    transition: opacity 0.6s;
+
+    &.stop {
+        @include opacity(0);
+    }
+}

web/sass-files/sass/partials/_modal.scss

@@ -228,11 +228,24 @@
 				background: #FFF;
 				display: table-cell;
 				vertical-align: middle;
+				position: relative;
+
+				&:hover .file-playback-controls.stop {
+			        @include opacity(1);
+			    }
 			}
 			img {
 				max-width: 100%;
 				max-height: 100%;
 			}
+			.spinner.file__loading {
+				z-index: 2;
+				position: absolute;
+				left: 50%;
+				margin-left: -16px;
+				top: 50%;
+				margin-top: -16px;
+			}
 		}
 		.modal-content{
 			box-shadow: none;

web/sass-files/sass/partials/_responsive.scss

@@ -758,6 +758,10 @@
     .post-comments {
         padding: 9px 21px 10px 10px !important;
     }
+
+    .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop {
+        @include opacity(1);
+    }
 }
 @media screen and (max-width: 640px) {
     .access-history__table {