@vunk/plus 1.3.11 → 1.3.12

package/components/broadcasting-markdown/index.mjs

@@ -1,9 +1,11 @@
 import { VkTypingMarkdown } from '@vunk/plus/components/typing-markdown';
 import { setData } from '@vunk/core';
-import { defineComponent, createElementBlock, openBlock, createElementVNode, Fragment, createVNode, unref, withCtx, computed, shallowRef, watch, onMounted, onBeforeUnmount, nextTick, renderSlot, createCommentVNode, ref, watchEffect, resolveComponent, renderList, createBlock } from 'vue';
-import { ElIcon } from 'element-plus';
-import { useDeferred } from '@vunk/core/composables';
+import { useDeferred, useDataComputed } from '@vunk/core/composables';
+import { defineComponent, createElementBlock, openBlock, createElementVNode, Fragment, createVNode, unref, withCtx, shallowRef, computed, watch, onBeforeUnmount, watchEffect, onMounted, nextTick, renderSlot, createCommentVNode, ref, resolveComponent, renderList, createBlock } from 'vue';
+import { TickerStatus } from '@vunk/shared/enum';
 import { noop } from '@vunk/shared/function';
+import { ElIcon } from 'element-plus';
+import { c as commonjsGlobal } from '../_commonjsHelpers.mjs';
 import { Deferred } from '@vunk/shared/promise';
 import { c as consola } from '../browser.mjs';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
@@ -22,14 +24,7 @@ var ParagraphStatus = /* @__PURE__ */ ((ParagraphStatus2) => {
   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 Broadcast = TickerStatus;
 
 const props = {
   /**
@@ -67,13 +62,6 @@ const props = {
     type: Array,
     default: () => ["\n\n", "\n"]
   },
-  /**
-   * @description 暂停的
-   */
-  pause: {
-    type: Boolean,
-    default: false
-  },
   /**
    * @description 组件内会根据当前游标是否和 source 长度一致来判断，是否持续阅读, 当一致时，会关闭阅读状态。但若设置为 true，则会持续阅读, 这在动态接收数据时会有用
    */
@@ -81,19 +69,19 @@ const props = {
     type: Boolean,
     default: false
   },
-  /**
-   * @description 是否使用 web speech api
-   */
-  webSpeech: {
-    type: Boolean,
-    default: false
-  },
   /**
    * @description 是否使用自定义语音合成
    */
   textToSpeech: {
     type: Function,
     default: void 0
+  },
+  /**
+   * @description 段落处理函数
+   */
+  processing: {
+    type: Function,
+    default: noop
   }
 };
 const emits = {
@@ -101,10 +89,94 @@ const emits = {
   "interrupt": null,
   "update:broadcasting": (_) => true,
   "update:completed": (_) => true,
-  "update:error": (_) => true
+  "update:error": (_) => true,
+  "paragraphLoad": (_) => true
+};
+const paragraphProps = {
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  deferred: {
+    type: Object,
+    required: true
+  },
+  render: {
+    type: Function,
+    default: defaultRender
+  }
 };
+const paragraphEmits = {
+  setData: (e) => e,
+  load: (_) => true
+};
+
+var ctx = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  emits: emits,
+  paragraphEmits: paragraphEmits,
+  paragraphProps: paragraphProps,
+  props: props
+});
+
+/*! Element Plus Icons Vue v2.3.1 */
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+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$3 = /* @__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 howler = {};
 
@@ -3345,188 +3417,137 @@ var howler = {};
 	})(); 
 } (howler));
 
-/*! 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 */
-      );
-    };
-  }
-});
-
 const originalPlay = howler.Howl.prototype.play;
