Improved message media directive

app/js/directives.js

@@ -185,7 +185,11 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
 
     function updateMessageText (message, element) {
-      var entities = message.totalEntities;
+      if (typeof message.message !== 'string' ||
+          !message.message.length) {
+        element.hide();
+        return;
+      }
       var fromUser = message.from_id && AppUsersManager.getUser(message.from_id);
       var fromBot = fromUser && fromUser.pFlags.bot && fromUser.username || false;
       var toPeerID = AppPeersManager.getPeerID(message.to_id);
@@ -196,7 +200,7 @@ angular.module('myApp.directives', ['myApp.filters'])
       var options = {
         noCommands: !withBot,
         fromBot: fromBot,
-        entities: entities
+        entities: message.totalEntities
       };
       if (message.pFlags.mentioned) {
         var user = AppUsersManager.getSelf();
@@ -205,11 +209,21 @@ angular.module('myApp.directives', ['myApp.filters'])
         }
       }
       var html = RichTextProcessor.wrapRichText(message.message, options);
-      // console.log('dd', entities, html);
 
       element.html(html.valueOf());
     }
 
+    function updateMessageMedia(message, element) {
+      if (!message.media) {
+        element.hide();
+        return;
+      }
+      switch (message.media._) {
+        case 'messageMediaPhoto':
+
+      }
+    }
+
     function link ($scope, element, attrs) {
       var message = $scope.message;
       var msgID = message.mid;
@@ -338,34 +352,39 @@ angular.module('myApp.directives', ['myApp.filters'])
   .directive('myMessageVenue', function() {
     return {
       scope: {
-        'venue': '=myMessageVenue'
+        'media': '=myMessageVenue'
       },
       templateUrl: templateUrl('message_attach_venue')
     };
   })
   .directive('myMessageContact', function() {
     return {
+      scope: {
+        'media': '=myMessageContact'
+      },
       templateUrl: templateUrl('message_attach_contact')
     };
   })
   .directive('myMessageWebpage', function(AppWebPagesManager, AppPhotosManager) {
     return {
       scope: {
-        'webpage': '=myMessageWebpage',
+        'media': '=myMessageWebpage',
         'messageId': '=messageId'
       },
       templateUrl: templateUrl('message_attach_webpage'),
       link: function ($scope) {
         $scope.openPhoto = AppPhotosManager.openPhoto;
         $scope.openEmbed = function ($event) {
-          if ($scope.webpage && $scope.webpage.embed_url) {
+          if ($scope.media.webpage &&
-            AppWebPagesManager.openEmbed($scope.webpage.id, $scope.messageId);
+              $scope.media.webpage.embed_url) {
+            AppWebPagesManager.openEmbed($scope.media.webpage.id, $scope.messageId);
             return cancelEvent($event);
           }
         };
 
         $scope.$on('webpage_updated', function (e, eventData) {
-          if ($scope.webpage && $scope.webpage.id == eventData.id) {
+          if ($scope.media.webpage &&
+              $scope.media.webpage.id == eventData.id) {
             $scope.$emit('ui_height');
           }
         });
@@ -374,6 +393,9 @@ angular.module('myApp.directives', ['myApp.filters'])
   })
   .directive('myMessagePending', function() {
     return {
+      scope: {
+        'media': '=myMessagePending'
+      },
       templateUrl: templateUrl('message_attach_pending')
     };
   })

app/partials/desktop/message.html

@@ -64,16 +64,15 @@
 
         <div my-message-body="historyMessage">
           <div class="im_message_text" dir="auto"></div>
-
+          <div class="im_message_media" ng-switch="historyMessage.media._">
-          <div ng-if="::historyMessage.media || historyMessage.mid < 0 ? true : false" 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></div>
+            <div ng-switch-when="messageMediaContact"   my-message-contact="historyMessage"></div>
-            <div ng-switch-when="messageMediaWebPage"   my-message-webpage="historyMessage.media.webpage" message-id="historyMessage.mid"></div>
+            <div ng-switch-when="messageMediaWebPage"   my-message-webpage="historyMessage.media" message-id="historyMessage.mid"></div>
-            <div ng-switch-when="messageMediaPending"   my-message-pending></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>

app/partials/desktop/message_attach_contact.html

@@ -1,8 +1,8 @@
 <div class="im_message_contact">
-  <a ng-if="historyMessage.media.user_id > 0" class="im_message_contact_photo pull-left" my-peer-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo" user-override="historyMessage.media"></a>
+  <a ng-if="::media.user_id > 0"  class="im_message_contact_photo pull-left" my-peer-photolink="media.user_id" img-class="im_message_contact_photo" user-override="media"></a>
-  <div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
+  <div class="im_message_contact_name" ng-switch="media.user_id > 0">
-    <a ng-switch-when="true" my-peer-link="historyMessage.media.user_id" user-override="historyMessage.media"></a>
+    <a ng-switch-when="true" my-peer-link="media.user_id" user-override="media"></a>
-    <span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span>
+    <span ng-switch-default ng-bind-html="::media.rFullName"></span>
   </div>
-  <div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div>
+  <div class="im_message_contact_phone" ng-bind="::media.phone_number | phoneNumber"></div>
 </div>

app/partials/desktop/message_attach_pending.html

@@ -1,17 +1,17 @@
-<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + historyMessage.media.type">
+<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + media.type">
   <div class="im_message_file_button im_message_file_button_upload">
     <i class="im_message_file_button_icon"></i>
   </div>
   <div class="im_message_document_info">
     <div class="im_message_document_name_wrap">
-      <span class="im_message_document_name" ng-bind="::historyMessage.media.file_name"></span>
+      <span class="im_message_document_name" ng-bind="::media.file_name"></span>
-      <span class="im_message_document_size" ng-if="historyMessage.media.progress" ng-bind="historyMessage.media.progress | formatSizeProgress"></span>
+      <span class="im_message_document_size" ng-if="media.progress" ng-bind="media.progress | formatSizeProgress"></span>
     </div>
     <div class="clearfix im_message_cancelable_progress_wrap">
-      <a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.progress.cancel()" my-i18n="modal_cancel"></a>
+      <a class="im_message_media_progress_cancel pull-right" ng-click="media.progress.cancel()" my-i18n="modal_cancel"></a>
       <div class="im_message_download_progress_wrap">
         <div class="progress tg_up_progress">
-          <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: historyMessage.media.progress.percent + '%'}"></div>
+          <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: media.progress.percent + '%'}"></div>
         </div>
       </div>
     </div>

app/partials/desktop/message_attach_webpage.html

@@ -1,31 +1,31 @@
-<div ng-show="webpage._ == 'webPage'" class="im_message_webpage_wrap clearfix" ng-switch="webpage.type">
+<div ng-show="media.webpage._ == 'webPage'" class="im_message_webpage_wrap clearfix" ng-switch="media.webpage.type">
   <div ng-switch-when="photo" class="im_message_webpage_photo">
     <div class="im_message_webpage_title">
-      <a href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
+      <a href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
     </div>
-    <div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></div>
+    <div ng-if="media.webpage.description.length" class="im_message_webpage_description" ng-bind-html="media.webpage.rDescription"></div>
-    <a class="im_message_photo_thumb" ng-click="openPhoto(webpage.photo.id, {w: webpage.id, m: messageId})" ng-style="::{width: webpage.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(webpage.photo.id)">
+    <a class="im_message_photo_thumb" ng-click="openPhoto(media.webpage.photo.id, {w: media.webpage.id, m: messageId})" ng-style="::{width: media.webpage.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(media.webpage.photo.id)">
       <img
         class="im_message_photo_thumb"
         my-load-thumb
-        thumb="webpage.photo.thumb"
+        thumb="media.webpage.photo.thumb"
         alt="[{{::'conversation_media_photo' | i18n}}]"
       />
     </a>
   </div>
   <div ng-switch-when="video" class="im_message_webpage_video">
-    <div class="im_message_webpage_site" ng-bind="webpage.site_name || webpage.display_url"></div>
+    <div class="im_message_webpage_site" ng-bind="media.webpage.site_name || media.webpage.display_url"></div>
     <div class="im_message_webpage_title">
-      <a ng-click="openEmbed($event)" href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
+      <a ng-click="openEmbed($event)" href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
     </div>
-    <div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></div>
+    <div ng-if="media.webpage.description.length" class="im_message_webpage_description" ng-bind-html="media.webpage.rDescription"></div>
-    <a class="im_message_video_thumb" ng-click="openEmbed($event)" ng-href="{{webpage.url}}" target="_blank" ng-style="::{width: video.thumb.width + 'px'}">
+    <a class="im_message_video_thumb" ng-click="openEmbed($event)" ng-href="{{media.webpage.url}}" target="_blank" ng-style="::{width: video.thumb.width + 'px'}">
-      <span ng-if="webpage.duration > 0" class="im_message_video_duration nocopy" data-content="{{::webpage.duration | duration}}"></span>
+      <span ng-if="media.webpage.duration > 0" class="im_message_video_duration nocopy" data-content="{{::media.webpage.duration | duration}}"></span>
       <i class="icon icon-videoplay"></i>
       <img
         class="im_message_video_thumb"
         my-load-thumb
-        thumb="webpage.photo.thumb"
+        thumb="media.webpage.photo.thumb"
         alt="[{{::'conversation_media_video' | i18n}}]"
       />
     </a>
@@ -37,23 +37,23 @@
 
   <div ng-switch-when="gif" class="im_message_webpage_gif">
     <div class="im_message_webpage_title">
-      <a href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
+      <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>
 
   <div ng-switch-default class="im_message_webpage_article">
-    <a ng-if="webpage.photo" href="{{webpage.url}}" target="_blank" class="im_message_webpage_article_photo pull-right">
+    <a ng-if="media.webpage.photo" href="{{media.webpage.url}}" target="_blank" class="im_message_webpage_article_photo pull-right">
       <img
         class="im_message_article_thumb"
         my-load-thumb
-        thumb="webpage.photo.thumb"
+        thumb="media.webpage.photo.thumb"
       />
     </a>
-    <div class="im_message_webpage_site" ng-bind="webpage.site_name"></div>
+    <div class="im_message_webpage_site" ng-bind="media.webpage.site_name"></div>
     <div class="im_message_webpage_title">
-      <a ng-click="openEmbed($event)" href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
+      <a ng-click="openEmbed($event)" href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
     </div>
-    <div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></div>
+    <div ng-if="media.webpage.description.length" class="im_message_webpage_description" ng-bind-html="media.webpage.rDescription"></div>
   </div>
 </div>

app/partials/mobile/message_attach_contact.html

@@ -1,8 +1,8 @@
 <div class="im_message_contact">
-  <a ng-if="historyMessage.media.user_id > 0"  class="im_message_contact_photo pull-left" my-peer-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo" user-override="historyMessage.media"></a>
+  <a ng-if="::media.user_id > 0"  class="im_message_contact_photo pull-left" my-peer-photolink="media.user_id" img-class="im_message_contact_photo" user-override="media"></a>
-  <div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
+  <div class="im_message_contact_name" ng-switch="media.user_id > 0">
-    <a ng-switch-when="true" my-peer-link="historyMessage.media.user_id" user-override="historyMessage.media"></a>
+    <a ng-switch-when="true" my-peer-link="media.user_id" user-override="media"></a>
-    <span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span>
+    <span ng-switch-default ng-bind-html="::media.rFullName"></span>
   </div>
-  <div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div>
+  <div class="im_message_contact_phone" ng-bind="::media.phone_number | phoneNumber"></div>
 </div>

app/partials/mobile/message_attach_pending.html

@@ -1,17 +1,17 @@
-<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + historyMessage.media.type">
+<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + media.type">
   <div class="im_message_file_button im_message_file_button_upload">
     <i class="im_message_file_button_icon"></i>
   </div>
   <div class="im_message_document_info">
     <div class="im_message_document_name_wrap">
-      <span class="im_message_document_name" ng-bind="::historyMessage.media.file_name"></span>
+      <span class="im_message_document_name" ng-bind="::media.file_name"></span>
-      <span class="im_message_document_size" ng-if="historyMessage.media.progress" ng-bind="historyMessage.media.progress | formatSizeProgress"></span>
+      <span class="im_message_document_size" ng-if="media.progress" ng-bind="media.progress | formatSizeProgress"></span>
     </div>
     <div class="clearfix im_message_cancelable_progress_wrap">
-      <a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.progress.cancel()" my-i18n="modal_cancel"></a>
+      <a class="im_message_media_progress_cancel pull-right" ng-click="media.progress.cancel()" my-i18n="modal_cancel"></a>
       <div class="im_message_download_progress_wrap">
         <div class="progress tg_down_progress">
-          <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: historyMessage.media.progress.percent + '%'}"></div>
+          <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: media.progress.percent + '%'}"></div>
         </div>
       </div>
     </div>