Added mozilla notifications support, added search clear, fixed minor bugs

app/css/app.css

@@ -400,6 +400,14 @@ fieldset[disabled] .btn-tg.active {
   background-color: #FFF;
 }
 
+.im_dialogs_search_clear {
+  position: absolute;
+  margin-left: 260px;
+  margin-top: -25px;
+  color: #999;
+  font-size: 15px;
+}
+
 
 
 .im_dialogs_wrap {
@@ -890,7 +898,6 @@ div.im_message_video_thumb {
 }
 div.im_message_author,
 div.im_message_body {
-  border-radius: 2px;
   display: block;
   overflow: hidden;
 }

app/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
   <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
   <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
-  <link rel="stylesheet" href="css/app.css?10"/>
+  <link rel="stylesheet" href="css/app.css?11"/>
   <link rel="icon" href="favicon.ico" type="image/x-icon">
 
   <meta property="og:title" content="Webogram">
@@ -52,10 +52,10 @@
 
   <script type="text/javascript" src="js/util.js"></script>
   <script type="text/javascript" src="js/app.js?8"></script>
-  <script type="text/javascript" src="js/services.js?10"></script>
+  <script type="text/javascript" src="js/services.js?11"></script>
   <script type="text/javascript" src="js/controllers.js?16"></script>
   <script type="text/javascript" src="js/filters.js?3"></script>
-  <script type="text/javascript" src="js/directives.js?9"></script>
+  <script type="text/javascript" src="js/directives.js?10"></script>
 
 </body>
 </html>

app/js/app.js

@@ -55,7 +55,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc
   // $locationProvider.html5Mode(true);
   $routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'});
   $routeProvider.when('/login', {templateUrl: 'partials/login.html?2', controller: 'AppLoginController'});
-  $routeProvider.when('/im', {templateUrl: 'partials/im.html?5', controller: 'AppIMController', reloadOnSearch: false});
+  $routeProvider.when('/im', {templateUrl: 'partials/im.html?6', controller: 'AppIMController', reloadOnSearch: false});
   $routeProvider.otherwise({redirectTo: '/'});
 
 }]);

app/js/directives.js

@@ -25,7 +25,7 @@ angular.module('myApp.directives', ['myApp.filters'])
       restrict: 'AE',
       scope: true,
       translude: false,
-      templateUrl: 'partials/message.html?5'
+      templateUrl: 'partials/message.html?6'
     };
   })
 

app/js/services.js

@@ -1013,6 +1013,7 @@ angular.module('myApp.services', [])
 
     notification.message = notificationMessage;
     notification.image = notificationPhoto.placeholder;
+    notification.key = 'msg' + message.id;
 
     if (notificationPhoto.location) {
       MtpApiFileManager.downloadSmallFile(notificationPhoto.location, notificationPhoto.size).then(function (url) {
@@ -1117,6 +1118,8 @@ angular.module('myApp.services', [])
               if (foundDialog) {
                 dialogsUpdated[peerID] = --foundDialog[0].unread_count;
               }
+
+              NotificationsManager.cancel('msg' + messageID);
             }
           }
         }
@@ -1917,8 +1920,10 @@ angular.module('myApp.services', [])
 
 .service('NotificationsManager', function ($rootScope, $window, $timeout, $interval, MtpApiManager, AppPeersManager, IdleManager) {
 
-  var notificationsUiSupport = window.webkitNotifications !== undefined;
-  var notificationsShown = [];
+  var notificationsUiSupport = 'Notification' in window;
+  var notificationsShown = {};
+  // var lastClosed = [];
+  var notificationIndex = 0;
   var notificationsCount = 0;
   var peerSettings = {};
   var faviconEl = $('link[rel="icon"]');
@@ -1956,6 +1961,7 @@ angular.module('myApp.services', [])
   return {
     start: start,
     notify: notify,
+    cancel: notificationCancel,
     getPeerSettings: getPeerSettings
   };
 
@@ -1981,25 +1987,23 @@ angular.module('myApp.services', [])
       return false;
     }
 
-    var havePermission = window.webkitNotifications.checkPermission();
-    // console.log('perm', havePermission);
-
-    if (havePermission != 0) { // 0 is PERMISSION_ALLOWED
+    if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
       $($window).on('click', requestPermission);
     }
 
+
     try {
       $($window).on('beforeunload', notificationsClear);
     } catch (e) {}
   }
 
   function requestPermission() {
-    window.webkitNotifications.requestPermission();
+    Notification.requestPermission();
     $($window).off('click', requestPermission);
   }
 
   function notify (data) {
-    // console.log('notify', $rootScope.idle.isIDLE);
+    // console.log('notify', $rootScope.idle.isIDLE, notificationsUiSupport);
     if (!$rootScope.idle.isIDLE) {
       return false;
     }
@@ -2007,15 +2011,17 @@ angular.module('myApp.services', [])
     notificationsCount++;
 
     if (!notificationsUiSupport ||
-        window.webkitNotifications.checkPermission() != 0) {
+        Notification.permission !== 'granted') {
       return false;
     }
 
-    var notification = window.webkitNotifications.createNotification(
-      data.image || '',
-      data.title || '',
-      data.message || ''
-    );
+    var idx = ++notificationIndex,
+        key = data.key || 'k' + idx;
+
+    var notification = new Notification(data.title, {
+      icon: data.image || '',
+      body: data.message || ''
+    });
 
     notification.onclick = function () {
       notification.close();
@@ -2026,24 +2032,39 @@ angular.module('myApp.services', [])
       }
     };
 
+    notification.onclose = function () {
+      delete notificationsShown[key];
+      // lastClosed.push(+new Date());
+      notificationsClear();
+    };
+
     // console.log('notify', notification);
 
     notification.show();
 
-    notificationsShown.push(notification);
+    notificationsShown[key] = notification;
   };
 
+  function notificationCancel (key) {
+    var notification = notificationsShown[key];
+    if (notification) {
+      try {
+        if (notification.close) {
+          notification.close();
+        }
+      } catch (e) {}
+    }
+  }
+
   function notificationsClear() {
     angular.forEach(notificationsShown, function (notification) {
       try {
         if (notification.close) {
           notification.close()
-        } else if (notification.cancel) {
-          notification.cancel();
         }
       } catch (e) {}
     });
-    notificationsShown = [];
+    notificationsShown = {};
   }
 })
 

app/partials/im.html

@@ -7,6 +7,9 @@
     <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController">
       <div class="im_dialogs_search">
         <input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="searchQuery"/>
+        <a class="im_dialogs_search_clear" ng-click="searchQuery = ''" ng-show="searchQuery.length">
+          <span class=" glyphicon glyphicon-remove"></span>
+        </a>
       </div>
       <div my-dialogs-list class="im_dialogs_col">
         <div class="im_dialogs_wrap nano">

app/partials/message.html

@@ -80,7 +80,7 @@
 
       <div class="im_message_media" ng-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" ng-switch="historyMessage.media._">
 
-        <a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" >
+        <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;">
           <img
             class="im_message_photo_thumb"
             my-load-thumb
@@ -90,7 +90,7 @@
           />
         </a>
 
-        <a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)">
+        <a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)" style="width: {{historyMessage.media.video.thumb.width}}px;">
           <img
             class="im_message_video_thumb"
             my-load-thumb