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

fix(largevideo): show the background video only for video container type

This commit is contained in:
hristoterezov 2017-06-20 16:40:18 -05:00 committed by yanas
parent c250da59d5
commit 486d0802a8
2 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
modules/UI/videolayout/VideoContainer.js
View File

@ -214,6 +214,13 @@ export class VideoContainer extends LargeContainer {
this.$wrapper = $('#largeVideoWrapper');
/**
* FIXME: currently using parent() because I can't come up with name
* for id. We'll need to probably refactor the HTML related to the large
* video anyway.
*/
this.$wrapperParent = this.$wrapper.parent();
this.avatarHeight = $("#dominantSpeakerAvatar").height();
var onPlayingCallback = function (event) {
@ -524,7 +531,7 @@ export class VideoContainer extends LargeContainer {
}
return new Promise((resolve) => {
this.$wrapper.css('visibility', 'visible').fadeTo(
this.$wrapperParent.css('visibility', 'visible').fadeTo(
FADE_DURATION_MS,
1,
() => {
@ -539,15 +546,14 @@ export class VideoContainer extends LargeContainer {
// as the container is hidden/replaced by another container
// hide its avatar
this.showAvatar(false);
// its already hidden
if (!this.isVisible) {
return Promise.resolve();
}
return new Promise((resolve) => {
this.$wrapper.fadeTo(FADE_DURATION_MS, 0, () => {
this.$wrapper.css('visibility', 'hidden');
this.$wrapperParent.fadeTo(FADE_DURATION_MS, 0, () => {
this.$wrapperParent.css('visibility', 'hidden');
this.isVisible = false;
resolve();
});

36
react/features/large-video/components/LargeVideo.web.js
View File

@ -37,17 +37,31 @@ export default class LargeVideo extends Component {
src = '' />
</div>
<span id = 'remoteConnectionMessage' />
<div className = 'video_blurred_container'>
<video
autoPlay = { true }
id = 'largeVideoBackground'
muted = 'true' />
</div>
<div id = 'largeVideoWrapper'>
<video
autoPlay = { true }
id = 'largeVideo'
muted = { true } />
<div>
<div className = 'video_blurred_container'>
<video
autoPlay = { true }
id = 'largeVideoBackground'
muted = 'true' />
</div>
{
/**
* FIXME: the architecture of elements related to the
* large video and the naming. The background is not
* part of largeVideoWrapper because we are controlling
* the size of the video through largeVideoWrapper.
* That's why we need another container for the the
* background and the largeVideoWrapper in order to
* hide/show them.
*/
}
<div id = 'largeVideoWrapper'>
<video
autoPlay = { true }
id = 'largeVideo'
muted = { true } />
</div>
</div>
<span id = 'localConnectionMessage' />