Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add post metadata to mux player #1796

Merged
merged 6 commits into from
Jan 15, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/epic-react/src/components/exercise-overlay.tsx
Original file line number Diff line number Diff line change
@@ -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"
3 changes: 3 additions & 0 deletions apps/epic-react/src/components/landing/intro-tour-video.tsx
Original file line number Diff line number Diff line change
@@ -26,6 +26,9 @@ const IntroTourVideo = () => {
className="block"
ref={playerRef}
poster={poster}
metadata={{
video_title: 'IntroTourVideo',
}}
style={
{
'--seek-backward-button': 'none',
3 changes: 3 additions & 0 deletions apps/epic-react/src/pages/get-started/index.tsx
Original file line number Diff line number Diff line change
@@ -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"
3 changes: 3 additions & 0 deletions apps/epic-react/src/templates/embed-template.tsx
Original file line number Diff line number Diff line change
@@ -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">
3 changes: 3 additions & 0 deletions apps/epic-react/src/templates/purchased-product-template.tsx
Original file line number Diff line number Diff line change
@@ -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>
51 changes: 28 additions & 23 deletions apps/epic-react/src/templates/tip-template.tsx
Original file line number Diff line number Diff line change
@@ -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,
3 changes: 3 additions & 0 deletions apps/epic-web/src/components/exercise-overlay.tsx
Original file line number Diff line number Diff line change
@@ -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"
3 changes: 3 additions & 0 deletions apps/epic-web/src/pages/conf/2024/[speaker].tsx
Original file line number Diff line number Diff line change
@@ -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}
3 changes: 3 additions & 0 deletions apps/epic-web/src/pages/conf/2025/index.tsx
Original file line number Diff line number Diff line change
@@ -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>

3 changes: 3 additions & 0 deletions apps/epic-web/src/pages/full-stack/index.tsx
Original file line number Diff line number Diff line change
@@ -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',
}}
/>
)
},
3 changes: 3 additions & 0 deletions apps/epic-web/src/pages/get-started/index.tsx
Original file line number Diff line number Diff line change
@@ -272,6 +272,9 @@ const AppTourVideo = () => {
playbackId="xSI7201jJf6lumgc9Kxwd5C65Rg8kLa94CcYzifZaL4U"
accentColor="#3b82f6"
className="w-full rounded"
metadata={{
video_title: 'AppTourVideo',
}}
/>
)
}
3 changes: 3 additions & 0 deletions apps/epic-web/src/pages/testing/index.tsx
Original file line number Diff line number Diff line change
@@ -249,6 +249,9 @@ const Article: React.FC<{
PromoVideo: () => {
return (
<MuxPlayer
metadata={{
video_title: 'Epic Testing Product Video',
}}
theme="minimal"
playbackId="cqjuBzq74nu4ZlksxTXz7IKqxfaWaR1KjyGQLAc4nQ4"
accentColor="#3b82f6"
3 changes: 3 additions & 0 deletions apps/epic-web/src/templates/embed-template.tsx
Original file line number Diff line number Diff line change
@@ -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">
3 changes: 3 additions & 0 deletions apps/epic-web/src/templates/purchased-event-template.tsx
Original file line number Diff line number Diff line change
@@ -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>
)}
3 changes: 3 additions & 0 deletions apps/epic-web/src/templates/purchased-product-template.tsx
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions apps/epic-web/src/templates/talk-template.tsx
Original file line number Diff line number Diff line change
@@ -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>
51 changes: 28 additions & 23 deletions apps/epic-web/src/templates/tip-template.tsx
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions apps/testing-javascript/src/templates/landing-template.tsx
Original file line number Diff line number Diff line change
@@ -90,6 +90,9 @@ const LandingTemplate: React.FC<LandingTemplateProps> = ({
<MuxPlayer
streamType="on-demand"
playbackId="aYqygpEcRs14JrREocaLqqrTuMY4kZKSV7DwWLJNEb00"
metadata={{
video_title: 'Testing JavaScript Product Video',
}}
/>
</div>
</div>
3 changes: 3 additions & 0 deletions apps/total-typescript/src/app/_components/video-player.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
3 changes: 3 additions & 0 deletions apps/total-typescript/src/pages/welcome/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
}
45 changes: 25 additions & 20 deletions apps/total-typescript/src/templates/tip-template.tsx
Original file line number Diff line number Diff line change
@@ -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,
Loading
Loading