Improved gif download progress

app/js/directives.js

@@ -1979,7 +1979,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
-  .directive('myLoadGif', function(AppDocsManager) {
+  .directive('myLoadGif', function(AppDocsManager, $timeout) {
 
     return {
       link: link,
@@ -1996,6 +1996,15 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       var downloadPromise = false;
 
+      // Demo
+      // $scope.document.progress = {enabled: true, percent: 30};
+      // $timeout(function () {
+      //   $scope.document.progress.percent = 60;
+      // }, 3000);
+      // $timeout(function () {
+      //   $scope.document.progress.percent = 100;
+      // }, 10000);
+
       $scope.isActive = false;
 
       $scope.toggle = function (e) {
@@ -3248,8 +3257,8 @@ angular.module('myApp.directives', ['myApp.filters'])
         var bar = $('.progress-arc-bar', element);
 
         var width = attrs.width || 40;
-        var radius = width * 0.86;
+        var radius = width / 2 * 0.86;
-        var stroke = width * 0.14;
+        var stroke = width / 2 * 0.14;
         var center = width / 2;
 
         $(svgEl).attr('width', width);

app/js/lib/config.js

@@ -36,7 +36,8 @@ Config.Modes = {
   webcrypto: location.search.indexOf('webcrypto=0')== -1,
   packed: location.protocol == 'app:' || location.protocol == 'chrome-extension:',
   ios_standalone: window.navigator.standalone && navigator.userAgent.match(/iOS|iPhone|iPad/),
-  chrome_packed: window.chrome && chrome.app && chrome.app.window && true || false
+  chrome_packed: window.chrome && chrome.app && chrome.app.window && true || false,
+  memory_only: false
 };
 
 Config.Navigator = {

app/js/lib/mtproto_wrapper.js

@@ -384,12 +384,14 @@ angular.module('izhukov.mtproto.wrapper', ['izhukov.utils', 'izhukov.mtproto'])
   }
 
   function getFileStorage () {
+    if (!Config.Modes.memory_only) {
       if (TmpfsFileStorage.isAvailable()) {
         return TmpfsFileStorage;
       }
       if (IdbFileStorage.isAvailable()) {
         return IdbFileStorage;
       }
+    }
     return MemoryFileStorage;
   }
 

app/less/app.less

@@ -427,6 +427,7 @@ a {
 }
 .progress-arc .progress-arc-bar {
   stroke: #FFF;
+  stroke: rgba(255,255,255,0.95);
   transform-origin: center center;
   transition: stroke-dasharray 500ms linear;
 
@@ -3553,12 +3554,31 @@ h5 {
 }
 
 /* Gif documents */
-.img_gif_with_progress_wrap {
+.img_gif_image_wrap {
   position: relative;
+}
+.img_gif_meta {
+  width: 40px;
+  height: 40px;
+  line-height: 0;
+  position: absolute;
+  z-index: 2;
+  border-radius: 50%;
   overflow: hidden;
-  float: left;
+  margin: 0 auto;
-  margin-top: 3px;
+  top: 50%;
-  max-width: 100%;
+  left: 50%;
+  margin-left: -20px;
+  margin-top: -20px;
+}
+.img_gif_label {
+  font-weight: bold;
+  color: #FFF;
+  display: block;
+  line-height: 40px;
+  font-size: 15px;
+  background: rgba(0,0,0,0.3);
+  text-align: center;
 }
 
 .img_gif_thumb {
@@ -3585,13 +3605,13 @@ h5 {
   right: 0;
   padding: 4px;
 }
-.img_gif_label,
+// .img_gif_label,
-.img_gif_size {
+// .img_gif_size {
-  padding: 1px 8px;
+//   padding: 1px 8px;
-  background: rgba(0,0,0,0.5);
+//   background: rgba(0,0,0,0.5);
-  border-radius: 3px;
+//   border-radius: 3px;
-  overflow: hidden;
+//   overflow: hidden;
-}
+// }
 
 .img_gif_progress_wrap {
   position: absolute;

app/partials/desktop/full_gif.html

@@ -4,10 +4,7 @@
 
     <div class="img_gif_meta" ng-show="!isActive" ng-switch="document.progress.enabled">
       <div ng-switch-when="true" my-arc-progress="document.progress.percent"></div>
-      <div ng-switch-default class="img_gif_info_wrap">
+      <div ng-switch-default class="img_gif_label">GIF</div>
-        <div class="img_gif_label pull-left">GIF</div>
-        <div ng-if="!document.downloaded" class="img_gif_size pull-right" ng-bind="::document.size | formatSize"></div>
-      </div>
     </div>
 
     <div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">