first commit

src/components/video-player/video-player.component.html

@@ -0,0 +1,10 @@
+
+@if (videoSource()) {
+  <video #player class="w-full h-full" [src]="videoSource()" controls autoplay muted playsinline>
+    Your browser does not support the video tag.
+  </video>
+} @else {
+  <div class="w-full h-full bg-black flex items-center justify-center">
+    <p class="text-slate-400">Loading player...</p>
+  </div>
+}

src/components/video-player/video-player.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, input } from '@angular/core';
+
+@Component({
+  selector: 'app-video-player',
+  templateUrl: './video-player.component.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VideoPlayerComponent {
+  videoSource = input.required<string>();
+
+  @ViewChild('player', { static: false }) playerRef?: ElementRef<HTMLVideoElement>;
+
+  get el(): HTMLVideoElement | null {
+    return this.playerRef?.nativeElement ?? null;
+  }
+
+  togglePlayPause(): void {
+    const v = this.el; if (!v) return;
+    if (v.paused) v.play(); else v.pause();
+  }
+
+  seekBy(seconds: number): void {
+    const v = this.el; if (!v) return;
+    try { v.currentTime = Math.max(0, v.currentTime + seconds); } catch {}
+  }
+
+  toggleMute(): void {
+    const v = this.el; if (!v) return;
+    v.muted = !v.muted;
+  }
+
+  setPlaybackRate(delta: number): void {
+    const v = this.el; if (!v) return;
+    const next = Math.min(2.0, Math.max(0.25, (v.playbackRate || 1) + delta));
+    v.playbackRate = next;
+  }
+
+  async toggleFullscreen(): Promise<void> {
+    const v = this.el; if (!v) return;
+    const anyDoc: any = document;
+    if (!anyDoc.fullscreenElement) {
+      await v.requestFullscreen?.();
+    } else {
+      await anyDoc.exitFullscreen?.();
+    }
+  }
+}