319 lines
9.3 KiB
TypeScript
319 lines
9.3 KiB
TypeScript
import { AfterViewInit, Component } from '@angular/core';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
import { PanelService } from 'openvidu-components-angular';
|
|
import { Subscription } from 'rxjs';
|
|
import { RestService } from '../services/rest.service';
|
|
|
|
interface TemplateDirectives {
|
|
name: string;
|
|
subDirectives?: TemplateDirectives[];
|
|
}
|
|
|
|
interface APIDirectives {
|
|
component: string;
|
|
directives: { name: AttributeDirective; checked: boolean }[];
|
|
}
|
|
|
|
enum StructuralDirectives {
|
|
TOOLBAR = 'ovToolbar',
|
|
TOOLBAR_BUTTONS = 'ovToolbarAdditionalButtons',
|
|
TOOLBAR_PANEL_BUTTONS = 'ovToolbarAdditionalPanelButtons',
|
|
PANEL = 'ovPanel',
|
|
ADDITIONAL_PANELS = 'ovAdditionalPanels',
|
|
CHAT_PANEL = 'ovChatPanel',
|
|
PARTICIPANTS_PANEL = 'ovParticipantsPanel',
|
|
PARTICIPANTS_PANEL_ITEM = 'ovParticipantPanelItem',
|
|
PARTICIPANTS_PANEL_ITEM_ELEMENTS = 'ovParticipantPanelItemElements',
|
|
ACTIVITIES_PANEL = 'ovActivitiesPanel',
|
|
LAYOUT = 'ovLayout',
|
|
STREAM = 'ovStream'
|
|
}
|
|
|
|
export enum AttributeDirective {
|
|
TOOLBAR_SCREENSHARE = 'screenshareButton',
|
|
TOOLBAR_FULLSCREEN = 'fullscreenButton',
|
|
TOOLBAR_BROADCASTING = 'broadcastingButton',
|
|
TOOLBAR_LEAVE = 'leaveButton',
|
|
TOOLBAR_PARTICIPANTS_PANEL = 'participantsPanelButton',
|
|
TOOLBAR_ACTIVITIES_PANEL = 'activitiesPanelButton',
|
|
TOOLBAR_CHAT_PANEL = 'chatPanelButton',
|
|
TOOLBAR_DISPLAY_ROOM = 'displayRoomName',
|
|
TOOLBAR_DISPLAY_LOGO = 'displayLogo',
|
|
STREAM_PARTICIPANT_NAME = 'displayParticipantName',
|
|
STREAM_AUDIO_DETECTION = 'displayAudioDetection',
|
|
STREAM_SETTINGS = 'settingsButton',
|
|
PARTICIPANT_ITEM_MUTE = 'muteButton',
|
|
ACTIVITIES_PANEL_RECORDING_ACTIVITY = 'recordingActivity',
|
|
ACTIVITIES_PANEL_BROADCASTING_ACTIVITY = 'broadcastingActivity'
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-testing',
|
|
templateUrl: './testing.component.html',
|
|
styleUrls: ['./testing.component.scss']
|
|
})
|
|
export class TestingComponent implements AfterViewInit {
|
|
roomName: string;
|
|
templateDirectives: TemplateDirectives[] = [
|
|
{
|
|
name: StructuralDirectives.TOOLBAR,
|
|
subDirectives: [{ name: StructuralDirectives.TOOLBAR_BUTTONS }, { name: StructuralDirectives.TOOLBAR_PANEL_BUTTONS }]
|
|
},
|
|
{
|
|
name: StructuralDirectives.PANEL,
|
|
subDirectives: [
|
|
{ name: StructuralDirectives.ACTIVITIES_PANEL },
|
|
{ name: StructuralDirectives.ADDITIONAL_PANELS },
|
|
{ name: StructuralDirectives.CHAT_PANEL },
|
|
{
|
|
name: StructuralDirectives.PARTICIPANTS_PANEL,
|
|
subDirectives: [
|
|
{
|
|
name: StructuralDirectives.PARTICIPANTS_PANEL_ITEM,
|
|
subDirectives: [{ name: StructuralDirectives.PARTICIPANTS_PANEL_ITEM_ELEMENTS }]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: StructuralDirectives.LAYOUT,
|
|
subDirectives: [{ name: StructuralDirectives.STREAM }]
|
|
}
|
|
];
|
|
|
|
apiDirectives: APIDirectives[] = [
|
|
{
|
|
component: StructuralDirectives.TOOLBAR,
|
|
directives: [
|
|
{ name: AttributeDirective.TOOLBAR_CHAT_PANEL, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_DISPLAY_LOGO, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_DISPLAY_ROOM, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_FULLSCREEN, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_BROADCASTING, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_LEAVE, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_ACTIVITIES_PANEL, checked: true },
|
|
{ name: AttributeDirective.TOOLBAR_SCREENSHARE, checked: true }
|
|
]
|
|
},
|
|
{
|
|
component: StructuralDirectives.STREAM,
|
|
directives: [
|
|
{ name: AttributeDirective.STREAM_AUDIO_DETECTION, checked: true },
|
|
{ name: AttributeDirective.STREAM_PARTICIPANT_NAME, checked: true },
|
|
{ name: AttributeDirective.STREAM_SETTINGS, checked: true }
|
|
]
|
|
},
|
|
{
|
|
component: StructuralDirectives.PARTICIPANTS_PANEL_ITEM,
|
|
directives: [{ name: AttributeDirective.PARTICIPANT_ITEM_MUTE, checked: true }]
|
|
},
|
|
{
|
|
component: StructuralDirectives.ACTIVITIES_PANEL,
|
|
directives: [
|
|
{ name: AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY, checked: true },
|
|
{ name: AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY, checked: true }
|
|
]
|
|
}
|
|
];
|
|
|
|
showDirectives: boolean = true;
|
|
ovToolbarSelected = false;
|
|
ovToolbarAdditionalButtonsSelected = false;
|
|
ovToolbarAdditionalPanelButtonsSelected = false;
|
|
ovPanelSelected = false;
|
|
ovActivitiesPanelSelected = false;
|
|
ovAdditionalPanelsSelected = false;
|
|
ovChatPanelSelected = false;
|
|
ovParticipantsPanelSelected = false;
|
|
ovParticipantPanelItemSelected = false;
|
|
ovParticipantPanelItemElementsSelected = false;
|
|
ovLayoutSelected = false;
|
|
ovStreamSelected = false;
|
|
|
|
displayLogo = true;
|
|
chatPanelBtn = true;
|
|
displayRoomName = true;
|
|
fullscreenBtn = true;
|
|
leaveBtn = true;
|
|
participantsPanelBtn = true;
|
|
activitiesPanelBtn = true;
|
|
screenshareBtn = true;
|
|
audioDetection = true;
|
|
participantName = true;
|
|
videoControls = true;
|
|
participantItemMuteBtn = true;
|
|
broadcastingActivity = true;
|
|
broadcastingBtn = true;
|
|
|
|
token: string;
|
|
|
|
subscription: Subscription;
|
|
|
|
recordingActivity = true;
|
|
|
|
constructor(
|
|
private restService: RestService,
|
|
private route: ActivatedRoute,
|
|
private panelService: PanelService
|
|
) {}
|
|
|
|
ngAfterViewInit() {}
|
|
|
|
appendElement(id: string) {
|
|
console.log(id);
|
|
const eventsDiv = document.getElementById('events');
|
|
const element = document.createElement('div');
|
|
element.setAttribute('id', id);
|
|
element.setAttribute('style', 'height: 1px;');
|
|
eventsDiv?.appendChild(element);
|
|
}
|
|
|
|
updateSelection(id: string, value: boolean) {
|
|
switch (id) {
|
|
case StructuralDirectives.TOOLBAR:
|
|
this.ovToolbarSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.TOOLBAR_BUTTONS:
|
|
this.ovToolbarAdditionalButtonsSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.TOOLBAR_PANEL_BUTTONS:
|
|
this.ovToolbarAdditionalPanelButtonsSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.PANEL:
|
|
this.ovPanelSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.ADDITIONAL_PANELS:
|
|
this.ovAdditionalPanelsSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.ACTIVITIES_PANEL:
|
|
this.ovActivitiesPanelSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.CHAT_PANEL:
|
|
this.ovChatPanelSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.PARTICIPANTS_PANEL:
|
|
this.ovParticipantsPanelSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.PARTICIPANTS_PANEL_ITEM:
|
|
this.ovParticipantPanelItemSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.PARTICIPANTS_PANEL_ITEM_ELEMENTS:
|
|
this.ovParticipantPanelItemElementsSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.LAYOUT:
|
|
this.ovLayoutSelected = value;
|
|
break;
|
|
|
|
case StructuralDirectives.STREAM:
|
|
this.ovStreamSelected = value;
|
|
break;
|
|
}
|
|
}
|
|
|
|
updateApiDirective(id: string, value: boolean) {
|
|
switch (id) {
|
|
case AttributeDirective.TOOLBAR_CHAT_PANEL:
|
|
this.chatPanelBtn = value;
|
|
break;
|
|
|
|
case AttributeDirective.TOOLBAR_DISPLAY_LOGO:
|
|
this.displayLogo = value;
|
|
break;
|
|
|
|
case AttributeDirective.TOOLBAR_DISPLAY_ROOM:
|
|
this.displayRoomName = value;
|
|
break;
|
|
|
|
case AttributeDirective.TOOLBAR_FULLSCREEN:
|
|
this.fullscreenBtn = value;
|
|
break;
|
|
|
|
case AttributeDirective.TOOLBAR_BROADCASTING:
|
|
this.broadcastingBtn = value;
|
|
break;
|
|
|
|
case AttributeDirective.TOOLBAR_LEAVE:
|
|
this.leaveBtn = value;
|
|
break;
|
|
case AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL:
|
|
this.participantsPanelBtn = value;
|
|
break;
|
|
case AttributeDirective.TOOLBAR_ACTIVITIES_PANEL:
|
|
this.activitiesPanelBtn = value;
|
|
break;
|
|
case AttributeDirective.TOOLBAR_SCREENSHARE:
|
|
this.screenshareBtn = value;
|
|
break;
|
|
case AttributeDirective.STREAM_AUDIO_DETECTION:
|
|
this.audioDetection = value;
|
|
break;
|
|
case AttributeDirective.STREAM_PARTICIPANT_NAME:
|
|
this.participantName = value;
|
|
break;
|
|
|
|
case AttributeDirective.STREAM_SETTINGS:
|
|
this.videoControls = value;
|
|
break;
|
|
case AttributeDirective.PARTICIPANT_ITEM_MUTE:
|
|
this.participantItemMuteBtn = value;
|
|
break;
|
|
case AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY:
|
|
this.recordingActivity = value;
|
|
break;
|
|
case AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY:
|
|
this.broadcastingActivity = value;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
apply() {
|
|
this.showDirectives = false;
|
|
this.subscription = this.route.queryParams.subscribe(async (params) => {
|
|
console.warn(params);
|
|
if (params?.sessionId) {
|
|
this.roomName = params.sessionId;
|
|
} else {
|
|
this.roomName = `testingSession-${(Math.random() + 1).toString(36).substring(7)}`;
|
|
}
|
|
|
|
this.token = await this.getToken(this.roomName);
|
|
});
|
|
this.subscription.unsubscribe();
|
|
}
|
|
|
|
toggleMyPanel(type: string) {
|
|
this.panelService.togglePanel(type);
|
|
}
|
|
|
|
/**
|
|
* --------------------------
|
|
* SERVER-SIDE RESPONSIBILITY
|
|
* --------------------------
|
|
* This method retrieve the mandatory user token from OpenVidu Server,
|
|
* in this case making use Angular http API.
|
|
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
|
|
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
|
|
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
|
|
* 3) The Connection.token must be consumed in Session.connect() method
|
|
*/
|
|
|
|
async getToken(roomName: string): Promise<string> {
|
|
const response = await this.restService.getTokenFromBackend(roomName, Math.random().toString(36).substring(7));
|
|
return response.token;
|
|
}
|
|
}
|