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

frontend: upgrade Angular dependencies to version 20.x

Browse Source
This commit is contained in:
Carlos Santos 2025-10-03 14:17:33 +02:00
parent e8a76d52d3
commit c43af5c469
15 changed files with 2754 additions and 2454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/angular.json
View File

@ -185,5 +185,31 @@
} }
} }
} }
} },
"schematics": {
"@schematics/angular:component": {
"type": "component"
},
"@schematics/angular:directive": {
"type": "directive"
},
"@schematics/angular:service": {
"type": "service"
},
"@schematics/angular:guard": {
"typeSeparator": "."
},
"@schematics/angular:interceptor": {
"typeSeparator": "."
},
"@schematics/angular:module": {
"typeSeparator": "."
},
"@schematics/angular:pipe": {
"typeSeparator": "."
},
"@schematics/angular:resolver": {
"typeSeparator": "."
}
}
} }

4891
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

60
frontend/package.json
View File

@ -23,46 +23,46 @@
"format:code": "prettier --ignore-path ../gitignore . --write" "format:code": "prettier --ignore-path ../gitignore . --write"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "19.2.15", "@angular/animations": "20.3.3",
"@angular/cdk": "19.2.19", "@angular/cdk": "20.2.7",
"@angular/common": "19.2.15", "@angular/common": "20.3.3",
"@angular/compiler": "19.2.15", "@angular/compiler": "20.3.3",
"@angular/core": "19.2.15", "@angular/core": "20.3.3",
"@angular/forms": "19.2.15", "@angular/forms": "20.3.3",
"@angular/material": "19.2.19", "@angular/material": "20.2.7",
"@angular/platform-browser": "19.2.15", "@angular/platform-browser": "20.3.3",
"@angular/platform-browser-dynamic": "19.2.15", "@angular/platform-browser-dynamic": "20.3.3",
"@angular/router": "19.2.15", "@angular/router": "20.3.3",
"core-js": "3.38.1", "core-js": "3.45.1",
"jwt-decode": "4.0.0", "jwt-decode": "4.0.0",
"openvidu-components-angular": "3.4.0", "openvidu-components-angular": "file:openvidu-components-angular-3.4.0.tgz",
"rxjs": "7.8.1", "rxjs": "7.8.2",
"tslib": "2.3.0", "tslib": "2.8.1",
"unique-names-generator": "4.7.1", "unique-names-generator": "4.7.1",
"zone.js": "0.15.1" "zone.js": "0.15.1"
}, },
"devDependencies": { "devDependencies": {
"@angular-builders/custom-webpack": "19.0.1", "@angular-builders/custom-webpack": "20.0.0",
"@angular-devkit/build-angular": "19.2.17", "@angular-devkit/build-angular": "20.3.4",
"@angular-eslint/builder": "19.8.1", "@angular-eslint/builder": "20.3.0",
"@angular-eslint/eslint-plugin": "19.8.1", "@angular-eslint/eslint-plugin": "20.3.0",
"@angular-eslint/eslint-plugin-template": "19.8.1", "@angular-eslint/eslint-plugin-template": "20.3.0",
"@angular-eslint/schematics": "19.8.1", "@angular-eslint/schematics": "20.3.0",
"@angular-eslint/template-parser": "19.8.1", "@angular-eslint/template-parser": "20.3.0",
"@angular/cli": "19.2.17", "@angular/cli": "20.3.4",
"@angular/compiler-cli": "19.2.15", "@angular/compiler-cli": "20.3.3",
"@types/chai": "4.3.19", "@types/chai": "4.3.20",
"@types/fluent-ffmpeg": "2.1.27", "@types/fluent-ffmpeg": "2.1.27",
"@types/jasmine": "5.1.7", "@types/jasmine": "5.1.9",
"@types/mocha": "9.1.1", "@types/mocha": "9.1.1",
"@types/node": "20.19.19", "@types/node": "22.18.8",
"@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.35.1",
"@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.5.0",
"chromedriver": "132.0.0", "chromedriver": "141.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",
@ -75,7 +75,7 @@
"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": "19.2.2", "ng-packagr": "20.3.0",
"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",

2
frontend/projects/shared-meet-components/src/lib/interceptors/http.interceptor.ts
View File

@ -11,7 +11,7 @@ export const httpInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, ne
const participantTokenService = inject(ParticipantService); const participantTokenService = inject(ParticipantService);
const recordingService = inject(RecordingService); const recordingService = inject(RecordingService);
const pageUrl = router.getCurrentNavigation()?.finalUrl?.toString() || router.url; const pageUrl = router.currentNavigation()?.finalUrl?.toString() || router.url;
const requestUrl = req.url; const requestUrl = req.url;
req = req.clone({ req = req.clone({

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

@ -1,4 +1,4 @@
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
@ -18,7 +18,7 @@ interface OverviewStats {
@Component({ @Component({
selector: 'ov-overview', selector: 'ov-overview',
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatGridListModule], imports: [MatCardModule, MatButtonModule, MatIconModule, MatGridListModule],
templateUrl: './overview.component.html', templateUrl: './overview.component.html',
styleUrl: './overview.component.scss' styleUrl: './overview.component.scss'
}) })

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

@ -28,14 +28,17 @@
.step-content { .step-content {
@include design-tokens.ov-section-card; @include design-tokens.ov-section-card;
width: 100%;
max-width: 600px; & {
min-height: 450px; width: 100%;
max-height: 450px; max-width: 600px;
overflow-y: auto; min-height: 450px;
display: flex; max-height: 450px;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
display: flex;
overflow-y: auto;
}
} }
.step-content > :first-child { .step-content > :first-child {
@ -100,11 +103,11 @@
// Slide toggle customization // Slide toggle customization
.ov-slide-toggle-success { .ov-slide-toggle-success {
.mat-mdc-slide-toggle { .mat-mdc-slide-toggle {
--mdc-switch-selected-track-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-track-color: var(--ov-meet-color-success);
--mdc-switch-selected-handle-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-handle-color: var(--ov-meet-color-success);
--mdc-switch-selected-hover-handle-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-hover-handle-color: var(--ov-meet-color-success);
--mdc-switch-selected-focus-handle-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-focus-handle-color: var(--ov-meet-color-success);
--mdc-switch-selected-pressed-handle-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-pressed-handle-color: var(--ov-meet-color-success);
} }
} }

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

@ -1,4 +1,4 @@
import { CommonModule } from '@angular/common';
import { Component, computed, OnInit, Signal, signal } from '@angular/core'; import { Component, computed, OnInit, Signal, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -19,20 +19,19 @@ import { RoomWizardRoomDetailsComponent } from './steps/room-details/room-detail
@Component({ @Component({
selector: 'ov-room-wizard', selector: 'ov-room-wizard',
imports: [ imports: [
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'
}) })

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

@ -1,4 +1,4 @@
import { CommonModule } from '@angular/common';
import { Component, OnDestroy } from '@angular/core'; import { Component, OnDestroy } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms'; import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
@ -20,16 +20,15 @@ interface RecordingAccessOption {
@Component({ @Component({
selector: 'ov-recording-config', selector: 'ov-recording-config',
imports: [ imports: [
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'
}) })

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

@ -1,4 +1,4 @@
import { CommonModule } from '@angular/common';
import { Component, OnDestroy } from '@angular/core'; import { Component, OnDestroy } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms'; import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
@ -12,14 +12,13 @@ import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'ov-recording-layout', selector: 'ov-recording-layout',
imports: [ imports: [
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'
}) })

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

@ -1,4 +1,4 @@
import { CommonModule } from '@angular/common';
import { Component, OnDestroy } from '@angular/core'; import { Component, OnDestroy } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms'; import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
@ -12,14 +12,13 @@ import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'ov-recording-trigger', selector: 'ov-recording-trigger',
imports: [ imports: [
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'
}) })

1
frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss
View File

@ -92,7 +92,6 @@
margin-top: var(--ov-meet-spacing-md); margin-top: var(--ov-meet-spacing-md);
.primary-button { .primary-button {
@include design-tokens.ov-button-base;
width: 100%; width: 100%;
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
font-size: var(--ov-meet-font-size-md); font-size: var(--ov-meet-font-size-md);

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

@ -1,4 +1,4 @@
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
@ -9,7 +9,7 @@ import { LeftEventReason } from '@lib/typings/ce';
@Component({ @Component({
selector: 'ov-end-meeting', selector: 'ov-end-meeting',
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule], imports: [MatCardModule, MatButtonModule, MatIconModule],
templateUrl: './end-meeting.component.html', templateUrl: './end-meeting.component.html',
styleUrl: './end-meeting.component.scss' styleUrl: './end-meeting.component.scss'
}) })

4
frontend/projects/shared-meet-components/src/lib/services/theme.service.ts
View File

@ -1,5 +1,5 @@
import { DOCUMENT } from '@angular/common';
import { computed, Inject, Injectable, signal } from '@angular/core'; import { computed, Inject, Injectable, signal, DOCUMENT } from '@angular/core';
import { OpenViduThemeMode, OpenViduThemeService } from 'openvidu-components-angular'; import { OpenViduThemeMode, OpenViduThemeService } from 'openvidu-components-angular';
export type Theme = 'light' | 'dark'; export type Theme = 'light' | 'dark';

24
frontend/src/assets/styles/_utilities.scss
View File

@ -25,7 +25,7 @@
.primary-button { .primary-button {
@include components.ov-button-base; @include components.ov-button-base;
background-color: var(--ov-meet-color-secondary); background-color: var(--ov-meet-color-secondary) !important;
color: var(--ov-meet-text-on-secondary) !important; color: var(--ov-meet-text-on-secondary) !important;
&.mat-mdc-button-disabled { &.mat-mdc-button-disabled {
@ -158,17 +158,17 @@
} }
// Selected state styling with success color // Selected state styling with success color
--mdc-switch-selected-handle-color: var(--ov-meet-surface-color); --mat-slide-toggle-selected-handle-color: var(--ov-meet-surface-color);
--mdc-switch-selected-pressed-handle-color: var(--ov-meet-surface-color); --mat-slide-toggle-selected-pressed-handle-color: var(--ov-meet-surface-color);
--mdc-switch-selected-hover-handle-color: var(--ov-meet-surface-color); --mat-slide-toggle-selected-hover-handle-color: var(--ov-meet-surface-color);
--mdc-switch-selected-focus-handle-color: var(--ov-meet-surface-color); --mat-slide-toggle-selected-focus-handle-color: var(--ov-meet-surface-color);
--mdc-switch-selected-track-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-track-color: var(--ov-meet-color-success);
--mdc-switch-selected-pressed-track-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-pressed-track-color: var(--ov-meet-color-success);
--mdc-switch-selected-hover-track-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-hover-track-color: var(--ov-meet-color-success);
--mdc-switch-selected-focus-track-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-focus-track-color: var(--ov-meet-color-success);
--mdc-switch-selected-pressed-state-layer-color: var(--ov-meet-color-success); --mat-slide-toggle-selected-pressed-state-layer-color: var(--ov-meet-color-success);
--mdc-switch-selected-hover-state-layer-color: var(--ov-meet-surface-color); --mat-slide-toggle-selected-hover-state-layer-color: var(--ov-meet-surface-color);
--mdc-switch-selected-focus-state-layer-color: var(--ov-meet-surface-color); --mat-slide-toggle-selected-focus-state-layer-color: var(--ov-meet-surface-color);
} }
// Material Navigation List - Clean borders // Material Navigation List - Clean borders

77
frontend/tsconfig.json
View File

@ -1,39 +1,50 @@
{ {
"compileOnSave": false, "compileOnSave": false,
"compilerOptions": { "compilerOptions": {
"baseUrl": "./", "baseUrl": "./",
"moduleResolution": "node", "moduleResolution": "bundler",
"emitDecoratorMetadata": true, "emitDecoratorMetadata": false,
"resolveJsonModule": true, "resolveJsonModule": true,
"typeRoots": ["node_modules/@types"], "typeRoots": [
"outDir": "./dist/out-tsc", "node_modules/@types"
"strict": true, ],
"noImplicitOverride": true, "outDir": "./dist/out-tsc",
"noPropertyAccessFromIndexSignature": true, "strict": true,
"noImplicitReturns": true, "noImplicitOverride": true,
"noFallthroughCasesInSwitch": true, "noPropertyAccessFromIndexSignature": true,
"skipLibCheck": true, "noImplicitReturns": true,
"isolatedModules": true, "noFallthroughCasesInSwitch": true,
"esModuleInterop": true, "skipLibCheck": true,
"sourceMap": true, "isolatedModules": true,
"declaration": false, "esModuleInterop": true,
"experimentalDecorators": true, "sourceMap": true,
"paths": { "declaration": false,
"core-js/es7/reflect": ["./node_modules/core-js/proposals/reflect-metadata"], "experimentalDecorators": true,
"@environment/*": ["src/environments/*"], "paths": {
"@app/*": ["src/app/*"], "core-js/es7/reflect": [
"@lib/*": ["projects/shared-meet-components/src/lib/*"], "./node_modules/core-js/proposals/reflect-metadata"
"@typings-ce": ["projects/shared-meet-components/src/lib/typings/ce/index.ts"], ],
// "@services/*": ["src/app/services/*"], "@environment/*": [
// "@models/*": ["src/app/models/*"], "src/environments/*"
// "@guards/*": ["src/app/guards/*"], ],
// "@pages/*": ["src/app/pages/*"], "@app/*": [
}, "src/app/*"
"importHelpers": true, ],
"target": "ES2022", "@lib/*": [
"module": "ES2022", "projects/shared-meet-components/src/lib/*"
"lib": ["ES2022", "dom"] ],
}, "@typings-ce": [
"projects/shared-meet-components/src/lib/typings/ce/index.ts"
]
},
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": { "angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false, "enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true, "strictInjectionParameters": true,