feat(avatar): SmallVideo uses the existing Avatar component. (#1712)
* feat(avatar): SmallVideo uses the existing Avatar component.
This commit is contained in:
parent
ab81c2b56d
commit
0de032ebd7
|
@ -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);
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
var avatarSel = this.$avatar();
|
||||
const thumbnail = this.$avatar().get(0);
|
||||
this.hasAvatar = true;
|
||||
|
||||
// set the avatar in the thumbnail
|
||||
if (avatarSel && avatarSel.length > 0) {
|
||||
avatarSel[0].src = avatarUrl;
|
||||
} else {
|
||||
if (thumbnail && thumbnail.length > 0) {
|
||||
var avatarElement = document.createElement('img');
|
||||
avatarElement.className = 'userAvatar';
|
||||
avatarElement.src = avatarUrl;
|
||||
thumbnail.append(avatarElement);
|
||||
}
|
||||
if (thumbnail) {
|
||||
/* jshint ignore:start */
|
||||
ReactDOM.render(
|
||||
<AvatarDisplay
|
||||
className = 'userAvatar'
|
||||
uri = { avatarUrl } />,
|
||||
thumbnail
|
||||
);
|
||||
/* 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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue