fix(remoteVideo): Attaching video stream.

modules/UI/videolayout/RemoteVideo.js

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
 import { I18nextProvider } from 'react-i18next';
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
+import { createThumbnailOffsetParentIsNullEvent, sendAnalytics } from '../../../react/features/analytics';
 import { i18next } from '../../../react/features/base/i18n';
 import {
     JitsiParticipantConnectionStatus
@@ -512,11 +513,31 @@ RemoteVideo.prototype.addRemoteStreamElement = function(stream) {
 
     $(streamElement).hide();
 
-    // If the container is currently visible
+    this.waitForPlayback(streamElement, stream);
-    // we attach the stream to the element.
+    stream.attach(streamElement);
-    if (!isVideo || (this.container.offsetParent !== null && isVideo)) {
+
-        this.waitForPlayback(streamElement, stream);
+    // TODO: Remove once we verify that this.container.offsetParent === null was the reason for not attached video
-        stream.attach(streamElement);
+    // streams to the thumbnail.
+    if (isVideo && this.container.offsetParent === null) {
+        sendAnalytics(createThumbnailOffsetParentIsNullEvent(this.id));
+        const parentNodesDisplayProps = [
+            '#filmstripRemoteVideosContainer',
+            '#filmstripRemoteVideos',
+            '#remoteVideos',
+            '.filmstrip',
+            '#videospace',
+            '#videoconference_page',
+            '#react'
+        ].map(selector => `${selector} - ${$(selector).css('display')}`);
+        const videoConferencePageParent = $('#videoconference_page').parent();
+        const reactDiv = document.getElementById('react');
+
+        parentNodesDisplayProps.push(
+            `${videoConferencePageParent.attr('class')} - ${videoConferencePageParent.css('display')}`);
+        parentNodesDisplayProps.push(`this.container - ${this.$container.css('display')}`);
+        logger.debug(`this.container.offsetParent is null [user: ${this.id}, ${
+            parentNodesDisplayProps.join(', ')}, #react.offsetParent - ${
+            reactDiv && reactDiv.offsetParent !== null ? 'not null' : 'null'}]`);
     }
 
     if (!isVideo) {

react/features/analytics/AnalyticsEvents.js

@@ -692,6 +692,21 @@ export function createSyncTrackStateEvent(mediaType, muted) {
     };
 }
 
+/**
+ * Creates an event that indicates the thumbnail offset parent is null.
+ *
+ * @param {string} id - The id of the user related to the thumbnail.
+ * @returns {Object} The event in a format suitable for sending via sendAnalytics.
+ */
+export function createThumbnailOffsetParentIsNullEvent(id) {
+    return {
+        action: 'OffsetParentIsNull',
+        attributes: {
+            id
+        }
+    };
+}
+
 /**
  * Creates an event associated with a toolbar button being clicked/pressed. By
  * convention, where appropriate an attribute named 'enable' should be used to