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,55 +1861,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
     updatePrevNext();
 
-    AppMessagesManager.getSearch(inputPeer, inputQuery, inputFilter, 0, 1000).then(function (searchCachedResult) {
-      if (searchCachedResult.history.indexOf($scope.messageID) >= 0) {
-        list = searchCachedResult.history;
-        maxID = list[list.length - 1];
-
-        updatePrevNext();
-        preloadPhotos(+1);
-      }
-      loadMore();
-    }, loadMore);
-
-
-    var jump = 0;
-    function movePosition (sign) {
-      var curIndex = list.indexOf($scope.messageID),
-          index = curIndex >= 0 ? curIndex + sign : 0,
-          curJump = ++jump;
-
-      var promise = index >= list.length ? loadMore() : $q.when();
-      promise.then(function () {
-        if (curJump != jump) {
-          return;
-        }
-
-        var messageID = list[index];
-        var message = AppMessagesManager.getMessage(messageID);
-        if (!message ||
-            !message.media ||
-            !message.media.photo ||
-            !message.media.photo.id) {
-          console.error('Invalid photo message', index, list, messageID, message);
-          return;
-        }
-
-        $scope.messageID = messageID;
-        $scope.photoID = message.media.photo.id;
-        $scope.photo = AppPhotosManager.wrapForFull($scope.photoID);
-
-        preloaded[$scope.messageID] = true;
-
-        updatePrevNext();
-
-        if (sign > 0 && hasMore && list.indexOf(messageID) + 1 >= list.length) {
-          loadMore();
-        } else {
-          preloadPhotos(sign);
-        }
-      });
-    };
 
     function preloadPhotos (sign) {
       // var preloadOffsets = sign < 0 ? [-1,-2,1,-3,2] : [1,2,-1,3,-2];
@@ -1926,30 +1877,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       })
     }
 
-    var loadingPromise = false;
-    function loadMore () {
-      if (loadingPromise) return loadingPromise;
-
-      return loadingPromise = AppMessagesManager.getSearch(inputPeer, inputQuery, inputFilter, maxID).then(function (searchResult) {
-        if (searchResult.history.length) {
-          maxID = searchResult.history[searchResult.history.length - 1];
-          list = list.concat(searchResult.history);
-          hasMore = list.length < searchResult.count;
-        } else {
-          hasMore = false;
-        }
-
-        updatePrevNext(searchResult.count);
-        loadingPromise = false;
-
-        if (searchResult.history.length) {
-          return $q.reject();
-        }
-
-        preloadPhotos(+1);
-      });
-    };
-
     function updatePrevNext (count) {
       var index = list.indexOf($scope.messageID);
       if (hasMore) {
@@ -2001,6 +1928,83 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       }
     });
 
+    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;
+        maxID = list[list.length - 1];
+
+        updatePrevNext();
+        preloadPhotos(+1);
+      }
+      loadMore();
+    }, loadMore);
+
+
+    var jump = 0;
+    function movePosition (sign) {
+      var curIndex = list.indexOf($scope.messageID),
+          index = curIndex >= 0 ? curIndex + sign : 0,
+          curJump = ++jump;
+
+      var promise = index >= list.length ? loadMore() : $q.when();
+      promise.then(function () {
+        if (curJump != jump) {
+          return;
+        }
+
+        var messageID = list[index];
+        var message = AppMessagesManager.getMessage(messageID);
+        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 = photoID;
+        $scope.photo = AppPhotosManager.wrapForFull($scope.photoID);
+
+        preloaded[$scope.messageID] = true;
+
+        updatePrevNext();
+
+        if (sign > 0 && hasMore && list.indexOf(messageID) + 1 >= list.length) {
+          loadMore();
+        } else {
+          preloadPhotos(sign);
+        }
+      });
+    };
+
+    var loadingPromise = false;
+    function loadMore () {
+      if (loadingPromise) return loadingPromise;
+
+      return loadingPromise = AppMessagesManager.getSearch(inputPeer, inputQuery, inputFilter, maxID).then(function (searchResult) {
+        if (searchResult.history.length) {
+          maxID = searchResult.history[searchResult.history.length - 1];
+          list = list.concat(searchResult.history);
+          hasMore = list.length < searchResult.count;
+        } else {
+          hasMore = false;
+        }
+
+        updatePrevNext(searchResult.count);
+        loadingPromise = false;
+
+        if (searchResult.history.length) {
+          return $q.reject();
+        }
+
+        preloadPhotos(+1);
+      });
+    };
+
   })
 
   .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) {
+      if (pendingWebPages[apiWebPage.id] === undefined) {
-        pendingWebPages[webpage.id] = {};
+        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">