Browse Source

Improved gif download progress

master
Igor Zhukov 8 years ago
parent
commit
e241dd2785
  1. 15
      app/js/directives.js
  2. 3
      app/js/lib/config.js
  3. 12
      app/js/lib/mtproto_wrapper.js
  4. 42
      app/less/app.less
  5. 5
      app/partials/desktop/full_gif.html

15
app/js/directives.js

@ -1979,7 +1979,7 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -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']) @@ -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']) @@ -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 stroke = width * 0.14;
var radius = width / 2 * 0.86;
var stroke = width / 2 * 0.14;
var center = width / 2;
$(svgEl).attr('width', width);

3
app/js/lib/config.js

@ -36,7 +36,8 @@ Config.Modes = { @@ -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 = {

12
app/js/lib/mtproto_wrapper.js

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

42
app/less/app.less

@ -427,6 +427,7 @@ a { @@ -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 { @@ -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-top: 3px;
max-width: 100%;
margin: 0 auto;
top: 50%;
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 { @@ -3585,13 +3605,13 @@ h5 {
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_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;

5
app/partials/desktop/full_gif.html

@ -4,10 +4,7 @@ @@ -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 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 ng-switch-default class="img_gif_label">GIF</div>
</div>
<div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">

Loading…
Cancel
Save