skillrecordings · kodiakhq · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025
diff --git a/apps/epic-react/src/components/exercise-overlay.tsx b/apps/epic-react/src/components/exercise-overlay.tsx
@@ -231,6 +231,9 @@ const GetStartedVideo: React.FC<{
           onCuePointChange={(e) => {
             setCuePoint(e.detail.value)
           }}
+          metadata={{
+            video_title: `${moduleSlug} - Get Started Video`,
+          }}
           ref={muxPlayerRef}
           startTime={0}
           playbackId="zd6jycd4fMq4EB702BpGbimsyj00idemYohCOEopQYe01k"

diff --git a/apps/epic-react/src/components/landing/intro-tour-video.tsx b/apps/epic-react/src/components/landing/intro-tour-video.tsx
@@ -26,6 +26,9 @@ const IntroTourVideo = () => {
         className="block"
         ref={playerRef}
         poster={poster}
+        metadata={{
+          video_title: 'IntroTourVideo',
+        }}
         style={
           {
             '--seek-backward-button': 'none',

diff --git a/apps/epic-react/src/pages/get-started/index.tsx b/apps/epic-react/src/pages/get-started/index.tsx
@@ -329,6 +329,9 @@ export const WorkshopAppScreenshot = ({className}: {className?: string}) => {
 const AppTourVideo = () => {
   return (
     <MuxPlayer
+      metadata={{
+        video_title: 'AppTourVideo',
+      }}
       playbackId="zd6jycd4fMq4EB702BpGbimsyj00idemYohCOEopQYe01k"
       accentColor="#3b82f6"
       className="w-full rounded"

diff --git a/apps/epic-react/src/templates/embed-template.tsx b/apps/epic-react/src/templates/embed-template.tsx
@@ -231,6 +231,9 @@ const Video: React.FC<
             thumbnailTime={0}
             {...(muxPlayerProps as MuxPlayerProps)}
             playbackId={videoResource.muxPlaybackId}
+            metadata={{
+              video_title: `${lesson.title}`,
+            }}
           />
         ) : (
           <div className="flex w-full max-w-3xl flex-col px-5">

diff --git a/apps/epic-react/src/templates/purchased-product-template.tsx b/apps/epic-react/src/templates/purchased-product-template.tsx
@@ -200,6 +200,9 @@ const PurchasedProductTemplate: React.FC<ProductPageProps> = ({
                 className="w-full rounded shadow-xl"
                 accentColor="#3b82f6"
                 poster="https://res.cloudinary.com/epic-web/image/upload/v1697358228/after-purchase-video-poster.jpg"
+                metadata={{
+                  video_title: `${product.name} - Welcome Video`,
+                }}
               />
             </div>
           </section>

diff --git a/apps/epic-react/src/templates/tip-template.tsx b/apps/epic-react/src/templates/tip-template.tsx
@@ -131,7 +131,7 @@ const TipTemplate: React.FC<{
         <main className="mx-auto w-full" id="tip">
           <div className="relative z-10 flex items-center justify-center">
             <div className="flex w-full max-w-screen-lg flex-col">
-              <Video ref={muxPlayerRef} tips={tips} />
+              <Video ref={muxPlayerRef} tips={tips} videoTitle={tip.title} />
               {!subscriber && !loadingSubscriber && (
                 <SubscribeForm handleOnSuccess={handleOnSuccess} />
               )}
@@ -186,30 +186,35 @@ const TipTemplate: React.FC<{
   )
 }
 
-const Video: React.FC<any> = React.forwardRef(({tips}, ref: any) => {
-  const {muxPlayerProps, displayOverlay} = useMuxPlayer()
-  const {videoResource} = useVideoResource()
+const Video: React.FC<any> = React.forwardRef(
+  ({tips, videoTitle}, ref: any) => {
+    const {muxPlayerProps, displayOverlay} = useMuxPlayer()
+    const {videoResource} = useVideoResource()
 
-  return (
-    <div className="relative">
-      {displayOverlay && <TipOverlay tips={tips} />}
-      <div
-        className={cx(
-          'flex items-center justify-center  overflow-hidden shadow-gray-600/40 sm:shadow-2xl xl:rounded-b-md',
-          {
-            hidden: displayOverlay,
-          },
-        )}
-      >
-        <MuxPlayer
-          ref={ref}
-          {...(muxPlayerProps as MuxPlayerProps)}
-          playbackId={videoResource?.muxPlaybackId}
-        />
+    return (
+      <div className="relative">
+        {displayOverlay && <TipOverlay tips={tips} />}
+        <div
+          className={cx(
+            'flex items-center justify-center  overflow-hidden shadow-gray-600/40 sm:shadow-2xl xl:rounded-b-md',
+            {
+              hidden: displayOverlay,
+            },
+          )}
+        >
+          <MuxPlayer
+            ref={ref}
+            {...(muxPlayerProps as MuxPlayerProps)}
+            playbackId={videoResource?.muxPlaybackId}
+            metadata={{
+              video_title: videoTitle,
+            }}
+          />
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  },
+)
 
 const RelatedTips: React.FC<{tips: Tip[]; currentTip: Tip}> = ({
   currentTip,

diff --git a/apps/epic-web/src/components/exercise-overlay.tsx b/apps/epic-web/src/components/exercise-overlay.tsx
@@ -225,6 +225,9 @@ const GetStartedVideo: React.FC<{module: Workshop}> = ({module}) => {
           onCuePointChange={(e) => {
             setCuePoint(e.detail.value)
           }}
+          metadata={{
+            video_title: `${module.title} - Get Started Video`,
+          }}
           ref={muxPlayerRef}
           startTime={19}
           playbackId="xSI7201jJf6lumgc9Kxwd5C65Rg8kLa94CcYzifZaL4U"

diff --git a/apps/epic-web/src/pages/conf/2024/[speaker].tsx b/apps/epic-web/src/pages/conf/2024/[speaker].tsx
@@ -268,6 +268,9 @@ const ConfSpeakerTemplate: React.FC<ConfSpeakerPageProps> = ({
               <h3 className="flex pb-2 text-xl font-semibold">Interview</h3>
               <div className="flex aspect-video items-center justify-center rounded border border-gray-800 dark:border-border">
                 <MuxPlayer
+                  metadata={{
+                    video_title: `${speaker.fullName} - Interview`,
+                  }}
                   accentColor="#93A1D7"
                   ref={muxPlayerRef}
                   playbackId={video.muxPlaybackId}

diff --git a/apps/epic-web/src/pages/conf/2025/index.tsx b/apps/epic-web/src/pages/conf/2025/index.tsx
@@ -252,6 +252,9 @@ const Body = ({speakers}: {speakers: Speaker[]}) => {
           className="w-full rounded shadow-xl"
           accentColor="#3b82f6"
           poster={`https://image.mux.com/${promoVideo}/thumbnail.jpg?time=3`}
+          metadata={{
+            video_title: 'Epic Web Conf 2025 Promo Video',
+          }}
         />
       </div>
 

diff --git a/apps/epic-web/src/pages/full-stack/index.tsx b/apps/epic-web/src/pages/full-stack/index.tsx
@@ -226,6 +226,9 @@ const Article: React.FC<{
                 accentColor="#3b82f6"
                 className="w-full rounded"
                 poster="https://res.cloudinary.com/epic-web/image/upload/v1697358228/promo-video-poster.jpg"
+                metadata={{
+                  video_title: 'Full Stack Foundations Product Video',
+                }}
               />
             )
           },

diff --git a/apps/epic-web/src/pages/get-started/index.tsx b/apps/epic-web/src/pages/get-started/index.tsx
@@ -272,6 +272,9 @@ const AppTourVideo = () => {
       playbackId="xSI7201jJf6lumgc9Kxwd5C65Rg8kLa94CcYzifZaL4U"
       accentColor="#3b82f6"
       className="w-full rounded"
+      metadata={{
+        video_title: 'AppTourVideo',
+      }}
     />
   )
 }
diff --git a/apps/epic-web/src/pages/testing/index.tsx b/apps/epic-web/src/pages/testing/index.tsx
@@ -249,6 +249,9 @@ const Article: React.FC<{
           PromoVideo: () => {
             return (
               <MuxPlayer
+                metadata={{
+                  video_title: 'Epic Testing Product Video',
+                }}
                 theme="minimal"
                 playbackId="cqjuBzq74nu4ZlksxTXz7IKqxfaWaR1KjyGQLAc4nQ4"
                 accentColor="#3b82f6"

diff --git a/apps/epic-web/src/templates/embed-template.tsx b/apps/epic-web/src/templates/embed-template.tsx
@@ -220,6 +220,9 @@ const Video: React.FC<
             thumbnailTime={0}
             {...(muxPlayerProps as MuxPlayerProps)}
             playbackId={videoResource.muxPlaybackId}
+            metadata={{
+              video_title: lesson.title,
+            }}
           />
         ) : (
           <div className="flex w-full max-w-lg flex-col px-5">

diff --git a/apps/epic-web/src/templates/purchased-event-template.tsx b/apps/epic-web/src/templates/purchased-event-template.tsx
@@ -201,6 +201,9 @@ const PurchasedEventTemplate = ({
                   className="w-full rounded shadow-xl"
                   accentColor="#3b82f6"
                   poster={welcomeVideoPoster || undefined}
+                  metadata={{
+                    video_title: `${product.title} - Welcome Video`,
+                  }}
                 />
               </div>
             )}

diff --git a/apps/epic-web/src/templates/purchased-product-template.tsx b/apps/epic-web/src/templates/purchased-product-template.tsx
@@ -332,6 +332,9 @@ const PurchasedProductTemplate: React.FC<ProductPageProps> = ({
                 className="w-full rounded shadow-xl"
                 accentColor="#3b82f6"
                 poster={welcomeVideoPoster}
+                metadata={{
+                  video_title: `${product.title} - Welcome Video`,
+                }}
               />
             </div>
           </section>

diff --git a/apps/epic-web/src/templates/talk-template.tsx b/apps/epic-web/src/templates/talk-template.tsx
@@ -296,6 +296,9 @@ const Video: React.FC<{talks: Talk[]; talk: Talk; ref: any}> = React.forwardRef(
             {...(muxPlayerProps as MuxPlayerProps)}
             poster={talk?.videoPosterUrl || undefined}
             playbackId={videoResource?.muxPlaybackId}
+            metadata={{
+              video_title: talk.title,
+            }}
           />
         </div>
       </div>

diff --git a/apps/epic-web/src/templates/tip-template.tsx b/apps/epic-web/src/templates/tip-template.tsx
@@ -139,7 +139,7 @@ const TipTemplate: React.FC<{
         <main className="mx-auto w-full" id="tip">
           <div className="relative z-10 flex items-center justify-center">
             <div className="flex w-full max-w-screen-lg flex-col">
-              <Video ref={muxPlayerRef} tips={tips} />
+              <Video ref={muxPlayerRef} tips={tips} videoTitle={tip.title} />
               {!subscriber && !loadingSubscriber && (
                 <SubscribeForm handleOnSuccess={handleOnSuccess} />
               )}
@@ -200,30 +200,35 @@ const TipTemplate: React.FC<{
   )
 }
 
-const Video: React.FC<any> = React.forwardRef(({tips}, ref: any) => {
-  const {muxPlayerProps, displayOverlay} = useMuxPlayer()
-  const {videoResource} = useVideoResource()
+const Video: React.FC<any> = React.forwardRef(
+  ({tips, videoTitle}, ref: any) => {
+    const {muxPlayerProps, displayOverlay} = useMuxPlayer()
+    const {videoResource} = useVideoResource()
 
-  return (
-    <div className="relative">
-      {displayOverlay && <TipOverlay tips={tips} />}
-      <div
-        className={cx(
-          'flex items-center justify-center  overflow-hidden shadow-gray-600/40 sm:shadow-2xl xl:rounded-b-md',
-          {
-            hidden: displayOverlay,
-          },
-        )}
-      >
-        <MuxPlayer
-          ref={ref}
-          {...(muxPlayerProps as MuxPlayerProps)}
-          playbackId={videoResource?.muxPlaybackId}
-        />
+    return (
+      <div className="relative">
+        {displayOverlay && <TipOverlay tips={tips} />}
+        <div
+          className={cx(
+            'flex items-center justify-center  overflow-hidden shadow-gray-600/40 sm:shadow-2xl xl:rounded-b-md',
+            {
+              hidden: displayOverlay,
+            },
+          )}
+        >
+          <MuxPlayer
+            ref={ref}
+            {...(muxPlayerProps as MuxPlayerProps)}
+            playbackId={videoResource?.muxPlaybackId}
+            metadata={{
+              video_title: videoTitle,
+            }}
+          />
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  },
+)
 
 const RelatedTips: React.FC<{tips: Tip[]; currentTip: Tip}> = ({
   currentTip,

diff --git a/apps/testing-javascript/src/components/landing/access-your-course.tsx b/apps/testing-javascript/src/components/landing/access-your-course.tsx
@@ -140,6 +140,9 @@ const AccessYourCourse: React.FunctionComponent<{
               <MuxPlayer
                 streamType="on-demand"
                 playbackId="JQdURmWoO9fy9QTSY5KvGsD1K7XpPPMXZxyKWqIeqa8"
+                metadata={{
+                  video_title: 'Testing JavaScript - 2020 Course Update',
+                }}
               />
               <Dialog.Close className="absolute right-7 -top-14 rounded-full px-3 py-1 space-x-2 flex items-center bg-gray-100 hover:bg-white duration-200">
                 <span>close</span>

diff --git a/apps/testing-javascript/src/components/playlist/playlist-item.tsx b/apps/testing-javascript/src/components/playlist/playlist-item.tsx
@@ -76,6 +76,9 @@ const PlaylistItem: React.FC<{
               <MuxPlayer
                 streamType="on-demand"
                 playbackId={playlist.introPlaybackId}
+                metadata={{
+                  video_title: playlist.title,
+                }}
               />
               <Dialog.Close className="absolute right-7 -top-14 rounded-full px-3 py-1 space-x-2 flex items-center bg-gray-100 hover:bg-white duration-200">
                 <span>close</span>

diff --git a/apps/testing-javascript/src/templates/landing-template.tsx b/apps/testing-javascript/src/templates/landing-template.tsx
@@ -90,6 +90,9 @@ const LandingTemplate: React.FC<LandingTemplateProps> = ({
               <MuxPlayer
                 streamType="on-demand"
                 playbackId="aYqygpEcRs14JrREocaLqqrTuMY4kZKSV7DwWLJNEb00"
+                metadata={{
+                  video_title: 'Testing JavaScript Product Video',
+                }}
               />
             </div>
           </div>

diff --git a/apps/total-typescript/src/app/_components/video-player.tsx b/apps/total-typescript/src/app/_components/video-player.tsx
@@ -39,6 +39,9 @@ export default function VideoPlayer({
         <MuxPlayer
           playbackId={playbackId}
           className={cn('aspect-video h-full w-full', className)}
+          metadata={{
+            video_title: title,
+          }}
           {...playerProps}
           {...props}
         />

diff --git a/apps/total-typescript/src/pages/welcome/index.tsx b/apps/total-typescript/src/pages/welcome/index.tsx
@@ -178,6 +178,9 @@ const Welcome: React.FC<
               </h2>
               <MuxPlayer
                 accentColor="#06b6d4"
+                metadata={{
+                  video_title: 'Total TypeScript Product Video',
+                }}
                 poster={
                   'https://res.cloudinary.com/total-typescript/image/upload/v1676385817/welcome-video-thumbnail_2x_luri3y.png'
                 }

diff --git a/apps/total-typescript/src/templates/tip-template.tsx b/apps/total-typescript/src/templates/tip-template.tsx
@@ -137,7 +137,7 @@ const TipTemplate: React.FC<{
             })}
           >
             <div className="-mb-1.5 flex w-full max-w-screen-xl flex-col">
-              <Video ref={muxPlayerRef} tips={tips} />
+              <Video ref={muxPlayerRef} tips={tips} videoTitle={tip.title} />
               {!subscriber && !loadingSubscriber && (
                 <SubscribeForm handleOnSuccess={handleOnSuccess} />
               )}
@@ -209,27 +209,32 @@ const TipTemplate: React.FC<{
   )
 }
 
-const Video: React.FC<any> = React.forwardRef(({tips}, ref: any) => {
-  const {muxPlayerProps, displayOverlay} = useMuxPlayer()
-  const {videoResource} = useVideoResource()
+const Video: React.FC<any> = React.forwardRef(
+  ({tips, videoTitle}, ref: any) => {
+    const {muxPlayerProps, displayOverlay} = useMuxPlayer()
+    const {videoResource} = useVideoResource()
 
-  return (
-    <div className="relative aspect-video">
-      {displayOverlay && <TipOverlay tips={tips} />}
-      <div
-        className={cx('', {
-          hidden: displayOverlay,
-        })}
-      >
-        <MuxPlayer
-          ref={ref}
-          {...(muxPlayerProps as MuxPlayerProps)}
-          playbackId={videoResource?.muxPlaybackId}
-        />
+    return (
+      <div className="relative aspect-video">
+        {displayOverlay && <TipOverlay tips={tips} />}
+        <div
+          className={cx('', {
+            hidden: displayOverlay,
+          })}
+        >
+          <MuxPlayer
+            ref={ref}
+            {...(muxPlayerProps as MuxPlayerProps)}
+            playbackId={videoResource?.muxPlaybackId}
+            metadata={{
+              video_title: videoTitle,
+            }}
+          />
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  },
+)
 
 const RelatedTips: React.FC<{tips: Tip[]; currentTip: Tip}> = ({
   currentTip,