tags

docker/nginx/config/nginx.conf

@@ -6,7 +6,7 @@ upstream host-backend-nginx {
 server{
     listen 80 default_server;
     
-    client_max_body_size 1000M;
+    client_max_body_size 10000M;
     
     root /var/www/html/dist/mytube;
     index index.html;

package.json

@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.0",
+    "@angular/animations": "^15.2.10",
     "@angular/cdk": "^15.2.9",
     "@angular/common": "^15.2.0",
     "@angular/compiler": "^15.2.0",

src/app/app.component.scss

@@ -1,4 +0,0 @@
-app-login {
-    position: absolute;
-    top: 50%;
-}

src/app/app.component.ts

@@ -1,44 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { RequestService } from './request.service';
-import { VideoListEntry } from './model/VideoListEntry';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
-  videoList: VideoListEntry[] = [];
-  selectedVideoUrl: string|null = null;
-
-  constructor(
-    public requestService : RequestService,
-  ) {
-  }
-
-  ngOnInit(): void {
-    this.readList();
-  }
-
-  selectVideo(entry: VideoListEntry) {
-    if (this.selectedVideoUrl === null) {
-      this.selectedVideoUrl = "http://wsl-flo/api/video/stream/" + entry.id;
-    } else {
-      this.selectedVideoUrl = null;
-    }
-  }
-
-  readList(): void {
-    this.requestService.post(
-      'video-list/read-list',
-      {},
-      (response:any) => {
-        this.videoList = response;
-      }
-    );
-  }
-
-  delay(ms: number) {
-    return new Promise( resolve => setTimeout(resolve, ms) );
-  }
+export class AppComponent {
 }

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import { RouterModule, Routes } from '@angular/router';
@@ -9,6 +10,7 @@ import { SharedModule } from './shared/shared.module';
 
 const routes: Routes = [
   { path: 'video', loadChildren: () => import('./feature/video/video.module').then( m => m.VideoModule ) },
+  { path: 'tag', loadChildren: () => import('./feature/tag/tag.module').then( m => m.TagModule ) },
   { path: '', redirectTo: 'video/list', pathMatch: 'full' }
 ];
 
@@ -18,6 +20,7 @@ const routes: Routes = [
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     HttpClientModule,
     RouterModule.forRoot(routes),
     SharedModule,

src/app/feature/tag/list/list.component.html

@@ -0,0 +1 @@
+<p>list works!</p>

src/app/feature/tag/list/list.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent {
+
+}

src/app/feature/tag/tag.component.html

@@ -0,0 +1 @@
+<p>tag works!</p>

src/app/feature/tag/tag.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss']
+})
+export class TagComponent {
+
+}

src/app/feature/tag/tag.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TagComponent } from './tag.component';
+import { ListComponent } from './list/list.component';
+import { VideoListComponent } from './video-list/video-list.component';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  { path: ':id/list', component: ListComponent },
+  { path: ':id/video-list', component: VideoListComponent },
+  { path: ':id', component: TagComponent },
+  { path: '', redirectTo: 'tag/list', pathMatch: 'full'},
+]
+
+@NgModule({
+  declarations: [
+    TagComponent,
+    ListComponent,
+    VideoListComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class TagModule { }

src/app/feature/tag/video-list/video-list.component.html

@@ -0,0 +1,43 @@
+<div class="row">
+    <div class="col-sm-2">
+        <button [routerLink]="['/video/list']">Videos</button>
+    </div>
+
+    <div class="col-sm-10">
+        <mat-form-field>
+            <input matInput type="text" (input)="onInputChanged($event)" />
+        </mat-form-field>
+    </div>
+</div>
+
+<div class="row" *ngIf="tagDetails !== null">
+    <h1>{{tagDetails.description}}</h1>
+</div>
+
+<div class="row">
+    <div class="cardContainer">
+        <mat-card
+            class="mat-card"
+            *ngFor="let video of videos"
+            (click)="selectVideo(video)">
+            <mat-card-header>
+                <mat-card-title class="mat-card-title">{{video.title}}</mat-card-title>
+                <mat-card-subtitle>
+                    <a *ngFor="let tag of video.tags"
+                        [routerLink]="['/tag', tag.id, 'video-list']">
+                        {{tag.description}}
+                    </a>
+                </mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content class="mat-card-content">
+                <img [src]="getThumbnailUrl(video)" alt="Thumbnail">
+            </mat-card-content>
+        </mat-card>
+    </div>    
+</div>
+<mat-paginator  [length]="total"
+                [pageSize]="perPage"
+                [pageSizeOptions]="[25, 50, 75]"
+                [hidePageSize]="true"
+                (page)="onPageEvent($event)">
+</mat-paginator>

src/app/feature/tag/video-list/video-list.component.scss

@@ -0,0 +1,65 @@
+button {
+    margin: 1em;
+    width: 100%;
+}
+
+mat-form-field {
+    margin: 1em;
+    width: 100%;
+}
+
+mat-card {
+    margin: 1em;
+}
+
+mat-card:hover {
+    background-color: lightgray;
+}
+
+.mat-card-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.cardContainer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.mat-card {
+    flex-basis: calc(100% - 20px);
+    max-width: calc(100% - 20px);
+    flex: 0 0 calc(100% - 20px);
+    margin: 10px;
+    box-sizing: border-box;
+}
+
+/* For tablet: */
+@media only screen and (min-width: 700px) {
+    .mat-card {
+        flex-basis: calc(50% - 20px);
+        max-width: calc(50% - 20px);
+    }
+}
+
+/* For desktop: */
+@media only screen and (min-width: 1200px) {
+    .mat-card {
+        max-width: calc(33.33% - 20px);
+        flex-basis: calc(33.33% - 20px);
+    }
+}
+
+
+
+.mat-card .mat-card-content {
+    height: 100%;
+}
+
+.mat-card .mat-card-content img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

src/app/feature/tag/video-list/video-list.component.ts

@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject, debounceTime } from 'rxjs';
+import { TagDetails } from 'src/app/model/TagDetails';
+import { VideoListEntry } from 'src/app/model/VideoListEntry';
+import { RequestService } from 'src/app/request.service';
+
+@Component({
+  selector: 'app-video-list',
+  templateUrl: './video-list.component.html',
+  styleUrls: ['./video-list.component.scss']
+})
+export class VideoListComponent {
+  tagId: string;
+  tagDetails: TagDetails|null = null;
+
+  query$ = new Subject<string>();
+  query: string = "";
+  total: number = 0;
+  page: number = 1;
+  perPage: number = 25;
+
+  videos: VideoListEntry[] = [];
+  selectedVideoUrl: string|null = null;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public requestService : RequestService,
+  ) {
+    this.tagId = this.route.snapshot.paramMap.get('id') ?? '';
+
+    this.query$.pipe(
+        debounceTime(300)
+      ).subscribe( query => {
+        this.query = query;
+        this.page = 1;
+        this.readList();
+      } )
+  }
+
+  ngOnInit(): void {
+    this.readDetails();
+    this.readList();
+  }
+
+  onPageEvent(event: PageEvent) {
+    this.page = event.pageIndex + 1;
+    this.perPage = event.pageSize;
+
+    this.readList();
+  }
+
+  onInputChanged(event: Event): void {
+    this.query$.next((event.target as HTMLTextAreaElement).value);
+  }
+
+  selectVideo(entry: VideoListEntry) {
+    this.router.navigate(['/video', entry.id]);
+  }
+
+  readDetails(): void {
+    this.requestService.post(
+      'tag/read-details',
+      {
+        tagId: this.tagId
+      },
+      (response:any) => {
+        this.tagDetails = response;
+      }
+    );
+  }
+
+  readList(): void {
+    this.requestService.post(
+      'tag/read-video-list',
+      {
+        tagId: this.tagId,
+        query: this.query,
+        page: this.page,
+        perPage: this.perPage,
+      },
+      (response:any) => {
+        this.videos = response.items;
+        this.total = response.total;
+      }
+    );
+  }
+
+  getThumbnailUrl(entry: VideoListEntry): string {
+    return 'http://wsl-flo/api/video/thumbnail/' + entry.id;
+  }
+}

src/app/feature/video/list/list.component.html

@@ -1,15 +1,38 @@
-<div class="cardContainer">
+<div class="row">
+
+    <div class="col-sm-10">
+        <mat-form-field>
+            <input matInput type="text" (input)="onInputChanged($event)" />
+        </mat-form-field>
+    </div>
+    <div class="col-sm-2">
+        <button [routerLink]="['/video/upload']">Upload</button>
+    </div>
+</div>
+
+<div class="row">
+    <div class="cardContainer">
         <mat-card
             class="mat-card"
-        *ngFor="let video of videoList"
-        (click)="selectVideo(video)">
+            *ngFor="let video of videos">
             <mat-card-header>
-            <mat-card-title class="mat-card-title">
-                {{video.title}}
-            </mat-card-title>
+                <mat-card-title class="mat-card-title">{{video.title}}</mat-card-title>
+                <mat-card-subtitle>
+                    <a *ngFor="let tag of video.tags"
+                        [routerLink]="['/tag', tag.id, 'video-list']">
+                        {{tag.description}}
+                    </a>
+                </mat-card-subtitle>
             </mat-card-header>
             <mat-card-content class="mat-card-content">
-            <img [src]="getThumbnailUrl(video)" alt="Thumbnail">
+                <img [src]="getThumbnailUrl(video)" alt="Thumbnail" (click)="selectVideo(video)">
             </mat-card-content>
         </mat-card>
+    </div>    
 </div>
+<mat-paginator  [length]="total"
+                [pageSize]="perPage"
+                [pageSizeOptions]="[25, 50, 75]"
+                [hidePageSize]="true"
+                (page)="onPageEvent($event)">
+</mat-paginator>

src/app/feature/video/list/list.component.scss

@@ -1,3 +1,13 @@
+button {
+    margin: 1em;
+    width: 100%;
+}
+
+mat-form-field {
+    margin: 1em;
+    width: 100%;
+}
+
 mat-card {
     margin: 1em;
 }
@@ -16,13 +26,12 @@ mat-card:hover {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    margin: 0 -10px;
 }
 
 .mat-card {
     flex-basis: calc(100% - 20px);
     max-width: calc(100% - 20px);
-    flex: 0 0 calc(33.33% - 20px);
+    flex: 0 0 calc(100% - 20px);
     margin: 10px;
     box-sizing: border-box;
 }

src/app/feature/video/list/list.component.ts

@@ -1,7 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { VideoListEntry } from 'src/app/model/VideoListEntry';
 import { RequestService } from 'src/app/request.service';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { PageEvent } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-list',
@@ -9,35 +12,63 @@ import { RequestService } from 'src/app/request.service';
   styleUrls: ['./list.component.scss']
 })
 export class ListComponent {
-  videoList: VideoListEntry[] = [];
+  query$ = new Subject<string>();
+  query: string = "";
+  total: number = 0;
+  page: number = 1;
+  perPage: number = 25;
+
+  videos: VideoListEntry[] = [];
   selectedVideoUrl: string|null = null;
 
   constructor(
     private router: Router,
     public requestService : RequestService,
   ) {
+    this.query$.pipe(
+        debounceTime(300)
+      ).subscribe( query => {
+        this.query = query;
+        this.page = 1;
+        this.readList();
+      })
   }
 
   ngOnInit(): void {
     this.readList();
   }
 
+  onPageEvent(event: PageEvent) {
+    this.page = event.pageIndex + 1;
+    this.perPage = event.pageSize;
+
+    this.readList();
+  }
+
+  onInputChanged(event: Event): void {
+    this.query$.next((event.target as HTMLTextAreaElement).value);
+  }
+
   selectVideo(entry: VideoListEntry) {
     this.router.navigate(['/video', entry.id]);
   }
 
-  getThumbnailUrl(entry: VideoListEntry): string {
-    return 'http://wsl-flo/api/video/thumbnail/' + entry.id;
-}
-
   readList(): void {
     this.requestService.post(
       'video-list/read-list',
-      {},
+      {
+        query: this.query,
+        page: this.page,
+        perPage: this.perPage,
+      },
       (response:any) => {
-        this.videoList = response;
+        this.videos = response.items;
+        this.total = response.total;
       }
     );
   }
 
+  getThumbnailUrl(entry: VideoListEntry): string {
+    return 'http://wsl-flo/api/video/thumbnail/' + entry.id;
+  }
 }

