site: add videojs-video element

fix #89
muxinc · Sep 10, 2024 · b8d5f8f · b8d5f8f
1 parent f0660cb
commit b8d5f8f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/site/app/_components/ButtonPicker.tsx b/site/app/_components/ButtonPicker.tsx
@@ -12,7 +12,7 @@ export default function ButtonPicker(props: ButtonPickerProps) {
 
  return (
  <>
- <div className="grid grid-cols-[repeat(auto-fill,5.4rem)] sm:grid-cols-[repeat(auto-fill,6rem)] gap-0.5 mb-2">
+ <div className="grid grid-cols-[repeat(auto-fill,5.4rem)] sm:grid-cols-[repeat(auto-fill,max(6rem,100%/10))] gap-0.5 mb-2">
  {Children.map(children, (child: any) =>
  cloneElement(child, {
  type,

diff --git a/site/app/themes/[slug]/page.tsx b/site/app/themes/[slug]/page.tsx
@@ -139,6 +139,11 @@ export default async function Page(props: ThemePageProps) {
  value="jwplayer"
  className="hover:bg-red [&.active]:bg-red"
  />
+ <ButtonPickerOption
+ title="Video.js"
+ value="videojs"
+ className="hover:bg-gray [&.active]:bg-gray"
+ />
  </ButtonPicker>
 
  <h4 className="text-lg font-medium mb-1">Pick your app framework</h4>

diff --git a/site/media-elements.ts b/site/media-elements.ts
@@ -74,6 +74,14 @@ const mediaElements = {
  react: 'jwplayer-video-element/react',
  },
  },
+ videojs: {
+ tag: 'videojs-video',
+ src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',
+ package: {
+ default: 'videojs-video-element',
+ react: 'videojs-video-element/react',
+ },
+ },
 } as const;
 
 export default mediaElements;