Browse Source

Improved templates, thumb dir

master
Igor Zhukov 11 years ago
parent
commit
051f5d6e3c
  1. 8
      app/css/app.css
  2. 3
      app/js/controllers.js
  3. 25
      app/js/directives.js
  4. 26
      app/js/services.js
  5. 95
      app/partials/message.html

8
app/css/app.css

@ -991,13 +991,13 @@ a.im_message_from_photo,
a.im_message_contact_photo { a.im_message_contact_photo {
margin: 1px 12px 0 0; margin: 1px 12px 0 0;
} }
.im_message_contact_name {
color: #3C6E97;
font-weight: bold;
}
.non_osx .im_message_contact_name { .non_osx .im_message_contact_name {
font-size: 12px; font-size: 12px;
} }
.im_message_contact_name {
font-weight: bold;
/*color: #3C6E97;*/
}
a.im_message_photo_thumb, a.im_message_photo_thumb,
a.im_message_video_thumb { a.im_message_video_thumb {
display: block; display: block;

3
app/js/controllers.js

@ -936,7 +936,8 @@ angular.module('myApp.controllers', [])
_: 'inputMediaContact', _: 'inputMediaContact',
phone_number: $scope.user.phone, phone_number: $scope.user.phone,
first_name: $scope.user.first_name, first_name: $scope.user.first_name,
last_name: $scope.user.last_name last_name: $scope.user.last_name,
user_id: $scope.user.id
}); });
$rootScope.$broadcast('history_focus', {peerString: peerString}); $rootScope.$broadcast('history_focus', {peerString: peerString});
}) })

25
app/js/directives.js

@ -622,18 +622,28 @@ angular.module('myApp.directives', ['myApp.filters'])
if (cachedSrc) { if (cachedSrc) {
element.attr('src', cachedSrc); element.attr('src', cachedSrc);
} }
if ($scope.thumb && $scope.thumb.width && $scope.thumb.height) {
element.attr('width', $scope.thumb.width);
element.attr('height', $scope.thumb.height);
}
$scope.$watchCollection('thumb.location', function (newLocation) { var stopWatching = $scope.$watchCollection('thumb.location', function (newLocation) {
if ($scope.thumb && $scope.thumb.width && $scope.thumb.height) {
element.attr('width', $scope.thumb.width);
element.attr('height', $scope.thumb.height);
}
// console.log('new loc', newLocation, arguments); // console.log('new loc', newLocation, arguments);
var counterSaved = ++counter; var counterSaved = ++counter;
if (!newLocation || newLocation.empty) { if (!newLocation || newLocation.empty) {
element.attr('src', $scope.thumb && $scope.thumb.placeholder || 'img/blank.gif'); element.attr('src', $scope.thumb && $scope.thumb.placeholder || 'img/blank.gif');
cleanup();
return; return;
} }
var cachedSrc = MtpApiFileManager.getCachedFile(newLocation); var cachedSrc = MtpApiFileManager.getCachedFile(newLocation);
if (cachedSrc) { if (cachedSrc) {
element.attr('src', cachedSrc); element.attr('src', cachedSrc);
cleanup();
return; return;
} }
@ -644,15 +654,24 @@ angular.module('myApp.directives', ['myApp.filters'])
MtpApiFileManager.downloadSmallFile($scope.thumb.location, $scope.thumb.size).then(function (url) { MtpApiFileManager.downloadSmallFile($scope.thumb.location, $scope.thumb.size).then(function (url) {
if (counterSaved == counter) { if (counterSaved == counter) {
element.attr('src', url); element.attr('src', url);
cleanup();
} }
}, function (e) { }, function (e) {
console.log('Download image failed', e, $scope.thumb.location); console.log('Download image failed', e, $scope.thumb.location);
if (counterSaved == counter) { if (counterSaved == counter) {
element.attr('src', $scope.thumb.placeholder || 'img/blank.gif'); element.attr('src', $scope.thumb.placeholder || 'img/blank.gif');
cleanup();
} }
}); });
}) })
var cleanup = angular.noop;
// function () {
// setTimeout(function () {
// $scope.$destroy()
// stopWatching();
// }, 0);
// };
} }
}) })
@ -761,9 +780,7 @@ angular.module('myApp.directives', ['myApp.filters'])
<img\ <img\
class="img_fullsize"\ class="img_fullsize"\
my-load-thumb\ my-load-thumb\
thumb="video.thumb"\ thumb="video.fullThumb"\
width="{{video.full.width}}"\
height="{{video.full.height}}"\
/>\ />\
</div>\ </div>\
<div class="video_full_player" ng-if="player.src">\ <div class="video_full_player" ng-if="player.src">\

