frontend: Updated to Angular 19

This commit is contained in:
Carlos Santos 2025-10-03 13:41:46 +02:00
parent 893952c6c4
commit 4bd66fc53a
39 changed files with 21441 additions and 18715 deletions

39224
frontend/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,85 +1,85 @@
{
"name": "openvidu-meet-frontend",
"version": "3.4.0",
"scripts": {
"start:dev": "npx ng serve --configuration development --port=5080 --host=0.0.0.0",
"build:dev": "npx ng build --configuration development --watch",
"build": "func() { ./node_modules/@angular/cli/bin/ng.js build --configuration production --base-href=\"${1:-/}\"; }; func",
"typings:sync": "npm run sync-ce --prefix ../typings",
"sync:backend": "npx ng build --configuration production --output-path ../backend/dist/public/",
"e2e:run-all": "npx mocha --recursive --timeout 30000 ./tests/e2e/**/*.test.ts",
"e2e:run-routes": "npx mocha --recursive --timeout 30000 ./tests/e2e/routes.test.ts",
"e2e:run-home": "npx mocha ./tests/e2e/home.test.ts",
"e2e:run-recordings": "npx mocha --recursive --timeout 30000 ./tests/e2e/recording.test.ts",
"e2e:run-auth": "npx mocha --recursive --timeout 30000 ./tests/e2e/auth.test.ts",
"lib:serve": "npx ng build shared-meet-components --watch",
"lib:build": "ng build shared-meet-components --configuration production",
"lib:pack": "cd dist/shared-meet-components && npm pack",
"lib:sync-pro": "npm run lib:build && npm run lib:pack && cp dist/shared-meet-components/shared-meet-components-**.tgz ../../openvidu-meet-pro/frontend",
"test:unit": "ng test openvidu-meet --watch=false --code-coverage",
"webcomponent:build": "npm run build --prefix webcomponent",
"webcomponent:unit-test": "node --experimental-vm-modules node_modules/.bin/jest --config jest.config.mjs",
"lint:fix": "eslint src --fix",
"format:code": "prettier --ignore-path ../gitignore . --write"
},
"dependencies": {
"@angular/animations": "18.2.5",
"@angular/cdk": "18.2.5",
"@angular/common": "18.2.5",
"@angular/compiler": "18.2.5",
"@angular/core": "18.2.5",
"@angular/forms": "18.2.5",
"@angular/material": "18.2.5",
"@angular/platform-browser": "18.2.5",
"@angular/platform-browser-dynamic": "18.2.5",
"@angular/router": "18.2.5",
"core-js": "3.38.1",
"jwt-decode": "4.0.0",
"openvidu-components-angular": "3.4.0",
"rxjs": "7.8.1",
"tslib": "2.3.0",
"unique-names-generator": "4.7.1",
"zone.js": "0.14.10"
},
"devDependencies": {
"@angular-builders/custom-webpack": "18.0.0",
"@angular-devkit/build-angular": "18.2.6",
"@angular-eslint/builder": "18.3.1",
"@angular-eslint/eslint-plugin": "18.3.1",
"@angular-eslint/eslint-plugin-template": "18.3.1",
"@angular-eslint/schematics": "18.3.1",
"@angular-eslint/template-parser": "18.3.1",
"@angular/cli": "18.2.5",
"@angular/compiler-cli": "18.2.5",
"@types/chai": "4.3.19",
"@types/fluent-ffmpeg": "2.1.27",
"@types/jasmine": "5.1.7",
"@types/mocha": "9.1.1",
"@types/node": "20.12.14",
"@types/pixelmatch": "5.2.6",
"@types/pngjs": "6.0.5",
"@types/selenium-webdriver": "4.1.26",
"@typescript-eslint/eslint-plugin": "7.18.0",
"@typescript-eslint/parser": "7.18.0",
"chai": "4.3.10",
"chromedriver": "132.0.0",
"cross-env": "7.0.3",
"eslint": "8.57.1",
"eslint-config-prettier": "9.1.0",
"fluent-ffmpeg": "2.1.3",
"jasmine-core": "5.6.0",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.4.4",
"karma-chrome-launcher": "3.2.0",
"karma-coverage": "2.2.1",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.1.0",
"mocha": "10.7.3",
"ng-packagr": "18.2.1",
"prettier": "3.3.3",
"selenium-webdriver": "4.25.0",
"ts-node": "10.9.2",
"tslib": "2.6.3",
"typescript": "5.4.5"
}
"name": "openvidu-meet-frontend",
"version": "3.4.0",
"scripts": {
"start:dev": "npx ng serve --configuration development --port=5080 --host=0.0.0.0",
"build:dev": "npx ng build --configuration development --watch",
"build": "func() { ./node_modules/@angular/cli/bin/ng.js build --configuration production --base-href=\"${1:-/}\"; }; func",
"typings:sync": "npm run sync-ce --prefix ../typings",
"sync:backend": "npx ng build --configuration production --output-path ../backend/dist/public/",
"e2e:run-all": "npx mocha --recursive --timeout 30000 ./tests/e2e/**/*.test.ts",
"e2e:run-routes": "npx mocha --recursive --timeout 30000 ./tests/e2e/routes.test.ts",
"e2e:run-home": "npx mocha ./tests/e2e/home.test.ts",
"e2e:run-recordings": "npx mocha --recursive --timeout 30000 ./tests/e2e/recording.test.ts",
"e2e:run-auth": "npx mocha --recursive --timeout 30000 ./tests/e2e/auth.test.ts",
"lib:serve": "npx ng build shared-meet-components --watch",
"lib:build": "ng build shared-meet-components --configuration production",
"lib:pack": "cd dist/shared-meet-components && npm pack",
"lib:sync-pro": "npm run lib:build && npm run lib:pack && cp dist/shared-meet-components/shared-meet-components-**.tgz ../../openvidu-meet-pro/frontend",
"test:unit": "ng test openvidu-meet --watch=false --code-coverage",
"webcomponent:build": "npm run build --prefix webcomponent",
"webcomponent:unit-test": "node --experimental-vm-modules node_modules/.bin/jest --config jest.config.mjs",
"lint:fix": "eslint src --fix",
"format:code": "prettier --ignore-path ../gitignore . --write"
},
"dependencies": {
"@angular/animations": "19.2.15",
"@angular/cdk": "19.2.19",
"@angular/common": "19.2.15",
"@angular/compiler": "19.2.15",
"@angular/core": "19.2.15",
"@angular/forms": "19.2.15",
"@angular/material": "19.2.19",
"@angular/platform-browser": "19.2.15",
"@angular/platform-browser-dynamic": "19.2.15",
"@angular/router": "19.2.15",
"core-js": "3.38.1",
"jwt-decode": "4.0.0",
"openvidu-components-angular": "3.4.0",
"rxjs": "7.8.1",
"tslib": "2.3.0",
"unique-names-generator": "4.7.1",
"zone.js": "0.15.1"
},
"devDependencies": {
"@angular-builders/custom-webpack": "18.0.0",
"@angular-devkit/build-angular": "19.2.17",
"@angular-eslint/builder": "18.3.1",
"@angular-eslint/eslint-plugin": "18.3.1",
"@angular-eslint/eslint-plugin-template": "18.3.1",
"@angular-eslint/schematics": "18.3.1",
"@angular-eslint/template-parser": "18.3.1",
"@angular/cli": "19.2.17",
"@angular/compiler-cli": "19.2.15",
"@types/chai": "4.3.19",
"@types/fluent-ffmpeg": "2.1.27",
"@types/jasmine": "5.1.7",
"@types/mocha": "9.1.1",
"@types/node": "20.12.14",
"@types/pixelmatch": "5.2.6",
"@types/pngjs": "6.0.5",
"@types/selenium-webdriver": "4.1.26",
"@typescript-eslint/eslint-plugin": "7.18.0",
"@typescript-eslint/parser": "7.18.0",
"chai": "4.3.10",
"chromedriver": "132.0.0",
"cross-env": "7.0.3",
"eslint": "8.57.1",
"eslint-config-prettier": "9.1.0",
"fluent-ffmpeg": "2.1.3",
"jasmine-core": "5.6.0",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.4.4",
"karma-chrome-launcher": "3.2.0",
"karma-coverage": "2.2.1",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.1.0",
"mocha": "10.7.3",
"ng-packagr": "19.2.2",
"prettier": "3.3.3",
"selenium-webdriver": "4.25.0",
"ts-node": "10.9.2",
"tslib": "2.6.3",
"typescript": "5.8.3"
}
}

