feat: enhance folder viewer with video playback functionality

- Updated the folder viewer to support inline video playback, allowing users to click on video items to open a video player.
- Added state management for video selection and loading indicators.
- Improved UI elements for video items, including hover effects and play icons.
- Enhanced video information display in the inline video player with file size details.

.gitignore

@@ -40,4 +40,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-public/thumbnails
+public/thumbnails
+screenshots

src/app/api/files/route.ts

@@ -20,10 +20,10 @@ export async function GET(request: Request) {
     
     // Get media files from database for this path
     const mediaFiles = db.prepare(`
-      SELECT path, type, thumbnail 
+      SELECT id, path, type, thumbnail 
       FROM media 
       WHERE path LIKE ?
-    `).all(`${dirPath}%`) as Array<{path: string, type: string, thumbnail: string | null}>;
+    `).all(`${dirPath}%`) as Array<{id: number, path: string, type: string, thumbnail: string | null}>;
 
     const result = files.map((file) => {
       const filePath = path.join(dirPath, file);
@@ -37,7 +37,7 @@ export async function GET(request: Request) {
         type = 'photo';
       }
 
-      // Find matching media file in database
+        // Find matching media file in database
       const mediaFile = mediaFiles.find((m: any) => m.path === filePath);
 
       return {
@@ -47,6 +47,7 @@ export async function GET(request: Request) {
         size: stats.size,
         type: mediaFile?.type || type,
         thumbnail: mediaFile?.thumbnail,
+        id: mediaFile?.id,
       };
     });
 

src/app/folder-viewer/page.tsx

@@ -3,9 +3,11 @@
 
 import { useState, useEffect, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
-import { Folder, File, Image, Film } from "lucide-react";
+import { Folder, File, Image, Film, Play } from "lucide-react";
 import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import InlineVideoPlayer from "@/components/inline-video-player";
+import { createPortal } from "react-dom";
 
 interface FileSystemItem {
   name: string;
@@ -14,6 +16,7 @@ interface FileSystemItem {
   size: number;
   thumbnail?: string;
   type?: string;
+  id?: number;
 }
 
 const FolderViewerPage = () => {
@@ -21,6 +24,9 @@ const FolderViewerPage = () => {
   const path = searchParams.get("path");
   const [items, setItems] = useState<FileSystemItem[]>([]);
   const [loading, setLoading] = useState(false);
+  const [selectedVideo, setSelectedVideo] = useState<FileSystemItem | null>(null);
+  const [isPlayerOpen, setIsPlayerOpen] = useState(false);
+  const [isVideoLoading, setIsVideoLoading] = useState(false);
 
   useEffect(() => {
     if (path) {
@@ -60,6 +66,21 @@ const FolderViewerPage = () => {
     return item.type === 'video' || item.type === 'photo';
   };
 
+  const handleVideoClick = (item: FileSystemItem) => {
+    if (item.type === 'video' && item.id) {
+      setIsVideoLoading(true);
+      setSelectedVideo(item);
+      setIsPlayerOpen(true);
+      // Reset loading state after a short delay to allow player to initialize
+      setTimeout(() => setIsVideoLoading(false), 500);
+    }
+  };
+
+  const handleClosePlayer = () => {
+    setIsPlayerOpen(false);
+    setSelectedVideo(null);
+  };
+
   if (!path) {
     return (
       <div className="flex items-center justify-center h-full">
@@ -115,9 +136,15 @@ const FolderViewerPage = () => {
             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4">
               {items.map((item) => (
                 <div key={item.name} 
-                     className="group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden">
+                     className={`group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden ${item.type === 'video' ? 'cursor-pointer' : ''}`}>
                   <Link href={item.isDirectory ? `/folder-viewer?path=${item.path}` : '#'} 
-                        className="block">
+                        className="block"
+                        onClick={(e) => {
+                          if (item.type === 'video' && item.id) {
+                            e.preventDefault();
+                            handleVideoClick(item);
+                          }
+                        }}>
                     <div className="aspect-square relative overflow-hidden">
                       {item.isDirectory ? (
                         <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 flex items-center justify-center">
@@ -145,6 +172,26 @@ const FolderViewerPage = () => {
                               </div>
                             )}
                           </div>
+                          {item.type === 'video' && (
+                            <>
+                              {/* Always visible small play icon */}
+                              <div className="absolute top-2 right-2 bg-black/70 backdrop-blur-sm rounded-full p-1.5">
+                                <Play className="h-3 w-3 text-white" />
+                              </div>
+                              {/* Large play button on hover */}
+                              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <div className="bg-white/90 backdrop-blur-sm rounded-full p-3 shadow-lg">
+                                  <Play className="h-6 w-6 text-slate-800" />
+                                </div>
+                              </div>
+                              {/* Loading overlay when video is being opened */}
+                              {isVideoLoading && selectedVideo?.id === item.id && (
+                                <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
+                                  <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent"></div>
+                                </div>
+                              )}
+                            </>
+                          )}
                         </div>
                       ) : (
                         <div className="absolute inset-0 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center"
@@ -179,6 +226,22 @@ const FolderViewerPage = () => {
           </>
         )}
       </div>
+
+      {/* Inline Video Player - Rendered as Portal */}
+      {selectedVideo && isPlayerOpen && typeof window !== 'undefined' && createPortal(
+        <InlineVideoPlayer
+          video={{
+            id: selectedVideo.id!,
+            title: selectedVideo.name,
+            path: selectedVideo.path,
+            size: selectedVideo.size,
+            thumbnail: selectedVideo.thumbnail || '',
+          }}
+          isOpen={isPlayerOpen}
+          onClose={handleClosePlayer}
+        />,
+        document.body
+      )}
     </div>
   );
 };

src/components/inline-video-player.tsx

@@ -147,7 +147,7 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
                 className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
               >
                 <X className="h-5 w-5" />
-                <span>Back to videos</span>
+                <span>Back</span>
               </button>
             </div>
             <h1 className="text-xl font-semibold text-foreground truncate max-w-md">
@@ -249,10 +249,13 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
         {/* Video info below player */}
         <div className="mt-6 space-y-3 pb-8">
           <h2 className="text-2xl font-bold text-foreground break-words leading-tight">{video.title}</h2>
-          <div className="bg-muted/50 rounded-lg p-4">
+          <div className="bg-muted/50 rounded-lg p-4 space-y-2">
             <p className="text-muted-foreground font-mono text-sm break-words leading-relaxed">
               {video.path}
             </p>
+            <p className="text-muted-foreground text-sm">
+              File size: {Math.round(video.size / 1024 / 1024)} MB
+            </p>
           </div>
         </div>
         </div>