Update angular to v17

2024-01-05 10:12:28 +01:00 · 2024-01-05 10:12:28 +01:00 · d1adcfadfd
parent 7f8979e544
commit d1adcfadfd
12 changed files with 1275 additions and 1525 deletions
--- a/client/angular.json
+++ b/client/angular.json
@ -279,25 +279,25 @@
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
-            "browserTarget": "PeerTube:build",
-            "proxyConfig": "proxy.config.json"
+            "proxyConfig": "proxy.config.json",
+            "buildTarget": "PeerTube:build"
          },
          "configurations": {
            "production": {
-              "browserTarget": "PeerTube:build:production"
+              "buildTarget": "PeerTube:build:production"
            },
            "hmr": {
-              "browserTarget": "PeerTube:build:hmr"
+              "buildTarget": "PeerTube:build:hmr"
            },
            "ar-locale": {
-              "browserTarget": "PeerTube:build:ar-locale"
+              "buildTarget": "PeerTube:build:ar-locale"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "browserTarget": "PeerTube:build"
+            "buildTarget": "PeerTube:build"
          }
        },
        "lint": {
--- a/client/package.json
+++ b/client/package.json
@ -29,31 +29,31 @@
  ],
  "typings": "*.d.ts",
  "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.2",
-    "@angular-eslint/builder": "^16.0.2",
-    "@angular-eslint/eslint-plugin": "^16.0.2",
-    "@angular-eslint/eslint-plugin-template": "^16.0.2",
-    "@angular-eslint/schematics": "^16.0.2",
-    "@angular-eslint/template-parser": "^16.0.2",
-    "@angular/animations": "^16.0.2",
-    "@angular/cdk": "^16.0.1",
-    "@angular/cli": "^16.0.2",
-    "@angular/common": "^16.0.2",
-    "@angular/compiler": "^16.0.2",
-    "@angular/compiler-cli": "^16.0.2",
-    "@angular/core": "^16.0.2",
-    "@angular/forms": "^16.0.2",
-    "@angular/localize": "^16.0.2",
-    "@angular/platform-browser": "^16.0.2",
-    "@angular/platform-browser-dynamic": "^16.0.2",
-    "@angular/router": "^16.0.2",
-    "@angular/service-worker": "^16.0.2",
+    "@angular-devkit/build-angular": "^17.0.9",
+    "@angular-eslint/builder": "^17.1.1",
+    "@angular-eslint/eslint-plugin": "^17.1.1",
+    "@angular-eslint/eslint-plugin-template": "^17.1.1",
+    "@angular-eslint/schematics": "^17.1.1",
+    "@angular-eslint/template-parser": "^17.1.1",
+    "@angular/animations": "^17.0.8",
+    "@angular/cdk": "^17.0.4",
+    "@angular/cli": "^17.0.9",
+    "@angular/common": "^17.0.8",
+    "@angular/compiler": "^17.0.8",
+    "@angular/compiler-cli": "^17.0.8",
+    "@angular/core": "^17.0.8",
+    "@angular/forms": "^17.0.8",
+    "@angular/localize": "^17.0.8",
+    "@angular/platform-browser": "^17.0.8",
+    "@angular/platform-browser-dynamic": "^17.0.8",
+    "@angular/router": "^17.0.8",
+    "@angular/service-worker": "^17.0.8",
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@formatjs/intl-locale": "^3.3.1",
    "@formatjs/intl-pluralrules": "^5.2.2",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.1",
-    "@ng-select/ng-select": "^11.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@ng-select/ng-select": "^12.0.4",
    "@ngx-loading-bar/core": "^6.0.0",
    "@ngx-loading-bar/http-client": "^6.0.0",
    "@ngx-loading-bar/router": "^6.0.0",
@ -73,6 +73,7 @@
    "@types/lodash-es": "^4.17.0",
    "@types/markdown-it": "^13.0.2",
    "@types/node": "^18.13.0",
+    "@types/qrcode": "^1.5.5",
    "@types/sanitize-html": "2.9.2",
    "@types/sha.js": "^2.4.0",
    "@types/video.js": "^7.3.40",
@ -84,7 +85,7 @@
    "@wdio/mocha-framework": "^8.10.4",
    "@wdio/shared-store-service": "^8.10.5",
    "@wdio/spec-reporter": "^8.10.5",
-    "angularx-qrcode": "16.0.0",
+    "angularx-qrcode": "17.0.0",
    "babel-loader": "^9.1.0",
    "bootstrap": "^5.1.3",
    "buffer": "^6.0.3",
@ -112,7 +113,7 @@
    "ngx-uploadx": "^6.1.0",
    "path-browserify": "^1.0.0",
    "postcss": "^8.4.14",
