Improved embed support

app/js/controllers.js

@@ -2335,6 +2335,37 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     });
   })
 
+  .controller('EmbedModalController', function ($q, $sce, $scope, $rootScope, $modalInstance, AppPhotosManager, AppMessagesManager, AppPeersManager, AppWebPagesManager, PeersSelectService, ErrorService) {
+
+    $scope.webpage = AppWebPagesManager.wrapForHistory($scope.webpageID);
+
+    $scope.iframeSrc = $sce.trustAsResourceUrl($scope.webpage.embed_url);
+
+    $scope.nav = {};
+
+    $scope.forward = function () {
+      var messageID = $scope.messageID;
+      PeersSelectService.selectPeers({confirm_type: 'FORWARD_PEER'}).then(function (peerStrings) {
+        angular.forEach(peerStrings, function (peerString) {
+          var peerID = AppPeersManager.getPeerID(peerString);
+          AppMessagesManager.forwardMessages(peerID, [messageID]).then(function () {
+            if (peerStrings.length == 1) {
+              $rootScope.$broadcast('history_focus', {peerString: peerString});
+            }
+          });
+        });
+      });
+    };
+
+    $scope['delete'] = function () {
+      var messageID = $scope.messageID;
+      ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () {
+        AppMessagesManager.deleteMessages([messageID]);
+      });
+    };
+
+  })
+
   .controller('UserModalController', function ($scope, $location, $rootScope, $modal, AppUsersManager, MtpApiManager, NotificationsManager, AppPhotosManager, AppMessagesManager, AppPeersManager, PeersSelectService, ErrorService) {
 
     var peerString = AppUsersManager.getUserString($scope.userID);

app/js/directives.js

@@ -457,7 +457,7 @@ angular.module('myApp.directives', ['myApp.filters'])
       templateUrl: templateUrl('message_attach_contact')
     };
   })
-  .directive('myMessageWebpage', function(AppPhotosManager) {
+  .directive('myMessageWebpage', function(AppWebPagesManager, AppPhotosManager) {
     return {
       scope: {
         'webpage': '=myMessageWebpage',
@@ -466,6 +466,12 @@ angular.module('myApp.directives', ['myApp.filters'])
       templateUrl: templateUrl('message_attach_webpage'),
       link: function ($scope) {
         $scope.openPhoto = AppPhotosManager.openPhoto;
+        $scope.openEmbed = function ($event) {
+          if ($scope.webpage && $scope.webpage.embed_url) {
+            AppWebPagesManager.openEmbed($scope.webpage.id, $scope.messageId);
+            return cancelEvent($event);
+          }
+        };
 
         $scope.$on('webpage_updated', function (e, eventData) {
           if ($scope.webpage && $scope.webpage.id == eventData.id) {

app/js/services.js

@@ -2827,13 +2827,20 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     }
   };
 
-  $rootScope.$on('apiUpdate', function (e, update) {
+  function openEmbed (webpageID, messageID) {
-    switch (update._) {
+    var scope = $rootScope.$new(true);
-      case 'updateWebPage':
+
-        saveWebPage(update.webpage);
+    scope.webpageID = webpageID;
-        break;
+    scope.messageID = messageID;
-    }
+
+    $modal.open({
+      templateUrl: templateUrl('embed_modal'),
+      windowTemplateUrl: templateUrl('media_modal_layout'),
+      controller: 'EmbedModalController',
+      scope: scope,
+      windowClass: 'photo_modal_window'
     });
+  }
 
   function wrapForHistory (webPageID) {
     var webPage = angular.copy(webpages[webPageID]) || {_: 'webPageEmpty'};
@@ -2845,8 +2852,17 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     return webPage;
   }
 
+  $rootScope.$on('apiUpdate', function (e, update) {
+    switch (update._) {
+      case 'updateWebPage':
+        saveWebPage(update.webpage);
+        break;
+    }
+  });
+
   return {
     saveWebPage: saveWebPage,
+    openEmbed: openEmbed,
     wrapForHistory: wrapForHistory
   }
 })

app/less/desktop.less

@@ -2153,6 +2153,11 @@ a.im_panel_peer_photo .peer_initials {
   }
 }
 
+.embed_modal_wrap .modal-body {
+  line-height: 0;
+  padding: 0;
+}
+
 .photo_modal_window,
 .video_modal_window,
 .document_modal_window {

app/partials/desktop/embed_modal.html

@@ -0,0 +1,38 @@
+<div class="modal_close_wrap" ng-click="$close()">
+  <div class="modal_close"></div>
+</div>
+
+<div class="media_modal_bottom_panel_wrap">
+  <div class="media_modal_bottom_panel">
+    <div class="media_modal_bottom_actions pull-right">
+      <a class="media_modal_action_btn" ng-click="forward()"  title="{{'media_modal_forward' | i18n}}">
+        <i class="media_modal_action_btn_forward"></i>
+      </a>
+      <a class="media_modal_action_btn" ng-click="delete()" title="{{'media_modal_delete' | i18n}}">
+        <i class="media_modal_action_btn_delete"></i>
+      </a>
+    </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" my-i18n="media_modal_video"></div>
+  </div>
+</div>
+
+<div class="modal-dialog">
+  <div class="modal-content">
+    <div my-modal-width="{{webpage.embed_width - 32}}" class="media_modal_wrap embed_modal_wrap" my-modal-position animation="no">
+
+      <div class="modal-body">
+        <iframe src="{{iframeSrc}}" frameborder="0" border="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="{{webpage.embed_width}}" height="{{webpage.embed_height}}"></iframe>
+
+      </div>
+
+    </div>
+  </div>
+</div>

app/partials/desktop/message_attach_webpage.html

@@ -19,7 +19,7 @@
       <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_video_thumb" 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="{{webpage.url}}" target="_blank" ng-style="::{width: video.thumb.width + 'px'}">
       <span ng-if="webpage.duration > 0" class="im_message_video_duration" ng-bind="::webpage.duration | duration"></span>
       <i class="icon icon-videoplay"></i>
       <img
@@ -40,7 +40,7 @@
     </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>
+      <a ng-click="openEmbed($event)" 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>
   </div>