From 71a606570dbfd4503a15ac8026b811162036fba6 Mon Sep 17 00:00:00 2001 From: Marc Klingen Date: Sat, 21 Dec 2024 01:41:24 +0100 Subject: [PATCH] chore: upgrade vidstack (#1133) * chore: upgrade vidstack * add back container * fix * load=play --- components/Video.tsx | 65 +++++++++++++------------------------------- package.json | 3 +- pages/_app.tsx | 4 ++- pnpm-lock.yaml | 65 ++++++++++++-------------------------------- 4 files changed, 42 insertions(+), 95 deletions(-) diff --git a/components/Video.tsx b/components/Video.tsx index 6f92961c6..f5a72769f 100644 --- a/components/Video.tsx +++ b/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(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 = ({
- {!gifStyle && !panelDismissed ? ( -
{ - remote.startLoading(); - }} - onClick={() => { - remote.startLoading(); - remote.play(); - setPanelDismissed(true); - }} - > -
- -
-
- - {title && {title}} - {durationString && ( - {durationString} - )} - -
-
- ) : null} - + + + +
); diff --git a/package.json b/package.json index 91c90f6cf..4ab221bf9 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@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", @@ -43,6 +43,7 @@ "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", diff --git a/pages/_app.tsx b/pages/_app.tsx index bb2fd014f..a8a281ff0 100644 --- a/pages/_app.tsx +++ b/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"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e8d2cc1d5..1c6af21dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,8 +63,8 @@ importers: specifier: ^1.1.0 version: 1.1.0(next@15.1.1(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(svelte@4.2.18)(vue@3.4.29(typescript@5.6.3)) '@vidstack/react': - specifier: ^0.6.15 - version: 0.6.15(@types/react@18.3.3)(maverick.js@0.37.0)(react@18.3.1)(vidstack@0.6.15) + specifier: ^1.12.12 + version: 1.12.12(@types/react@18.3.3)(react@18.3.1) ai: specifier: ^3.4.30 version: 3.4.30(react@18.3.1)(solid-js@1.8.17)(sswr@2.1.0(svelte@4.2.18))(svelte@4.2.18)(vue@3.4.29(typescript@5.6.3))(zod@3.23.8) @@ -86,6 +86,9 @@ importers: gpt3-tokenizer: specifier: ^1.1.5 version: 1.1.5 + hls.js: + specifier: ^1.5.18 + version: 1.5.18 langfuse: specifier: ^3.31.3 version: 3.31.3 @@ -724,9 +727,6 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} - '@maverick-js/signals@5.11.5': - resolution: {integrity: sha512-/GO94awrwN9ROYZDMTeByordjvbhcm3CMvB/2aL/sEUy9Va8nM/2GmNgOOe+rrooTGnz8/DzO73xomuBRrnYWw==} - '@mdx-js/mdx@3.0.1': resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==} @@ -1713,14 +1713,12 @@ packages: vue-router: optional: true - '@vidstack/react@0.6.15': - resolution: {integrity: sha512-S8KkYCte84Pqwb8Zd9vuOCe2YuaXqRdtYQ22zSvDUPlS7m8ilYs6ypfHwZzmgSVZdayVU1C703aFMSdcLfpxpg==} - engines: {node: '>=16'} + '@vidstack/react@1.12.12': + resolution: {integrity: sha512-rEwCkZdp/K0FopUU76lgYJqzOZa3AGM2FumQnTPPSCP9jwShYReY9mXgl4/UP5CH3v7MkaVl5ZT67rhfjPxx9Q==} + engines: {node: '>=18'} peerDependencies: '@types/react': ^18.0.0 - maverick.js: 0.37.0 react: ^18.0.0 - vidstack: 0.6.15 '@vue/compiler-core@3.4.29': resolution: {integrity: sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==} @@ -3126,8 +3124,8 @@ packages: highlightjs-vue@1.0.0: resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==} - hls.js@1.5.17: - resolution: {integrity: sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==} + hls.js@1.5.18: + resolution: {integrity: sha512-znxR+2jecWluu/0KOBqUcvVyAB5tLff10vjMGrpAlz1eFY+ZhF1bY3r82V+Bk7WJdk03iTjtja9KFFz5BrqjSA==} hoist-non-react-statics@3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} @@ -3455,10 +3453,6 @@ packages: mathjax-full@3.2.2: resolution: {integrity: sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==} - maverick.js@0.37.0: - resolution: {integrity: sha512-1Dk/9rienLiihlktVvH04ADC2UJTMflC1fOMVQCCaQAaz7hgzDI5i0p/arFbDM52hFFiIcq4RdXtYz47SgsLgw==} - engines: {node: '>=16'} - mdast-util-definitions@5.1.2: resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==} @@ -3537,8 +3531,8 @@ packages: mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - media-captions@0.0.18: - resolution: {integrity: sha512-JW18P6FuHdyLSGwC4TQ0kF3WdNj/+wMw2cKOb8BnmY6vSJGtnwJ+vkYj+IjHOV34j3XMc70HDeB/QYKR7E7fuQ==} + media-captions@1.0.4: + resolution: {integrity: sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==} engines: {node: '>=16'} merge-anything@5.1.7: @@ -4862,10 +4856,6 @@ packages: peerDependencies: typescript: '*' - type-fest@3.13.1: - resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==} - engines: {node: '>=14.16'} - typescript@5.6.3: resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==} engines: {node: '>=14.17'} @@ -5047,10 +5037,6 @@ packages: vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} - vidstack@0.6.15: - resolution: {integrity: sha512-pI2aixBuOpu/LSnRgNJ40tU/KFW+x1X+O2bW1hz946ZZShDM5oqRXF9pavDOuckHAHPgUN9HYUr9vUNTBUPF1Q==} - engines: {node: '>=16'} - vscode-jsonrpc@8.2.0: resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==} engines: {node: '>=14.0.0'} @@ -5865,8 +5851,6 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@maverick-js/signals@5.11.5': {} - '@mdx-js/mdx@3.0.1': dependencies: '@types/estree': 1.0.6 @@ -6638,7 +6622,7 @@ snapshots: cross-env: 7.0.3 detect-gpu: 5.0.59 glsl-noise: 0.0.0 - hls.js: 1.5.17 + hls.js: 1.5.18 maath: 0.10.8(@types/three@0.170.0)(three@0.171.0) meshline: 3.3.1(three@0.171.0) react: 18.3.1 @@ -6959,12 +6943,12 @@ snapshots: svelte: 4.2.18 vue: 3.4.29(typescript@5.6.3) - '@vidstack/react@0.6.15(@types/react@18.3.3)(maverick.js@0.37.0)(react@18.3.1)(vidstack@0.6.15)': + '@vidstack/react@1.12.12(@types/react@18.3.3)(react@18.3.1)': dependencies: + '@floating-ui/dom': 1.6.11 '@types/react': 18.3.3 - maverick.js: 0.37.0 + media-captions: 1.0.4 react: 18.3.1 - vidstack: 0.6.15 '@vue/compiler-core@3.4.29': dependencies: @@ -9043,7 +9027,7 @@ snapshots: highlightjs-vue@1.0.0: {} - hls.js@1.5.17: {} + hls.js@1.5.18: {} hoist-non-react-statics@3.3.2: dependencies: @@ -9337,11 +9321,6 @@ snapshots: mj-context-menu: 0.6.1 speech-rule-engine: 4.0.7 - maverick.js@0.37.0: - dependencies: - '@maverick-js/signals': 5.11.5 - type-fest: 3.13.1 - mdast-util-definitions@5.1.2: dependencies: '@types/mdast': 3.0.15 @@ -9613,7 +9592,7 @@ snapshots: mdn-data@2.0.30: {} - media-captions@0.0.18: {} + media-captions@1.0.4: {} merge-anything@5.1.7: dependencies: @@ -11444,8 +11423,6 @@ snapshots: transitivePeerDependencies: - supports-color - type-fest@3.13.1: {} - typescript@5.6.3: {} ufo@1.5.4: {} @@ -11676,12 +11653,6 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 - vidstack@0.6.15: - dependencies: - maverick.js: 0.37.0 - media-captions: 0.0.18 - type-fest: 3.13.1 - vscode-jsonrpc@8.2.0: {} vscode-languageserver-protocol@3.17.5: