migrate to Bootsrap 5.2.x (#15)

angular.json

@@ -24,7 +24,7 @@
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.slim.min.js",
-              "node_modules/popper.js/dist/umd/popper.min.js",
+              "node_modules/@popperjs/core/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
             ],
             "aot": false,

package.json

@@ -22,51 +22,51 @@
   ],
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.2.8",
-    "@angular/common": "14.2.8",
-    "@angular/compiler": "14.2.8",
-    "@angular/core": "14.2.8",
-    "@angular/forms": "14.2.8",
-    "@angular/localize": "14.2.8",
-    "@angular/platform-browser": "14.2.8",
-    "@angular/platform-browser-dynamic": "14.2.8",
-    "@angular/router": "14.2.8",
-    "@fortawesome/fontawesome-free": "^6.2.0",
-    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
+    "@angular/animations": "15.1.0",
+    "@angular/common": "15.1.0",
+    "@angular/compiler": "15.1.0",
+    "@angular/core": "15.1.0",
+    "@angular/forms": "15.1.0",
+    "@angular/localize": "15.1.0",
+    "@angular/platform-browser": "15.1.0",
+    "@angular/platform-browser-dynamic": "15.1.0",
+    "@angular/router": "15.1.0",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@ng-bootstrap/ng-bootstrap": "^14.0.1",
     "@ng-select/ng-option-highlight": "0.0.7",
-    "@ng-select/ng-select": "^9.0.2",
+    "@ng-select/ng-select": "^10.0.3",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
+    "@popperjs/core": "^2.10.2",
     "@silvermine/videojs-quality-selector": "^1.2.5",
-    "@uirouter/angular": "9.1.0",
-    "@uirouter/core": "6.0.8",
+    "@uirouter/angular": "11.0.0",
+    "@uirouter/core": "6.0.9",
     "@uirouter/rx": "1.0.0",
     "angular-gauge": "^4.0.0",
     "angular-pipes": "^10.0.0",
-    "bootstrap": "4.6.2",
-    "core-js": "^3.26.0",
-    "jquery": "3.6.1",
+    "bootstrap": "5.2.3",
+    "core-js": "^3.27.1",
+    "jquery": "3.6.3",
     "messageformat": "^2.3.0",
-    "ngx-toastr": "^15.2.1",
-    "ngx-translate-messageformat-compiler": "^5.1.0",
+    "ngx-toastr": "^16.0.2",
+    "ngx-translate-messageformat-compiler": "^6.2.0",
     "npm-font-open-sans": "^1.1.0",
-    "popper.js": "^1.16.1",
     "roboto-fontface": "^0.10.0",
     "rxjs": "^7.5.5",
     "tslib": "^2.4.0",
     "typeface-titillium-web": "1.1.13",
     "video.js": "7.20.3",
-    "zone.js": "~0.11.8"
+    "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.7",
-    "@angular-devkit/core": "^14.2.7",
-    "@angular/cli": "14.2.7",
-    "@angular/compiler-cli": "14.2.8",
-    "@angular/language-service": "14.2.8",
-    "@types/jquery": "^3.5.14",
-    "@types/node": "^18.11.7",
-    "@types/video.js": "^7.3.49",
+    "@angular-devkit/build-angular": "^15.1.1",
+    "@angular-devkit/core": "^15.1.1",
+    "@angular/cli": "15.1.1",
+    "@angular/compiler-cli": "15.1.0",
+    "@angular/language-service": "15.1.0",
+    "@types/jquery": "^3.5.16",
+    "@types/node": "^18.11.18",
+    "@types/video.js": "^7.3.50",
     "angular-ide": "^0.9.77",
     "cheerio": "^1.0.0-rc.12",
     "codelyzer": "^6.0.2",
@@ -79,7 +79,7 @@
     "p-limit": "^4.0.0",
     "ts-node": "^10.9.1",
     "tslint": "~6.1.3",
-    "typescript": "4.6.3",
+    "typescript": "4.9.4",
     "webpack-bundle-analyzer": "^4.7.0",
     "yargs": "^17.6.0"
   }

