From 3be80bc9fb5bf14df20740d36a843b9f36000b68 Mon Sep 17 00:00:00 2001
From: mbaharip <62494292+mbahArip@users.noreply.github.com>
Date: Sun, 31 Mar 2024 00:51:04 +0700
Subject: [PATCH] Update file browser, file grid, file list, and password
 components

---
 src/app/@explorer.tsx  |  2 +-
 src/app/@file.grid.tsx |  2 +-
 src/app/@file.list.tsx | 26 +++++++++++++++++++-------
 src/app/@password.tsx  | 34 ++++++++++++++++++++++++++++------
 4 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/src/app/@explorer.tsx b/src/app/@explorer.tsx
index 5d13054..ace1511 100644
--- a/src/app/@explorer.tsx
+++ b/src/app/@explorer.tsx
@@ -103,7 +103,7 @@ export default function FileBrowser({ files, nextPageToken }: Props) {
                 key={file.encryptedId}
                 data={file}
               />
-              <Separator className='group-last:hidden' />
+              <Separator className='mt-1.5 group-last:hidden' />
             </div>
           ))}
         </div>
diff --git a/src/app/@file.grid.tsx b/src/app/@file.grid.tsx
index 5aabf2a..8d6ab34 100644
--- a/src/app/@file.grid.tsx
+++ b/src/app/@file.grid.tsx
@@ -64,7 +64,7 @@ export default function FileGrid({ data }: Props) {
                   <>
                     <Icon
                       name='Play'
-                      className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-50'
+                      className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-75'
                       size={32}
                     />
                     <div className='absolute bottom-0 right-0 z-10 bg-background px-1 py-0.5 text-xs text-foreground'>
diff --git a/src/app/@file.list.tsx b/src/app/@file.list.tsx
index 550f7a8..1e5a823 100644
--- a/src/app/@file.list.tsx
+++ b/src/app/@file.list.tsx
@@ -52,15 +52,27 @@ export default function FileList({ data }: Props) {
       >
         <div className={cn("flex-shrink flex-grow", "flex items-center gap-3")}>
           {/* If it's media, show thumbnail */}
-          <div className='flex-shrink-0 rounded-[var(--radius)] bg-muted/25'>
+          <div className='relative flex-shrink-0 rounded-[var(--radius)] bg-muted/25'>
             {data.thumbnailLink &&
             (data.mimeType.startsWith("video") ||
               data.mimeType.startsWith("image")) ? (
-              <img
-                src={`/api/thumb/${data.encryptedId}`}
-                alt={data.name}
-                className='size-12 flex-shrink-0 flex-grow-0 rounded-[var(--radius)] object-cover'
-              />
+              <>
+                <img
+                  src={`/api/thumb/${data.encryptedId}`}
+                  alt={data.name}
+                  className='size-16 flex-shrink-0 flex-grow-0 rounded-[var(--radius)] object-cover tablet:size-12'
+                />
+
+                {data.mimeType.startsWith("video") && (
+                  <>
+                    <Icon
+                      name='Play'
+                      className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-75'
+                      size={24}
+                    />
+                  </>
+                )}
+              </>
             ) : (
               <Icon
                 name={
@@ -68,7 +80,7 @@ export default function FileList({ data }: Props) {
                     ? "Folder"
                     : getPreviewIcon(data.fileExtension || "", data.mimeType)
                 }
-                className='size-12 flex-shrink-0 flex-grow-0 p-3'
+                className='size-16 flex-shrink-0 flex-grow-0 p-3 tablet:size-12'
               />
             )}
           </div>
diff --git a/src/app/@password.tsx b/src/app/@password.tsx
index 9122bd8..0831685 100644
--- a/src/app/@password.tsx
+++ b/src/app/@password.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import Icon from "~/components/Icon";
 import { Button } from "~/components/ui/button";
@@ -18,10 +18,11 @@ export default function Password({ path, errorMessage }: Props) {
   const router = useRouter();
 
   const [input, setInput] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(false);
+  const [submitLoading, setSubmitLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setLoading(true);
+    setSubmitLoading(true);
     toast.loading("Checking password...", {
       id: "password",
     });
@@ -46,10 +47,31 @@ export default function Password({ path, errorMessage }: Props) {
       });
     } finally {
       setInput("");
-      setLoading(false);
+      setSubmitLoading(false);
     }
   };
 
+  useEffect(() => {
+    setLoading(false);
+  }, []);
+
+  if (loading)
+    return (
+      <div
+        className={cn(
+          "mx-auto h-full w-full max-w-md",
+          "flex flex-grow flex-col items-center justify-center gap-3",
+        )}
+      >
+        <Icon
+          name='LoaderCircle'
+          size={32}
+          className='animate-spin text-foreground'
+        />
+        <p>Checking password...</p>
+      </div>
+    );
+
   return (
     <div
       className={cn(
@@ -89,9 +111,9 @@ export default function Password({ path, errorMessage }: Props) {
         <Button
           className='gap-3'
           type='submit'
-          disabled={loading}
+          disabled={submitLoading}
         >
-          {loading ? (
+          {submitLoading ? (
             <>
               <Icon
                 name='LoaderCircle'