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

Improved templates, thumb dir

master
Igor Zhukov 11 years ago
parent
e4d3f7e4ea
commit
051f5d6e3c
5 changed files with 74 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save