Improved webpages support

app/js/controllers.js

@@ -1805,7 +1805,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     }
   })
 
-  .controller('PhotoModalController', function ($q, $scope, $rootScope, $modalInstance, AppPhotosManager, AppMessagesManager, AppPeersManager, PeersSelectService, ErrorService) {
+  .controller('PhotoModalController', function ($q, $scope, $rootScope, $modalInstance, AppPhotosManager, AppMessagesManager, AppPeersManager, AppWebPagesManager, PeersSelectService, ErrorService) {
 
     $scope.photo = AppPhotosManager.wrapForFull($scope.photoID);
     $scope.nav = {};
@@ -1861,6 +1861,78 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
     updatePrevNext();
 
+
+    function preloadPhotos (sign) {
+      // var preloadOffsets = sign < 0 ? [-1,-2,1,-3,2] : [1,2,-1,3,-2];
+      var preloadOffsets = sign < 0 ? [-1,-2] : [1,2];
+      var index = list.indexOf($scope.messageID);
+      angular.forEach(preloadOffsets, function (offset) {
+        var messageID = list[index + offset];
+        if (messageID !== undefined && preloaded[messageID] === undefined) {
+          preloaded[messageID] = true;
+          var message = AppMessagesManager.getMessage(messageID);
+          var photoID = message.media.photo.id;
+          AppPhotosManager.preloadPhoto(photoID);
+        }
+      })
+    }
+
+    function updatePrevNext (count) {
+      var index = list.indexOf($scope.messageID);
+      if (hasMore) {
+        if (count) {
+          $scope.count = Math.max(count, list.length);
+        }
+      } else {
+        $scope.count = list.length;
+      }
+      $scope.pos = $scope.count - index;
+      $scope.nav.hasNext = index > 0;
+      $scope.nav.hasPrev = hasMore || index < list.length - 1;
+      $scope.canForward = $scope.canDelete = $scope.messageID > 0;
+    };
+
+    $scope.nav.next = function () {
+      if (!$scope.nav.hasNext) {
+        return false;
+      }
+
+      movePosition(-1);
+    };
+
+    $scope.nav.prev = function () {
+      if (!$scope.nav.hasPrev) {
+        return false;
+      }
+      movePosition(+1);
+    };
+
+    $scope.$on('history_delete', function (e, historyUpdate) {
+      if (historyUpdate.peerID == peerID) {
+        if (historyUpdate.msgs[$scope.messageID]) {
+          if ($scope.nav.hasNext) {
+            $scope.nav.next();
+          } else if ($scope.nav.hasPrev) {
+            $scope.nav.prev();
+          } else {
+            return $modalInstance.dismiss();
+          }
+        }
+        var newList = [];
+        for (var i = 0; i < list.length; i++) {
+          if (!historyUpdate.msgs[list[i]]) {
+            newList.push(list[i]);
+          }
+        };
+        list = newList;
+      }
+    });
+
+    if ($scope.webpageID) {
+      $scope.webpage = AppWebPagesManager.wrapForHistory($scope.webpageID);
+      return;
+    }
+
     AppMessagesManager.getSearch(inputPeer, inputQuery, inputFilter, 0, 1000).then(function (searchCachedResult) {
       if (searchCachedResult.history.indexOf($scope.messageID) >= 0) {
         list = searchCachedResult.history;
@@ -1887,16 +1959,14 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
         var messageID = list[index];
         var message = AppMessagesManager.getMessage(messageID);
-        if (!message ||
-            !message.media ||
-            !message.media.photo ||
-            !message.media.photo.id) {
+        var photoID = message && message.media && (message.media.photo && message.media.photo.id || message.media.webpage && message.media.webpage.photo && message.media.webpage.photo.id)
+        if (!photoID) {
           console.error('Invalid photo message', index, list, messageID, message);
           return;
         }
 
         $scope.messageID = messageID;
-        $scope.photoID = message.media.photo.id;
+        $scope.photoID = photoID;
         $scope.photo = AppPhotosManager.wrapForFull($scope.photoID);
 
         preloaded[$scope.messageID] = true;
@@ -1911,21 +1981,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       });
     };
 
-    function preloadPhotos (sign) {
-      // var preloadOffsets = sign < 0 ? [-1,-2,1,-3,2] : [1,2,-1,3,-2];
-      var preloadOffsets = sign < 0 ? [-1,-2] : [1,2];
-      var index = list.indexOf($scope.messageID);
-      angular.forEach(preloadOffsets, function (offset) {
-        var messageID = list[index + offset];
-        if (messageID !== undefined && preloaded[messageID] === undefined) {
-          preloaded[messageID] = true;
-          var message = AppMessagesManager.getMessage(messageID);
-          var photoID = message.media.photo.id;
-          AppPhotosManager.preloadPhoto(photoID);
-        }
-      })
-    }
-
     var loadingPromise = false;
     function loadMore () {
       if (loadingPromise) return loadingPromise;
@@ -1950,57 +2005,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       });
     };
 
-    function updatePrevNext (count) {
-      var index = list.indexOf($scope.messageID);
-      if (hasMore) {
-        if (count) {
-          $scope.count = Math.max(count, list.length);
-        }
-      } else {
-        $scope.count = list.length;
-      }
-      $scope.pos = $scope.count - index;
-      $scope.nav.hasNext = index > 0;
-      $scope.nav.hasPrev = hasMore || index < list.length - 1;
-      $scope.canForward = $scope.canDelete = $scope.messageID > 0;
-    };
-
-    $scope.nav.next = function () {
-      if (!$scope.nav.hasNext) {
-        return false;
-      }
-
-      movePosition(-1);
-    };
-
-    $scope.nav.prev = function () {
-      if (!$scope.nav.hasPrev) {
-        return false;
-      }
-      movePosition(+1);
-    };
-
-    $scope.$on('history_delete', function (e, historyUpdate) {
-      if (historyUpdate.peerID == peerID) {
-        if (historyUpdate.msgs[$scope.messageID]) {
-          if ($scope.nav.hasNext) {
-            $scope.nav.next();
-          } else if ($scope.nav.hasPrev) {
-            $scope.nav.prev();
-          } else {
-            return $modalInstance.dismiss();
-          }
-        }
-        var newList = [];
-        for (var i = 0; i < list.length; i++) {
-          if (!historyUpdate.msgs[list[i]]) {
-            newList.push(list[i]);
-          }
-        };
-        list = newList;
-      }
-    });
-
   })
 
   .controller('UserpicModalController', function ($q, $scope, $rootScope, $modalInstance, MtpApiManager, AppPhotosManager, AppUsersManager, AppPeersManager, AppMessagesManager, ApiUpdatesManager, PeersSelectService, ErrorService) {

app/js/directives.js

@@ -460,11 +460,18 @@ angular.module('myApp.directives', ['myApp.filters'])
   .directive('myMessageWebpage', function(AppPhotosManager) {
     return {
       scope: {
-        'webpage': '=myMessageWebpage'
+        'webpage': '=myMessageWebpage',
+        'messageId': '=messageId'
       },
       templateUrl: templateUrl('message_attach_webpage'),
       link: function ($scope) {
         $scope.openPhoto = AppPhotosManager.openPhoto;
+
+        $scope.$on('webpage_updated', function (e, eventData) {
+          if ($scope.webpage && $scope.webpage.id == eventData.id) {
+            $scope.$emit('ui_height');
+          }
+        });
       }
     };
   })

app/js/services.js

@@ -1398,7 +1398,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
             AppAudioManager.saveAudio(apiMessage.media.audio);
             break;
           case 'messageMediaWebPage':
-            AppWebPagesManager.saveWebPage(apiMessage.media.webpage);
+            AppWebPagesManager.saveWebPage(apiMessage.media.webpage, apiMessage.id);
             break;
         }
       }
@@ -1968,6 +1968,11 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
           break;
 
         case 'messageMediaWebPage':
+          if (!message.media.webpage ||
+              message.media.webpage._ == 'webPageEmpty') {
+            delete message.media;
+            break;
+          }
           message.media.webpage = AppWebPagesManager.wrapForHistory(message.media.webpage.id);
           break;
       }