-    "primeng": "^16.0.0-rc.2",
+    "primeng": "^17.3.1",
    "raw-loader": "^4.0.2",
    "rxjs": "^7.3.0",
    "sanitize-html": "^2.1.2",
@ -126,7 +127,7 @@
    "ts-loader": "^9.3.0",
    "ts-node": "^10.9.1",
    "tslib": "^2.4.0",
-    "typescript": "~5.3.3",
+    "typescript": "~5.2",
    "video.js": "^7.19.2",
    "webpack": "^5.73.0",
    "webpack-bundle-analyzer": "^4.4.2",
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@ -24,7 +24,7 @@
            </div>

            <div class="actor-handle">
-              <span>@{{ account.nameWithHost }}</span>
+              <span>&#64;{{ account.nameWithHost }}</span>

              <my-copy-button
                [value]="account.nameWithHostForced" i18n-notification notification="Username copied"
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@ -29,7 +29,7 @@
              type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
              formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control w-auto flex-grow-1 d-block"
            >
-            <div class="input-group-text">@{{ instanceHost }}</div>
+            <div class="input-group-text">&#64;{{ instanceHost }}</div>
          </div>
          <div *ngIf="formErrors['name']" class="form-error" role="alert">
            {{ formErrors['name'] }}
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@ -9,7 +9,7 @@
      formControlName="username" readonly
    >
    <div class="form-group-description" i18n>
-      People can find you using @{{ user.username }}@{{ instanceHost }}
+      People can find you using &#64;{{ user.username }}&#64;{{ instanceHost }}
    </div>
  </div>

--- a/client/src/app/+signup/+register/steps/register-step-channel.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-channel.component.html
@ -42,7 +42,7 @@
          type="text" id="name" i18n-placeholder placeholder="Example: sweetmelodies24"
          formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
        >
-        <div class="input-group-text">@{{ instanceHost }}</div>
+        <div class="input-group-text">&#64;{{ instanceHost }}</div>
      </div>

      <div *ngIf="formErrors.name" class="form-error" role="alert">{{ formErrors.name }}</div>
--- a/client/src/app/+signup/+register/steps/register-step-user.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.html
@ -36,7 +36,7 @@
          formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
          autocomplete="username"
        >
-        <span class="input-group-text">@{{ instanceHost }}</span>
+        <span class="input-group-text">&#64;{{ instanceHost }}</span>
      </div>

      <div *ngIf="formErrors.username" class="form-error" role="alert">{{ formErrors.username }}</div>
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@ -30,7 +30,7 @@
              <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ ownerAccount.displayName }}</a>
            </h4>

-            <div class="actor-handle">@{{ videoChannel.ownerBy }}</div>
+            <div class="actor-handle">&#64;{{ videoChannel.ownerBy }}</div>

            <my-account-block-badges [account]="ownerAccount"></my-account-block-badges>
          </div>
@ -63,7 +63,7 @@
            </div>

            <div class="actor-handle">
-              <span>@{{ videoChannel.nameWithHost }}</span>
+              <span>&#64;{{ videoChannel.nameWithHost }}</span>

              <my-copy-button
                [value]="videoChannel.nameWithHostForced" i18n-notification notification="Handle copied"
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@ -46,7 +46,7 @@
      </div>
      <ul>
        <li>
-          <em>@channel_id@domain</em> <span class="flex-auto muted" i18n>will list the matching channel</span>
+          <em>&#64;channel_id&#64;domain</em> <span class="flex-auto muted" i18n>will list the matching channel</span>
        </li>
        <li>
          <em>URL</em> <span class="muted" i18n>will list the matching channel</span>
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@ -13,7 +13,7 @@
              <div class="logged-in-info">
                <div class="logged-in-display-name">{{ user.account?.displayName }}</div>

-                <div class="logged-in-username">@{{ user.username }}</div>
+                <div class="logged-in-username">&#64;{{ user.username }}</div>
              </div>

              <div class="dropdown-toggle-indicator">
--- a/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
+++ b/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
@ -70,10 +70,11 @@ class PeerTubeMobilePlugin extends Plugin {

  private handleFullscreenRotation () {
    this.onFullScreenChangeHandler = () => {
-      if (!this.player.isFullscreen() || this.isPortraitVideo()) return
+      if (!this.player.isFullscreen() || this.isPortraitVideo()) return;

-      screen.orientation.lock('landscape')
-        .catch(err => logger.error('Cannot lock screen to landscape.', err))
+      // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1615
+      (screen.orientation as any).lock('landscape')
+        .catch((err: Error) => logger.error('Cannot lock screen to landscape.', err))
    }

    this.player.on('fullscreenchange', this.onFullScreenChangeHandler)
--- a/client/yarn.lock
+++ b/client/yarn.lock