src/app/feature/video/upload/upload.component.html

@@ -0,0 +1,29 @@
+<div class="row">
+    <button [routerLink]="['/video/list']">Liste</button>
+    <input type="file" multiple (change)="onFileSelected($event)">
+</div>
+<div *ngIf="result !== null" class="row">
+    <h1>{{result.total}} Dateien uploaded</h1>
+    <h2>{{result.succeeded}} erfolgreich</h2>
+    <h2>{{result.failed}} fehlgeschlagen</h2>
+    <h3>Details:</h3>
+
+    <table>
+        <tr>
+            <th>Datei</th>
+            <th>Erfolg</th>
+            <th>Fehler</th>
+        </tr>
+
+        <tr *ngFor="let details of result.details">
+            
+            <td>{{details.file}}</td>
+            <td *ngIf="details.success">Erfolg</td>
+            <td *ngIf="!details.success">Fehlschlag</td>
+            <td>
+                <div *ngIf="!details.success">{{details.error}}</div>
+            </td>
+        </tr>
+
+    </table>
+</div>

src/app/feature/video/upload/upload.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { UploadResult } from 'src/app/model/UploadResult';
+import { RequestService } from 'src/app/request.service';
+
+@Component({
+  selector: 'app-upload',
+  templateUrl: './upload.component.html',
+  styleUrls: ['./upload.component.scss']
+})
+export class UploadComponent {
+
+  result: UploadResult|null = null;
+
+  constructor(
+    private requestService: RequestService,
+  ) {
+  }
+
+  onFileSelected(event: any) {
+    var files: File[] = event.target.files;
+    
+    this.requestService.postFiles(
+      'video-list/upload',
+      files,
+      (response:any) => {
+        this.result = response;
+      }
+    );
+  }
+}