-howler.Howl.prototype.play = function (soundId) {
+howler.Howl.prototype.play = function(soundId) {
   const WeixinJSBridge = window.WeixinJSBridge;
   WeixinJSBridge && WeixinJSBridge.invoke("getNetworkType", {}, () => {
     originalPlay.call(this, soundId);
   }, false);
   return originalPlay.call(this, soundId);
 };
-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: ""
-    },
-    render: {
-      type: Function,
-      required: true
+function useHowlerParagraph(props, emit) {
+  const sound = shallowRef(null);
+  const createSound = (url2) => {
+    if (!url2)
+      return null;
+    if (sound.value) {
+      sound.value.unload();
+    }
+    return new howler.Howl({
+      src: [url2],
+      format: ["mp3", "wav", "aac"],
+      // 事件处理
+      onplay: () => {
+        emit("setData", {
+          k: "broadcast",
+          v: Broadcast.playing
+        });
+      },
+      onpause: () => {
+        emit("setData", {
+          k: "broadcast",
+          v: Broadcast.paused
+        });
+      },
+      onend: () => {
+        emit("setData", {
+          k: "broadcast",
+          v: Broadcast.stopped
+        });
+        setTimeout(() => {
+          if (sound.value) {
+            sound.value.unload();
+            sound.value = null;
+          }
+        }, 400);
+        props.deferred.resolve(true);
+      },
+      onstop: () => {
+        emit("setData", {
+          k: "broadcast",
+          v: Broadcast.stopped
+        });
+      },
+      onloaderror: (_, error) => {
+        emit("setData", {
+          k: "broadcast",
+          v: Broadcast.failed
+        });
+        props.deferred.reject(error);
+      },
+      onplayerror: (_, error) => {
+        emit("setData", {
+          k: "broadcast",
+          v: Broadcast.failed
+        });
+        props.deferred.reject(error);
+      }
+    });
+  };
+  const url = computed(() => props.data.url);
+  const broadcast = computed(() => props.data.broadcast);
+  watch(() => url.value, (newUrl) => {
+    if (newUrl) {
+      sound.value = createSound(newUrl);
+    }
+  }, { immediate: true });
+  onBeforeUnmount(() => {
+    if (sound.value) {
+      sound.value.unload();
+      sound.value = null;
     }
+  });
+  watchEffect(() => {
+    if (broadcast.value === Broadcast.play) {
+      sound.value?.play();
+    } else if (broadcast.value === Broadcast.pause) {
+      sound.value?.pause();
+    } else if (broadcast.value === Broadcast.stop) {
+      sound.value?.stop();
+    }
+  });
+  return {
+    url,
+    broadcast,
+    sound
+  };
+}
+
+var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  components: {
+    SpeechError: _sfc_main$3
   },
-  setup(props) {
+  props: paragraphProps,
+  emits: paragraphEmits,
+  setup(props, {
+    emit
+  }) {
     const value = props.render(props.data.value);
     const theData = computed(() => props.data);
     if (!value.trim()) {
       props.deferred.resolve(true);
-      theData.value.broadcast = Broadcast.ended;
+      emit("setData", {
+        k: "broadcast",
+        v: Broadcast.stopped
+      });
       return () => null;
     }
-    const sound = shallowRef(null);
-    const createSound = url => {
-      if (!url) return null;
-      if (sound.value) {
-        sound.value.unload();
-      }
-      return new howler.Howl({
-        src: [url],
-        format: ["mp3", "wav", "aac"],
-        // 事件处理
-        onplay: () => {
-          theData.value.broadcast = Broadcast.playing;
-        },
-        onpause: () => {
-          theData.value.broadcast = Broadcast.paused;
-        },
-        onend: () => {
-          theData.value.broadcast = Broadcast.ended;
-          setTimeout(() => {
-            if (sound.value) {
-              sound.value.unload();
-              sound.value = null;
-            }
-          }, 400);
-          props.deferred.resolve(true);
-        },
-        onloaderror: (_, error) => {
-          theData.value.broadcast = Broadcast.failed;
-          props.deferred.reject(error || new Error("Failed to load audio"));
-        },
-        onplayerror: (_, error) => {
-          theData.value.broadcast = Broadcast.failed;
-          console.error("Failed to play audio", error);
-          props.deferred.reject(error || new Error("Failed to play audio"));
-        }
-      });
-    };
-    watch(() => props.url, newUrl => {
-      if (newUrl) {
-        sound.value = createSound(newUrl);
-      }
-    }, {
-      immediate: true
-    });
+    useHowlerParagraph(props, emit);
     onMounted(() => {
-      watch(() => props.pause, isPaused => {
-        if (props.data.status === ParagraphStatus.pending) {
-          if (isPaused) {
-            if (sound.value && sound.value.playing()) {
-              sound.value.pause();
-            }
-          } else {
-            if (theData.value.broadcast === Broadcast.failed || theData.value.broadcast === Broadcast.initial) {
-              if (sound.value) {
-                sound.value.play();
-              }
-            } else if (theData.value.broadcast === Broadcast.paused) {
-              if (sound.value) {
-                sound.value.play();
-              }
-            }
-          }
-        }
-      }, {
-        immediate: true
+      emit("setData", {
+        k: "broadcast",
+        v: Broadcast.play
+      });
+      emit("load", {
+        data: props.data,
+        deferred: props.deferred
       });
     });
-    onBeforeUnmount(() => {
-      if (sound.value) {
-        sound.value.unload();
-        sound.value = null;
-      }
-    });
-    return () => createVNode(Fragment, null, [theData.value.status === ParagraphStatus.rejected && createVNode(_sfc_main$4, null, null)]);
+    return () => createVNode(Fragment, null, [theData.value.status === ParagraphStatus.rejected && createVNode(_sfc_main$3, null, null)]);
   }
 });
 
-var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "paragraph",
   props: {
     enable: {
@@ -3537,10 +3558,6 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
       type: String,
       default: ParagraphStatus.initial
     },
-    pause: {
-      type: Boolean,
-      default: false
-    },
     processing: {
       type: Function,
       default: noop
@@ -3603,106 +3620,19 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-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
-    },
-    render: {
-      type: Function,
-      required: true
-    }
-  },
-  setup(props) {
-    const value = props.render(props.data.value);
-    const theData = computed(() => 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,
+    ParagraphView: _sfc_main$1,
     VkTypingMarkdown,
-    WebSpeechView: _sfc_main$1,
-    // CustomSpeechView,
-    HowlerSpeechView: _sfc_main$3
+    HowlerSpeechView: _sfc_main$2
   },
   props,
   emits,
   setup(props2, { emit, expose }) {
-    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 [theData, handleSetData] = useDataComputed({
+      default: []
+    }, props2, emit);
     const addParagraph = (paragraph) => {
       const k = theData.value.length;
       handleSetData({
@@ -3720,6 +3650,8 @@ var _sfc_main = defineComponent({
       }
       return props2.textToSpeech(`${value}`).then((url) => {
         paragraph.url = url;
+      }).then(async () => {
+        await props2.processing?.(paragraph);
       });
     };
     const currentIndex = ref(0);
@@ -3736,7 +3668,7 @@ var _sfc_main = defineComponent({
       if (theData.value[0].broadcast === Broadcast.failed) {
         return "";
       }
-      if (theData.value[0].broadcast === Broadcast.initial) {
+      if (theData.value[0].broadcast === Broadcast.pending) {
         return "......";
       }
       return theData.value.filter(
@@ -3782,7 +3714,7 @@ var _sfc_main = defineComponent({
               end,
               status: ParagraphStatus.initial,
               value,
-              broadcast: Broadcast.initial
+              broadcast: Broadcast.pending
             };
             addParagraph(paragraph);
           }
@@ -3816,20 +3748,25 @@ var _sfc_main = defineComponent({
             end,
             status: ParagraphStatus.initial,
             value,
-            broadcast: Broadcast.initial
+            broadcast: Broadcast.pending
           };
           addParagraph(paragraph);
         }
       }
     }
     const isInterrupted = ref(false);
-    const thePause = computed(() => {
-      return isInterrupted.value || props2.pause;
-    });
     function interrupt() {
       isInterrupted.value = true;
+      theData.value.forEach((item) => {
+        item.broadcast = Broadcast.stop;
+      });
       emit("interrupt");
     }
+    const isPaused = computed(() => {
+      return theData.value.some(
+        (item) => item.status === ParagraphStatus.pending && item.broadcast === Broadcast.paused
+      );
+    });
     const isBroadcasting = computed(() => {
       return theData.value.some(
         (item) => item.broadcast === Broadcast.playing
@@ -3873,7 +3810,10 @@ var _sfc_main = defineComponent({
       isPrevParagraphFulfilled,
       isParagraphEnabled,
       processingParagraph,
-      thePause
+      isInterrupted,
+      setData,
+      Broadcast,
+      isPaused
     };
   }
 });
@@ -3881,7 +3821,6 @@ var _sfc_main = defineComponent({
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkTypingMarkdown = resolveComponent("VkTypingMarkdown");
   const _component_HowlerSpeechView = resolveComponent("HowlerSpeechView");
-  const _component_WebSpeechView = resolveComponent("WebSpeechView");
   const _component_ParagraphView = resolveComponent("ParagraphView");
   return openBlock(), createElementBlock(
     Fragment,
@@ -3890,8 +3829,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default", { paragraphs: _ctx.theData }, () => [
         createVNode(_component_VkTypingMarkdown, {
           source: _ctx.fulfilledTextValue,
-          delay: 200,
-          pause: _ctx.thePause
+          delay: 120,
+          pause: _ctx.isInterrupted || _ctx.isPaused
         }, null, 8, ["source", "pause"])
       ]),
       (openBlock(true), createElementBlock(
@@ -3912,18 +3851,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 createVNode(_component_HowlerSpeechView, {
                   render: _ctx.render,
-                  url: item.url,
-                  pause: _ctx.thePause,
-                  deferred,
-                  data: item
-                }, null, 8, ["render", "url", "pause", "deferred", "data"]),
-                _ctx.webSpeech ? (openBlock(), createBlock(_component_WebSpeechView, {
-                  key: 0,
-                  render: _ctx.render,
-                  pause: _ctx.thePause,
                   deferred,
-                  data: item
-                }, null, 8, ["render", "pause", "deferred", "data"])) : createCommentVNode("v-if", true)
+                  data: item,
+                  onSetData: ($event) => _ctx.setData(item, $event),
+                  onLoad: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("paragraphLoad", $event))
+                }, null, 8, ["render", "deferred", "data", "onSetData"])
               ])
             ]),
             _: 2
@@ -3948,4 +3880,4 @@ VkBroadcastingMarkdown.install = (app) => {
   app.component(VkBroadcastingMarkdown.name || "VkBroadcastingMarkdown", VkBroadcastingMarkdown);
 };
 
-export { Broadcast, ParagraphStatus, VkBroadcastingMarkdown, types as __VkBroadcastingMarkdown, VkBroadcastingMarkdown as default, defaultRender };
+export { Broadcast, ParagraphStatus, VkBroadcastingMarkdown, ctx as _VkBroadcastingMarkdownCtx, types as __VkBroadcastingMarkdown, VkBroadcastingMarkdown as default, defaultRender, useHowlerParagraph };