Browse Source

Animated GIF play support

Fixed #198
master
Igor Zhukov 11 years ago
parent
commit
e95bdc88d6
  1. 83
      app/css/app.css
  2. 117
      app/js/directives.js
  3. 24
      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. 12
      app/partials/message.html

83
app/css/app.css

@ -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

@ -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 {

24
app/js/services.js

@ -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,11 +2421,13 @@ angular.module('myApp.services', []) @@ -2416,11 +2421,13 @@ angular.module('myApp.services', [])
downloadPromise.then(function (url) {
delete historyDoc.progress;
if (popup) {
historyDoc.url = url;
switch (action) {
case 1:
window.open(url, '_blank');
return
}
default:
var a = $('<a>Download</a>')
.css({position: 'absolute', top: 1, left: 1})
.attr('href', url)
@ -2433,6 +2440,7 @@ angular.module('myApp.services', []) @@ -2433,6 +2440,7 @@ angular.module('myApp.services', [])
$timeout(function () {
a.remove();
}, 100);
}
}, function (e) {
console.log('document download failed', e);
historyDoc.progress.enabled = false;

25
app/partials/full_gif.html

@ -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

@ -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

@ -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>

12
app/partials/message.html

@ -132,8 +132,12 @@ @@ -132,8 +132,12 @@
</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}">
<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
@ -152,7 +156,7 @@ @@ -152,7 +156,7 @@
</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>
<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>
@ -163,6 +167,8 @@ @@ -163,6 +167,8 @@
</div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save