first commit

2025-09-14 23:05:30 -04:00
commit 2866d74b32
122 changed files with 95474 additions and 0 deletions
@@ -0,0 +1,52 @@
+<div class="h-[calc(100vh-4rem)] w-full flex items-center justify-center p-2 sm:p-4"
+     (wheel)="onWheel($event)" (touchstart)="onTouchStart($event)" (touchend)="onTouchEnd($event)">
+  <!-- Center column -->
+  <div class="relative">
+    <!-- Video frame (9:16) -->
+    <div class="rounded-xl overflow-hidden shadow-2xl ring-1 ring-slate-700/50 bg-black/90"
+         style="height: calc(100vh - 6rem); max-height: calc(100vh - 6rem); aspect-ratio: 9 / 16; width: auto; max-width: 92vw;">
+      @if (embedUrl(); as url) {
+        <iframe [src]="url" class="w-full h-full" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen></iframe>
+      } @else if (loading()) {
+        <div class="w-full h-full animate-pulse bg-slate-800"></div>
+      } @else if (error()) {
+        <div class="w-full h-full flex items-center justify-center text-slate-300">
+          {{ error() }}
+        </div>
+      }
+
+      <!-- Bottom overlay: meta -->
+      @if (current(); as v) {
+        <div class="absolute left-0 right-0 bottom-0 p-3 sm:p-4 bg-gradient-to-t from-black/60 to-transparent text-white">
+          <div class="flex items-center gap-3 text-sm">
+            <img [src]="v.uploaderAvatar" [alt]="v.uploaderName" class="h-8 w-8 rounded-full object-cover">
+            <div class="flex-1">
+              <div class="font-semibold line-clamp-1">{{ v.title }}</div>
+              <div class="opacity-80 line-clamp-1">@{{ v.uploaderName }}</div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+
+    <!-- Navigation buttons -->
+    <button (click)="prev()" [disabled]="!canPrev()"
+            class="absolute -right-14 top-6 hidden md:flex items-center justify-center h-10 w-10 rounded-full bg-slate-800/70 hover:bg-slate-700 text-white ring-1 ring-slate-700/60 disabled:opacity-40"
+            aria-label="Previous short">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M7 14l5-5 5 5H7z"/></svg>
+    </button>
+    <button (click)="next()" [disabled]="!canNext()"
+            class="absolute -right-14 top-20 hidden md:flex items-center justify-center h-10 w-10 rounded-full bg-slate-800/70 hover:bg-slate-700 text-white ring-1 ring-slate-700/60 disabled:opacity-40"
+            aria-label="Next short">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5H7z"/></svg>
+    </button>
+
+    <!-- Mobile next/prev (bottom) -->
+    <div class="flex md:hidden items-center justify-between mt-3">
+      <button (click)="prev()" [disabled]="!canPrev()" class="px-3 py-2 rounded bg-slate-800/70 text-white disabled:opacity-40">Prev</button>
+      <button (click)="next()" [disabled]="!canNext()" class="px-3 py-2 rounded bg-slate-800/70 text-white disabled:opacity-40">Next</button>
+    </div>
+  </div>
+</div>