From b38d0def9668caf77b29a6f931d4649252d36b4a Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Fri, 10 Jan 2025 12:04:13 +0100
Subject: [PATCH] feat(aih): implement next up resource retrieval & ui

---
 .../_components/edit-post-form-metadata.tsx   |  4 +-
 .../posts/_components/post-player.tsx         | 76 ++++++++++---------
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
index 89a3f07cb..563a5e073 100644
--- a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Suspense, use } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { PostPlayer } from '@/app/(content)/posts/_components/post-player'
+import { SimplePostPlayer } from '@/app/(content)/posts/_components/post-player'
 import Spinner from '@/components/spinner'
 import { env } from '@/env.mjs'
 import { useTranscript } from '@/hooks/use-transcript'
@@ -155,7 +155,7 @@ export const PostMetadataFormFields: React.FC<{
 									<>
 										{videoResource && videoResource.state === 'ready' ? (
 											<div className="-mt-5 border-b">
-												<PostPlayer videoResource={videoResource} />
+												<SimplePostPlayer videoResource={videoResource} />
 												<div className="flex items-center gap-1 px-4 pb-2">
 													<Button
 														variant="secondary"
diff --git a/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx b/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx
index 5209cfd5e..3c00e510c 100644
--- a/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx
@@ -86,27 +86,6 @@ export function PostPlayer({
 		},
 		onEnded: () => {
 			dispatchVideoPlayerOverlay({ type: 'COMPLETED', playerRef })
-			React.startTransition(async () => {
-				console.log('video ended')
-				// await handleOnVideoEnded({
-				// 	canView,
-				// 	resource,
-				// 	nextResource,
-				// 	nextLessonPlaybackId,
-				// 	isFullscreen,
-				// 	playerRef,
-				// 	currentResource,
-				// 	dispatchVideoPlayerOverlay,
-				// 	setCurrentResource,
-				// 	handleSetLessonComplete,
-				// 	bingeMode,
-				// 	moduleSlug,
-				// 	moduleType,
-				// 	router,
-				// 	moduleProgress,
-				// 	addLessonProgress,
-				// })
-			})
 		},
 		onPlay: () => {
 			dispatchVideoPlayerOverlay({ type: 'HIDDEN' })
@@ -154,27 +133,50 @@ export function PostPlayer({
 							{nextUp.resource.fields?.title} <ArrowRight className="w-4" />
 						</Link>
 					</Button>
-					{/* {currentResourceIndexFromList}
-					{nextUpList && (
-						<div>
-							{nextUpList.resources.map((r) => {
-								return <div key={r.id}>{r.resource.fields.title}</div>
-							})}
-						</div>
-					)} */}
 				</div>
 			)}
 		</div>
 	)
 }
 
-// function getNextUpResourceFromList(list: List, currentResourceId: string) {
-// 	if (list?.fields?.type !== 'nextUp') return null
+export function SimplePostPlayer({
+	muxPlaybackId,
+	className,
+	videoResource,
+}: {
+	muxPlaybackId?: string
+	videoResource: VideoResource
+	className?: string
+}) {
+	const playerProps = {
+		id: 'mux-player',
+		defaultHiddenCaptions: true,
+		streamType: 'on-demand',
+		thumbnailTime: 0,
+		accentColor: '#DD9637',
+		playbackRates: [0.75, 1, 1.25, 1.5, 1.75, 2],
+		maxResolution: '2160p',
+		minResolution: '540p',
+	} as MuxPlayerProps
 
-// 	const currentResourceIndexFromList = list?.resources.findIndex(
-// 		(r) => r.resource.id === currentResourceId,
-// 	)
-// 	const nextUpIndex = currentResourceIndexFromList + 1
+	const playbackId =
+		videoResource?.state === 'ready'
+			? muxPlaybackId || videoResource?.muxPlaybackId
+			: null
 
-// 	return list?.resources[nextUpIndex]
-// }
+	return (
+		<>
+			{playbackId ? (
+				<MuxPlayer
+					playbackId={playbackId}
+					className={cn(className)}
+					{...playerProps}
+				/>
+			) : (
+				<div className="flex h-full w-full items-center justify-center bg-gray-300">
+					<Spinner />
+				</div>
+			)}
+		</>
+	)
+}