feat(components): support vidstack@v1

vuepress-theme-hope · Oct 10, 2023 · d3b1629 · d3b1629
1 parent c00ac31
commit d3b1629
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 151 deletions.
diff --git a/demo/components/src/.vuepress/config.ts b/demo/components/src/.vuepress/config.ts
@@ -60,7 +60,7 @@ export default defineUserConfig({
         "Share",
         "SiteInfo",
         "StackBlitz",
-        // "VidStack",
+        "VidStack",
         "VideoPlayer",
         "XiGua",
         "YouTube",

diff --git a/docs/components/src/.vuepress/theme.ts b/docs/components/src/.vuepress/theme.ts
@@ -86,7 +86,7 @@ export default theme("components", {
         "Share",
         "SiteInfo",
         "StackBlitz",
-        // "VidStack",
+        "VidStack",
         "VideoPlayer",
         "XiGua",
         "YouTube",

diff --git a/docs/components/src/config.md b/docs/components/src/config.md
@@ -20,7 +20,7 @@ icon: gears
     | "Share"
     | "StackBlitz"
     | "SiteInfo"
-    // | "VidStack"
+    | "VidStack"
     | "VideoPlayer"
     | "XiGua"
     | "YouTube";
@@ -43,7 +43,7 @@ Available component names:
 - `"Share"`
 - `"StackBlitz"`
 - `"SiteInfo"`
-<!-- - `"VidStack"` -->
+- `"VidStack"`
 - `"VideoPlayer"`
 - `"XiGua"`
 - `"YouTube"`

diff --git a/docs/components/src/guide/vidstack.md b/docs/components/src/guide/vidstack.md
@@ -4,29 +4,23 @@ title: VidStack
 
 Embed [VidStack](https://www.vidstack.io/) in Markdown files.
 
-::: warning
-
-VidStack has some known issues with Vue. So stop using it until we fixed it.
-
-:::
-
 <!-- more -->
 
 ## Demo
 
 A video player:
 
-<!-- <VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" /> -->
+<VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
 
 ```md
 <VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
 ```
 
 A video player with poster and tracks:
 
-<!-- <VidStack
+<VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack Video Demo"
   poster="/poster.svg"
   :tracks="[
     {
@@ -43,12 +37,12 @@ A video player with poster and tracks:
       srcLang: 'fr',
     },
   ]"
-/> -->
+/>
 
 ```md
 <VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack Video Demo"
   poster="/poster.svg"
   :tracks="[
     {
@@ -70,16 +64,10 @@ A video player with poster and tracks:
 
 An audio player:
 
-<!-- <VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/> -->
+<VidStack src="/sample.mp3" title="VidStack Audio Demo" />
 
 ```md
-<VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/>
+<VidStack src="/sample.mp3" title="VidStack Audio Demo" />
 ```
 
 ## Props

diff --git a/docs/components/src/zh/config.md b/docs/components/src/zh/config.md
@@ -20,7 +20,7 @@ icon: gears
     | "Share"
     | "StackBlitz"
     | "SiteInfo"
-    // | "VidStack"
+    | "VidStack"
     | "VideoPlayer"
     | "XiGua"
     | "YouTube";
@@ -43,7 +43,7 @@ icon: gears
 - `"Share"`
 - `"StackBlitz"`
 - `"SiteInfo"`
-<!-- - `"VidStack"` -->
+- `"VidStack"`
 - `"VideoPlayer"`
 - `"XiGua"`
 - `"YouTube"`

diff --git a/docs/components/src/zh/guide/vidstack.md b/docs/components/src/zh/guide/vidstack.md
@@ -2,12 +2,6 @@
 title: VidStack
 ---
 
-::: warning
-
-VidStack 有一些和 Vue 渲染的已知问题。
-
-:::
-
 在 Markdown 文件中嵌入 [VidStack](https://www.vidstack.io/)。
 
 <!-- more -->
@@ -16,17 +10,17 @@ VidStack 有一些和 Vue 渲染的已知问题。
 
 视频播放器:
 
-<!-- <VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" /> -->
+<VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
 
 ```md
 <VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
 ```
 
 有封面和音轨的播放器:
 
-<!-- <VidStack
+<VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack 示例视频"
   poster="/poster.svg"
   :tracks="[
     {
@@ -43,12 +37,12 @@ VidStack 有一些和 Vue 渲染的已知问题。
       srcLang: 'fr',
     },
   ]"
-/> -->
+/>
 
 ```md
 <VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack 示例视频"
   poster="/poster.svg"
   :tracks="[
     {
@@ -70,16 +64,10 @@ VidStack 有一些和 Vue 渲染的已知问题。
 
 一个音频播放器:
 
-<!-- <VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/> -->
+<VidStack src="/sample.mp3" title="VidStack 示例音频" />
 
 ```md
-<VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/>
+<VidStack src="/sample.mp3" title="VidStack 示例音频" />
 ```
 
 ## 属性

diff --git a/docs/theme/src/.vuepress/theme.ts b/docs/theme/src/.vuepress/theme.ts
@@ -57,7 +57,7 @@ export default theme("theme", {
         "Share",
         "SiteInfo",
         "StackBlitz",
-        // "VidStack",
+        "VidStack",
         "VideoPlayer",
         "YouTube",
       ],

diff --git a/docs/theme/src/config/plugins/others.md b/docs/theme/src/config/plugins/others.md
@@ -26,7 +26,7 @@ Available component which can be used in markdown files are:
 - `"Share"`
 - `"StackBlitz"`
 - `"SiteInfo"`
-<!-- - `"VidStack"` -->
+- `"VidStack"`
 - `"VideoPlayer"`
 - `"XiGua"`
 - `"YouTube"`

diff --git a/docs/theme/src/guide/markdown/components.md b/docs/theme/src/guide/markdown/components.md
@@ -23,7 +23,7 @@ Available components:
 - Share
 - StackBlitz
 - SiteInfo
-<!-- - VidStack -->
+- VidStack
 - VideoPlayer
 - XiGua
 - YouTube
@@ -59,7 +59,7 @@ export default defineUserConfig({
           "Share",
           "SiteInfo",
           "StackBlitz",
-          // "VidStack",
+          "VidStack",
           "VideoPlayer",
           "XiGua",
           "YouTube",
@@ -92,7 +92,7 @@ export default {
           "Share",
           "SiteInfo",
           "StackBlitz",
-          // "VidStack",
+          "VidStack",
           "VideoPlayer",
           "XiGua",
           "YouTube",
@@ -537,7 +537,6 @@ A StackBlitz project with custom settings:
 
 See <ProjectLink name="components" path="/guide/stackblitz.html">StackBlitz</ProjectLink> page for available props.
 
-<!--
 ## VidStack
 
 A video player:
@@ -548,7 +547,7 @@ A video player with poster and tracks:
 
 <VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack Video Demo"
   poster="/poster.svg"
   :tracks="[
     {
@@ -569,10 +568,7 @@ A video player with poster and tracks:
 
 An audio player:
 
-<VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/>
+<VidStack src="/sample.mp3" title="VidStack Audio Demo" />
 
 ::: details Code
 
@@ -587,7 +583,7 @@ A video player with poster and tracks:
 ```md
 <VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack Video Demo"
   poster="/poster.svg"
   :tracks="[
     {
@@ -610,15 +606,12 @@ A video player with poster and tracks:
 An audio player:
 
 ```md
-<VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/>
+<VidStack src="/sample.mp3" title="VidStack Audio Demo" />
 ```
 
 :::
 
-See <ProjectLink name="components" path="/guide/vidstack.html">VidStack</ProjectLink> page for available props. -->
+See <ProjectLink name="components" path="/guide/vidstack.html">VidStack</ProjectLink> page for available props.
 
 ## VideoPlayer
 

diff --git a/docs/theme/src/zh/config/plugins/others.md b/docs/theme/src/zh/config/plugins/others.md
@@ -25,7 +25,7 @@ tag:
 - `"Replit"`
 - `"Share"`
 - `"StackBlitz"`
-<!-- - `"VidStack"` -->
+- `"VidStack"`
 - `"SiteInfo"`
 - `"VideoPlayer"`
 - `"XiGua"`

diff --git a/docs/theme/src/zh/guide/markdown/components.md b/docs/theme/src/zh/guide/markdown/components.md
@@ -59,7 +59,7 @@ export default defineUserConfig({
           "Share",
           "SiteInfo",
           "StackBlitz",
-          // "VidStack",
+          "VidStack",
           "VideoPlayer",
           "XiGua",
           "YouTube",
@@ -92,7 +92,7 @@ export default {
           "Share",
           "SiteInfo",
           "StackBlitz",
-          // "VidStack",
+          "VidStack",
           "VideoPlayer",
           "XiGua",
           "YouTube",
@@ -531,7 +531,6 @@ PDF 浏览器组件。
 
 有关可用属性，请参阅 <ProjectLink name="components" path="/zh/guide/stackblitz.html">StackBlitz</ProjectLink> 页面。
 
-<!--
 ## VidStack
 
 视频播放器:
@@ -542,7 +541,7 @@ PDF 浏览器组件。
 
 <VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack 示例视频"
   poster="/poster.svg"
   :tracks="[
     {
@@ -563,10 +562,7 @@ PDF 浏览器组件。
 
 一个音频播放器:
 
-<VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/>
+<VidStack src="/sample.mp3" title="VidStack 示例音频" />
 
 ::: details 代码
 
@@ -581,7 +577,7 @@ PDF 浏览器组件。
 ```md
 <VidStack
   src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
-  title="VidStack video"
+  title="VidStack 示例视频"
   poster="/poster.svg"
   :tracks="[
     {
@@ -604,15 +600,12 @@ PDF 浏览器组件。
 一个音频播放器:
 
 ```md
-<VidStack
-  src="/sample.mp3"
-  title="A Sample Audio"
-/>
+<VidStack src="/sample.mp3" title="VidStack 示例音频" />
 ```
 
 :::
 
-有关可用属性，请参阅 <ProjectLink name="components" path="/zh/guide/vidstack.html">VidStack</ProjectLink> 页面。 -->
+有关可用属性，请参阅 <ProjectLink name="components" path="/zh/guide/vidstack.html">VidStack</ProjectLink> 页面。
 
 ## VideoPlayer
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -59,7 +59,7 @@
     "mpegts.js": "^1.7.3",
     "plyr": "^3.7.8",
     "qrcode": "^1.5.3",
-    "vidstack": "^0.6.13",
+    "vidstack": "^1.1.10",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "vuepress-plugin-reading-time2": "workspace:*",