chore: upgrade vidstack (#1133)

* chore: upgrade vidstack

* add back container

* fix

* load=play

components/Video.tsx

@@ -1,12 +1,16 @@
 import { cn } from "@/lib/utils";
 import {
   MediaPlayer,
-  MediaOutlet,
+  MediaProvider,
   useMediaRemote,
-  useMediaStore,
+  Poster,
 } from "@vidstack/react";
-import { Play } from "lucide-react";
-import { useState, useRef, useEffect } from "react";
+import {
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from "@vidstack/react/player/layouts/default";
+
+import { useRef, useEffect } from "react";
 
 export const CloudflareVideo = ({
   videoId,
@@ -55,17 +59,9 @@ export const Video = ({
   className?: string;
   title?: string;
 }) => {
-  const [panelDismissed, setPanelDismissed] = useState(false);
   const mediaPlayerRef = useRef(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const remote = useMediaRemote(mediaPlayerRef);
-  const { duration } = useMediaStore(mediaPlayerRef);
-
-  const durationString = duration
-    ? `${Math.floor(duration / 60)}:${String(
-        Math.floor(duration % 60)
-      ).padStart(2, "0")} min`
-    : null;
 
   useEffect(() => {
     if (!gifStyle) return;
@@ -104,48 +100,25 @@ export const Video = ({
     <div ref={containerRef}>
       <MediaPlayer
         ref={mediaPlayerRef}
+        viewType="video"
         src={src}
-        controls={gifStyle || panelDismissed}
-        autoplay={false} // We'll handle autoplay ourselves
+        autoPlay={false} // We'll handle autoplay ourselves
         muted={gifStyle}
         loop={gifStyle}
-        load={gifStyle ? "eager" : "custom"}
-        playsinline={gifStyle}
-        aspectRatio={aspectRatio}
+        load={gifStyle ? "eager" : "play"}
+        playsInline={gifStyle}
+        aspectRatio={aspectRatio?.toString()}
+        title={title}
+        poster={poster}
         className={cn(
           "my-4 overflow-hidden rounded-lg shadow-lg ring-1 ring-slate-700 bg-cover object-cover",
           className
         )}
       >
-        {!gifStyle && !panelDismissed ? (
-          <div
-            className="group cursor-pointer absolute inset-0 z-10 flex flex-col justify-center items-center bg-cover"
-            style={{
-              backgroundImage: poster ? `url(${poster})` : undefined,
-            }}
-            onMouseMove={() => {
-              remote.startLoading();
-            }}
-            onClick={() => {
-              remote.startLoading();
-              remote.play();
-              setPanelDismissed(true);
-            }}
-          >
-            <div className="p-3 md:p-6 rounded-full bg-black/80 group-hover:bg-black/90 group-hover:ring-8 ring-black/20 transition flex">
-              <Play className="h-6 w-6 text-white" />
-            </div>
-            <div className="mt-3 md:mt-6 transition-opacity duration-300">
-              <span className="flex gap-2 text-xs md:text-sm font-semibold bg-black/80 group-hover:bg-black/90 transition-all text-white py-1 px-3 rounded-full">
-                {title && <span>{title}</span>}
-                {durationString && (
-                  <span className="text-white/70">{durationString}</span>
-                )}
-              </span>
-            </div>
-          </div>
-        ) : null}
-        <MediaOutlet />
+        <MediaProvider>
+          <Poster className="vds-poster" />
+        </MediaProvider>
+        <DefaultVideoLayout icons={defaultLayoutIcons} />
       </MediaPlayer>
     </div>
   );

package.json

@@ -35,14 +35,15 @@
     "@tanstack/react-table": "^8.20.6",
     "@vercel/og": "^0.6.4",
     "@vercel/speed-insights": "^1.1.0",
-    "@vidstack/react": "^0.6.15",
+    "@vidstack/react": "^1.12.12",
     "ai": "^3.4.30",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.14.0",
     "geist": "^1.3.1",
     "gpt3-tokenizer": "^1.1.5",
+    "hls.js": "^1.5.18",
     "langfuse": "^3.31.3",
     "lucide-react": "^0.468.0",
     "next": "^15.1.1",

pages/_app.tsx

@@ -1,5 +1,7 @@
 import "../style.css";
-import "vidstack/styles/base.css";
+import "@vidstack/react/player/styles/default/theme.css";
+import "@vidstack/react/player/styles/default/layouts/audio.css";
+import "@vidstack/react/player/styles/default/layouts/video.css";
 import "../src/overrides.css";
 import Script from "next/script";
 import { useEffect } from "react";