vuepress-plugin-md-power 1.0.0-rc.120 → 1.0.0-rc.122

package/lib/client/components/ArtPlayer.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type ArtPlayer from 'artplayer'
+import type { Option as ArtPlayerInitOptions } from 'artplayer/types/option.js'
+import { isLinkHttp } from '@vuepress/helper/client'
+import { useCssVar } from '@vueuse/core'
+import { onMounted, onUnmounted, ref, toRefs } from 'vue'
+import { usePageLang, withBase } from 'vuepress/client'
+import { useSize } from '../composables/size.js'
+import { ART_PLAYER_SUPPORTED_VIDEO_TYPES, installed } from '../options.js'
+import Loading from './icons/Loading.vue'
+
+type CustomType = Record<string, (this: ArtPlayer, video: HTMLVideoElement, url: string, art: ArtPlayer) => any>
+
+const props = withDefaults(defineProps<{
+  src: string
+  type?: string
+  width?: string
+  height?: string
+  ratio?: string
+} & Omit<ArtPlayerInitOptions, 'container' | 'url' | 'type'>>(), {
+  hotkey: true,
+  mutex: true,
+  playsInline: true,
+})
+
+const loaded = ref(false)
+const lang = usePageLang()
+const brandColor = useCssVar('--vp-c-brand-1')
+const { el, width, height, resize } = useSize<HTMLDivElement>(toRefs(props))
+
+let player: ArtPlayer | null = null
+
+async function createPlayer() {
+  if (!el.value)
+    return
+
+  loaded.value = false
+  const { default: ArtPlayer } = await import(
+    /* webpackChunkName: "artplayer" */ 'artplayer'
+  )
+  loaded.value = true
+  const { src, type: _t, width: _w, height: _h, ratio: _r, ...opt } = props
+  const { customType = {}, ...options } = opt
+  Object.keys(options).forEach((key) => {
+    if (typeof options[key] === 'undefined') {
+      delete options[key]
+    }
+  })
+  const type = props.type ?? src.split('.').pop() ?? ''
+  const url = isLinkHttp(src) ? src : withBase(src)
+
+  if (!ART_PLAYER_SUPPORTED_VIDEO_TYPES.includes(type)) {
+    console.error(`Unsupported video type: ${type}`)
+    return
+  }
+
+  player = new ArtPlayer({
+    container: el.value,
+    url,
+    type,
+    ...{
+      lang: lang.value.split('-')[0] === 'zh' ? 'zh-cn' : 'en',
+      volume: 0.75,
+      useSSR: false,
+      theme: brandColor.value ?? '#5086a1',
+    },
+    ...options,
+    customType: {
+      ...initCustomType(type),
+      ...customType,
+    },
+  })
+}
+
+function initCustomType(type: string): CustomType {
+  const customType: CustomType = {}
+
+  if ((type === 'mpd' || type === 'dash') && installed.dashjs) {
+    customType[type] = async function (video, url, art) {
+      const dashjs = (await import(/* webpackChunkName: "dashjs" */ 'dashjs')).default
+      if (dashjs.supportsMediaSource()) {
+        const dashPlayer = dashjs.MediaPlayer().create()
+        dashPlayer.initialize(video, url, props.autoplay, 0)
+        art.on('destroy', () => dashPlayer.destroy())
+      }
+    }
+  }
+
+  if (type === 'm3u8' || type === 'hls') {
+    customType[type] = async function (video, url, art) {
+      if (video.canPlayType('application/x-mpegURL')
+        || video.canPlayType('application/vnd.apple.mpegURL')) {
+        video.src = url
+        return
+      }
+      if (!installed.hlsjs)
+        return
+
+      const Hls = (await import(/* webpackChunkName: "hls.js" */ 'hls.js')).default
+      if (Hls.isSupported()) {
+        const hls = new Hls()
+        hls.attachMedia(video)
+        hls.on(Hls.Events.MEDIA_ATTACHED, () => hls.loadSource(url))
+        art.on('destroy', () => hls.destroy())
+      }
+    }
+  }
+
+  if ((type === 'ts' || type === 'flv') && installed.mpegtsjs) {
+    customType[type] = async function (video, url, art) {
+      const mpegts = (await import(/* webpackChunkName: "mpegts.js" */ 'mpegts.js/dist/mpegts.js')).default
+      if (mpegts.isSupported()) {
+        const flv = mpegts.createPlayer({ type: 'flv', url })
+
+        flv.attachMediaElement(video)
+        flv.load()
+        art.on('destroy', () => flv.destroy())
+      }
+    }
+  }
+
+  return customType
+}
+
+onMounted(async () => {
+  await createPlayer()
+  resize()
+})
+
+onUnmounted(() => {
+  player?.destroy()
+  player = null
+})
+</script>
+
+<template>
+  <div class="vp-artplayer-wrapper">
+    <div ref="el" class="vp-artplayer" :style="{ width, height }" />
+    <Loading v-if="!loaded" absolute />
+  </div>
+</template>
+
+<style>
+.vp-artplayer-wrapper {
+  position: relative;
+}
+
+.vp-artplayer {
+  margin: 16px 0;
+}
+
+@media (min-width: 768px) {
+  .vp-artplayer {
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: var(--vp-shadow-2);
+    transition: box-shadow var(--vp-t-color);
+  }
+}
+</style>

