hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/lib/components/appAudioPlayer/appAudioPlayer.vue.js

@@ -0,0 +1,466 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var mediaLoading = require('../appVideoPlayer/cpns/mediaLoading.vue.js');
+var index = require('./js/index.js');
+var useLocale = require('../../hooks/useLocale.js');
+var useMixins = require('../../hooks/useMixins.js');
+var index$1 = require('../appIcon/index.js');
+var index$2 = require('../appTooltip/index.js');
+var useAudioPlayerConfig = require('../../hooks/useAudioPlayerConfig.js');
+var is = require('../../utils/is.js');
+
+import "./style/appAudioPlayer.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppAudioPlayer"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    type: {
+      type: String,
+      default: () => {
+        const { audioPlayerConfig } = useAudioPlayerConfig.useAudioPlayerConfig();
+        const { type } = audioPlayerConfig.value;
+        if (["default", "analyse"].includes(type)) return type;
+        return "default";
+      }
+    },
+    // 播放列表
+    playList: {
+      type: Array,
+      default: () => []
+    },
+    // 播放速度
+    speed: {
+      type: Number,
+      default: () => {
+        const { audioPlayerConfig } = useAudioPlayerConfig.useAudioPlayerConfig();
+        if (is.isNumber(audioPlayerConfig.value.speed)) {
+          return audioPlayerConfig.value.speed;
+        }
+        return 1;
+      }
+    },
+    // 播放规则
+    playRules: {
+      type: Number,
+      default: () => {
+        const { audioPlayerConfig } = useAudioPlayerConfig.useAudioPlayerConfig();
+        if ([1, 2, 3].includes(audioPlayerConfig.value.playRules)) {
+          return audioPlayerConfig.value.playRules;
+        }
+        return 3;
+      }
+    },
+    // 是否显示播放规则
+    showPlayRules: {
+      type: Boolean,
+      default: () => {
+        const { audioPlayerConfig } = useAudioPlayerConfig.useAudioPlayerConfig();
+        const { showPlayRules } = audioPlayerConfig.value;
+        return is.isBoolean(showPlayRules) ? showPlayRules : true;
+      }
+    },
+    // 是否显示画面
+    showPicture: {
+      type: Boolean,
+      default: () => {
+        const { audioPlayerConfig } = useAudioPlayerConfig.useAudioPlayerConfig();
+        const { showPicture } = audioPlayerConfig.value;
+        return is.isBoolean(showPicture) ? showPicture : true;
+      }
+    },
+    // 是否显示下载文件
+    showDownloadFiles: {
+      type: Boolean,
+      default: () => {
+        const { audioPlayerConfig } = useAudioPlayerConfig.useAudioPlayerConfig();
+        const { showDownloadFiles } = audioPlayerConfig.value;
+        return is.isBoolean(showDownloadFiles) ? showDownloadFiles : true;
+      }
+    },
+    // 下载处理
+    downloadFn: {
+      type: Function
+    }
+  },
+  emits: [
+    "canplay",
+    "timeupdate",
+    "play-start",
+    "play-ended",
+    "play-previous",
+    "play-next"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale.useLocale();
+    const audioWrapperRef = vue.useTemplateRef("audioWrapperRef");
+    const audioRef = vue.useTemplateRef("audioRef");
+    const {
+      // useAudioPlayer
+      speed,
+      playRules,
+      loading,
+      audioItem,
+      audioUrl,
+      currentDuration,
+      totalDuration,
+      progress,
+      isDrop,
+      isFullScreen,
+      volumeValue,
+      audioState,
+      speedLabel,
+      isCanPlay,
+      isPlaying,
+      isAnalyseType,
+      // 配置
+      speedList,
+      playRulesList,
+      // 函数
+      playAudio,
+      pauseAudio,
+      playPrevious,
+      playNext,
+      playRulesHandler,
+      speedHandler,
+      changeVolume,
+      getNowWh,
+      setAudioCurrentTime,
+      getPercent,
+      isCantPlayType,
+      jumpDuration,
+      initFullScreenEvent,
+      destroyFullScreenEvent,
+      onFullScreenHandler,
+      onDownloadHandler
+    } = useMixins.useMixins(
+      {
+        props,
+        emits,
+        audioWrapperRef,
+        audioRef
+      },
+      [index.useAudioPlayer]
+    );
+    vue.onMounted(() => {
+      initFullScreenEvent();
+    });
+    vue.onUnmounted(() => {
+      destroyFullScreenEvent();
+    });
+    __expose({
+      playAudio,
+      setAudioCurrentTime
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          class: vue.normalizeClass(["audio-player", { "audio-player-analyse": vue.unref(isAnalyseType) }])
+        },
+        [
+          __props.showPicture ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "audio-play-box"
+          }, [
+            vue.unref(loading) ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "w-full h-full flex flex-col justify-center items-center"
+            }, [
+              vue.createVNode(mediaLoading.default),
+              vue.createElementVNode(
+                "span",
+                { class: "text-xs text-theme mt-4" },
+                "..." + vue.toDisplayString(vue.unref(t)("audioPlayer.audioResourcesAreLoading")) + "...",
+                1
+                /* TEXT */
+              )
+            ])) : (vue.openBlock(), vue.createElementBlock("div", {
+              key: 1,
+              class: "point_area"
+            }, [
+              vue.createElementVNode("div", { class: "point point_dot" }, [
+                vue.createElementVNode("div", { class: "flex items-center justify-center" }, [
+                  vue.createVNode(vue.unref(index$1.AppIcon), { "svg-name": "menu-menu_micphone_v2-select" })
+                ])
+              ]),
+              vue.withDirectives(vue.createElementVNode(
+                "div",
+                { style: { "transition": "1s" } },
+                [
+                  vue.createElementVNode("div", { class: "point point_10" }),
+                  vue.createElementVNode("div", { class: "point point_40" }),
+                  vue.createElementVNode("div", { class: "point point_shadow point_80" })
+                ],
+                512
+                /* NEED_PATCH */
+              ), [
+                [vue.vShow, vue.unref(isPlaying)]
+              ])
+            ]))
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode(
+            "div",
+            {
+              ref_key: "audioWrapperRef",
+              ref: audioWrapperRef,
+              class: vue.normalizeClass(["operator-box", { "operator-analyse": vue.unref(isAnalyseType) }])
+            },
+            [
+              vue.unref(isAnalyseType) ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "duration-operator"
+              }, [
+                vue.createElementVNode(
+                  "span",
+                  { class: "text-main" },
+                  vue.toDisplayString(vue.unref(currentDuration)),
+                  1
+                  /* TEXT */
+                ),
+                vue.createTextVNode(" / "),
+                vue.createElementVNode(
+                  "span",
+                  null,
+                  vue.toDisplayString(vue.unref(totalDuration)),
+                  1
+                  /* TEXT */
+                )
+              ])) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(["play-operator", { "play-analyse": vue.unref(isAnalyseType) }])
+                },
+                [
+                  vue.createElementVNode("div", { onClick: vue.unref(playPrevious) }, [
+                    vue.createVNode(vue.unref(index$1.AppIcon), {
+                      "svg-name": vue.unref(isAnalyseType) ? "player--interpretation-last" : "player-audio_previous-btn",
+                      "class-name": "last-icon"
+                    }, null, 8, ["svg-name"])
+                  ], 8, ["onClick"]),
+                  vue.unref(audioState) !== "PLAYING" && vue.unref(isCanPlay) ? (vue.openBlock(), vue.createElementBlock("div", {
+                    key: 0,
+                    onClick: ($event) => vue.unref(playAudio)(vue.unref(audioUrl))
+                  }, [
+                    vue.createVNode(vue.unref(index$1.AppIcon), { "svg-name": "player-audio_play-btn" })
+                  ], 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+                  vue.unref(audioState) === "PLAYING" ? (vue.openBlock(), vue.createElementBlock("div", {
+                    key: 1,
+                    onClick: vue.unref(pauseAudio)
+                  }, [
+                    vue.createVNode(vue.unref(index$1.AppIcon), { "svg-name": "player-audio_pause-btn" })
+                  ], 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+                  vue.createElementVNode("div", { onClick: vue.unref(playNext) }, [
+                    vue.createVNode(vue.unref(index$1.AppIcon), {
+                      "svg-name": vue.unref(isAnalyseType) ? "player--interpretation-next" : "player-audio_next-btn",
+                      "class-name": "next-icon"
+                    }, null, 8, ["svg-name"])
+                  ], 8, ["onClick"]),
+                  vue.createElementVNode(
+                    "audio",
+                    {
+                      ref_key: "audioRef",
+                      ref: audioRef
+                    },
+                    null,
+                    512
+                    /* NEED_PATCH */
+                  )
+                ],
+                2
+                /* CLASS */
+              ),
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(["progress-operator", { "progress-analyse": vue.unref(isAnalyseType) }])
+                },
+                [
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    "onUpdate:modelValue": ($event) => vue.isRef(progress) ? progress.value = $event : null,
+                    type: "range",
+                    max: "100",
+                    style: vue.normalizeStyle({
+                      background: `linear-gradient(to right, rgba(var(--hy-theme)) ${vue.unref(getPercent)(
+                        vue.unref(progress),
+                        100
+                      )}%, rgba(var(--hy-theme),0.5) ${vue.unref(getPercent)(vue.unref(progress), 100)}% `
+                    }),
+                    onMousedown: ($event) => isDrop.value = true,
+                    onMouseup: ($event) => vue.unref(getNowWh)($event)
+                  }, null, 44, ["onUpdate:modelValue", "onMousedown", "onMouseup"]), [
+                    [vue.vModelText, vue.unref(progress)]
+                  ]),
+                  __props.type === "default" ? (vue.openBlock(), vue.createElementBlock("div", {
+                    key: 0,
+                    class: "duration-operator justify-between"
+                  }, [
+                    vue.createElementVNode(
+                      "span",
+                      { class: "text-main" },
+                      vue.toDisplayString(vue.unref(currentDuration)),
+                      1
+                      /* TEXT */
+                    ),
+                    vue.createElementVNode(
+                      "span",
+                      null,
+                      vue.toDisplayString(vue.unref(totalDuration)),
+                      1
+                      /* TEXT */
+                    )
+                  ])) : vue.createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              ),
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(["tools-operator", { "tools-analyse": vue.unref(isAnalyseType) }])
+                },
+                [
+                  vue.createCommentVNode(" \u901F\u5EA6 "),
+                  vue.createVNode(vue.unref(elementPlus.ElPopover), {
+                    placement: "top",
+                    trigger: "click",
+                    appendToBody: false,
+                    "popper-class": "popover-speed"
+                  }, {
+                    reference: vue.withCtx(() => [
+                      vue.createElementVNode(
+                        "div",
+                        { class: "speed-box" },
+                        vue.toDisplayString(vue.unref(speedLabel)),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", { class: "flex items-center justify-center py-[10px]" }, [
+                        vue.createElementVNode("ul", { class: "speed-list" }, [
+                          (vue.openBlock(true), vue.createElementBlock(
+                            vue.Fragment,
+                            null,
+                            vue.renderList(vue.unref(speedList), (item, index) => {
+                              return vue.openBlock(), vue.createElementBlock("li", {
+                                key: index,
+                                class: vue.normalizeClass(["clickBox", { selectBox: item.value === vue.unref(speed) }]),
+                                onClick: ($event) => vue.unref(speedHandler)(item.value)
+                              }, vue.toDisplayString(item.label), 11, ["onClick"]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ])
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }),
+                  vue.createCommentVNode(" \u4E0B\u8F7D "),
+                  __props.showDownloadFiles ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.AppTooltip), {
+                    key: 0,
+                    isAlways: "",
+                    content: vue.unref(t)("audioPlayer.downloadFile")
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(index$1.AppIcon), {
+                        "svg-name": "player-audio_down-btn",
+                        onClick: vue.unref(onDownloadHandler)
+                      }, null, 8, ["onClick"])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["content"])) : vue.createCommentVNode("v-if", true),
+                  vue.createCommentVNode(" \u64AD\u653E\u89C4\u5219 "),
+                  __props.showPlayRules ? (vue.openBlock(true), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 1 },
+                    vue.renderList(vue.unref(playRulesList), (item, index) => {
+                      return vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: index },
+                        [
+                          vue.unref(playRules) === item.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.AppTooltip), {
+                            key: 0,
+                            isAlways: "",
+                            content: item.label
+                          }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(vue.unref(index$1.AppIcon), {
+                                "svg-name": item.svgName,
+                                onClick: ($event) => vue.unref(playRulesHandler)(item.value)
+                              }, null, 8, ["svg-name", "onClick"])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["content"])) : vue.createCommentVNode("v-if", true)
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )) : vue.createCommentVNode("v-if", true),
+                  vue.createCommentVNode(" \u58F0\u97F3 "),
+                  vue.createVNode(vue.unref(elementPlus.ElPopover), {
+                    placement: "top",
+                    appendToBody: false,
+                    trigger: "click",
+                    "popper-class": "popover-volume-slider"
+                  }, {
+                    reference: vue.withCtx(() => [
+                      vue.createElementVNode("div", { class: "flex items-center justify-center" }, [
+                        vue.createVNode(vue.unref(index$2.AppTooltip), {
+                          isAlways: "",
+                          content: vue.unref(t)("audioPlayer.adjustPlaybackVolume")
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(index$1.AppIcon), { "svg-name": "player-audio_volumn" })
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        }, 8, ["content"])
+                      ])
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", { class: "flex items-center justify-center" }, [
+                        vue.createVNode(vue.unref(elementPlus.ElSlider), {
+                          modelValue: vue.unref(volumeValue),
+                          "onUpdate:modelValue": ($event) => vue.isRef(volumeValue) ? volumeValue.value = $event : null,
+                          vertical: "",
+                          height: "105px",
+                          onInput: ($event) => vue.unref(changeVolume)($event)
+                        }, null, 8, ["modelValue", "onUpdate:modelValue", "onInput"])
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ],
+                2
+                /* CLASS */
+              )
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appAudioPlayer/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appAudioPlayer = require('./appAudioPlayer.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppAudioPlayer = handler.withInstall(appAudioPlayer.default);
+
+exports.AppAudioPlayer = AppAudioPlayer;
+exports.default = AppAudioPlayer;