Added group rename, group photo update, live photo updates

app/css/app.css

@@ -1529,13 +1529,46 @@ img.img_fullsize {
 .chat_modal_wrap .modal-body {
   padding: 23px 25px 15px;
 }
-.chat_modal_image_wrap {
+.chat_modal_photo_wrap {
   width: 120px;
   margin-right: 22px;
 }
-.chat_modal_image {
+.chat_modal_photo {
+  position: relative;
+  overflow: hidden;
+}
+.chat_modal_photo_change_wrap {
+  background: rgba(0,0,0,0.6);
+  padding: 2px 5px;
+  position: absolute;
+  opacity: 0;
+  bottom: -30px;
+
+  -webkit-transition: all ease-in-out 0.2s;
+  transition: all ease-in-out 0.2s;
   width: 120px;
-  height: 120px;
+}
+.chat_modal_photo:hover .chat_modal_photo_change_wrap {
+  bottom: 0;
+  opacity: 1;
+}
+
+.chat_modal_photo_update_link,
+.chat_modal_photo_delete_link,
+.chat_modal_photo_loading {
+  display: block;
+  color: rgba(255,255,255,0.8);
+  text-align: center;
+  padding: 2px 0;
+}
+.chat_modal_photo_update_link:hover,
+.chat_modal_photo_delete_link:hover {
+  color: #FFF;
+  text-decoration: none;
+}
+.chat_modal_photo_update_link {
+  position: relative;
+  overflow: hidden;
 }
 .chat_modal_header {
   margin: 0 0 5px;

app/js/controllers.js

@@ -795,7 +795,7 @@ angular.module('myApp.controllers', [])
     };
   })
 
-  .controller('ChatModalController', function ($scope, $timeout, $rootScope, AppUsersManager, AppChatsManager, MtpApiManager, NotificationsManager, AppMessagesManager, AppPeersManager, ApiUpdatesManager, ContactsSelectService) {
+  .controller('ChatModalController', function ($scope, $timeout, $rootScope, $modal, AppUsersManager, AppChatsManager, MtpApiManager, MtpApiFileManager, NotificationsManager, AppMessagesManager, AppPeersManager, ApiUpdatesManager, ContactsSelectService) {
 
     $scope.chatFull = AppChatsManager.wrapForFull($scope.chatID, {});
 
@@ -828,39 +828,34 @@ angular.module('myApp.controllers', [])
       });
     });
 
+    function onStatedMessage (statedMessage) {
+      AppUsersManager.saveApiUsers(statedMessage.users);
+      AppChatsManager.saveApiChats(statedMessage.chats);
+
+      if (ApiUpdatesManager.saveSeq(statedMessage.seq)) {
+        ApiUpdatesManager.saveUpdate({
+          _: 'updateNewMessage',
+          message: statedMessage.message,
+          pts: statedMessage.pts
+        });
+      }
+
+      $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
+    }
+
 
     $scope.leaveGroup = function () {
       MtpApiManager.invokeApi('messages.deleteChatUser', {
         chat_id: $scope.chatID,
         user_id: {_: 'inputUserSelf'}
-      }).then(function (result) {
+      }).then(onStatedMessage);
-        if (ApiUpdatesManager.saveSeq(result.seq)) {
-          ApiUpdatesManager.saveUpdate({
-            _: 'updateNewMessage',
-            message: result.message,
-            pts: result.pts
-          });
-        }
-
-        $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
-      });
     };
 
     $scope.returnToGroup = function () {
       MtpApiManager.invokeApi('messages.addChatUser', {
         chat_id: $scope.chatID,
         user_id: {_: 'inputUserSelf'}
-      }).then(function (result) {
+      }).then(onStatedMessage);
-        if (ApiUpdatesManager.saveSeq(result.seq)) {
-          ApiUpdatesManager.saveUpdate({
-            _: 'updateNewMessage',
-            message: result.message,
-            pts: result.pts
-          });
-        }
-
-        $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
-      });
     };
 
 
@@ -892,21 +887,6 @@ angular.module('myApp.controllers', [])
 
         $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
       });
