|
|
|
/*
|
|
|
|
* https://github.com/morethanwords/tweb
|
|
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
|
|
*/
|
|
|
|
|
|
|
|
import replaceContent from '../../helpers/dom/replaceContent';
|
|
|
|
import setInnerHTML from '../../helpers/dom/setInnerHTML';
|
|
|
|
import {GroupCallParticipant} from '../../layer';
|
|
|
|
import {i18n} from '../../lib/langPack';
|
|
|
|
import {GROUP_CALL_PARTICIPANT_MUTED_STATE} from '.';
|
|
|
|
import {GroupCallParticipantVideoType} from './participantVideo';
|
|
|
|
import wrapEmojiText from '../../lib/richTextProcessor/wrapEmojiText';
|
|
|
|
|
|
|
|
const className = 'group-call-participant-status';
|
|
|
|
export default class GroupCallParticipantStatusElement {
|
|
|
|
public container: HTMLElement;
|
|
|
|
|
|
|
|
constructor(private withIcons: GroupCallParticipantVideoType[]) {
|
|
|
|
this.container = document.createElement('div');
|
|
|
|
this.container.classList.add(className + '-container');
|
|
|
|
}
|
|
|
|
|
|
|
|
public setState(state: GROUP_CALL_PARTICIPANT_MUTED_STATE, participant: GroupCallParticipant) {
|
|
|
|
const states = GROUP_CALL_PARTICIPANT_MUTED_STATE;
|
|
|
|
const icons = this.withIcons.filter((type) => !!participant[type]).map((type) => {
|
|
|
|
const iconClassName = `tgico-${type === 'presentation' ? 'listscreenshare' : 'videocamera_filled'}`;
|
|
|
|
const i = document.createElement('i');
|
|
|
|
i.classList.add(className + '-icon', className + '-icon-' + type, iconClassName);
|
|
|
|
return i;
|
|
|
|
});
|
|
|
|
|
|
|
|
let element2: HTMLElement, actionClassName: string;
|
|
|
|
if(state === states.MUTED_FOR_ME) {
|
|
|
|
element2 = i18n('VoiceChat.Status.MutedForYou');
|
|
|
|
actionClassName = 'is-muted';
|
|
|
|
} else if(state === states.UNMUTED) {
|
|
|
|
element2 = i18n('VoiceChat.Status.Speaking');
|
|
|
|
actionClassName = 'is-speaking';
|
|
|
|
} else if(state === states.HAND) {
|
|
|
|
element2 = i18n('VoiceChat.Status.WantsSpeak');
|
|
|
|
actionClassName = 'is-waiting';
|
|
|
|
} else if(participant.about && !icons.length) {
|
|
|
|
setInnerHTML(this.container, wrapEmojiText(participant.about));
|
|
|
|
return;
|
|
|
|
} else {
|
|
|
|
element2 = i18n('VoiceChat.Status.Listening');
|
|
|
|
actionClassName = 'is-listening';
|
|
|
|
}
|
|
|
|
|
|
|
|
const span = document.createElement('span');
|
|
|
|
span.classList.add(className, actionClassName);
|
|
|
|
span.append(...icons, element2);
|
|
|
|
|
|
|
|
replaceContent(this.container, span);
|
|
|
|
}
|
|
|
|
}
|