View File

@ -11,20 +11,19 @@ import { ConsoleNavLink } from '@lib/models';
import { AppDataService, ThemeService } from '@lib/services';
@Component({
selector: 'ov-console-nav',
standalone: true,
imports: [
CommonModule,
MatToolbarModule,
MatListModule,
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatTooltipModule,
RouterModule
],
templateUrl: './console-nav.component.html',
styleUrl: './console-nav.component.scss'
selector: 'ov-console-nav',
imports: [
CommonModule,
MatToolbarModule,
MatListModule,
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatTooltipModule,
RouterModule
],
templateUrl: './console-nav.component.html',
styleUrl: './console-nav.component.scss'
})
export class ConsoleNavComponent {
@ViewChild(MatSidenav) sidenav!: MatSidenav;

View File

@ -13,20 +13,19 @@ import { MatIconModule } from '@angular/material/icon';
import type { DialogOptions } from '@lib/models';
@Component({
selector: 'ov-dialog',
standalone: true,
imports: [
FormsModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatDialogActions,
MatDialogContent,
MatDialogTitle
],
templateUrl: './dialog.component.html',
styleUrl: './dialog.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
selector: 'ov-dialog',
imports: [
FormsModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatDialogActions,
MatDialogContent,
MatDialogTitle
],
templateUrl: './dialog.component.html',
styleUrl: './dialog.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DialogComponent {
readonly dialogRef = inject(MatDialogRef<DialogComponent>);

View File

@ -14,20 +14,19 @@ import type { DeleteRoomDialogOptions } from '@lib/models';
import { MeetRoomDeletionPolicyWithMeeting, MeetRoomDeletionPolicyWithRecordings } from '@lib/typings/ce';
@Component({
selector: 'ov-delete-room-dialog',
standalone: true,
imports: [
FormsModule,
MatButtonModule,
MatIconModule,
MatRadioModule,
MatDialogActions,
MatDialogContent,
MatDialogTitle
],
templateUrl: './delete-room-dialog.component.html',
styleUrl: './delete-room-dialog.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
selector: 'ov-delete-room-dialog',
imports: [
FormsModule,
MatButtonModule,
MatIconModule,
MatRadioModule,
MatDialogActions,
MatDialogContent,
MatDialogTitle
],
templateUrl: './delete-room-dialog.component.html',
styleUrl: './delete-room-dialog.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DeleteRoomDialogComponent {
readonly dialogRef = inject(MatDialogRef<DeleteRoomDialogComponent>);

View File

@ -18,24 +18,23 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { RecordingService } from '@lib/services';
@Component({
selector: 'ov-share-recording-dialog',
standalone: true,
imports: [
FormsModule,
MatRadioModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatDialogTitle,
MatDialogContent,
MatDialogActions,
MatDialogClose,
MatTooltipModule,
MatProgressSpinnerModule
],
templateUrl: './share-recording-dialog.component.html',
styleUrl: './share-recording-dialog.component.scss'
selector: 'ov-share-recording-dialog',
imports: [
FormsModule,
MatRadioModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatDialogTitle,
MatDialogContent,
MatDialogActions,
MatDialogClose,
MatTooltipModule,
MatProgressSpinnerModule
],
templateUrl: './share-recording-dialog.component.html',
styleUrl: './share-recording-dialog.component.scss'
})
export class ShareRecordingDialogComponent implements OnInit {
accessType: 'private' | 'public' = 'public';

View File

@ -4,10 +4,9 @@ import { MatIconModule } from '@angular/material/icon';
import { ProFeatureBadgeComponent } from '@lib/components';
@Component({
selector: 'ov-logo-selector',
standalone: true,
imports: [MatButtonModule, MatIconModule, ProFeatureBadgeComponent],
templateUrl: './logo-selector.component.html',
styleUrl: './logo-selector.component.scss'
selector: 'ov-logo-selector',
imports: [MatButtonModule, MatIconModule, ProFeatureBadgeComponent],
templateUrl: './logo-selector.component.html',
styleUrl: './logo-selector.component.scss'
})
export class LogoSelectorComponent {}

View File

@ -2,11 +2,10 @@ import { Component, Input } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'ov-pro-feature-badge',
standalone: true,
imports: [MatIconModule],
templateUrl: './pro-feature-badge.component.html',
styleUrl: './pro-feature-badge.component.scss'
selector: 'ov-pro-feature-badge',
imports: [MatIconModule],
templateUrl: './pro-feature-badge.component.html',
styleUrl: './pro-feature-badge.component.scss'
})
export class ProFeatureBadgeComponent {
@Input() badgeIcon: string = 'crown'; // Default icon

View File

@ -47,28 +47,27 @@ export interface RecordingTableAction {
*/
@Component({
selector: 'ov-recording-lists',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
MatTableModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatMenuModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatToolbarModule,
MatBadgeModule,
MatDividerModule,
DatePipe
],
templateUrl: './recording-lists.component.html',
styleUrl: './recording-lists.component.scss'
selector: 'ov-recording-lists',
imports: [
CommonModule,
ReactiveFormsModule,
MatTableModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatMenuModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatToolbarModule,
MatBadgeModule,
MatDividerModule,
DatePipe
],
templateUrl: './recording-lists.component.html',
styleUrl: './recording-lists.component.scss'
})
export class RecordingListsComponent implements OnInit, OnChanges {
// Input properties

View File

@ -67,28 +67,27 @@ export interface RoomTableAction {
*/
@Component({
selector: 'ov-rooms-lists',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
MatTableModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatMenuModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatToolbarModule,
MatBadgeModule,
MatDividerModule,
DatePipe
],
templateUrl: './rooms-lists.component.html',
styleUrl: './rooms-lists.component.scss'
selector: 'ov-rooms-lists',
imports: [
CommonModule,
ReactiveFormsModule,
MatTableModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatMenuModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatToolbarModule,
MatBadgeModule,
MatDividerModule,
DatePipe
],
templateUrl: './rooms-lists.component.html',
styleUrl: './rooms-lists.component.scss'
})
export class RoomsListsComponent implements OnInit, OnChanges {
// Input properties

View File

@ -28,11 +28,10 @@ export interface SelectionEvent {
}
@Component({
selector: 'ov-selectable-card',
standalone: true,
imports: [CommonModule, MatIconModule, ProFeatureBadgeComponent],
templateUrl: './selectable-card.component.html',
styleUrl: './selectable-card.component.scss'
selector: 'ov-selectable-card',
imports: [CommonModule, MatIconModule, ProFeatureBadgeComponent],
templateUrl: './selectable-card.component.html',
styleUrl: './selectable-card.component.scss'
})
export class SelectableCardComponent {
/**

View File

@ -3,11 +3,10 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'ov-share-meeting-link',
standalone: true,
imports: [MatButtonModule, MatIconModule],
templateUrl: './share-meeting-link.component.html',
styleUrl: './share-meeting-link.component.scss'
selector: 'ov-share-meeting-link',
imports: [MatButtonModule, MatIconModule],
templateUrl: './share-meeting-link.component.html',
styleUrl: './share-meeting-link.component.scss'
})
export class ShareMeetingLinkComponent {
@Input() meetingUrl!: string;

View File

@ -2,10 +2,9 @@ import { Component } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@Component({
selector: 'ov-spinner',
standalone: true,
imports: [MatProgressSpinnerModule],
template: `<mat-spinner></mat-spinner>`,
styleUrl: './spinner.component.scss'
selector: 'ov-spinner',
imports: [MatProgressSpinnerModule],
template: `<mat-spinner></mat-spinner>`,
styleUrl: './spinner.component.scss'
})
export class SpinnerComponent {}

View File

@ -9,11 +9,10 @@ import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'ov-step-indicator',
standalone: true,
imports: [CommonModule, MatStepperModule, ReactiveFormsModule],
templateUrl: './step-indicator.component.html',
styleUrl: './step-indicator.component.scss'
selector: 'ov-step-indicator',
imports: [CommonModule, MatStepperModule, ReactiveFormsModule],
templateUrl: './step-indicator.component.html',
styleUrl: './step-indicator.component.scss'
})
export class StepIndicatorComponent {
steps = input.required<WizardStep[]>();

View File

@ -4,11 +4,10 @@ import { MatIcon } from '@angular/material/icon';
import type { WizardNavigationConfig, WizardNavigationEvent } from '@lib/models';
@Component({
selector: 'ov-wizard-nav',
standalone: true,
imports: [MatButton, MatIcon],
templateUrl: './wizard-nav.component.html',
styleUrl: './wizard-nav.component.scss'
selector: 'ov-wizard-nav',
imports: [MatButton, MatIcon],
templateUrl: './wizard-nav.component.html',
styleUrl: './wizard-nav.component.scss'
})
export class WizardNavComponent {
/**

View File

@ -1,10 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'ov-about',
standalone: true,
imports: [],
templateUrl: './about.component.html',
styleUrl: './about.component.scss'
selector: 'ov-about',
imports: [],
templateUrl: './about.component.html',
styleUrl: './about.component.scss'
})
export class AboutComponent {}

View File

@ -25,23 +25,22 @@ interface ThemeColors {
}
@Component({
selector: 'ov-config',
standalone: true,
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatSlideToggleModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatDividerModule,
ReactiveFormsModule
],
templateUrl: './config.component.html',
styleUrl: './config.component.scss'
selector: 'ov-config',
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatSlideToggleModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatDividerModule,
ReactiveFormsModule
],
templateUrl: './config.component.html',
styleUrl: './config.component.scss'
})
export class ConfigComponent implements OnInit {
isLoading = signal(true);

View File

@ -4,11 +4,10 @@ import { ConsoleNavLink } from '@lib/models';
import { AuthService } from '@lib/services';
@Component({
selector: 'ov-console',
standalone: true,
imports: [ConsoleNavComponent],
templateUrl: './console.component.html',
styleUrl: './console.component.scss'
selector: 'ov-console',
imports: [ConsoleNavComponent],
templateUrl: './console.component.html',
styleUrl: './console.component.scss'
})
export class ConsoleComponent {
navLinks: ConsoleNavLink[] = [

View File

@ -13,21 +13,20 @@ import { AuthService, GlobalConfigService, NotificationService } from '@lib/serv
import { MeetApiKey } from '@lib/typings/ce';
@Component({
selector: 'ov-embedded',
standalone: true,
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSlideToggleModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule
],
templateUrl: './embedded.component.html',
styleUrl: './embedded.component.scss'
selector: 'ov-embedded',
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSlideToggleModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule
],
templateUrl: './embedded.component.html',
styleUrl: './embedded.component.scss'
})
export class EmbeddedComponent implements OnInit {
isLoading = signal(true);

View File

@ -17,11 +17,10 @@ interface OverviewStats {
}
@Component({
selector: 'ov-overview',
standalone: true,
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatGridListModule],
templateUrl: './overview.component.html',
styleUrl: './overview.component.scss'
selector: 'ov-overview',
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatGridListModule],
templateUrl: './overview.component.html',
styleUrl: './overview.component.scss'
})
export class OverviewComponent implements OnInit {
stats: OverviewStats = {

View File

@ -8,11 +8,10 @@ import { MeetRecordingFilters, MeetRecordingInfo } from '@lib/typings/ce';
import { ILogger, LoggerService } from 'openvidu-components-angular';
@Component({
selector: 'ov-recordings',
standalone: true,
imports: [RecordingListsComponent, MatIconModule, MatProgressSpinnerModule],
templateUrl: './recordings.component.html',
styleUrl: './recordings.component.scss'
selector: 'ov-recordings',
imports: [RecordingListsComponent, MatIconModule, MatProgressSpinnerModule],
templateUrl: './recordings.component.html',
styleUrl: './recordings.component.scss'
})
export class RecordingsComponent implements OnInit {
recordings = signal<MeetRecordingInfo[]>([]);

View File

@ -10,18 +10,17 @@ import { MeetRoomOptions } from '@lib/typings/ce';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector: 'ov-room-basic-creation',
standalone: true,
imports: [
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatTooltipModule
],
templateUrl: './room-basic-creation.component.html',
styleUrl: './room-basic-creation.component.scss'
selector: 'ov-room-basic-creation',
imports: [
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatTooltipModule
],
templateUrl: './room-basic-creation.component.html',
styleUrl: './room-basic-creation.component.scss'
})
export class RoomBasicCreationComponent implements OnDestroy {
@Output() createRoom = new EventEmitter<string | undefined>();

View File

@ -17,25 +17,24 @@ import { RoomConfigComponent } from './steps/room-config/room-config.component';
import { RoomWizardRoomDetailsComponent } from './steps/room-details/room-details.component';
@Component({
selector: 'ov-room-wizard',
standalone: true,
imports: [
CommonModule,
StepIndicatorComponent,
WizardNavComponent,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatSlideToggleModule,
RoomBasicCreationComponent,
RoomWizardRoomDetailsComponent,
RecordingConfigComponent,
RecordingTriggerComponent,
RecordingLayoutComponent,
RoomConfigComponent
],
templateUrl: './room-wizard.component.html',
styleUrl: './room-wizard.component.scss'
selector: 'ov-room-wizard',
imports: [
CommonModule,
StepIndicatorComponent,
WizardNavComponent,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatSlideToggleModule,
RoomBasicCreationComponent,
RoomWizardRoomDetailsComponent,
RecordingConfigComponent,
RecordingTriggerComponent,
RecordingLayoutComponent,
RoomConfigComponent
],
templateUrl: './room-wizard.component.html',
styleUrl: './room-wizard.component.scss'
})
export class RoomWizardComponent implements OnInit {
editMode: boolean = false;

View File

@ -18,21 +18,20 @@ interface RecordingAccessOption {
}
@Component({
selector: 'ov-recording-config',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatRadioModule,
MatSelectModule,
MatFormFieldModule,
SelectableCardComponent
],
templateUrl: './recording-config.component.html',
styleUrl: './recording-config.component.scss'
selector: 'ov-recording-config',
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatRadioModule,
MatSelectModule,
MatFormFieldModule,
SelectableCardComponent
],
templateUrl: './recording-config.component.html',
styleUrl: './recording-config.component.scss'
})
export class RecordingConfigComponent implements OnDestroy {
recordingForm: FormGroup;

View File

@ -10,19 +10,18 @@ import { RoomWizardStateService } from '@lib/services';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector: 'ov-recording-layout',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatRadioModule,
SelectableCardComponent
],
templateUrl: './recording-layout.component.html',
styleUrl: './recording-layout.component.scss'
selector: 'ov-recording-layout',
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatRadioModule,
SelectableCardComponent
],
templateUrl: './recording-layout.component.html',
styleUrl: './recording-layout.component.scss'
})
export class RecordingLayoutComponent implements OnDestroy {
layoutForm: FormGroup;

View File

@ -10,19 +10,18 @@ import { RoomWizardStateService } from '@lib/services';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector: 'ov-recording-trigger',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatRadioModule,
SelectableCardComponent
],
templateUrl: './recording-trigger.component.html',
styleUrl: './recording-trigger.component.scss'
selector: 'ov-recording-trigger',
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatRadioModule,
SelectableCardComponent
],
templateUrl: './recording-trigger.component.html',
styleUrl: './recording-trigger.component.scss'
})
export class RecordingTriggerComponent implements OnDestroy {
triggerForm: FormGroup;

View File

@ -7,11 +7,10 @@ import { RoomWizardStateService } from '@lib/services';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector: 'ov-room-config',
standalone: true,
imports: [ReactiveFormsModule, MatCardModule, MatIconModule, MatSlideToggleModule],
templateUrl: './room-config.component.html',
styleUrl: './room-config.component.scss'
selector: 'ov-room-config',
imports: [ReactiveFormsModule, MatCardModule, MatIconModule, MatSlideToggleModule],
templateUrl: './room-config.component.html',
styleUrl: './room-config.component.scss'
})
export class RoomConfigComponent implements OnDestroy {
configForm: FormGroup;

View File

@ -18,21 +18,20 @@ import {
import { Subject, takeUntil } from 'rxjs';
@Component({
selector: 'ov-room-details',
standalone: true,
imports: [
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatDatepickerModule,
MatNativeDateModule,
MatSelectModule,
MatTooltipModule
],
templateUrl: './room-details.component.html',
styleUrl: './room-details.component.scss'
selector: 'ov-room-details',
imports: [
ReactiveFormsModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatDatepickerModule,
MatNativeDateModule,
MatSelectModule,
MatTooltipModule
],
templateUrl: './room-details.component.html',
styleUrl: './room-details.component.scss'
})
export class RoomWizardRoomDetailsComponent implements OnDestroy {
roomDetailsForm: FormGroup;

View File

@ -31,27 +31,26 @@ import {
import { ILogger, LoggerService } from 'openvidu-components-angular';
@Component({
selector: 'ov-rooms',
standalone: true,
imports: [
MatListModule,
MatCardModule,
MatButtonModule,
MatIconModule,
RouterModule,
MatTableModule,
MatMenuModule,
MatTooltipModule,
MatDividerModule,
MatSortModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatFormFieldModule,
MatInputModule,
RoomsListsComponent
],
templateUrl: './rooms.component.html',
styleUrl: './rooms.component.scss'
selector: 'ov-rooms',
imports: [
MatListModule,
MatCardModule,
MatButtonModule,
MatIconModule,
RouterModule,
MatTableModule,
MatMenuModule,
MatTooltipModule,
MatDividerModule,
MatSortModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatFormFieldModule,
MatInputModule,
RoomsListsComponent
],
templateUrl: './rooms.component.html',
styleUrl: './rooms.component.scss'
})
export class RoomsComponent implements OnInit {
// @ViewChild(MatSort) sort!: MatSort;

View File

@ -22,23 +22,22 @@ import { AuthService, GlobalConfigService, NotificationService } from '@lib/serv
import { AuthMode } from '@lib/typings/ce';
@Component({
selector: 'ov-users-permissions',
standalone: true,
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatDividerModule,
ReactiveFormsModule,
ProFeatureBadgeComponent
],
templateUrl: './users-permissions.component.html',
styleUrl: './users-permissions.component.scss'
selector: 'ov-users-permissions',
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatTooltipModule,
MatProgressSpinnerModule,
MatDividerModule,
ReactiveFormsModule,
ProFeatureBadgeComponent
],
templateUrl: './users-permissions.component.html',
styleUrl: './users-permissions.component.scss'
})
export class UsersPermissionsComponent implements OnInit {
isLoading = signal(true);

View File

@ -7,11 +7,10 @@ import { ErrorReason } from '@lib/models';
import { AppDataService, AuthService, NavigationService, WebComponentManagerService } from '@lib/services';
@Component({
selector: 'ov-error',
standalone: true,
imports: [MatCardModule, MatIconModule, MatButtonModule],
templateUrl: './error.component.html',
styleUrl: './error.component.scss'
selector: 'ov-error',
imports: [MatCardModule, MatIconModule, MatButtonModule],
templateUrl: './error.component.html',
styleUrl: './error.component.scss'
})
export class ErrorComponent implements OnInit {
errorName = 'Error';

View File

@ -11,21 +11,20 @@ import { ActivatedRoute, RouterModule } from '@angular/router';
import { AuthService, NavigationService } from '@lib/services';
@Component({
selector: 'ov-login',
standalone: true,
imports: [
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
FormsModule,
MatCardModule,
MatIconModule,
MatTooltipModule,
RouterModule
],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
selector: 'ov-login',
imports: [
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
FormsModule,
MatCardModule,
MatIconModule,
MatTooltipModule,
RouterModule
],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
})
export class LoginComponent implements OnInit {
loginForm = new FormGroup({

View File

@ -8,11 +8,10 @@ import { AppDataService, AuthService, NavigationService, WebComponentManagerServ
import { LeftEventReason } from '@lib/typings/ce';
@Component({
selector: 'ov-end-meeting',
standalone: true,
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule],
templateUrl: './end-meeting.component.html',
styleUrl: './end-meeting.component.scss'
selector: 'ov-end-meeting',
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule],
templateUrl: './end-meeting.component.html',
styleUrl: './end-meeting.component.scss'
})
export class EndMeetingComponent implements OnInit {
disconnectedTitle = 'You Left the Meeting';

View File

@ -64,28 +64,27 @@ import {
import { combineLatest, Subject, takeUntil } from 'rxjs';
@Component({
selector: 'ov-meeting',
templateUrl: './meeting.component.html',
styleUrls: ['./meeting.component.scss'],
standalone: true,
imports: [
OpenViduComponentsUiModule,
// ApiDirectiveModule,
CommonModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
ReactiveFormsModule,
MatCardModule,
MatButtonModule,
MatIconModule,
MatIconButton,
MatMenuModule,
MatDividerModule,
MatTooltipModule,
MatRippleModule,
ShareMeetingLinkComponent
]
selector: 'ov-meeting',
templateUrl: './meeting.component.html',
styleUrls: ['./meeting.component.scss'],
imports: [
OpenViduComponentsUiModule,
// ApiDirectiveModule,
CommonModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
ReactiveFormsModule,
MatCardModule,
MatButtonModule,
MatIconModule,
MatIconButton,
MatMenuModule,
MatDividerModule,
MatTooltipModule,
MatRippleModule,
ShareMeetingLinkComponent
]
})
export class MeetingComponent implements OnInit {
participantForm = new FormGroup({

View File

@ -10,11 +10,10 @@ import { MeetRecordingFilters, MeetRecordingInfo } from '@lib/typings/ce';
import { ILogger, LoggerService } from 'openvidu-components-angular';
@Component({
selector: 'ov-room-recordings',
templateUrl: './room-recordings.component.html',
styleUrls: ['./room-recordings.component.scss'],
standalone: true,
imports: [MatToolbarModule, MatButtonModule, RecordingListsComponent, MatIconModule, MatProgressSpinnerModule]
selector: 'ov-room-recordings',
templateUrl: './room-recordings.component.html',
styleUrls: ['./room-recordings.component.scss'],
imports: [MatToolbarModule, MatButtonModule, RecordingListsComponent, MatIconModule, MatProgressSpinnerModule]
})
export class RoomRecordingsComponent implements OnInit {
recordings = signal<MeetRecordingInfo[]>([]);

View File

@ -13,19 +13,18 @@ import { formatDurationToTime } from '@lib/utils';
import { ViewportService } from 'openvidu-components-angular';
@Component({
selector: 'ov-view-recording',
templateUrl: './view-recording.component.html',
styleUrls: ['./view-recording.component.scss'],
standalone: true,
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
DatePipe,
MatProgressSpinnerModule,
MatTooltipModule,
MatSnackBarModule
]
selector: 'ov-view-recording',
templateUrl: './view-recording.component.html',
styleUrls: ['./view-recording.component.scss'],
imports: [
MatCardModule,
MatButtonModule,
MatIconModule,
DatePipe,
MatProgressSpinnerModule,
MatTooltipModule,
MatSnackBarModule
]
})
export class ViewRecordingComponent implements OnInit, OnDestroy {
recording?: MeetRecordingInfo;

View File

@ -4,11 +4,10 @@ import { AppDataService } from '@lib/services';
import packageInfo from '../../package.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
standalone: true,
imports: [RouterOutlet]
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [RouterOutlet]
})
export class AppComponent implements OnInit {
constructor(private appDataService: AppDataService) {}

View File

@ -1,6 +1,6 @@
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection, inject, provideAppInitializer } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import { routes } from '@app/app.routes';
@ -17,13 +17,10 @@ const ovComponentsconfig: OpenViduComponentsConfig = {
export const appConfig: ApplicationConfig = {
providers: [
{
provide: APP_INITIALIZER,
// Ensure the theme is initialized before the app starts
useFactory: (themeService: ThemeService) => () => themeService.initializeTheme(),
deps: [ThemeService],
multi: true
},
provideAppInitializer(() => {
const initializerFn = ((themeService: ThemeService) => () => themeService.initializeTheme())(inject(ThemeService));
return initializerFn();
}),
importProvidersFrom(OpenViduComponentsModule.forRoot(ovComponentsconfig)),
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),

View File

@ -2,11 +2,13 @@
@use './assets/styles/openvidu-theme.scss';
@import './assets/styles/design-tokens';
@include mat.core();
@include mat.elevation-classes();
@include mat.app-background();
// Light theme by default
html {
@include mat.core-theme(openvidu-theme.$light-theme);
@include mat.elevation-classes();
@include mat.app-background();
@include mat.all-component-bases(openvidu-theme.$light-theme);
@include mat.all-component-colors(openvidu-theme.$light-theme);
@include mat.all-component-typographies(openvidu-theme.$light-theme);