@vunk/plus 1.2.0 → 1.3.0

package/components/avatar/index.mjs

@@ -1,5 +1,5 @@
 import { ElAvatar } from 'element-plus';
-import { defineComponent, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, renderSlot } from 'vue';
+import { defineComponent, resolveComponent, createBlock, openBlock, normalizeStyle, withCtx, renderSlot } from 'vue';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
@@ -36,7 +36,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["style"]);
 }
-var VkAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/avatar/src/index.vue"]]);
+var VkAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/components/broadcasting-markdown/index.css

@@ -0,0 +1,3 @@
+.vk-broadcasting-markdown-web-speech-icon{
+  vertical-align: text-bottom;
+}

package/components/broadcasting-markdown/index.mjs

@@ -0,0 +1,637 @@
+import { VkTypingMarkdown } from '@vunk/plus/components/typing-markdown';
+import { setData } from '@vunk/core';
+import { defineComponent, createElementBlock, openBlock, createElementVNode, Fragment, createVNode, unref, withCtx, computed, onBeforeUnmount, onMounted, watch, shallowRef, nextTick, renderSlot, createCommentVNode, ref, watchEffect, resolveComponent, renderList, createBlock } from 'vue';
+import markdownIt from 'markdown-it';
+import { useDeferred } from '@vunk/core/composables';
+import { ElIcon } from 'element-plus';
+import { noop } from '@vunk/shared/function';
+import { Deferred } from '@vunk/shared/promise';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const md = markdownIt();
+function defaultRender(mdText) {
+  const html = md.render(mdText);
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return doc.body.textContent || "";
+}
+var ParagraphStatus = /* @__PURE__ */ ((ParagraphStatus2) => {
+  ParagraphStatus2["initial"] = "initial";
+  ParagraphStatus2["processing"] = "processing";
+  ParagraphStatus2["pending"] = "pending";
+  ParagraphStatus2["fulfilled"] = "fulfilled";
+  ParagraphStatus2["rejected"] = "rejected";
+  return ParagraphStatus2;
+})(ParagraphStatus || {});
+var Broadcast = /* @__PURE__ */ ((Broadcast2) => {
+  Broadcast2["initial"] = "initial";
+  Broadcast2["playing"] = "playing";
+  Broadcast2["ended"] = "ended";
+  Broadcast2["paused"] = "paused";
+  Broadcast2["failed"] = "failed";
+  return Broadcast2;
+})(Broadcast || {});
+
+const props = {
+  /**
+   *  @description 段落详情
+   */
+  data: {
+    type: Array,
+    default: void 0
+  },
+  /**
+   * @description md 文本
+   */
+  source: {
+    type: String,
+    default: ""
+  },
+  /**
+   *  @description 游标阅读延迟
+   */
+  delay: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description 段落切割符号
+   */
+  separators: {
+    type: Array,
+    default: () => ["\n\n", "\n"]
+  },
+  /**
+   * @description 暂停的
+   */
+  pause: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 组件内会根据当前游标是否和 source 长度一致来判断，是否持续阅读, 当一致时，会关闭阅读状态。但若设置为 true，则会持续阅读, 这在动态接收数据时会有用
+   */
+  keepRead: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 是否使用 web speech api
+   */
+  webSpeech: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 是否使用自定义语音合成
+   */
+  textToSpeech: {
+    type: Function,
+    default: void 0
+  }
+};
+const emits = {
+  "setData": (e) => e,
+  "update:broadcasting": (_) => true,
+  "update:completed": (_) => true,
+  "update:error": (_) => true
+};
+
+/*! Element Plus Icons Vue v2.3.1 */
+
+var close_bold_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  name: "CloseBold",
+  __name: "close-bold",
+  setup(__props) {
+    return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1024 1024"
+    }, [
+      createElementVNode("path", {
+        fill: "currentColor",
+        d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+      })
+    ]));
+  }
+});
+
+// src/components/close-bold.vue
+var close_bold_default = close_bold_vue_vue_type_script_setup_true_lang_default;
+
+var _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "speech-error",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(ElIcon), {
+            color: "var(--el-color-danger)",
+            size: "1.5em",
+            style: {
+              verticalAlign: "text-bottom"
+            }
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(close_bold_default))
+            ]),
+            _: 1
+            /* STABLE */
+          }),
+          _cache[0] || (_cache[0] = createElementVNode(
+            "span",
+            { style: {
+              color: "var(--el-color-danger)"
+            } },
+            " \u64AD\u62A5\u5931\u8D25 ",
+            -1
+            /* HOISTED */
+          ))
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
+  }
+});
+
+var _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  components: {
+    SpeechError: _sfc_main$4
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    deferred: {
+      type: Object,
+      required: true
+    },
+    pause: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 语音资源路径
+     */
+    url: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const value = defaultRender(props.data.value).replace(/\n/g, "");
+    const theData = computed(() => props.data);
+    if (!value.trim()) {
+      props.deferred.resolve(true);
+      theData.value.broadcast = Broadcast.ended;
+      return () => null;
+    }
+    const audioDef = useDeferred();
+    audioDef.promise.then(audio => {
+      audio.addEventListener("playing", onPlaying);
+      audio.addEventListener("pause", onPause);
+      audio.addEventListener("error", onError);
+      audio.addEventListener("ended", onEnded);
+    });
+    onBeforeUnmount(() => {
+      audioDef.value?.removeEventListener("playing", onPlaying);
+      audioDef.value?.removeEventListener("pause", onPause);
+      audioDef.value?.removeEventListener("error", onError);
+      audioDef.value?.removeEventListener("ended", onEnded);
+    });
+    function onPlaying() {
+      theData.value.broadcast = Broadcast.playing;
+    }
+    function onPause() {
+      theData.value.broadcast = Broadcast.paused;
+    }
+    function onError(err) {
+      theData.value.broadcast = Broadcast.failed;
+      props.deferred.reject(err);
+    }
+    function onEnded() {
+      theData.value.broadcast = Broadcast.ended;
+      props.deferred.resolve(true);
+    }
+    onMounted(() => {
+      watch(() => props.pause, v => {
+        if (props.data.status === ParagraphStatus.pending) {
+          if (v) {
+            audioDef.value?.pause();
+          } else {
+            if (theData.value.broadcast === Broadcast.failed || theData.value.broadcast === Broadcast.initial) {
+              audioDef.promise.then(audio => {
+                audio.play().catch(err => {
+                  theData.value.broadcast = Broadcast.failed;
+                  props.deferred.reject(err);
+                });
+              });
+            }
+          }
+        }
+      }, {
+        immediate: true
+      });
+    });
+    return () => createVNode(Fragment, null, [props.url && createVNode("audio", {
+      "src": props.url,
+      "ref": audioDef.resolve
+    }, null), theData.value.status === ParagraphStatus.rejected && createVNode(_sfc_main$4, null, null)]);
+  }
+});
+
+var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "paragraph",
+  props: {
+    enable: {
+      type: Boolean,
+      default: true
+    },
+    status: {
+      type: String,
+      default: ParagraphStatus.initial
+    },
+    pause: {
+      type: Boolean,
+      default: false
+    },
+    processing: {
+      type: Function,
+      default: noop
+    }
+  },
+  emits: ["update:status"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const theDef = shallowRef();
+    const processingDef = useDeferred();
+    onMounted(async () => {
+      emit("update:status", ParagraphStatus.processing);
+      await props.processing?.();
+      processingDef.resolve();
+    });
+    processingDef.promise.catch(() => {
+      emit("update:status", ParagraphStatus.rejected);
+    });
+    watch(() => props.enable, async (enable) => {
+      if (enable) {
+        init();
+      } else {
+        theDef.value = void 0;
+      }
+    }, { immediate: true });
+    async function init() {
+      const deferred = new Deferred();
+      await processingDef.promise;
+      emit("update:status", ParagraphStatus.pending);
+      deferred.promise.then(() => {
+        emit("update:status", ParagraphStatus.fulfilled);
+      }).catch((err) => {
+        console.error(err);
+        emit("update:status", ParagraphStatus.rejected);
+      });
+      theDef.value = void 0;
+      nextTick(() => {
+        theDef.value = deferred;
+      });
+    }
+    return (_ctx, _cache) => {
+      return __props.enable && theDef.value ? renderSlot(_ctx.$slots, "default", {
+        key: 0,
+        deferred: theDef.value
+      }) : createCommentVNode("v-if", true);
+    };
+  }
+});
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  components: {
+    SpeechError: _sfc_main$4
+  },
+  props: {
+    voice: {
+      type: null,
+      required: false
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    deferred: {
+      type: Object,
+      required: true
+    },
+    pause: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const value = defaultRender(props.data.value).replace(/\n/g, "");
+    const theData = computed(() => {
+      return props.data;
+    });
+    if (!value.trim()) {
+      props.deferred.resolve(true);
+      theData.value.broadcast = Broadcast.ended;
+      return () => null;
+    }
+    const utterThis = new SpeechSynthesisUtterance(value);
+    utterThis.onend = function () {
+      props.deferred.resolve(true);
+      theData.value.broadcast = Broadcast.ended;
+    };
+    utterThis.onstart = function () {
+      if (props.pause) return;
+      theData.value.broadcast = Broadcast.playing;
+    };
+    utterThis.onerror = function (err) {
+      props.deferred.reject(err);
+      theData.value.broadcast = Broadcast.failed;
+      window.speechSynthesis.cancel();
+    };
+    props.voice && (utterThis.voice = props.voice);
+    watch(() => props.pause, v => {
+      if (props.data.status === ParagraphStatus.pending) {
+        if (v) {
+          window.speechSynthesis.pause();
+          if (theData.value.broadcast === Broadcast.playing) {
+            theData.value.broadcast = Broadcast.paused;
+          }
+        } else {
+          window.speechSynthesis.resume();
+          if (theData.value.broadcast === Broadcast.failed || theData.value.broadcast === Broadcast.initial) {
+            if (props.data.start === 0) {
+              window.speechSynthesis.cancel();
+            }
+            console.log("start speaking");
+            window.speechSynthesis.speak(utterThis);
+          }
+          if (theData.value.broadcast === Broadcast.paused) {
+            theData.value.broadcast = Broadcast.playing;
+          }
+        }
+      }
+    }, {
+      immediate: true
+    });
+    return () => theData.value.status === ParagraphStatus.rejected && createVNode(_sfc_main$4, null, null);
+  }
+});
+
+var _sfc_main = defineComponent({
+  name: "VkBroadcastingMarkdown",
+  components: {
+    ParagraphView: _sfc_main$2,
+    VkTypingMarkdown,
+    WebSpeechView: _sfc_main$1,
+    CustomSpeechView: _sfc_main$3
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const _data = ref([]);
+    const theData = computed(() => {
+      return props2.data ?? _data.value;
+    });
+    const handleSetData = (e) => {
+      if (props2.data === void 0) {
+        setData(_data.value, e);
+        return;
+      }
+      emit("setData", e);
+    };
+    const addParagraph = (paragraph) => {
+      const k = theData.value.length;
+      handleSetData({
+        k,
+        v: paragraph
+      });
+    };
+    const processingParagraph = (paragraph) => {
+      if (!props2.textToSpeech) {
+        return;
+      }
+      const value = defaultRender(paragraph.value);
+      return props2.textToSpeech(`${value}`).then((url) => {
+        paragraph.url = url;
+      });
+    };
+    const currentIndex = ref(0);
+    const isFinished = computed(() => {
+      return currentIndex.value >= props2.source.length;
+    });
+    const currentText = computed(() => {
+      return props2.source.substring(0, currentIndex.value);
+    });
+    const fulfilledTextValue = computed(() => {
+      if (theData.value.length === 0) {
+        return "......";
+      }
+      if (theData.value[0].broadcast === Broadcast.failed) {
+        return "";
+      }
+      if (theData.value[0].broadcast === Broadcast.initial) {
+        return "......";
+      }
+      return theData.value.filter(
+        (item) => item.status === ParagraphStatus.fulfilled || item.status === ParagraphStatus.pending
+      ).map((item) => item.value).join("");
+    });
+    const sortedSeparators = computed(() => {
+      return [...props2.separators].sort((a, b) => {
+        return a.length - b.length;
+      });
+    });
+    watch(isFinished, (val) => {
+      !val && write();
+    }, { immediate: true });
+    function write() {
+      const lastParagraph = theData.value.at(-1);
+      for (const separator of sortedSeparators.value) {
+        const separatorLen = separator.length;
+        const compareText = currentText.value.slice(
+          currentIndex.value - separatorLen,
+          currentIndex.value
+        );
+        if (compareText === separator) {
+          const start = lastParagraph?.end ?? 0;
+          const end = currentIndex.value;
+          const value = props2.source.slice(
+            start,
+            end
+          );
+          if (lastParagraph && separator.length >= value.length) {
+            if (lastParagraph.status === ParagraphStatus.initial) {
+              lastParagraph.end = end;
+              lastParagraph.value = props2.source.slice(
+                lastParagraph.start,
+                end
+              );
+              lastParagraph.separator = separator;
+            }
+          } else {
+            const paragraph = {
+              start,
+              separator,
+              end,
+              status: ParagraphStatus.initial,
+              value,
+              broadcast: Broadcast.initial
+            };
+            addParagraph(paragraph);
+          }
+        }
+      }
+      if (currentIndex.value < props2.source.length) {
+        currentIndex.value++;
+        setTimeout(write, props2.delay);
+      } else {
+        if (props2.keepRead) {
+          setTimeout(write, props2.delay);
+          return;
+        }
+        if (lastParagraph?.end === currentIndex.value) {
+          return;
+        }
+        const start = lastParagraph?.end ?? 0;
+        const end = currentIndex.value;
+        const value = props2.source.slice(start, end);
+        if (lastParagraph && lastParagraph.status === ParagraphStatus.initial && lastParagraph.separator === "") {
+          lastParagraph.end = end;
+          lastParagraph.value = props2.source.slice(
+            lastParagraph.start,
+            end
+          );
+          lastParagraph.separator = "";
+        } else {
+          const paragraph = {
+            start,
+            separator: "",
+            end,
+            status: ParagraphStatus.initial,
+            value,
+            broadcast: Broadcast.initial
+          };
+          addParagraph(paragraph);
+        }
+      }
+    }
+    const isBroadcasting = computed(() => {
+      return theData.value.some(
+        (item) => item.broadcast === Broadcast.playing
+      );
+    });
+    watchEffect(() => {
+      emit("update:broadcasting", isBroadcasting.value);
+    });
+    const isCompleted = computed(() => {
+      return props2.keepRead === false && theData.value.every(
+        (item) => item.status === ParagraphStatus.fulfilled
+      );
+    });
+    watchEffect(() => {
+      emit("update:completed", isCompleted.value);
+    });
+    const isError = computed(() => {
+      return theData.value.some(
+        (item) => item.status === ParagraphStatus.rejected
+      );
+    });
+    watchEffect(() => {
+      emit("update:error", isError.value);
+    });
+    function isPrevParagraphFulfilled(currentIndex2) {
+      return theData.value[currentIndex2 - 1] ? [
+        ParagraphStatus.fulfilled
+      ].includes(theData.value[currentIndex2 - 1].status) : true;
+    }
+    function isParagraphEnabled(currentIndex2) {
+      const isPrevFulfilled = isPrevParagraphFulfilled(currentIndex2);
+      return isPrevFulfilled;
+    }
+    return {
+      theData,
+      ParagraphStatus,
+      fulfilledTextValue,
+      isPrevParagraphFulfilled,
+      isParagraphEnabled,
+      processingParagraph
+    };
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VkTypingMarkdown = resolveComponent("VkTypingMarkdown");
+  const _component_CustomSpeechView = resolveComponent("CustomSpeechView");
+  const _component_WebSpeechView = resolveComponent("WebSpeechView");
+  const _component_ParagraphView = resolveComponent("ParagraphView");
+  return openBlock(), createElementBlock(
+    Fragment,
+    null,
+    [
+      renderSlot(_ctx.$slots, "default", { paragraphs: _ctx.theData }, () => [
+        createCommentVNode(' <ElButton @click="() => console.log(theData)">\n      log\n    </ElButton> '),
+        createVNode(_component_VkTypingMarkdown, {
+          source: _ctx.fulfilledTextValue,
+          delay: 200,
+          pause: _ctx.pause
+        }, null, 8, ["source", "pause"])
+      ]),
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.theData, (item, index) => {
+          return openBlock(), createBlock(_component_ParagraphView, {
+            key: item.value,
+            status: item.status,
+            "onUpdate:status": ($event) => item.status = $event,
+            enable: _ctx.isParagraphEnabled(index),
+            processing: () => _ctx.processingParagraph(item)
+          }, {
+            default: withCtx(({ deferred }) => [
+              renderSlot(_ctx.$slots, "paragraph", {
+                data: item,
+                deferred
+              }, () => [
+                item.url ? (openBlock(), createBlock(_component_CustomSpeechView, {
+                  key: 0,
+                  url: item.url,
+                  pause: _ctx.pause,
+                  deferred,
+                  data: item
+                }, null, 8, ["url", "pause", "deferred", "data"])) : createCommentVNode("v-if", true),
+                _ctx.webSpeech ? (openBlock(), createBlock(_component_WebSpeechView, {
+                  key: 1,
+                  pause: _ctx.pause,
+                  deferred,
+                  data: item
+                }, null, 8, ["pause", "deferred", "data"])) : createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["status", "onUpdate:status", "enable", "processing"]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+var VkBroadcastingMarkdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkBroadcastingMarkdown.install = (app) => {
+  app.component(VkBroadcastingMarkdown.name || "VkBroadcastingMarkdown", VkBroadcastingMarkdown);
+};
+
+export { Broadcast, ParagraphStatus, VkBroadcastingMarkdown, types as __VkBroadcastingMarkdown, VkBroadcastingMarkdown as default, defaultRender };