Htykuut

i am trying to implement following event handler of jitsi meet external api "handleVideoConferenceJoined" inside angular component. Inside this handler method, we are able to access the Jitsi object by the keyword "this" but cannot access the component object of angular.
Any help will be appreciated.

sample code.

import { Component, OnInit, ViewChild, Renderer2, ElementRef } from '@angular/core';

import { Observable } from 'rxjs/Rx';

import { ActivatedRoute, ParamMap } from '@angular/router';

import { EventEmitter } from 'events';

import { TutorService } from 'app/tutor/tutor.service';

import '../../vendor/jitsi/external_api.js';

import { JitsiService } from 'app/jitsi/jitsi.service.js';

import { StudentService } from 'app/student/student.service.js';

import { StudentSchema } from 'app/student/student.js';



declare var JitsiMeetExternalAPI: any;



declare var chrome;

declare const $: any;



@Component({

  selector: "app-conference-cmp",

  templateUrl: "conference.component.html"

})

export class ConferenceComponent implements OnInit {

  tutor: Object;

  domain: string;

  options: any;

  api: any;

  studentId: string;

  student: StudentSchema;



  constructor(

    private route: ActivatedRoute,

    private tutorservice: TutorService,

    private studentService: StudentService,

    private jitsiService: JitsiService

  ) {

  }



  ngOnInit() {

    this.domain = "meet.jit.si";

    this.route.paramMap.subscribe(

      (params: ParamMap) => (this.studentId = params.get("id"))

    );



    this.studentService

      .getStudentsByStudentID(this.studentId)

      .subscribe(student => (this.student = student));

  }



  joinSession() {

    const roomName = `${this.tutor["first_name"]}_${

      this.student["first_name"]

    }`;

    this.options = {

      roomName: roomName,

      width: 800,

      height: 500,

      parentNode: document.querySelector("#jitsiVideo"),

      configOverwrite: {},

      interfaceConfigOverwrite: {

        // filmStripOnly: true,

        TOOLBAR_BUTTONS: [

          "microphone",

          "camera",

          "closedcaptions",

          "desktop",

          "fullscreen",

          "hangup",

          "profile",

          "chat",

          "recording"

        ]

      }

    };



    this.api = new JitsiMeetExternalAPI(this.domain, this.options);

    this.api.executeCommand("displayName", this.tutor["first_name"]);



    this.api.addEventListeners({

      readyToClose: this.unload,

      participantLeft: this.handleParticipantLeft,

      participantJoined: this.handleParticipantJoined,

      videoConferenceJoined: this.handleVideoConferenceJoined,

      videoConferenceLeft: this.handleVideoConferenceLeft

    });



    localStorage.setItem('tutor_id', this.tutor['id']);



    // save new room

    // this.jitsiService.addJitsiRoom(roomName, this.tutor['id']);

  }

  handleParticipantLeft(arg) {

    if (this.getNumberOfParticipants() === 1) {

      this.dispose();

    }

  }

  handleParticipantJoined(arg) {



  }

  handleVideoConferenceJoined(arg) {

    **how to access component object here to save session in db?**

        this.jitsiService.addJitsiRoom(roomName, this.tutor['id']);

  }

  handleVideoConferenceLeft(arg) {

  }



  unload() {

    if (this instanceof JitsiMeetExternalAPI) {

      this.dispose();

    }

    $("#jitsiVideo").html("");

  }

}