feat: Post completion overlay #1505
Conversation
Not sure why we index on the front end but this was removing tags from indexed posts and generally out of sync with builder
- add CTA to Cursor workshop for posts tagged with cursor - pull tags from course builder
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| let client = new Typesense.Client({ | ||
| nodes: [ | ||
| { | ||
| host: process.env.NEXT_PUBLIC_TYPESENSE_HOST!, | ||
| port: 443, | ||
| protocol: 'https', | ||
| }, | ||
| ], | ||
| apiKey: process.env.TYPESENSE_WRITE_API_KEY!, | ||
| connectionTimeoutSeconds: 2, | ||
| }) | ||
|
|
||
| if ( | ||
| post.fields.state === 'published' && | ||
| post.fields.visibility === 'public' | ||
| ) { | ||
| await client | ||
| .collections(process.env.TYPESENSE_COLLECTION_NAME!) | ||
| .documents() | ||
| .upsert({ | ||
| ...resource, | ||
| published_at_timestamp: post.updatedAt.getTime(), | ||
| }) | ||
| .catch((err) => {}) | ||
| } else { | ||
| await client | ||
| .collections(process.env.TYPESENSE_COLLECTION_NAME!) | ||
| .documents() | ||
| .delete(resource.id) | ||
| .catch((err) => {}) | ||
| } |
There was a problem hiding this comment.
This Typesense indexing is out of sync with course builder and seems redundant. Currently it strip the indexed typesense objects of tags because when this was implemented we weren't indexing tags in posts..
| <MuxPlayerProvider> | ||
| <VideoPlayerOverlayProvider> | ||
| <div className="relative h-full w-full"> | ||
| <VideoPlayerOverlay resource={post} /> | ||
| <PostPlayer | ||
| playbackId={videoResource.fields.muxPlaybackId} | ||
| eggheadLessonId={post.fields.eggheadLessonId} | ||
| post={post} | ||
| postTags={tags} | ||
| /> | ||
| </div> | ||
| </VideoPlayerOverlayProvider> | ||
| </MuxPlayerProvider> |
There was a problem hiding this comment.
adding mux and overlay provider which gives controls for overlay to be triggered and access mux player to rewatch lesson
| ref={playerRef} | ||
| onLoadedData={() => { | ||
| dispatchVideoPlayerOverlay({type: 'HIDDEN'}) | ||
| setMuxPlayerRef(playerRef) | ||
| }} | ||
| onEnded={() => { | ||
| if (eggheadLessonId) { | ||
| if (postTags.some((tag) => tag.name === 'cursor')) { | ||
| dispatchVideoPlayerOverlay({ | ||
| type: 'COMPLETED', | ||
| playerRef, | ||
| cta: 'cursor_workshop', | ||
| }) | ||
| } else { | ||
| dispatchVideoPlayerOverlay({type: 'COMPLETED', playerRef}) | ||
| } |
There was a problem hiding this comment.
on load we want to make sure overlay is hidden
on ended we want to trigger completion overlay. When lessons are tagged with cursor we'll send cursor_workshop CTA to display custom overlay
| case 'COMPLETED': | ||
| const {playerRef, cta} = overlayState.action as CompletedAction | ||
|
|
||
| if (cta === 'cursor_workshop') { |
There was a problem hiding this comment.
if cta is cursor_workshop display the custom overlay, otherwise display default
| <div className="flex flex-col items-center justify-center gap-2 p-4"> | ||
| <h2 className="text-lg sm:text-2xl font-bold mb-4 text-center"> | ||
| {resource.fields.title} | ||
| </h2> | ||
| <Button | ||
| variant="outline" | ||
| onClick={() => { | ||
| if (playerRef.current) { | ||
| playerRef.current.play() | ||
| } | ||
| dispatch({type: 'HIDDEN'}) | ||
| }} | ||
| className="border border-blue-600 hover:bg-blue-600" | ||
| > | ||
| <RefreshCw className="mr-2 h-4 w-4" /> | ||
| Watch again | ||
| </Button> |
There was a problem hiding this comment.
default overlay is simple right now with a watch again button. @vojtaholik we could put vector search results here if we implemented that
…egghead-next into zac/cursor-workshop-cta
This adds completion overlay to posts so we can CTA Johns workshop on cursor lessons.
Cursor CTA
Mobile is a little crowded but it looks ok:
Default