@@ -2495,6 +2500,18 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     }
   });
 
+  $rootScope.$on('webpage_updated', function (e, eventData) {
+    angular.forEach(eventData.msgs, function (msgID) {
+      var historyMessage = messagesForHistory[msgID];
+      if (historyMessage) {
+        historyMessage.media = {
+          _: 'messageMediaWebPage',
+          webpage: AppWebPagesManager.wrapForHistory(eventData.id)
+        };
+      }
+    })
+  })
+
   return {
     getDialogs: getDialogs,
     getHistory: getHistory,
@@ -2688,6 +2705,9 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     }
     else if (list && list.m > 0) {
       scope.messageID = list.m;
+      if (list.w) {
+        scope.webpageID = list.w;
+      }
     }
 
     var modalInstance = $modal.open({
@@ -2780,17 +2800,31 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     );
 
     if (messageID) {
-      if (pendingWebPages[webpage.id] === undefined) {
-        pendingWebPages[webpage.id] = {};
+      if (pendingWebPages[apiWebPage.id] === undefined) {
+        pendingWebPages[apiWebPage.id] = {};
       }
-      pendingWebPages[webpage.id][messageID] = true;
+      pendingWebPages[apiWebPage.id][messageID] = true;
       webpages[apiWebPage.id] = apiWebPage;
     }
+
     if (webpages[apiWebPage.id] === undefined) {
       webpages[apiWebPage.id] = apiWebPage;
     } else {
       safeReplaceObject(webpages[apiWebPage.id], apiWebPage);
     }
+
+    if (!messageID &&
+        pendingWebPages[apiWebPage.id] !== undefined) {
+      var msgs = [];
+      angular.forEach(pendingWebPages[apiWebPage.id], function (t, msgID) {
+        msgs.push(msgID);
+      });
+      $rootScope.$broadcast('webpage_updated', {
+        id: apiWebPage.id,
+        msgs: msgs
+      });
+
+    }
   };
 
   $rootScope.$on('apiUpdate', function (e, update) {

app/less/app.less

@@ -1521,9 +1521,12 @@ div.im_message_video_thumb {
 .im_message_webpage_description {
   margin: 2px 0 2px;
 }
-.im_message_article_thumb {
+.im_message_webpage_article_photo {
+  display: block;
   margin: 5px 0 5px 5px;
 }
+.im_message_article_thumb {
+}
 
 .im_message_video_embed {
   padding-bottom: 56.25%; /* 16/9 ratio */

app/partials/desktop/message.html

@@ -60,7 +60,7 @@
           <div ng-switch-when="messageMediaAudio"     class="im_message_audio" my-audio-player audio="historyMessage.media.audio"></div>
           <div ng-switch-when="messageMediaGeo"       my-message-map></div>
           <div ng-switch-when="messageMediaContact"   class="im_message_contact" my-message-contact></div>
-          <div ng-switch-when="messageMediaWebPage"   class="im_message_webpage" my-message-webpage="historyMessage.media.webpage"></div>
+          <div ng-switch-when="messageMediaWebPage"   class="im_message_webpage" my-message-webpage="historyMessage.media.webpage" message-id="historyMessage.id"></div>
           <div ng-switch-when="messageMediaPending"   my-message-pending></div>
           <div ng-switch-when="messageMediaUnsupported">
             <div class="im_message_text">

app/partials/desktop/message_attach_webpage.html

@@ -1,11 +1,11 @@
-<div class="im_message_webpage_wrap clearfix" ng-switch="webpage.type">
+<div ng-show="webpage._ == 'webPage'" class="im_message_webpage_wrap clearfix" ng-switch="webpage.type">
   <div ng-switch-when="photo" class="im_message_webpage_photo">
     <div class="im_message_webpage_site" ng-bind="webpage.site_name || webpage.display_url"></div>
     <div class="im_message_webpage_title">
       <a href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
     </div>
     <div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></div>
-    <a class="im_message_photo_thumb" ng-click="openPhoto(webpage.photo.id, {w: webpage.id})" ng-style="::{width: webpage.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(webpage.photo.id)">
+    <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)">
       <img
         class="im_message_photo_thumb"
         my-load-thumb
@@ -31,13 +31,13 @@
   </div>
 
   <div ng-switch-default class="im_message_webpage_article">
-    <div ng-if="webpage.photo" class="im_message_webpage_article_photo pull-right">
+    <a ng-if="webpage.photo" href="{{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"
       />
-    </div>
+    </a>
     <div class="im_message_webpage_site" ng-bind="webpage.site_name"></div>
     <div class="im_message_webpage_title">
       <a href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>

app/partials/desktop/photo_modal.html

@@ -22,17 +22,23 @@
       </a>
     </div>
 
-    <div class="media_modal_info_wrap pull-left" ng-switch="messageID > 0">
+    <div class="media_modal_info_wrap pull-left" ng-if="!webpageID">
       <a class="media_modal_author_photo pull-left" my-peer-photolink="photo.user_id" img-class="media_modal_author_photo" watch="true"></a>
       <div class="media_modal_author_name">
         <a class="media_modal_author" my-user-link="photo.user_id" user-watch="true"></a>
       </div>
-      <div class="media_modal_date">
+      <div class="media_modal_date" ng-switch="messageID > 0">
         <a ng-switch-when="true" class="media_modal_date" ng-click="goToMessage()" ng-bind="photo.date | dateOrTime :true"></a>
         <span ng-switch-default ng-bind="photo.date | dateOrTime :true"></span>
       </div>
     </div>
 
+    <div class="media_modal_info_wrap pull-left" ng-if="webpageID">
+      <div class="media_modal_author_name">
+        <a class="media_modal_author" href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
+      </div>
+      <div class="media_modal_date"  ng-bind="webpage.site_name || webpage.display_url"></div>
+    </div>
 
     <div class="media_modal_title_wrap" ng-switch="count > 1 &amp;&amp; pos > 0">
       <my-i18n ng-switch-when="true" msgid="media_modal_photo_index">