From 71e11334c8ec9c4ff07de13346f45394b7ff894d Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Wed, 29 May 2024 13:28:32 +0200 Subject: [PATCH] openvidu-components: Migrated to standalone and control flow syntax --- openvidu-components/install.sh | 2 + .../src/app/app.component.ts | 106 +++++++++++------- .../src/app/app.module.ts | 31 ----- .../openvidu-additional-panels/src/main.ts | 26 ++++- .../src/app/app.component.ts | 37 +++--- .../src/app/app.module.ts | 26 ----- .../openvidu-admin-dashboard/src/main.ts | 22 +++- .../src/app/app.component.ts | 9 +- .../src/app/app.module.ts | 25 ----- .../src/main.ts | 22 +++- .../src/app/app.component.ts | 51 +++++---- .../src/app/app.module.ts | 25 ----- .../openvidu-custom-chat-panel/src/main.ts | 22 +++- .../src/app/app.component.ts | 64 ++++++----- .../src/app/app.module.ts | 27 ----- .../openvidu-custom-layout/src/main.ts | 22 +++- .../src/app/app.component.ts | 10 +- .../src/app/app.module.ts | 27 ----- .../openvidu-custom-panels/src/main.ts | 22 +++- .../src/app/app.component.ts | 52 +++++---- .../src/app/app.module.ts | 25 ----- .../src/main.ts | 22 +++- .../src/app/app.component.ts | 12 +- .../src/app/app.module.ts | 32 ------ .../src/main.ts | 25 ++++- .../src/app/app.component.ts | 37 +++--- .../src/app/app.module.ts | 25 ----- .../src/main.ts | 22 +++- .../src/app/app.component.ts | 9 +- .../src/app/app.module.ts | 26 ----- .../openvidu-custom-stream/src/main.ts | 22 +++- .../src/app/app.component.ts | 10 +- .../src/app/app.module.ts | 25 ----- .../openvidu-custom-toolbar/src/main.ts | 22 +++- .../src/app/app.component.ts | 9 +- .../openvidu-custom-ui/src/app/app.module.ts | 27 ----- .../openvidu-custom-ui/src/main.ts | 22 +++- .../src/app/app.component.html | 28 +++-- .../src/app/app.component.spec.ts | 6 +- .../src/app/app.component.ts | 37 +++--- .../src/app/app.module.ts | 24 ---- .../openvidu-toggle-hand/src/main.ts | 26 ++++- .../openvidu-toggle-hand/src/styles.scss | 2 +- .../src/app/app.component.ts | 12 +- .../src/app/app.module.ts | 29 ----- .../openvidu-toolbar-buttons/src/main.ts | 24 +++- .../src/app/app.component.ts | 9 +- .../src/app/app.module.ts | 24 ---- .../src/main.ts | 22 +++- 49 files changed, 601 insertions(+), 642 deletions(-) delete mode 100644 openvidu-components/openvidu-additional-panels/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-admin-dashboard/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-activities-panel/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-chat-panel/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-layout/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-panels/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-participant-panel-item/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-participants-panel/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-stream/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-toolbar/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-custom-ui/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-toggle-hand/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts delete mode 100644 openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.module.ts diff --git a/openvidu-components/install.sh b/openvidu-components/install.sh index 10ab6801..b32289b4 100755 --- a/openvidu-components/install.sh +++ b/openvidu-components/install.sh @@ -1,3 +1,5 @@ +#!/bin/bash + TUTORIALS=( 'openvidu-additional-panels' 'openvidu-admin-dashboard' diff --git a/openvidu-components/openvidu-additional-panels/src/app/app.component.ts b/openvidu-components/openvidu-additional-panels/src/app/app.component.ts index d30ded2b..f8d1c06c 100644 --- a/openvidu-components/openvidu-additional-panels/src/app/app.component.ts +++ b/openvidu-components/openvidu-additional-panels/src/app/app.component.ts @@ -1,42 +1,60 @@ -import { HttpClient } from "@angular/common/http"; -import { Component } from "@angular/core"; -import { lastValueFrom } from "rxjs"; +import { HttpClient } from '@angular/common/http'; +import { Component } from '@angular/core'; +import { lastValueFrom } from 'rxjs'; -import { PanelEvent, PanelService } from "openvidu-angular"; +import { PanelStatusInfo, PanelService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from 'openvidu-angular'; import { environment } from 'src/environments/environment'; -@Component({ - selector: "app-root", - template: ` - - - -
- - -
+import { MatIcon } from '@angular/material/icon'; +import { MatIconButton } from '@angular/material/button'; - -
-
-

