chore: Paginated marker retrieval

src/app/(core)/v/[slug]/page.tsx

@@ -5,6 +5,7 @@ import {
 } from "~/utils/twitch-server";
 import { VodPlayer } from "./player";
 import Script from "next/script";
+import ErrorPage from "~/app/error";
 
 export const dynamic = "force-dynamic";
 
@@ -20,14 +21,17 @@ export default async function VodPage({
   const self = await auth();
   if (!self || !self.userId) return <div>You have to be signed in</div>;
 
-  const token = await getTwitchTokenFromClerk(self.userId);
+  try {
+    const token = await getTwitchTokenFromClerk(self.userId);
+    const vodDetails = await getVodWithMarkers(params.slug, token);
 
-  const vodDetails = await getVodWithMarkers(params.slug, token);
-
-  return (
-    <>
-      <Script src="https://player.twitch.tv/js/embed/v1.js" async />
-      <VodPlayer id={params.slug} vod={vodDetails} />
-    </>
-  );
+    return (
+      <>
+        <Script src="https://player.twitch.tv/js/embed/v1.js" async />
+        <VodPlayer id={params.slug} vod={vodDetails} />
+      </>
+    );
+  } catch (e) {
+    return <ErrorPage message={(e as Error).message} />;
+  }
 }

src/app/_components/error-page.tsx

@@ -2,19 +2,20 @@
 
 import { ButtonLink } from "./common/button";
 
-export const ErrorPage = () => {
+export const ErrorPage = (props: { message?: string }) => {
   return (
     <div className="flex grow flex-col items-center justify-center gap-4 text-2xl font-bold">
       <div className="p-8 text-center">
         <h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
-          An error occurred
+          {`An error occurred`}
         </h1>
         <p className="mt-6 text-base leading-7 text-gray-600">
-          Sorry, we couldn’t find the page you’re looking for.
+          {props.message ??
+            `Sorry, we couldn’t find the page you’re looking for.`}
         </p>
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <ButtonLink href="/" variant="primary">
-            Go back home
+            {`Go back home`}
           </ButtonLink>
         </div>
       </div>

src/utils/twitch-server.ts

@@ -49,7 +49,9 @@ const getValidTokenForCreator = async (creatorName: string) => {
 
   // Early escape if we don't find this user in Clerk
   if (!creatorFoundInClerk) {
-    throw new Error("User not found in Clerk");
+    throw new Error(
+      "User has not signed in before. Markers are not available for this VOD."
+    );
   }
 
   return await getTwitchTokenFromClerk(creatorFoundInClerk.id);
@@ -72,25 +74,39 @@ export const getVodWithMarkers = async (vodId: string, token: string) => {
 
   const creatorName = vodData?.data?.[0]?.user_login;
 
-  if (!creatorName) throw new Error("could not find vod data or user login");
+  if (!creatorName) throw new Error("Could not find VOD data or user name.");
 
   const tokenForMarkers = await getValidTokenForCreator(creatorName);
 
-  const markersResponse = await fetch(
+  const opts = {
+    method: "GET",
+    headers: generateTwitchRequestHeaders(tokenForMarkers),
+    next: { revalidate: 60 },
+  };
+
+  let {
+    data,
+    pagination: { cursor },
+  } = await fetch(
     `https://api.twitch.tv/helix/streams/markers?video_id=${vodId}&first=100`,
-    {
-      method: "GET",
-      headers: generateTwitchRequestHeaders(tokenForMarkers),
-      next: { revalidate: 60 },
-    }
-  );
+    opts
+  ).then((response) => response.json());
 
-  console.log("MARKER RESPONSE", markersResponse.status);
+  const extractMarkers = (result: { data: any }) =>
+    result.data?.[0]?.videos?.[0]?.markers ?? [];
 
-  const markersData = await markersResponse.json();
-  console.log("MARKER DATA", markersData);
+  let markers = extractMarkers({ data });
+
+  while (cursor) {
+    const next = await fetch(
+      `https://api.twitch.tv/helix/streams/markers?video_id=${vodId}&first=100&after=${cursor}`,
+      opts
+    ).then((response) => response.json());
+    markers = [...markers, ...extractMarkers(next)];
+    cursor = next.pagination.cursor;
+  }
 
-  const markers = markersData?.data?.[0]?.videos?.[0]["markers"] ?? [];
+  console.log("MARKERS", markers);
 
   return { ...vodData?.data?.[0], markers } as VOD;
 };