From 6433d7f8da5bc88dabeb4408479332ccbd051c79 Mon Sep 17 00:00:00 2001 From: "Mark R. Florkowski" Date: Wed, 6 Mar 2024 21:08:58 -0800 Subject: [PATCH 1/5] paginate --- src/utils/twitch-server.ts | 44 ++++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/src/utils/twitch-server.ts b/src/utils/twitch-server.ts index 474ebb8..852f7d4 100644 --- a/src/utils/twitch-server.ts +++ b/src/utils/twitch-server.ts @@ -1,3 +1,4 @@ +import { metadata } from "./../app/layout"; import { clerkClient } from "@clerk/nextjs/app-beta"; export const generateTwitchRequestHeaders = (accessToken: string) => { @@ -55,6 +56,36 @@ const getValidTokenForCreator = async (creatorName: string) => { return await getTwitchTokenFromClerk(creatorFoundInClerk.id); }; +const fetchPaginatedMarkers = async ( + url: string, + init?: RequestInit | undefined +): Promise => { + type ApiRes = { + data: any[]; + pagination: { cursor: string }; + }; + + let { + data, + pagination: { cursor }, + } = (await fetch(url, init).then((response) => response.json())) as ApiRes; + + const extractMarkers = (result: ApiRes) => + result.data?.[0]?.videos?.[0]?.markers ?? []; + + let markers = extractMarkers({ data, pagination: { cursor } }); + + while (cursor) { + const next = (await fetch(`${url}&after=${cursor}`, init).then((response) => + response.json() + )) as ApiRes; + markers = [...markers, ...extractMarkers(next)]; + cursor = next.pagination.cursor; + } + + return markers; +}; + export const getVodWithMarkers = async (vodId: string, token: string) => { const vodResponse = await fetch( `https://api.twitch.tv/helix/videos?id=${vodId}`, @@ -76,8 +107,8 @@ export const getVodWithMarkers = async (vodId: string, token: string) => { const tokenForMarkers = await getValidTokenForCreator(creatorName); - const markersResponse = await fetch( - `https://api.twitch.tv/helix/streams/markers?video_id=${vodId}&first=100`, + const markersData = await fetchPaginatedMarkers( + `https://api.twitch.tv/helix/streams/markers?video_id=${vodId}`, { method: "GET", headers: generateTwitchRequestHeaders(tokenForMarkers), @@ -85,14 +116,9 @@ export const getVodWithMarkers = async (vodId: string, token: string) => { } ); - console.log("MARKER RESPONSE", markersResponse.status); - - const markersData = await markersResponse.json(); - console.log("MARKER DATA", markersData); - - const markers = markersData?.data?.[0]?.videos?.[0]["markers"] ?? []; + console.log("MARKERS", markersData); - return { ...vodData?.data?.[0], markers } as VOD; + return { ...vodData?.data?.[0], markers: markersData } as VOD; }; export const getTwitchTokenFromClerk = async (clerkUserId: string) => { From 9fac70c9c218fb16f5d5d78af845fbcc362dd4fa Mon Sep 17 00:00:00 2001 From: "Mark R. Florkowski" Date: Wed, 6 Mar 2024 21:10:05 -0800 Subject: [PATCH 2/5] larger window --- src/utils/twitch-server.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/twitch-server.ts b/src/utils/twitch-server.ts index 852f7d4..bfc9e1f 100644 --- a/src/utils/twitch-server.ts +++ b/src/utils/twitch-server.ts @@ -108,7 +108,7 @@ export const getVodWithMarkers = async (vodId: string, token: string) => { const tokenForMarkers = await getValidTokenForCreator(creatorName); const markersData = await fetchPaginatedMarkers( - `https://api.twitch.tv/helix/streams/markers?video_id=${vodId}`, + `https://api.twitch.tv/helix/streams/markers?video_id=${vodId}&first=100`, { method: "GET", headers: generateTwitchRequestHeaders(tokenForMarkers), From 6b7790ddc1dedb001253e24700dc5843cdf6265f Mon Sep 17 00:00:00 2001 From: "Mark R. Florkowski" Date: Wed, 6 Mar 2024 21:11:05 -0800 Subject: [PATCH 3/5] remove accidental import --- src/utils/twitch-server.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/twitch-server.ts b/src/utils/twitch-server.ts index bfc9e1f..5bec96f 100644 --- a/src/utils/twitch-server.ts +++ b/src/utils/twitch-server.ts @@ -1,4 +1,3 @@ -import { metadata } from "./../app/layout"; import { clerkClient } from "@clerk/nextjs/app-beta"; export const generateTwitchRequestHeaders = (accessToken: string) => { From a8d9a78ad8e9d13f7fbdf32055acefd7bd6fafb0 Mon Sep 17 00:00:00 2001 From: "Mark R. Florkowski" Date: Wed, 6 Mar 2024 21:32:22 -0800 Subject: [PATCH 4/5] no need to separate these --- src/utils/twitch-server.ts | 67 ++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 39 deletions(-) diff --git a/src/utils/twitch-server.ts b/src/utils/twitch-server.ts index 5bec96f..1c43d75 100644 --- a/src/utils/twitch-server.ts +++ b/src/utils/twitch-server.ts @@ -55,36 +55,6 @@ const getValidTokenForCreator = async (creatorName: string) => { return await getTwitchTokenFromClerk(creatorFoundInClerk.id); }; -const fetchPaginatedMarkers = async ( - url: string, - init?: RequestInit | undefined -): Promise => { - type ApiRes = { - data: any[]; - pagination: { cursor: string }; - }; - - let { - data, - pagination: { cursor }, - } = (await fetch(url, init).then((response) => response.json())) as ApiRes; - - const extractMarkers = (result: ApiRes) => - result.data?.[0]?.videos?.[0]?.markers ?? []; - - let markers = extractMarkers({ data, pagination: { cursor } }); - - while (cursor) { - const next = (await fetch(`${url}&after=${cursor}`, init).then((response) => - response.json() - )) as ApiRes; - markers = [...markers, ...extractMarkers(next)]; - cursor = next.pagination.cursor; - } - - return markers; -}; - export const getVodWithMarkers = async (vodId: string, token: string) => { const vodResponse = await fetch( `https://api.twitch.tv/helix/videos?id=${vodId}`, @@ -106,18 +76,37 @@ export const getVodWithMarkers = async (vodId: string, token: string) => { const tokenForMarkers = await getValidTokenForCreator(creatorName); - const markersData = await fetchPaginatedMarkers( + 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()); + + const extractMarkers = (result: { data: any }) => + result.data?.[0]?.videos?.[0]?.markers ?? []; + + 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; + } - console.log("MARKERS", markersData); + console.log("MARKERS", markers); - return { ...vodData?.data?.[0], markers: markersData } as VOD; + return { ...vodData?.data?.[0], markers } as VOD; }; export const getTwitchTokenFromClerk = async (clerkUserId: string) => { From d49c4c4658ebfbbd9b68da6c4a184d516bb5411c Mon Sep 17 00:00:00 2001 From: "Mark R. Florkowski" Date: Wed, 6 Mar 2024 22:01:54 -0800 Subject: [PATCH 5/5] better errors on vod page --- src/app/(core)/v/[slug]/page.tsx | 22 +++++++++++++--------- src/app/_components/error-page.tsx | 9 +++++---- src/utils/twitch-server.ts | 6 ++++-- 3 files changed, 22 insertions(+), 15 deletions(-) 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
You have to be signed in
; - 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 ( - <> -