caching headers for video API route

jack-laverty · Sep 9, 2024 · 968b8a2 · 968b8a2
1 parent 6932984
commit 968b8a2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/app/api/videos/[videoId]/route.ts b/app/api/videos/[videoId]/route.ts
@@ -7,16 +7,14 @@ export async function GET(
   request: NextRequest,
   { params }: { params: { videoId: string } }
 ) {
-
   try {
-
     const { data, error } = await supabase.storage
       .from(process.env.SUPABASE_BUCKET!)
       .download("surfing/" + params.videoId);
 
     if (error) {
-        console.error('Catch all Error streaming video:', error);
-        return NextResponse.json({ error: 'Error streaming video' }, { status: 500 });
+      console.error('Error streaming video:', error);
+      return NextResponse.json({ error: 'Error streaming video' }, { status: 500 });
     }
 
     if (!data) {
@@ -26,13 +24,15 @@ export async function GET(
 
     const range = request.headers.get('range');
 
+    let response: NextResponse;
+
     if (range) {
       const parts = range.replace(/bytes=/, "").split("-");
       const start = parseInt(parts[0], 10);
       const end = parts[1] ? parseInt(parts[1], 10) : data.size - 1;
       const chunkSize = (end - start) + 1;
 
-      return new NextResponse(data.slice(start, end + 1), {
+      response = new NextResponse(data.slice(start, end + 1), {
         status: 206,
         headers: {
           'Content-Range': `bytes ${start}-${end}/${data.size}`,
@@ -42,14 +42,20 @@ export async function GET(
         },
       });
     } else {
-      return new NextResponse(data, {
+      response = new NextResponse(data, {
         status: 200,
         headers: {
           'Content-Length': data.size.toString(),
           'Content-Type': 'video/mp4',
         },
       });
     }
+
+    // Add caching headers
+    response.headers.set('Cache-Control', 'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400');
+    response.headers.set('ETag', `"${params.videoId}"`);
+
+    return response;
   } catch (error) {
     console.error('Catch all Error streaming video:', error);
     return NextResponse.json({ error: 'Error streaming video', details: error }, { status: 500 });

diff --git a/app/components/SessionsList.tsx b/app/components/SessionsList.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { useRouter } from 'next/navigation';
 import { Session } from '@/lib/types'
+import { formatTime, formatDate } from '@/lib/utils'
 
 interface SessionsListProps {
   sessions: Session[];
@@ -40,8 +41,8 @@ const SessionsList: React.FC<SessionsListProps> = ({ sessions }) => {
                 className="border-t border-gray-300 hover:bg-gray-50 cursor-pointer"
                 onClick={() => handleRowClick(session.session_id)}
                 >
-                <td className="px-4 py-2">{session.date}</td>
-                <td className="px-4 py-2">{session.time}</td>
+                <td className="px-4 py-2">{formatDate(session.date)}</td>
+                <td className="px-4 py-2">{formatTime(session.time)}</td>
                 <td className="px-4 py-2">{session.location}</td>
                 <td className="px-4 py-2">{session.wave}</td>
                 <td className="px-4 py-2">{session.surfer}</td>

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -20,3 +20,9 @@ export const formatTime = (time: string): string => {
   const formattedTime = dateTime.format('h:mma');
   return formattedTime
 }
+
+export const formatDate = (date: string): string => {
+  const dateTime = dayjs(`${date} 00:00:00`);
+  const formattedDate = dateTime.format('D MMM YYYY');
+  return formattedDate
+}