From e95bdc88d64cd56e000b3006d8b507f4848dcad9 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Thu, 17 Apr 2014 19:06:00 -0400 Subject: [PATCH] Animated GIF play support Fixed #198 --- app/css/app.css | 83 +++++++++++++++++++++++++ app/js/directives.js | 117 +++++++++++++++++++++-------------- app/js/services.js | 50 ++++++++------- app/partials/full_gif.html | 25 ++++++++ app/partials/full_photo.html | 19 ++++++ app/partials/full_video.html | 26 ++++++++ app/partials/message.html | 58 +++++++++-------- 7 files changed, 283 insertions(+), 95 deletions(-) create mode 100644 app/partials/full_gif.html create mode 100644 app/partials/full_photo.html create mode 100644 app/partials/full_video.html diff --git a/app/css/app.css b/app/css/app.css index 697420c2..2088abad 100644 --- 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; } } + diff --git a/app/js/directives.js b/app/js/directives.js index 81d1a3a1..6b64c531 100644 --- 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: - '
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ - \ - \ - \ -
\ -
\ -
\ -
{{error.text}}
\ -
\ -
', + templateUrl: 'partials/full_photo.html', scope: { fullPhoto: '=', thumbLocation: '=' @@ -780,33 +762,7 @@ angular.module('myApp.directives', ['myApp.filters']) return { link: link, transclude: true, - template: - '
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ - \ -
\ -
\ - \ - \ -
\ -
\ -
\ -
\ -
\ -
', + 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 { diff --git a/app/js/services.js b/app/js/services.js index df664869..4c470419 100644 --- 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 = $('Download') + .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 = $('Download') - .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; diff --git a/app/partials/full_gif.html b/app/partials/full_gif.html new file mode 100644 index 00000000..8069858c --- /dev/null +++ b/app/partials/full_gif.html @@ -0,0 +1,25 @@ + + +
+ + + + +
+ +
+ +
+
+
+
+
+ +
+
GIF
+
+
+ +
+ + \ No newline at end of file diff --git a/app/partials/full_photo.html b/app/partials/full_photo.html new file mode 100644 index 00000000..1c26c433 --- /dev/null +++ b/app/partials/full_photo.html @@ -0,0 +1,19 @@ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
\ No newline at end of file diff --git a/app/partials/full_video.html b/app/partials/full_video.html new file mode 100644 index 00000000..c06f6ad7 --- /dev/null +++ b/app/partials/full_video.html @@ -0,0 +1,26 @@ +
+
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/app/partials/message.html b/app/partials/message.html index 754a0eb7..76a300e8 100644 --- a/app/partials/message.html +++ b/app/partials/message.html @@ -132,36 +132,42 @@ -
- - -
- -
- +
+ +
+ +
+ + +
+ +
+ -
-
- - - -
-
- Download - Open -
-
- Cancel -
-
-
+
+
+ + + +
+
+ Download + Open +
+
+ Cancel +
+
+
+
+