Browse Source

Improved embeds

master
Igor Zhukov 10 years ago
parent
commit
22925e01ed
  1. 6
      app/js/controllers.js
  2. 43
      app/js/services.js
  3. 2
      app/less/app.less
  4. 6
      app/partials/desktop/embed_modal.html
  5. 2
      app/partials/desktop/message_attach_video.html
  6. 2
      app/partials/desktop/message_attach_webpage.html
  7. 2
      app/partials/mobile/message_attach_video.html

6
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.webpage = AppWebPagesManager.wrapForFull($scope.webpageID);
$scope.iframeSrc = $sce.trustAsResourceUrl($scope.webpage.embed_url);
$scope.nav = {}; $scope.nav = {};

43
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 webpages = {};
var pendingWebPages = {}; var pendingWebPages = {};
@ -2852,6 +2852,46 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
return webPage; 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) { $rootScope.$on('apiUpdate', function (e, update) {
switch (update._) { switch (update._) {
case 'updateWebPage': case 'updateWebPage':
@ -2863,6 +2903,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
return { return {
saveWebPage: saveWebPage, saveWebPage: saveWebPage,
openEmbed: openEmbed, openEmbed: openEmbed,
wrapForFull: wrapForFull,
wrapForHistory: wrapForHistory wrapForHistory: wrapForHistory
} }
}) })

2
app/less/app.less

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

6
app/partials/desktop/embed_modal.html

@ -26,10 +26,10 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <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> </div>

2
app/partials/desktop/message_attach_video.html

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

2
app/partials/desktop/message_attach_webpage.html

@ -16,7 +16,7 @@
<div ng-switch-when="video" class="im_message_webpage_video"> <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_site" ng-bind="webpage.site_name || webpage.display_url"></div>
<div class="im_message_webpage_title"> <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>
<div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></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'}"> <a class="im_message_video_thumb" ng-click="openEmbed($event)" ng-href="{{webpage.url}}" target="_blank" ng-style="::{width: video.thumb.width + 'px'}">

2
app/partials/mobile/message_attach_video.html

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

Loading…
Cancel
Save