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

Added desktop notififactions, added download/upload progress

Browse Source
This commit is contained in:
Igor Zhukov 2014-01-09 16:13:12 +04:00
parent e63b8b0e30
commit 8d1f2706a5
7 changed files with 315 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/css/app.css
View File

@ -715,6 +715,8 @@ div.im_message_video_thumb {
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
width: 300px;
} }
.icon-document { .icon-document {
display: inline-block; display: inline-block;
@ -729,8 +731,26 @@ div.im_message_video_thumb {
.im_message_document .icon-group { .im_message_document .icon-group {
background-image: url(../img/icons/DialogListGroupChatIcon_Highlighted@2x.png); background-image: url(../img/icons/DialogListGroupChatIcon_Highlighted@2x.png);
} }
.im_message_document_name {
.im_message_document_size {
color: #999; color: #999;
float: right;
vertical-align: text-top;
display: inline-block;
line-height: 20px;
padding: 9px 3px 9px 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.im_message_document:hover .im_message_document_size {
color: #698192;
}
.im_message_document_name {
color: #000;
font-weight: bold;
vertical-align: text-top; vertical-align: text-top;
display: inline-block; display: inline-block;
line-height: 20px; line-height: 20px;
@ -749,17 +769,11 @@ div.im_message_video_thumb {
background: #EBF0F5 url(../img/icons/DocBlue_2x.png) 8px 10px no-repeat; background: #EBF0F5 url(../img/icons/DocBlue_2x.png) 8px 10px no-repeat;
background-size: 20px 20px; background-size: 20px 20px;
} }
.im_message_document:hover .im_message_document_name {
color: #698192;
}
.im_message_document_name strong {
color: #000;
padding-right: 3px;
}
.im_message_upload_progress_wrap, .im_message_upload_progress_wrap,
.im_message_download_progress_wrap { .im_message_download_progress_wrap {
margin-top: 5px; margin-top: 5px;
width: 300px;
} }
.tg_up_progress, .tg_up_progress,
@ -767,21 +781,30 @@ div.im_message_video_thumb {
height: 5px; height: 5px;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: rgba(0,0,0, 0.1); /*background: rgba(0,0,0, 0.1);*/
background: #E9EBED;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
} }
.tg_up_progress .progress-bar, .tg_up_progress .progress-bar,
.tg_down_progress .progress-bar { .tg_down_progress .progress-bar {
height: 5px; height: 5px;
line-height: 5px; line-height: 5px;
background: #43A4DB; /*background: #43A4DB;*/
background: #B3BFC7;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: none;
box-shadow: none;
} }
.tg_down_progress .progress-bar { .tg_down_progress .progress-bar {
background: #6DBF69; background: #A1D2ED;
/*background: #6DBF69;*/
} }
/*.tg_up_progress .progress-bar {
}*/

10
app/index.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="vendor/angular/angular-csp.css"/> <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/> <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
<link rel="stylesheet" href="css/app.css"/> <link rel="stylesheet" href="css/app.css?1"/>
</head> </head>
<body> <body>
@ -36,10 +36,10 @@
<script type="text/javascript" src="js/util.js"></script> <script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/services.js"></script> <script type="text/javascript" src="js/services.js?1"></script>
<script type="text/javascript" src="js/controllers.js"></script> <script type="text/javascript" src="js/controllers.js?1"></script>
<script type="text/javascript" src="js/filters.js"></script> <script type="text/javascript" src="js/filters.js?1"></script>
<script type="text/javascript" src="js/directives.js"></script> <script type="text/javascript" src="js/directives.js?1"></script>
</body> </body>
</html> </html>

62
app/js/controllers.js
View File

@ -207,12 +207,14 @@ angular.module('myApp.controllers', [])
}) })
.controller('AppImHistoryController', function ($scope, $location, $timeout, MtpApiManager, AppUsersManager, AppChatsManager, AppMessagesManager, AppPeersManager, ApiUpdatesManager) { .controller('AppImHistoryController', function ($scope, $location, $timeout, $rootScope, MtpApiManager, AppUsersManager, AppChatsManager, AppMessagesManager, AppPeersManager, ApiUpdatesManager, IdleManager) {
$scope.$watch('curDialog.peer', applyDialogSelect); $scope.$watch('curDialog.peer', applyDialogSelect);
ApiUpdatesManager.attach(); ApiUpdatesManager.attach();
IdleManager.start();
$scope.history = []; $scope.history = [];
$scope.typing = {}; $scope.typing = {};
@ -227,12 +229,39 @@ angular.module('myApp.controllers', [])
$scope.curDialog.inputPeer = AppPeersManager.getInputPeer(newPeer); $scope.curDialog.inputPeer = AppPeersManager.getInputPeer(newPeer);
if (peerID) { if (peerID) {
updateHistoryPeer(true);
loadHistory(peerID); loadHistory(peerID);
} else { } else {
showEmptyHistory(); showEmptyHistory();
} }
} }
function updateHistoryPeer(preload) {
var peerData = AppPeersManager.getPeer(peerID);
dLog('update', preload, peerData);
if (!peerData || peerData.deleted) {
return false;
}
$scope.history = [];
$scope.historyPeer = {
id: peerID,
data: peerData,
photo: AppPeersManager.getPeerPhoto(peerID, 'User', 'Group')
};
MtpApiManager.getUserID().then(function (id) {
$scope.ownPhoto = AppUsersManager.getUserPhoto(id, 'User');
});
if (preload) {
$scope.typing = {};
$scope.state = {loaded: true};
$scope.$broadcast('ui_peer_change');
}
}
function showMoreHistory () { function showMoreHistory () {
if (!hasMore || !offset) { if (!hasMore || !offset) {
return; return;
@ -264,24 +293,12 @@ angular.module('myApp.controllers', [])
hasMore = offset < historyResult.count; hasMore = offset < historyResult.count;
maxID = historyResult.history[historyResult.history.length - 1]; maxID = historyResult.history[historyResult.history.length - 1];
$scope.history = []; updateHistoryPeer();
angular.forEach(historyResult.history, function (id) { angular.forEach(historyResult.history, function (id) {
$scope.history.push(AppMessagesManager.wrapForHistory(id)); $scope.history.push(AppMessagesManager.wrapForHistory(id));
}); });
$scope.history.reverse(); $scope.history.reverse();
$scope.historyPeer = {
id: peerID,
data: AppPeersManager.getPeer(peerID),
photo: AppPeersManager.getPeerPhoto(peerID, 'User', 'Group')
};
$scope.typing = {};
MtpApiManager.getUserID().then(function (id) {
$scope.ownPhoto = AppUsersManager.getUserPhoto(id, 'User');
});
$scope.state = {loaded: true}; $scope.state = {loaded: true};
$scope.$broadcast('ui_history_change'); $scope.$broadcast('ui_history_change');
@ -305,12 +322,19 @@ angular.module('myApp.controllers', [])
$scope.$on('history_append', function (e, addedMessage) { $scope.$on('history_append', function (e, addedMessage) {
if (addedMessage.peerID == $scope.curDialog.peerID) { if (addedMessage.peerID == $scope.curDialog.peerID) {
dLog('append', addedMessage); // dLog('append', addedMessage);
// console.trace(); // console.trace();
$scope.history.push(AppMessagesManager.wrapForHistory(addedMessage.messageID)); $scope.history.push(AppMessagesManager.wrapForHistory(addedMessage.messageID));
$scope.typing = {}; $scope.typing = {};
$scope.$broadcast('ui_history_append'); $scope.$broadcast('ui_history_append');
offset++ offset++;
// dLog('append check', $rootScope.idle.isIDLE, addedMessage.peerID, $scope.curDialog.peerID);
if (!$rootScope.idle.isIDLE) {
$timeout(function () {
AppMessagesManager.readHistory($scope.curDialog.inputPeer);
});
}
} }
}); });
@ -347,6 +371,12 @@ angular.module('myApp.controllers', [])
showMoreHistory(); showMoreHistory();
}); });
$rootScope.$watch('idle.isIDLE', function (newVal) {
if (!newVal && $scope.curDialog && $scope.curDialog.peerID) {
AppMessagesManager.readHistory($scope.curDialog.inputPeer);
}
});
}) })
.controller('AppImPanelController', function($scope) { .controller('AppImPanelController', function($scope) {

19
app/js/directives.js
View File

@ -25,7 +25,7 @@ angular.module('myApp.directives', ['myApp.filters'])
restrict: 'AE', restrict: 'AE',
scope: true, scope: true,
translude: false, translude: false,
templateUrl: 'partials/message.html' templateUrl: 'partials/message.html?1'
}; };
}) })
@ -114,12 +114,15 @@ angular.module('myApp.directives', ['myApp.filters'])
} }
scope.$on('ui_history_append', function () { scope.$on('ui_history_append', function () {
var st = scrollableWrap.scrollTop; // var st = scrollableWrap.scrollTop;
$(scrollableWrap).addClass('im_history_to_bottom'); $(scrollableWrap).addClass('im_history_to_bottom');
$(scrollable).css({bottom: 0});
if (atBottom) { if (atBottom) {
onContentLoaded(function () { onContentLoaded(function () {
$(scrollableWrap).removeClass('im_history_to_bottom'); $(scrollableWrap).removeClass('im_history_to_bottom');
updateSizes(); $(scrollable).css({bottom: ''});
// updateSizes(true);
$(historyWrap).nanoScroller({scrollBottom: 0}); $(historyWrap).nanoScroller({scrollBottom: 0});
// scrollableWrap.scrollTop = st; // scrollableWrap.scrollTop = st;
// $(scrollableWrap).animate({ // $(scrollableWrap).animate({
@ -175,10 +178,12 @@ angular.module('myApp.directives', ['myApp.filters'])
} }
}); });
function updateSizes () { function updateSizes (heightOnly) {
$(historyWrap).css({ $(historyWrap).css({
height: $($window).height() - panelWrap.offsetHeight - sendFormWrap.offsetHeight - 90 height: $($window).height() - panelWrap.offsetHeight - sendFormWrap.offsetHeight - 90
}); });
if (heightOnly) return;
if (atBottom) { if (atBottom) {
onContentLoaded(function () { onContentLoaded(function () {
$(historyWrap).nanoScroller({scroll: 'bottom'}); $(historyWrap).nanoScroller({scroll: 'bottom'});
@ -243,7 +248,7 @@ angular.module('myApp.directives', ['myApp.filters'])
if (submit) { if (submit) {
$(element).trigger('submit'); $(element).trigger('submit');
dLog('after submit'); // dLog('after submit');
return cancelEvent(e); return cancelEvent(e);
} }
}); });
@ -261,9 +266,7 @@ angular.module('myApp.directives', ['myApp.filters'])
$('body').on('dragenter dragleave dragover drop', onDragDropEvent); $('body').on('dragenter dragleave dragover drop', onDragDropEvent);
scope.$on('ui_history_change', focusField); scope.$on('ui_peer_change ui_history_change ui_message_send', focusField);
scope.$on('ui_message_send', focusField);
scope.$on('$destroy', function cleanup() { scope.$on('$destroy', function cleanup() {
$('body').off('dragenter dragleave dragover drop', onDragDropEvent); $('body').off('dragenter dragleave dragover drop', onDragDropEvent);
}); });

6
app/js/lib/mtproto.js
View File

@ -1566,10 +1566,10 @@ factory('MtpNetworkerFactory', function (MtpDcConfigurator, MtpMessageIdGenerato
serializer.storeInt(962726977, 'InokeWithLayer10'); serializer.storeInt(962726977, 'InokeWithLayer10');
serializer.storeInt(0x69796de9, 'initConnection'); serializer.storeInt(0x69796de9, 'initConnection');
serializer.storeInt(777, 'api_id'); serializer.storeInt(777, 'api_id');
serializer.storeString(navigator.userAgent, 'device_model'); serializer.storeString(navigator.userAgent || 'Unknown UserAgent', 'device_model');
serializer.storeString(navigator.platform, 'system_version'); serializer.storeString(navigator.platform || 'Unknown Platform', 'system_version');
serializer.storeString('0.1', 'app_version'); serializer.storeString('0.1', 'app_version');
serializer.storeString(navigator.language, 'lang_code'); serializer.storeString(navigator.language || 'en', 'lang_code');
} }
serializer.storeMethod(method, params); serializer.storeMethod(method, params);

213
app/js/services.js
View File

@ -405,7 +405,7 @@ angular.module('myApp.services', [])
} }
}) })
.service('AppMessagesManager', function ($q, $rootScope, $filter, $sanitize, ApiUpdatesManager, AppUsersManager, AppChatsManager, AppPeersManager, AppPhotosManager, AppVideoManager, AppDocsManager, MtpApiManager, MtpApiFileManager, RichTextProcessor) { .service('AppMessagesManager', function ($q, $rootScope, $filter, $sanitize, $location, ApiUpdatesManager, AppUsersManager, AppChatsManager, AppPeersManager, AppPhotosManager, AppVideoManager, AppDocsManager, MtpApiManager, MtpApiFileManager, RichTextProcessor, NotificationsManager) {
var messagesStorage = {}; var messagesStorage = {};
var messagesForHistory = {}; var messagesForHistory = {};
@ -415,6 +415,8 @@ angular.module('myApp.services', [])
var pendingByMessageID = {}; var pendingByMessageID = {};
var tempID = -1; var tempID = -1;
NotificationsManager.start();
function getDialogs (offset, limit) { function getDialogs (offset, limit) {
if (dialogsStorage.count !== null && dialogsStorage.dialogs.length >= offset + limit) { if (dialogsStorage.count !== null && dialogsStorage.dialogs.length >= offset + limit) {
return $q.when({ return $q.when({
@ -494,7 +496,7 @@ angular.module('myApp.services', [])
peer: inputPeer, peer: inputPeer,
offset: offset, offset: offset,
limit: limit, limit: limit,
max_id: 0 max_id: maxID || 0
}).then(function (historyResult) { }).then(function (historyResult) {
AppUsersManager.saveApiUsers(historyResult.users); AppUsersManager.saveApiUsers(historyResult.users);
AppChatsManager.saveApiChats(historyResult.chats); AppChatsManager.saveApiChats(historyResult.chats);
@ -519,6 +521,7 @@ angular.module('myApp.services', [])
angular.forEach(historyResult.messages, function (message) { angular.forEach(historyResult.messages, function (message) {
historyStorage.history.push(message.id); historyStorage.history.push(message.id);
}); });
// dLog('history storage final', angular.copy(historyStorage.history), historyResult.messages, maxID, offset);
deferred.resolve({ deferred.resolve({
count: historyStorage.count, count: historyStorage.count,
@ -557,7 +560,7 @@ angular.module('myApp.services', [])
if (!historyStorage || if (!historyStorage ||
!historyStorage.history.length || !historyStorage.history.length ||
foundDialog[0] && !foundDialog[0].unread_count) { foundDialog[0] && !foundDialog[0].unread_count) {
// dLog('bad1'); // dLog('bad1', historyStorage, foundDialog[0]);
return false; return false;
} }
@ -866,8 +869,8 @@ angular.module('myApp.services', [])
return message; return message;
} }
function wrapForHistory (msgID, force) { function wrapForHistory (msgID) {
if (!force && messagesForHistory[msgID] !== undefined) { if (messagesForHistory[msgID] !== undefined) {
return messagesForHistory[msgID]; return messagesForHistory[msgID];
} }
@ -983,6 +986,58 @@ angular.module('myApp.services', [])
dialog.top_message = message.id; dialog.top_message = message.id;
dialogsStorage.dialogs.unshift(dialog); dialogsStorage.dialogs.unshift(dialog);
$rootScope.$broadcast('dialogs_update', dialog); $rootScope.$broadcast('dialogs_update', dialog);
if ($rootScope.idle.isIDLE && !message.out && message.unread) {
var fromUser = AppUsersManager.getUser(message.from_id);
var fromPhoto = AppUsersManager.getUserPhoto(message.from_id, 'User');
var peerString;
var notification = {},
notificationPhoto;
if (peerID > 0) {
notification.title = (fromUser.first_name || '') +
(fromUser.first_name && fromUser.last_name ? ' ' : '') +
(fromUser.last_name || '');
notification.message = message.message;
notificationPhoto = fromPhoto;
peerString = AppUsersManager.getUserString(peerID);
} else {
notification.title = fromUser.first_name || fromUser.last_name || 'Somebody' +
' @ ' +
AppChatsManager.getChat(-peerID).title || 'Unknown chat';
notification.message = message.message;
notificationPhoto = AppChatsManager.getChatPhoto(-peerID);
peerString = AppChatsManager.getChatString(-peerID);
}
notification.onclick = function () {
$location.url('/im?p=' + peerString);
};
notification.image = notificationPhoto.placeholder;
if (notificationPhoto.location) {
MtpApiFileManager.downloadSmallFile(notificationPhoto.location, notificationPhoto.size).then(function (url) {
notification.image = url;
if (message.unread) {
// dLog(111, notification);
NotificationsManager.notify(notification);
}
});
} else {
// dLog(222, notification);
NotificationsManager.notify(notification);
}
}
break; break;
case 'updateReadMessages': case 'updateReadMessages':
@ -1685,3 +1740,151 @@ angular.module('myApp.services', [])
} }
}) })
.service('IdleManager', function ($rootScope, $window, $timeout) {
$rootScope.idle = {isIDLE: false};
var toPromise;
return {
start: start
};
function start () {
$($window).on('blur focus keydown mousedown touchstart', onEvent);
}
function onEvent (e) {
// dLog('event', e.type);
if (e.type == 'mousemove') {
$($window).off('mousemove', onEvent);
}
var isIDLE = e.type == 'blur' || e.type == 'timeout' ? true : false;
$timeout.cancel(toPromise);
if (!isIDLE) {
// dLog('update timeout');
toPromise = $timeout(function () {
onEvent({type: 'timeout'});
}, 30000);
}
if ($rootScope.idle.isIDLE == isIDLE) {
return;
}
// dLog('IDLE changed', isIDLE);
$rootScope.$apply(function () {
$rootScope.idle.isIDLE = isIDLE;
});
if (isIDLE && e.type == 'timeout') {
$($window).on('mousemove', onEvent);
}
}
})
.service('NotificationsManager', function ($rootScope, $window, $timeout, $interval, IdleManager) {
var notificationsUiSupport = window.webkitNotifications !== undefined;
var notificationsShown = [];
var notificationsCount = 0;
var titleBackup = document.title,
titlePromise;
$rootScope.$watch('idle.isIDLE', function (newVal) {
// dLog('isIDLE watch', newVal);
$interval.cancel(titlePromise);
if (!newVal) {
notificationsCount = 0;
document.title = titleBackup;
notificationsClear();
} else {
titleBackup = document.title;
titlePromise = $interval(function () {
var time = +new Date();
// dLog('check title', notificationsCount, time % 2000 > 1000);
if (!notificationsCount || time % 2000 > 1000) {
document.title = titleBackup;
} else {
document.title = notificationsCount + ' notifications';
}
}, 1000);
}
});
return {
start: start,
notify: notify
};
function start () {
if (!notificationsUiSupport) {
return false;
}
var havePermission = window.webkitNotifications.checkPermission();
// dLog('perm', havePermission);
if (havePermission != 0) { // 0 is PERMISSION_ALLOWED
$($window).on('click', requestPermission);
}
$($window).on('beforeunload', notificationsClear);
}
function requestPermission() {
window.webkitNotifications.requestPermission();
$($window).off('click', requestPermission);
}
function notify (data) {
// dLog('notify', $rootScope.idle.isIDLE);
if (!$rootScope.idle.isIDLE) {
return false;
}
notificationsCount++;
if (!notificationsUiSupport ||
window.webkitNotifications.checkPermission() != 0) {
return false;
}
var notification = window.webkitNotifications.createNotification(
data.image || '',
data.title || '',
data.message || ''
);
notification.onclick = function () {
notification.close();
window.focus();
notificationsClear();
if (data.onclick) {
data.onclick();
}
};
// dLog('notify', notification);
notification.show();
notificationsShown.push(notification);
};
function notificationsClear() {
angular.forEach(notificationsShown, function (notification) {
notification.close();
});
notificationsShown = [];
}
})

12
app/partials/message.html
View File

@ -19,10 +19,10 @@
removed group photo removed group photo
</span> </span>
<span ng-switch-when="messageActionChatAddUser"> <span ng-switch-when="messageActionChatAddUser">
invited <span ng-bind-html="historyMessage.action.user.rFullName"></span> invited <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
</span> </span>
<span ng-switch-when="messageActionChatDeleteUser"> <span ng-switch-when="messageActionChatDeleteUser">
kicked <span ng-bind-html="historyMessage.action.user.rFullName"></span> kicked <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
</span> </span>
<span ng-switch-default> <span ng-switch-default>
@ -51,7 +51,7 @@
<div class="im_message_body"> <div class="im_message_body">
<div class="im_message_author" ng-bind-html="historyMessage.fromUser.rFirstName"></div> <a class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
<div class="im_message_media" ng-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" ng-switch="historyMessage.media._"> <div class="im_message_media" ng-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" ng-switch="historyMessage.media._">
@ -69,8 +69,9 @@
<div ng-switch-when="messageMediaDocument"> <div ng-switch-when="messageMediaDocument">
<a class="im_message_document" href="" ng-click="openDoc(historyMessage.media.document.id)"> <a class="im_message_document" href="" ng-click="openDoc(historyMessage.media.document.id)">
<div class="im_message_document_size">{{historyMessage.media.document.size | formatSize}}</div>
<i class="icon icon-document"></i> <i class="icon icon-document"></i>
<div class="im_message_document_name"><strong>{{historyMessage.media.document.file_name}}</strong> {{historyMessage.media.document.size | formatSize}}</div> <div class="im_message_document_name">{{historyMessage.media.document.file_name}}</div>
</a> </a>
<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">
@ -95,8 +96,9 @@
</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 im_message_upload_{{historyMessage.media.type}}">
<div class="im_message_document_size">{{historyMessage.media.size | formatSize}}</div>
<i class="icon icon-document"></i> <i class="icon icon-document"></i>
<div class="im_message_document_name"><strong>{{historyMessage.media.file_name}}</strong> {{historyMessage.media.size | formatSize}}</div> <div class="im_message_document_name">{{historyMessage.media.file_name}}</div>
<div class="im_message_upload_progress_wrap"> <div class="im_message_upload_progress_wrap">
<div class="progress tg_up_progress"> <div class="progress tg_up_progress">