d7e112aaf0
* ref(display-name): do not pass in display name The component gets the state itself from redux. * fix(display-name): do not default name to placeholder name The web display name component supports inline editing of the name. Problems can occur when the displayed name differs from the actual saved name, because participants without a display name, including the local user, have a different, default display name displayed. So when editing starts, the input field is populated with the default name. To workaround such while supporting fetching the display name using mapStateToProps, pass in both the name which should be shown and the name value saved in settings. * ref(display-name): rename methods
85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
/* global $ */
|
|
|
|
import SmallVideo from '../videolayout/SmallVideo';
|
|
|
|
const logger = require('jitsi-meet-logger').getLogger(__filename);
|
|
|
|
/**
|
|
*
|
|
*/
|
|
export default function SharedVideoThumb(participant, videoType, VideoLayout) {
|
|
this.id = participant.id;
|
|
|
|
this.url = participant.id;
|
|
this.setVideoType(videoType);
|
|
this.videoSpanId = 'sharedVideoContainer';
|
|
this.container = this.createContainer(this.videoSpanId);
|
|
this.$container = $(this.container);
|
|
|
|
this.bindHoverHandler();
|
|
SmallVideo.call(this, VideoLayout);
|
|
this.isVideoMuted = true;
|
|
this.updateDisplayName();
|
|
|
|
this.container.onclick = this._onContainerClick;
|
|
this.container.ondblclick = this._onContainerDoubleClick;
|
|
}
|
|
SharedVideoThumb.prototype = Object.create(SmallVideo.prototype);
|
|
SharedVideoThumb.prototype.constructor = SharedVideoThumb;
|
|
|
|
/**
|
|
* hide display name
|
|
*/
|
|
// eslint-disable-next-line no-empty-function
|
|
SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function() {};
|
|
|
|
// eslint-disable-next-line no-empty-function
|
|
SharedVideoThumb.prototype.avatarChanged = function() {};
|
|
|
|
SharedVideoThumb.prototype.createContainer = function(spanId) {
|
|
const container = document.createElement('span');
|
|
|
|
container.id = spanId;
|
|
container.className = 'videocontainer';
|
|
|
|
// add the avatar
|
|
const avatar = document.createElement('img');
|
|
|
|
avatar.className = 'sharedVideoAvatar';
|
|
avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
|
|
container.appendChild(avatar);
|
|
|
|
const displayNameContainer = document.createElement('div');
|
|
|
|
displayNameContainer.className = 'displayNameContainer';
|
|
container.appendChild(displayNameContainer);
|
|
|
|
const remoteVideosContainer
|
|
= document.getElementById('filmstripRemoteVideosContainer');
|
|
const localVideoContainer
|
|
= document.getElementById('localVideoTileViewContainer');
|
|
|
|
remoteVideosContainer.insertBefore(container, localVideoContainer);
|
|
|
|
return container;
|
|
};
|
|
|
|
/**
|
|
* Triggers re-rendering of the display name using current instance state.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
SharedVideoThumb.prototype.updateDisplayName = function() {
|
|
if (!this.container) {
|
|
logger.warn(`Unable to set displayName - ${this.videoSpanId
|
|
} does not exist`);
|
|
|
|
return;
|
|
}
|
|
|
|
this._renderDisplayName({
|
|
elementID: `${this.videoSpanId}_name`,
|
|
participantID: this.id
|
|
});
|
|
};
|