feat: add vidstack support

2026-02-21 09:14:42 +08:00 · 2025-06-25 13:59:09 +08:00
parent 5bec179fd7
commit 537e07057a
3 changed files with 625 additions and 829 deletions
--- a/package.json
+++ b/package.json
@@ -20,19 +20,20 @@
  "dependencies": {
    "@headlessui/react": "^2.2.4",
    "@heroicons/react": "^2.2.0",
-    "artplayer": "^5.2.3",
+    "@vidstack/react": "^1.12.13",
    "clsx": "^2.0.0",
    "framer-motion": "^12.18.1",
    "hls.js": "^1.6.5",
    "lucide-react": "^0.438.0",
    "next": "^14.2.23",
+    "next-pwa": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.4.0",
    "swiper": "^11.2.8",
    "tailwind-merge": "^2.6.0",
-    "zod": "^3.24.1",
-    "next-pwa": "^5.6.0"
+    "vidstack": "^0.6.15",
+    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^16.3.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,9 @@ importers:
      '@heroicons/react':
        specifier: ^2.2.0
        version: 2.2.0(react@18.3.1)
-      artplayer:
-        specifier: ^5.2.3
-        version: 5.2.3
+      '@vidstack/react':
+        specifier: ^1.12.13
+        version: 1.12.13(@types/react@18.3.23)(react@18.3.1)
      clsx:
        specifier: ^2.0.0
        version: 2.1.1
@@ -50,6 +50,9 @@ importers:
      tailwind-merge:
        specifier: ^2.6.0
        version: 2.6.0
+      vidstack:
+        specifier: ^0.6.15
+        version: 0.6.15
      zod:
        specifier: ^3.24.1
        version: 3.25.67
@@ -1039,6 +1042,9 @@ packages:
  '@jridgewell/trace-mapping@0.3.9':
    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}

+  '@maverick-js/signals@5.11.5':
+    resolution: {integrity: sha512-/GO94awrwN9ROYZDMTeByordjvbhcm3CMvB/2aL/sEUy9Va8nM/2GmNgOOe+rrooTGnz8/DzO73xomuBRrnYWw==}
+
  '@napi-rs/wasm-runtime@0.2.11':
    resolution: {integrity: sha512-9DPkXtvHydrcOsopiYpUgPHpmj0HWZKMUnL2dZqpvC42lsratuBG06V5ipyno0fUek5VlFsNQ+AcFATSrJXgMA==}

@@ -1605,6 +1611,13 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@vidstack/react@1.12.13':
+    resolution: {integrity: sha512-zyNydy1+HtoK6cJ8EmqFNkPPGHIFMrr2KH+ef3654EqXx4IcJ8A5LCNMXBuALQE8IMxtk040JMoR9OKyeXjBOQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+
  '@webassemblyjs/ast@1.14.1':
    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}

@@ -1823,9 +1836,6 @@ packages:
    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
    engines: {node: '>=0.10.0'}

-  artplayer@5.2.3:
-    resolution: {integrity: sha512-WaOZQrpZn/L+GgI2f0TEsoAL3Wb+v16Mu0JmWh7qKFYuvr11WNt3dWhWeIaCfoHy3NtkCWM9jTP+xwwsxdElZQ==}
-
  ast-types-flow@0.0.8:
    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}

@@ -3515,12 +3525,24 @@ packages:
    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
    engines: {node: '>= 0.4'}

+  maverick.js@0.37.0:
+    resolution: {integrity: sha512-1Dk/9rienLiihlktVvH04ADC2UJTMflC1fOMVQCCaQAaz7hgzDI5i0p/arFbDM52hFFiIcq4RdXtYz47SgsLgw==}
+    engines: {node: '>=16'}
+
  mdn-data@2.0.28:
    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}

  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==}
+    engines: {node: '>=16'}
+
+  media-captions@1.0.4:
+    resolution: {integrity: sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==}
+    engines: {node: '>=16'}
+
  meow@8.1.2:
    resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
    engines: {node: '>=10'}
@@ -3722,9 +3744,6 @@ packages:
    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
    engines: {node: '>=6'}

-  option-validator@2.0.6:
-    resolution: {integrity: sha512-tmZDan2LRIRQyhUGvkff68/O0R8UmF+Btmiiz0SmSw2ng3CfPZB9wJlIjHpe/MKUZqyIZkVIXCrwr1tIN+0Dzg==}
-
  optionator@0.9.4:
    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
    engines: {node: '>= 0.8.0'}
@@ -4628,6 +4647,10 @@ packages:
    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
    engines: {node: '>=8'}

+  type-fest@3.13.1:
+    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
+    engines: {node: '>=14.16'}
+
  typed-array-buffer@1.0.3:
    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
    engines: {node: '>= 0.4'}
@@ -4724,6 +4747,10 @@ packages:
  validate-npm-package-license@3.0.4:
    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}

+  vidstack@0.6.15:
+    resolution: {integrity: sha512-pI2aixBuOpu/LSnRgNJ40tU/KFW+x1X+O2bW1hz946ZZShDM5oqRXF9pavDOuckHAHPgUN9HYUr9vUNTBUPF1Q==}
+    engines: {node: '>=16'}
+
  w3c-hr-time@1.0.2:
    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
@@ -6173,6 +6200,8 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

+  '@maverick-js/signals@5.11.5': {}
+
  '@napi-rs/wasm-runtime@0.2.11':
    dependencies:
      '@emnapi/core': 1.4.3
@@ -6756,6 +6785,13 @@ snapshots:
  '@unrs/resolver-binding-win32-x64-msvc@1.9.0':
    optional: true

+  '@vidstack/react@1.12.13(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.1
+      '@types/react': 18.3.23
+      media-captions: 1.0.4
+      react: 18.3.1
+
  '@webassemblyjs/ast@1.14.1':
    dependencies:
      '@webassemblyjs/helper-numbers': 1.13.2
@@ -7018,10 +7054,6 @@ snapshots:

  arrify@1.0.1: {}

-  artplayer@5.2.3:
-    dependencies:
-      option-validator: 2.0.6
-
  ast-types-flow@0.0.8: {}

  astral-regex@2.0.0: {}
@@ -9147,10 +9179,19 @@ snapshots:

  math-intrinsics@1.1.0: {}

+  maverick.js@0.37.0:
+    dependencies:
+      '@maverick-js/signals': 5.11.5
+      type-fest: 3.13.1
+
  mdn-data@2.0.28: {}

  mdn-data@2.0.30: {}

+  media-captions@0.0.18: {}
+
+  media-captions@1.0.4: {}
+
  meow@8.1.2:
    dependencies:
      '@types/minimist': 1.2.5
@@ -9375,10 +9416,6 @@ snapshots:
    dependencies:
      mimic-fn: 2.1.0

-  option-validator@2.0.6:
-    dependencies:
-      kind-of: 6.0.3
-
  optionator@0.9.4:
    dependencies:
      deep-is: 0.1.4
@@ -10257,6 +10294,8 @@ snapshots:

  type-fest@0.8.1: {}

+  type-fest@3.13.1: {}
+
  typed-array-buffer@1.0.3:
    dependencies:
      call-bound: 1.0.4
@@ -10384,6 +10423,12 @@ snapshots:
      spdx-correct: 3.2.0
      spdx-expression-parse: 3.0.1

+  vidstack@0.6.15:
+    dependencies:
+      maverick.js: 0.37.0
+      media-captions: 0.0.18
+      type-fest: 3.13.1
+
  w3c-hr-time@1.0.2:
    dependencies:
      browser-process-hrtime: 1.0.0
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx