From 22925e01edad2683581d2c5e496f18b788824f9c Mon Sep 17 00:00:00 2001
From: Igor Zhukov <igor.beatle@gmail.com>
Date: Sat, 11 Apr 2015 11:53:42 +0300
Subject: [PATCH] Improved embeds

---
 app/js/controllers.js                         |  6 +--
 app/js/services.js                            | 43 ++++++++++++++++++-
 app/less/app.less                             |  2 +-
 app/partials/desktop/embed_modal.html         |  6 +--
 .../desktop/message_attach_video.html         |  2 +-
 .../desktop/message_attach_webpage.html       |  2 +-
 app/partials/mobile/message_attach_video.html |  2 +-
 7 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/app/js/controllers.js b/app/js/controllers.js
index e98967b0..11eae99d 100644
--- a/app/js/controllers.js
+++ b/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 = {};
 
diff --git a/app/js/services.js b/app/js/services.js
index 60cd67a1..ac6ea1a3 100755
--- a/app/js/services.js
+++ b/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
   }
 })
diff --git a/app/less/app.less b/app/less/app.less
index 751c7908..61339c9c 100644
--- a/app/less/app.less
+++ b/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);
diff --git a/app/partials/desktop/embed_modal.html b/app/partials/desktop/embed_modal.html
index 12c1c7bb..5b87679d 100644
--- a/app/partials/desktop/embed_modal.html
+++ b/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>
 
diff --git a/app/partials/desktop/message_attach_video.html b/app/partials/desktop/message_attach_video.html
index d005dbd6..59bd2f2f 100644
--- a/app/partials/desktop/message_attach_video.html
+++ b/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"
     />
diff --git a/app/partials/desktop/message_attach_webpage.html b/app/partials/desktop/message_attach_webpage.html
index b5766a7b..e8a6d0bd 100644
--- a/app/partials/desktop/message_attach_webpage.html
+++ b/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'}">
diff --git a/app/partials/mobile/message_attach_video.html b/app/partials/mobile/message_attach_video.html
index 78cac8bd..faed85ff 100644
--- a/app/partials/mobile/message_attach_video.html
+++ b/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"
     />