feat(LargeVideo): Add logging.

modules/UI/videolayout/LargeVideoManager.js

@@ -229,6 +229,9 @@ export default class LargeVideoManager {
 
         preUpdate.then(() => {
             const { id, stream, videoType, resolve } = this.newStreamData;
+
+            this.newStreamData = null;
+
             const state = APP.store.getState();
             const shouldHideSelfView = getHideSelfView(state);
             const localId = getLocalParticipant(state)?.id;
@@ -239,8 +242,6 @@ export default class LargeVideoManager {
             // the video container type (Etherpad, SharedVideo, VideoContainer).
             const isVideoContainer = LargeVideoManager.isVideoContainer(videoType);
 
-            this.newStreamData = null;
-
             logger.debug(`Scheduled large video update for ${id}`);
             this.state = videoType;
             // eslint-disable-next-line no-shadow
@@ -287,10 +288,6 @@ export default class LargeVideoManager {
                     || streamingStatusActive
                 );
 
-            this.videoTrack?.jitsiTrack?.getVideoType() === VIDEO_TYPE.DESKTOP
-                && logger.debug(`Remote track ${videoTrack?.jitsiTrack}, isVideoMuted=${isVideoMuted},`
-                + ` streamingStatusActive=${streamingStatusActive}, isVideoRenderable=${isVideoRenderable}`);
-
             const isAudioOnly = APP.conference.isAudioOnly();
 
             // Multi-stream is not supported on plan-b endpoints even if its is enabled via config.js. A virtual
@@ -303,6 +300,10 @@ export default class LargeVideoManager {
                 = isVideoContainer
                     && ((isAudioOnly && videoType !== VIDEO_TYPE.DESKTOP) || !isVideoRenderable || legacyScreenshare);
 
+            logger.debug(`scheduleLargeVideoUpdate: Remote track ${videoTrack?.jitsiTrack}, isVideoMuted=${
+                isVideoMuted}, streamingStatusActive=${streamingStatusActive}, isVideoRenderable=${
+                isVideoRenderable}, showAvatar=${showAvatar}`);
+
             let promise;
 
             // do not show stream if video is muted

modules/UI/videolayout/VideoContainer.js

@@ -26,6 +26,13 @@ const FADE_DURATION_MS = 300;
 
 const logger = Logger.getLogger(__filename);
 
+/**
+ * List of container events that we are going to process for the large video.
+ *
+ * NOTE: Currently used only for logging for debug purposes.
+ */
+const containerEvents = [ 'abort', 'canplaythrough', 'ended', 'error', 'stalled', 'suspend', 'waiting' ];
+
 /**
  * Returns an array of the video dimensions, so that it keeps it's aspect
  * ratio and fits available area with it's larger dimension. This method
@@ -242,11 +249,18 @@ export class VideoContainer extends LargeContainer {
         this.wrapperParent = document.getElementById('largeVideoElementsContainer');
         this.avatarHeight = document.getElementById('dominantSpeakerAvatarContainer').getBoundingClientRect().height;
         this.video.onplaying = function(event) {
+            logger.debug('Large video is playing!');
             if (typeof resizeContainer === 'function') {
                 resizeContainer(event);
             }
         };
 
+        containerEvents.forEach(event => {
+            this.video.addEventListener(event, () => {
+                logger.debug(`${event} handler was called for the large video.`);
+            });
+        });
+
         /**
          * A Set of functions to invoke when the video element resizes.
          *
@@ -489,6 +503,8 @@ export class VideoContainer extends LargeContainer {
     setStream(userID, stream, videoType) {
         this.userId = userID;
         if (this.stream === stream && !stream?.forceStreamToReattach) {
+            logger.debug(`SetStream on the large video for user ${userID} ignored: the stream is not changed!`);
+
             // Handles the use case for the remote participants when the
             // videoType is received with delay after turning on/off the
             // desktop sharing.
@@ -513,12 +529,15 @@ export class VideoContainer extends LargeContainer {
         this.videoType = videoType;
 
         if (!stream) {
+            logger.debug('SetStream on the large video is called without a stream argument!');
+
             return;
         }
 
         if (this.video) {
+            logger.debug(`Attaching a remote track to the large video for user ${userID}`);
             stream.attach(this.video).catch(error => {
-                logger.error(`Attaching the remote track ${stream} has failed with `, error);
+                logger.error(`Attaching the remote track ${stream} to large video has failed with `, error);
             });
 
             // Ensure large video gets play() called on it when a new stream is attached to it. This is necessary in the
@@ -529,6 +548,9 @@ export class VideoContainer extends LargeContainer {
 
             this.video.style.transform = flipX ? 'scaleX(-1)' : 'none';
             this._updateBackground();
+        } else {
+            logger.debug(`SetStream on the large video won't attach a track for ${
+                userID} because no large video element was found!`);
         }
     }
 

modules/UI/videolayout/VideoLayout.js

@@ -154,6 +154,8 @@ const VideoLayout = {
 
     updateLargeVideo(id, forceUpdate, forceStreamToReattach = false) {
         if (!largeVideo) {
+            logger.debug(`Ignoring large video update with user id ${id}: large video not initialized yet!`);
+
             return;
         }
         const currentContainer = largeVideo.getCurrentContainer();