-
-      MtpApiManager.invokeApi('messages.addChatUser', {
-        chat_id: $scope.chatID,
-        user_id: {_: 'inputUserSelf'}
-      }).then(function (result) {
-        if (ApiUpdatesManager.saveSeq(result.seq)) {
-          ApiUpdatesManager.saveUpdate({
-            _: 'updateNewMessage',
-            message: result.message,
-            pts: result.pts
-          });
-        }
-
-        $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
-      });
     };
 
     $scope.kickFromGroup = function (userID) {
@@ -917,17 +897,7 @@ angular.module('myApp.controllers', [])
       MtpApiManager.invokeApi('messages.deleteChatUser', {
         chat_id: $scope.chatID,
         user_id: {_: 'inputUserForeign', user_id: userID, access_hash: user.access_hash || '0'}
-      }).then(function (result) {
+      }).then(onStatedMessage);
-        if (ApiUpdatesManager.saveSeq(result.seq)) {
-          ApiUpdatesManager.saveUpdate({
-            _: 'updateNewMessage',
-            message: result.message,
-            pts: result.pts
-          });
-        }
-
-        $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
-      });
     };
 
 
@@ -942,6 +912,54 @@ angular.module('myApp.controllers', [])
 
     };
 
+
+    $scope.photo = {};
+
+    $scope.$watch('photo.file', onPhotoSelected);
+
+    function onPhotoSelected (photo) {
+      if (!photo || !photo.hasOwnProperty('name')) {
+        return;
+      }
+      $scope.photo.updating = true;
+      MtpApiFileManager.uploadFile(photo).then(function (inputFile) {
+        MtpApiManager.invokeApi('messages.editChatPhoto', {
+          chat_id: $scope.chatID,
+          photo: {
+            _: 'inputChatUploadedPhoto',
+            file: inputFile,
+            crop: {_: 'inputPhotoCropAuto'}
+          }
+        }).then(function (updateResult) {
+          onStatedMessage(updateResult);
+          $scope.photo.updating = false;
+        });
+      });
+    };
+
+    $scope.deletePhoto = function () {
+      $scope.photo.updating = true;
+      MtpApiManager.invokeApi('messages.editChatPhoto', {
+        chat_id: $scope.chatID,
+        photo: {_: 'inputChatPhotoEmpty'}
+      }).then(function (updateResult) {
+        onStatedMessage(updateResult);
+        $scope.photo.updating = false;
+      });
+    };
+
+    $scope.editTitle = function () {
+      var scope = $rootScope.$new();
+      scope.chatID = $scope.chatID;
+
+      $modal.open({
+        templateUrl: 'partials/chat_edit_modal.html?3',
+        controller: 'ChatEditModalController',
+        scope: scope,
+        windowClass: 'contacts_modal_window'
+      });
+    }
+
   })
 
   .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager) {
@@ -1199,3 +1217,37 @@ angular.module('myApp.controllers', [])
     };
 
   })
+
+  .controller('ChatEditModalController', function ($scope, $modalInstance, $rootScope, MtpApiManager, AppUsersManager, AppChatsManager, ApiUpdatesManager) {
+
+    var chat = AppChatsManager.getChat($scope.chatID);
+    $scope.group = {name: chat.title};
+
+    $scope.updateGroup = function () {
+      if (!$scope.group.name) {
+        return;
+      }
+      if ($scope.group.name == chat.title) {
+        return $modalInstance.close();
+      }
+
+      return MtpApiManager.invokeApi('messages.editChatTitle', {
+        chat_id: $scope.chatID,
+        title: $scope.group.name
+      }).then(function (editResult) {
+        AppUsersManager.saveApiUsers(editResult.users);
+        AppChatsManager.saveApiChats(editResult.chats);
+
+        if (ApiUpdatesManager.saveSeq(editResult.seq)) {
+          ApiUpdatesManager.saveUpdate({
+            _: 'updateNewMessage',
+            message: editResult.message,
+            pts: editResult.pts
+          });
+        }
+
+        var peerString = AppChatsManager.getChatString($scope.chatID);
+        $rootScope.$broadcast('history_focus', {peerString: peerString});
+      });
+    };
+  })

app/js/directives.js

