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

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import {GroupCallParticipant} from '../../layer';
import type {GroupCallOutputSource} from '../../lib/appManagers/appGroupCallsManager';
import {i18n} from '../../lib/langPack';
import PeerTitle from '../peerTitle';
import {getGroupCallParticipantMutedState} from '.';
import GroupCallParticipantMutedIcon from './participantMutedIcon';
import GroupCallParticipantStatusElement from './participantStatus';
import GroupCallInstance from '../../lib/calls/groupCallInstance';
import callVideoCanvasBlur from '../call/videoCanvasBlur';
import getPeerId from '../../lib/appManagers/utils/peers/getPeerId';
import {AppManagers} from '../../lib/appManagers/managers';

const className = 'group-call-participant-video';

export type GroupCallParticipantVideoType = 'video' | 'presentation';
export default class GroupCallParticipantVideoElement {
  public container: HTMLElement;
  private peerTitle: PeerTitle;
  private subtitle: HTMLElement;
  private info: HTMLElement;
  private left: HTMLElement;
  private right: HTMLElement;
  private header: HTMLElement;
  private groupCallParticipantMutedIcon: GroupCallParticipantMutedIcon;
  private groupCallParticipantStatus: GroupCallParticipantStatusElement;

  constructor(private managers: AppManagers, private instance: GroupCallInstance, public source: GroupCallOutputSource) {
    this.container = document.createElement('div');
    this.container.classList.add(className + '-container');

    this.info = document.createElement('div');
    this.info.classList.add(className + '-info');

    this.left = document.createElement('div');
    this.left.classList.add(className + '-info-left');

    this.right = document.createElement('div');
    this.right.classList.add(className + '-info-right');

    this.info.append(this.left, this.right);

    this.container.append(this.info);
  }

  public setPinned(value: boolean) {
    if(!value) {
      if(this.header) {
        this.header.remove();
        this.header = undefined;
      }

      return;
    } else if(this.header) {
      return;
    }

    // if(!this.header) {
    this.header = document.createElement('div');
    this.header.classList.add(className + '-header');

    const icon = document.createElement('i');
    icon.classList.add('group-call-pin-icon', 'tgico-pin');
    this.header.append(icon);

    this.container.append(this.header);
    // }

    // this.container.classList.toggle('is-pinned', value);
  }

  public setParticipant(participant: GroupCallParticipant, type: GroupCallParticipantVideoType, video: HTMLVideoElement) {
    let peerTitleElement: HTMLElement;
    if(participant.pFlags.self) {
      peerTitleElement = i18n('VoiceChat.Status.You');
      peerTitleElement.classList.add('peer-title');
    } else {
      this.peerTitle = new PeerTitle({
        peerId: getPeerId(participant.peer)
      });

      peerTitleElement = this.peerTitle.element;
    }

    this.groupCallParticipantMutedIcon = new GroupCallParticipantMutedIcon(false);
    this.groupCallParticipantStatus = new GroupCallParticipantStatusElement([type]);

    this.left.append(peerTitleElement, this.groupCallParticipantStatus.container);

    this.right.append(this.groupCallParticipantMutedIcon.container);

    video.classList.add(className, 'call-video');

    if(video.paused) {
      video.play();
    }

    const canvas = callVideoCanvasBlur(video);
    canvas.classList.add(className + '-blur');

    this.container.prepend(canvas, video);

    this.updateParticipant(participant);
  }

  public updateParticipant(participant: GroupCallParticipant) {
    const state = getGroupCallParticipantMutedState(participant);

    this.groupCallParticipantMutedIcon.setState(state);
    this.groupCallParticipantStatus.setState(state, participant);
  }

  public destroy() {
    this.groupCallParticipantMutedIcon.destroy();
  }
}