26
app/js/services.js

@ -1302,7 +1302,7 @@ angular.module('myApp.services', [])
var media; var media;
switch (inputMedia._) { switch (inputMedia._) {
case 'inputMediaContact': case 'inputMediaContact':
media = angular.extend({}, inputMedia, {_: 'messageMediaContact', user_id: 0}); media = angular.extend({}, inputMedia, {_: 'messageMediaContact'});
break; break;
} }
@ -1519,6 +1519,13 @@ angular.module('myApp.services', [])
case 'messageMediaAudio': case 'messageMediaAudio':
message.media.audio = AppAudioManager.wrapForHistory(message.media.audio.id); message.media.audio = AppAudioManager.wrapForHistory(message.media.audio.id);
break; break;
case 'messageMediaContact':
message.media.rFullName = RichTextProcessor.wrapRichText(
message.media.first_name + ' ' + (message.media.last_name || ''),
{noLinks: true, noLinebreaks: true}
);
break;
} }
if (message.media.user_id) { if (message.media.user_id) {
@ -1527,11 +1534,15 @@ angular.module('myApp.services', [])
} }
} }
else if (message.action) { else if (message.action) {
if (message.action._ == 'messageActionChatEditPhoto') { switch (message.action._) {
message.action.photo = AppPhotosManager.wrapForHistory(message.action.photo.id); case 'messageActionChatEditPhoto':
} message.action.photo = AppPhotosManager.wrapForHistory(message.action.photo.id);
if (message.action._ == 'messageActionChatEditTitle') { break;
message.action.rTitle = RichTextProcessor.wrapRichText(message.action.title, {noLinks: true, noLinebreaks: true}) || 'DELETED';
case 'messageActionChatCreate':
case 'messageActionChatEditTitle':
message.action.rTitle = RichTextProcessor.wrapRichText(message.action.title, {noLinks: true, noLinebreaks: true}) || 'DELETED';
break;
} }
if (message.action.user_id) { if (message.action.user_id) {
@ -2048,6 +2059,9 @@ angular.module('myApp.services', [])
// console.log(222, video.w, video.h, full.width, full.height); // console.log(222, video.w, video.h, full.width, full.height);
video.full = full; video.full = full;
video.fullThumb = angular.copy(video.thumb);
video.fullThumb.width = full.width;
video.fullThumb.height = full.height;
video.fromUser = AppUsersManager.getUser(video.user_id); video.fromUser = AppUsersManager.getUser(video.user_id);
return video; return video;

95
app/partials/message.html

@ -16,7 +16,7 @@
<span class="im_message_service" bo-switch="historyMessage.action['_']"> <span class="im_message_service" bo-switch="historyMessage.action['_']">
<span bo-switch-when="messageActionChatCreate"> <span bo-switch-when="messageActionChatCreate">
created the group &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo; created the group &laquo;<strong ng-bind-html="historyMessage.action.rTitle"></strong>&raquo;
</span> </span>
<span bo-switch-when="messageActionChatEditTitle"> <span bo-switch-when="messageActionChatEditTitle">
changed group name to &laquo;<strong ng-bind-html="historyMessage.action.rTitle"></strong>&raquo; changed group name to &laquo;<strong ng-bind-html="historyMessage.action.rTitle"></strong>&raquo;
@ -44,9 +44,7 @@
</span> </span>
</span> </span>
<span bo-switch-default> <span bo-switch-default ng-bind="'Unsupported action ' + historyMessage.action._"></span>
unsupported action {{historyMessage.action}}
</span>
</span> </span>
</div> </div>
@ -56,8 +54,6 @@
class="im_service_message_photo_thumb" class="im_service_message_photo_thumb"
my-load-thumb my-load-thumb
thumb="historyMessage.action.photo.thumb" thumb="historyMessage.action.photo.thumb"
width="{{historyMessage.action.photo.thumb.width}}"
height="{{historyMessage.action.photo.thumb.height}}"
/> />
</a> </a>
@ -87,47 +83,39 @@
<div class="im_message_body"> <div class="im_message_body">
<a bo-if="historyMessage.to_id.chat_id > 0" class="im_message_author user_color_{{historyMessage.fromPhoto.num}}" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFullName"></a> <a bo-if="historyMessage.to_id.chat_id > 0" class="im_message_author" bo-class="'user_color_' + historyMessage.fromPhoto.num" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFullName"></a>
<a bo-if="!historyMessage.to_id.chat_id" class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName" ></a> <a bo-if="!historyMessage.to_id.chat_id" class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName" ></a>
<div bo-if="historyMessage._ == 'messageForwarded'" class="im_message_fwd_header"> <div bo-if="historyMessage._ == 'messageForwarded'" class="im_message_fwd_header">
Forwarded message from <a class="im_message_fwd_author" ng-click="openUser(historyMessage.fwd_from_id)" ng-bind-html="historyMessage.fwdUser.rFirstName"></a>, <span class="im_message_fwd_date">{{historyMessage.fwd_date | dateOrTime}}</span> Forwarded message from <a class="im_message_fwd_author" ng-click="openUser(historyMessage.fwd_from_id)" ng-bind-html="historyMessage.fwdUser.rFirstName"></a>, <span class="im_message_fwd_date" ng-bind="historyMessage.fwd_date | dateOrTime"></span>
</div> </div>
<div bo-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" class="im_message_media" ng-switch="historyMessage.media._"> <div bo-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" class="im_message_media" ng-switch="historyMessage.media._">
<a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" style="width: {{historyMessage.media.photo.thumb.width}}px;" ng-mouseover="preloadPhoto(historyMessage.media.photo.id)"> <a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" bo-style="{width: historyMessage.media.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(historyMessage.media.photo.id)">
<img <img
class="im_message_photo_thumb" class="im_message_photo_thumb"
my-load-thumb my-load-thumb
thumb="historyMessage.media.photo.thumb" thumb="historyMessage.media.photo.thumb"
width="{{historyMessage.media.photo.thumb.width}}"
height="{{historyMessage.media.photo.thumb.height}}"
/> />
</a> </a>
<div ng-switch-when="messageMediaVideo" class="im_message_video im_message_document_thumbed"> <div ng-switch-when="messageMediaVideo" class="im_message_video im_message_document_thumbed">
<a class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)" style="width: {{historyMessage.media.video.thumb.width}}px;"> <a class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)" bo-style="{width: historyMessage.media.video.thumb.width + 'px'}">
<span class="im_message_video_duration">{{historyMessage.media.video.duration | duration}}</span> <span class="im_message_video_duration" bo-bind="historyMessage.media.video.duration | duration"></span>
<i class="icon icon-videoplay"></i> <i class="icon icon-videoplay"></i>
<img <img
class="im_message_video_thumb" class="im_message_video_thumb"
my-load-thumb my-load-thumb
thumb="historyMessage.media.video.thumb" thumb="historyMessage.media.video.thumb"
width="{{historyMessage.media.video.thumb.width}}"
height="{{historyMessage.media.video.thumb.height}}"
/> />
</a> </a>
<div class="im_message_document_info"> <div class="im_message_document_info">
<div class="im_message_document_name_wrap"> <div class="im_message_document_name_wrap">
<span class="im_message_document_name">Video</span> <span class="im_message_document_name">Video</span>
<span class="im_message_document_size" ng-if="!historyMessage.media.video.progress.enabled"> <span class="im_message_document_size" ng-if="!historyMessage.media.video.progress.enabled" bo-bind="historyMessage.media.video.size | formatSize"></span>
{{historyMessage.media.video.size | formatSize}} <span class="im_message_document_size" ng-if="historyMessage.media.video.progress.enabled" ng-bind="historyMessage.media.video.progress | formatSizeProgress"></span>
</span>
<span class="im_message_document_size" ng-if="historyMessage.media.video.progress.enabled">
{{historyMessage.media.video.progress | formatSizeProgress}}
</span>
</div> </div>
<div class="im_message_document_actions" ng-if="!historyMessage.media.video.progress.enabled"> <div class="im_message_document_actions" ng-if="!historyMessage.media.video.progress.enabled">
<a href="" ng-click="downloadVideo(historyMessage.media.video.id)">Download</a> <a href="" ng-click="downloadVideo(historyMessage.media.video.id)">Download</a>
@ -153,23 +141,15 @@
class="im_message_document_thumb" class="im_message_document_thumb"
my-load-thumb my-load-thumb
thumb="historyMessage.media.document.thumb" thumb="historyMessage.media.document.thumb"
width="{{historyMessage.media.document.thumb.width}}"
height="{{historyMessage.media.document.thumb.height}}"
/> />
</div> </div>
</a> </a>
<div class="im_message_document_info"> <div class="im_message_document_info">
<div class="im_message_document_name_wrap"> <div class="im_message_document_name_wrap">
<span class="im_message_document_name"> <span class="im_message_document_name" bo-bind="historyMessage.media.document.file_name"></span>
{{historyMessage.media.document.file_name}} <span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled" bo-bind="historyMessage.media.document.size | formatSize"></span>
</span> <span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled" ng-bind="historyMessage.media.document.progress | formatSizeProgress"></span>
<span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled">
{{historyMessage.media.document.size | formatSize}}
</span>
<span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled">
{{historyMessage.media.document.progress | formatSizeProgress}}
</span>
</div> </div>
<div class="im_message_document_actions" ng-if="!historyMessage.media.document.progress.enabled"> <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)">Download</a>
@ -177,11 +157,7 @@
</div> </div>
<div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled"> <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
<div class="progress tg_down_progress"> <div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.document.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.document.progress.percent}}%"> <div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.document.progress.percent + '%'}"></div>
<span class="sr-only">
{{historyMessage.media.document.progress.percent}}% Complete (success)
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -199,29 +175,21 @@
<span class="im_message_audio_name"> <span class="im_message_audio_name">
Voice message Voice message
</span> </span>
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled"> <span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled" bo-bind="historyMessage.media.audio.duration | duration"></span>
{{historyMessage.media.audio.duration | duration}} <span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled" ng-bind="historyMessage.media.audio.progress | formatSizeProgress"></span>
</span>
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled">
{{historyMessage.media.audio.progress | formatSizeProgress}}
</span>
</div> </div>
<div class="im_message_audio_actions" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url"> <div class="im_message_audio_actions" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
<a href="" ng-click="openAudio(historyMessage.media.audio.id)">Play</a> <a href="" ng-click="openAudio(historyMessage.media.audio.id)">Play</a>
</div> </div>
<div class="im_message_download_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled"> <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
<div class="progress tg_down_progress"> <div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.audio.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.audio.progress.percent}}%"> <div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.audio.progress.percent + '%'}"></div>
<span class="sr-only">
{{historyMessage.media.audio.progress.percent}}% Complete (success)
</span>
</div>
</div> </div>
</div> </div>
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url"> <div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url">
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls"> <audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls">
<source ng-src="{{historyMessage.media.audio.url}}" type="audio/mpeg" /> <source bo-src="historyMessage.media.audio.url" type="audio/mpeg" />
<embed hidden="true" autostart="true" loop="false" src="{{historyMessage.media.audio.url}}" /> <embed bo-src="historyMessage.media.audio.url" hidden="true" autostart="true" loop="false" />
</audio> </audio>
</div> </div>
</div> </div>
@ -239,32 +207,23 @@
thumb="historyMessage.media.userPhoto" thumb="historyMessage.media.userPhoto"
/> />
</a> </a>
<div class="im_message_contact_name"><span class="glyphicon glyphicon-user"></span> <div class="im_message_contact_name" ng-switch="!!historyMessage.media.user">
{{historyMessage.media.first_name}} {{historyMessage.media.last_name}} <a ng-switch-when="true" ng-click="openUser(historyMessage.media.user.id)" ng-bind-html="historyMessage.media.rFullName"></a>
</div> <span ng-switch-default ng-bind-html="historyMessage.media.rFullName"></span>
<div class="im_message_contact_phone">
{{historyMessage.media.phone_number}}
</div> </div>
<div class="im_message_contact_phone" bo-bind="historyMessage.media.phone_number | phoneNumber"></div>
</div> </div>
<div ng-switch-when="messageMediaPending" class="im_message_upload_file im_message_upload_{{historyMessage.media.type}}"> <div ng-switch-when="messageMediaPending" class="im_message_upload_file" bo-class="'im_message_upload_' + historyMessage.media.type">
<i class="icon icon-{{historyMessage.media.type}}"></i> <i class="icon" bo-class="'icon-' + historyMessage.media.type"></i>
<div class="im_message_document_info"> <div class="im_message_document_info">
<div class="im_message_document_name_wrap"> <div class="im_message_document_name_wrap">
<span class="im_message_document_name"> <span class="im_message_document_name" bo-bind="historyMessage.media.file_name"></span>
{{historyMessage.media.file_name}} <span class="im_message_document_size" ng-if="historyMessage.media.progress" ng-bind="historyMessage.media.progress | formatSizeProgress"></span>
</span>
<span class="im_message_document_size" ng-if="historyMessage.media.progress">
{{historyMessage.media.progress | formatSizeProgress}}
</span>
</div> </div>
<div class="im_message_download_progress_wrap"> <div class="im_message_download_progress_wrap">
<div class="progress tg_down_progress"> <div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.progress.percent}}%"> <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: historyMessage.media.progress.percent + '%'}"></div>
<span class="sr-only">
{{historyMessage.media.progress.percent}}% Complete (success)
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save