@@ -502,14 +502,19 @@ angular.module('myApp.directives', ['myApp.filters'])
     function link (scope, element, attrs) {
       var counter = 0;
 
-      var cachedSrc = MtpApiFileManager.getCachedFile(scope.thumb && scope.thumb.location);
+      var cachedSrc = MtpApiFileManager.getCachedFile(
+        scope.thumb &&
+        scope.thumb.location &&
+        !scope.thumb.location.empty
+      );
+
       if (cachedSrc) {
         element.attr('src', cachedSrc);
       }
 
-      scope.$watch('thumb.location', function (newLocation) {
+      scope.$watchCollection('thumb.location', function (newLocation) {
         var counterSaved = ++counter;
-        if (!newLocation) {
+        if (!newLocation || newLocation.empty) {
           element.attr('src', scope.thumb && scope.thumb.placeholder || 'img/blank.gif');
           return;
         }

app/js/lib/mtproto.js

@@ -1797,7 +1797,7 @@ factory('MtpNetworkerFactory', function (MtpDcConfigurator, MtpMessageIdGenerato
   };
 
   MtpNetworker.prototype.toggleOffline = function(enabled) {
-    console.log('toggle ', enabled, this.dcID, this.iii);
+    // console.log('toggle ', enabled, this.dcID, this.iii);
     if (this.offline !== undefined && this.offline == enabled) {
       return false;
     }

app/js/services.js

@@ -120,6 +120,7 @@ angular.module('myApp.services', [])
 
 .service('AppUsersManager', function ($rootScope, $modal, $modalStack, $filter, MtpApiFileManager, MtpApiManager, RichTextProcessor, SearchIndexManager) {
   var users = {},
+      cachedPhotoLocations = {},
       contactsFillPromise,
       contactsIndex = SearchIndexManager.createIndex();
 
@@ -198,7 +199,11 @@ angular.module('myApp.services', [])
     if (users[apiUser.id] === undefined) {
       users[apiUser.id] = apiUser;
     } else {
-      angular.extend(users[apiUser.id], apiUser);
+      safeReplaceObject(users[apiUser.id], apiUser);
+    }
+
+    if (cachedPhotoLocations[apiUser.id] !== undefined) {
+      safeReplaceObject(cachedPhotoLocations[apiUser.id], apiUser && apiUser.photo && apiUser.photo.photo_small || {empty: true});
     }
   };
 
@@ -222,9 +227,13 @@ angular.module('myApp.services', [])
       }
     };
 
+    if (cachedPhotoLocations[id] === undefined) {
+      cachedPhotoLocations[id] = user && user.photo && user.photo.photo_small || {empty: true};
+    }
+
     return {
       placeholder: 'img/placeholders/' + placeholder + 'Avatar'+((Math.abs(id) % 8) + 1)+'@2x.png',
-      location: user && user.photo && user.photo.photo_small
+      location: cachedPhotoLocations[id]
     };
   }
 
@@ -298,7 +307,12 @@ angular.module('myApp.services', [])
       case 'updateUserPhoto':
         var userID = update.user_id;
         if (users[userID]) {
-          users[userID].photo = update.photo;
+          safeReplaceObject(users[userID].photo, update.photo);
+
+          if (cachedPhotoLocations[userID] !== undefined) {
+            safeReplaceObject(cachedPhotoLocations[userID], update.photo && update.photo.photo_small || {empty: true});
+          }
+
           $rootScope.$broadcast('user_update', userID);
         }
         break;
@@ -321,7 +335,8 @@ angular.module('myApp.services', [])
 })
 
 .service('AppChatsManager', function ($rootScope, $modal, MtpApiFileManager, MtpApiManager, AppUsersManager, RichTextProcessor) {
-  var chats = {};
+  var chats = {},
+      cachedPhotoLocations = {};
 
   function saveApiChats (apiChats) {
     angular.forEach(apiChats, saveApiChat);
@@ -335,7 +350,11 @@ angular.module('myApp.services', [])
     if (chats[apiChat.id] === undefined) {
       chats[apiChat.id] = apiChat;
     } else {
-      angular.extend(chats[apiChat.id], apiChat);
+      safeReplaceObject(chats[apiChat.id], apiChat);
+    }
+
+    if (cachedPhotoLocations[apiChat.id] !== undefined) {
+      safeReplaceObject(cachedPhotoLocations[apiChat.id], apiChat && apiChat.photo && apiChat.photo.photo_small || {empty: true});
     }
   };
 
@@ -350,9 +369,13 @@ angular.module('myApp.services', [])
   function getChatPhoto(id, placeholder) {
     var chat = getChat(id);
 
+    if (cachedPhotoLocations[id] === undefined) {
+      cachedPhotoLocations[id] = chat && chat.photo && chat.photo.photo_small || {empty: true};
+    }
+
     return {
       placeholder: 'img/placeholders/' + placeholder + 'Avatar'+((Math.abs(id) % 4) + 1)+'@2x.png',
-      location: chat && chat.photo && chat.photo.photo_small
+      location: cachedPhotoLocations[id]
     };
   }
 

app/partials/chat_create_modal.html

@@ -2,7 +2,7 @@
 
   <div class="modal-header">
     <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Create Chat</h4>
+    <h4 class="modal-title">Create Group</h4>
   </div>
 
   <div class="modal-body">

app/partials/chat_edit_modal.html

@@ -0,0 +1,30 @@
+<div class="contacts_modal_wrap">
+
+  <div class="modal-header">
+    <a class="modal-close-link" ng-click="$close()">Close</a>
+    <h4 class="modal-title">Edit Group Title</h4>
+  </div>
+
+  <div class="modal-body">
+
+    <form ng-submit="updateGroup()">
+
+      <div class="contacts_modal_group_title">
+        <input class="form-control" my-focused type="text" placeholder="Group name" ng-model="group.name"/>
+      </div>
+
+      <div class="contacts_modal_panel clearfix">
+
+        <div class="contacts_modal_actions pull-right">
+          <button class="btn btn-default" ng-click="$dismiss()"> Cancel </button>
+
+          <button class="btn btn-tg" type="submit"> Save </button>
+        </div>
+
+      </div>
+
+    </form>
+
+  </div>
+
+</div>

app/partials/chat_modal.html

@@ -7,15 +7,34 @@
 
   <div class="modal-body">
 
-    <div class="chat_modal_image_wrap pull-left">
+    <div class="chat_modal_photo_wrap pull-left">
-      <img
+
-        class="chat_modal_image"
+      <div class="chat_modal_photo">
-        my-load-thumb
+        <img
-        thumb="chatFull.thumb"/>
+          class="user_modal_image"
+          my-load-thumb
+          thumb="chatFull.thumb"
+        />
+        <div class="chat_modal_photo_change_wrap" ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; !chatFull.chat.left">
+          <div ng-if="photo.updating" class="chat_modal_photo_loading">Updating<span my-typing-dots></span></div>
+          <div ng-if="!photo.updating">
+            <div class="chat_modal_photo_update_link">
+              <input my-file-upload  type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
+              Update photo
+            </div>
+            <a ng-if="chatFull.thumb.location" href="" ng-click="deletePhoto()" class="chat_modal_photo_delete_link">Delete photo</a>
+          </div>
+        </div>
+      </div>
+
     </div>
 
+
     <div class="chat_modal_info_wrap clearfix">
-      <h4 class="chat_modal_header" ng-bind-html="chatFull.chat.rTitle"></h4>
+      <h4 class="chat_modal_header">
+        <a href="" ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; !chatFull.chat.left" ng-click="editTitle()" ng-bind-html="chatFull.chat.rTitle"></a>
+        <span ng-if="chatFull.chat._ == 'chatForbidden' || chatFull.chat.left" ng-bind-html="chatFull.chat.rTitle"></span>
+      </h4>
       <p class="chat_modal_members_count" ng-if="chatFull.chat.participants_count > 0">
         <ng-pluralize count="chatFull.chat.participants_count"
                          when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">

app/partials/head.html

@@ -28,7 +28,7 @@
         </ul>
 
         <ul ng-if="!offline" class="nav navbar-nav navbar-right">
-          <li ng-if="isLoggedIn"><a href="" ng-click="openGroup()">New Chat</a></li>
+          <li ng-if="isLoggedIn"><a href="" ng-click="openGroup()">New Group</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="openContacts()">Contacts</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
           <li><a  href="https://github.com/zhukov/webogram" target="_blank">About</a></li>