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

Added audio player

Browse Source 
Improved mobile forwarded messages. Closes #470
Closes #446
This commit is contained in:
Igor Zhukov 2014-09-23 21:03:38 +04:00
parent 8eedd88c88
commit adeea1a4fa
16 changed files with 273 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
app/css/app.css
View File

@ -1194,57 +1194,7 @@ a.im_dialog_selected .im_dialog_date {
.non_osx .im_message_fwd_author {
font-size: 12px;
}
.im_grouped_short .im_message_from_photo,
.im_grouped_short .im_message_author,
.im_grouped .im_message_from_photo,
.im_grouped .im_message_author,
.im_grouped_fwd .im_message_author,
.im_grouped_fwd .im_message_from_photo,
.im_grouped_fwd_short .im_message_author,
.im_grouped_fwd_short .im_message_from_photo {
display: none;
}
.im_grouped_short .im_message_body,
.im_grouped .im_message_body,
.im_grouped_fwd .im_message_body,
.im_grouped_fwd_short .im_message_body {
margin-left: 46px;
}
.im_grouped_short .im_content_message_select_area,
.im_grouped .im_content_message_select_area {
height: 34px;
}
.im_history_appending .im_content_message_select_area {
height: 52px;
}
.im_grouped_short .icon-select-tick,
.im_grouped_fwd_short .icon-select-tick {
margin-top: 5px;
}
.im_grouped_short .icon-message-status,
.im_grouped_fwd_short .icon-message-status {
margin-top: 5px;
}
.im_grouped_fwd .im_message_fwd_from,
.im_grouped_fwd_short .im_message_fwd_from {
display: none;
}
.im_grouped_short .im_message_fwd .im_message_date,
.im_grouped .im_message_fwd .im_message_date,
.im_grouped_fwd .im_message_fwd .im_message_date,
.im_grouped_fwd_short .im_message_fwd .im_message_date {
display: none;
}
.im_grouped_fwd .im_message_fwd,
.im_grouped_fwd_short .im_message_fwd {
margin-top: 8px;
}
.im_grouped_fwd .im_message_fwd,
.im_grouped_fwd_short .im_message_fwd {
margin-top: 8px;
}
.im_message_from_photo,
.im_message_contact_photo,
@ -1392,13 +1342,15 @@ div.im_message_video_thumb {
}
.im_message_document,
.im_message_audio,
.im_message_upload_file {
margin-top: 3px;
border-radius: 3px;
display: inline-block;
width: 340px;
}
.im_message_audio {
margin-top: 3px;
}
.icon-document,
.icon-photo,
.icon-video {
@ -1478,44 +1430,23 @@ img.im_message_document_thumb {
color: #999;
padding-left: 2px;
}
.im_message_document_actions a {
.im_message_document_actions a,
.audio_player_actions a {
margin-right: 10px;
}
.icon-audio {
display: block;
float: left;
.audio_player_button {
width: 38px;
height: 38px;
vertical-align: text-top;
background: #F2F2F2 url(../img/icons/IconsetW.png) -2px -277px no-repeat;
background-size: 42px 891px;
border-radius: 3px;
margin-right: 10px;
margin-right: 12px;
}
.is_1x .icon-audio {
background-image: url(../img/icons/IconsetW_1x.png);
}
.im_message_selected .icon-audio,
.im_history_selectable .im_message_outer_wrap:hover .icon-audio {
background-color: #dae6f0;
background-position: -2px -697px;
}
.im_message_audio_info {
float: left;
width: 292px;
}
.im_message_audio_name_wrap {
.audio_player_title_wrap {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 290px;
padding: 0 0 1px;
}
.im_message_audio_name {
.audio_player_title {
color: #222;
display: inline-block;
font-weight: bold;
@ -1525,25 +1456,30 @@ img.im_message_document_thumb {
white-space: nowrap;
text-overflow: ellipsis;
}
.im_message_audio_duration,
.im_message_audio_size {
.audio_player_meta {
overflow: hidden;
vertical-align: text-top;
display: inline-block;
}
.audio_player_size,
.audio_player_duration {
color: #999;
padding-left: 2px;
}
.im_message_audio_info audio {
width: 100%;
height: 38px;
line-height: 38px;
}
.im_message_upload_progress_wrap,
.im_message_download_progress_wrap {
margin-top: 5px;
width: 290px;
}
.audio_player_progress_wrap {
margin-top: 5px;
max-width: 290px;
border-radius: 2px;
overflow: hidden;
}
.im_message_document_thumbed .im_message_document_name_wrap,
.im_message_document_thumbed .im_message_audio_name_wrap,
.im_message_document_thumbed .im_message_upload_progress_wrap,
.im_message_document_thumbed .im_message_download_progress_wrap {
width: 230px;
@ -1566,7 +1502,8 @@ img.im_message_document_thumb {
}
.tg_up_progress,
.tg_down_progress {
.tg_down_progress,
.tg_play_progress {
height: 5px;
margin: 0;
padding: 0;
@ -1577,7 +1514,8 @@ img.im_message_document_thumb {
box-shadow: none;
}
.tg_up_progress .progress-bar,
.tg_down_progress .progress-bar {
.tg_down_progress .progress-bar,
.tg_play_progress .progress-bar {
height: 5px;
line-height: 5px;
background: #6B9ABD;
@ -1586,6 +1524,18 @@ img.im_message_document_thumb {
-webkit-box-shadow: none;
box-shadow: none;
}
.tg_play_progress {
background: #e4e9ed;
border-radius: 2px;
}
.tg_play_progress .progress-bar {
background: #628fb2;
border-radius: 2px;
/*-webkit-transition: width 1s linear;
transition: width 1s linear;*/
-webkit-transition: none;
transition: none;
}
@ -1626,24 +1576,11 @@ div.im_message_body {
display: block;
overflow: hidden;
}
.im_message_fwd_from {
margin-top: 5px;
}
.im_grouped .im_message_fwd_from {
margin-top: 0;
}
.im_message_fwd {
margin-top: 4px;
margin-bottom: 4px;
}
a.im_message_fwd_photo {
position: absolute;
margin-top: 1px;
}
.im_message_fwd_author {
margin-right: 5px;
}
.im_message_fwd_date {
padding: 0;
}
@ -2378,8 +2315,8 @@ img.chat_modal_participant_photo {
.im_message_focus .im_message_date,
.im_message_focus .im_message_document_size,
.im_message_focus .im_message_audio_duration,
.im_message_focus .im_message_audio_size,
.im_message_focus .audio_player_duration,
.im_message_focus .audio_player_size,
.im_message_focus .im_message_fwd_date {
color: #68839c;
}

67
app/css/desktop.css
View File

@ -462,6 +462,9 @@ a.footer_lang_link.active:active {
}
.im_message_fwd_author {
margin-right: 5px;
}
.im_message_fwd .im_message_fwd_author_wrap,
.im_message_fwd .im_message_text,
.im_message_fwd .im_message_media {
@ -788,6 +791,70 @@ div.im_panel_own_photo {
}
}
/* Groupings */
.im_message_fwd_from {
margin-top: 5px;
}
.im_grouped .im_message_fwd_from {
margin-top: 0;
}
.im_message_fwd {
margin-top: 4px;
margin-bottom: 4px;
}
.im_grouped_short .im_message_from_photo,
.im_grouped_short .im_message_author,
.im_grouped .im_message_from_photo,
.im_grouped .im_message_author,
.im_grouped_fwd .im_message_author,
.im_grouped_fwd .im_message_from_photo,
.im_grouped_fwd_short .im_message_author,
.im_grouped_fwd_short .im_message_from_photo {
display: none;
}
.im_grouped_short .im_message_body,
.im_grouped .im_message_body,
.im_grouped_fwd .im_message_body,
.im_grouped_fwd_short .im_message_body {
margin-left: 46px;
}
.im_grouped_short .im_content_message_select_area,
.im_grouped .im_content_message_select_area {
height: 34px;
}
.im_history_appending .im_content_message_select_area {
height: 52px;
}
.im_grouped_short .icon-select-tick,
.im_grouped_fwd_short .icon-select-tick {
margin-top: 5px;
}
.im_grouped_short .icon-message-status,
.im_grouped_fwd_short .icon-message-status {
margin-top: 5px;
}
.im_grouped_fwd .im_message_fwd_from,
.im_grouped_fwd_short .im_message_fwd_from {
display: none;
}
.im_grouped_short .im_message_fwd .im_message_date,
.im_grouped .im_message_fwd .im_message_date,
.im_grouped_fwd .im_message_fwd .im_message_date,
.im_grouped_fwd_short .im_message_fwd .im_message_date {
display: none;
}
.im_grouped_fwd .im_message_fwd,
.im_grouped_fwd_short .im_message_fwd {
margin-top: 8px;
}
.im_grouped_fwd .im_message_fwd,
.im_grouped_fwd_short .im_message_fwd {
margin-top: 8px;
}
.tooltip-inner {
background: rgba(0,0,0, 0.8);
}

185
app/css/mobile.css
View File

@ -39,8 +39,6 @@ html {
}
.tg_page_head .navbar-inverse .navbar-toggle:hover,
/*.tg_page_head .navbar-inverse .navbar-toggle:active,*/
.tg_page_head .navbar-inverse .navbar-toggle:focus,
.tg_page_head .navbar-inverse .open .navbar-toggle {
background-color: rgba(0,0,0,0.1);
}
@ -331,14 +329,12 @@ html {
}
.im_message_body,
.im_message_document {
.im_message_body {
padding: 7px 10px;
border-radius: 3px;
background: #f1f1f1;
}
.im_message_out .im_message_body,
.im_message_out .im_message_document {
.im_message_out .im_message_body {
background: #e4ecf2;
}
.im_message_body_media,
@ -348,7 +344,8 @@ html {
background: none;
}
.im_message_selected .im_message_body,
.im_message_selected .im_message_document {
.im_message_selected .im_message_document,
.im_message_selected .im_message_audio {
background: #497495;
color: #FFF;
}
@ -357,68 +354,44 @@ html {
color: inherit;
}
.im_message_fwd .im_message_body,
.im_message_fwd .im_message_document {
padding: 7px 8px;
}
.im_grouped_fwd_start .im_message_body,
.im_grouped_fwd_short .im_message_body,
.im_grouped_fwd .im_message_body,
.im_grouped .im_message_fwd .im_message_body,
.im_grouped_fwd_start .im_message_document,
.im_grouped_fwd_short .im_message_document,
.im_grouped_fwd .im_message_document,
.im_grouped .im_message_fwd .im_message_document {
border-radius: 0;
}
.im_grouped_fwd_start .im_message_fwd .im_message_body,
.im_grouped_fwd_start .im_message_fwd .im_message_document {
border-radius: 3px 3px 0 0;
}
.im_grouped_fwd_end .im_message_fwd .im_message_body,
.im_grouped_fwd_end .im_message_fwd .im_message_document {
border-radius: 0 0 3px 3px;
}
.im_message_fwd .im_message_text {
min-height: 21px;
}
.im_grouped_fwd .im_message_text,
.im_grouped_fwd_short .im_message_text {
min-height: 0;
}
.im_service_message {
font-size: 13px;
}
.im_message_document {
.audio_player_button {
margin-right: 8px;
}
.im_message_body_media .im_message_document,
.im_message_body_media .im_message_audio {
padding: 5px;
width: auto;
max-width: 250px;
border-radius: 3px;
background: #f1f1f1;
margin-top: 0;
}
.im_message_audio,
.im_message_body_media a.im_message_photo_thumb,
.im_message_body_media .im_message_video {
margin-top: 0;
}
.im_message_out .im_message_body_media .im_message_document,
.im_message_out .im_message_body_media .im_message_audio {
background: #e4ecf2;
}
.im_message_document {
width: auto;
max-width: 250px;
}
.im_message_document {
position: relative;
}
.im_message_audio > a,
.im_message_document .icon-document,
.im_message_audio .icon-audio,
.im_message_document_thumb_wrap {
position: absolute;
}
.im_message_out .im_message_audio .icon-audio,
.im_message_out .im_message_document .icon-document {
background-color: #e4ecf2;
}
.im_message_document_thumb_wrap {
background-color: transparent;
}
.im_message_audio_done i {
display: none;
}
.im_message_audio_info,
.im_message_document_info {
float: none;
margin-left: 43px;
@ -428,25 +401,6 @@ html {
.im_message_document_thumbed .im_message_document_info {
margin-left: 110px;
}
.im_message_audio_name,
.im_message_audio_duration {
display: inline;
vertical-align: baseline;
line-height: 38px;
}
.im_message_audio_progress .im_message_audio_name,
.im_message_audio_progress .im_message_audio_duration {
line-height: 18px;
}
.im_message_audio_done .im_message_audio_info {
margin-left: 0;
width: auto;
float: none;
}
.im_message_audio_player_wrap {
height: 38px;
line-height: 38px;
}
.im_message_document_size {
display: block;
padding-left: 0;
@ -454,13 +408,11 @@ html {
.im_message_document_thumbed .im_message_document_info {
min-height: 100px;
}
.im_message_document_info .cancelable_progress_wrap,
.im_message_audio_info .cancelable_progress_wrap {
.im_message_document_info .cancelable_progress_wrap {
margin-top: 4px;
}
.im_message_document_thumbed .im_message_document_name_wrap,
.im_message_document_name_wrap,
.im_message_audio_name_wrap {
.im_message_document_name_wrap {
width: auto;
}
.im_message_document_progress .im_message_document_size {
@ -504,10 +456,7 @@ img.im_message_video_thumb,
.im_message_document_thumb_wrap {
position: absolute;
}
.im_grouped_short .im_message_body,
.im_grouped .im_message_body,
.im_grouped_fwd .im_message_body,
.im_grouped_fwd_short .im_message_body {
.im_grouped .im_message_body {
margin-left: 0;
}
@ -551,42 +500,19 @@ img.im_message_video_thumb,
padding-left: 0;
padding-right: 42px;
}
.im_message_fwd.im_content_message_wrap {
float: none;
}
.im_history_messages_group .im_message_in.im_content_message_wrap,
.im_history_messages_group .im_grouped_short .im_message_in.im_content_message_wrap,
.im_history_messages_group .im_grouped .im_message_in.im_content_message_wrap,
.im_history_messages_group .im_grouped_fwd .im_message_in.im_content_message_wrap,
.im_history_messages_group .im_grouped_fwd_short .im_message_in.im_content_message_wrap {
.im_history_messages_group .im_grouped .im_message_in.im_content_message_wrap {
padding-left: 45px;
}
.im_grouped_short .im_message_out.im_message_fwd,
.im_grouped .im_message_out.im_message_fwd,
.im_grouped_fwd .im_message_out.im_message_fwd,
.im_grouped_fwd_short .im_message_out.im_message_fwd {
padding-left: 80px;
}
.im_grouped_short .im_content_message_wrap,
.im_grouped .im_content_message_wrap {
margin-top: 0;
}
.im_grouped_fwd_start .im_message_fwd.im_content_message_wrap,
.im_grouped_short .im_message_fwd.im_content_message_wrap,
.im_grouped .im_message_fwd.im_content_message_wrap,
.im_grouped_fwd .im_message_fwd.im_content_message_wrap,
.im_grouped_fwd_short .im_message_fwd.im_content_message_wrap {
margin-top: 0;
margin-bottom: 0;
.im_message_fwd_header {
font-size: 12px;
}
.im_grouped_fwd_start .im_message_fwd.im_content_message_wrap {
margin-top: 8px;
}
.im_grouped_fwd_end .im_message_fwd.im_content_message_wrap {
margin-bottom: 8px;
}
.im_message_meta {
float: none;
position: absolute;
@ -602,18 +528,6 @@ img.im_message_video_thumb,
left: 0;
}
.im_grouped_fwd .im_message_meta,
.im_grouped_fwd_short .im_message_meta,
.im_grouped_fwd_start .im_message_meta {
display: none;
}
.im_grouped_fwd_end .im_message_meta {
display: block;
}
.im_grouped_fwd_end .im_message_fwd .im_message_date {
display: inline;
}
.im_message_out .im_message_fwd_date {
color: #93a2ae;
}
@ -624,27 +538,21 @@ img.im_message_video_thumb,
background-color: #dae6f0;
background-position: -2px -542px;
}
.im_message_out .icon-audio,
.im_history_selectable .im_message_outer_wrap:hover .icon-audio {
background-color: #dae6f0;
background-position: -2px -697px;
}
.im_message_out .im_message_document_size,
.im_message_out .im_message_audio_duration,
.im_message_out .im_message_audio_size,
.im_message_out .audio_player_duration,
.im_message_out .audio_player_size,
.im_message_out .im_message_fwd_date,
.im_message_selected .im_message_document_size,
.im_message_selected .im_message_audio_duration,
.im_message_selected .im_message_audio_size,
.im_message_selected .audio_player_duration,
.im_message_selected .audio_player_size,
.im_message_selected .im_message_fwd_date,
.im_message_focus .im_message_document_size,
.im_message_focus .im_message_audio_duration,
.im_message_focus .im_message_audio_size,
.im_message_focus .audio_player_duration,
.im_message_focus .audio_player_size,
.im_message_focus .im_message_fwd_date,
.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size,
.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_duration,
.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_size,
.im_history_selectable .im_message_outer_wrap:hover .audio_player_duration,
.im_history_selectable .im_message_outer_wrap:hover .audio_player_size,
.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date {
color: #68839c;
}
@ -853,15 +761,15 @@ a.im_dialog_selected .im_dialog_message_text {
}
.im_message_selected .im_message_body a,
.im_message_selected .im_message_fwd_title,
.im_message_selected .im_message_audio_name,
.im_message_selected .im_message_fwd_date,
.im_message_selected .im_message_document_name,
.im_message_selected .im_message_document_size,
.im_message_selected .im_message_audio_duration,
.im_message_selected .im_message_audio_size,
.im_message_selected .im_message_fwd_date,
.im_message_selected .audio_player_title,
.im_message_selected .audio_player_duration,
.im_message_selected .audio_player_size,
.im_history_selectable .im_message_selected:hover .im_message_document_size,
.im_history_selectable .im_message_selected:hover .im_message_audio_duration,
.im_history_selectable .im_message_selected:hover .im_message_audio_size,
.im_history_selectable .im_message_selected:hover .audio_player_duration,
.im_history_selectable .im_message_selected:hover .audio_player_size,
.im_history_selectable .im_message_selected:hover .im_message_fwd_date {
color: #FFF;
}
@ -870,13 +778,6 @@ a.im_dialog_selected .im_dialog_message_text {
a.im_message_fwd_author {
color: #323232;
}
.im_message_fwd .im_message_fwd_author_wrap,
.im_message_fwd .im_message_text,
.im_message_fwd .im_message_media {
margin-left: 50px;
}
.im_dialogs_scrollable_wrap a.im_dialog:hover,
.im_dialogs_scrollable_wrap a.im_dialog_selected,

73
app/js/directives.js
View File

@ -1482,27 +1482,6 @@ angular.module('myApp.directives', ['myApp.filters'])
}
})
.directive('myAudioAutoplay', function() {
return {
link: link,
scope: {
audio: '='
}
};
function link ($scope, element, attrs) {
$scope.$watch('audio.autoplay', function (autoplay) {
if (autoplay) {
element.autoplay = true;
element[0].play();
} else {
element.autoplay = false;
}
});
}
})
.directive('myFocused', function(){
return {
link: function($scope, element, attrs) {
@ -1843,13 +1822,63 @@ angular.module('myApp.directives', ['myApp.filters'])
}
})
.directive('myAudioPlayer', function ($scope) {
.directive('myAudioPlayer', function ($sce, $timeout, MtpApiFileManager) {
return {
link: link,
scope: {
audio: '='
},
templateUrl: templateUrl('audio_player')
};
function downloadAudio (audio) {
var inputFileLocation = {
_: audio._ == 'document' ? 'inputDocumentFileLocation' : 'inputAudioFileLocation',
id: audio.id,
access_hash: audio.access_hash
};
audio.progress = {enabled: true, percent: 1, total: audio.size};
var downloadPromise = MtpApiFileManager.downloadFile(audio.dc_id, inputFileLocation, audio.size, {mime: 'audio/ogg'});
audio.progress.cancel = downloadPromise.cancel;
return downloadPromise.then(function (url) {
delete audio.progress;
audio.url = $sce.trustAsResourceUrl(url);
}, function (e) {
console.log('audio download failed', e);
audio.progress.enabled = false;
}, function (progress) {
console.log('audio dl progress', progress);
audio.progress.done = progress.done;
audio.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
});
}
function link($scope, element, attrs) {
$scope.mediaPlayer = {};
$scope.togglePlay = function () {
if ($scope.audio.url) {
$scope.mediaPlayer.player.playPause();
}
else if ($scope.audio.progress && $scope.audio.progress.enabled) {
$scope.audio.progress.cancel();
}
else {
downloadAudio($scope.audio).then(function () {
$timeout(function () {
var audioElement = $('audio', element)[0];
if (audioElement) {
audioElement.autoplay = false;
audioElement.removeAttribute('autoplay');
}
}, 1000);
})
}
}
}
})

1
app/js/filters.js
View File

@ -104,6 +104,7 @@ angular.module('myApp.filters', ['myApp.i18n'])
.filter('duration', [function() {
return function (duration) {
duration = parseInt(duration);
var secs = duration % 60,
mins = Math.floor((duration - secs) / 60.0);

1
app/js/locales/en-us.json
View File

@ -304,6 +304,7 @@
"login_controller_unknown_country": "Unknown",
"message_forwarded_message": "Forwarded message",
"message_forwarded_message_mobile": "Forwarded from {from}, {date}",
"message_attach_audio_message": "Voice message",
"message_attach_audio_play": "Play",

26
app/js/services.js
View File

@ -1809,6 +1809,9 @@ angular.module('myApp.services', ['myApp.i18n'])
{noLinks: true, noLinebreaks: true}
);
break;
case 'messageMediaEmpty':
delete message.media;
}
}
else if (message.action) {
@ -1839,7 +1842,8 @@ angular.module('myApp.services', ['myApp.i18n'])
len = history.length,
end = len,
i, curDay, prevDay, curMessage, prevMessage, curGrouped, prevGrouped,
wasUpdated = false;
wasUpdated = false,
groupFwd = !Config.Mobile;
if (limit > 0) {
end = Math.min(limit, len);
@ -1874,12 +1878,12 @@ angular.module('myApp.services', ['myApp.i18n'])
curMessage.date < prevMessage.date + 900) {
var singleLine = curMessage.message && curMessage.message.length < 70 && curMessage.message.indexOf("\n") == -1;
if (curMessage.fwd_from_id && curMessage.fwd_from_id == prevMessage.fwd_from_id) {
if (groupFwd && curMessage.fwd_from_id && curMessage.fwd_from_id == prevMessage.fwd_from_id) {
curMessage.grouped = singleLine ? 'im_grouped_fwd_short' : 'im_grouped_fwd';
} else {
curMessage.grouped = !curMessage.fwd_from_id && singleLine ? 'im_grouped_short' : 'im_grouped';
}
if (curMessage.fwd_from_id) {
if (groupFwd && curMessage.fwd_from_id) {
if (!prevMessage.grouped) {
prevMessage.grouped = 'im_grouped_fwd_start';
}
@ -1890,7 +1894,7 @@ angular.module('myApp.services', ['myApp.i18n'])
} else if (prevMessage || !i) {
delete curMessage.grouped;
if (prevMessage && prevMessage.grouped && prevMessage.fwd_from_id) {
if (groupFwd && prevMessage && prevMessage.grouped && prevMessage.fwd_from_id) {
prevMessage.grouped += ' im_grouped_fwd_end';
}
}
@ -2328,8 +2332,8 @@ angular.module('myApp.services', ['myApp.i18n'])
function wrapForHistory (photoID) {
var photo = angular.copy(photos[photoID]) || {_: 'photoEmpty'},
width = Math.min(windowW - 80, 260),
height = Math.min(windowH - 100, 260),
width = Math.min(windowW - 80, Config.Mobile ? 210 : 260),
height = Math.min(windowH - 100, Config.Mobile ? 210 : 260),
thumbPhotoSize = choosePhotoSize(photo, width, height),
thumb = {
placeholder: 'img/placeholders/PhotoThumbConversation.gif',
@ -2506,8 +2510,8 @@ angular.module('myApp.services', ['myApp.i18n'])
}
var video = angular.copy(videos[videoID]),
width = Math.min(windowW - 80, windowW <= 479 ? 260 : 200),
height = Math.min(windowH - 100, windowW <= 479 ? 260 : 200),
width = Math.min(windowW - 80, Config.Mobile ? 210 : 200),
height = Math.min(windowH - 100, Config.Mobile ? 210 : 200),
thumbPhotoSize = video.thumb,
thumb = {
placeholder: 'img/placeholders/VideoThumbConversation.gif',
@ -2677,6 +2681,7 @@ angular.module('myApp.services', ['myApp.i18n'])
var doc = angular.copy(docs[docID]),
isGif = doc.mime_type == 'image/gif',
isAudio = doc.mime_type.substr(0, 6) == 'audio/',
width = isGif ? Math.min(windowW - 80, 260) : 100,
height = isGif ? Math.min(windowH - 100, 260) : 100,
thumbPhotoSize = doc.thumb,
@ -2711,6 +2716,9 @@ angular.module('myApp.services', ['myApp.i18n'])
if (doc.withPreview && isGif) {
doc.isSpecial = 'gif';
}
else if (isAudio) {
doc.isSpecial = 'audio';
}
return docsForHistory[docID] = doc;
}
@ -2836,6 +2844,8 @@ angular.module('myApp.services', ['myApp.i18n'])
}, updateDownloadProgress);
historyAudio.progress.cancel = downloadPromise.cancel;
return downloadPromise;
}
$rootScope.openAudio = openAudio;

37
app/partials/desktop/audio_player.html
View File

@ -1,15 +1,30 @@
<div class="audio_player_wrap" ng-class="">
<div class="audio_player_button" ng-click="togglePlay()">
<i class="icon audio_player_btn_icon"></i>
</div>
<div class="audio_player_title_wrap">
<div class="audio_player_title" my-i18n="message_attach_audio_message"></div>
<div class="audio_player_meta">
<span class="audio_player_duration"></span>
<div class="audio_player_wrap clearfix">
<button class="btn btn-primary pull-left audio_player_button" ng-click="togglePlay()">
<i class="icon audio_player_btn_icon" ng-class="{audio_player_btn_icon_pause: mediaPlayer.player.playing, audio_player_btn_icon_cancel: audio.progress.enabled}"></i>
</button>
<div class="audio_player_title_wrap clearfix">
<div class="audio_player_title" ng-switch="::audio.file_name.length > 0">
<span ng-switch-when="true" ng-bind="::audio.file_name"></span>
<span ng-switch-default my-i18n="message_attach_audio_message"></span>
</div>
<div class="audio_player_meta" ng-switch="audio.progress.enabled || !mediaPlayer.player.duration &amp;&amp; !audio.duration">
<span ng-switch-when="true" class="audio_player_size" ng-bind="audio.progress | formatSizeProgress"></span>
<span ng-switch-default class="audio_player_duration" ng-bind="(mediaPlayer.player.playing || mediaPlayer.player.currentTime > 0) ? mediaPlayer.player.currentTime : (mediaPlayer.player.duration || audio.duration) | duration"></span>
</div>
</div>
<div class="audio_player_progress_wrap">
<div class="audio_player_progress" ng-style="{width: audio.progress.percent + '%'}"></div>
<!-- <i class="icon icon-player-track"></i> -->
<div class="audio_player_actions" ng-if="!audio.progress.enabled &amp;&amp; !audio.url">
<a ng-click="togglePlay()" my-i18n="message_attach_audio_play"></a>
<a ng-if="audio._ == 'document'" ng-click="download()" my-i18n="message_attach_document_download"></a>
</div>
<div class="audio_player_progress_wrap" ng-if="audio.progress.enabled || audio.url" ng-switch="audio.progress.enabled">
<div ng-switch-when="true" class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" ng-style="{width: audio.progress.percent + '%'}"></div>
</div>
<div ng-switch-default class="progress tg_play_progress">
<div class="progress-bar progress-bar-success" ng-style="{width: mediaPlayer.player.currentTime / (mediaPlayer.player.duration || audio.duration) * 100 + '%'}"></div>
</div>
</div>
<audio ng-if="audio.url" media-player="mediaPlayer.player" autoplay="autoplay">
<source ng-src="{{::audio.url}}" type="audio/ogg" />
</audio>
</div>

6
app/partials/desktop/message.html
View File

@ -37,18 +37,18 @@
<span class="im_message_date" ng-bind="::historyMessage.date | time"></span>
</div>
<div class="im_message_body" ng-class="::{im_message_body_media: historyMessage._ == 'message' &amp;&amp; historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'}">
<div class="im_message_body" ng-class="::{im_message_body_media: historyMessage._ == 'message' &amp;&amp; historyMessage.media ? true : false}">
<a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a>
<div ng-if="::historyMessage._ == 'messageForwarded' || false" class="im_message_fwd_from">
<a class="im_message_fwd_photo pull-left" my-user-photolink="historyMessage.fwd_from_id" img-class="im_message_fwd_photo"></a>
<div class="im_message_fwd_author_wrap">
<a class="im_message_fwd_author" my-user-link="historyMessage.fwd_from_id" short="true"></a><span class="im_message_fwd_date" ng-bind="historyMessage.fwd_date | dateOrTime"></span>
<a class="im_message_fwd_author" my-user-link="historyMessage.fwd_from_id" short="true"></a><span class="im_message_fwd_date" ng-bind="::historyMessage.fwd_date | dateOrTime"></span>
</div>
</div>
<div ng-if="::historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty' || false" class="im_message_media" ng-switch="historyMessage.media._">
<div ng-if="::historyMessage.media ? true : false" class="im_message_media" ng-switch="historyMessage.media._">
<div ng-switch-when="messageMediaPhoto" my-message-photo></div>
<div ng-switch-when="messageMediaVideo" my-message-video></div>

32
app/partials/desktop/message_attach_audio.html
View File

@ -1,31 +1,3 @@
<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}">
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
<i class="icon icon-audio"></i>
</a>
<i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i>
<div class="im_message_audio_info">
<div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url">
<span class="im_message_audio_name" my-i18n="message_attach_audio_message"></span>
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled" ng-bind="::historyMessage.media.audio.duration | duration"></span>
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled" ng-bind="historyMessage.media.audio.progress | formatSizeProgress"></span>
</div>
<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)" my-i18n="message_attach_audio_play"></a>
</div>
<div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.audio.progress.cancel()" my-i18n="modal_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.audio.progress.percent + '%'}"></div>
</div>
</div>
</div>
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url">
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls">
<source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" />
<embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" />
</audio>
</div>
</div>
<div class="im_message_audio">
<div my-audio-player audio="historyMessage.media.audio"></div>
</div>

4
app/partials/desktop/message_attach_document.html
View File

@ -2,6 +2,10 @@
<div ng-switch-when="gif" my-load-gif document="historyMessage.media.document"></div>
<div ng-switch-when="audio" class="im_message_audio">
<div my-audio-player audio="historyMessage.media.document"></div>
</div>
<div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb, im_message_document_progress: historyMessage.media.document.progress.enabled}">
<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}">

1
app/partials/mobile/audio_player.html Symbolic link
View File

@ -0,0 +1 @@
../desktop/audio_player.html

15
app/partials/mobile/message.html
View File

@ -19,7 +19,7 @@
</div>
<div ng-if="::historyMessage._ != 'messageService'" class="im_content_message_wrap" ng-class="::[historyMessage.out ? 'im_message_out' : 'im_message_in', historyMessage._ == 'messageForwarded' ? 'im_message_fwd' : '']">
<div ng-if="::historyMessage._ != 'messageService'" class="im_content_message_wrap" ng-class="::[historyMessage.out ? 'im_message_out' : 'im_message_in']">
<i ng-if="::historyMessage.unread || historyMessage.pending || false" class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}" ng-show="!historyMessage.error"></i>
<a class="im_message_from_photo pull-left" my-user-photolink="historyMessage.from_id" img-class="im_message_from_photo"></a>
@ -29,19 +29,16 @@
<span class="im_message_date" ng-bind="::historyMessage.date | time"></span>
</div>
<div class="im_message_body" ng-class="::{im_message_body_media: historyMessage._ == 'message' &amp;&amp; historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'}">
<div class="im_message_body" ng-class="::{im_message_body_media: !!historyMessage.media}">
<a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a>
<div ng-if="::historyMessage._ == 'messageForwarded' || false" class="im_message_fwd_from">
<div class="im_message_fwd_title" ng-if="::historyMessage.grouped == 'im_grouped_fwd_start'">Forwarded message</div>
<a class="im_message_fwd_photo pull-left" my-user-photolink="historyMessage.fwd_from_id" img-class="im_message_fwd_photo"></a>
<div class="im_message_fwd_author_wrap">
<a class="im_message_fwd_author" my-user-link="historyMessage.fwd_from_id" short="true"></a><span class="im_message_fwd_date" ng-bind="historyMessage.fwd_date | dateOrTime"></span>
</div>
<div ng-if="::historyMessage._ == 'messageForwarded' &amp;&amp; !historyMessage.media" class="im_message_fwd_header" my-i18n="message_forwarded_message_mobile">
<a my-i18n-param="from" class="im_message_fwd_author" my-user-link="historyMessage.fwd_from_id"></a>
<span my-i18n-param="date" class="im_message_fwd_date" ng-bind="::historyMessage.fwd_date | dateOrTime"></span>
</div>
<div ng-if="::historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty' || false" class="im_message_media" ng-switch="historyMessage.media._">
<div ng-if="::historyMessage.media || false" class="im_message_media" ng-switch="historyMessage.media._">
<div ng-switch-when="messageMediaPhoto" my-message-photo></div>
<div ng-switch-when="messageMediaVideo" my-message-video></div>

33
app/partials/mobile/message_attach_audio.html
View File

@ -1,30 +1,3 @@
<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}">
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
<i class="icon icon-audio"></i>
</a>
<i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i>
<div class="im_message_audio_info">
<div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url">
<span class="im_message_audio_name">
Voice message
</span>
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled" ng-bind="::historyMessage.media.audio.duration | duration"></span>
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled" ng-bind="historyMessage.media.audio.progress | formatSizeProgress"></span>
</div>
<div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.audio.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.audio.progress.percent + '%'}"></div>
</div>
</div>
</div>
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url">
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls">
<source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" />
<embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" />
</audio>
</div>
</div>
</div>
<div class="im_message_audio">
<div my-audio-player audio="historyMessage.media.audio"></div>
</div>

4
app/partials/mobile/message_attach_document.html
View File

@ -2,6 +2,10 @@
<div ng-switch-when="gif" my-load-gif document="historyMessage.media.document"></div>
<div ng-switch-when="audio" class="im_message_audio">
<div my-audio-player audio="historyMessage.media.document"></div>
</div>
<div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb, im_message_document_progress: historyMessage.media.document.progress.enabled}">
<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}">

4
app/vendor/angular-media-player/angular-media-player.js vendored
View File

@ -430,7 +430,9 @@ angular.module('mediaPlayer', ['mediaPlayer.helpers'])
} else {
playlist = scope[playlistName];
}
if (mediaName !== undefined) { scope[mediaName] = player; }
if (mediaName !== undefined) {
scope.$eval(mediaName + ' = player', {player: player});
}
if (element[0].tagName !== 'AUDIO' && element[0].tagName !== 'VIDEO') {
return new Error('player directive works only when attached to an <audio>/<video> type tag');