Animated GIF play support

Fixed #198
2014-04-17 19:06:00 -04:00 · 2014-04-17 19:06:00 -04:00 · e95bdc88d6
commit e95bdc88d6
parent f119683cee
7 changed files with 283 additions and 95 deletions
--- a/app/css/app.css
+++ b/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;
  }
 }
+
--- a/app/js/directives.js
+++ b/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 {
--- a/app/js/services.js
+++ b/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,23 +2421,26 @@ angular.module('myApp.services', [])
      downloadPromise.then(function (url) {
        delete historyDoc.progress;

-        if (popup) {
-          window.open(url, '_blank');
-          return
+        historyDoc.url = url;
+
+        switch (action) {
+          case 1:
+            window.open(url, '_blank');
+
+          default:
+            var a = $('<a>Download</a>')
+                      .css({position: 'absolute', top: 1, left: 1})
+                      .attr('href', url)
+                      .attr('target', '_blank')
+                      .attr('download', doc.file_name)
+                      .appendTo('body');
+
+            a[0].dataset.downloadurl = [doc.mime_type, doc.file_name, url].join(':');
+            a[0].click();
+            $timeout(function () {
+              a.remove();
+            }, 100);
        }
-
-        var a = $('<a>Download</a>')
-                  .css({position: 'absolute', top: 1, left: 1})
-                  .attr('href', url)
-                  .attr('target', '_blank')
-                  .attr('download', doc.file_name)
-                  .appendTo('body');
-
-        a[0].dataset.downloadurl = [doc.mime_type, doc.file_name, url].join(':');
-        a[0].click();
-        $timeout(function () {
-          a.remove();
-        }, 100);
      }, function (e) {
        console.log('document download failed', e);
        historyDoc.progress.enabled = false;
--- a/app/partials/full_gif.html
+++ b/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>
--- a/app/partials/full_photo.html
+++ b/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>
--- a/app/partials/full_video.html
+++ b/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>
--- a/app/partials/message.html
+++ b/app/partials/message.html
@ -132,36 +132,42 @@
            </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}">
-              <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
-                  class="im_message_document_thumb"
-                  my-load-thumb
-                  thumb="historyMessage.media.document.thumb"
-                />
-              </div>
-            </a>
+          <div ng-switch-when="messageMediaDocument" bo-switch="historyMessage.media.document.isSpecial">

-            <div class="im_message_document_info">
-              <div class="im_message_document_name_wrap">
-                <span class="im_message_document_name" bo-bind="historyMessage.media.document.file_name"></span>
-                <span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled" bo-bind="historyMessage.media.document.size | formatSize"></span>
-                <span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled" ng-bind="historyMessage.media.document.progress | formatSizeProgress"></span>
-              </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>
-              </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>
-                <div class="im_message_download_progress_wrap">
-                  <div class="progress tg_down_progress">
-                    <div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.document.progress.percent + '%'}"></div>
+            <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
+                    class="im_message_document_thumb"
+                    my-load-thumb
+                    thumb="historyMessage.media.document.thumb"
+                  />
+                </div>
+              </a>
+
+              <div class="im_message_document_info">
+                <div class="im_message_document_name_wrap">
+                  <span class="im_message_document_name" bo-bind="historyMessage.media.document.file_name"></span>
+                  <span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled" bo-bind="historyMessage.media.document.size | formatSize"></span>
+                  <span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled" ng-bind="historyMessage.media.document.progress | formatSizeProgress"></span>
+                </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, 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>
+                  <div class="im_message_download_progress_wrap">
+                    <div class="progress tg_down_progress">
+                      <div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.document.progress.percent + '%'}"></div>
+                    </div>
                  </div>
                </div>
              </div>
+
            </div>
          </div>