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

26
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'
}) })

17
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%; width: 100%;
max-width: 600px; max-width: 600px;
min-height: 450px; min-height: 450px;
max-height: 450px; max-height: 450px;
overflow-y: auto;
display: flex;
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);
} }
} }

5
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,7 +19,6 @@ 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,
@ -32,7 +31,7 @@ import { RoomWizardRoomDetailsComponent } from './steps/room-details/room-detail
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'
}) })

5
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,7 +20,6 @@ interface RecordingAccessOption {
@Component({ @Component({
selector: 'ov-recording-config', selector: 'ov-recording-config',
imports: [ imports: [
CommonModule,
ReactiveFormsModule, ReactiveFormsModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
@ -29,7 +28,7 @@ interface RecordingAccessOption {
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'
}) })

5
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'
}) })

5
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

37
frontend/tsconfig.json
View File

@ -2,10 +2,12 @@
"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": [
"node_modules/@types"
],
"outDir": "./dist/out-tsc", "outDir": "./dist/out-tsc",
"strict": true, "strict": true,
"noImplicitOverride": true, "noImplicitOverride": true,
@ -19,20 +21,29 @@
"declaration": false, "declaration": false,
"experimentalDecorators": true, "experimentalDecorators": true,
"paths": { "paths": {
"core-js/es7/reflect": ["./node_modules/core-js/proposals/reflect-metadata"], "core-js/es7/reflect": [
"@environment/*": ["src/environments/*"], "./node_modules/core-js/proposals/reflect-metadata"
"@app/*": ["src/app/*"], ],
"@lib/*": ["projects/shared-meet-components/src/lib/*"], "@environment/*": [
"@typings-ce": ["projects/shared-meet-components/src/lib/typings/ce/index.ts"], "src/environments/*"
// "@services/*": ["src/app/services/*"], ],
// "@models/*": ["src/app/models/*"], "@app/*": [
// "@guards/*": ["src/app/guards/*"], "src/app/*"
// "@pages/*": ["src/app/pages/*"], ],
"@lib/*": [
"projects/shared-meet-components/src/lib/*"
],
"@typings-ce": [
"projects/shared-meet-components/src/lib/typings/ce/index.ts"
]
}, },
"importHelpers": true, "importHelpers": true,
"target": "ES2022", "target": "ES2022",
"module": "ES2022", "module": "ES2022",
"lib": ["ES2022", "dom"] "lib": [
"ES2022",
"dom"
]
}, },
"angularCompilerOptions": { "angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false, "enableI18nLegacyMessageIdFormat": false,