Isolate object-fit fix for Windows Qt browser only

This commit is contained in:
yanas 2016-08-08 17:03:00 -05:00
parent 541f83cf71
commit da0898a066
4 changed files with 26 additions and 7 deletions

View File

@ -41,13 +41,6 @@
background-size: contain; background-size: contain;
border-radius:1px; border-radius:1px;
border: 1px solid #212425; border: 1px solid #212425;
/**
* Some browsers don't have full support of the object-fit property for the
* video element and when we set video object-fit to "cover" the video
* actually overflows the boundaries of its container, so it's important
* to indicate that the "overflow" should be hidden.
*/
overflow: hidden;
} }
#remoteVideos .videocontainer.videoContainerFocused { #remoteVideos .videocontainer.videoContainerFocused {

View File

@ -21,6 +21,8 @@ function LocalVideo(VideoLayout, emitter) {
return APP.conference.getMyUserId(); return APP.conference.getMyUserId();
} }
}); });
this.initBrowserSpecificProperties();
SmallVideo.call(this, VideoLayout); SmallVideo.call(this, VideoLayout);
} }

View File

@ -27,6 +27,9 @@ RemoteVideo.prototype.constructor = RemoteVideo;
RemoteVideo.prototype.addRemoteVideoContainer = function() { RemoteVideo.prototype.addRemoteVideoContainer = function() {
this.container = RemoteVideo.createContainer(this.videoSpanId); this.container = RemoteVideo.createContainer(this.videoSpanId);
this.initBrowserSpecificProperties();
if (APP.conference.isModerator) { if (APP.conference.isModerator) {
this.addRemoteVideoMenu(); this.addRemoteVideoMenu();
} }

View File

@ -528,4 +528,25 @@ SmallVideo.prototype.waitForResolutionChange = function() {
}; };
}; };
/**
* Initalizes any browser specific properties. Currently sets the overflow
* property for Qt browsers on Windows to hidden, thus fixing the following
* problem:
* Some browsers don't have full support of the object-fit property for the
* video element and when we set video object-fit to "cover" the video
* actually overflows the boundaries of its container, so it's important
* to indicate that the "overflow" should be hidden.
*
* Setting this property for all browsers will result in broken audio levels,
* which makes this a temporary solution, before reworking audio levels.
*/
SmallVideo.prototype.initBrowserSpecificProperties = function() {
var userAgent = window.navigator.userAgent;
if (userAgent.indexOf("QtWebEngine") > -1
&& userAgent.indexOf("Windows") > -1) {
$('#' + this.videoSpanId).css("overflow", "hidden");
}
};
export default SmallVideo; export default SmallVideo;