package/lib/client/options.d.ts

@@ -1,5 +1,11 @@
 import { MarkdownPowerPluginOptions } from '../shared/index.js';
 
 declare const pluginOptions: MarkdownPowerPluginOptions;
+declare const installed: {
+    dashjs: boolean;
+    hlsjs: boolean;
+    mpegtsjs: boolean;
+};
+declare const ART_PLAYER_SUPPORTED_VIDEO_TYPES: string[];
 
-export { pluginOptions };
+export { ART_PLAYER_SUPPORTED_VIDEO_TYPES, installed, pluginOptions };

package/lib/client/options.js

@@ -1,5 +1,22 @@
 // src/client/options.ts
 var pluginOptions = __MD_POWER_INJECT_OPTIONS__;
+var installed = {
+  dashjs: __MD_POWER_DASHJS_INSTALLED__,
+  hlsjs: __MD_POWER_HLSJS_INSTALLED__,
+  mpegtsjs: __MD_POWER_MPEGTSJS_INSTALLED__
+};
+var ART_PLAYER_SUPPORTED_VIDEO_TYPES = ["mp4", "mp3", "webm", "ogg"];
+if (installed.dashjs) {
+  ART_PLAYER_SUPPORTED_VIDEO_TYPES.push("mpd", "dash");
+}
+if (installed.hlsjs) {
+  ART_PLAYER_SUPPORTED_VIDEO_TYPES.push("m3u8", "hls");
+}
+if (installed.mpegtsjs) {
+  ART_PLAYER_SUPPORTED_VIDEO_TYPES.push("ts", "flv");
+}
 export {
+  ART_PLAYER_SUPPORTED_VIDEO_TYPES,
+  installed,
   pluginOptions
 };

package/lib/node/index.d.ts

