feat(aih): implement next up resource retrieval & ui

badass-courses · Jan 10, 2025 · b38d0de · b38d0de
1 parent 9f29710
commit b38d0de
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 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
@@ -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
@@ -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>
+			)}
+		</>
+	)
+}