Media filter draft, delete message support

app/css/app.css

@@ -694,20 +694,59 @@ a.im_dialog:hover .im_dialog_date {
   margin-left: 5px;
 }
 .im_history_panel_info_link,
-.im_history_panel_edit_link {
+.im_history_panel_edit_link,
-  color: #3a6d99;
+.im_history_panel_return_link,
+.im_history_panel_media_dropdown .dropdown-toggle {
   font-size: 13px;
   font-weight: normal;
   padding-top: 5px;
   line-height: 1;
 }
-.im_history_panel_info_link:hover,
+.im_history_panel_media_dropdown {
-.im_history_panel_edit_link:hover {
+  padding-top: 3px;
-  text-decoration: underline;
+}
+.im_history_panel_edit_link,
+.im_history_panel_return_link,
+.im_history_panel_media_dropdown {
+  font-size: 13px;
+  margin-right: 20px;
+}
+.im_history_panel_return_count {
+  margin-left: 5px;
 }
 
-.im_history_panel_edit_link {
+.im_history_panel_media_dropdown .dropdown-menu > li > a {
-  margin-right: 10px;
+  font-size: 13px;
+}
+
+.icon-caret {
+  width: 8px;
+  height: 4px;
+
+  display: inline-block;
+  vertical-align: text-top;
+  margin-top: 7px;
+  margin-left: 6px;
+
+  background: url(../img/icons/IconsetW.png?1) -17px -444px no-repeat;
+  background-size: 42px 460px;
+}
+.is_1x .icon-caret {
+  background-image: url(../img/icons/IconsetW_1x.png?2);
+}
+
+.im_history_panel_media_dropdown .dropdown-menu {
+  border-radius: 2px;
+  right: auto;
+  left: -15px;
+  margin-top: 13px;
+  padding: 0;
+
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
+}
+.dropdown-menu > li > a {
+  padding: 3px 14px;
 }
 
 

app/js/controllers.js

@@ -308,15 +308,20 @@ angular.module('myApp.controllers', [])
     StatusManager.start();
 
     $scope.history = [];
+    $scope.mediaType = false;
     $scope.selectedMsgs = {};
     $scope.selectedCount = 0;
     $scope.selectActions = false;
+    $scope.missedCount = 0;
+    $scope.typing = {};
+    $scope.state = {};
+
     $scope.toggleMessage = toggleMessage;
     $scope.selectedDelete = selectedDelete;
     $scope.selectedCancel = selectedCancel;
     $scope.toggleEdit = toggleEdit;
-    $scope.typing = {};
+    $scope.toggleMedia = toggleMedia;
-    $scope.state = {};
+    $scope.showPeerInfo = showPeerInfo;
 
     var peerID,
         offset = 0,
@@ -333,10 +338,11 @@ angular.module('myApp.controllers', [])
 
       $scope.curDialog.peerID = peerID;
       $scope.curDialog.inputPeer = AppPeersManager.getInputPeer(newPeer);
+      $scope.mediaType = false;
 
       if (peerID) {
         updateHistoryPeer(true);
-        loadHistory(peerID);
+        loadHistory();
       } else {
         showEmptyHistory();
       }
@@ -374,7 +380,15 @@ angular.module('myApp.controllers', [])
         return;
       }
       // console.trace('load history');
-      AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, limit).then(function (historyResult) {
+
+      var inputMediaFilter = $scope.mediaType && {_: $scope.mediaType == 'photos' ? 'inputMessagesFilterPhotoVideo' : 'inputMessagesFilterDocument'},
+          getMessagesPromise = inputMediaFilter
+        ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID, startLimit)
+        : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, startLimit);
+
+      getMessagesPromise.then(function (historyResult) {
+        console.log('got', maxID, historyResult);
+
         offset += limit;
         hasMore = offset < historyResult.count;
         maxID = historyResult.history[historyResult.history.length - 1];
@@ -394,9 +408,14 @@ angular.module('myApp.controllers', [])
       offset = 0;
       maxID = 0;
 
-      var curJump = ++jump;
+      var curJump = ++jump,
+          inputMediaFilter = $scope.mediaType && {_: $scope.mediaType == 'photos' ? 'inputMessagesFilterPhotoVideo' : 'inputMessagesFilterDocument'},
+          getMessagesPromise = inputMediaFilter
+        ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID, startLimit)
+        : AppMessagesManager.getHistory($scope.curDialog.inputPeer, $scope.mediaType, maxID, startLimit);
 
-      AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, startLimit).then(function (historyResult) {
+      getMessagesPromise.then(function (historyResult) {
+        console.log('got', historyResult);
         if (curJump != jump) return;
 
         offset += startLimit;
@@ -476,6 +495,22 @@ angular.module('myApp.controllers', [])
       }
     }
 
+    function toggleMedia (mediaType) {
+      if (mediaType) {
+        $scope.missedCount = 0;
+      }
+      $scope.mediaType = mediaType || false;
+      loadHistory();
+    }
+
+    function showPeerInfo () {
+      if ($scope.curDialog.peerID > 0) {
+        $rootScope.openUser($scope.curDialog.peerID)
+      } else if ($scope.curDialog.peerID < 0) {
+        $rootScope.openChat(-$scope.curDialog.peerID)
+      }
+    }
+
 
     var typingTimeouts = {};
 

app/js/lib/schema.tl.txt

@@ -222,6 +222,7 @@ inputMessagesFilterEmpty#57e2f66c = MessagesFilter;
 inputMessagesFilterPhotos#9609a51c = MessagesFilter;
 inputMessagesFilterVideo#9fc00e65 = MessagesFilter;
 inputMessagesFilterPhotoVideo#56e9f0e4 = MessagesFilter;
+inputMessagesFilterDocument#9eddf188 = MessagesFilter;
 
 updateNewMessage#13abdb3 message:Message pts:int = Update;
 updateMessageID#4e90bfd6 id:int random_id:long = Update;

app/js/services.js

@@ -746,6 +746,36 @@ angular.module('myApp.services', [])
     return deferred.promise;
   }
 
+  function getSearch (inputPeer, query, inputFilter, maxID, limit) {
+    return MtpApiManager.invokeApi('messages.search', {
+      peer: inputPeer,
+      q: query || '',
+      filter: inputFilter || {_: 'inputMessagesFilterEmpty'},
+      min_date: 0,
+      max_date: 0,
+      limit: limit,
+      max_id: maxID || 0
+    }).then(function (searchResult) {
+      AppUsersManager.saveApiUsers(searchResult.users);
+      AppChatsManager.saveApiChats(searchResult.chats);
+      saveMessages(searchResult.messages);
+
+      var foundCount = searchResult._ == 'messages.messagesSlice'
+        ? searchResult.count
+        : searchResult.messages.length;
+
+      var foundMsgs = [];
+      angular.forEach(searchResult.messages, function (message) {
+        foundMsgs.push(message.id);
+      });
+
+      return {
+        count: foundCount,
+        history: foundMsgs
+      };
+    });
+  }
+
   function deleteMessages (messageIDs) {
     return MtpApiManager.invokeApi('messages.deleteMessages', {
       id: messageIDs
@@ -1486,6 +1516,7 @@ angular.module('myApp.services', [])
   return {
     getDialogs: getDialogs,
     getHistory: getHistory,
+    getSearch: getSearch,
     readHistory: readHistory,
     flushHistory: flushHistory,
     deleteMessages: deleteMessages,

app/partials/im.html

@@ -31,38 +31,54 @@
             <div class="im_history_panel clearfix" ng-controller="AppImPanelController">
               <div class="im_history_panel_title">
 
-                <div ng-if="historyPeer.id < 0">
+                <a class="im_history_panel_info_link pull-right" ng-click="showPeerInfo()">Info</a>
-                  <span class="im_history_panel_info_link pull-right">Info</span>
+                <a class="im_history_panel_edit_link pull-right" ng-click="toggleEdit()">Edit</a>
-                  <span class="im_history_panel_edit_link pull-right" ng-click="toggleEdit()">Edit</span>
+
-                  <h4 ng-click="openChat(-historyPeer.id)">
+                <div class="dropdown im_history_panel_media_dropdown pull-right">
-                    <span ng-bind-html="historyPeer.data.rTitle"></span>
+                  <a class="dropdown-toggle">Media<i class="icon icon-caret"></i></a>
-                    <small class="im_chat_users">
+                  <ul class="dropdown-menu">
-                      <ng-pluralize count="historyPeer.data.participants_count"
+                    <li>
-                                       when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
+                      <a ng-click="toggleMedia('photos')">Photos &amp; Videos</a>
-                      </ng-pluralize>
+                    </li>
-                    </small>
+                    <li>
-                  </h4>
+                      <a ng-click="toggleMedia('documents')">Documents</a>
-                </div>
+                    </li>
-
+                  </ul>
-                <div ng-if="historyPeer.id > 0">
-                  <span class="im_history_panel_info_link pull-right">Info</span>
-                  <span class="im_history_panel_edit_link pull-right" ng-click="toggleEdit()">Edit</span>
-                  <h4 ng-click="openUser(historyPeer.id)">
-                    <span ng-bind-html="historyPeer.data.rFullName"></span>
-                    <small class="im_peer_online">{{historyPeer.data | userStatus}}</small>
-                  </h4>
                 </div>
+                <a ng-if="mediaType !== false" class="im_history_panel_return_link pull-right" ng-click="toggleMedia()">
+                  Show all messages
+                  <strong class="im_history_panel_return_count" ng-show="missedCount > 0">+{{missedCount}}</strong>
+                </a>
+
+                <h4 ng-if="mediaType !== false" ng-switch="mediaType">
+                  <span ng-switch-when="photos"> Photos &amp; Videos </span>
+                  <span ng-switch-when="documents"> Documents </span>
+                </h4>
+
+                <h4 ng-if="mediaType === false &amp;&amp; historyPeer.id < 0" ng-click="showPeerInfo()">
+                  <span ng-bind-html="historyPeer.data.rTitle"></span>
+                  <small class="im_chat_users">
+                    <ng-pluralize count="historyPeer.data.participants_count"
+                                     when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
+                    </ng-pluralize>
+                  </small>
+                </h4>
+
+                <h4 ng-if="mediaType === false &amp;&amp; historyPeer.id > 0" ng-click="showPeerInfo()">
+                  <span ng-bind-html="historyPeer.data.rFullName"></span>
+                  <small class="im_peer_online">{{historyPeer.data | userStatus}}</small>
+                </h4>
 
               </div>
 
             </div>
 
-            <div class="im_edit_panel_wrap clearfix" ng-if="selectActions">
+            <div class="im_edit_panel_wrap clearfix" ng-show="selectActions">
               <a class="im_edit_delete_link" ng-click="selectedDelete()"><i class="icon icon-delete"></i></a>
               <a class="im_edit_cancel_link" ng-click="selectedCancel()">Cancel</a>
               <h4 class="im_edit_panel_title">
                 <ng-pluralize count="selectedCount"
-                                 when="{'0': 'No messages', 'one': '1 message', 'other': '{} messages'}">
+                                 when="{'0': 'Select messages', 'one': '1 message', 'other': '{} messages'}">
                 </ng-pluralize>
               </h4>
             </div>
@@ -97,20 +113,13 @@
             <div class="im_send_form_wrap1">
 
               <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
-                <div class="pull-right im_panel_peer_photo" ng-click="openUser(historyPeer.id)" ng-if="historyPeer.id > 0">
+                <div class="pull-right im_panel_peer_photo" ng-click="showPeerInfo()">
-                  <img
-                    class="im_panel_peer_photo"
-                    my-load-thumb
-                    thumb="historyPeer.photo"
-                  />
-                  <i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i>
-                </div>
-                <div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0">
                   <img
                     class="im_panel_peer_photo"
                     my-load-thumb
                     thumb="historyPeer.photo"
                   />
+                  <i class="icon im_panel_peer_online" ng-show="historyPeer.id > 0 &amp;&amp; historyPeer.data.status._ == 'userStatusOnline'"></i>
                 </div>
                 <div class="pull-left im_panel_own_photo">
                   <img