diff --git a/src/app/(core)/v/[slug]/page.tsx b/src/app/(core)/v/[slug]/page.tsx
index b508ba3..f4bad57 100644
--- a/src/app/(core)/v/[slug]/page.tsx
+++ b/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
- An error occurred
+ {`An error occurred`}
- Sorry, we couldn’t find the page you’re looking for.
+ {props.message ??
+ `Sorry, we couldn’t find the page you’re looking for.`}
- Go back home
+ {`Go back home`}
diff --git a/src/utils/twitch-server.ts b/src/utils/twitch-server.ts
index 474ebb8..d198802 100644
--- a/src/utils/twitch-server.ts
+++ b/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;
};