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>

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);
+  }
+}

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

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,

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>