hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/es/components/appAudioPlayer/appAudioPlayer.vue.mjs

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

package/es/components/appAudioPlayer/index.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './appAudioPlayer.vue.mjs';
+import { withInstall } from '../../utils/handler.mjs';
+
+const AppAudioPlayer = withInstall(_sfc_main);
+
+export { AppAudioPlayer, AppAudioPlayer as default };