upgrade to angular 19

This commit is contained in:
Alex Shnitman 2025-06-02 23:16:32 +03:00
parent 91f1e21df0
commit b7ef408d5d
9 changed files with 3006 additions and 2311 deletions

View File

@ -241,7 +241,7 @@ def get_custom_dirs():
@routes.get(config.URL_PREFIX)
def index(request):
response = web.FileResponse(os.path.join(config.BASE_DIR, 'ui/dist/metube/index.html'))
response = web.FileResponse(os.path.join(config.BASE_DIR, 'ui/dist/metube/browser/index.html'))
if 'metube_theme' not in request.cookies:
response.set_cookie('metube_theme', config.DEFAULT_THEME)
return response
@ -271,11 +271,11 @@ if config.URL_PREFIX != '/':
routes.static(config.URL_PREFIX + 'download/', config.DOWNLOAD_DIR, show_index=config.DOWNLOAD_DIRS_INDEXABLE)
routes.static(config.URL_PREFIX + 'audio_download/', config.AUDIO_DOWNLOAD_DIR, show_index=config.DOWNLOAD_DIRS_INDEXABLE)
routes.static(config.URL_PREFIX, os.path.join(config.BASE_DIR, 'ui/dist/metube'))
routes.static(config.URL_PREFIX, os.path.join(config.BASE_DIR, 'ui/dist/metube/browser'))
try:
app.add_routes(routes)
except ValueError as e:
if 'ui/dist/metube' in str(e):
if 'ui/dist/metube/browser' in str(e):
raise RuntimeError('Could not find the frontend UI static assets. Please run `node_modules/.bin/ng build` inside the ui folder') from e
raise e

View File

@ -15,12 +15,15 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/metube",
"outputPath": {
"base": "dist/metube"
},
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"polyfills": [
"src/polyfills.ts"
],
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
@ -30,13 +33,15 @@
"src/custom-service-worker.js"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@ng-select/ng-select/themes/default.theme.css",
"src/styles.sass"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
"serviceWorker": "ngsw-config.json",
"browser": "src/main.ts"
},
"configurations": {
"production": {
@ -51,8 +56,6 @@
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",

5197
ui/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -11,37 +11,37 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^18.2.13",
"@angular/common": "^18.2.13",
"@angular/compiler": "^18.2.13",
"@angular/core": "^18.2.13",
"@angular/forms": "^18.2.13",
"@angular/localize": "^18.2.13",
"@angular/platform-browser": "^18.2.13",
"@angular/platform-browser-dynamic": "^18.2.13",
"@angular/router": "^18.2.13",
"@angular/service-worker": "^18.2.13",
"@fortawesome/angular-fontawesome": "~0.15.0",
"@fortawesome/fontawesome-svg-core": "^6.5.0",
"@fortawesome/free-regular-svg-icons": "^6.5.0",
"@fortawesome/free-solid-svg-icons": "^6.5.0",
"@ng-bootstrap/ng-bootstrap": "^17.0.0",
"@ng-select/ng-select": "^13.0.0",
"bootstrap": "^5.3.0",
"ngx-cookie-service": "^18.0.0",
"ngx-socket-io": "~4.7.0",
"@angular/animations": "^19.2.14",
"@angular/common": "^19.2.14",
"@angular/compiler": "^19.2.14",
"@angular/core": "^19.2.14",
"@angular/forms": "^19.2.14",
"@angular/localize": "^19.2.14",
"@angular/platform-browser": "^19.2.14",
"@angular/platform-browser-dynamic": "^19.2.14",
"@angular/router": "^19.2.14",
"@angular/service-worker": "^19.2.14",
"@fortawesome/angular-fontawesome": "~1.0.0",
"@fortawesome/fontawesome-svg-core": "^6.7.0",
"@fortawesome/free-regular-svg-icons": "^6.7.0",
"@fortawesome/free-solid-svg-icons": "^6.7.0",
"@ng-bootstrap/ng-bootstrap": "^18.0.0",
"@ng-select/ng-select": "^14.0.0",
"bootstrap": "^5.3.6",
"ngx-cookie-service": "^19.0.0",
"ngx-socket-io": "~4.8.0",
"rxjs": "~7.8.0",
"tslib": "^2.6.0",
"zone.js": "~0.14.4"
"tslib": "^2.8.1",
"zone.js": "~0.15.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.19",
"@angular/cli": "^18.2.19",
"@angular/compiler-cli": "^18.2.13",
"@types/node": "^18.15.0",
"@angular-devkit/build-angular": "^19.2.14",
"@angular/cli": "^19.2.14",
"@angular/compiler-cli": "^19.2.14",
"@types/node": "^22.15.29",
"codelyzer": "^6.0.2",
"ts-node": "~10.9.1",
"tslint": "~6.1.3",
"typescript": "~5.4.5"
"typescript": "~5.8.3"
}
}

View File

@ -12,9 +12,10 @@ import { Theme, Themes } from './theme';
import {KeyValue} from "@angular/common";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
standalone: false
})
export class AppComponent implements AfterViewInit {
addUrl: string;

View File

@ -1,7 +1,8 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'eta'
name: 'eta',
standalone: false
})
export class EtaPipe implements PipeTransform {
transform(value: number, ...args: any[]): any {
@ -21,7 +22,8 @@ export class EtaPipe implements PipeTransform {
}
@Pipe({
name: 'speed'
name: 'speed',
standalone: false
})
export class SpeedPipe implements PipeTransform {
transform(value: number, ...args: any[]): any {
@ -37,7 +39,8 @@ export class SpeedPipe implements PipeTransform {
}
@Pipe({
name: 'encodeURIComponent'
name: 'encodeURIComponent',
standalone: false
})
export class EncodeURIComponent implements PipeTransform {
transform(value: string, ...args: any[]): any {
@ -45,8 +48,9 @@ export class EncodeURIComponent implements PipeTransform {
}
}
@Pipe({
name: 'fileSize'
@Pipe({
name: 'fileSize',
standalone: false
})
export class FileSizePipe implements PipeTransform {
transform(value: number): string {

View File

@ -5,13 +5,14 @@ interface Checkable {
}
@Component({
selector: 'app-master-checkbox',
template: `
selector: 'app-master-checkbox',
template: `
<div class="form-check">
<input type="checkbox" class="form-check-input" id="{{id}}-select-all" #masterCheckbox [(ngModel)]="selected" (change)="clicked()">
<label class="form-check-label" for="{{id}}-select-all"></label>
</div>
`
`,
standalone: false
})
export class MasterCheckboxComponent {
@Input() id: string;
@ -38,13 +39,14 @@ export class MasterCheckboxComponent {
}
@Component({
selector: 'app-slave-checkbox',
template: `
selector: 'app-slave-checkbox',
template: `
<div class="form-check">
<input type="checkbox" class="form-check-input" id="{{master.id}}-{{id}}-select" [(ngModel)]="checkable.checked" (change)="master.selectionChanged()">
<label class="form-check-label" for="{{master.id}}-{{id}}-select"></label>
</div>
`
`,
standalone: false
})
export class SlaveCheckboxComponent {
@Input() id: string;

View File

@ -1,9 +1,5 @@
/* You can add global styles to this file, and also import other style files */
/* Importing Bootstrap SCSS file. */
@import 'node_modules/bootstrap/scss/bootstrap'
@import '~@ng-select/ng-select/themes/default.theme.css'
.navbar
background-color: var(--bs-dark) !important

View File

@ -5,8 +5,8 @@
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"esModuleInterop": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,