@@ -200,6 +200,12 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     youtube?: boolean;
+    /**
+     * 是否启用 artPlayer 视频嵌入
+     *
+     * `@[artPlayer](url)`
+     */
+    artPlayer?: boolean;
     /**
      * 是否启用 codepen 嵌入
      *
@@ -295,6 +301,16 @@ interface YoutubeTokenMeta extends SizeOptions {
     start?: string | number;
     end?: string | number;
 }
+interface ArtPlayerTokenMeta extends SizeOptions {
+    muted?: boolean;
+    autoplay?: boolean;
+    autoMini?: boolean;
+    loop?: boolean;
+    volume?: number;
+    poster?: string;
+    url: string;
+    type?: string;
+}
 
 interface ImgSize {
     width: number;
@@ -304,4 +320,4 @@ declare function resolveImageSize(app: App, url: string, remote?: boolean): Prom
 
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 
-export { type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodeTabsOptions, type CodepenTokenMeta, type FileTreeIconMode, type FileTreeOptions, type IconsOptions, type JSFiddleTokenMeta, type MarkdownPowerPluginOptions, type NpmToOptions, type NpmToPackageManager, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };
+export { type ArtPlayerTokenMeta, type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodeTabsOptions, type CodepenTokenMeta, type FileTreeIconMode, type FileTreeOptions, type IconsOptions, type JSFiddleTokenMeta, type MarkdownPowerPluginOptions, type NpmToOptions, type NpmToPackageManager, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };

package/lib/node/index.js

@@ -212,6 +212,7 @@ async function resolveImageSize(app, url, remote = false) {
 
 // src/node/plugin.ts
 import { addViteOptimizeDepsInclude } from "@vuepress/helper";
+import { isPackageExists as isPackageExists2 } from "local-pkg";
 
 // src/node/container/index.ts
 import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
@@ -255,6 +256,18 @@ function cardPlugin(md) {
     before: () => "<VPCardGrid>",
     after: () => "</VPCardGrid>"
   });
+  createContainerPlugin(md, "card-masonry", {
+    before: (info) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      let cols;
+      if (attrs2.cols) {
+        cols = attrs2.cols[0] === "{" ? attrs2.cols : Number.parseInt(`${attrs2.cols}`);
+      }
+      const gap = Number.parseInt(`${attrs2.gap}`);
+      return `<VPCardMasonry${cols ? ` :cols="${cols}"` : ""}${gap >= 0 ? ` :gap="${gap}"` : ""}>`;
+    },
+    after: () => "</VPCardMasonry>"
+  });
 }
 
 // src/node/container/codeTabs.ts
@@ -1995,8 +2008,8 @@ var codeSandboxPlugin = (md) => {
         filepath: filepath2
       };
     },
-    content({ title, height, width, user, id, type: type2, filepath: filepath2, console, navbar, layout }) {
-      return `<CodeSandboxViewer title="${title}" height="${height}" width="${width}" user="${user}" id="${id}" type="${type2}" filepath="${filepath2}" :console=${console} :navbar=${navbar} layout="${layout}" />`;
+    content({ title, height, width, user, id, type: type2, filepath: filepath2, console: console2, navbar, layout }) {
+      return `<CodeSandboxViewer title="${title}" height="${height}" width="${width}" user="${user}" id="${id}" type="${type2}" filepath="${filepath2}" :console=${console2} :navbar=${navbar} layout="${layout}" />`;
     }
   });
 };
@@ -2075,6 +2088,71 @@ var pdfPlugin = (md) => {
   });
 };
 
+// src/node/embed/video/artPlayer.ts
+import { isPackageExists } from "local-pkg";
+import { colors } from "vuepress/utils";
+var installed = {
+  dashjs: isPackageExists("dashjs"),
+  hlsjs: isPackageExists("hls.js"),
+  mpegtsjs: isPackageExists("mpegts.js")
+};
+var SUPPORTED_VIDEO_TYPES = ["mp4", "mp3", "webm", "ogg", "mpd", "dash", "m3u8", "hls", "ts", "flv"];
+var artPlayerPlugin = (md) => {
+  createEmbedRuleBlock(md, {
+    type: "artPlayer",
+    name: "video_artPlayer",
+    syntaxPattern: /^@\[artPlayer([^\]]*)\]\(([^)]*)\)/,
+    meta([, info, source]) {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const url = source.trim();
+      checkSupportType(attrs2.type ?? url.split(".").pop());
+      return {
+        autoplay: attrs2.autoplay ?? false,
+        muted: attrs2.muted ?? attrs2.autoplay ?? false,
+        autoMini: attrs2.autoMini ?? false,
+        loop: attrs2.loop ?? false,
+        volume: typeof attrs2.volume !== "undefined" ? Number(attrs2.volume) : 0.75,
+        poster: attrs2.poster,
+        width: attrs2.width ? parseRect(attrs2.width) : "100%",
+        height: attrs2.height ? parseRect(attrs2.height) : "",
+        ratio: attrs2.ratio ? parseRect(`${attrs2.ratio}`) : "",
+        type: attrs2.type,
+        url
+      };
+    },
+    content({ autoMini, autoplay, loop, muted, poster, url, type: type2, volume, width, height, ratio }) {
+      return `<ArtPlayer src="${url}" fullscreen flip playback-rate aspect-ratio setting pip ${loop ? " loop" : ""}${type2 ? ` type="${type2}"` : ""}${autoMini ? " auto-min" : ""}${autoplay ? " autoplay" : ""}${muted || autoplay ? " muted" : ""}${poster ? ` poster="${poster}"` : ""}  :volume="${volume}" width="${width}"${height ? ` height="${height}"` : ""}${ratio ? ` ratio="${ratio}"` : ""}/>`;
+    }
+  });
+};
+function checkSupportType(type2) {
+  if (!type2)
+    return;
+  if (SUPPORTED_VIDEO_TYPES.includes(type2)) {
+    let name = "";
+    switch (type2.toLowerCase()) {
+      case "m3u8":
+      case "hls":
+        name = !installed.hlsjs ? "hls.js" : "";
+        break;
+      case "flv":
+      case "ts": {
+        name = !installed.mpegtsjs ? "mpegts.js" : "";
+        break;
+      }
+      case "mpd":
+      case "dash":
+        name = !installed.dashjs ? "dashjs" : "";
+        break;
+    }
+    if (name) {
+      console.warn(`${colors.yellow("[vuepress-plugin-md-power] artPlayer: ")} ${colors.cyan(name)} is not installed, please install it via npm or yarn or pnpm`);
+    }
+  } else {
+    console.warn(`${colors.yellow("[vuepress-plugin-md-power] artPlayer: ")} unsupported video type: ${colors.cyan(type2)}`);
+  }
+}
+
 // src/node/embed/video/bilibili.ts
 import { URLSearchParams as URLSearchParams2 } from "node:url";
 
@@ -2196,6 +2274,9 @@ function embedSyntaxPlugin(md, options) {
   if (options.youtube) {
     md.use(youtubePlugin);
   }
+  if (options.artPlayer) {
+    md.use(artPlayerPlugin);
+  }
   if (options.codepen) {
     md.use(codepenPlugin);
   }
@@ -2419,6 +2500,10 @@ async function prepareConfigFile(app, options) {
     imports.add(`import FileTreeItem from '${CLIENT_FOLDER}components/FileTreeItem.vue'`);
     enhances.add(`app.component('FileTreeItem', FileTreeItem)`);
   }
+  if (options.artPlayer) {
+    imports.add(`import ArtPlayer from '${CLIENT_FOLDER}components/ArtPlayer.vue'`);
+    enhances.add(`app.component('ArtPlayer', ArtPlayer)`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'
@@ -2441,7 +2526,10 @@ function markdownPowerPlugin(options = {}) {
     name: "vuepress-plugin-md-power",
     clientConfigFile: (app) => prepareConfigFile(app, options),
     define: {
-      __MD_POWER_INJECT_OPTIONS__: options
+      __MD_POWER_INJECT_OPTIONS__: options,
+      __MD_POWER_DASHJS_INSTALLED__: isPackageExists2("dashjs"),
+      __MD_POWER_HLSJS_INSTALLED__: isPackageExists2("hls.js"),
+      __MD_POWER_MPEGTSJS_INSTALLED__: isPackageExists2("mpegts.js")
     },
     extendsBundlerOptions(bundlerOptions, app) {
       if (options.repl) {
@@ -2451,6 +2539,13 @@ function markdownPowerPlugin(options = {}) {
           ["shiki/core", "shiki/wasm", "shiki/engine/oniguruma"]
         );
       }
+      if (options.artPlayer) {
+        addViteOptimizeDepsInclude(
+          bundlerOptions,
+          app,
+          ["artplayer", "dashjs", "hls.js", "mpegts.js"]
+        );
+      }
     },
     extendsMarkdown: async (md, app) => {
       docsTitlePlugin(md);
@@ -2466,3 +2561,4 @@ export {
   resolveImageSize
 };
 /* istanbul ignore if -- @preserve */
