haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes fadeIn/fadeOut large video transitions in Safari. Enables animation on video resize when switching between camera and screen video.

This commit is contained in:
paweldomas 2015-08-18 12:26:50 +02:00
parent c8bbded994
commit eb63b24a9a
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/videolayout_default.css
View File

@ -101,12 +101,14 @@
}
#largeVideo,
#largeVideoWrapper,
#largeVideoContainer {
overflow: hidden;
text-align: center;
}
#largeVideo
#largeVideo,
#largeVideoWrapper
{
object-fit: cover;
}
@ -116,6 +118,9 @@
#localVideoWrapper>video,
#localVideoWrapper>object,
#localVideoWrapper,
#largeVideoWrapper,
#largeVideoWrapper>video,
#largeVideoWrapper>object,
.videocontainer>video,
.videocontainer>object {
position: absolute;

2
index.html
View File

@ -25,7 +25,7 @@
<link rel="stylesheet" href="css/font.css?v=7"/>
<link rel="stylesheet" href="css/toastr.css?v=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=31"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=19" id="videolayout_default"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=20" id="videolayout_default"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
<link rel="stylesheet" href="css/modaldialog.css?v=3">

26
modules/UI/videolayout/LargeVideo.js
View File

@ -267,7 +267,7 @@ function changeVideo(isVisible) {
if (isVisible) {
LargeVideo.VideoLayout.largeVideoUpdated(currentSmallVideo);
$('#largeVideo').fadeIn(300);
$('#largeVideoWrapper').fadeIn(300);
}
}
@ -288,7 +288,9 @@ function createLargeVideoHTML()
'<img id="activeSpeakerAvatar" src=""/>' +
'<canvas id="activeSpeakerAudioLevel"></canvas>' +
'</div>' +
'<video id="largeVideo" autoplay oncontextmenu="return false;"></video>' +
'<div id="largeVideoWrapper">' +
'<video id="largeVideo" autoplay oncontextmenu="return false;"></video>' +
'</div id="largeVideoWrapper">' +
'<span id="videoConnectionMessage"></span>';
html += '</div>';
$(html).prependTo("#videospace");
@ -386,13 +388,13 @@ var LargeVideo = {
// or null.
this.eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, resourceJid);
}
if (RTCBrowserType.isSafari()) {
// FIXME In Safari fadeOut works only for the first time
changeVideo(this.isLargeVideoVisible());
} else {
$('#largeVideo').fadeOut(300,
changeVideo.bind($('#largeVideo'), this.isLargeVideoVisible()));
}
// We are doing fadeOut/fadeIn animations on parent div which wraps
// largeVideo, because when Temasys plugin is in use it replaces
// <video> elements with plugin <object> tag. In Safari jQuery is
// unable to store values on this plugin object which breaks all
// animation effects performed on it directly.
$('#largeVideoWrapper').fadeOut(300,
changeVideo.bind($('#largeVideo'), this.isLargeVideoVisible()));
} else {
if (currentSmallVideo) {
currentSmallVideo.showAvatar();
@ -430,7 +432,7 @@ var LargeVideo = {
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
getVideoPosition = isDesktop ? getDesktopVideoPosition
: getCameraVideoPosition;
this.position(null, null);
this.position(null, null, null, null, true);
}
},
/**
@ -464,7 +466,7 @@ var LargeVideo = {
var horizontalIndent = videoPosition[0];
var verticalIndent = videoPosition[1];
positionVideo($('#largeVideo'),
positionVideo($('#largeVideoWrapper'),
largeVideoWidth,
largeVideoHeight,
horizontalIndent, verticalIndent, animate);
@ -632,7 +634,7 @@ var LargeVideo = {
document.body.style.background = 'black';
ToolbarToggler.dockToolbar(false);//fix that
});
$('#largeVideo').fadeIn(300, function () {
$('#largeVideoWrapper').fadeIn(300, function () {
self.setLargeVideoVisible(true);
});
break;