diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js
index f13c4c656..651a499aa 100644
--- a/modules/UI/videolayout/SmallVideo.js
+++ b/modules/UI/videolayout/SmallVideo.js
@@ -520,40 +520,33 @@ SmallVideo.prototype.isVideoPlayable = function() {
* @return {number} one of DISPLAY_VIDEO,DISPLAY_AVATAR
* or DISPLAY_BLACKNESS_WITH_NAME.
*/
-SmallVideo.prototype.selectDisplayMode = function() {
- const isAudioOnly = APP.conference.isAudioOnly();
- const tileViewEnabled = shouldDisplayTileView(APP.store.getState());
- const isVideoPlayable = this.isVideoPlayable();
- const hasVideo = Boolean(this.selectVideoElement().length);
+SmallVideo.prototype.selectDisplayMode = function(input) {
// Display name is always and only displayed when user is on the stage
- if (this.isCurrentlyOnLargeVideo() && !tileViewEnabled) {
- return isVideoPlayable && !isAudioOnly ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME;
- } else if (isVideoPlayable && hasVideo && !isAudioOnly) {
+ if (input.isCurrentlyOnLargeVideo && !input.tileViewEnabled) {
+ return input.isVideoPlayable && !input.isAudioOnly ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME;
+ } else if (input.isVideoPlayable && input.hasVideo && !input.isAudioOnly) {
// check hovering and change state to video with name
- return this._isHovered() ? DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
+ return input.isHovered ? DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
}
// check hovering and change state to avatar with name
- return this._isHovered() ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+ return input.isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
};
/**
- * Prints information about the current display mode.
+ * Computes information that determine the display mode.
*
- * @param {string} mode - The current mode.
- * @returns {void}
+ * @returns {Object}
*/
-SmallVideo.prototype._printDisplayModeInfo = function(mode) {
- const isAudioOnly = APP.conference.isAudioOnly();
- const tileViewEnabled = shouldDisplayTileView(APP.store.getState());
- const isVideoPlayable = this.isVideoPlayable();
- const hasVideo = Boolean(this.selectVideoElement().length);
- const displayModeInfo = {
- isAudioOnly,
- tileViewEnabled,
- isVideoPlayable,
- hasVideo,
+SmallVideo.prototype.computeDisplayModeInput = function() {
+ return {
+ isCurrentlyOnLargeVideo: this.isCurrentlyOnLargeVideo(),
+ isHovered: this._isHovered(),
+ isAudioOnly: APP.conference.isAudioOnly(),
+ tileViewEnabled: shouldDisplayTileView(APP.store.getState()),
+ isVideoPlayable: this.isVideoPlayable(),
+ hasVideo: Boolean(this.selectVideoElement().length),
connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
mutedWhileDisconnected: this.mutedWhileDisconnected,
wasVideoPlayed: this.wasVideoPlayed,
@@ -561,8 +554,6 @@ SmallVideo.prototype._printDisplayModeInfo = function(mode) {
isVideoMuted: this.isVideoMuted,
videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
};
-
- logger.debug(`Displaying ${mode} for ${this.id}, reason: [${JSON.stringify(displayModeInfo)}]`);
};
/**
@@ -596,8 +587,10 @@ SmallVideo.prototype.updateView = function() {
const oldDisplayMode = this.displayMode;
let displayModeString = '';
+ const displayModeInput = this.computeDisplayModeInput();
+
// Determine whether video, avatar or blackness should be displayed
- this.displayMode = this.selectDisplayMode();
+ this.displayMode = this.selectDisplayMode(displayModeInput);
switch (this.displayMode) {
case DISPLAY_AVATAR_WITH_NAME:
@@ -624,7 +617,7 @@ SmallVideo.prototype.updateView = function() {
}
if (this.displayMode !== oldDisplayMode) {
- this._printDisplayModeInfo(displayModeString);
+ logger.debug(`Displaying ${displayModeString} for ${this.id}, reason: [${JSON.stringify(displayModeInput)}]`);
}
};