r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Animated GIF play support 

Fixed #198
master
Igor Zhukov 11 years ago
parent
f119683cee
commit
e95bdc88d6
7 changed files with 283 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 83
      app/css/app.css
  2. 117
      app/js/directives.js
  3. 50
      app/js/services.js
  4. 25
      app/partials/full_gif.html
  5. 19
      app/partials/full_photo.html
  6. 26
      app/partials/full_video.html
  7. 58
      app/partials/message.html

83
app/css/app.css
Unescape View File

@ -1338,6 +1338,25 @@ div.im_message_video_thumb { @@ -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 @@ -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 @@ -3027,3 +3109,4 @@ ce671b orange
opacity: 0;
}
}

117
app/js/directives.js
Unescape View File

@ -299,7 +299,8 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -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']) @@ -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']) @@ -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']) @@ -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 {

50
app/js/services.js
Unescape View File

@ -2339,8 +2339,9 @@ angular.module('myApp.services', []) @@ -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', []) @@ -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', []) @@ -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;

25
app/partials/full_gif.html
Unescape View File

@ -0,0 +1,25 @@ @@ -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>

19
app/partials/full_photo.html
Unescape View File

@ -0,0 +1,19 @@ @@ -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>

26
app/partials/full_video.html
Unescape View File

@ -0,0 +1,26 @@ @@ -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>

58
app/partials/message.html
Unescape View File

@ -132,36 +132,42 @@ @@ -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 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, 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 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>

Write Preview
Loading…
Cancel
Save