hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/lib/components/appVideoPlayer/appVideoPlayer.vue.js

@@ -0,0 +1,651 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var mediaLoading = require('./cpns/mediaLoading.vue.js');
+var index = require('./js/index.js');
+var loadScript = require('../../utils/loadScript.js');
+var useLocale = require('../../hooks/useLocale.js');
+var useMixins = require('../../hooks/useMixins.js');
+var index$1 = require('../appIcon/index.js');
+var index$2 = require('../appButton/index.js');
+var index$3 = require('../appTooltip/index.js');
+var useVideoPlayerConfig = require('../../hooks/useVideoPlayerConfig.js');
+var is = require('../../utils/is.js');
+
+import "./style/appVideoPlayer.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppVideoPlayer"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    type: {
+      type: String,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        const { type } = videoPlayerConfig.value;
+        if (["default", "analyse"].includes(type)) return type;
+        return "default";
+      }
+    },
+    // 播放列表
+    playList: {
+      type: Array,
+      default: () => []
+    },
+    // 播放速度
+    speed: {
+      type: Number,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        if (is.isNumber(videoPlayerConfig.value.speed)) {
+          return videoPlayerConfig.value.speed;
+        }
+        return 1;
+      }
+    },
+    // 播放规则
+    playRules: {
+      type: Number,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        if ([1, 2, 3].includes) {
+          return videoPlayerConfig.value.playRules;
+        }
+        return 3;
+      }
+    },
+    // 是否显示播放规则
+    showPlayRules: {
+      type: Boolean,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        const { showPlayRules } = videoPlayerConfig.value;
+        return is.isBoolean(showPlayRules) ? showPlayRules : true;
+      }
+    },
+    // 是否显示下载文件
+    showDownloadFiles: {
+      type: Boolean,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        const { showDownloadFiles } = videoPlayerConfig.value;
+        return is.isBoolean(showDownloadFiles) ? showDownloadFiles : true;
+      }
+    },
+    // 是否显示展开控件
+    showShrink: {
+      type: Boolean,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        const { showShrink } = videoPlayerConfig.value;
+        return is.isBoolean(showShrink) ? showShrink : false;
+      }
+    },
+    // 是否显示全屏控件
+    showFullScreen: {
+      type: Boolean,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        const { showFullScreen } = videoPlayerConfig.value;
+        return is.isBoolean(showFullScreen) ? showFullScreen : true;
+      }
+    },
+    // VLC协议
+    vlcProtocol: {
+      type: String,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        return videoPlayerConfig.value.vlcProtocol || "hyvlc";
+      }
+    },
+    // VLC下载地址
+    vlcAddress: {
+      type: String,
+      default: () => {
+        const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+        return videoPlayerConfig.value.vlcAddress;
+      }
+    },
+    // 下载处理
+    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 videoWrapperRef = vue.useTemplateRef("videoWrapperRef");
+    const videoRef = vue.useTemplateRef("videoRef");
+    const {
+      // useVideoPlayer
+      speed,
+      playRules,
+      loading,
+      videoItem,
+      videoUrl,
+      currentDuration,
+      totalDuration,
+      progress,
+      isDrop,
+      isFullScreen,
+      volumeValue,
+      hasVLC,
+      isCanNotPlayType,
+      videoState,
+      speedLabel,
+      isCanPlay,
+      isAnalyseType,
+      // 配置
+      speedList,
+      playRulesList,
+      // 函数
+      playVideo,
+      pauseVideo,
+      playPrevious,
+      playNext,
+      playRulesHandler,
+      speedHandler,
+      changeVolume,
+      getNowWh,
+      setVideoCurrentTime,
+      getPercent,
+      initFullScreenEvent,
+      destroyFullScreenEvent,
+      onFullScreenHandler,
+      openVLC,
+      downloadVLC,
+      onDownloadHandler,
+      // useVideoResize
+      isExpand,
+      videoHeight,
+      onSwitchShrink,
+      listenerVideoWrapper,
+      unlistenerVideoWrapper
+    } = useMixins.useMixins(
+      {
+        props,
+        emits,
+        videoWrapperRef,
+        videoRef
+      },
+      [index.useVideoPlayer, index.useVideoResize]
+    );
+    loadScript.protocolcheckLoad();
+    vue.onMounted(() => {
+      initFullScreenEvent();
+      listenerVideoWrapper();
+    });
+    vue.onUnmounted(() => {
+      destroyFullScreenEvent();
+      unlistenerVideoWrapper();
+    });
+    __expose({
+      playVideo,
+      pauseVideo,
+      setVideoCurrentTime
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          ref_key: "videoWrapperRef",
+          ref: videoWrapperRef,
+          class: vue.normalizeClass(["video-player-content", {
+            "video-player-content-pick-up": !vue.unref(isExpand) && !vue.unref(isFullScreen),
+            "full-video-player-content": vue.unref(isFullScreen)
+          }])
+        },
+        [
+          vue.createCommentVNode(" loading "),
+          vue.unref(loading) ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "w-full h-full flex flex-col justify-center items-center absolute left-0 top-0"
+          }, [
+            vue.createVNode(mediaLoading.default),
+            vue.createElementVNode(
+              "span",
+              { class: "text-xs text-theme mt-4" },
+              "..." + vue.toDisplayString(vue.unref(t)("videoPlayer.videoResourcesAreLoading")) + "...",
+              1
+              /* TEXT */
+            )
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u65E0\u6CD5\u64AD\u653E "),
+          vue.unref(videoState) === "CAN_NOT_PLAY" ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "w-full h-full flex flex-col justify-center items-center px-[34px]"
+          }, [
+            vue.createCommentVNode(" \u91C7\u96C6\u7AD9\u6587\u4EF6 "),
+            vue.unref(videoItem) && vue.unref(videoItem).csFile === 1 && vue.unref(videoItem).onlineState !== 1 ? (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 0 },
+              [
+                vue.createElementVNode("div", { class: "w-[54px] h-[54px] rounded-full border-[2px] border-dangerv2 flex justify-center items-center shadow-[0px_0px_10px_2px_var(--dangerv2)]" }, [
+                  vue.createElementVNode("div", { class: "w-[42px] h-[42px] rounded-full border-[1px] border-dashed border-dangerv2 flex justify-center items-center" }, [
+                    vue.createVNode(vue.unref(index$1.AppIcon), {
+                      "svg-name": "player-icon_brokLink",
+                      class: "!w-[24px] !h-[24px] text-dangerv2"
+                    })
+                  ])
+                ]),
+                vue.createElementVNode(
+                  "span",
+                  { class: "text-xs text-auxiliary mt-4" },
+                  vue.toDisplayString(vue.unref(t)("videoPlayer.fileLoadingFailed")),
+                  1
+                  /* TEXT */
+                ),
+                vue.createElementVNode(
+                  "span",
+                  { class: "text-xs text-auxiliary" },
+                  vue.toDisplayString(_ctx.$t(
+                    "pleaseCheckWhetherTheCollectionStationIsOnlineAndWhetherTheFileExists"
+                  )),
+                  1
+                  /* TEXT */
+                )
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )) : (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 1 },
+              [
+                vue.createCommentVNode(" \u666E\u901A\u6587\u4EF6 "),
+                vue.createElementVNode("div", { class: "flex items-center justify-center text-auxiliary" }, [
+                  vue.createVNode(vue.unref(index$1.AppIcon), {
+                    "svg-name": "player-media-center-right-ripple",
+                    className: "!w-[12px] !h-[12px]"
+                  }),
+                  vue.createVNode(vue.unref(index$1.AppIcon), {
+                    "svg-name": "player-media-center-video",
+                    className: "!w-[40px] !h-[40px] mx-1"
+                  }),
+                  vue.createVNode(vue.unref(index$1.AppIcon), {
+                    "svg-name": "player-media-center-left-ripple",
+                    className: "!w-[12px] !h-[12px]"
+                  })
+                ]),
+                vue.createElementVNode(
+                  "div",
+                  { class: "text-theme text-center mt-3 mb-[14px]" },
+                  vue.toDisplayString(vue.unref(isCanNotPlayType) ? vue.unref(t)("videoPlayer.vlcPlayerTip") : vue.unref(t)("theVideoCannotBePlayed")),
+                  1
+                  /* TEXT */
+                ),
+                vue.unref(isCanNotPlayType) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  class: "flex justify-center"
+                }, [
+                  vue.unref(hasVLC) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.AppButton), {
+                    key: 0,
+                    onClick: vue.unref(openVLC)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        vue.toDisplayString(vue.unref(t)("videoPlayer.clickPlay")),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$2.AppButton), {
+                    key: 1,
+                    onClick: vue.unref(downloadVLC)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        vue.toDisplayString(vue.unref(t)("videoPlayer.toDownloadVlc")),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"]))
+                ])) : vue.createCommentVNode("v-if", true)
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )),
+            vue.createCommentVNode(" \u5207\u6362\u89C6\u9891\u63A7\u4EF6 "),
+            __props.playList?.length > 1 ? (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 2 },
+              [
+                vue.createElementVNode("div", { class: "vlc-between-control left-0" }, [
+                  vue.createVNode(vue.unref(index$3.AppTooltip), {
+                    isAlways: "",
+                    content: "\u67E5\u770B\u4E0A\u4E00\u6761\u89C6\u9891"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", {
+                        class: "w-[30px] h-[30px] bg-[#3D6286] flex items-center justify-center cursor-pointer",
+                        onClick: vue.unref(playPrevious)
+                      }, [
+                        vue.createVNode(vue.unref(index$1.AppIcon), {
+                          "svg-name": "player--previous",
+                          className: "!w-3 !h-3 text-main"
+                        })
+                      ], 8, ["onClick"])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ]),
+                vue.createElementVNode("div", { class: "vlc-between-control right-0" }, [
+                  vue.createVNode(vue.unref(index$3.AppTooltip), {
+                    isAlways: "",
+                    content: "\u67E5\u770B\u4E0B\u4E00\u6761\u89C6\u9891"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", {
+                        class: "w-[30px] h-[30px] bg-[#3D6286] flex items-center justify-center cursor-pointer",
+                        onClick: vue.unref(playNext)
+                      }, [
+                        vue.createVNode(vue.unref(index$1.AppIcon), {
+                          "svg-name": "player--next",
+                          className: "!w-3 !h-3 text-main"
+                        })
+                      ], 8, ["onClick"])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )) : vue.createCommentVNode("v-if", true)
+          ])) : (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 2 },
+            [
+              vue.createCommentVNode(" \u53EF\u4EE5\u64AD\u653E "),
+              vue.createElementVNode(
+                "video",
+                {
+                  ref_key: "videoRef",
+                  ref: videoRef,
+                  style: vue.normalizeStyle({ height: vue.unref(videoHeight) })
+                },
+                [
+                  vue.createElementVNode("source", { type: "video/mp4" }),
+                  vue.createElementVNode("source", { type: "video/webm" }),
+                  vue.createElementVNode("source", { type: "video/ogg" }),
+                  vue.createTextVNode(
+                    " " + vue.toDisplayString(vue.unref(t)("videoPlayer.yourBrowserDoesNotSupportHTMLVideoPlayback")),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                4
+                /* STYLE */
+              ),
+              vue.createElementVNode("div", { class: "operator-box" }, [
+                vue.createElementVNode("div", { class: "progress-box" }, [
+                  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)]
+                  ])
+                ]),
+                vue.createElementVNode("div", { class: "left-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.unref(isCanPlay) ? (vue.openBlock(), vue.createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: vue.normalizeClass(["center-operator", { "center-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(videoState) !== "PLAYING" ? (vue.openBlock(), vue.createElementBlock("div", {
+                      key: 0,
+                      onClick: ($event) => vue.unref(playVideo)(vue.unref(videoUrl))
+                    }, [
+                      vue.createVNode(vue.unref(index$1.AppIcon), { "svg-name": "player-audio_play-btn" })
+                    ], 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+                    vue.unref(videoState) === "PLAYING" ? (vue.openBlock(), vue.createElementBlock("div", {
+                      key: 1,
+                      onClick: vue.unref(pauseVideo)
+                    }, [
+                      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"])
+                  ],
+                  2
+                  /* CLASS */
+                )) : vue.createCommentVNode("v-if", true),
+                vue.createElementVNode("div", { class: "right-operator" }, [
+                  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(" \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$3.AppTooltip), {
+                          isAlways: "",
+                          content: vue.unref(t)("videoPlayer.adjustPlaybackVolume")
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(index$1.AppIcon), {
+                              "svg-name": "player-audio_volumn",
+                              "class-name": "volume-icon"
+                            })
+                          ]),
+                          _: 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 */
+                  }),
+                  vue.createCommentVNode(" \u653E\u5927 "),
+                  __props.showFullScreen ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.AppTooltip), {
+                    key: 0,
+                    isAlways: "",
+                    content: vue.unref(t)("videoPlayer.fullScreenSwitch")
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(index$1.AppIcon), {
+                        "svg-name": vue.unref(isFullScreen) ? "player-audio_reduce" : "player-audio_enlarge",
+                        onClick: vue.unref(onFullScreenHandler)
+                      }, null, 8, ["svg-name", "onClick"])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["content"])) : vue.createCommentVNode("v-if", true),
+                  vue.createCommentVNode(" \u6536\u8D77/\u5C55\u5F00 "),
+                  !vue.unref(isFullScreen) && __props.showShrink ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.AppTooltip), {
+                    key: 1,
+                    isAlways: "",
+                    content: vue.unref(isExpand) ? "\u6536\u8D77" : "\u5C55\u5F00"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(index$1.AppIcon), {
+                        "svg-name": vue.unref(isExpand) ? "player--interpretation-foldup" : "player--interpretation-expand",
+                        onClick: vue.unref(onSwitchShrink)
+                      }, null, 8, ["svg-name", "onClick"])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["content"])) : vue.createCommentVNode("v-if", true)
+                ])
+              ])
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )),
+          vue.createCommentVNode(" \u89C6\u9891\u989D\u5916\u529F\u80FD "),
+          (__props.showDownloadFiles || __props.showPlayRules) && vue.unref(isExpand) ? (vue.openBlock(), vue.createElementBlock(
+            "div",
+            {
+              key: 3,
+              class: vue.normalizeClass(["float-operator-item", {
+                "!right-[43px]": vue.unref(videoState) === "CAN_NOT_PLAY" && __props.playList?.length > 1
+              }])
+            },
+            [
+              vue.createCommentVNode(" \u4E0B\u8F7D "),
+              __props.showDownloadFiles ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.AppTooltip), {
+                key: 0,
+                isAlways: "",
+                content: vue.unref(t)("videoPlayer.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.unref(videoState) !== "CAN_NOT_PLAY" ? (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$3.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.renderSlot(_ctx.$slots, "pight-control-ranel")
+            ],
+            2
+            /* CLASS */
+          )) : vue.createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appVideoPlayer/cpns/mediaLoading.vue.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+import "../style/mediaLoading.scss";
+
+const _sfc_main = {
+  __name: "mediaLoading",
+  props: {
+    width: {
+      type: Number,
+      default: 60
+    },
+    height: {
+      type: Number,
+      default: 60
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          class: "tech-loader",
+          style: vue.normalizeStyle({ width: __props.width + "px", height: __props.height + "px" })
+        },
+        [
+          vue.createElementVNode("div", { class: "tech-center-dot" })
+        ],
+        4
+        /* STYLE */
+      );
+    };
+  }
+};
+
+exports.default = _sfc_main;