"{{ content }}"
+
+
+ tag works!
+
+
+
++ {{ tagDetails.description }} +
+ +-
+
- + {{ alias.description }} + +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{{tagDetails.description}}
-
-
-
-
-
- {{video.title}}
-
-
- {{tag.description}}
-
-
-
-
- ![Thumbnail]()
-
-
-
-
+
-
\ No newline at end of file
diff --git a/src/app/feature/video/list/list.component.scss b/src/app/feature/video/list/list.component.scss
index 6698372..e69de29 100644
--- a/src/app/feature/video/list/list.component.scss
+++ b/src/app/feature/video/list/list.component.scss
@@ -1,65 +0,0 @@
-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;
-}
\ No newline at end of file
diff --git a/src/app/feature/video/list/list.component.ts b/src/app/feature/video/list/list.component.ts
index 34d8d02..8041a12 100644
--- a/src/app/feature/video/list/list.component.ts
+++ b/src/app/feature/video/list/list.component.ts
@@ -1,56 +1,60 @@
-import { Component, Input } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component } from '@angular/core';
+import { Subject, debounceTime } from 'rxjs';
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';
+import { ColumnDefinition } from 'src/app/shared/components/table/table.component';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
- styleUrls: ['./list.component.scss']
+ styleUrls: ['./list.component.scss'],
})
export class ListComponent {
query$ = new Subject();
- query: string = "";
+ query: string = '';
+ onlyTagless: boolean = false;
+ videos: VideoListEntry[] = [];
total: number = 0;
page: number = 1;
- perPage: number = 25;
+ perPage: number = 180;
+ videoListColumns: ColumnDefinition[] = [
+ {
+ header: 'Titel',
+ columnFunction: (item: VideoListEntry) => {
+ return item.title;
+ },
+ routerLink: (item: VideoListEntry) => {
+ return ['/video', item.id];
+ },
+ },
+ {
+ header: 'Tags',
+ columnFunction: (item: VideoListEntry) => {
+ return item.tags.map((tag) => tag.description);
+ },
+ columnCss: 'text-center',
+ },
+ ];
- 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();
+ constructor(public requestService: RequestService) {
+ this.query$.pipe(debounceTime(300)).subscribe((query) => {
+ this.query = query;
+ this.page = 1;
+ this.readList();
+ });
}
onInputChanged(event: Event): void {
this.query$.next((event.target as HTMLTextAreaElement).value);
}
- selectVideo(entry: VideoListEntry) {
- this.router.navigate(['/video', entry.id]);
+ onPageChanged(newPage: number) {
+ this.page = newPage;
+ this.readList();
+ }
+
+ ngOnInit(): void {
+ this.readList();
}
readList(): void {
@@ -60,15 +64,12 @@ export class ListComponent {
query: this.query,
page: this.page,
perPage: this.perPage,
+ onlyTagless: this.onlyTagless,
},
- (response:any) => {
- this.videos = response.items;
+ (response: any) => {
this.total = response.total;
+ this.videos = response.items;
}
);
}
-
- getThumbnailUrl(entry: VideoListEntry): string {
- return 'http://wsl-flo/api/video/thumbnail/' + entry.id;
- }
}
diff --git a/src/app/feature/video/upload/upload.component.html b/src/app/feature/video/upload/upload.component.html
index 805e035..25f314f 100644
--- a/src/app/feature/video/upload/upload.component.html
+++ b/src/app/feature/video/upload/upload.component.html
@@ -1,29 +1,62 @@
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{video.title}}
-
-
- {{tag.description}}
-
-
-
-
- ![Thumbnail]()
-
-
-
+
+
-
-
+
+
-
-
-
+ {{ result.file.name }}
+
+
+
+
+
+
+
diff --git a/src/app/feature/video/upload/upload.component.ts b/src/app/feature/video/upload/upload.component.ts
index 2453813..7faf2e9 100644
--- a/src/app/feature/video/upload/upload.component.ts
+++ b/src/app/feature/video/upload/upload.component.ts
@@ -2,29 +2,51 @@ import { Component } from '@angular/core';
import { UploadResult } from 'src/app/model/UploadResult';
import { RequestService } from 'src/app/request.service';
+interface UploadFileModel {
+ file: File;
+ result: UploadResult | undefined;
+ status: string;
+}
+
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
- styleUrls: ['./upload.component.scss']
+ styleUrls: ['./upload.component.scss'],
})
export class UploadComponent {
+ uploadResults: UploadFileModel[] = [];
- result: UploadResult|null = null;
-
- constructor(
- private requestService: RequestService,
- ) {
- }
+ 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;
+ var files: File[] = Array.from(event.target.files);
+
+ files.forEach((file) => {
+ var existingItem = this.uploadResults.find(
+ (item) => item.file.name === file.name && item.file.size === file.size
+ );
+ if (existingItem === undefined)
+ this.uploadResults.push({
+ file,
+ result: undefined,
+ status: 'initialized',
+ });
+ else if (existingItem.status === 'failed')
+ existingItem.status = 'initialized';
+ });
+
+ this.uploadResults.forEach(async (item) => {
+ if (item.status === 'initialized') {
+ item.status = 'processing';
+ this.requestService.postFiles(
+ 'video-list/upload',
+ [item.file],
+ (response: UploadResult) => {
+ item.result = response;
+ item.status = response.succeeded > 0 ? 'success' : 'failed';
+ }
+ );
}
- );
+ });
}
}
diff --git a/src/app/feature/video/video.component.html b/src/app/feature/video/video.component.html
index 159c2c8..806d4bb 100644
--- a/src/app/feature/video/video.component.html
+++ b/src/app/feature/video/video.component.html
@@ -1,15 +1,113 @@
-{{result.total}} Dateien uploaded
-{{result.succeeded}} erfolgreich
-{{result.failed}} fehlgeschlagen
-Details:
-| Datei | -Erfolg | -Fehler | -
|---|
| Datei | +Größe | +Status | +|
|---|---|---|---|
| {{details.file}} | -Erfolg | -Fehlschlag | -
- {{details.error}}
- |
-
+ {{ result.file.size | number : "1.0-0" }} Bytes
+
+
+ {{ result.file.size / 1024 | number : "1.0-0" }} KB
+
+
+ {{ result.file.size / (1024 * 1024) | number : "1.0-0" }} MB
+
+
+ {{ result.file.size / (1024 * 1024 * 1024) | number : "1.0-0" }} GB
+
+
+ Video
+
+ success without id
+
+
+
+ {{ result.result.details[0].error }}
+
+
+ {{ result.status }}
+
+
+ {{ result.status }}
+
+
-
-
-
- ();
+ @Input() caption: string|null = null;
+
+}
diff --git a/src/app/shared/components/image-presenter/image-presenter.component.html b/src/app/shared/components/image-presenter/image-presenter.component.html
new file mode 100644
index 0000000..7ed5002
--- /dev/null
+++ b/src/app/shared/components/image-presenter/image-presenter.component.html
@@ -0,0 +1,13 @@
+();
+ @Input() page: number = 1;
+ @Input() perPage: number = 10;
+ @Input() total: number | null = null;
+ items: PaginatorItem[] = [];
+
+ ngOnChanges(changes: SimpleChanges): void {
+ this.calculateItems();
+ }
+
+ protected setActivePage(newPage: number | null) {
+ if (newPage === null) {
+ return;
+ }
+ if (newPage === -1) {
+ newPage = this.page - 1;
+ }
+ if (newPage === -2) {
+ newPage = this.page + 1;
+ }
+
+ if (newPage <= 0 || newPage > this.getMaxPages()) return;
+
+ this.page = newPage;
+ this.pageChange.emit(newPage);
+ this.calculateItems();
+ }
+
+ private calculateItems(): void {
+ this.items = [];
+
+ let first = 1;
+ let last = this.getMaxPages();
+ let rangeFirst = this.page - 1;
+ let rangeLast = this.page + 1;
+
+ if (this.page === 1) {
+ rangeFirst = 1;
+ rangeLast = last < 3 ? last : 3;
+ }
+
+ if (this.page === last) {
+ rangeFirst = Math.max(1, last - 2);
+ rangeLast = last;
+ }
+
+ if (rangeFirst > 1) this.items.push({ page: first });
+ if (rangeFirst > 2) this.items.push({ page: null });
+
+ for (let index = rangeFirst; index <= rangeLast; index++) {
+ this.items.push({ page: index });
+ }
+
+ if (rangeLast < last - 1) this.items.push({ page: null });
+ if (rangeLast < last) this.items.push({ page: last });
+ }
+
+ private getMaxPages(): number {
+ return Math.ceil((this.total ?? 0) / this.perPage);
+ }
+}
diff --git a/src/app/shared/components/tab-control/tab-control.component.html b/src/app/shared/components/tab-control/tab-control.component.html
new file mode 100644
index 0000000..f6b074f
--- /dev/null
+++ b/src/app/shared/components/tab-control/tab-control.component.html
@@ -0,0 +1,20 @@
+();
+
+ @ContentChildren('tabContent') tabContents!: QueryList;
+
+ public activeIndex = 0;
+
+ public ngOnChanges() {
+ this.setActiveTab(null);
+ }
+
+ public setActiveTab(tab: TabItem|null) {
+ if (tab !== null) {
+ this.activeTabId = tab.id;
+ this.activeTabIdChange.emit(this.activeTabId);
+ }
+
+ this.activeIndex = this.tabs.findIndex((i) => i.id === this.activeTabId);
+ }
+}
diff --git a/src/app/shared/components/table/table.component.html b/src/app/shared/components/table/table.component.html
new file mode 100644
index 0000000..f94ab58
--- /dev/null
+++ b/src/app/shared/components/table/table.component.html
@@ -0,0 +1,54 @@
+
+
+
diff --git a/src/app/shared/components/table/table.component.scss b/src/app/shared/components/table/table.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/table/table.component.ts b/src/app/shared/components/table/table.component.ts
new file mode 100644
index 0000000..9e426a2
--- /dev/null
+++ b/src/app/shared/components/table/table.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+
+export interface ColumnDefinition {
+ header: string;
+ columnContent?: string | undefined;
+ columnFunction?: Function | undefined;
+ routerLink?: Function | undefined;
+ headerCss?: string | undefined;
+ columnCss?: string | undefined;
+}
+
+@Component({
+ selector: 'shared-table',
+ templateUrl: './table.component.html',
+ styleUrls: ['./table.component.scss'],
+})
+export class TableComponent {
+ @Input() foreground: string = 'text-white';
+ @Input() background: string = 'bg-zinc-800';
+ @Input() backgroundColumn: string = 'bg-zinc-800';
+ @Input() backgroundColumnAlternate: string = 'bg-zinc-700';
+ @Input() border: string = 'border-zinc-600';
+
+ @Input() items: any[] = [];
+ @Input() columns: ColumnDefinition[] = [];
+
+ isBoolean(obje: any): boolean {
+ console.log(obje);
+ return typeof obje === 'boolean';
+ }
+}
diff --git a/src/app/shared/components/tag-selector/tag-selector.component.html b/src/app/shared/components/tag-selector/tag-selector.component.html
new file mode 100644
index 0000000..eede1d8
--- /dev/null
+++ b/src/app/shared/components/tag-selector/tag-selector.component.html
@@ -0,0 +1,17 @@
+();
+ query: string = '';
+ tags: TagListEntry[] = [];
+
+ constructor(
+ public requestService: RequestService,
+ public dialogRef: MatDialogRef
+ ) {
+ this.query$.pipe(debounceTime(300)).subscribe((query) => {
+ this.query = query;
+ this.readList();
+ });
+ }
+
+ ngOnInit(): void {
+ this.readList();
+ }
+
+ onInputChanged(event: Event): void {
+ this.query$.next((event.target as HTMLTextAreaElement).value);
+ }
+
+ onClickTag(tag: TagListEntry) {
+ this.dialogRef.close(tag);
+ }
+
+ onClose() {
+ this.dialogRef.close(undefined);
+ }
+
+ readList(): void {
+ this.requestService.post(
+ 'tag-list/read-list',
+ {
+ query: this.query,
+ },
+ (response: any) => {
+ this.tags = response.items;
+ }
+ );
+ }
+}
diff --git a/src/app/shared/components/video-list/video-list.component.html b/src/app/shared/components/video-list/video-list.component.html
new file mode 100644
index 0000000..48ec408
--- /dev/null
+++ b/src/app/shared/components/video-list/video-list.component.html
@@ -0,0 +1,42 @@
+
+
diff --git a/src/app/shared/components/video-list/video-list.component.scss b/src/app/shared/components/video-list/video-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/video-list/video-list.component.ts b/src/app/shared/components/video-list/video-list.component.ts
new file mode 100644
index 0000000..b4617e9
--- /dev/null
+++ b/src/app/shared/components/video-list/video-list.component.ts
@@ -0,0 +1,67 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subject, debounceTime } from 'rxjs';
+import { VideoListEntry } from 'src/app/model/VideoListEntry';
+import { RequestService } from 'src/app/request.service';
+
+export interface OnReadListModel {
+ page: number;
+ perPage: number;
+ query: string;
+}
+
+@Component({
+ selector: 'shared-video-list',
+ templateUrl: './video-list.component.html',
+ styleUrls: ['./video-list.component.scss'],
+})
+export class VideoListComponent {
+ query$ = new Subject();
+ query: string = '';
+ @Input() total: number = 0;
+ @Input() page: number = 1;
+ @Input() perPage: number = 36;
+ @Input() videos: VideoListEntry[] = [];
+ @Output() onReadList: EventEmitter = new EventEmitter();
+
+ 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();
+ }
+
+ onPageChanged(newPage: number) {
+ this.page = newPage;
+
+ this.readList();
+ }
+
+ onInputChanged(event: Event): void {
+ this.query$.next((event.target as HTMLTextAreaElement).value);
+ }
+
+ selectVideo(entry: VideoListEntry) {
+ this.router.navigate(['/video', entry.id]);
+ }
+
+ readList(): void {
+ this.onReadList.emit({
+ query: this.query,
+ page: this.page,
+ perPage: this.perPage,
+ });
+ }
+
+ getThumbnailUrl(entry: VideoListEntry): string {
+ let hostString = window.location.host;
+ let protocol = window.location.protocol;
+ let host = protocol + '//' + hostString + '/api/';
+ return host + 'video/thumbnail/' + entry.id;
+ }
+}
diff --git a/src/app/shared/components/video-presenter/video-presenter.component.html b/src/app/shared/components/video-presenter/video-presenter.component.html
new file mode 100644
index 0000000..f7c2416
--- /dev/null
+++ b/src/app/shared/components/video-presenter/video-presenter.component.html
@@ -0,0 +1,15 @@
+mytube
- MyTube
+
{{videoDetails.title}}
- - - +
+
+
+{{ videoDetails.title }}
+
+
diff --git a/src/app/feature/video/video.component.ts b/src/app/feature/video/video.component.ts
index 4182769..bf8010e 100644
--- a/src/app/feature/video/video.component.ts
+++ b/src/app/feature/video/video.component.ts
@@ -1,39 +1,113 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TagListEntry } from 'src/app/model/TagListEntry';
import { VideoDetails } from 'src/app/model/VideoDetails';
import { RequestService } from 'src/app/request.service';
+import { TagSelectorComponent } from 'src/app/shared/components/tag-selector/tag-selector.component';
@Component({
selector: 'app-video',
templateUrl: './video.component.html',
- styleUrls: ['./video.component.scss']
+ styleUrls: ['./video.component.scss'],
})
export class VideoComponent {
+ @ViewChild('myVideo') videoElement: ElementRef | undefined;
+
+ host: string;
videoId: string;
- videoUrl: string|null = null;
- videoDetails: VideoDetails|null = null;
+ thumbnailVersion: number;
+ videoDetails: VideoDetails | undefined;
+ currentTimestamp: number | undefined;
constructor(
- private route: ActivatedRoute,
- private requestService : RequestService,
+ public router: Router,
+ public route: ActivatedRoute,
+ public requestService: RequestService,
+ public dialog: MatDialog
) {
this.videoId = this.route.snapshot.paramMap.get('id') ?? '';
- this.videoUrl = "http://wsl-flo/api/video/stream/" + this.videoId;
+ let hostString = window.location.host;
+ let protocol = window.location.protocol;
+ this.host = protocol + '//' + hostString + '/api/';
+ this.thumbnailVersion = 0;
}
ngOnInit(): void {
this.readDetails();
}
+ updateTimestamp(): void {
+ if (this.videoElement === undefined) {
+ return;
+ }
+ const video: HTMLVideoElement = this.videoElement.nativeElement;
+ this.currentTimestamp = video.currentTime;
+ }
+
readDetails(): void {
this.requestService.post(
'video/read-details',
{
- videoId: this.videoId
+ videoId: this.videoId,
},
- (response:any) => {
+ (response: any) => {
this.videoDetails = response;
}
);
}
+
+ setThumbnail(): void {
+ this.requestService.post(
+ 'video/set-thumbnail',
+ {
+ videoId: this.videoId,
+ timestamp: this.currentTimestamp,
+ },
+ (response: any) => {
+ this.thumbnailVersion++;
+ }
+ );
+ }
+
+ addTag(): void {
+ let dialogRef = this.dialog.open(TagSelectorComponent, {
+ panelClass: 'bg-zinc-900',
+ maxHeight: '400px',
+ width: '600px',
+ });
+
+ dialogRef.afterClosed().subscribe((result) => {
+ console.log(result);
+
+ if (result === undefined) return;
+ this.videoDetails?.tags.push(result);
+ });
+ }
+
+ update(): void {
+ this.requestService.post(
+ 'video/update-details',
+ {
+ videoId: this.videoId,
+ title: this.videoDetails?.title,
+ tagIds: this.videoDetails?.tags.map((item) => item.id),
+ },
+ (response: any) => {
+ this.readDetails();
+ }
+ );
+ }
+
+ delete(): void {
+ this.requestService.post(
+ 'video/delete',
+ {
+ videoId: this.videoId,
+ },
+ (response: any) => {
+ this.router.navigate(['/video/list']);
+ }
+ );
+ }
}
diff --git a/src/app/feature/video/video.module.ts b/src/app/feature/video/video.module.ts
index 8b5647a..22323b9 100644
--- a/src/app/feature/video/video.module.ts
+++ b/src/app/feature/video/video.module.ts
@@ -1,28 +1,19 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-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';
+import { ListComponent } from './list/list.component';
const routes: Routes = [
- { path: 'list', component: ListComponent },
{ path: 'upload', component: UploadComponent },
+ { path: 'list', component: ListComponent },
{ path: ':id', component: VideoComponent },
- { path: '', redirectTo: 'video/list', pathMatch: 'full'},
-]
+];
@NgModule({
- declarations: [
- ListComponent,
- VideoComponent,
- UploadComponent
- ],
- imports: [
- CommonModule,
- SharedModule,
- RouterModule.forChild(routes)
- ]
+ declarations: [VideoComponent, UploadComponent, ListComponent],
+ imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
})
-export class VideoModule { }
+export class VideoModule {}
diff --git a/src/app/model/TagListEntry.ts b/src/app/model/TagListEntry.ts
index 9e640fc..580a4ac 100644
--- a/src/app/model/TagListEntry.ts
+++ b/src/app/model/TagListEntry.ts
@@ -1,5 +1,5 @@
-
export interface TagListEntry {
- id: string;
- description: string;
-}
\ No newline at end of file
+ id: string;
+ description: string;
+ videoCount?: number;
+}
diff --git a/src/app/model/VideoDetails.ts b/src/app/model/VideoDetails.ts
index c0569ef..f8941a7 100644
--- a/src/app/model/VideoDetails.ts
+++ b/src/app/model/VideoDetails.ts
@@ -1,5 +1,8 @@
+import { TagListEntry } from "./TagListEntry";
export interface VideoDetails {
title: string;
id: string;
+ duration: string;
+ tags: TagListEntry[];
}
\ No newline at end of file
diff --git a/src/app/model/VideoListEntry.ts b/src/app/model/VideoListEntry.ts
index 8dcc34d..e0667dc 100644
--- a/src/app/model/VideoListEntry.ts
+++ b/src/app/model/VideoListEntry.ts
@@ -1,7 +1,8 @@
-import { TagListEntry } from "./TagListEntry";
+import { TagListEntry } from './TagListEntry';
export interface VideoListEntry {
- title: string;
- id: string;
- tags: TagListEntry[];
-}
\ No newline at end of file
+ title: string;
+ id: string;
+ duration: string;
+ tags: TagListEntry[];
+}
diff --git a/src/app/shared/components/card/card.component.html b/src/app/shared/components/card/card.component.html
new file mode 100644
index 0000000..02ae685
--- /dev/null
+++ b/src/app/shared/components/card/card.component.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+ Titel:
+
+
+
+
+
+
+ Länge:
+
+
+
+
+ ![Thumbnail]()
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/shared/components/card/card.component.scss b/src/app/shared/components/card/card.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/card/card.component.ts b/src/app/shared/components/card/card.component.ts
new file mode 100644
index 0000000..cde549d
--- /dev/null
+++ b/src/app/shared/components/card/card.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'shared-card',
+ templateUrl: './card.component.html',
+ styleUrls: ['./card.component.scss'],
+})
+export class CardComponent {
+ @Input() header: string | null = null;
+ @Input() icon: string | null = null;
+ @Input() subHeader: string | null = null;
+ @Input() content: string | null = null;
+}
diff --git a/src/app/shared/components/form/form.component.html b/src/app/shared/components/form/form.component.html
new file mode 100644
index 0000000..f500cd5
--- /dev/null
+++ b/src/app/shared/components/form/form.component.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ ![]()
+
+
+ {{ header }}
+
+
+ {{ subHeader }}
+
+
+
+
+ {{ caption }}
+
+
+
+
diff --git a/src/app/shared/components/form/form.component.scss b/src/app/shared/components/form/form.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/form/form.component.ts b/src/app/shared/components/form/form.component.ts
new file mode 100644
index 0000000..7a0e704
--- /dev/null
+++ b/src/app/shared/components/form/form.component.ts
@@ -0,0 +1,12 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'shared-form',
+ templateUrl: './form.component.html',
+ styleUrls: ['./form.component.scss']
+})
+export class FormComponent {
+ @Output() submit = new EventEmitter
+
+
+
+
+
+
+ ![]()
+
+
\ No newline at end of file
diff --git a/src/app/shared/components/image-presenter/image-presenter.component.scss b/src/app/shared/components/image-presenter/image-presenter.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/image-presenter/image-presenter.component.ts b/src/app/shared/components/image-presenter/image-presenter.component.ts
new file mode 100644
index 0000000..6ce8ea5
--- /dev/null
+++ b/src/app/shared/components/image-presenter/image-presenter.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'shared-image-presenter',
+ templateUrl: './image-presenter.component.html',
+ styleUrls: ['./image-presenter.component.scss']
+})
+export class ImagePresenterComponent {
+ @Input() header: string|null = null;
+ @Input() alt: string|null = null;
+ @Input() source = '';
+}
diff --git a/src/app/shared/components/paginator/paginator.component.html b/src/app/shared/components/paginator/paginator.component.html
new file mode 100644
index 0000000..8961ffe
--- /dev/null
+++ b/src/app/shared/components/paginator/paginator.component.html
@@ -0,0 +1,69 @@
+
diff --git a/src/app/shared/components/paginator/paginator.component.scss b/src/app/shared/components/paginator/paginator.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/paginator/paginator.component.ts b/src/app/shared/components/paginator/paginator.component.ts
new file mode 100644
index 0000000..93b4529
--- /dev/null
+++ b/src/app/shared/components/paginator/paginator.component.ts
@@ -0,0 +1,80 @@
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ Output,
+ SimpleChanges,
+} from '@angular/core';
+
+export interface PaginatorItem {
+ page: number | null;
+}
+
+@Component({
+ selector: 'shared-paginator',
+ templateUrl: './paginator.component.html',
+ styleUrls: ['./paginator.component.scss'],
+})
+export class PaginatorComponent implements OnChanges {
+ @Output() pageChange = new EventEmitter
+ {{header}}
+
+
+
+
+
+-
+
- + + +
+
diff --git a/src/app/shared/components/tab-control/tab-control.component.scss b/src/app/shared/components/tab-control/tab-control.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/tab-control/tab-control.component.ts b/src/app/shared/components/tab-control/tab-control.component.ts
new file mode 100644
index 0000000..a4a0552
--- /dev/null
+++ b/src/app/shared/components/tab-control/tab-control.component.ts
@@ -0,0 +1,30 @@
+import { Component, ContentChildren, EventEmitter, Input, Output, QueryList } from '@angular/core';
+import { TabItem } from '../../models/TabItem';
+
+@Component({
+ selector: 'shared-tab-control',
+ templateUrl: './tab-control.component.html',
+ styleUrls: ['./tab-control.component.scss']
+})
+export class TabControlComponent {
+ @Input() public tabs: TabItem[] = [];
+ @Input() public activeTabId: string = '';
+ @Output() public activeTabIdChange = new EventEmitter| + + | +
|---|
|
+
+
+
+
+
+
+
+
+
+
+ {{ column.columnContent }}
+
+ |
+
+
diff --git a/src/app/shared/components/tag-selector/tag-selector.component.scss b/src/app/shared/components/tag-selector/tag-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/tag-selector/tag-selector.component.ts b/src/app/shared/components/tag-selector/tag-selector.component.ts
new file mode 100644
index 0000000..925caad
--- /dev/null
+++ b/src/app/shared/components/tag-selector/tag-selector.component.ts
@@ -0,0 +1,55 @@
+import { Component, Inject } from '@angular/core';
+import { ColumnDefinition } from '../table/table.component';
+import { Subject, debounceTime } from 'rxjs';
+import { TagListEntry } from 'src/app/model/TagListEntry';
+import { RequestService } from 'src/app/request.service';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+ selector: 'shared-tag-selector',
+ templateUrl: './tag-selector.component.html',
+ styleUrls: ['./tag-selector.component.scss'],
+})
+export class TagSelectorComponent {
+ query$ = new Subject
+
+
+
+ + {{ tag.description }} +
+
+
+
+
+
+
+
+
+ ![Thumbnail]()
+
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/components/video-presenter/video-presenter.component.scss b/src/app/shared/components/video-presenter/video-presenter.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/video-presenter/video-presenter.component.ts b/src/app/shared/components/video-presenter/video-presenter.component.ts
new file mode 100644
index 0000000..814896e
--- /dev/null
+++ b/src/app/shared/components/video-presenter/video-presenter.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'shared-video-presenter',
+ templateUrl: './video-presenter.component.html',
+ styleUrls: ['./video-presenter.component.scss']
+})
+export class VideoPresenterComponent {
+ @Input() header: string|null = null;
+ @Input() source = '';
+}
diff --git a/src/app/shared/models/TabItem.ts b/src/app/shared/models/TabItem.ts
new file mode 100644
index 0000000..6200d6d
--- /dev/null
+++ b/src/app/shared/models/TabItem.ts
@@ -0,0 +1,4 @@
+export interface TabItem {
+ id: string;
+ title: string;
+}
\ No newline at end of file
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 76667c7..08879f5 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,6 +1,13 @@
import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
-
+import { FormComponent } from './components/form/form.component';
+import { CardComponent } from './components/card/card.component';
+import { PaginatorComponent } from './components/paginator/paginator.component';
+import { TabControlComponent } from './components/tab-control/tab-control.component';
+import { VideoPresenterComponent } from './components/video-presenter/video-presenter.component';
+import { ImagePresenterComponent } from './components/image-presenter/image-presenter.component';
+import { TableComponent } from './components/table/table.component';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
@@ -9,7 +16,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
-import { MatGridListModule } from '@angular/material/grid-list'
+import { MatGridListModule } from '@angular/material/grid-list';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
@@ -22,14 +29,58 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTableModule } from '@angular/material/table';
-
-
-
+import { MatChipsModule } from '@angular/material/chips';
+import { VideoListComponent } from './components/video-list/video-list.component';
+import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
@NgModule({
declarations: [
+ ImagePresenterComponent,
+ VideoPresenterComponent,
+ CardComponent,
+ TabControlComponent,
+ PaginatorComponent,
+ FormComponent,
+ TableComponent,
+ VideoListComponent,
+ TagSelectorComponent,
+ ],
+ exports: [
+ ImagePresenterComponent,
+ VideoPresenterComponent,
+ CardComponent,
+ TabControlComponent,
+ PaginatorComponent,
+ FormComponent,
+ TableComponent,
+ VideoListComponent,
+ TagSelectorComponent,
+
+ MatSlideToggleModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatGridListModule,
+ MatFormFieldModule,
+ FormsModule,
+ MatExpansionModule,
+ MatMenuModule,
+ MatListModule,
+ MatToolbarModule,
+ MatSidenavModule,
+ MatInputModule,
+ MatSelectModule,
+ MatDividerModule,
+ MatDialogModule,
+ MatSnackBarModule,
+ MatPaginatorModule,
+ MatCheckboxModule,
+ MatTabsModule,
+ MatTableModule,
+ MatChipsModule,
],
imports: [
+ RouterModule,
CommonModule,
MatSlideToggleModule,
MatCardModule,
@@ -51,32 +102,8 @@ import { MatTableModule } from '@angular/material/table';
MatPaginatorModule,
MatCheckboxModule,
MatTabsModule,
- MatTableModule
+ MatTableModule,
+ MatChipsModule,
],
- exports: [
- // to be replaced
- MatSlideToggleModule,
- MatCardModule,
- MatButtonModule,
- MatIconModule,
- MatGridListModule,
- MatFormFieldModule,
- FormsModule,
- MatExpansionModule,
- MatMenuModule,
- MatListModule,
- MatToolbarModule,
- MatSidenavModule,
- MatInputModule,
- MatSelectModule,
- MatDividerModule,
- MatDialogModule,
- MatSnackBarModule,
- MatPaginatorModule,
- MatCheckboxModule,
- MatTabsModule,
- MatTableModule
-
- ]
})
-export class SharedModule { }
\ No newline at end of file
+export class SharedModule {}
diff --git a/src/index.html b/src/index.html
index d9531f3..016a8be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,17 +1,15 @@
-
+
-
-
-
+ {{header}}
+
+
+
+