tweb-i2p/src/components/groupCall/participantStatus.ts

/*
 * 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);
  }
}