src/app/feature/video/video.component.html

@@ -1,7 +1,7 @@
 <div
     *ngIf="videoDetails !== null">
     
-    <button [routerLink]="['/video/list']">Liste</button>
+    <button [routerLink]="['/video/list']">Videos</button>
 
     <h1>{{videoDetails.title}}</h1>
 

src/app/feature/video/video.module.ts

@@ -4,9 +4,11 @@ import { ListComponent } from './list/list.component';
 import { VideoComponent } from './video.component';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+import { UploadComponent } from './upload/upload.component';
 
 const routes: Routes = [
   { path: 'list', component: ListComponent },
+  { path: 'upload', component: UploadComponent },
   { path: ':id', component: VideoComponent },
   { path: '', redirectTo: 'video/list', pathMatch: 'full'},
 ]
@@ -14,7 +16,8 @@ const routes: Routes = [
 @NgModule({
   declarations: [
     ListComponent,
-    VideoComponent
+    VideoComponent,
+    UploadComponent
   ],
   imports: [
     CommonModule,

src/app/model/TagAliasListEntry.ts

@@ -0,0 +1,5 @@
+
+export interface TagAliasListEntry {
+    id: string;
+    description: string;
+}

src/app/model/TagDetails.ts

@@ -0,0 +1,7 @@
+import { TagAliasListEntry } from "./TagAliasListEntry";
+
+export interface TagDetails {
+    id: string;
+    description: string;
+    aliases: TagAliasListEntry[];
+}

src/app/model/TagListEntry.ts

@@ -0,0 +1,5 @@
+
+export interface TagListEntry {
+    id: string;
+    description: string;
+}

src/app/model/UploadResult.ts

@@ -0,0 +1,8 @@
+import { UploadResultDetails } from "./UploadResultDetails";
+
+export interface UploadResult {
+    total: number;
+    failed: number;
+    succeeded: number;
+    details: UploadResultDetails[];
+}

src/app/model/UploadResultDetails.ts

@@ -0,0 +1,7 @@
+
+export interface UploadResultDetails {
+    file: string;
+    success: boolean;
+    id: string|null;
+    error: string|null;
+}

src/app/model/VideoListEntry.ts

@@ -1,5 +1,7 @@
+import { TagListEntry } from "./TagListEntry";
 
 export interface VideoListEntry {
     title: string;
     id: string;
+    tags: TagListEntry[];
 }

src/app/request.service.ts

@@ -28,6 +28,28 @@ export class RequestService {
     );
   }
 
+  postFiles(apiPath: string, files: File[], fct: Function) {
+    if (!files || files.length === 0) {
+      throw 'Need to select at least one file';
+    }
+  
+    const formData = new FormData();
+    
+    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
+      formData.append('file' + fileIndex, files[fileIndex]);
+    }
+  
+    let url = this.obtainUrl(apiPath);
+    let observable = this.http.post<any>(url, formData).subscribe(
+      (answer: any) => {
+        fct(answer);
+      },
+      (error: any) => {
+        this.handleError(error);
+      }
+    );
+  }
+  
   get(apiPath: string, body: any, fct: Function) 
   {
     let url = this.obtainUrl(apiPath);

src/styles.scss

@@ -4,7 +4,9 @@ body {
 }
 
 app-root {
+    display:inline-block;
     height: 100%;
+    width: 100%;
 }
 
 .flex-container {