Improved message media directives

Improve webpage attach
Improve updates handling

app/js/directives.js

@@ -176,7 +176,11 @@ angular.module('myApp.directives', ['myApp.filters'])
     }
   })
 
-  .directive('myMessageBody', function(AppPeersManager, AppMessagesManager, AppChatsManager, AppUsersManager, RichTextProcessor) {
+  .directive('myMessageBody', function($compile, AppPeersManager, AppChatsManager, AppUsersManager, AppMessagesManager, RichTextProcessor) {
+
+    var messageMediaCompiled = $compile('<div class="im_message_media" my-message-media="media" message-id="messageId"></div>');
+    var messageKeyboardCompiled = $compile('<div class="im_message_keyboard" my-inline-reply-markup="markup"></div>');
+
     return {
       link: link,
       scope: {
@@ -184,10 +188,10 @@ angular.module('myApp.directives', ['myApp.filters'])
       }
     };
 
-    function updateMessageText (message, element) {
+    function updateMessageText ($scope, element, message) {
       if (typeof message.message !== 'string' ||
           !message.message.length) {
-        element.hide();
+        $('.im_message_text', element).hide();
         return;
       }
       var fromUser = message.from_id && AppUsersManager.getUser(message.from_id);
@@ -210,35 +214,66 @@ angular.module('myApp.directives', ['myApp.filters'])
       }
       var html = RichTextProcessor.wrapRichText(message.message, options);
 
-      element.html(html.valueOf());
+      $('.im_message_text', element).html(html.valueOf());
     }
 
-    function updateMessageMedia(message, element) {
+    function updateMessageMedia($scope, element, message) {
       if (!message.media) {
-        element.hide();
+        $('.im_message_media', element).hide();
         return;
       }
-      switch (message.media._) {
-        case 'messageMediaPhoto':
 
+      var scope = $scope.$new(true);
+      scope.media = message.media;
+      scope.messageId = message.mid;
+      messageMediaCompiled(scope, function (clonedElement) {
+        $('.im_message_media', element).replaceWith(clonedElement);
+      });
+    }
+
+    function updateMessageKeyboard($scope, element, message) {
+      if (!message.reply_markup ||
+          message.reply_markup._ != 'replyInlineMarkup') {
+        $('.im_message_keyboard', element).hide();
+        return;
       }
+
+      var scope = $scope.$new(true);
+      scope.markup = AppMessagesManager.wrapReplyMarkup(message.reply_markup);
+      scope.messageId = message.mid;
+      messageKeyboardCompiled(scope, function (clonedElement) {
+        $('.im_message_keyboard', element).replaceWith(clonedElement);
+      });
+
+      scope.$on('reply_inline_button_press', function (e, button) {
+        AppMessagesManager.replyMarkupButtonPress(message.mid, button);
+      });
     }
 
     function link ($scope, element, attrs) {
       var message = $scope.message;
       var msgID = message.mid;
-      var textElement = $('.im_message_text', element);
 
-      updateMessageText(message, textElement);
+      updateMessageText($scope, element, message);
+      updateMessageMedia($scope, element, message);
+      updateMessageKeyboard($scope, element, message);
 
       if (message.pending) {
         var unlink = $scope.$on('messages_pending', function () {
           if (message.mid != msgID) {
-            updateMessageText(message, textElement);
+            updateMessageText($scope, element, message);
             unlink();
           }
         })
       }
+
+      $scope.$on('message_edit', function (e, data) {
+        if (data.mid != msgID) {
+          return;
+        }
+        console.log('after edit', message);
+        updateMessageKeyboard($scope, element, message);
+      });
     }
   })
 
@@ -304,6 +339,15 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
+  .directive('myMessageMedia', function() {
+    return {
+      scope: {
+        'media': '=myMessageMedia',
+        'messageId': '=messageId'
+      },
+      templateUrl: templateUrl('message_media')
+    };
+  })
   .directive('myMessagePhoto', function(AppPhotosManager) {
     return {
       scope: {
@@ -400,6 +444,24 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
   })
 
+  .directive('myInlineReplyMarkup', function() {
+
+    return {
+      templateUrl: templateUrl('reply_markup'),
+      scope: {
+        'replyMarkup': '=myInlineReplyMarkup'
+      },
+      link: link
+    };
+
+    function link ($scope, element, attrs) {
+      $scope.buttonSend = function (button) {
+        $scope.$emit('reply_inline_button_press', button);
+      }
+    }
+
+  })
+
   .directive('myServiceMessage', function() {
     return {
       templateUrl: templateUrl('message_service')

app/js/messages_manager.js

@@ -2176,6 +2176,18 @@ angular.module('myApp.services')
     return messagesForHistory[msgID] = message;
   }
 
+  function replyMarkupButtonPress(id, button) {
+    var message = getMessage(id);
+    var peerID = getMessagePeer(message);
+    MtpApiManager.invokeApi('messages.getBotCallbackAnswer', {
+      peer: AppPeersManager.getInputPeerByID(peerID),
+      msg_id: getMessageLocalID(id),
+      data: button.data
+    }).then(function (callbackAnswer) {
+      console.info(callbackAnswer.message || 'empty answer');
+    });
+  }
+
   function wrapReplyMarkup (replyMarkup) {
     if (!replyMarkup ||
         replyMarkup._ == 'replyKeyboardHide') {
@@ -2184,8 +2196,12 @@ angular.module('myApp.services')
     if (replyMarkup.wrapped) {
       return replyMarkup;
     }
+    var isInline = replyMarkup._ == 'replyInlineMarkup';
     var count = replyMarkup.rows && replyMarkup.rows.length || 0;
-    if (count > 0 && count <= 4 && !replyMarkup.pFlags.resize) {
+    if (!isInline &&
+        count > 0 &&
+        count <= 4 &&
+        !(replyMarkup.pFlags && replyMarkup.pFlags.resize)) {
       replyMarkup.splitCount = count;
     }
     replyMarkup.wrapped = true;
@@ -2193,11 +2209,7 @@ angular.module('myApp.services')
       angular.forEach(markupRow.buttons, function (markupButton) {
         markupButton.rText = RichTextProcessor.wrapRichText(markupButton.text, {noLinks: true, noLinebreaks: true});
       })
-    })
-
-    if (nextRandomInt(1)) {
-      replyMarkup.rows = replyMarkup.rows.slice(0, 2);
-    }
+    });
     return replyMarkup;
   }
 
@@ -2788,6 +2800,8 @@ angular.module('myApp.services')
           break;
         }
 
+        console.trace(dT(), 'edit message', mid, message);
+
         saveMessages([message], true);
         safeReplaceObject(messagesStorage[mid], message);
         messagesStorage[mid] = message;
@@ -2795,7 +2809,8 @@ angular.module('myApp.services')
         if (messagesForHistory[mid] !== undefined) {
           var wasForHistory = messagesForHistory[mid];
           delete messagesForHistory[mid];
-          var newForHistory = wrapForHistory(message);
+          var newForHistory = wrapForHistory(mid);
+          // console.log('replacing', wasForHistory, 'with', newForHistory);
           safeReplaceObject(wasForHistory, newForHistory);
           messagesForHistory[mid] = newForHistory;
         }
@@ -3081,6 +3096,7 @@ angular.module('myApp.services')
     sendOther: sendOther,
     forwardMessages: forwardMessages,
     startBot: startBot,
+    replyMarkupButtonPress: replyMarkupButtonPress,
     openChatInviteLink: openChatInviteLink,
     convertMigratedPeer: convertMigratedPeer,
     getMessagePeer: getMessagePeer,

app/js/services.js

@@ -1452,8 +1452,8 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   function wrapForHistory (photoID, options) {
     options = options || {};
     var photo = angular.copy(photos[photoID]) || {_: 'photoEmpty'},
-        width = options.website ? 100 : Math.min(windowW - 80, Config.Mobile ? 210 : 260),
-        height = options.website ? 100 : Math.min(windowH - 100, Config.Mobile ? 210 : 260),
+        width = options.website ? 64 : Math.min(windowW - 80, Config.Mobile ? 210 : 260),
+        height = options.website ? 64 : Math.min(windowH - 100, Config.Mobile ? 210 : 260),
         thumbPhotoSize = choosePhotoSize(photo, width, height),
         thumb = {
           placeholder: 'img/placeholders/PhotoThumbConversation.gif',
@@ -1626,24 +1626,38 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
       delete apiWebPage.document;
     }
 
-    apiWebPage.rTitle = RichTextProcessor.wrapRichText(
-      apiWebPage.title || apiWebPage.author,
-      {noLinks: true, noLinebreaks: true}
-    );
+    var siteName = apiWebPage.site_name;
+    var title = apiWebPage.title || apiWebPage.author || siteName;
+    if (siteName &&
+        title == siteName) {
+      delete apiWebPage.site_name;
+    }
+    apiWebPage.rTitle = RichTextProcessor.wrapRichText(title, {noLinks: true, noLinebreaks: true});
     var contextHashtag = '';
-    if (apiWebPage.site_name == 'GitHub') {
+    if (siteName == 'GitHub') {
       var matches = apiWebPage.url.match(/(https?:\/\/github\.com\/[^\/]+\/[^\/]+)/);
       if (matches) {
         contextHashtag = matches[0] + '/issues/{1}';
       }
     }
+    // delete apiWebPage.description;
     apiWebPage.rDescription = RichTextProcessor.wrapRichText(
       apiWebPage.description, {
-        contextSite: apiWebPage.site_name || 'external',
+        contextSite: siteName || 'external',
         contextHashtag: contextHashtag
       }
     );
 
+    if (apiWebPage.type != 'photo' &&
+        apiWebPage.type != 'video' &&
+        apiWebPage.type != 'gif' &&
+        apiWebPage.type != 'document' &&
+        apiWebPage.type != 'gif' &&
+        !apiWebPage.description &&
+        apiWebPage.photo) {
+      apiWebPage.type = 'photo';
+    }
+
     if (messageID) {
       if (pendingWebPages[apiWebPage.id] === undefined) {
         pendingWebPages[apiWebPage.id] = {};
@@ -2966,6 +2980,19 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
         break;
     }
 
+    var curState = channelID ? getChannelState(channelID, update.pts) : updatesState;
+
+    // console.log(dT(), 'process', channelID, curState.pts, update);
+
+    if (curState.syncLoading) {
+      return false;
+    }
+
+    if (update._ == 'updateChannelTooLong') {
+      getChannelDifference(channelID);
+      return false;
+    }
+
     if (update._ == 'updateNewMessage' ||
         update._ == 'updateEditMessage' ||
         update._ == 'updateNewChannelMessage' ||
@@ -2978,7 +3005,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
           fwdHeader.channel_id && !AppChatsManager.hasChat(fwdHeader.channel_id) ||
           toPeerID > 0 && !AppUsersManager.hasUser(toPeerID) ||
           toPeerID < 0 && !AppChatsManager.hasChat(-toPeerID)) {
-        console.warn(dT(), 'Short update not enough data', message);
+        console.warn(dT(), 'Not enough data for message update', message);
         if (channelID && AppChatsManager.hasChat(channelID)) {
           getChannelDifference(channelID);
         } else {
@@ -2987,23 +3014,10 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
         return false;
       }
     }
-
-    if (channelID && !AppChatsManager.hasChat(channelID)) {
+    else if (channelID && !AppChatsManager.hasChat(channelID)) {
       // console.log(dT(), 'skip update, missing channel', channelID, update);
       return false;
     }
-    var curState = channelID ? getChannelState(channelID, update.pts) : updatesState;
-
-    console.log(dT(), 'process', channelID, curState.pts, update);
-
-    if (curState.syncLoading) {
-      return false;
-    }
-
-    if (update._ == 'updateChannelTooLong') {
-      getChannelDifference(channelID);
-      return false;
-    }
 
     var popPts, popSeq;
 

app/less/app.less

@@ -2255,6 +2255,10 @@ a.im_message_fwd_photo {
 
 .reply_markup_wrap {
   margin: 15px -2px 0;
+
+  .im_message_keyboard & {
+    margin-top: 7px;
+  }
 }
 .reply_markup_row {
   padding: 4px 0;
@@ -2296,6 +2300,7 @@ a.im_message_fwd_photo {
     height: 36px;
   }
 }
+.reply_markup_button:focus,
 .reply_markup_button:hover {
   color: #3a6d99;
   background: #dfe8f0;

app/partials/desktop/message.html

@@ -64,22 +64,8 @@
 
         <div my-message-body="historyMessage">
           <div class="im_message_text" dir="auto"></div>
-          <div class="im_message_media" ng-switch="historyMessage.media._">
-
-            <div ng-switch-when="messageMediaPhoto"     my-message-photo="historyMessage.media" message-id="historyMessage.mid"></div>
-            <div ng-switch-when="messageMediaDocument"  my-message-document="historyMessage.media" message-id="historyMessage.mid"></div>
-            <div ng-switch-when="messageMediaGeo"       my-message-geo="historyMessage.media"></div>
-            <div ng-switch-when="messageMediaVenue"     my-message-venue="historyMessage.media"></div>
-            <div ng-switch-when="messageMediaContact"   my-message-contact="historyMessage"></div>
-            <div ng-switch-when="messageMediaWebPage"   my-message-webpage="historyMessage.media" message-id="historyMessage.mid"></div>
-            <div ng-switch-when="messageMediaPending"   my-message-pending="historyMessage.media"></div>
-            <div ng-switch-when="messageMediaUnsupported">
-              <div class="im_message_text" my-i18n="message_attach_unsupported">
-                <my-i18n-param name="link"><a href="https://web.telegram.org" target="_blank">web.telegram.org</a></my-i18n-param>
-              </div>
-            </div>
-
-          </div>
+          <div class="im_message_media"></div>
+          <div class="im_message_keyboard"></div>
         </div>
 
 

app/partials/desktop/message_attach_webpage.html

@@ -32,14 +32,14 @@
   </div>
 
   <div ng-switch-when="document" class="im_message_webpage_document">
-    <div my-message-document="webpage" message-id="messageId"></div>
+    <div my-message-document="media.webpage" message-id="messageId"></div>
   </div>
 
   <div ng-switch-when="gif" class="im_message_webpage_gif">
     <div class="im_message_webpage_title">
       <a href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
     </div>
-    <div my-message-document="webpage" message-id="messageId"></div>
+    <div my-message-document="media.webpage" message-id="messageId"></div>
   </div>
 
   <div ng-switch-default class="im_message_webpage_article">
@@ -50,7 +50,7 @@
         thumb="media.webpage.photo.thumb"
       />
     </a>
-    <div class="im_message_webpage_site" ng-bind="media.webpage.site_name"></div>
+    <div ng-if="media.webpage.site_name" class="im_message_webpage_site" ng-bind="media.webpage.site_name"></div>
     <div class="im_message_webpage_title">
       <a ng-click="openEmbed($event)" href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
     </div>

app/partials/desktop/message_media.html

@@ -0,0 +1,14 @@
+<div ng-switch="::media._">
+  <div ng-switch-when="messageMediaPhoto"     my-message-photo="media" message-id="messageId"></div>
+  <div ng-switch-when="messageMediaDocument"  my-message-document="media" message-id="messageId"></div>
+  <div ng-switch-when="messageMediaGeo"       my-message-geo="media"></div>
+  <div ng-switch-when="messageMediaVenue"     my-message-venue="media"></div>
+  <div ng-switch-when="messageMediaContact"   my-message-contact="media"></div>
+  <div ng-switch-when="messageMediaWebPage"   my-message-webpage="media" message-id="messageId"></div>
+  <div ng-switch-when="messageMediaPending"   my-message-pending="media"></div>
+  <div ng-switch-when="messageMediaUnsupported">
+    <div class="im_message_text" my-i18n="message_attach_unsupported">
+      <my-i18n-param name="link"><a href="https://web.telegram.org" target="_blank">web.telegram.org</a></my-i18n-param>
+    </div>
+  </div>
+</div>