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