matrix-dimension/web/app/widget_wrappers/jitsi/jitsi.component.ts

72 lines
2.4 KiB
TypeScript
Raw Normal View History

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import * as $ from "jquery";
2017-12-23 15:15:54 -05:00
import { DimensionApiService } from "../../shared/services/dimension-api.service";
import { JitsiWidget } from "../../shared/models/integration";
declare var JitsiMeetExternalAPI: any;
@Component({
selector: "my-jitsi-widget-wrapper",
templateUrl: "jitsi.component.html",
styleUrls: ["jitsi.component.scss"],
})
export class JitsiWidgetWrapperComponent implements OnInit {
public isJoined = false;
private domain: string;
private conferenceId: string;
private displayName: string;
private avatarUrl: string;
private userId: string;
private jitsiApiObj: any;
2017-12-23 15:15:54 -05:00
constructor(activatedRoute: ActivatedRoute, private api: DimensionApiService) {
let params: any = activatedRoute.snapshot.queryParams;
this.domain = params.domain;
2017-12-14 00:57:13 -05:00
this.conferenceId = params.confId || params.conferenceId;
this.displayName = params.displayName;
this.avatarUrl = params.avatarUrl;
this.userId = params.userId;
}
public ngOnInit() {
2017-12-23 15:15:54 -05:00
this.api.getWidget("jitsi").then(integration => {
const widget = <JitsiWidget>integration;
$.getScript(widget.options.scriptUrl);
});
}
public joinConference() {
$(".join-conference-wrapper").hide();
$("#jitsiContainer").show();
this.jitsiApiObj = new JitsiMeetExternalAPI(this.domain, {
width: "100%",
height: "100%",
parentNode: document.querySelector("#jitsiContainer"),
roomName: this.conferenceId,
interfaceConfigOverwrite: {
SHOW_JITSI_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
MAIN_TOOLBAR_BUTTONS: [],
VIDEO_LAYOUT_FIT: "height",
}
});
if (this.displayName) this.jitsiApiObj.executeCommand("displayName", this.displayName);
if (this.avatarUrl) this.jitsiApiObj.executeCommand("avatarUrl", this.avatarUrl.toString());
if (this.userId) this.jitsiApiObj.executeCommand("email", this.userId);
this.jitsiApiObj.on("readyToClose", () => {
this.isJoined = false;
$(".join-conference-wrapper").show();
$("#jitsiContainer").hide().html("");
});
this.isJoined = true;
}
}