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

package/lib/client/components/AudioReader.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useInterval } from '@vueuse/core'
+import { onMounted, toRef, watch } from 'vue'
+import { useAudioPlayer } from '../composables/audio.js'
+
+const props = defineProps<{
+  src: string
+  autoplay?: boolean
+  type?: string
+  volume?: number
+  startTime?: number
+  endTime?: number
+}>()
+
+const { paused, play, pause, seek, setVolume } = useAudioPlayer(
+  toRef(() => props.src),
+  {
+    type: toRef(() => props.type || ''),
+    autoplay: props.autoplay,
+    oncanplay: () => {
+      if (props.startTime) {
+        seek(props.startTime)
+      }
+    },
+    ontimeupdate: (time) => {
+      if (props.endTime && time >= props.endTime) {
+        pause()
+        if (props.startTime) {
+          seek(props.startTime)
+        }
+      }
+    },
+  },
+)
+const interval = useInterval(300, { controls: true, immediate: false })
+
+watch(paused, () => {
+  if (paused.value) {
+    interval.pause()
+  }
+})
+
+function opacity(mo: number) {
+  return paused.value ? 1 : (interval.counter.value % 3 >= mo ? 1 : 0)
+}
+
+function toggle() {
+  if (paused.value) {
+    play()
+    interval.reset()
+    interval.resume()
+  }
+  else {
+    pause()
+  }
+}
+
+onMounted(() => {
+  watch(() => props.volume, (volume) => {
+    if (typeof volume !== 'undefined') {
+      setVolume(volume)
+    }
+  }, { immediate: true })
+})
+</script>
+
+<template>
+  <span class="vp-audio-reader" @click="toggle">
+    <slot />
+    <span class="icon-audio">
+      <svg fill="currentcolor" width="16" height="16" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill-rule="evenodd"><path d="M24.1538 5.86289C24.8505 5.23954 25.738 4.95724 26.6005 5.00519C27.463 5.05313 28.3137 5.43204 28.9371 6.12878C29.4928 6.74989 29.8 7.55405 29.8 8.38746V46.28C29.8 47.2149 29.4186 48.0645 28.8078 48.6754C28.197 49.2862 27.3474 49.6675 26.4125 49.6675C25.5843 49.6675 24.7848 49.3641 24.1651 48.8147L13.0526 38.9618C12.5285 38.4971 11.8523 38.2405 11.1518 38.2405H5.3875C4.45261 38.2405 3.603 37.8591 2.99218 37.2483C2.38135 36.6375 2 35.7879 2 34.853V19.7719C2 18.837 2.38135 17.9874 2.99218 17.3766C3.603 16.7658 4.45262 16.3844 5.3875 16.3844H11.2991C12.004 16.3844 12.6841 16.1246 13.2095 15.6546L24.1538 5.86289ZM25.8 9.75731L15.8766 18.6356C14.6178 19.7618 12.9881 20.3844 11.2991 20.3844H6V34.2405H11.1518C12.8302 34.2405 14.4505 34.8553 15.7064 35.9688L25.8 44.9184V9.75731Z" /><path :style="{ opacity: opacity(1) }" d="M38.1519 17.8402L36.992 16.2108L33.7333 18.5304L34.8931 20.1598C36.2942 22.1281 37.1487 24.6457 37.1487 27.4131C37.1487 30.1933 36.2862 32.7214 34.8736 34.6937L33.709 36.3197L36.9609 38.6488L38.1255 37.0229C40.0285 34.366 41.1487 31.0221 41.1487 27.4131C41.1487 23.8207 40.0388 20.4911 38.1519 17.8402Z" /><path :style="{ opacity: opacity(2) }" d="M43.617 8.17398L44.9714 9.64556C49.0913 14.1219 51.6179 20.3637 51.6179 27.2257C51.6179 34.0838 49.0943 40.3223 44.9787 44.798L43.6249 46.2702L40.6805 43.5627L42.0343 42.0905C45.4542 38.3714 47.6179 33.1061 47.6179 27.2257C47.6179 21.3419 45.4516 16.0739 42.0282 12.3544L40.6738 10.8828L43.617 8.17398Z" /></g></svg>
+    </span>
+  </span>
+</template>
+
+<style>
+.vp-audio-reader {
+  display: inline-block;
+  color: currentcolor;
+  cursor: pointer;
+}
+
+.vp-audio-reader .icon-audio {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  margin-left: 0.2em;
+  vertical-align: middle;
+}
+
+.vp-audio-reader,
+.vp-audio-reader .icon-audio {
+  transition: color var(--vp-t-color);
+}
+
+.vp-audio-reader:hover,
+.vp-audio-reader:hover .icon-audio {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/lib/client/composables/audio.d.ts

@@ -0,0 +1,40 @@
+import * as vue from 'vue';
+import { MaybeRef } from 'vue';
+
+interface BufferedRange {
+    start: number;
+    end: number;
+}
+interface AudioPlayerOptions {
+    type?: MaybeRef<string>;
+    autoplay?: boolean;
+    mutex?: boolean;
+    onload?: HTMLAudioElement['onload'];
+    onerror?: HTMLAudioElement['onerror'];
+    onpause?: HTMLAudioElement['onpause'];
+    onplay?: HTMLAudioElement['onplay'];
+    onplaying?: HTMLAudioElement['onplaying'];
+    onseeked?: HTMLAudioElement['onseeked'];
+    onvolume?: (volume: number) => void;
+    onend?: HTMLAudioElement['onended'];
+    onprogress?: (current: number, total: number) => void;
+    oncanplay?: HTMLAudioElement['oncanplay'];
+    oncanplaythrough?: HTMLAudioElement['oncanplaythrough'];
+    ontimeupdate?: (currentTime: number) => void;
+    onwaiting?: HTMLAudioElement['onwaiting'];
+}
+declare function useAudioPlayer(source: MaybeRef<string>, options?: AudioPlayerOptions): {
+    isSupported: vue.Ref<boolean, boolean>;
+    paused: vue.Ref<boolean, boolean>;
+    loaded: vue.Ref<boolean, boolean>;
+    currentTime: vue.Ref<number, number>;
+    duration: vue.Ref<number, number>;
+    player: null;
+    destroy: () => void;
+    play: () => void;
+    pause: () => void | undefined;
+    seek(time: number): void;
+    setVolume(volume: number): void;
+};
+
+export { type AudioPlayerOptions, type BufferedRange, useAudioPlayer };

package/lib/client/composables/audio.js

@@ -0,0 +1,185 @@
+// src/client/composables/audio.ts
+import { onMounted, onUnmounted, ref, toValue, watch } from "vue";
+var mimeTypes = {
+  "audio/flac": ["flac", "fla"],
+  "audio/mpeg": ["mp3", "mpga"],
+  "audio/mp4": ["mp4", "m4a"],
+  "audio/ogg": ["ogg", "oga"],
+  "audio/aac": ["aac", "adts"],
+  "audio/x-ms-wma": ["wma"],
+  "audio/x-aiff": ["aiff", "aif", "aifc"],
+  "audio/webm": ["webm"]
+};
+var playerList = [];
+function useAudioPlayer(source, options = {}) {
+  let player = null;
+  let unknownSupport = false;
+  const isSupported = ref(false);
+  const loaded = ref(false);
+  const paused = ref(true);
+  const currentTime = ref(0);
+  const duration = ref(0);
+  const volume = ref(1);
+  function initialize() {
+    player = document.createElement("audio");
+    player.className = "audio-player";
+    player.style.display = "none";
+    player.preload = options.autoplay ? "auto" : "none";
+    player.autoplay = options.autoplay ?? false;
+    document.body.appendChild(player);
+    playerList.push(player);
+    player.onloadedmetadata = () => {
+      duration.value = player.duration;
+      currentTime.value = player.currentTime;
+      volume.value = player.volume;
+      loaded.value = true;
+    };
+    player.oncanplay = (...args) => {
+      loaded.value = true;
+      if (unknownSupport)
+        isSupported.value = true;
+      options.oncanplay?.bind(player)(...args);
+    };
+    player.onplay = (...args) => {
+      paused.value = false;
+      options.onplay?.bind(player)(...args);
+    };
+    player.onpause = (...args) => {
+      paused.value = true;
+      options.onpause?.bind(player)(...args);
+    };
+    player.ontimeupdate = () => {
+      if (isValidDuration(player.duration)) {
+        const lastBufferTime = getLastBufferedTime();
+        if (lastBufferTime <= player.duration) {
+          options.ontimeupdate?.bind(player)(lastBufferTime);
+          currentTime.value = lastBufferTime;
+          options.onprogress?.bind(player)(lastBufferTime, player.duration);
+        }
+      }
+    };
+    player.onvolumechange = () => {
+      volume.value = player.volume;
+      options.onvolume?.bind(player)(player.volume);
+    };
+    player.onended = (...args) => {
+      paused.value = true;
+      options.onend?.bind(player)(...args);
+    };
+    player.onplaying = options.onplaying;
+    player.onload = options.onload;
+    player.onerror = options.onerror;
+    player.onseeked = options.onseeked;
+    player.oncanplaythrough = options.oncanplaythrough;
+    player.onwaiting = options.onwaiting;
+    isSupported.value = isSupportType();
+    player.src = toValue(source);
+    player.load();
+  }
+  function isSupportType() {
+    if (!player)
+      return false;
+    let type = toValue(options.type);
+    if (!type) {
+      const ext = toValue(source).split(".").pop() || "";
+      type = Object.keys(mimeTypes).filter((type2) => mimeTypes[type2].includes(ext))[0];
+    }
+    if (!type) {
+      unknownSupport = true;
+      return false;
+    }
+    const isSupported2 = player.canPlayType(type) !== "";
+    if (!isSupported2) {
+      console.warn(`The specified type "${type}" is not supported by the browser.`);
+    }
+    return isSupported2;
+  }
+  function getBufferedRanges() {
+    if (!player)
+      return [];
+    const ranges = [];
+    const seekable = player.buffered || [];
+    const offset = 0;
+    for (let i = 0, length = seekable.length; i < length; i++) {
+      let start = seekable.start(i);
+      let end = seekable.end(i);
+      if (!isValidDuration(start))
+        start = 0;
+      if (!isValidDuration(end)) {
+        end = 0;
+        continue;
+      }
+      ranges.push({
+        start: start + offset,
+        end: end + offset
+      });
+    }
+    return ranges;
+  }
+  function getLastBufferedTime() {
+    const bufferedRanges = getBufferedRanges();
+    if (!bufferedRanges.length)
+      return 0;
+    const buff = bufferedRanges.find(
+      (buff2) => buff2.start < player.currentTime && buff2.end > player.currentTime
+    );
+    if (buff)
+      return buff.end;
+    const last = bufferedRanges[bufferedRanges.length - 1];
+    return last.end;
+  }
+  function isValidDuration(duration2) {
+    if (duration2 && !Number.isNaN(duration2) && duration2 !== Number.POSITIVE_INFINITY && duration2 !== Number.NEGATIVE_INFINITY) {
+      return true;
+    }
+    return false;
+  }
+  function destroy() {
+    player?.pause();
+    player?.remove();
+    playerList.splice(playerList.indexOf(player), 1);
+    player = null;
+  }
+  onMounted(() => {
+    initialize();
+    watch([source, options.type], () => {
+      destroy();
+      loaded.value = false;
+      paused.value = true;
+      currentTime.value = 0;
+      duration.value = 0;
+      initialize();
+    });
+  });
+  onUnmounted(() => destroy());
+  return {
+    isSupported,
+    paused,
+    loaded,
+    currentTime,
+    duration,
+    player,
+    destroy,
+    play: () => {
+      if (options.mutex ?? true) {
+        for (const p of playerList) {
+          if (p !== player)
+            p.pause();
+        }
+      }
+      player?.play();
+    },
+    pause: () => player?.pause(),
+    seek(time) {
+      if (player)
+        player.currentTime = time;
+    },
+    setVolume(volume2) {
+      if (player)
+        player.volume = Math.min(1, Math.max(0, volume2));
+    }
+  };
+}
+export {
+  useAudioPlayer
+};

package/lib/node/index.d.ts

@@ -206,6 +206,12 @@ interface MarkdownPowerPluginOptions {
      * `@[artPlayer](url)`
      */
     artPlayer?: boolean;
+    /**
+     * 是否启用 audioReader 音频嵌入
+     *
+     * `@[audioReader](url)`
+     */
+    audioReader?: boolean;
     /**
      * 是否启用 codepen 嵌入
      *

package/lib/node/index.js

@@ -1824,6 +1824,65 @@ async function containerPlugin(app, md, options) {
   }
 }
 
+// src/node/embed/audio/reader.ts
+var audioReader = (state, silent) => {
+  const max = state.posMax;
+  let start = state.pos;
+  let href = "";
+  if (state.src.slice(start, start + 13) !== "@[audioReader")
+    return false;
+  if (max - start < 17)
+    return false;
+  const labelStart = state.pos + 13;
+  const labelEnd = state.md.helpers.parseLinkLabel(state, state.pos + 1, true);
+  if (labelEnd < 0)
+    return false;
+  let pos = labelEnd + 1;
+  if (pos < max && state.src.charCodeAt(pos) === 40) {
+    pos++;
+    const code = state.src.charCodeAt(pos);
+    if (code === 10 || code === 32)
+      return false;
+    start = pos;
+    const res = state.md.helpers.parseLinkDestination(state.src, pos, state.posMax);
+    if (res.ok) {
+      href = state.md.normalizeLink(res.str);
+      if (state.md.validateLink(href)) {
+        pos = res.pos;
+      } else {
+        href = "";
+      }
+    }
+    if (pos >= max || state.src.charCodeAt(pos) !== 41) {
+      return false;
+    }
+  }
+  if (!silent) {
+    state.pos = labelStart;
+    state.posMax = labelEnd;
+    const info = state.src.slice(labelStart, labelEnd).trim();
+    const { attrs: attrs2 } = resolveAttrs(info);
+    const tokenOpen = state.push("audio_reader_open", "audioReader", 1);
+    tokenOpen.info = info;
+    tokenOpen.attrs = [["src", href]];
+    if (attrs2.startTime)
+      tokenOpen.attrs.push([":start-time", attrs2.startTime]);
+    if (attrs2.endTime)
+      tokenOpen.attrs.push([":end-time", attrs2.endTime]);
+    if (attrs2.type)
+      tokenOpen.attrs.push(["type", attrs2.type]);
+    if (attrs2.volume)
+      tokenOpen.attrs.push([":volume", attrs2.volume]);
+    if (attrs2.title)
+      state.push("text", "", 0).content = attrs2.title;
+    state.push("audio_reader_close", "audioReader", -1);
+  }
+  state.pos = pos + 1;
+  state.posMax = max;
+  return true;
+};
+var audioReaderPlugin = (md) => md.inline.ruler.before("link", "audio-reader", audioReader);
+
 // src/node/embed/caniuse.ts
 import container5 from "markdown-it-container";
 
@@ -2277,6 +2336,9 @@ function embedSyntaxPlugin(md, options) {
   if (options.artPlayer) {
     md.use(artPlayerPlugin);
   }
+  if (options.audioReader) {
+    md.use(audioReaderPlugin);
+  }
   if (options.codepen) {
     md.use(codepenPlugin);
   }
@@ -2504,6 +2566,10 @@ async function prepareConfigFile(app, options) {
     imports.add(`import ArtPlayer from '${CLIENT_FOLDER}components/ArtPlayer.vue'`);
     enhances.add(`app.component('ArtPlayer', ArtPlayer)`);
   }
+  if (options.audioReader) {
+    imports.add(`import AudioReader from '${CLIENT_FOLDER}components/AudioReader.vue'`);
+    enhances.add(`app.component('AudioReader', AudioReader)`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'

package/lib/shared/index.d.ts

@@ -204,6 +204,12 @@ interface MarkdownPowerPluginOptions {
      * `@[artPlayer](url)`
      */
     artPlayer?: boolean;
+    /**
+     * 是否启用 audioReader 音频嵌入
+     *
+     * `@[audioReader](url)`
+     */
+    audioReader?: boolean;
     /**
      * 是否启用 codepen 嵌入
      *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.122",
+  "version": "1.0.0-rc.124",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -64,7 +64,7 @@
     "@mdit/plugin-tab": "^0.14.0",
     "@mdit/plugin-tasklist": "^0.14.0",
     "@vuepress/helper": "2.0.0-rc.66",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^12.2.0",
     "image-size": "^1.2.0",
     "local-pkg": "^0.5.1",
     "markdown-it-container": "^4.0.0",
@@ -79,7 +79,7 @@
     "artplayer": "^5.2.1",
     "dashjs": "^4.7.4",
     "hls.js": "^1.5.18",
-    "mpegts.js": "^1.7.3"
+    "mpegts.js": "^1.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -91,9 +91,12 @@
     "vuepress-plugin-md-power"
   ],
   "scripts": {
+    "dev": "pnpm '/(copy|tsup):watch/'",
     "build": "pnpm copy && pnpm tsup",
     "clean": "rimraf --glob ./lib",
     "copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
-    "tsup": "tsup --config tsup.config.ts"
+    "copy:watch": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib -w",
+    "tsup": "tsup --config tsup.config.ts",
+    "tsup:watch": "tsup --config tsup.config.ts --watch -- -c"
   }
 }