pom.xml

@@ -64,8 +64,8 @@
         <jersey.version>3.0.8</jersey.version>
         <log4j.version>2.19.0</log4j.version>
         <maven.compiler.target>${java.version}</maven.compiler.target>
-        <node.version>v14.17.0</node.version>
-        <npm.version>6.14.13</npm.version>
+        <node.version>v18.10.0</node.version>
+        <npm.version>8.19.2</npm.version>
         <selenium.version>4.5.3</selenium.version>
     </properties>
 
@@ -511,7 +511,7 @@
                         </goals>
                         <phase>process-resources</phase>
                         <configuration>
-                            <arguments>install</arguments>
+                            <arguments>install --force</arguments>
                         </configuration>
                     </execution>
                     <execution>

src/test/java/org/mycore/vidconv/frontend/TestSharedHelpers.java

@@ -55,9 +55,9 @@ public void switchNavLink(String link, String menu, boolean goHome) {
         }
 
         if (menu != null) {
-            String xp = "//header[@id='header']//a[@aria-expanded='false' and @data-toggle='collapse' and @href='#"
+            String xp = "//header[@id='header']//a[@aria-expanded='false' and @data-bs-toggle='collapse' and @href='#"
                     + menu
-                    + "']|//nav[@id='sidebar']//a[@aria-expanded='false' and @data-toggle='collapse' and @href='#"
+                    + "']|//nav[@id='sidebar']//a[@aria-expanded='false' and @data-bs-toggle='collapse' and @href='#"
                     + menu
                     + "']";
             if (hasElement(By.xpath(xp)) != null) {
@@ -81,7 +81,7 @@ public void invokeAction(String ref, String menu) {
         waitForInvisibleElement(By.id("spinner"), 3);
 
         if (menu != null) {
-            String xp = "//*[@aria-expanded='false' and @data-toggle='dropdown' and @id='" + menu + "']";
+            String xp = "//*[@aria-expanded='false' and @data-bs-toggle='dropdown' and @id='" + menu + "']";
             if (hasElement(By.xpath(xp)) != null) {
                 waitAndClick(By.xpath(xp));
             }

src/ui/src/app/app.component.html

@@ -21,7 +21,7 @@
                                 </a>
                             </li>
                             <li *ngIf="allowed">
-                                <a [href]="'#'+ refId(r)" data-toggle="collapse" aria-expanded="false">
+                                <a [href]="'#'+ refId(r)" data-bs-toggle="collapse" aria-expanded="false">
                                     <i *ngIf="r.icon" [ngClass]="r.icon"></i> {{ r.i18n | translate }}
                                 </a>
                                 <ul class="collapse list-unstyled" [id]="refId(r)" [attr.aria-labelledby]="refId(r)">

src/ui/src/app/converter/converter.component.html

@@ -5,10 +5,10 @@
                 <div class="d-flex align-items-center justify-content-between">
                     {{ 'converter.runningJobs' | translate }}
                     <div class="btn-group action-group" role="group" aria-label="Actions">
-                        <button type="button" class="btn btn-action" data-toggle="collapse" data-target="#addJob"
+                        <button type="button" class="btn btn-action" data-bs-toggle="collapse" data-bs-target="#addJob"
                             aria-expanded="true" aria-controls="addJob">
                             <i class="fa fa-plus" aria-hidden="true"></i> <span
-                                class="d-none d-sm-inline-block ml-1">{{ 'converter.addJob' | translate }}</span>
+                                class="d-none d-sm-inline-block ms-1">{{ 'converter.addJob' | translate }}</span>
                         </button>
                     </div>
                 </div>
@@ -33,7 +33,7 @@
                                     [animated]="job.running" [value]="job.progress.percent || 0" height="20px">
                                 </ngb-progressbar>
                             </div>
-                            <div class="col-12 col-md-3 text-right my-auto">
+                            <div class="col-12 col-md-3 text-end my-auto">
                                 <i class="fa fa-hourglass-start" aria-hidden="true"></i>
                                 {{ job.progress.estimate || '0:00:00' }}
                                 <span> / </span>
@@ -43,7 +43,7 @@
                         </ng-container>
                         <ng-container *ngIf="!job.running && !job.done">
                             <div class="col-12">
-                                <div class="status-icon queued float-left">
+                                <div class="status-icon queued float-start">
                                     <div class="is-rotating">
                                         <i class="circle"></i> <i class="circle"></i>
                                     </div>
@@ -66,34 +66,34 @@
             <div class="card-body p-2">
                 <div class="row my-1" *ngFor="let job of done; trackBy: trackByJobId; let i = index">
                     <div class="col-7 col-sm-7 text-truncate my-auto">
-                        <span class="fa mr-1"
+                        <span class="fa me-1"
                             [ngClass]="{'fa-check text-success': job.done && job.exitValue === 0, 'fa-times text-danger': job.done && job.exitValue !== 0}"></span>
                         <strong>{{ job.file }}</strong>
                     </div>
-                    <div class="col-sm-3 d-none d-sm-block text-right my-auto">
+                    <div class="col-sm-3 d-none d-sm-block text-end my-auto">
                         <i class="fa fa-hourglass-end" aria-hidden="true"></i> {{ job.progress.elapsed }}
                     </div>
 
                     <div class="col-5 col-sm-2">
-                        <div class="btn-group btn-group-sm float-right" role="group">
-                            <button class="btn btn-outline-secondary" data-toggle="collapse"
+                        <div class="btn-group btn-group-sm float-end" role="group">
+                            <button class="btn btn-outline-secondary" data-bs-toggle="collapse"
                                 [attr.aria-controls]="'details-'+ (job.hashCode || job.id)"
-                                [attr.data-target]="'#details-' + (job.hashCode || job.id)" aria-expanded="false">
+                                [attr.data-bs-target]="'#details-' + (job.hashCode || job.id)" aria-expanded="false">
                                 <i class="fa fa-terminal" aria-hidden="true"></i>
                             </button>
                             <button class="btn btn-outline-secondary" aria-expanded="false"
                                 [attr.aria-controls]="'preview-'+ (job.hashCode || job.id)"
-                                [attr.data-target]="'#preview-' + (job.hashCode || job.id)" data-toggle="collapse"
+                                [attr.data-bs-target]="'#preview-' + (job.hashCode || job.id)" data-bs-toggle="collapse"
                                 [disabled]="job.exitValue !== 0 || !canStream(job)"
                                 (click)="initPreview(job.hashCode || job.id)">
                                 <i class="fa fa-eye" aria-hidden="true"></i>
                             </button>
                             <button class="btn btn-outline-secondary dropdown-toggle"
-                                id="download-menu-{{ (job.hashCode || job.id) }}" data-toggle="dropdown"
+                                id="download-menu-{{ (job.hashCode || job.id) }}" data-bs-toggle="dropdown"
                                 aria-haspopup="true" aria-expanded="false" [disabled]="job.exitValue !== 0">
                                 <i class="fa fa-save"></i>
                             </button>
-                            <div class="dropdown-menu dropdown-menu-right"
+                            <div class="dropdown-menu dropdown-menu-end"
                                 [attr.aria-labelledby]="'download-menu-' + (job.id | hashCode)">
                                 <a *ngFor="let file of job.files" class="dropdown-item"
                                     [href]="baseUrl + '/widget/converter/' + job.id + '/' + file.name + '/download'">{{ file.name }}</a>
@@ -118,7 +118,7 @@
                         </ng-container>
                     </div>
                     <div id="preview-{{ (job.hashCode || job.id) }}" class="col-12 collapse mt-2">
-                        <div class="embed-responsive embed-responsive-16by9">
+                        <div class="ratio ratio-16x9">
                             <video id="video-{{ (job.hashCode || job.id) }}"
                                 class="video-preview video-js vjs-default-skin vjs-big-play-centered embed-responsive-item"
                                 controls preload="none">

src/ui/src/app/converter/fileUpload.component.html

@@ -10,7 +10,7 @@
     <div *ngFor="let item of queue; trackBy: trackByItem" class="row my-1">
         <div class="col-12 text-truncate">
             <strong>{{ item.file.filepath || item.file.name }}</strong>
-            <a *ngIf="item.error" class="text-dark ml-1" (click)="retry(item)">
+            <a *ngIf="item.error" class="text-dark ms-1" (click)="retry(item)">
                 <i class="fas fa-sync"></i>
             </a>
         </div>
@@ -21,7 +21,7 @@
             </ngb-progressbar>
         </div>
         <div *ngIf="!item.progress && !item.complete" class="col-12">
-            <div class="status-icon queued float-left">
+            <div class="status-icon queued float-start">
                 <div class="is-rotating">
                     <i class="circle"></i> <i class="circle"></i>
                 </div>

src/ui/src/app/login/login.component.html

@@ -2,15 +2,15 @@
 	<form novalidate (ngSubmit)="onSubmit(form)" [formGroup]="form">
 		<fieldset>
 			<legend>{{'login.headline' | translate}}</legend>
-			<div class="form-group row">
+			<div class="row mb-2">
 				<label for="username" class="col-sm-2 control-label">{{ 'user.name' | translate }}</label>
 				<div class="col-sm-10">
 					<input formControlName="username" type="text" id="username" autocapitalize="off" autocorrect="off" autofocus placeholder="{{ 'user.name' | translate }}"
 						tabindex="1" class="form-control" [ngClass]="{'is-invalid': invalidCredentials || form.controls.username.dirty && form.controls.username.errors}"
 					>
 				</div>
 			</div>
-			<div class="form-group row">
+			<div class="row mb-2">
 				<label for="password" class="col-sm-2 control-label">{{ 'user.password' | translate }}</label>
 				<div class="col-sm-10">
 					<input formControlName="password" type="password" id="password" placeholder="{{ 'user.password' | translate }}" tabindex="2" class="form-control"

src/ui/src/app/settings/settings.audio.component.html

@@ -1,9 +1,9 @@
 <div *ngIf="output && type" [formGroup]="output">
     <!-- templates -->
     <ng-template #codecSelect let-index="index" let-type="type">
-        <div class="form-group">
+        <div class="mb-2">
             <label [attr.for]="'output-' + index + '-' + type + '-codec'">{{ 'settings.codec' | translate }}</label>
-            <select class="form-control custom-select" [id]="'output-' + index + '-' + type + '-codec'"
+            <select class="form-select" [id]="'output-' + index + '-' + type + '-codec'"
                 formControlName="codec" (change)="onCodecChange()">
                 <option [value]="''">{{ 'general.pleaseSelect' | translate }}</option>
                 <ng-container *ngFor="let cgrp of selectedFormat.audio">
@@ -28,9 +28,9 @@
         </ng-container>
 
         <ng-container *ngIf="selectedEncoder">
-            <div *ngIf="selectedEncoder.sampleRates" class="form-group">
+            <div *ngIf="selectedEncoder.sampleRates" class="mb-2">
                 <label for="output-{{ index }}-audio-samplerate">{{ 'settings.samplerate' | translate }}</label>
-                <select class="form-control custom-select" [id]="'output-' + index + '-audio-samplerate'"
+                <select class="form-select" [id]="'output-' + index + '-audio-samplerate'"
                     formControlName="samplerate"
                     [ngClass]="{'is-invalid':output.controls.samplerate.errors}">
                     <option [value]="null">{{ 'settings.auto' | translate }}
@@ -40,9 +40,9 @@
                 </select>
             </div>
 
-            <div class="form-group">
+            <div class="mb-2">
                 <label for="output-{{ index }}-audio-bitrate">{{ 'settings.bitrate' | translate }}</label>
-                <select class="form-control custom-select" [id]="'output-' + index + '-audio-bitrate'"
+                <select class="form-select" [id]="'output-' + index + '-audio-bitrate'"
                     formControlName="bitrate"
                     [ngClass]="{'is-invalid':output.controls.bitrate.errors}">
                     <option [value]="null">{{ 'settings.auto' | translate }}