Animated GIF play support

Fixed #198

app/css/app.css

@@ -1338,6 +1338,25 @@ div.im_message_video_thumb {
     height: 100%;
 }
 
+.im_message_gif_wrap {
+  position: relative;
+}
+.im_message_gif_btn {
+  color: #FFF;
+  font-style: normal;
+  font-weight: bold;
+  position: absolute;
+  display: inline-block;
+  top: 50%;
+  left: 50%;
+  margin-left: -22px;
+  margin-top: -21px;
+  border: 2px solid #FFF;
+  border-radius: 20px;
+  padding: 10px;
+  z-index: 1;
+}
+
 .im_message_document,
 .im_message_audio,
 .im_message_upload_file {
@@ -2941,6 +2960,69 @@ ce671b orange
   transition: margin-top linear 0.2s;
 }
 
+
+/* Gif documents */
+.img_gif_with_progress_wrap {
+  position: relative;
+  overflow: hidden;
+  float: left;
+  margin-top: 3px;
+}
+
+.img_gif_thumb {
+  -webkit-filter: blur(2px);
+  -moz-filter: blur(2px);
+  -o-filter: blur(2px);
+  -ms-filter: blur(2px);
+  filter: blur(2px);
+  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
+}
+
+.img_gif_image {
+  max-width: 100%;
+}
+/*.img_gif_image_wrap img {
+  overflow: hidden;
+  border-radius: 2px;
+}*/
+
+.img_gif_info_wrap {
+  color: #FFF;
+  font-size: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 4px;
+}
+.img_gif_label,
+.img_gif_size {
+  padding: 1px 8px;
+  background: rgba(0,0,0,0.5);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.img_gif_progress_wrap {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.img_gif_progress_wrap .tg_progress {
+  border-color: rgba(0,0,0, 0.6);
+  border-width: 8px;
+  height: 18px;
+  border-radius: 0;
+}
+.img_gif_progress_wrap .progress-bar {
+  background: #FFF;
+  height: 2px;
+}
+
+
+
+/* Loading dots animation */
 .loading_dots
 {
   display: inline-block;
@@ -3027,3 +3109,4 @@ ce671b orange
     opacity: 0;
   }
 }
+

app/js/directives.js

@@ -299,7 +299,8 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       $scope.$on('ui_editor_resize', updateSizes);
       $scope.$on('ui_height', function () {
-        updateSizes();
+        onContentLoaded(updateSizes);
+        // updateSizes();
       });
 
       var atBottom = true;
@@ -682,26 +683,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     return {
       link: link,
       transclude: true,
-      template:
-        '<div class="img_fullsize_with_progress_wrap"">\
-          <div class="img_fullsize_progress_overlay" ng-show="progress.enabled">\
-            <div class="img_fullsize_progress_wrap"">\
-              <div class="img_fullsize_progress progress tg_progress" ng-show="progress.percent > 0">\
-                <div class="progress-bar progress-bar-success" ng-style="{width: progress.percent + \'%\'}">\
-                </div>\
-              </div>\
-            </div>\
-          </div>\
-          <div class="photo_full_wrap">\
-            <a class="photo_modal_image">\
-              <img class="photo_modal_image"/>\
-            </a>\
-          </div>\
-          <div class="photo_modal_error_wrap" ng-if="error">\
-            <div class="photo_modal_error" ng-if="error.html" ng-bind-html="error.html"></div>\
-            <div class="photo_modal_error" ng-if="error.text">{{error.text}}</div>\
-          </div>\
-        </div>',
+      templateUrl: 'partials/full_photo.html',
       scope: {
         fullPhoto: '=',
         thumbLocation: '='
@@ -780,33 +762,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     return {
       link: link,
       transclude: true,
-      template:
-        '<div class="img_fullsize_with_progress_wrap" ng-style="{width: video.full.width + \'px\', height: video.full.height + \'px\'}">\
-          <div class="img_fullsize_progress_overlay" ng-show="progress.enabled">\
-            <div class="img_fullsize_progress_wrap" ng-style="{width: video.full.width + \'px\', height: video.full.height + \'px\'}">\
-              <div class="img_fullsize_progress progress tg_progress">\
-                <div class="progress-bar progress-bar-success" style="width: {{progress.percent}}%"></div>\
-              </div>\
-            </div>\
-          </div>\
-          <div class="img_fullsize_wrap" ng-if="!player.src">\
-            <img\
-              class="img_fullsize"\
-              my-load-thumb\
-              thumb="video.fullThumb"\
-            />\
-          </div>\
-          <div class="video_full_player" ng-if="player.src">\
-            <embed ng-src="{{player.src}}" width="{{video.full.width}}" height="{{video.full.height}}" autoplay="true" CONTROLLER="TRUE" SHOWCONTROLS="TRUE" controller="true" loop="false" pluginspace="http://www.apple.com/quicktime/" ng-if="player.quicktime"/>\
-            <video width="{{video.full.width}}" height="{{video.full.height}}" controls autoplay  ng-if="!player.quicktime">\
-              <source ng-src="{{player.src}}" type="video/mp4">\
-            </video>\
-          </div>\
-          <div class="video_full_error_wrap" ng-if="error">\
-            <div class="video_full_error" ng-if="error.html" ng-bind-html="error.html"></div>\
-            <div class="video_full_error" ng-if="error.text" ng-bind="error.text"></div>\
-          </div>\
-        </div>',
+      templateUrl: 'partials/full_video.html',
       scope: {
         video: '='
       }
@@ -862,6 +818,71 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
+  .directive('myLoadGif', function(MtpApiFileManager) {
+
+    return {
+      link: link,
+      templateUrl: 'partials/full_gif.html',
+      scope: {
+        document: '='
+      }
+    };
+
+    function link ($scope, element, attrs) {
+
+      var downloadPromise = false,
+          inputFileLocation = {
+            _: 'inputDocumentFileLocation',
+            id: $scope.document.id,
+            access_hash: $scope.document.access_hash
+          };
+
+      $scope.isActive = false;
+      $scope.document.url = MtpApiFileManager.getCachedFile(inputFileLocation);
+
+      /*return $scope.document.progress = {enabled: true, percent: 30, total: $scope.document.size};*/
+
+      $scope.toggle = function () {
+        if ($scope.document.url) {
+          $scope.isActive = !$scope.isActive;
+          $scope.$emit('ui_height');
+          return;
+        }
+
+        if (downloadPromise) {
+          downloadPromise.cancel();
+          downloadPromise = false;
+          return;
+        }
+
+        $scope.document.progress = {enabled: true, percent: 1, total: $scope.document.size};
+
+        downloadPromise = MtpApiFileManager.downloadFile(
+          $scope.document.dc_id,
+          inputFileLocation,
+          $scope.document.size,
+          null,
+          {mime: $scope.document.mime_type}
+        );
+
+        downloadPromise.then(function (url) {
+          $scope.document.url = url;
+          $scope.isActive = true;
+          delete $scope.document.progress;
+          console.log('file save done');
+          $scope.$emit('ui_height');
+        }, function () {
+          $scope.document.progress.enabled = false;
+        }, function (progress) {
+          console.log('dl progress', progress);
+          $scope.document.progress.done = progress.done;
+          $scope.document.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
+          $rootScope.$broadcast('history_update');
+        })
+      }
+    }
+  })
+
   .directive('myMapPoint', function(ExternalResourcesManager) {
 
     return {

app/js/services.js

@@ -2339,8 +2339,9 @@ angular.module('myApp.services', [])
     }
 
     var doc = angular.copy(docs[docID]),
-        width = 100,
-        height = 100,
+        isGif = doc.mime_type == 'image/gif',
+        width = isGif ? 260 : 100,
+        height = isGif ? 260 : 100,
         thumbPhotoSize = doc.thumb,
         thumb = {
           // placeholder: 'img/placeholders/DocThumbConversation.jpg',
@@ -2363,18 +2364,22 @@ angular.module('myApp.services', [])
     doc.thumb = thumb;
 
     doc.canDownload = !(window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry);
-    doc.withPreview = doc.canDownload && doc.mime_type.match(/^(image\/|application\/pdf)/);
+    doc.withPreview = doc.canDownload && doc.mime_type.match(/^(image\/|application\/pdf)/) ? 1 : 0;
+
+    if (isGif) {
+      doc.isSpecial = 'gif';
+    }
 
     return docsForHistory[docID] = doc;
   }
 
-  function downloadDoc (docID, accessHash, popup) {
+  function downloadDoc (docID, action) {
     var doc = docs[docID],
         historyDoc = docsForHistory[docID] || doc || {},
         inputFileLocation = {
           _: 'inputDocumentFileLocation',
           id: docID,
-          access_hash: accessHash || doc.access_hash
+          access_hash: doc.access_hash
         };
 
     historyDoc.progress = {enabled: true, percent: 1, total: doc.size};
@@ -2416,11 +2421,13 @@ angular.module('myApp.services', [])
       downloadPromise.then(function (url) {
         delete historyDoc.progress;
 
-        if (popup) {
+        historyDoc.url = url;
+
+        switch (action) {
+          case 1:
             window.open(url, '_blank');
-          return
-        }
 
+          default:
             var a = $('<a>Download</a>')
                       .css({position: 'absolute', top: 1, left: 1})
                       .attr('href', url)
@@ -2433,6 +2440,7 @@ angular.module('myApp.services', [])
             $timeout(function () {
               a.remove();
             }, 100);
+        }
       }, function (e) {
         console.log('document download failed', e);
         historyDoc.progress.enabled = false;

app/partials/full_gif.html

@@ -0,0 +1,25 @@
+<a class="img_gif_with_progress_wrap" ng-click="toggle()">
+
+  <div class="img_gif_image_wrap" ng-switch="document.url &amp;&amp; isActive">
+
+    <img ng-switch-when="true" class="img_gif_image" ng-src="{{document.url}}" />
+    <img ng-switch-default class="img_gif_thumb" my-load-thumb thumb="document.thumb" />
+
+  </div>
+
+  <div ng-show="!isActive" ng-switch="document.progress.enabled">
+
+    <div ng-switch-when="true" class="img_gif_progress_wrap">
+      <div class="img_gif_progress progress tg_progress">
+        <div class="progress-bar progress-bar-success" ng-style="{width: document.progress.percent + '%'}"></div>
+      </div>
+    </div>
+
+    <div ng-switch-default class="img_gif_info_wrap">
+      <div class="img_gif_label pull-left">GIF</div>
+      <div ng-if="!document.url" class="img_gif_size pull-right" bo-bind="document.size | formatSize"></div>
+    </div>
+
+  </div>
+
+</a>

app/partials/full_photo.html

@@ -0,0 +1,19 @@
+<div class="img_fullsize_with_progress_wrap">
+  <div class="img_fullsize_progress_overlay" ng-show="progress.enabled">
+    <div class="img_fullsize_progress_wrap">
+      <div class="img_fullsize_progress progress tg_progress" ng-show="progress.percent > 0">
+        <div class="progress-bar progress-bar-success" ng-style="{width: progress.percent + '%'}">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="photo_full_wrap">
+    <a class="photo_modal_image">
+      <img class="photo_modal_image"/>
+    </a>
+  </div>
+  <div class="photo_modal_error_wrap" ng-if="error">
+    <div class="photo_modal_error" ng-if="error.html" ng-bind-html="error.html"></div>
+    <div class="photo_modal_error" ng-if="error.text" ng-bind="error.text"></div>
+  </div>
+</div>

app/partials/full_video.html

@@ -0,0 +1,26 @@
+<div class="img_fullsize_with_progress_wrap" ng-style="{width: video.full.width + 'px', height: video.full.height + 'px'}">
+  <div class="img_fullsize_progress_overlay" ng-show="progress.enabled">
+    <div class="img_fullsize_progress_wrap" ng-style="{width: video.full.width + 'px', height: video.full.height + 'px'}">
+      <div class="img_fullsize_progress progress tg_progress">
+        <div class="progress-bar progress-bar-success" style="width: {{progress.percent}}%"></div>
+      </div>
+    </div>
+  </div>
+  <div class="img_fullsize_wrap" ng-if="!player.src">
+    <img
+      class="img_fullsize"
+      my-load-thumb
+      thumb="video.fullThumb"
+    />
+  </div>
+  <div class="video_full_player" ng-if="player.src">
+    <embed ng-src="{{player.src}}" width="{{video.full.width}}" height="{{video.full.height}}" autoplay="true" CONTROLLER="TRUE" SHOWCONTROLS="TRUE" controller="true" loop="false" pluginspace="http://www.apple.com/quicktime/" ng-if="player.quicktime"/>
+    <video width="{{video.full.width}}" height="{{video.full.height}}" controls autoplay  ng-if="!player.quicktime">
+      <source ng-src="{{player.src}}" type="video/mp4">
+    </video>
+  </div>
+  <div class="video_full_error_wrap" ng-if="error">
+    <div class="video_full_error" ng-if="error.html" ng-bind-html="error.html"></div>
+    <div class="video_full_error" ng-if="error.text" ng-bind="error.text"></div>
+  </div>
+</div>

app/partials/message.html

@@ -132,8 +132,12 @@
             </div>
           </div>
 
-          <div ng-switch-when="messageMediaDocument" class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb}">
-            <a href="" ng-click="downloadDoc(historyMessage.media.document.id, false, historyMessage.media.document.withPreview)" ng-class="{im_message_document_link_disabled: historyMessage.media.document.progress.enabled}">
+          <div ng-switch-when="messageMediaDocument" bo-switch="historyMessage.media.document.isSpecial">
+
+            <div bo-switch-when="gif" my-load-gif document="historyMessage.media.document"></div>
+
+            <div bo-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb}">
+              <a href="" ng-click="downloadDoc(historyMessage.media.document.id, historyMessage.media.document.withPreview)" ng-class="{im_message_document_link_disabled: historyMessage.media.document.progress.enabled}">
                 <i class="icon icon-document" bo-if="!historyMessage.media.document.thumb"></i>
                 <div class="im_message_document_thumb_wrap" bo-if="historyMessage.media.document.thumb">
                   <img
@@ -152,7 +156,7 @@
                 </div>
                 <div class="im_message_document_actions" ng-if="!historyMessage.media.document.progress.enabled">
                   <a href="" ng-click="downloadDoc(historyMessage.media.document.id)">Download</a>
-                <a href="" ng-click="downloadDoc(historyMessage.media.document.id, false, true)" bo-if="historyMessage.media.document.withPreview">Open</a>
+                  <a href="" ng-click="downloadDoc(historyMessage.media.document.id, 1)" bo-if="historyMessage.media.document.withPreview">Open</a>
                 </div>
                 <div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
                   <a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.document.progress.cancel()">Cancel</a>
@@ -163,6 +167,8 @@
                   </div>
                 </div>
               </div>
+
+            </div>
           </div>