Add file list in media ui

nandesh-dev · Oct 24, 2024 · ecc4206 · ecc4206
1 parent 2e785aa
commit ecc4206
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 30 deletions.
diff --git a/internal/server/media/get_directory.go b/internal/server/media/get_directory.go
@@ -2,6 +2,7 @@ package media
 
 import (
 	"context"
+	"path/filepath"
 
 	"connectrpc.com/connect"
 	"github.com/nandesh-dev/subtle/generated/proto/media"
@@ -19,6 +20,7 @@ func (s ServiceHandler) GetDirectory(ctx context.Context, req *connect.Request[m
 		for _, rootDirectory := range config.Config().Media.RootDirectories {
 			res.Directories = append(res.Directories, &media.Directory{
 				Path: rootDirectory.Path,
+				Name: filepath.Base(rootDirectory.Path),
 			})
 		}
 
@@ -34,6 +36,7 @@ func (s ServiceHandler) GetDirectory(ctx context.Context, req *connect.Request[m
 	for _, child := range dir.Children() {
 		res.Directories = append(res.Directories, &media.Directory{
 			Path: child.Path(),
+			Name: filepath.Base(child.Path()),
 		})
 	}
 
@@ -46,9 +49,3 @@ func (s ServiceHandler) GetDirectory(ctx context.Context, req *connect.Request[m
 
 	return connect.NewResponse(&res), nil
 }
-
-func compileResponseDirectory(directory filemanager.Directory) *media.Directory {
-	return &media.Directory{
-		Path: directory.Path(),
-	}
-}
diff --git a/proto/media/media.proto b/proto/media/media.proto
@@ -19,6 +19,7 @@ message Video {
 
 message Directory {
   string path = 1;
+  string name = 2;
 }
 
 message GetDirectoryResponse {

diff --git a/web/package.json b/web/package.json
@@ -13,6 +13,7 @@
         "@connectrpc/connect": "^1.6.1",
         "@connectrpc/connect-web": "^1.6.1",
         "@connectrpc/protoc-gen-connect-es": "^1.6.1",
+        "@tanstack/react-query": "^5.59.16",
         "google-protobuf": "^3.21.4",
         "grpc-web": "^1.5.0",
         "react": "^18.3.1",
@@ -21,8 +22,8 @@
         "react-router-dom": "^6.26.2"
     },
     "devDependencies": {
-        "@bufbuild/protobuf": "^1.10.0",
         "@bufbuild/buf": "^1.10.0",
+        "@bufbuild/protobuf": "^1.10.0",
         "@bufbuild/protoc-gen-es": "^1.10.0",
         "@eslint/js": "^9.11.1",
         "@types/react": "^18.3.10",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -10,6 +10,7 @@ import { ProtoContent, ProtoContext } from './context/proto'
 import { createGrpcWebTransport } from '@connectrpc/connect-web'
 import { createClient } from '@connectrpc/connect'
 import { MediaService } from '../gen/proto/media/media_connect'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const router = createBrowserRouter([
     {
@@ -36,10 +37,14 @@ const proto: ProtoContent = {
     MediaServiceClient: createClient(MediaService, transport),
 }
 
+const query = new QueryClient()
+
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <ProtoContext.Provider value={proto}>
-            <RouterProvider router={router} />
+            <QueryClientProvider client={query}>
+                <RouterProvider router={router} />
+            </QueryClientProvider>
         </ProtoContext.Provider>
     </StrictMode>
 )
diff --git a/web/src/routes/media/media.tsx b/web/src/routes/media/media.tsx
@@ -1,15 +1,21 @@
-import { useParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 import { FolderIcon, SearchIcon } from '../../../assets'
 import { Large, Small } from '../../utils/react_responsive'
 import { useProto } from '../../context/proto'
 import { GetDirectoryRequest } from '../../../gen/proto/media/media_pb'
+import { useQuery } from '@tanstack/react-query'
 
 export function Media() {
     const { MediaServiceClient } = useProto()
-    const { '*': mediaPath } = useParams()
+    const [searchParams] = useSearchParams()
 
-    const req = new GetDirectoryRequest({ path: '/' })
-    MediaServiceClient?.getDirectory(req).then(console.dir)
+    const path = searchParams.get('path') || ''
+
+    const { data } = useQuery({
+        queryKey: [path],
+        queryFn: () =>
+            MediaServiceClient?.getDirectory(new GetDirectoryRequest({ path })),
+    })
 
     return (
         <>
@@ -19,20 +25,33 @@ export function Media() {
                         <SearchBar />
                         <div className="flex flex-row items-center gap-lg">
                             <h2 className="text-md text-gray-830">Media</h2>
-                            <p className="text-sm text-gray-520">
-                                /media/{mediaPath}
-                            </p>
+                            <p className="text-sm text-gray-520">/{path}</p>
                         </div>
                     </section>
                     <section className="grid grid-flow-row gap-sm overflow-y-auto pb-xxl">
-                        <Folder
-                            name="Movies"
-                            subtitle={{ present: 10, total: 20 }}
-                        />
+                        {data?.directories.map((directory) => {
+                            return (
+                                <Folder
+                                    key={directory.path}
+                                    name={directory.name}
+                                    path={directory.path}
+                                    subtitle={{ present: 10, total: 20 }}
+                                />
+                            )
+                        })}
                         <div
                             className="h-[4px] rounded-sm bg-gray-80"
                             content="2"
                         />
+                        {data?.videos.map((video) => {
+                            return (
+                                <File
+                                    key={video.name}
+                                    name={video.name}
+                                    extension={video.extension}
+                                />
+                            )
+                        })}
                     </section>
                 </section>
             </Small>
@@ -41,20 +60,36 @@ export function Media() {
                     <section className="grid grid-cols-[1fr_20rem]">
                         <div className="flex flex-row items-center gap-lg">
                             <h2 className="text-md text-gray-830">Media</h2>
-                            <p className="text-sm text-gray-520">
-                                /media/{mediaPath}
-                            </p>
+                            <p className="text-sm text-gray-520">/{path}</p>
                         </div>
                         <SearchBar />
                     </section>
                     <section className="grid w-full grid-flow-row gap-sm overflow-y-auto">
                         <div className="grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] gap-sm">
-                            <Folder
-                                name="Movies"
-                                subtitle={{ present: 10, total: 20 }}
-                            />
+                            {data?.directories.map((directory) => {
+                                return (
+                                    <Folder
+                                        key={directory.path}
+                                        name={directory.name}
+                                        path={directory.path}
+                                        subtitle={{
+                                            present: 10,
+                                            total: 20,
+                                        }}
+                                    />
+                                )
+                            })}
                         </div>
                         <div className="h-[4px] rounded-sm bg-gray-80" />
+                        {data?.videos.map((video) => {
+                            return (
+                                <File
+                                    key={video.name}
+                                    name={video.name}
+                                    extension={video.extension}
+                                />
+                            )
+                        })}
                     </section>
                 </section>
             </Large>
@@ -64,26 +99,64 @@ export function Media() {
 
 type FolderProp = {
     name: string
+    path: string
     subtitle: {
         present: number
         total: number
     }
 }
 
-function Folder({ name, subtitle }: FolderProp) {
+function Folder({ name, subtitle, path }: FolderProp) {
+    const [searchParams, setSearchParams] = useSearchParams()
+
     return (
-        <div className="grid grid-cols-[auto_1fr] gap-md rounded-sm bg-gray-80 p-md">
+        <button
+            className="grid grid-cols-[auto_1fr] gap-md rounded-sm bg-gray-80 p-md"
+            onClick={() => {
+                const newSearchParam = new URLSearchParams(searchParams)
+                newSearchParam.set('path', path)
+                setSearchParams(newSearchParam)
+            }}
+        >
             <FolderIcon className="h-full fill-red" />
             <div className="">
-                <p className="text-sm text-gray-830">{name}</p>
+                <p className="text-start text-sm text-gray-830">{name}</p>
                 <div className="flex w-full flex-row justify-between">
                     <p className="text-xs text-gray-520">Subtitle</p>
                     <p className="text-xs text-gray-520">
                         {subtitle.present}/{subtitle.total}
                     </p>
                 </div>
             </div>
-        </div>
+        </button>
+    )
+}
+
+type FileProp = {
+    name: string
+    extension: string
+}
+
+function File({ name, extension }: FileProp) {
+    return (
+        <>
+            <Small>
+                <button className="grid grid-rows-2 gap-sm rounded-sm bg-gray-80 p-sm">
+                    <p className="text-start text-sm text-gray-830">{name}</p>
+                    <div className="flex flex-row justify-between">
+                        <p className="text-sm text-gray-520">{extension}</p>
+                    </div>
+                </button>
+            </Small>
+            <Large>
+                <button className="grid grid-cols-2 rounded-sm bg-gray-80 p-sm">
+                    <p className="text-start text-sm text-gray-830">{name}</p>
+                    <div className="grid grid-cols-3">
+                        <p className="text-sm text-gray-520">{extension}</p>
+                    </div>
+                </button>
+            </Large>
+        </>
     )
 }