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

ref(small-video): use css to set component visibility (#3039)

This commit is contained in:
virtuacoplenny 2018-05-25 13:19:51 -07:00 committed by GitHub
parent c95cb0e9cf
commit d4d5ef202a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 111 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
css/_videolayout_default.scss
View File

@ -649,3 +649,93 @@
1px 0px 1px rgba(0,0,0,0.3),
0px 0px 1px rgba(0,0,0,0.3);
}
.display-avatar-with-name {
.avatar-container {
visibility: visible;
}
.displayNameContainer {
visibility: visible;
}
.videocontainer__hoverOverlay {
visibility: visible;
}
video {
visibility: hidden;
}
}
.display-name-on-black {
.avatar-container {
visibility: hidden;
}
.displayNameContainer {
visibility: visible;
}
.videocontainer__hoverOverlay {
visibility: hidden;
}
video {
visibility: hidden;
}
}
.display-video {
.avatar-container {
visibility: hidden;
}
.displayNameContainer {
visibility: hidden;
}
.videocontainer__hoverOverlay {
visibility: hidden;
}
video {
visibility: visible;
}
}
.display-name-on-video {
.avatar-container {
visibility: hidden;
}
.displayNameContainer {
visibility: visible;
}
.videocontainer__hoverOverlay {
visibility: visible;
}
video {
visibility: visible;
}
}
.display-avatar-only {
.avatar-container {
visibility: visible;
}
.displayNameContainer {
visibility: hidden;
}
.videocontainer__hoverOverlay {
visibility: hidden;
}
video {
visibility: hidden;
}
}

46
modules/UI/videolayout/SmallVideo.js
View File

@ -85,7 +85,6 @@ function SmallVideo(VideoLayout) {
this.audioStream = null;
this.VideoLayout = VideoLayout;
this.videoIsHovered = false;
this.hideDisplayName = false;
// we can stop updating the thumbnail
this.disableUpdateView = false;
@ -599,33 +598,30 @@ SmallVideo.prototype.updateView = function() {
}
}
this.$container.removeClass((index, classNames) =>
classNames.split(' ').filter(name => name.startsWith('display-')));
// Determine whether video, avatar or blackness should be displayed
const displayMode = this.selectDisplayMode();
// Show/hide video.
UIUtil.setVisibleBySelector(this.selectVideoElement(),
displayMode === DISPLAY_VIDEO
|| displayMode === DISPLAY_VIDEO_WITH_NAME);
// Show/hide the avatar.
UIUtil.setVisibleBySelector(this.$avatar(),
displayMode === DISPLAY_AVATAR
|| displayMode === DISPLAY_AVATAR_WITH_NAME);
// Show/hide the display name.
UIUtil.setVisibleBySelector(this.$displayName(),
!this.hideDisplayName
&& (displayMode === DISPLAY_BLACKNESS_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME
|| displayMode === DISPLAY_AVATAR_WITH_NAME));
// show hide overlay when there is a video or avatar under
// the display name
UIUtil.setVisibleBySelector(this.$container.find(
'.videocontainer__hoverOverlay'),
displayMode === DISPLAY_AVATAR_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME);
switch (displayMode) {
case DISPLAY_AVATAR_WITH_NAME:
this.$container.addClass('display-avatar-with-name');
break;
case DISPLAY_BLACKNESS_WITH_NAME:
this.$container.addClass('display-name-on-black');
break;
case DISPLAY_VIDEO:
this.$container.addClass('display-video');
break;
case DISPLAY_VIDEO_WITH_NAME:
this.$container.addClass('display-name-on-video');
break;
case DISPLAY_AVATAR:
default:
this.$container.addClass('display-avatar-only');
break;
}
};
/**