neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: Updated to Angular 19

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39224
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

166
frontend/package.json
View File

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

27
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.ts
View File

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

27
frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.ts
View File

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

27
frontend/projects/shared-meet-components/src/lib/components/dialogs/delete-room-dialog/delete-room-dialog.component.ts
View File

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

35
frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/components/logo-selector/logo-selector.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/components/pro-feature-badge/pro-feature-badge.component.ts
View File

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

43
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
View File

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

43
frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/components/selectable-card/selectable-card.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/components/spinner/spinner.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/components/step-indicator/step-indicator.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/components/wizard-nav/wizard-nav.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/console/about/about.component.ts
View File

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

33
frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/console/console.component.ts
View File

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

29
frontend/projects/shared-meet-components/src/lib/pages/console/embedded/embedded.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts
View File

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

23
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts
View File

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

37
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts
View File

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

29
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-config/recording-config.component.ts
View File

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

25
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-layout/recording-layout.component.ts
View File

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

25
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-trigger/recording-trigger.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-config/room-config.component.ts
View File

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

29
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.ts
View File

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

41
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts
View File

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

33
frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/error/error.component.ts
View File

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

29
frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.ts
View File

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

43
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
View File

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

9
frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts
View File

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

25
frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.ts
View File

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

9
frontend/src/app/app.component.ts
View File

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

13
frontend/src/app/app.config.ts
View File

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

6
frontend/src/styles.scss
View File

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