matrix-dimension/web/app/widget-wrappers/bigbluebutton/bigbluebutton.component.ts

import { Component, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Subscription } from "rxjs/Subscription";
import { ScalarWidgetApi } from "../../shared/services/scalar/scalar-widget.api";
import { CapableWidget } from "../capable-widget";
import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
import { BigBlueButtonApiService } from "../../shared/services/integrations/bigbluebutton-api.service";
import { FE_BigBlueButtonCreateAndJoinMeeting, FE_BigBlueButtonJoin } from "../../shared/models/integration";
import { TranslateService } from "@ngx-translate/core";

@Component({
    selector: "my-bigbluebutton-widget-wrapper",
    templateUrl: "bigbluebutton.component.html",
    styleUrls: ["bigbluebutton.component.scss"],
})
export class BigBlueButtonWidgetWrapperComponent extends CapableWidget implements OnInit, OnDestroy {

    public canEmbed = true;

    /**
     * User metadata passed to us by the client
     */
    private conferenceUrl: string;
    private displayName: string;
    private userId: string;
    private avatarUrl: string;
    private meetingId: string;
    private meetingPassword: string;

    /**
     *
     * The name to join the BigBlueButton meeting with. Made up of metadata the client passes to us.
     */
    private joinName: string;

    /**
     * Whether we expect the meeting to be created on command.
     *
     * True if we'd like the meeting to be created, false if we have a greenlight URL leading to an existing meeting
     * and would like Dimension to translate that to a BigBlueButton meeting URL.
     */
    private createMeeting: boolean;

    /**
     * The ID of the room, required if createMeeting is true.
     */
    private roomId: string;

    /**
     * The poll period in ms while waiting for a meeting to start
     */
    private pollIntervalMillis = 5000;

    /**
     * Subscriber for messages from the client via the postMessage API
     */
    private bigBlueButtonApiSubscription: Subscription;

    /**
     * A status message to display to the user in the widget, typically for loading messages
     */
    public statusMessage: string;

    /**
     * Whether we are currently in a meeting
     */
    private inMeeting = false;

    /**
     * The URL to embed into the iframe
     */
    public embedUrl: SafeUrl = null;

    constructor(activatedRoute: ActivatedRoute,
                private bigBlueButtonApi: BigBlueButtonApiService,
                private sanitizer: DomSanitizer,
                public translate: TranslateService) {
        super();
        this.supportsAlwaysOnScreen = true;

        let params: any = activatedRoute.snapshot.queryParams;

        this.roomId = params.roomId;
        this.createMeeting = params.createMeeting;
        this.conferenceUrl = params.conferenceUrl;
        this.displayName = params.displayName;
        this.avatarUrl = params.avatarUrl;
        this.meetingId = params.meetingId;
        this.meetingPassword = params.meetingPassword;
        this.userId = params.userId || params.email; // Element uses `email` when placing a conference call

        // Create a nick to display in the meeting
        this.joinName = `${this.displayName} (${this.userId})`;

        console.log("BigBlueButton: should create meeting: " + this.createMeeting);
        console.log("BigBlueButton: will join as: " + this.joinName);
        console.log("BigBlueButton: got room ID: " + this.roomId);

        // Set the widget ID if we have it
        ScalarWidgetApi.widgetId = params.widgetId;
    }

    public ngOnInit() {
        super.ngOnInit();
    }

    public onIframeLoad() {
        if (this.inMeeting) {
            // The meeting has ended and we've come back full circle
            this.inMeeting = false;
            this.statusMessage = null;
            this.embedUrl = null;

            ScalarWidgetApi.sendSetAlwaysOnScreen(false);
            return;
        }

        // Have a toggle for whether we're in a meeting. We do this as we don't have a method
        // of checking which URL was just loaded in the iframe (due to different origin domains
        // and browser security), so we have to guess that it'll always be the second load (the
        // first being joining the meeting)
        this.inMeeting = true;

        // We've successfully joined the meeting
        ScalarWidgetApi.sendSetAlwaysOnScreen(true);
    }

    public joinConference(updateStatusMessage = true) {
        if (updateStatusMessage) {
            // Inform the user that we're loading their meeting
            this.statusMessage = "Joining conference...";
        }

        // Make a request to Dimension requesting the join URL
        if (this.createMeeting) {
            // Ask Dimension to return a URL for joining a meeting that it created
            this.joinThroughDimension();
        } else {
            // Provide Dimension with a Greenlight URL, which it will transform into
            // a BBB meeting URL
            this.joinThroughGreenlightUrl();
        }
    }

    // Ask Dimension to create a meeting (or use an existing one) for this room and return the embeddable meeting URL
    private async joinThroughDimension() {
        console.log("BigBlueButton: Joining meeting created by Dimension with meeting ID: " + this.meetingId);

        this.bigBlueButtonApi.getJoinUrl(this.displayName, this.userId, this.avatarUrl, this.meetingId, this.meetingPassword).then((response) => {
            console.log("The response");
            console.log(response);
            if ("errorCode" in response) {
                // This is an instance of ApiError
                if (response.errorCode === "UNKNOWN_MEETING_ID") {
                    // This meeting ID is invalid.
                    // Inform the user that they should try and start a new meeting
                    this.statusMessage = "This meeting has ended or otherwise does not exist.<br>Please start a new meeting.";
                    return;
                }

                if (response.errorCode === "MEETING_HAS_ENDED") {
                    // It's likely that everyone has left the meeting, and it's been garbage collected.
                    // Inform the user that they should try and start a new meeting
                    this.statusMessage = "This meeting has ended.<br>Please start a new meeting.";
                    return;
                }
                // Otherwise this is a generic error
                this.statusMessage = "An error occurred while loading the meeting";
            }

            // Retrieve and embed the meeting URL
            const joinUrl = (response as FE_BigBlueButtonCreateAndJoinMeeting).url;
            this.embedMeetingWithUrl(joinUrl);
        });
    }

    // Hand Dimension a Greenlight URL and receive a translated, embeddable meeting URL in response
    private joinThroughGreenlightUrl() {
        console.log("BigBlueButton: joining via greenlight url:", this.conferenceUrl);
        this.bigBlueButtonApi.joinMeetingWithGreenlightUrl(this.conferenceUrl, this.joinName).then((response) => {
            if ("errorCode" in response) {
                // This is an instance of ApiError
                if (response.errorCode === "WAITING_FOR_MEETING_START") {
                    // The meeting hasn't started yet
                    this.statusMessage = "Waiting for conference to start...";

                    // Poll until it has
                    setTimeout(this.joinConference.bind(this), this.pollIntervalMillis, false);
                    return;
                }

                // Otherwise this is a generic error
                this.statusMessage = "An error occurred while loading the meeting";
            }

            // Retrieve and embed the meeting URL
            const joinUrl = (response as FE_BigBlueButtonJoin).url;
            this.embedMeetingWithUrl(joinUrl);
        });
    }

    private embedMeetingWithUrl(url: string) {
        // Hide widget-related UI
        this.statusMessage = null;

        // Embed the return meeting URL, joining the meeting
        this.canEmbed = true;
        this.embedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);

        // Inform the client that we would like the meeting to remain visible for its duration
        ScalarWidgetApi.sendSetAlwaysOnScreen(true);
    }

    public ngOnDestroy() {
        if (this.bigBlueButtonApiSubscription) this.bigBlueButtonApiSubscription.unsubscribe();
    }

    protected onCapabilitiesSent(): void {
        super.onCapabilitiesSent();

        // Don't set alwaysOnScreen until we start a meeting
        ScalarWidgetApi.sendSetAlwaysOnScreen(false);
    }

}