Improved embeds

app/js/controllers.js

@@ -2335,11 +2335,9 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     });
   })
 
-  .controller('EmbedModalController', function ($q, $sce, $scope, $rootScope, $modalInstance, AppPhotosManager, AppMessagesManager, AppPeersManager, AppWebPagesManager, PeersSelectService, ErrorService) {
+  .controller('EmbedModalController', function ($q, $scope, $rootScope, $modalInstance, AppPhotosManager, AppMessagesManager, AppPeersManager, AppWebPagesManager, PeersSelectService, ErrorService) {
 
-    $scope.webpage = AppWebPagesManager.wrapForHistory($scope.webpageID);
-
-    $scope.iframeSrc = $sce.trustAsResourceUrl($scope.webpage.embed_url);
+    $scope.webpage = AppWebPagesManager.wrapForFull($scope.webpageID);
 
     $scope.nav = {};
 

app/js/services.js

@@ -2777,7 +2777,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   }
 })
 
-.service('AppWebPagesManager', function ($modal, $window, $rootScope, MtpApiManager, AppPhotosManager, RichTextProcessor) {
+.service('AppWebPagesManager', function ($modal, $sce, $window, $rootScope, MtpApiManager, AppPhotosManager, RichTextProcessor) {
 
   var webpages = {};
   var pendingWebPages = {};
@@ -2852,6 +2852,46 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     return webPage;
   }
 
+  function wrapForFull (webPageID) {
+    var webPage = wrapForHistory(webPageID);
+
+    if (!webPage.embed_url) {
+      return webPage;
+    }
+
+    var fullWidth = $(window).width() - (Config.Mobile ? 0 : 10);
+    var fullHeight = $($window).height() - (Config.Mobile ? 92 : 150);
+
+    if (!Config.Mobile && fullWidth > 800) {
+      fullWidth -= 208;
+    }
+
+    var full = {
+          width: fullWidth,
+          height: fullHeight,
+        };
+
+    if (!webPage.embed_width || !webPage.embed_height) {
+      full.height = full.width = Math.min(fullWidth, fullHeight);
+    } else {
+      var wh = calcImageInBox(webPage.embed_width, webPage.embed_height, fullWidth, fullHeight);
+      full.width = wh.w;
+      full.height = wh.h;
+    }
+
+    var embedTag = Config.Modes.chrome_packed ? 'webview' : 'iframe';
+
+    var embedType = webPage.embed_type != 'iframe' ? webPage.embed_type || 'text/html' : 'text/html';
+
+    var embedHtml = '<' + embedTag + ' src="' + encodeEntities(webPage.embed_url) + '" type="' + encodeEntities(embedType) + '" frameborder="0" border="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="' + full.width + '" height="' + full.height + '"></' + embedTag + '>';
+
+    full.html = $sce.trustAs('html', embedHtml);
+
+    webPage.full = full;
+
+    return webPage;
+  }
+
   $rootScope.$on('apiUpdate', function (e, update) {
     switch (update._) {
       case 'updateWebPage':
@@ -2863,6 +2903,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   return {
     saveWebPage: saveWebPage,
     openEmbed: openEmbed,
+    wrapForFull: wrapForFull,
     wrapForHistory: wrapForHistory
   }
 })

app/less/app.less

@@ -1410,7 +1410,7 @@ a.im_message_video_thumb {
   position: relative;
 }
 
-img.im_message_video_thumb {
+img.im_message_video_thumb_blurred {
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -o-filter: blur(2px);

app/partials/desktop/embed_modal.html

@@ -26,10 +26,10 @@
 
 <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 my-modal-width="{{webpage.full.width - 32}}" class="media_modal_wrap embed_modal_wrap" my-modal-position animation="no">
+
+      <div class="modal-body" ng-bind-html="webpage.full.html">
 
-      <div class="modal-body">
-        <iframe src="{{iframeSrc}}" frameborder="0" border="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="{{webpage.embed_width}}" height="{{webpage.embed_height}}"></iframe>
 
       </div>
 

app/partials/desktop/message_attach_video.html

@@ -3,7 +3,7 @@
     <span class="im_message_video_duration" ng-bind="::video.duration | duration"></span>
     <i class="icon icon-videoplay"></i>
     <img
-      class="im_message_video_thumb"
+      class="im_message_video_thumb im_message_video_thumb_blurred"
       my-load-thumb
       thumb="video.thumb"
     />

app/partials/desktop/message_attach_webpage.html

@@ -16,7 +16,7 @@
   <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_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>
     <a class="im_message_video_thumb" ng-click="openEmbed($event)" ng-href="{{webpage.url}}" target="_blank" ng-style="::{width: video.thumb.width + 'px'}">

app/partials/mobile/message_attach_video.html

@@ -3,7 +3,7 @@
     <span class="im_message_video_duration" ng-bind="::video.duration | duration"></span>
     <i class="icon icon-videoplay"></i>
     <img
-      class="im_message_video_thumb"
+      class="im_message_video_thumb im_message_video_thumb_blurred"
       my-load-thumb
       thumb="video.thumb"
     />