cleanup + start work on file page

package.json

@@ -73,4 +73,4 @@
     "tsx": "^4.19.3",
     "typescript": "^5.7.3"
   }
-}
+}

src/app/(pages)/(app)/(files)/file/[id]/page.tsx

@@ -0,0 +1,68 @@
+import FileVideoPlayer from "@/components/file/video-player";
+import { env } from "@/lib/env";
+import { getFileById } from "@/lib/helpers/file";
+import { getFileName } from "@/lib/utils/file";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+type FilePageProps = {
+  params: Promise<{
+    id: string;
+  }>;
+};
+
+export async function generateMetadata({
+  params,
+}: FilePageProps): Promise<Metadata> {
+  const { id } = await params;
+  const fileMeta = await getFileById(id);
+  if (!fileMeta) {
+    return notFound();
+  }
+
+  const fileName = getFileName(fileMeta);
+
+  return {
+    description: undefined, // remove it for now
+    openGraph: {
+      title: fileName,
+      images: {
+        url: `${env.NEXT_PUBLIC_WEBSITE_URL}/${fileName}`,
+      },
+    },
+    twitter: {
+      // Large image
+      card: "summary_large_image",
+    },
+  };
+}
+
+export default async function FilePage({ params }: FilePageProps) {
+  const { id } = await params;
+  const fileMeta = await getFileById(id);
+  if (!fileMeta) {
+    return notFound();
+  }
+
+  const url = `/${getFileName(fileMeta)}`;
+  const isImage = fileMeta.mimeType.startsWith("image");
+  const isVideo = fileMeta.mimeType.startsWith("video");
+
+  return (
+    <div className="flex w-full text-center justify-center">
+      <div className="bg-secondary/70 p-2 w-full md:w-4xl rounded-md flex flex-col items-center">
+        <span className="text-xl font-semibold">{getFileName(fileMeta)}</span>
+
+        {isImage && (
+          <img
+            src={url}
+            alt={`Image for ${getFileName(fileMeta)}`}
+            className="max-h-[70vh]"
+          />
+        )}
+
+        {isVideo && <FileVideoPlayer url={url} className="max-h-[70vh]" />}
+      </div>
+    </div>
+  );
+}

src/app/(pages)/(files)/thumbnails/[id]/route.ts → src/app/(pages)/(app)/(files)/thumbnails/[id]/route.ts

@@ -1,6 +1,5 @@
 import { notFound } from "@/lib/api-commons";
 import { getFileByThumbnailId } from "@/lib/helpers/file";
-import { getUserById } from "@/lib/helpers/user";
 import { getFileThumbnailPath } from "@/lib/utils/paths";
 import { storage } from "@/storage/create-storage";
 import { NextRequest, NextResponse } from "next/server";

src/app/(pages)/(app)/page.tsx

@@ -1,4 +1,4 @@
-export default function Home() {
+export default function HomePage() {
   return (
     <div className="flex w-full text-center justify-center">
       How did you get here

src/app/(pages)/(dashboard)/dashboard/account/settings/page.tsx

@@ -4,6 +4,7 @@ import NotificationSettings from "@/components/dashboard/user/settings/notificat
 import UserSettings from "@/components/dashboard/user/settings/user-settings";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getUser } from "@/lib/auth";
+import { UserType } from "@/lib/db/schemas/auth-schema";
 import { Metadata } from "next";
 
 const tabs = [
@@ -17,7 +18,7 @@ const tabs = [
     id: "config",
     name: "Config",
     description: "Manage your upload client configurations.",
-    content: (user: any) => <ConfigSettings user={user} />,
+    content: (user: UserType) => <ConfigSettings user={user} />,
   },
   {
     id: "notifications",
@@ -37,7 +38,7 @@ export const metadata: Metadata = {
   title: "Account Settings",
 };
 
-export default async function Dashboard() {
+export default async function AccountSettingsPage() {
   const user = await getUser();
   return (
     <div className="mx-auto w-full max-w-5xl self-start flex flex-col gap-5">

src/app/(pages)/(dashboard)/dashboard/page.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
   title: "Dashboard",
 };
 
-export default async function Dashboard() {
+export default async function DashboardPage() {
   const user = await getUser();
   return (
     <div className="flex flex-col gap-4 w-full items-center">

src/app/layout.tsx

@@ -19,6 +19,9 @@ export const metadata: Metadata = {
   },
   description: env.NEXT_PUBLIC_WEBSITE_DESCRIPTION,
   icons: [{ rel: "icon", url: env.NEXT_PUBLIC_WEBSITE_LOGO }],
+  openGraph: {
+    siteName: env.NEXT_PUBLIC_WEBSITE_NAME,
+  },
 };
 
 export default function RootLayout({

src/components/dashboard/user/files/file.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import FileExtensionIcon from "@/components/file-icon";
+import FileVideoPlayer from "@/components/file/video-player";
 import SimpleTooltip from "@/components/simple-tooltip";
 import { Button } from "@/components/ui/button";
 import { InlineCodeBlock } from "@/components/ui/code-block";
@@ -161,15 +162,7 @@ function FilePreview({ fileMeta }: { fileMeta: FileType }) {
           />
         )}
 
-        {isVideo && (
-          <ReactPlayer
-            url={url}
-            volume={0.25}
-            playing
-            controls
-            className="max-h-[70vh]"
-          />
-        )}
+        {isVideo && <FileVideoPlayer url={url} className="max-h-[70vh]" />}
       </DialogContent>
     </Dialog>
   );

src/components/file/video-player.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import ReactPlayer from "react-player";
+
+type VideoPlayerProps = {
+  url: string;
+  className?: string;
+};
+
+export default function FileVideoPlayer({ url, className }: VideoPlayerProps) {
+  return (
+    <ReactPlayer
+      url={url}
+      volume={0.25}
+      playing
+      controls
+      className={className}
+    />
+  );
+}

src/lib/auth.ts

@@ -15,15 +15,15 @@ import { env } from "./env";
  *
  * @returns the current user (wtf is the type? x.x)
  */
-export const getUser = async (): Promise<Session["user"]> => {
+export const getUser = async (): Promise<schema.UserType> => {
   const session = await auth.api.getSession({
     headers: await headers(),
   });
   // This shouldn't happen
   if (!session) {
     redirect("/");
   }
-  return session.user;
+  return session.user as schema.UserType;
 };
 
 export const auth = betterAuth({