NEW PANEL 1

-

This is my new additional panel

-
-
-

NEW PANEL 2

-

This is another new panel

-
-
- - `, - styleUrls: ["./app.component.scss"] +@Component({ + selector: 'app-root', + template: ` + + + +
+ + +
+ + +
+ @if (showExternalPanel) { +
+

NEW PANEL 1

+

This is my new additional panel

+
+ } + @if (showExternalPanel2) { +
+

NEW PANEL 2

+

This is another new panel

+
+ } +
+ + `, + styleUrls: ['./app.component.scss'], + standalone: true, + imports: [ + OpenViduAngularModule, + ApiDirectiveModule, + OpenViduAngularDirectiveModule, + MatIconButton, + MatIcon +], }) export class AppComponent { - // Define the URL of the application server APPLICATION_SERVER_URL = environment.applicationServerUrl; @@ -48,7 +66,10 @@ export class AppComponent { showExternalPanel: boolean = false; showExternalPanel2: boolean = false; - constructor(private httpClient: HttpClient, private panelService: PanelService) { } + constructor( + private httpClient: HttpClient, + private panelService: PanelService + ) {} ngOnInit() { this.subscribeToPanelToggling(); @@ -62,7 +83,7 @@ export class AppComponent { // Subscribe to panel toggling events subscribeToPanelToggling() { - this.panelService.panelOpenedObs.subscribe((ev: PanelEvent) => { + this.panelService.panelStatusObs.subscribe((ev: PanelStatusInfo) => { this.showExternalPanel = ev.isOpened && ev.panelType === 'my-panel1'; this.showExternalPanel2 = ev.isOpened && ev.panelType === 'my-panel2'; }); @@ -77,13 +98,22 @@ export class AppComponent { async getToken(roomName: string, participantName: string): Promise { try { // Send a POST request to the server to obtain a token - return lastValueFrom(this.httpClient.post(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName })); + return lastValueFrom( + this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { roomName, participantName } + ) + ); } catch (error: any) { // Handle errors, e.g., if the server is not reachable if (error.status === 404) { - throw { status: error.status, message: 'Cannot connect with the backend. ' + error.url + ' not found' }; + throw { + status: error.status, + message: + 'Cannot connect with the backend. ' + error.url + ' not found', + }; } throw error; } } -} \ No newline at end of file +} diff --git a/openvidu-components/openvidu-additional-panels/src/app/app.module.ts b/openvidu-components/openvidu-additional-panels/src/app/app.module.ts deleted file mode 100644 index fab2edb1..00000000 --- a/openvidu-components/openvidu-additional-panels/src/app/app.module.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; -import { MatButtonModule } from '@angular/material/button'; -import { MatIconModule } from '@angular/material/icon'; -import { HttpClientModule } from '@angular/common/http'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - MatButtonModule, - MatIconModule, - HttpClientModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-additional-panels/src/main.ts b/openvidu-components/openvidu-additional-panels/src/main.ts index c7b673cf..11f76c45 100644 --- a/openvidu-components/openvidu-additional-panels/src/main.ts +++ b/openvidu-components/openvidu-additional-panels/src/main.ts @@ -1,12 +1,32 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)), + provideAnimations(), + provideHttpClient(withInterceptorsFromDi()) + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-admin-dashboard/src/app/app.component.ts b/openvidu-components/openvidu-admin-dashboard/src/app/app.component.ts index a6b8e91c..9452f830 100644 --- a/openvidu-components/openvidu-admin-dashboard/src/app/app.component.ts +++ b/openvidu-components/openvidu-admin-dashboard/src/app/app.component.ts @@ -1,24 +1,29 @@ import { Component } from "@angular/core"; -import { RecordingInfo } from "openvidu-angular"; +import { RecordingInfo, OpenViduAngularModule, ApiDirectiveModule } from "openvidu-angular"; + @Component({ - selector: "app-root", - template: ` + selector: "app-root", + template: ` - - + @if (!logged) { + + } + - - ` + @if (logged) { + + } + `, + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule] }) export class AppComponent { title = "openvidu-admin-dashboard"; diff --git a/openvidu-components/openvidu-admin-dashboard/src/app/app.module.ts b/openvidu-components/openvidu-admin-dashboard/src/app/app.module.ts deleted file mode 100644 index 0c63d026..00000000 --- a/openvidu-components/openvidu-admin-dashboard/src/app/app.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { environment } from 'src/environments/environment'; - -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { AppComponent } from './app.component'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config), - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-admin-dashboard/src/main.ts b/openvidu-components/openvidu-admin-dashboard/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-admin-dashboard/src/main.ts +++ b/openvidu-components/openvidu-admin-dashboard/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts b/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts index df564c2d..c0118d9d 100644 --- a/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts @@ -2,10 +2,11 @@ import { HttpClient } from "@angular/common/http"; import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; import { environment } from 'src/environments/environment'; +import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; @Component({ - selector: "app-root", - template: ` + selector: "app-root", + template: ` `, - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule] }) export class AppComponent { diff --git a/openvidu-components/openvidu-custom-activities-panel/src/app/app.module.ts b/openvidu-components/openvidu-custom-activities-panel/src/app/app.module.ts deleted file mode 100644 index e256b354..00000000 --- a/openvidu-components/openvidu-custom-activities-panel/src/app/app.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-activities-panel/src/main.ts b/openvidu-components/openvidu-custom-activities-panel/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-activities-panel/src/main.ts +++ b/openvidu-components/openvidu-custom-activities-panel/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts b/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts index 61c0b1fd..295d1656 100644 --- a/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts @@ -2,33 +2,42 @@ import { HttpClient } from "@angular/common/http"; import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; -import { DataPacket_Kind, DataPublishOptions, DataTopic, ParticipantService, RemoteParticipant, Room, RoomEvent } from "openvidu-angular"; +import { DataPacket_Kind, DataPublishOptions, DataTopic, ParticipantService, RemoteParticipant, Room, RoomEvent, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; import { environment } from 'src/environments/environment'; + @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: ` - -
-

Chat

-
-
    -
  • {{ msg }}
    • -
-
- - -
+ (onRoomCreated)="onRoomCreated($event)" + [token]="token" + [toolbarDisplaySessionName]="false" + (onTokenRequested)="onTokenRequested($event)" + > + +
+

Chat

+
+
    + @for (msg of messages; track msg) { +
  • {{ msg }}
    • + } +
+
+ + +
- `, - styleUrls: ['./app.component.scss'], + `, + styleUrls: ['./app.component.scss'], + standalone: true, + imports: [ + OpenViduAngularModule, + ApiDirectiveModule, + OpenViduAngularDirectiveModule +], }) export class AppComponent { // Define the URL of the application server diff --git a/openvidu-components/openvidu-custom-chat-panel/src/app/app.module.ts b/openvidu-components/openvidu-custom-chat-panel/src/app/app.module.ts deleted file mode 100644 index e256b354..00000000 --- a/openvidu-components/openvidu-custom-chat-panel/src/app/app.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-chat-panel/src/main.ts b/openvidu-components/openvidu-custom-chat-panel/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-chat-panel/src/main.ts +++ b/openvidu-components/openvidu-custom-chat-panel/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-layout/src/app/app.component.ts b/openvidu-components/openvidu-custom-layout/src/app/app.component.ts index 579ce012..e8cb5770 100644 --- a/openvidu-components/openvidu-custom-layout/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-layout/src/app/app.component.ts @@ -1,38 +1,50 @@ import { HttpClient } from "@angular/common/http"; import { Component, OnDestroy, OnInit } from "@angular/core"; import { lastValueFrom, Subscription } from "rxjs"; -import { ParticipantModel, ParticipantService } from "openvidu-angular"; +import { ParticipantModel, ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; import { environment } from 'src/environments/environment'; +import { NgClass } from "@angular/common"; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: ` - -
-
- -
- -
- - -
- -
-
-
+ [token]="token" + (onTokenRequested)="onTokenRequested($event)" + > + +
+
+ + @for (track of localParticipant.tracks; track track) { +
+ +
+ } + + + @for (track of remoteParticipants | tracks; track track) { +
+ +
+ } +
+
- `, - styleUrls: ['./app.component.scss'], + `, + styleUrls: ['./app.component.scss'], + standalone: true, + imports: [ + OpenViduAngularModule, + ApiDirectiveModule, + OpenViduAngularDirectiveModule, + NgClass +], }) export class AppComponent implements OnInit, OnDestroy { // Define the URL of the application server diff --git a/openvidu-components/openvidu-custom-layout/src/app/app.module.ts b/openvidu-components/openvidu-custom-layout/src/app/app.module.ts deleted file mode 100644 index 747cfa25..00000000 --- a/openvidu-components/openvidu-custom-layout/src/app/app.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-layout/src/main.ts b/openvidu-components/openvidu-custom-layout/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-layout/src/main.ts +++ b/openvidu-components/openvidu-custom-layout/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-panels/src/app/app.component.ts b/openvidu-components/openvidu-custom-panels/src/app/app.component.ts index cd87cf5c..70d22990 100644 --- a/openvidu-components/openvidu-custom-panels/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-panels/src/app/app.component.ts @@ -3,10 +3,11 @@ import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; import { environment } from 'src/environments/environment'; +import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; @Component({ - selector: "app-root", - template: ` + selector: "app-root", + template: ` @@ -26,8 +27,9 @@ import { environment } from 'src/environments/environment'; `, - styleUrls: ["./app.component.scss"] - + styleUrls: ["./app.component.scss"], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule] }) export class AppComponent { // Define the URL of the application server diff --git a/openvidu-components/openvidu-custom-panels/src/app/app.module.ts b/openvidu-components/openvidu-custom-panels/src/app/app.module.ts deleted file mode 100644 index 747cfa25..00000000 --- a/openvidu-components/openvidu-custom-panels/src/app/app.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-panels/src/main.ts b/openvidu-components/openvidu-custom-panels/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-panels/src/main.ts +++ b/openvidu-components/openvidu-custom-panels/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts index 339cf055..d08cedf3 100644 --- a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts @@ -2,32 +2,40 @@ import { HttpClient } from "@angular/common/http"; import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; -import { OpenViduService } from "openvidu-angular"; +import { OpenViduService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; import { environment } from 'src/environments/environment'; -@Component({ - selector: "app-root", - template: ` - - - -
- - -
- +@Component({ + selector: "app-root", + template: ` + + @if (connected) { + + +
+ + @if (participant.isLocal) { + + } +
+ + } + -
Session disconnected
- `, - styles: [] + @if (!connected) { +
Session disconnected
+ } + `, + styles: [], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule] }) export class AppComponent { // Define the URL of the application server diff --git a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.module.ts b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.module.ts deleted file mode 100644 index e256b354..00000000 --- a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/main.ts b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/main.ts +++ b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts b/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts index a9fa4c78..0ebf1a51 100644 --- a/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts @@ -3,10 +3,14 @@ import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; import { environment } from 'src/environments/environment'; +import { MatIcon } from "@angular/material/icon"; +import { MatMenuTrigger, MatMenu, MatMenuItem } from "@angular/material/menu"; +import { MatIconButton } from "@angular/material/button"; +import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: ` @@ -24,7 +28,9 @@ import { environment } from 'src/environments/environment'; `, - styles: [] + styles: [], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem] }) export class AppComponent { // Define the URL of the application server diff --git a/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.module.ts b/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.module.ts deleted file mode 100644 index 988bc482..00000000 --- a/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatMenuModule } from '@angular/material/menu'; -import { MatIconModule } from '@angular/material/icon'; -import { MatButtonModule } from '@angular/material/button'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - MatButtonModule, - MatMenuModule, - MatIconModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-participant-panel-item/src/main.ts b/openvidu-components/openvidu-custom-participant-panel-item/src/main.ts index c7b673cf..d781d732 100644 --- a/openvidu-components/openvidu-custom-participant-panel-item/src/main.ts +++ b/openvidu-components/openvidu-custom-participant-panel-item/src/main.ts @@ -1,12 +1,31 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatButtonModule } from '@angular/material/button'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, MatButtonModule, MatMenuModule, MatIconModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts b/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts index 2d83b09c..196968b7 100644 --- a/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts @@ -2,28 +2,33 @@ import { HttpClient } from "@angular/common/http"; import { Component, OnDestroy, OnInit } from "@angular/core"; import { lastValueFrom, Subscription } from "rxjs"; -import { ParticipantModel, ParticipantService } from "openvidu-angular"; +import { ParticipantModel, ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; import { environment } from 'src/environments/environment'; + @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: ` - - -
-
    -
  • {{localParticipant.name}}
    • -
-
    -
  • {{p.name}}
    • -
-
- + + +
+
    +
  • {{localParticipant.name}}
    • +
+
    + @for (p of remoteParticipants; track p) { +
  • {{p.name}}
    • + } +
+
+ - `, - styleUrls: ['./app.component.scss'] + `, + styleUrls: ['./app.component.scss'], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule] }) export class AppComponent implements OnInit, OnDestroy { // Define the URL of the application server diff --git a/openvidu-components/openvidu-custom-participants-panel/src/app/app.module.ts b/openvidu-components/openvidu-custom-participants-panel/src/app/app.module.ts deleted file mode 100644 index e256b354..00000000 --- a/openvidu-components/openvidu-custom-participants-panel/src/app/app.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-participants-panel/src/main.ts b/openvidu-components/openvidu-custom-participants-panel/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-participants-panel/src/main.ts +++ b/openvidu-components/openvidu-custom-participants-panel/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-stream/src/app/app.component.ts b/openvidu-components/openvidu-custom-stream/src/app/app.component.ts index 52335c20..952603d6 100644 --- a/openvidu-components/openvidu-custom-stream/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-stream/src/app/app.component.ts @@ -3,10 +3,11 @@ import { Component } from '@angular/core'; import { lastValueFrom } from "rxjs"; import { environment } from 'src/environments/environment'; +import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: ` @@ -23,7 +24,9 @@ import { environment } from 'src/environments/environment'; `, - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule] }) export class AppComponent { // Define the URL of the application server diff --git a/openvidu-components/openvidu-custom-stream/src/app/app.module.ts b/openvidu-components/openvidu-custom-stream/src/app/app.module.ts deleted file mode 100644 index eb26ace4..00000000 --- a/openvidu-components/openvidu-custom-stream/src/app/app.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-stream/src/main.ts b/openvidu-components/openvidu-custom-stream/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-stream/src/main.ts +++ b/openvidu-components/openvidu-custom-stream/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts b/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts index ea7712db..452b416b 100644 --- a/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts @@ -2,19 +2,21 @@ import { HttpClient } from "@angular/common/http"; import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; -import { ParticipantService } from "openvidu-angular"; +import { ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; import { environment } from 'src/environments/environment'; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: `
- ` + `, + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule] }) export class AppComponent { diff --git a/openvidu-components/openvidu-custom-toolbar/src/app/app.module.ts b/openvidu-components/openvidu-custom-toolbar/src/app/app.module.ts deleted file mode 100644 index e256b354..00000000 --- a/openvidu-components/openvidu-custom-toolbar/src/app/app.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-toolbar/src/main.ts b/openvidu-components/openvidu-custom-toolbar/src/main.ts index c7b673cf..39bc9e52 100644 --- a/openvidu-components/openvidu-custom-toolbar/src/main.ts +++ b/openvidu-components/openvidu-custom-toolbar/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-custom-ui/src/app/app.component.ts b/openvidu-components/openvidu-custom-ui/src/app/app.component.ts index 30cc1693..1e4b413c 100644 --- a/openvidu-components/openvidu-custom-ui/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-ui/src/app/app.component.ts @@ -3,11 +3,14 @@ import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; import { environment } from 'src/environments/environment'; +import { OpenViduAngularModule, ApiDirectiveModule } from "openvidu-angular"; @Component({ - selector: 'app-root', - template: '', - styles: [''] + selector: 'app-root', + template: '', + styles: [''], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule] }) export class AppComponent { diff --git a/openvidu-components/openvidu-custom-ui/src/app/app.module.ts b/openvidu-components/openvidu-custom-ui/src/app/app.module.ts deleted file mode 100644 index 6ead5de3..00000000 --- a/openvidu-components/openvidu-custom-ui/src/app/app.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { AppComponent } from './app.component'; - -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config) - - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-custom-ui/src/main.ts b/openvidu-components/openvidu-custom-ui/src/main.ts index c7b673cf..6e14b8de 100644 --- a/openvidu-components/openvidu-custom-ui/src/main.ts +++ b/openvidu-components/openvidu-custom-ui/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-toggle-hand/src/app/app.component.html b/openvidu-components/openvidu-toggle-hand/src/app/app.component.html index 6f327879..bb4ec04e 100644 --- a/openvidu-components/openvidu-toggle-hand/src/app/app.component.html +++ b/openvidu-components/openvidu-toggle-hand/src/app/app.component.html @@ -1,18 +1,22 @@ -
- -
+
+ +
-
- - front_hand -
+
+ + @if (track.participant.hasHandRaised) { + front_hand + } +
-
- front_hand -
+
+ @if (participant.hasHandRaised) { + front_hand + } +
\ No newline at end of file diff --git a/openvidu-components/openvidu-toggle-hand/src/app/app.component.spec.ts b/openvidu-components/openvidu-toggle-hand/src/app/app.component.spec.ts index 7fca496f..0d75ae79 100644 --- a/openvidu-components/openvidu-toggle-hand/src/app/app.component.spec.ts +++ b/openvidu-components/openvidu-toggle-hand/src/app/app.component.spec.ts @@ -4,10 +4,8 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); + imports: [AppComponent], +}).compileComponents(); })); it('should create the app', () => { diff --git a/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts b/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts index 242e6994..1aae3bce 100644 --- a/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts +++ b/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts @@ -3,31 +3,36 @@ import { HttpClient } from "@angular/common/http"; import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; -import { DataPacket_Kind, DataPublishOptions, ParticipantService, RemoteParticipant, Room, RoomEvent } from "openvidu-angular"; +import { DataPacket_Kind, DataPublishOptions, ParticipantService, RemoteParticipant, Room, RoomEvent, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; import { ParticipantAppModel } from "./models/participant-app.model"; import { environment } from 'src/environments/environment'; +import { MatIcon } from "@angular/material/icon"; +import { MatIconButton } from "@angular/material/button"; + enum DataTopicApp { HAND_TOGGLE = 'handToggle' } @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], - animations: [ - trigger('inOutHandAnimation', [ - transition(':enter', [ - style({ opacity: 0, transform: 'translateY(-100%)' }), - animate('300ms ease-in-out', style({ opacity: 1, transform: 'translateY(0)' })) - ]), - transition(':leave', [ - style({ opacity: 1, transform: 'translateY(0)' }), - animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-100%)' })) - ]) - ]) - ] + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + animations: [ + trigger('inOutHandAnimation', [ + transition(':enter', [ + style({ opacity: 0, transform: 'translateY(-100%)' }), + animate('300ms ease-in-out', style({ opacity: 1, transform: 'translateY(0)' })) + ]), + transition(':leave', [ + style({ opacity: 1, transform: 'translateY(0)' }), + animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-100%)' })) + ]) + ]) + ], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatIcon] }) export class AppComponent { diff --git a/openvidu-components/openvidu-toggle-hand/src/app/app.module.ts b/openvidu-components/openvidu-toggle-hand/src/app/app.module.ts deleted file mode 100644 index b4556db3..00000000 --- a/openvidu-components/openvidu-toggle-hand/src/app/app.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatIconModule } from '@angular/material/icon'; - -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { AppComponent } from './app.component'; -import { OpenViduAngularConfig, OpenViduAngularModule, ParticipantProperties } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; -import { ParticipantAppModel } from './models/participant-app.model'; - -const config: OpenViduAngularConfig = { - production: environment.production, - participantFactory: (props: ParticipantProperties) => new ParticipantAppModel(props) -}; - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, MatButtonModule, MatIconModule, BrowserAnimationsModule, OpenViduAngularModule.forRoot(config)], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-toggle-hand/src/main.ts b/openvidu-components/openvidu-toggle-hand/src/main.ts index c7b673cf..00c73bed 100644 --- a/openvidu-components/openvidu-toggle-hand/src/main.ts +++ b/openvidu-components/openvidu-toggle-hand/src/main.ts @@ -1,12 +1,32 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { ParticipantAppModel } from './app/models/participant-app.model'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig, ParticipantProperties } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production, + participantFactory: (props: ParticipantProperties) => new ParticipantAppModel(props) +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-toggle-hand/src/styles.scss b/openvidu-components/openvidu-toggle-hand/src/styles.scss index 50766782..514d1918 100644 --- a/openvidu-components/openvidu-toggle-hand/src/styles.scss +++ b/openvidu-components/openvidu-toggle-hand/src/styles.scss @@ -10,7 +10,7 @@ // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$openvidu-components-primary: mat-palette($mat-blue-grey, 50, 300); +$openvidu-components-primary: mat-palette($mat-blue-grey, 500, 300); $openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100); // The warn palette is optional (defaults to red). diff --git a/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts b/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts index daf274c9..67148887 100644 --- a/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts +++ b/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts @@ -2,12 +2,14 @@ import { HttpClient } from "@angular/common/http"; import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; -import { ParticipantService } from "openvidu-angular"; +import { ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; import { environment } from 'src/environments/environment'; +import { MatIcon } from "@angular/material/icon"; +import { MatIconButton } from "@angular/material/button"; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: `
`, - styles: [] + styles: [], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatIcon] }) export class AppComponent { diff --git a/openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts b/openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts deleted file mode 100644 index 79db99fc..00000000 --- a/openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; -import { environment } from 'src/environments/environment'; -import { MatButtonModule } from '@angular/material/button'; -import { MatIconModule } from '@angular/material/icon'; - -const config: OpenViduAngularConfig = { - production: environment.production -}; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - MatButtonModule, - MatIconModule, - OpenViduAngularModule.forRoot(config) - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-components/openvidu-toolbar-buttons/src/main.ts b/openvidu-components/openvidu-toolbar-buttons/src/main.ts index c7b673cf..0add5d87 100644 --- a/openvidu-components/openvidu-toolbar-buttons/src/main.ts +++ b/openvidu-components/openvidu-toolbar-buttons/src/main.ts @@ -1,12 +1,30 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err)); diff --git a/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts b/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts index c7bf5857..b695c78e 100644 --- a/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts +++ b/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts @@ -3,17 +3,20 @@ import { Component } from "@angular/core"; import { lastValueFrom } from "rxjs"; import { environment } from 'src/environments/environment'; +import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular"; @Component({ - selector: "app-root", - template: ` + selector: "app-root", + template: `
`, - styles: [] + styles: [], + standalone: true, + imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule] }) export class AppComponent { diff --git a/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.module.ts b/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.module.ts deleted file mode 100644 index e05d1106..00000000 --- a/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { NgModule } from "@angular/core"; -import { BrowserModule } from "@angular/platform-browser"; - -import { AppComponent } from "./app.component"; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { OpenViduAngularConfig, OpenViduAngularModule } from "openvidu-angular"; -import { environment } from "src/environments/environment"; - -const config: OpenViduAngularConfig = { - production: environment.production, -}; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - BrowserAnimationsModule, - OpenViduAngularModule.forRoot(config), - ], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/openvidu-components/openvidu-toolbar-panel-buttons/src/main.ts b/openvidu-components/openvidu-toolbar-panel-buttons/src/main.ts index c7b673cf..4f523f96 100644 --- a/openvidu-components/openvidu-toolbar-panel-buttons/src/main.ts +++ b/openvidu-components/openvidu-toolbar-panel-buttons/src/main.ts @@ -1,12 +1,28 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { environment as environment_1 } from 'src/environments/environment'; +import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; + +const config: OpenViduAngularConfig = { + production: environment.production, +}; + + if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)), + provideAnimations() + ] +}) .catch(err => console.error(err));