Update angular to v17

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": {

client/package.json

@@ -29,31 +29,31 @@
   ],
   "typings": "*.d.ts",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.2",
+    "@angular-devkit/build-angular": "^17.0.9",
-    "@angular-eslint/builder": "^16.0.2",
+    "@angular-eslint/builder": "^17.1.1",
-    "@angular-eslint/eslint-plugin": "^16.0.2",
+    "@angular-eslint/eslint-plugin": "^17.1.1",
-    "@angular-eslint/eslint-plugin-template": "^16.0.2",
+    "@angular-eslint/eslint-plugin-template": "^17.1.1",
-    "@angular-eslint/schematics": "^16.0.2",
+    "@angular-eslint/schematics": "^17.1.1",
-    "@angular-eslint/template-parser": "^16.0.2",
+    "@angular-eslint/template-parser": "^17.1.1",
-    "@angular/animations": "^16.0.2",
+    "@angular/animations": "^17.0.8",
-    "@angular/cdk": "^16.0.1",
+    "@angular/cdk": "^17.0.4",
-    "@angular/cli": "^16.0.2",
+    "@angular/cli": "^17.0.9",
-    "@angular/common": "^16.0.2",
+    "@angular/common": "^17.0.8",
-    "@angular/compiler": "^16.0.2",
+    "@angular/compiler": "^17.0.8",
-    "@angular/compiler-cli": "^16.0.2",
+    "@angular/compiler-cli": "^17.0.8",
-    "@angular/core": "^16.0.2",
+    "@angular/core": "^17.0.8",
-    "@angular/forms": "^16.0.2",
+    "@angular/forms": "^17.0.8",
-    "@angular/localize": "^16.0.2",
+    "@angular/localize": "^17.0.8",
-    "@angular/platform-browser": "^16.0.2",
+    "@angular/platform-browser": "^17.0.8",
-    "@angular/platform-browser-dynamic": "^16.0.2",
+    "@angular/platform-browser-dynamic": "^17.0.8",
-    "@angular/router": "^16.0.2",
+    "@angular/router": "^17.0.8",
-    "@angular/service-worker": "^16.0.2",
+    "@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-bootstrap/ng-bootstrap": "^16.0.0",
-    "@ng-select/ng-select": "^11.2.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",

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"

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'] }}

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>
 

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>

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>

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"

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>

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">

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')
+      // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1615
-        .catch(err => logger.error('Cannot lock screen to landscape.', err))
+      (screen.orientation as any).lock('landscape')
+        .catch((err: Error) => logger.error('Cannot lock screen to landscape.', err))
     }
 
     this.player.on('fullscreenchange', this.onFullScreenChangeHandler)