feat(avatar): SmallVideo uses the existing Avatar component. (#1712)

* feat(avatar): SmallVideo uses the existing Avatar component.

modules/UI/videolayout/RemoteVideo.js

@@ -516,7 +516,11 @@ RemoteVideo.prototype.remove = function () {
     this.removeAudioLevelIndicator();
 
     this.removeConnectionIndicator();
+
     this.removeDisplayName();
+
+    this.removeAvatar();
+
     // Make sure that the large video is updated if are removing its
     // corresponding small video.
     this.VideoLayout.updateAfterThumbRemoved(this.id);
@@ -692,6 +696,10 @@ RemoteVideo.createContainer = function (spanId) {
     displayNameContainer.className = 'displayNameContainer';
     container.appendChild(displayNameContainer);
 
+    const avatarContainer = document.createElement('div');
+    avatarContainer.className = 'avatar-container';
+    container.appendChild(avatarContainer);
+
     var remotes = document.getElementById('filmstripRemoteVideosContainer');
     return remotes.appendChild(container);
 };

modules/UI/videolayout/SmallVideo.js

@@ -9,6 +9,9 @@ import { Provider } from 'react-redux';
 import { i18next } from '../../../react/features/base/i18n';
 import { AudioLevelIndicator }
     from '../../../react/features/audio-level-indicator';
+import {
+    Avatar as AvatarDisplay
+} from '../../../react/features/base/participants';
 import {
     ConnectionIndicator
 } from '../../../react/features/connection-indicator';
@@ -477,7 +480,7 @@ SmallVideo.prototype.selectVideoElement = function () {
  * element which displays the user's avatar.
  */
 SmallVideo.prototype.$avatar = function () {
-    return $('#' + this.videoSpanId + ' .userAvatar');
+    return $('#' + this.videoSpanId + ' .avatar-container');
 };
 
 /**
@@ -652,21 +655,40 @@ SmallVideo.prototype.updateView = function () {
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME));
 };
 
+/**
+ * Updates the react component displaying the avatar with the passed in avatar
+ * url.
+ *
+ * @param {string} avatarUrl - The uri to the avatar image.
+ * @returns {void}
+ */
 SmallVideo.prototype.avatarChanged = function (avatarUrl) {
-    var thumbnail = $('#' + this.videoSpanId);
+    const thumbnail = this.$avatar().get(0);
-    var avatarSel = this.$avatar();
     this.hasAvatar = true;
 
-    // set the avatar in the thumbnail
+    if (thumbnail) {
-    if (avatarSel && avatarSel.length > 0) {
+        /* jshint ignore:start */
-        avatarSel[0].src = avatarUrl;
+        ReactDOM.render(
-    } else {
+            <AvatarDisplay
-        if (thumbnail && thumbnail.length > 0) {
+                className = 'userAvatar'
-            var avatarElement = document.createElement('img');
+                uri = { avatarUrl } />,
-            avatarElement.className = 'userAvatar';
+            thumbnail
-            avatarElement.src = avatarUrl;
+        );
-            thumbnail.append(avatarElement);
+        /* jshint ignore:end */
-        }
+    }
+};
+
+/**
+ * Unmounts any attached react components (particular the avatar image) from
+ * the avatar container.
+ *
+ * @returns {void}
+ */
+SmallVideo.prototype.removeAvatar = function () {
+    const thumbnail = this.$avatar().get(0);
+
+    if (thumbnail) {
+        ReactDOM.unmountComponentAtNode(thumbnail);
     }
 };
 

react/features/filmstrip/components/Filmstrip.web.js

@@ -41,6 +41,7 @@ export default class Filmstrip extends Component {
                             </div>
                             <div className = 'videocontainer__hoverOverlay' />
                             <div className = 'displayNameContainer' />
+                            <div className = 'avatar-container' />
                         </span>
                     </div>
                     <div