zartui 3.1.23-beta.1 → 3.1.23-beta.3

package/lib/video/Video.js

@@ -31,7 +31,6 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
-var import_vue2 = require("vue");
 var import_use_expose = require("../composables/use-expose");
 var import_use_global_z_index = require("../composables/use-global-z-index");
 var import_icon = __toESM(require("../icon"));
@@ -39,7 +38,7 @@ var import_util = require("../lazyload/vue-lazyload/util");
 var import_utils = require("../utils");
 const [name, bem] = (0, import_utils.createNamespace)("video");
 const videoProps = {
-  src: (0, import_utils.makeStringProp)("star"),
+  src: (0, import_utils.makeStringProp)(""),
   // 控制控制器和标题的显示
   showToolBox: Boolean,
   options: {
@@ -58,22 +57,23 @@ const videoProps = {
       playsinline: false,
       // 行内展示
       touchPlay: false,
-      preload: ""
+      preload: "",
+      controlsList: ["nodownload"]
     }
   },
   errorTip: (0, import_utils.makeStringProp)("\u64AD\u653E\u5668\u53D1\u751F\u9519\u8BEF"),
   clickRetryTip: (0, import_utils.makeStringProp)("\u8BF7\u70B9\u51FB\u91CD\u8BD5")
 };
-var stdin_default = (0, import_vue2.defineComponent)({
+var stdin_default = (0, import_vue.defineComponent)({
   name,
   props: videoProps,
   emits: ["play", "pause", "play-end", "time"],
   setup(props, {
     emit
   }) {
-    const progressBar = (0, import_vue2.ref)();
-    const root = (0, import_vue2.ref)();
-    const state = (0, import_vue2.reactive)({
+    const progressBar = (0, import_vue.ref)();
+    const root = (0, import_vue.ref)();
+    const state = (0, import_vue.reactive)({
       initial: true,
       // 控制封面的显示
       // 视频容器元素
@@ -118,12 +118,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
       },
       showTouchMask: false
     });
-    const isDisabled = (0, import_vue2.computed)(() => {
+    const isDisabled = (0, import_vue.computed)(() => {
       return props.options.disabled;
     });
-    (0, import_vue2.watch)(() => props.src, (newValue) => {
+    (0, import_vue.watch)(() => props.src, (newValue) => {
       if (newValue) {
-        (0, import_vue2.nextTick)(() => {
+        (0, import_vue.nextTick)(() => {
           var _a;
           (_a = root.value) == null ? void 0 : _a.load();
         });
@@ -132,7 +132,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       immediate: true,
       deep: true
     });
-    (0, import_vue2.watch)(() => props.options, (newValue) => {
+    (0, import_vue.watch)(() => props.options, (newValue) => {
       state.state.isMuted = (newValue == null ? void 0 : newValue.muted) || false;
     }, {
       immediate: true
@@ -206,27 +206,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }
       }
     };
-    const timeFormat = (t = 0) => {
-      let h = Math.floor(t / 3600);
-      if (+h < 10) {
-        h = "0" + h;
-      }
-      let m = Math.floor(t % 3600 / 60);
-      if (+m < 10) {
-        m = "0" + m;
-      }
-      let s = Math.round(t % 3600 % 60);
-      if (+s < 10) {
-        s = "0" + s;
-      }
-      let str = "";
-      if (h != 0) {
-        str = h + ":" + m + ":" + s;
-      } else {
-        str = m + ":" + s;
-      }
-      return str;
-    };
     const getLoadTime = () => {
       var _a, _b;
       state.videoSet.loaded = (((_a = root.value) == null ? void 0 : _a.buffered.end(0)) || 0) / (((_b = root.value) == null ? void 0 : _b.duration) || 1) * 100;
@@ -237,8 +216,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       const currentTime = Number.isNaN((_c = root.value) == null ? void 0 : _c.currentTime) ? 0 : (_d = root.value) == null ? void 0 : _d.currentTime;
       const percent = (currentTime || 0) / (durationTime || 1);
       state.videoSet.progress.current = Math.round(state.videoSet.progress.width * percent);
-      state.videoSet.totalTime = timeFormat(durationTime);
-      state.videoSet.displayTime = timeFormat((_e = root.value) == null ? void 0 : _e.currentTime);
+      state.videoSet.totalTime = (0, import_utils.formatSeconds)(durationTime);
+      state.videoSet.displayTime = (0, import_utils.formatSeconds)((_e = root.value) == null ? void 0 : _e.currentTime);
       emit("time", currentTime, durationTime, state.videoSet.displayTime, state.videoSet.totalTime);
     };
     const playEnded = () => {
@@ -337,7 +316,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       muted,
       unmuted
     });
-    (0, import_vue2.onMounted)(() => {
+    (0, import_vue.onMounted)(() => {
       init();
     });
     function renderToolBox() {
@@ -421,6 +400,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         src,
         options
       } = props;
+      const controlsList = options.controlsList || ["nodownload"];
       return (0, import_vue.createVNode)("div", {
         "class": bem()
       }, [(0, import_vue.createVNode)("video", {
@@ -431,6 +411,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "loop": options.loop,
         "poster": options.poster,
         "controls": options.controls,
+        "controlslist": controlsList.join(" "),
         "preload": options.preload,
         "src": src,
         "onError": handleError

package/lib/video/index.css

@@ -1 +1 @@
-:root{--zt-video-player-background: var(--zt-black);--zt-video-player-btn-color: var(--zt-white);--zt-video-player-btn-background: rgba(0, 0, 0, .5);--zt-video-player-controller-background: rgba(0, 0, 0, .5);--zt-video-player-controller-font-size: var(--zt-font-size-sm);--zt-video-player-error-color: var(--zt-white);--zt-video-player-time-color: var(--zt-white);--zt-video-player-progress-height: 4px;--zt-video-player-progress-background: rgba(255, 255, 255, .5);--zt-video-player-progress-buffered-color: rgba(255, 255, 255, .8);--zt-video-player-progress-ball-color: var(--zt-primary-color);--zt-video-player-progress-ball-border: 2px solid var(--zt-white)}.zt-video{width:100%;height:100%;position:relative;display:flex}.zt-video>video{width:100%;height:100%;object-fit:fill}.zt-video__player{width:100%;background:var(--zt-video-player-background)}.zt-video__player:focus{outline:none}.zt-video__mask{width:100%;position:absolute;left:0;top:0;right:0;bottom:60px}.zt-video__mask.custom-touch{bottom:0}.zt-video__play-btn{width:80px;height:50px;margin-top:-25px;display:flex;align-items:center;justify-content:center;border:0;color:var(--zt-video-player-btn-color);transition:border-color .4s,outline .4s,background-color .4s;position:absolute;top:50%;left:50%;margin-left:-40px;padding:0;font-size:80px;border-radius:20%}.zt-video__controller{position:absolute;display:flex;left:0;bottom:0;background-color:var(--zt-video-player-controller-background);height:35px;width:100%;align-items:center;opacity:0;transition:all 1s;font-size:var(--zt-video-player-controller-font-size)}.zt-video__controller.zt-video__controller--show{opacity:1}.zt-video__controller.zt-video__controller--hide{opacity:0}.zt-video__controller--play-btn{width:18px;height:18px;margin:0 10px}.zt-video__controller-total,.zt-video__controller-now{color:var(--zt-video-player-time-color);padding:0 5px}.zt-video__controller-progress{position:relative;display:inline-block;height:100%;width:100%;margin:0 6px;transition:all .2s ease-in;flex:1}.zt-video__controller-progress-value{position:absolute;top:50%;width:100%;height:var(--zt-video-player-progress-height);margin-top:-.05rem;background:var(--zt-video-player-progress-background);border-radius:2px}.zt-video__controller-progress .buffered{background:var(--zt-video-player-progress-buffered-color);height:var(--zt-video-player-progress-height);border-radius:2px}.zt-video__controller-progress-ball{width:14px;height:14px;position:absolute;top:50%;left:0;border-radius:50%;box-sizing:content-box}.zt-video__controller-progress-ball div{width:10px;height:10px;background:var(--zt-video-player-progress-ball-color);box-shadow:0 2px 4px rgba(32,0,0,.2);margin:0 -5px;border-radius:50%;border:var(--zt-video-player-progress-ball-border)}.zt-video__controller-volume,.zt-video__controller-full{width:26px;height:30px;display:flex;align-items:center;justify-content:center}.zt-video__controller-volume>i,.zt-video__controller-full>i{color:var(--zt-video-player-btn-color);font-size:22px}.zt-video__controller-full{width:40px}.zt-video__error{position:absolute;width:100%;height:100%;background:var(--zt-video-player-background);color:var(--zt-video-player-error-color);display:flex;flex-direction:column;align-items:center;justify-content:center}
+:root{--zt-video-player-background: var(--zt-black);--zt-video-player-btn-color: var(--zt-white);--zt-video-player-btn-background: rgba(0, 0, 0, .5);--zt-video-player-controller-background: rgba(0, 0, 0, .5);--zt-video-player-controller-font-size: var(--zt-font-size-sm);--zt-video-player-error-color: var(--zt-white);--zt-video-player-time-color: var(--zt-white);--zt-video-player-progress-height: 4px;--zt-video-player-progress-background: rgba(255, 255, 255, .5);--zt-video-player-progress-buffered-color: rgba(255, 255, 255, .8);--zt-video-player-progress-ball-color: var(--zt-primary-color);--zt-video-player-progress-ball-border: 2px solid var(--zt-white)}.zt-video{width:100%;height:100%;position:relative;display:flex}.zt-video>video{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.zt-video__player{width:100%;background:var(--zt-video-player-background)}.zt-video__player:focus{outline:none}.zt-video__mask{width:100%;position:absolute;left:0;top:0;right:0;bottom:60px}.zt-video__mask.custom-touch{bottom:0}.zt-video__play-btn{width:80px;height:50px;margin-top:-25px;display:flex;align-items:center;justify-content:center;border:0;color:var(--zt-video-player-btn-color);transition:border-color .4s,outline .4s,background-color .4s;position:absolute;top:50%;left:50%;margin-left:-40px;padding:0;font-size:80px;border-radius:20%}.zt-video__controller{position:absolute;display:flex;left:0;bottom:0;background-color:var(--zt-video-player-controller-background);height:35px;width:100%;align-items:center;opacity:0;transition:all 1s;font-size:var(--zt-video-player-controller-font-size)}.zt-video__controller.zt-video__controller--show{opacity:1}.zt-video__controller.zt-video__controller--hide{opacity:0}.zt-video__controller--play-btn{width:18px;height:18px;margin:0 10px}.zt-video__controller-total,.zt-video__controller-now{color:var(--zt-video-player-time-color);padding:0 5px}.zt-video__controller-progress{position:relative;display:inline-block;height:100%;width:100%;margin:0 6px;transition:all .2s ease-in;flex:1}.zt-video__controller-progress-value{position:absolute;top:50%;width:100%;height:var(--zt-video-player-progress-height);margin-top:-.05rem;background:var(--zt-video-player-progress-background);border-radius:2px}.zt-video__controller-progress .buffered{background:var(--zt-video-player-progress-buffered-color);height:var(--zt-video-player-progress-height);border-radius:2px}.zt-video__controller-progress-ball{width:14px;height:14px;position:absolute;top:50%;left:0;border-radius:50%;box-sizing:content-box}.zt-video__controller-progress-ball div{width:10px;height:10px;background:var(--zt-video-player-progress-ball-color);box-shadow:0 2px 4px rgba(32,0,0,.2);margin:0 -5px;border-radius:50%;border:var(--zt-video-player-progress-ball-border)}.zt-video__controller-volume,.zt-video__controller-full{width:26px;height:30px;display:flex;align-items:center;justify-content:center}.zt-video__controller-volume>i,.zt-video__controller-full>i{color:var(--zt-video-player-btn-color);font-size:22px}.zt-video__controller-full{width:40px}.zt-video__error{position:absolute;width:100%;height:100%;background:var(--zt-video-player-background);color:var(--zt-video-player-error-color);display:flex;flex-direction:column;align-items:center;justify-content:center}

package/lib/video/index.d.ts

@@ -1,4 +1,4 @@
-export declare const Video: import("../utils").WithInstall<import("vue").DefineComponent<{
+export declare const Video: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     src: {
         type: import("vue").PropType<string>;
         default: string;
@@ -17,6 +17,7 @@ export declare const Video: import("../utils").WithInstall<import("vue").DefineC
             playsinline: boolean;
             touchPlay: boolean;
             preload: string;
+            controlsList: string[];
         };
     };
     errorTip: {
@@ -27,7 +28,7 @@ export declare const Video: import("../utils").WithInstall<import("vue").DefineC
         type: import("vue").PropType<string>;
         default: string;
     };
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("time" | "pause" | "play" | "play-end")[], "time" | "pause" | "play" | "play-end", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("time" | "pause" | "play" | "play-end")[], "time" | "pause" | "play" | "play-end", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     src: {
         type: import("vue").PropType<string>;
         default: string;
@@ -46,6 +47,7 @@ export declare const Video: import("../utils").WithInstall<import("vue").DefineC
             playsinline: boolean;
             touchPlay: boolean;
             preload: string;
+            controlsList: string[];
         };
     };
     errorTip: {
@@ -56,18 +58,18 @@ export declare const Video: import("../utils").WithInstall<import("vue").DefineC
         type: import("vue").PropType<string>;
         default: string;
     };
-}>> & {
+}>> & Readonly<{
     onPause?: ((...args: any[]) => any) | undefined;
     onPlay?: ((...args: any[]) => any) | undefined;
     onTime?: ((...args: any[]) => any) | undefined;
     "onPlay-end"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     src: string;
     options: Partial<import("./types").VideoOptions>;
     showToolBox: boolean;
     errorTip: string;
     clickRetryTip: string;
-}, {}>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
 export default Video;
 export type { VideoProps } from './Video';
 export type { VideoOptions } from './types';

package/lib/video/types.d.ts

@@ -9,4 +9,5 @@ export interface VideoOptions {
     playsinline: boolean;
     touchPlay: boolean;
     preload: string;
+    controlsList: string[];
 }