feat: add video feed dialog to library grid

Author: warrox

frontend/src/components/library/video-card.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import Link from 'next/link';
 import { Play, Download, Clock, FileVideo, MoreVertical, Pencil, Trash2 } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
 import { Card } from '@/components/ui/card';
@@ -42,6 +41,7 @@ import type { Video } from '@/lib/types/video';
 
 interface VideoCardProps {
   video: Video;
+  onWatch?: (videoId: string) => void;
 }
 
 function parseFilename(filename: string) {
@@ -50,7 +50,7 @@ function parseFilename(filename: string) {
   return { baseName: filename.slice(0, lastDot), ext: filename.slice(lastDot) };
 }
 
-export function VideoCard({ video }: VideoCardProps) {
+export function VideoCard({ video, onWatch }: VideoCardProps) {
   const queryClient = useQueryClient();
   const isPlayable = video.status !== 'UPLOADED';
 
@@ -100,7 +100,11 @@ export function VideoCard({ video }: VideoCardProps) {
       <Card className="group overflow-hidden hover:-translate-y-1 hover:shadow-md">
         <div className="relative aspect-video bg-muted">
           {isPlayable ? (
-            <Link href={`/watch/${video.id}`} className="block h-full">
+            <button
+              type="button"
+              className="block h-full w-full text-left"
+              onClick={() => onWatch?.(video.id)}
+            >
               <video
                 src={getStreamUrl(video.id)}
                 className="h-full w-full object-cover"
@@ -121,7 +125,7 @@ export function VideoCard({ video }: VideoCardProps) {
                   <Play className="h-6 w-6 text-foreground" fill="currentColor" />
                 </div>
               </div>
-            </Link>
+            </button>
           ) : (
             <div className="flex h-full items-center justify-center">
               <FileVideo className="h-10 w-10 text-muted-foreground/40" />
@@ -181,12 +185,15 @@ export function VideoCard({ video }: VideoCardProps) {
 
           {isPlayable && (
             <div className="mt-3 flex gap-2">
-              <Link href={`/watch/${video.id}`} className="flex-1">
-                <Button variant="outline" size="sm" className="w-full gap-1.5">
-                  <Play className="h-3.5 w-3.5" />
-                  Watch
-                </Button>
-              </Link>
+              <Button
+                variant="outline"
+                size="sm"
+                className="flex-1 gap-1.5"
+                onClick={() => onWatch?.(video.id)}
+              >
+                <Play className="h-3.5 w-3.5" />
+                Watch
+              </Button>
               {video.status === 'READY' && (
                 <a href={getDownloadUrl(video.id)} download>
                   <Button variant="ghost" size="sm" className="gap-1.5">

frontend/src/components/library/video-grid.tsx

@@ -1,12 +1,23 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { Search } from 'lucide-react';
 import { VideoCard } from './video-card';
 import { EmptyState } from './empty-state';
+import { VideoFeed } from '@/components/feed/video-feed';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+} from '@/components/ui/dialog';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
 import { useVideos } from '@/hooks/use-videos';
+import { getVideos } from '@/lib/api/videos';
+import type { Video } from '@/lib/types/video';
 
 const STATUS_OPTIONS = [
   { label: 'All', value: '' },
@@ -21,6 +32,7 @@ export function VideoGrid() {
   const [searchInput, setSearchInput] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
+  const [watchVideoId, setWatchVideoId] = useState<string | null>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   useEffect(() => {
@@ -42,6 +54,29 @@ export function VideoGrid() {
   const total = data?.total ?? 0;
   const totalPages = Math.ceil(total / 12);
 
+  const feedVideos = useMemo(
+    () => videos.filter((v) => v.status === 'READY'),
+    [videos],
+  );
+
+  const feedPageRef = useRef(page);
+  feedPageRef.current = page;
+
+  const handleLoadMore = useCallback(async (): Promise<Video[]> => {
+    feedPageRef.current += 1;
+    try {
+      const result = await getVideos(
+        feedPageRef.current,
+        12,
+        debouncedSearch || undefined,
+        statusFilter || undefined,
+      );
+      return result.data.filter((v) => v.status === 'READY');
+    } catch {
+      return [];
+    }
+  }, [debouncedSearch, statusFilter]);
+
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-4 sm:flex-row">
@@ -105,7 +140,7 @@ export function VideoGrid() {
                 key={video.id}
                 style={{ animationDelay: `${index * 50}ms` }}
               >
-                <VideoCard video={video} />
+                <VideoCard video={video} onWatch={setWatchVideoId} />
               </div>
             ))}
           </div>
@@ -135,6 +170,36 @@ export function VideoGrid() {
           )}
         </>
       )}
+
+      <Dialog
+        open={watchVideoId !== null}
+        onOpenChange={(open) => { if (!open) setWatchVideoId(null); }}
+      >
+        <DialogPortal>
+          <DialogOverlay className="bg-black/20 backdrop-blur-[24px] saturate-[180%]" />
+          <DialogPrimitive.Content
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 focus:outline-none"
+            aria-describedby={undefined}
+          >
+            <DialogPrimitive.Title className="sr-only">
+              Video Feed
+            </DialogPrimitive.Title>
+            <div className="relative h-full max-h-[85vh] w-full max-w-2xl overflow-hidden rounded-[0.625rem]">
+              {watchVideoId && (
+                <VideoFeed
+                  initialVideoId={watchVideoId}
+                  videos={feedVideos}
+                  onLoadMore={handleLoadMore}
+                />
+              )}
+            </div>
+            <DialogClose className="absolute right-6 top-6 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white transition-colors hover:bg-black/70">
+              <X className="h-5 w-5" />
+              <span className="sr-only">Close</span>
+            </DialogClose>
+          </DialogPrimitive.Content>
+        </DialogPortal>
+      </Dialog>
     </div>
   );
 }