From 450be793d09318d0f17a1695e2897ef6dcbb40c9 Mon Sep 17 00:00:00 2001
From: Flo <florain_feistel@outlook.de>
Date: Mon, 5 Aug 2024 08:26:09 +0000
Subject: [PATCH] video card and icon

---
 .../video-card/video-card.component.html      |  38 ++++++++++++++++++
 .../video-card/video-card.component.scss      |   0
 .../video-card/video-card.component.ts        |  18 +++++++++
 .../video-list/video-list.component.html      |  24 ++---------
 src/app/shared/shared.module.ts               |   3 ++
 src/assets/icon.ico                           | Bin 0 -> 2296 bytes
 src/index.html                                |   2 +-
 7 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 src/app/shared/components/video-card/video-card.component.html
 create mode 100644 src/app/shared/components/video-card/video-card.component.scss
 create mode 100644 src/app/shared/components/video-card/video-card.component.ts
 create mode 100644 src/assets/icon.ico

diff --git a/src/app/shared/components/video-card/video-card.component.html b/src/app/shared/components/video-card/video-card.component.html
new file mode 100644
index 0000000..865bfe6
--- /dev/null
+++ b/src/app/shared/components/video-card/video-card.component.html
@@ -0,0 +1,38 @@
+<div
+  *ngIf="video !== null"
+  id="card"
+  class="grow py-2 px-3 my-2 rounded-xl shadow-lg border border-gray-100 dark:bg-zinc-800 dark:border-zinc-900 text-black dark:text-white"
+>
+  <div id="header" class="mb-2">
+    <div class="flex flex-row">
+      <div class="my-auto text-xl font-medium truncate">
+        {{ video.title }}
+      </div>
+    </div>
+  </div>
+
+  <div id="content" class="mb-2">
+    <img
+      [src]="'/api/video/thumbnail/' + video.id"
+      alt="Thumbnail"
+      class="m-auto h-80 w-full"
+      (click)="onClick()"
+    />
+  </div>
+
+  <div id="footer">
+    <div class="flex flex-row">
+      <div class="basis-full h-8">
+        <a [routerLink]="['/tag', tag.id]" *ngFor="let tag of video.tags"
+          ><span
+            class="text-sm font-medium me-2 px-2.5 py-0.5 rounded bg-zinc-700 hover:bg-zinc-900"
+            >{{ tag.description }}</span
+          ></a
+        >
+      </div>
+      <div class="basis-auto text-slate-500 dark:text-slate-400">
+        {{ video.duration }}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/components/video-card/video-card.component.scss b/src/app/shared/components/video-card/video-card.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/video-card/video-card.component.ts b/src/app/shared/components/video-card/video-card.component.ts
new file mode 100644
index 0000000..0605f06
--- /dev/null
+++ b/src/app/shared/components/video-card/video-card.component.ts
@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { VideoListEntry } from 'src/app/model/VideoListEntry';
+
+@Component({
+  selector: 'shared-video-card',
+  templateUrl: './video-card.component.html',
+  styleUrls: ['./video-card.component.scss'],
+})
+export class VideoCardComponent {
+  @Input() video: VideoListEntry | null = null;
+  @Output() clicked = new EventEmitter<VideoListEntry>();
+
+  onClick(): void {
+    if (this.video === null) return;
+
+    this.clicked.emit(this.video);
+  }
+}
diff --git a/src/app/shared/components/video-list/video-list.component.html b/src/app/shared/components/video-list/video-list.component.html
index 48ec408..5ad79c7 100644
--- a/src/app/shared/components/video-list/video-list.component.html
+++ b/src/app/shared/components/video-list/video-list.component.html
@@ -10,28 +10,12 @@
   id="card-container"
   class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 px-5"
 >
-  <shared-card
+  <shared-video-card
     *ngFor="let video of videos; index as currentIndex"
     class="w-full"
-    [header]="video.title"
-    [subHeader]="video.duration"
-  >
-    <div class="h-8 my-auto">
-      <a [routerLink]="['/tag', tag.id]" *ngFor="let tag of video.tags"
-        ><span
-          class="text-sm font-medium me-2 px-2.5 py-0.5 rounded bg-zinc-700 hover:bg-zinc-900"
-          >{{ tag.description }}</span
-        ></a
-      >
-    </div>
-
-    <img
-      [src]="getThumbnailUrl(video)"
-      alt="Thumbnail"
-      (click)="selectVideo(video)"
-      class="m-auto h-80"
-    />
-  </shared-card>
+    [video]="video"
+    (clicked)="selectVideo(video)"
+  />
 </div>
 <shared-paginator
   (pageChange)="onPageChanged($event)"
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 08879f5..e074332 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -31,6 +31,7 @@ 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 { VideoCardComponent } from './components/video-card/video-card.component';
 import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
 
 @NgModule({
@@ -43,6 +44,7 @@ import { TagSelectorComponent } from './components/tag-selector/tag-selector.com
     FormComponent,
     TableComponent,
     VideoListComponent,
+    VideoCardComponent,
     TagSelectorComponent,
   ],
   exports: [
@@ -54,6 +56,7 @@ import { TagSelectorComponent } from './components/tag-selector/tag-selector.com
     FormComponent,
     TableComponent,
     VideoListComponent,
+    VideoCardComponent,
     TagSelectorComponent,
 
     MatSlideToggleModule,
diff --git a/src/assets/icon.ico b/src/assets/icon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..c9092904f1d9c4e009cf97ad23d1cb473d3e45f2
GIT binary patch
literal 2296
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

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index 016a8be..5fd9606 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
     <title>MyTube</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="assets/weed.svg" />
+    <link rel="icon" type="image/x-icon" href="assets/icon.ico" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
   </head>