site: add videojs-video element (#90)

fix #89
muxinc · Sep 11, 2024 · 9af62f5 · 9af62f5
1 parent f0660cb
commit 9af62f5
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;