adding tips in navigation and updating the thumbnail

skillrecordings · Jan 4, 2024 · c8d672e · c8d672e
1 parent 40c6013
commit c8d672e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/apps/scriptkit/next.config.js b/apps/scriptkit/next.config.js
@@ -4,6 +4,7 @@ const IMAGE_HOST_DOMAINS = [
   'res.cloudinary.com',
   'github.com',
   process.env.NEXT_PUBLIC_HOST,
+  `image.mux.com`,
 ]
 
 /**

diff --git a/apps/scriptkit/src/components/navigation.tsx b/apps/scriptkit/src/components/navigation.tsx
@@ -11,6 +11,7 @@ import {twMerge} from 'tailwind-merge'
 
 const navItems = [
   {name: 'Free Tutorials', href: '/tutorials'},
+  {name: 'Tips', href: '/tips'},
   {name: 'Community Scripts', href: '/scripts'},
   {name: 'Docs', href: 'https://github.com/johnlindquist/kit/blob/main/API.md'},
   {

diff --git a/apps/scriptkit/src/lib/tips.ts b/apps/scriptkit/src/lib/tips.ts
@@ -13,6 +13,7 @@ export const TipSchema = z.object({
   body: z.string().nullable().optional(),
   summary: z.any().array().nullable().optional(),
   videoResourceId: z.nullable(z.string()).optional(),
+  muxPlaybackId: z.nullable(z.string()).optional(),
   transcript: z.nullable(z.string()).optional(),
   tweetId: z.nullable(z.string()).optional(),
 })
@@ -33,6 +34,7 @@ export const getAllTips = async (): Promise<Tip[]> => {
         summary,
         body,
         "videoResourceId": resources[@->._type == 'videoResource'][0]->_id,
+        "muxPlaybackId": resources[@->._type == 'videoResource'][0]-> muxAsset.muxPlaybackId,
         "slug": slug.current,
         "transcript": resources[@->._type == 'videoResource'][0]-> castingwords.transcript,
         "tweetId":  resources[@._type == 'tweet'][0].tweetId
@@ -53,6 +55,7 @@ export const getTip = async (slug: string): Promise<Tip> => {
         summary,
         body,
         "videoResourceId": resources[@->._type == 'videoResource'][0]->_id,
+        "muxPlaybackId": resources[@->._type == 'videoResource'][0]-> muxAsset.muxPlaybackId,
         "slug": slug.current,
         "transcript": resources[@->._type == 'videoResource'][0]-> castingwords.transcript,
         "tweetId":  resources[@._type == 'tweet'][0].tweetId

diff --git a/apps/scriptkit/src/pages/tips/index.tsx b/apps/scriptkit/src/pages/tips/index.tsx
@@ -51,9 +51,10 @@ export default TipsIndex
 
 const TipCard: React.FC<{tip: Tip}> = ({tip}) => {
   const {title} = tip
-  const thumbnail = `${getBaseUrl()}/api/video-thumb?videoResourceId=${
-    tip?.videoResourceId
-  }`
+  console.log('this is the tip info ', tip)
+  const muxPlaybackId = tip?.muxPlaybackId
+  const thumbnail = `https://image.mux.com/${muxPlaybackId}/thumbnail.png?width=720&height=405&fit_mode=preserve`
+
   const router = useRouter()
   const {tipCompleted} = useTipComplete(tip.slug)