+/* istanbul ignore next -- @preserve */

package/lib/shared/index.d.ts

@@ -198,6 +198,12 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     youtube?: boolean;
+    /**
+     * 是否启用 artPlayer 视频嵌入
+     *
+     * `@[artPlayer](url)`
+     */
+    artPlayer?: boolean;
     /**
      * 是否启用 codepen 嵌入
      *
@@ -293,5 +299,15 @@ interface YoutubeTokenMeta extends SizeOptions {
     start?: string | number;
     end?: string | number;
 }
+interface ArtPlayerTokenMeta extends SizeOptions {
+    muted?: boolean;
+    autoplay?: boolean;
+    autoMini?: boolean;
+    loop?: boolean;
+    volume?: number;
+    poster?: string;
+    url: string;
+    type?: string;
+}
 
-export type { BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, FileTreeIconMode, FileTreeOptions, IconsOptions, JSFiddleTokenMeta, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };
+export type { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, FileTreeIconMode, FileTreeOptions, IconsOptions, JSFiddleTokenMeta, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.120",
+  "version": "1.0.0-rc.122",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -31,12 +31,28 @@
     "lib"
   ],
   "peerDependencies": {
+    "artplayer": "^5.2.0",
+    "dashjs": "^4.7.4",
+    "hls.js": "^1.5.18",
     "markdown-it": "^14.0.0",
-    "vuepress": "2.0.0-rc.18"
+    "mpegts.js": "^1.7.3",
+    "vuepress": "2.0.0-rc.19"
   },
   "peerDependenciesMeta": {
+    "artplayer": {
+      "optional": true
+    },
+    "dashjs": {
+      "optional": true
+    },
+    "hls.js": {
+      "optional": true
+    },
     "markdown-it": {
       "optional": true
+    },
+    "mpegts.js": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -47,19 +63,23 @@
     "@mdit/plugin-sup": "^0.14.0",
     "@mdit/plugin-tab": "^0.14.0",
     "@mdit/plugin-tasklist": "^0.14.0",
-    "@vuepress/helper": "2.0.0-rc.63",
+    "@vuepress/helper": "2.0.0-rc.66",
     "@vueuse/core": "^12.0.0",
-    "image-size": "^1.1.1",
+    "image-size": "^1.2.0",
     "local-pkg": "^0.5.1",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.0.9",
-    "shiki": "^1.24.0",
-    "tm-grammars": "^1.21.0",
-    "tm-themes": "^1.9.3",
+    "shiki": "^1.24.4",
+    "tm-grammars": "^1.21.9",
+    "tm-themes": "^1.9.5",
     "vue": "^3.5.13"
   },
   "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"