cnhis-design-vue 3.3.2-beta.17 → 3.3.2-beta.19

package/es/components/audio-sdk/src/audioSDK.d.ts

@@ -1,24 +1,4 @@
-interface SpeechResult {
-    result: 'success';
-    data?: string;
-    timeout?: boolean;
-}
-type AudioOptions = Partial<{
-    timed: number;
-    showModal: boolean;
-    instance: any;
-    token: string;
-    origin: string;
-    wsType: 'whole' | 'chunk';
-    type: 'http' | 'websocket';
-    wsOrigin: string;
-    wsSendInterval: number;
-    uploadOrigin: string;
-    recognizeOrigin: string;
-    allowPunctuationMark: boolean;
-    lastChunkTimeout: number;
-    wsTimeout: number;
-}>;
+import { AudioTypes } from './types';
 export default class AudioSDK {
     private plugins;
     private static instance;
@@ -36,11 +16,14 @@ export default class AudioSDK {
     contentRef: import("vue").Ref<string>;
     wsConnected: import("vue").Ref<boolean>;
     private loading;
+    private pauseContent;
+    recorderStatus: import("vue").Ref<"" | "fail" | "recording" | "pause" | "ws_close" | "stop">;
+    recorderClosing: import("vue").Ref<boolean>;
     waveView: any;
     constructor();
     static create(): AudioSDK;
     private initRecorder;
-    start(options: AudioOptions): Promise<SpeechResult>;
+    start(options: AudioTypes.AudioOptions): Promise<AudioTypes.SpeechResult>;
     private setWsConnected;
     private setupWebSocket;
     private startRecording;
@@ -54,8 +37,19 @@ export default class AudioSDK {
     private sendBlob;
     private messageResolver;
     private lastChunkTimer;
+    /**
+     * 关闭录音
+     * isErrorSet 错误状态需要关闭录音, 关闭页面或者弹框, 并提示
+     * isEndSet 结束 需要校验录音空值并提示
+     * isCloseSet 关闭 不要返回this.contentRef.value
+     * @param params
+     * @returns
+     */
     stop(params?: {
         timeout?: boolean;
+        isErrorSet?: boolean;
+        isEndSet?: boolean;
+        isCloseSet?: boolean;
     }): Promise<void>;
     private resolvePendingRequest;
     private processHttpRecording;
@@ -63,14 +57,23 @@ export default class AudioSDK {
     private handleMessage;
     private handleLastChunk;
     private parseMessageData;
-    handleError(msg: string, isUserNotAllow?: boolean): void;
+    /**
+     * 错误处理
+     * @param msg 错误信息
+     * @param isUserNotAllow 是否用户未授权
+     * @param messageType 提示类型 warning 警告 error 错误
+     * @param errorType 错误类型 stop空值提示触发的, 就不需要再调用stop
+     * @returns
+     */
+    handleError(msg: string, isUserNotAllow?: boolean, messageType?: 'warning' | 'error', errorType?: 'stop'): Promise<void>;
     private cleanupWebSocket;
     private cleanupResources;
     private resetState;
     private checkEnvironment;
-    pause(): void;
-    resume(): void;
+    private cleanupWaveView;
+    startWaveView(options: AudioTypes.WaveViewOptions): Promise<void>;
+    pause(): Promise<void>;
+    resume(): Promise<void>;
     destroy(): void;
     static destroy(): void;
 }
-export {};

package/es/components/audio-sdk/src/audioSDK.js

@@ -6,6 +6,8 @@ import { loadRecorderPlugins } from './utils/recorder/index.js';
 import { ref } from 'vue';
 import { $message } from './utils/index.js';
 import { RecordingModal } from './utils/recordingModal.js';
+import { AudioTypes } from './types/index.js';
+import { promiseTimeout } from '@vueuse/core';
 import Recorder from './utils/recorder/recorder.js';
 
 const DEFAULT_OPTIONS = {
@@ -31,7 +33,7 @@ const _AudioSDK = class {
       ...DEFAULT_OPTIONS
     };
     this.reqId = "";
-    this.connectionState = 0 /* DISCONNECTED */;
+    this.connectionState = AudioTypes.ConnectionState.DISCONNECTED;
     this.sendBuffer = [];
     this.startTimestamp = 0;
     this.bufferIndex = 0;
@@ -40,6 +42,9 @@ const _AudioSDK = class {
     this.contentRef = ref("");
     this.wsConnected = ref(false);
     this.loading = ref(false);
+    this.pauseContent = "";
+    this.recorderStatus = ref("");
+    this.recorderClosing = ref(false);
     this.waveView = null;
     this.messageResolver = null;
     this.lastChunkTimer = null;
@@ -61,8 +66,10 @@ const _AudioSDK = class {
   }
   async start(options) {
     this.resetState();
+    this.wsConnected.value = false;
     Object.assign(this.options, DEFAULT_OPTIONS, options);
     if (!this.checkEnvironment()) {
+      this.recorderStatus.value = "fail";
       return Promise.reject({
         result: "fail",
         msg: "\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301\u5F55\u97F3"
@@ -71,6 +78,7 @@ const _AudioSDK = class {
     if (!this.recorder)
       this.initRecorder();
     this.reqId = uuidGenerator();
+    this.pauseContent = "";
     this.contentRef.value = "";
     if (this.options.type === "websocket") {
       this.setWsConnected(false);
@@ -84,13 +92,13 @@ const _AudioSDK = class {
     this.wsConnected.value = wsConnected;
   }
   async setupWebSocket() {
-    if (this.connectionState === 2 /* CONNECTED */)
+    if (this.connectionState === AudioTypes.ConnectionState.CONNECTED)
       return this.setWsConnected(true);
     return new Promise((resolve, reject) => {
       const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
       const url = this.options.origin || `${protocol}//${window.location.host}${this.options.wsOrigin}`;
       this.webSocket = new WebSocket(url);
-      this.connectionState = 1 /* CONNECTING */;
+      this.connectionState = AudioTypes.ConnectionState.CONNECTING;
       const timeout = setTimeout(() => {
         this.cleanupWebSocket();
         reject({
@@ -101,7 +109,7 @@ const _AudioSDK = class {
       }, this.options.wsTimeout);
       this.webSocket.onopen = () => {
         clearTimeout(timeout);
-        this.connectionState = 2 /* CONNECTED */;
+        this.connectionState = AudioTypes.ConnectionState.CONNECTED;
         this.setWsConnected(true);
         resolve();
       };
@@ -110,6 +118,7 @@ const _AudioSDK = class {
       this.webSocket.onclose = () => {
         this.cleanupWebSocket();
         clearTimeout(timeout);
+        this.recorderStatus.value = "ws_close";
       };
     });
   }
@@ -124,9 +133,11 @@ const _AudioSDK = class {
         this.recorder.start();
         if (this.options.timed) {
           this.timer = setTimeout(() => this.stop({
-            timeout: true
+            timeout: true,
+            isEndSet: true
           }), this.options.timed * 1e3);
         }
+        this.recorderStatus.value = "recording";
         if (this.options.showModal) {
           this.showRecordingModal();
         }
@@ -138,10 +149,15 @@ const _AudioSDK = class {
   showRecordingModal() {
     this.recordingModal.show({
       instance: this.options.instance,
-      onClose: () => this.stop(),
+      onClose: async (obj) => await this.stop(obj),
+      startWaveViewMethod: (options) => this.startWaveView(options),
+      pause: () => this.pause(),
+      resume: () => this.resume(),
       props: {
         contentRef: this.contentRef,
-        wsConnected: this.wsConnected
+        wsConnected: this.wsConnected,
+        recorderStatus: this.recorderStatus,
+        recorderClosing: this.recorderClosing
       }
     });
   }
@@ -223,20 +239,38 @@ const _AudioSDK = class {
     reader.readAsDataURL(blob);
   }
   async stop(params = {}) {
-    this.recordingModal.hide();
+    var _a, _b;
+    if (this.recorderClosing.value)
+      return;
+    this.recorderClosing.value = true;
+    (_b = (_a = this.recordingModal) == null ? void 0 : _a.setLoading) == null ? void 0 : _b.call(_a);
     clearTimeout(this.timer);
-    if (this.options.type === "http") {
-      await this.processHttpRecording();
-    } else {
-      this.sendBufferedData(true);
-      await new Promise((resolve) => {
-        this.messageResolver = resolve;
-        this.lastChunkTimer = setTimeout(resolve, this.options.lastChunkTimeout);
-      });
-      this.messageResolver = null;
+    !params.isErrorSet && (this.recorderStatus.value = "stop");
+    try {
+      if (this.options.type === "http") {
+        await this.processHttpRecording();
+      } else {
+        this.sendBufferedData(true);
+        await new Promise((resolve) => {
+          this.messageResolver = resolve;
+          this.lastChunkTimer = setTimeout(resolve, this.options.lastChunkTimeout);
+        });
+        this.messageResolver = null;
+      }
+      await this.cleanupResources();
+      this.cleanupWebSocket();
+      if (params.isEndSet && !this.contentRef.value) {
+        this.handleError("\u5F55\u97F3\u5185\u5BB9\u4E3A\u7A7A", false, "warning", "stop");
+        this.recorderClosing.value = false;
+        return;
+      }
+      this.resolvePendingRequest(params);
+      this.recordingModal.hide();
+      this.recorderClosing.value = false;
+    } catch (err) {
+      console.log(err);
+      this.recorderClosing.value = false;
     }
-    this.resolvePendingRequest(params);
-    this.cleanupResources();
   }
   resolvePendingRequest(params) {
     const handler = this.messageQueue.shift();
@@ -244,7 +278,7 @@ const _AudioSDK = class {
       return;
     const result = {
       result: "success",
-      data: this.contentRef.value,
+      data: params.isCloseSet ? "" : this.contentRef.value,
       timeout: params.timeout
     };
     handler.resolve(result);
@@ -303,11 +337,23 @@ const _AudioSDK = class {
   }
   handleMessage(event) {
     const {
-      data,
-      isLast
+      data: {
+        data,
+        isLast
+      } = {
+        data: "",
+        isLast: false
+      },
+      success,
+      msg
     } = this.parseMessageData(event.data) || {};
+    if (!success) {
+      this.handleError(msg || "\u670D\u52A1\u5F02\u5E38");
+      return;
+    }
     if (data) {
-      this.contentRef.value = this.options.allowPunctuationMark ? data : data.replace(/[?？，。,.\s]/g, "");
+      const _data = this.pauseContent + data;
+      this.contentRef.value = this.options.allowPunctuationMark ? _data : _data.replace(/[?？，。,.\s]/g, "");
     }
     isLast && this.handleLastChunk();
   }
@@ -323,23 +369,23 @@ const _AudioSDK = class {
   }
   parseMessageData(data) {
     if (!isString(data))
-      return null;
+      return {
+        success: true
+      };
     try {
-      const res = JSON.parse(data).data;
+      const res = JSON.parse(data);
       if (!isObject(res))
         return {
-          data,
-          isLast: false
+          success: true
         };
       return res;
     } catch (e) {
       return {
-        data,
-        isLast: false
+        success: true
       };
     }
   }
-  handleError(msg, isUserNotAllow = false) {
+  async handleError(msg, isUserNotAllow = false, messageType = "error", errorType) {
     const handler = this.messageQueue.shift();
     if (!handler)
       return;
@@ -348,25 +394,31 @@ const _AudioSDK = class {
       msg,
       isUserNotAllow
     };
-    handler.reject(error);
-    this.cleanupResources();
+    this.recorderStatus.value = "fail";
+    errorType != "stop" && await this.stop({
+      isErrorSet: true
+    });
     if (isUserNotAllow) {
       $message.warning("\u8BF7\u5F00\u542F\u9EA6\u514B\u98CE\u6743\u9650");
+    } else if (msg) {
+      $message[messageType](msg);
     }
+    handler.reject(error);
   }
   cleanupWebSocket() {
-    var _a;
-    (_a = this.webSocket) == null ? void 0 : _a.close();
+    var _a, _b;
+    (_b = (_a = this.webSocket) == null ? void 0 : _a.close) == null ? void 0 : _b.call(_a);
     this.webSocket = null;
-    this.connectionState = 0 /* DISCONNECTED */;
+    this.connectionState = AudioTypes.ConnectionState.DISCONNECTED;
   }
-  cleanupResources() {
-    var _a;
-    (_a = this.recorder) == null ? void 0 : _a.close();
+  async cleanupResources() {
+    var _a, _b;
+    await ((_b = (_a = this.recorder) == null ? void 0 : _a.close) == null ? void 0 : _b.call(_a));
     this.sendBuffer = [];
     this.startTimestamp = 0;
   }
   resetState() {
+    this.recorderStatus.value = "";
     this.cleanupResources();
     clearTimeout(this.timer);
   }
@@ -377,13 +429,43 @@ const _AudioSDK = class {
     }
     return true;
   }
-  pause() {
-    var _a;
-    (_a = this.recorder) == null ? void 0 : _a.pause();
+  cleanupWaveView() {
+    if (!this.waveView)
+      return;
+    this.waveView.elem = null;
+    this.waveView.canvas = null;
+    this.waveView = null;
+  }
+  async startWaveView(options) {
+    var _a, _b, _c, _d;
+    this.cleanupWaveView();
+    await promiseTimeout(50);
+    this.waveView = (_d = (_c = (_b = Recorder).FrequencyHistogramView) == null ? void 0 : _c.call(_b, {
+      elem: (_a = options == null ? void 0 : options.waveSelector) == null ? void 0 : _a.call(options),
+      scale: 1,
+      fps: 15,
+      widthRatio: 0.5,
+      lineCount: 30,
+      minHeight: 2,
+      stripeEnable: false,
+      mirrorEnable: false,
+      linear: [0, "rgba(94, 92, 255, 0.9)", 1, "rgba(95, 88, 224)"],
+      position: 0,
+      ...options == null ? void 0 : options.waveProps
+    })) != null ? _d : null;
+  }
+  async pause() {
+    var _a, _b;
+    this.cleanupWebSocket();
+    this.pauseContent = this.contentRef.value;
+    (_b = (_a = this.recorder) == null ? void 0 : _a.pause) == null ? void 0 : _b.call(_a);
+    this.recorderStatus.value = "pause";
   }
-  resume() {
+  async resume() {
     var _a;
+    await this.setupWebSocket();
     (_a = this.recorder) == null ? void 0 : _a.resume();
+    this.recorderStatus.value = "recording";
   }
   destroy() {
     this.resetState();

package/es/components/audio-sdk/src/components/readyCountdown.vue.d.ts

@@ -0,0 +1,31 @@
+declare const _default: import("vue").DefineComponent<{
+    isCountActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        isCountActive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        "onUpdate:isCountFinished"?: ((...args: any[]) => any) | undefined;
+    }>>;
+    emit: (event: "update:isCountFinished", ...args: any[]) => void;
+    renderCountdown: ({ seconds }: {
+        seconds: number;
+    }) => number;
+    countDownFinish: () => void;
+    NCountdown: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:isCountFinished"[], "update:isCountFinished", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isCountActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:isCountFinished"?: ((...args: any[]) => any) | undefined;
+}, {
+    isCountActive: boolean;
+}>;
+export default _default;

package/es/components/audio-sdk/src/components/readyCountdown.vue.js

@@ -0,0 +1,6 @@
+import _sfc_main from './readyCountdown.vue2.js';
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
+
+var ReadyCountdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "readyCountdown.vue"]]);
+
+export { ReadyCountdown as default };

package/es/components/audio-sdk/src/components/readyCountdown.vue2.js

@@ -0,0 +1,46 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, unref } from 'vue';
+import { NCountdown } from 'naive-ui';
+
+const _hoisted_1 = {
+  class: "c-recording-ready"
+};
+const _hoisted_2 = {
+  class: "c-recording-countdown-box"
+};
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("h4", null, "\u51C6\u5907\u5F00\u59CB\u5F55\u97F3", -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("p", {
+  class: "c-recording-ready-desc"
+}, "3\u79D2\u540E\u5F00\u59CB\u5F55\u97F3\uFF0C\u8BF7\u505A\u597D\u51C6\u5907\uFF01", -1);
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "readyCountdown",
+  props: {
+    isCountActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:isCountFinished"],
+  setup(__props, {
+    emit
+  }) {
+    const props = __props;
+    const renderCountdown = ({
+      seconds
+    }) => {
+      return seconds;
+    };
+    const countDownFinish = () => {
+      emit("update:isCountFinished", true);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("span", null, [createVNode(unref(NCountdown), {
+        active: props.isCountActive,
+        duration: 3e3,
+        render: renderCountdown,
+        onFinish: countDownFinish
+      }, null, 8, ["active"])])]), _hoisted_3, _hoisted_4]);
+    };
+  }
+});
+
+export { _sfc_main as default };