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'); 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(); this.avatarHeight = $("#dominantSpeakerAvatar").height();
var onPlayingCallback = function (event) { var onPlayingCallback = function (event) {
@ -524,7 +531,7 @@ export class VideoContainer extends LargeContainer {
} }
return new Promise((resolve) => { return new Promise((resolve) => {
this.$wrapper.css('visibility', 'visible').fadeTo( this.$wrapperParent.css('visibility', 'visible').fadeTo(
FADE_DURATION_MS, FADE_DURATION_MS,
1, 1,
() => { () => {
@ -539,15 +546,14 @@ export class VideoContainer extends LargeContainer {
// as the container is hidden/replaced by another container // as the container is hidden/replaced by another container
// hide its avatar // hide its avatar
this.showAvatar(false); this.showAvatar(false);
// its already hidden // its already hidden
if (!this.isVisible) { if (!this.isVisible) {
return Promise.resolve(); return Promise.resolve();
} }
return new Promise((resolve) => { return new Promise((resolve) => {
this.$wrapper.fadeTo(FADE_DURATION_MS, 0, () => { this.$wrapperParent.fadeTo(FADE_DURATION_MS, 0, () => {
this.$wrapper.css('visibility', 'hidden'); this.$wrapperParent.css('visibility', 'hidden');
this.isVisible = false; this.isVisible = false;
resolve(); resolve();
}); });

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

@ -37,17 +37,31 @@ export default class LargeVideo extends Component {
src = '' /> src = '' />
</div> </div>
<span id = 'remoteConnectionMessage' /> <span id = 'remoteConnectionMessage' />
<div className = 'video_blurred_container'> <div>
<video <div className = 'video_blurred_container'>
autoPlay = { true } <video
id = 'largeVideoBackground' autoPlay = { true }
muted = 'true' /> id = 'largeVideoBackground'
</div> muted = 'true' />
<div id = 'largeVideoWrapper'> </div>
<video {
autoPlay = { true }
id = 'largeVideo' /**
muted = { true } /> * 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> </div>
<span id = 'localConnectionMessage' /> <span id = 'localConnectionMessage' />