feat(plugin-md-power): add artplayer support (#393)

* feat(plugin-md-power): add `artplayer` support

* docs: update docs

* test: add unit test

docs/.vuepress/notes/zh/theme-guide.ts

@@ -95,6 +95,7 @@ export const themeGuide = defineNoteConfig({
             'pdf',
             'bilibili',
             'youtube',
+            'artplayer',
           ],
         },
       ],

docs/.vuepress/theme.ts

@@ -30,6 +30,7 @@ export const theme: Theme = plumeTheme({
       caniuse: true,
       bilibili: true,
       youtube: true,
+      artPlayer: true,
       codepen: true,
       replit: true,
       codeSandbox: true,

docs/notes/theme/guide/嵌入/artplayer.md

@@ -0,0 +1,170 @@
+---
+title: artPlayer
+icon: icon-park-outline:video
+createTime: 2024/12/21 16:13:54
+permalink: /guide/embed/video/artplayer/
+---
+
+## 概述
+
+主题提供嵌入 自定义来源视频 的功能。
+
+该功能由 [vuepress-plugin-md-power](../../config/plugins/markdownPower.md) 提供支持。
+
+## 配置
+
+该功能默认不启用。你需要在主题配置中开启。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        artPlayer: true,
+      },
+    }
+  })
+})
+```
+
+:::
+
+## 安装
+
+该功能依赖于 `artplayer` 播放器实现，主题默认不安装该依赖，在启用 `artPlayer` 功能时，需要
+进行手动安装
+
+::: npm-to
+
+```sh
+npm i artplayer
+```
+
+:::
+
+artPlayer 播放器默认支持 `'mp4'`, `'mp3'`, `'webm'`, `'ogg'` 格式的视频格式。
+
+同时还支持扩展其他格式的支持。
+
+如果您的视频格式为 `'mpd'`, `'dash'`, 还需要再手动安装 `dashjs` ：
+
+::: npm-to
+
+```sh
+npm i dashjs
+```
+
+:::
+
+如果您的视频格式为 `'m3u8'`, `'hls'`, 还需要再手动安装 `hls.js` ：
+
+::: npm-to
+
+```sh
+npm i hls.js
+```
+
+:::
+
+如果您的视频格式为 `'ts'`, `'flv'`, 还需要再手动安装 `mpegts.js` ：
+
+::: npm-to
+
+```sh
+npm i mpegts.js
+```
+
+:::
+
+## markdown 语法
+
+```md
+@[artPlayer](src)
+```
+
+添加配置项：
+
+```md
+@[artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"](src)
+```
+
+- `src`: 视频链接地址
+
+**配置项说明：**
+
+- `width`： 视频宽度
+- `height`： 视频高度
+- `ratio`： 视频比例，默认 `16:9`
+- `type`: 视频格式，默认从视频链接的文件地址中解析获取
+- `autoplay`： 是否自动播放
+- `muted`: 是否静音，autoplay 时，默认为 `true`
+- `volume`： 音量大小，范围为 `0 - 1`
+- `poster`：视频封面图链接地址
+- `auto-mini`: 当播放器滚动到浏览器视口以外时，自动进入 `迷你播放` 模式
+
+## 全局组件
+
+主题提供了全局组件 `<ArtPlayer />` 以支持更灵活丰富的使用方式。
+
+### Props
+
+|字段 |类型 |描述 |
+| -- | -- | -- |
+| src | `string` | 必填，视频播放地址 |
+| type | `string` | 选填，视频格式，默认从 `src` 中截取 |
+| width | `string` | 选填， 宽度， 默认 `100%` |
+| height | `string` | 选填，高度 |
+| ratio | `string` | 选填，宽高比，默认 `16:9` |
+
+更多 `Props` 请参考 [artPlayer 文档](https://artplayer.org/document/start/option.html) 主题支持所有选项。
+
+## 示例
+
+::: tip 说明
+示例中的视频资源来自 [artplayer.org](https://artplayer.org) 。
+:::
+
+**输入：**
+
+```md
+@[artPlayer](https://artplayer.org/assets/sample/video.mp4)
+```
+
+**输出：**
+
+@[artPlayer](https://artplayer.org/assets/sample/video.mp4)
+
+**输入：**
+
+```md
+<ArtPlayer
+  src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
+  fullscreen
+/>
+```
+
+**输出：**
+
+<ArtPlayer
+  src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
+  fullscreen
+/>
+
+## 说明
+
+markdown 语法 `@[artPlayer](src)` 在主题内部转换为了 `<ArtPlayer />` 组件，它等价于
+
+```md
+<ArtPlayer
+  src="src"
+  fullscreen
+  flip
+  playback-rate
+  aspect-ratio
+  setting
+  pip
+/>
+```

docs/notes/theme/guide/嵌入/bilibili.md

@@ -1,18 +1,15 @@
 ---
 title: Bilibili 视频
-author: pengzhanbo
 icon: ri:bilibili-fill
 createTime: 2024/03/28 12:26:47
 permalink: /guide/embed/video/bilibili/
 ---
 
 ## 概述
 
-有时候，你想在你的文档中嵌入视频，以提高内容的表达能力。
-
 主题提供了 嵌入 Bilibili 视频 的功能。
 
-该功能由 [vuepress-plugin-md-power](/) 提供支持。
+该功能由 [vuepress-plugin-md-power](../../config/plugins/markdownPower.md) 提供支持。
 
 ## 配置
 

docs/notes/theme/guide/嵌入/youtube.md

@@ -1,18 +1,15 @@
 ---
 title: Youtube 视频
-author: pengzhanbo
 icon: mdi:youtube
 createTime: 2024/03/28 14:30:33
 permalink: /guide/embed/video/youtube/
 ---
 
 ## 概述
 
-有时候，你想在你的文档中嵌入视频，以提高内容的表达能力。
-
 主题提供了 嵌入 Youtube 视频 的功能。
 
-该功能由 [vuepress-plugin-md-power](/) 提供支持。
+该功能由 [vuepress-plugin-md-power](../../config/plugins/markdownPower.md) 提供支持。
 
 ## 配置
 

plugins/plugin-md-power/__test__/__snapshots__/artPlayerPlugin.spec.ts.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`artPlayerPlugin > should not work 1`] = `
+"<ArtPlayer src="" fullscreen flip playback-rate aspect-ratio setting pip   :volume="0.75" width="100%"/><p>@[artPlayer]xxx</p>
+<p>@[ artPlayer]123456</p>
+<p>@<a href="/xxx.mp4"> artPlayer</a></p>
+<ArtPlayer src="/xxx.xxx" fullscreen flip playback-rate aspect-ratio setting pip  type="xxx"  :volume="0.75" width="100%"/>"
+`;
+
+exports[`artPlayerPlugin > should work 1`] = `"<ArtPlayer src="/xxx.mp4" fullscreen flip playback-rate aspect-ratio setting pip   :volume="0.75" width="100%"/><ArtPlayer src="/xxx.m3u8" fullscreen flip playback-rate aspect-ratio setting pip  loop autoplay muted  :volume="0.75" width="100%"/><ArtPlayer src="/xxx.flv" fullscreen flip playback-rate aspect-ratio setting pip  autoplay muted  :volume="0.55" width="100%"/><ArtPlayer src="/xxx.mpd" fullscreen flip playback-rate aspect-ratio setting pip  auto-min poster="xx.jpg"  :volume="0.75" width="100%" height="600px" ratio="16:9"/><ArtPlayer src="/xxx" fullscreen flip playback-rate aspect-ratio setting pip  type="mp3"  :volume="0.75" width="100%"/>"`;

plugins/plugin-md-power/__test__/artPlayerPlugin.spec.ts

@@ -0,0 +1,46 @@
+import MarkdownIt from 'markdown-it'
+import { describe, expect, it } from 'vitest'
+import { artPlayerPlugin } from '../src/node/embed/video/artPlayer.js'
+
+function createMarkdown() {
+  return MarkdownIt().use((md) => {
+    md.block.ruler.before('code', 'import_code', () => false)
+    md.renderer.rules.import_code = () => ''
+  }).use(artPlayerPlugin)
+}
+
+describe('artPlayerPlugin', () => {
+  it('should work', () => {
+    const md = createMarkdown()
+    const code = `\
+@[artPlayer](/xxx.mp4)
+
+@[artPlayer loop autoplay](/xxx.m3u8)
+
+@[artPlayer autoplay muted volume="0.55"](/xxx.flv)
+
+@[artPlayer width="100%" height="600px" ratio="16:9" auto-mini poster="xx.jpg"](/xxx.mpd)
+
+@[artPlayer type="mp3"](/xxx)
+`
+
+    expect(md.render(code)).toMatchSnapshot()
+  })
+
+  it('should not work', () => {
+    const md = createMarkdown()
+    const code = `\
+@[artPlayer]()
+
+@[artPlayer]xxx
+
+@[ artPlayer]123456
+
+@[ artPlayer](/xxx.mp4)
+
+@[artPlayer type="xxx"](/xxx.xxx)
+`
+
+    expect(md.render(code)).toMatchSnapshot()
+  })
+})

plugins/plugin-md-power/package.json

@@ -37,12 +37,28 @@
     "tsup": "tsup --config tsup.config.ts"
   },
   "peerDependencies": {
+    "artplayer": "^5.2.0",
+    "dashjs": "^4.7.4",
+    "hls.js": "^1.5.18",
     "markdown-it": "^14.0.0",
+    "mpegts.js": "^1.7.3",
     "vuepress": "catalog:"
   },
   "peerDependenciesMeta": {
+    "artplayer": {
+      "optional": true
+    },
+    "dashjs": {
+      "optional": true
+    },
+    "hls.js": {
+      "optional": true
+    },
     "markdown-it": {
       "optional": true
+    },
+    "mpegts.js": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -65,7 +81,11 @@
     "vue": "catalog:"
   },
   "devDependencies": {
-    "@types/markdown-it": "^14.1.2"
+    "@types/markdown-it": "^14.1.2",
+    "artplayer": "^5.2.1",
+    "dashjs": "^4.7.4",
+    "hls.js": "^1.5.18",
+    "mpegts.js": "^1.7.3"
   },
   "publishConfig": {
     "access": "public"