zartui 3.0.2 → 3.0.4

package/lib/media-picker/MediaPicker.js

@@ -0,0 +1,674 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_utils = require("../utils");
+var import_vue2 = require("vue");
+var import_toast = require("../toast");
+var import_DeleteIcon = __toESM(require("./image/DeleteIcon"));
+var import_grid = __toESM(require("../grid"));
+var import_grid_item = __toESM(require("../grid-item"));
+var import_action_sheet = __toESM(require("../action-sheet"));
+var import_loading = __toESM(require("../loading"));
+var import_icon = __toESM(require("../icon"));
+var import_image = __toESM(require("../image"));
+var import_media_player = __toESM(require("../media-player"));
+var import_DefaultVideoIcon = __toESM(require("./image/DefaultVideoIcon"));
+var import_DefaultAudioIcon = __toESM(require("./image/DefaultAudioIcon"));
+var import_DefaultFileIcon = __toESM(require("./image/DefaultFileIcon"));
+var import_TakePhotoIcon = __toESM(require("./image/TakePhotoIcon"));
+var import_PickPhotoIcon = __toESM(require("./image/PickPhotoIcon"));
+var import_TakeVideoIcon = __toESM(require("./image/TakeVideoIcon"));
+var import_TakeAudioIcon = __toESM(require("./image/TakeAudioIcon"));
+var import_PickFileIcon = __toESM(require("./image/PickFileIcon"));
+var import_media_util = require("./util/media-util");
+var import_image_preview = require("../image-preview");
+var import_resize_options = require("./watermark/resize-options");
+var import_compress_options = require("./watermark/compress-options");
+var import_watermark = require("./watermark/watermark");
+var import_image_processor = require("./watermark/image-processor");
+const [name, bem] = (0, import_utils.createNamespace)("media-picker");
+const FILE_SIZE_LIMIT = 100;
+const mediaPickerProps = {
+  disabled: Boolean,
+  showTitle: Boolean,
+  title: (0, import_utils.makeStringProp)("\u6DFB\u52A0\u9644\u4EF6"),
+  mediaList: (0, import_utils.makeArrayProp)(),
+  maxImageSideLength: (0, import_utils.makeNumberProp)(1920),
+  maxImageFileSize: (0, import_utils.makeNumberProp)(1024),
+  maxFileSize: (0, import_utils.makeNumberProp)(FILE_SIZE_LIMIT * 1024),
+  watermarkOptions: {
+    type: Object,
+    default: () => null
+  },
+  maxMediaCount: (0, import_utils.makeNumberProp)(Number.MAX_VALUE),
+  maxImageCount: (0, import_utils.makeNumberProp)(Number.MAX_VALUE),
+  maxAudioCount: (0, import_utils.makeNumberProp)(Number.MAX_VALUE),
+  maxVideoCount: (0, import_utils.makeNumberProp)(Number.MAX_VALUE),
+  allowTakePhoto: import_utils.truthProp,
+  allowPickPhoto: import_utils.truthProp,
+  allowTakeVideo: Boolean,
+  allowPickVideo: Boolean,
+  allowTakeAudio: Boolean,
+  allowPickAudio: Boolean,
+  allowPickFile: Boolean,
+  preview: Function,
+  mediaPick: Function,
+  beforeRead: Function,
+  afterRead: Function,
+  beforeDelete: Function
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: mediaPickerProps,
+  emits: ["update:mediaList", "delete"],
+  setup(props, {
+    emit
+  }) {
+    const videoOptionsVisible = (0, import_vue2.ref)(false);
+    const audioOptionsVisible = (0, import_vue2.ref)(false);
+    const actionVisible = (0, import_vue2.ref)(false);
+    const mediaPlayerVisible = (0, import_vue2.ref)(false);
+    const mediaTypeToPlay = (0, import_vue2.ref)("file");
+    const mediaUrlToPlay = (0, import_vue2.ref)("");
+    const cameraInputRef = (0, import_vue2.ref)();
+    const imageInputRef = (0, import_vue2.ref)();
+    const camcorderInputRef = (0, import_vue2.ref)();
+    const videoFileInputRef = (0, import_vue2.ref)();
+    const audioRecorderInputRef = (0, import_vue2.ref)();
+    const audioFileInputRef = (0, import_vue2.ref)();
+    const fileInputRef = (0, import_vue2.ref)();
+    const checkFileCountBeforeAdd = (mediaType) => {
+      if (props.mediaList.length === props.maxMediaCount) {
+        (0, import_toast.showFailToast)("\u5DF2\u8FBE\u5230\u6587\u4EF6\u6700\u5927\u6570\u91CF\u9650\u5236");
+        return false;
+      }
+      if (mediaType === "photo" && props.mediaList.filter((media) => media.type === "photo").length > props.maxImageCount) {
+        (0, import_toast.showFailToast)(`\u5DF2\u8FBE\u5230\u56FE\u7247\u6700\u5927\u6570\u91CF\u9650\u5236`);
+        return false;
+      }
+      if (mediaType === "video" && props.mediaList.filter((media) => media.type === "video").length > props.maxVideoCount) {
+        (0, import_toast.showFailToast)(`\u5DF2\u8FBE\u5230\u89C6\u9891\u6700\u5927\u6570\u91CF\u9650\u5236`);
+        return false;
+      }
+      if (mediaType === "audio" && props.mediaList.filter((media) => media.type === "audio").length > props.maxAudioCount) {
+        (0, import_toast.showFailToast)(`\u5DF2\u8FBE\u5230\u5F55\u97F3\u6700\u5927\u6570\u91CF\u9650\u5236`);
+        return false;
+      }
+      return true;
+    };
+    const triggerHiddenInput = (ref2) => {
+      ref2 && ref2.click();
+    };
+    const mediaPick = (mediaType, mediaAddType) => {
+      if (props.disabled) {
+        return;
+      }
+      if (!checkFileCountBeforeAdd(mediaType)) {
+        return;
+      }
+      if (props.mediaPick && props.mediaPick(mediaType, mediaAddType)) {
+        return;
+      }
+      if (mediaType === "photo") {
+        if (mediaAddType === "take") {
+          triggerHiddenInput(cameraInputRef.value);
+        } else if (mediaAddType === "pick") {
+          triggerHiddenInput(imageInputRef.value);
+        }
+      } else if (mediaType === "video") {
+        if (mediaAddType === "take") {
+          triggerHiddenInput(camcorderInputRef.value);
+        } else if (mediaAddType === "pick") {
+          triggerHiddenInput(videoFileInputRef.value);
+        } else if (mediaAddType === "take_and_pick") {
+          actionVisible.value = true;
+          videoOptionsVisible.value = true;
+          audioOptionsVisible.value = false;
+        }
+      } else if (mediaType === "audio") {
+        if (mediaAddType === "take") {
+          triggerHiddenInput(audioRecorderInputRef.value);
+        } else if (mediaAddType === "pick") {
+          triggerHiddenInput(audioFileInputRef.value);
+        } else if (mediaAddType === "take_and_pick") {
+          actionVisible.value = true;
+          videoOptionsVisible.value = false;
+          audioOptionsVisible.value = true;
+        }
+      } else if (mediaType === "file") {
+        triggerHiddenInput(fileInputRef.value);
+      }
+    };
+    const resetInput = (mediaType, mediaAddType) => {
+      if (mediaType === "photo") {
+        if (mediaAddType === "take" && cameraInputRef.value instanceof HTMLInputElement) {
+          cameraInputRef.value.value = "";
+        } else if (mediaAddType === "pick" && imageInputRef.value instanceof HTMLInputElement) {
+          imageInputRef.value.value = "";
+        }
+      } else if (mediaType === "video") {
+        if (mediaAddType === "take" && camcorderInputRef.value instanceof HTMLInputElement) {
+          camcorderInputRef.value.value = "";
+        } else if (mediaAddType === "pick" && videoFileInputRef.value) {
+          videoFileInputRef.value.value = "";
+        }
+      } else if (mediaType === "audio") {
+        if (mediaAddType === "take" && audioRecorderInputRef.value instanceof HTMLInputElement) {
+          audioRecorderInputRef.value.value = "";
+        } else if (mediaAddType === "pick" && audioFileInputRef.value instanceof HTMLInputElement) {
+          audioFileInputRef.value.value = "";
+        }
+      } else if (mediaType === "file" && fileInputRef.value instanceof HTMLInputElement) {
+        fileInputRef.value.value = "";
+      }
+    };
+    const imageList = (0, import_vue2.computed)(() => props.mediaList.filter((media) => media.type === "photo"));
+    const actionOptions = (0, import_vue2.computed)(() => {
+      if (videoOptionsVisible.value) {
+        return [{
+          name: "\u62CD\u6444",
+          callback: () => {
+            mediaPick("video", "take");
+          }
+        }, {
+          name: "\u89C6\u9891\u6587\u4EF6",
+          callback: () => {
+            mediaPick("video", "pick");
+          }
+        }];
+      } else if (audioOptionsVisible.value) {
+        return [{
+          name: "\u5F55\u97F3",
+          callback: () => {
+            mediaPick("audio", "take");
+          }
+        }, {
+          name: "\u97F3\u9891\u6587\u4EF6",
+          callback: () => {
+            mediaPick("audio", "pick");
+          }
+        }];
+      }
+    });
+    const checkFileExist = (file) => props.mediaList.some((media) => media.uniqueCode === (0, import_media_util.getFileUniqueCode)(file));
+    const filterValidFiles = (files) => {
+      const validFiles = [];
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (file.size > props.maxFileSize * 1024) {
+          (0, import_toast.showFailToast)(`\u8BF7\u52FF\u6DFB\u52A0\u5927\u4E8E${props.maxFileSize}K\u7684\u6587\u4EF6`);
+          return validFiles;
+        }
+        if (checkFileExist(file)) {
+          (0, import_toast.showFailToast)("\u8BF7\u52FF\u91CD\u590D\u6DFB\u52A0\u6587\u4EF6");
+          return validFiles;
+        }
+        validFiles.push(file);
+      }
+      return validFiles;
+    };
+    const checkFileCountAfterAdd = (files) => {
+      if (props.mediaList.length + files.length > props.maxMediaCount) {
+        (0, import_toast.showFailToast)(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxMediaCount}\u4E2A\u6587\u4EF6`);
+        return false;
+      }
+      if (props.mediaList.filter((media) => media.type === "photo").length + files.filter((media) => (0, import_media_util.isImageType)(media)).length > props.maxImageCount) {
+        (0, import_toast.showFailToast)(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxImageCount}\u5F20\u56FE\u7247`);
+        return false;
+      }
+      if (props.mediaList.filter((media) => media.type === "video").length + files.filter((media) => (0, import_media_util.isVideoType)(media)).length > props.maxVideoCount) {
+        (0, import_toast.showFailToast)(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxVideoCount}\u4E2A\u89C6\u9891`);
+        return false;
+      }
+      if (props.mediaList.filter((media) => media.type === "audio").length + files.filter((media) => (0, import_media_util.isAudioType)(media)).length > props.maxAudioCount) {
+        (0, import_toast.showFailToast)(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxAudioCount}\u4E2A\u5F55\u97F3`);
+        return false;
+      }
+      return true;
+    };
+    const transformNotImageFile = (f) => {
+      let suffix = "";
+      let type;
+      if ((0, import_media_util.isAudioType)(f)) {
+        type = "audio";
+        suffix = "mp3";
+      } else if ((0, import_media_util.isVideoType)(f)) {
+        type = "video";
+        suffix = "mp4";
+      } else {
+        type = "file";
+      }
+      const uniqueFileName = (0, import_media_util.getUniqueFileName)(f, suffix);
+      return {
+        type,
+        file: new File([f], uniqueFileName, {
+          lastModified: f.lastModified,
+          type: f.type
+        }),
+        uniqueCode: (0, import_media_util.getFileUniqueCode)(f),
+        lastModified: f.lastModified,
+        fileSize: f.size,
+        deletable: true,
+        message: ""
+      };
+    };
+    const transformImageFiles = (files) => {
+      const promisesTodo = [];
+      const resizeOptions = new import_resize_options.ResizeOptions(props.maxImageSideLength);
+      const compressOptions = new import_compress_options.CompressOptions(props.maxImageFileSize);
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const watermarkEnabled = props.watermarkOptions && props.watermarkOptions.watermarkConfigString && (0, import_watermark.checkWatermarkConfigSupported)(props.watermarkOptions.watermarkConfigString);
+        let watermarkOpt;
+        if (watermarkEnabled) {
+          watermarkOpt = {
+            enabled: true,
+            watermarkConfigString: watermarkEnabled ? props.watermarkOptions.watermarkConfigString : "",
+            context: {
+              address: props.watermarkOptions.address || "",
+              humanName: props.watermarkOptions.humanName || "",
+              projectName: props.watermarkOptions.projectName || "",
+              watermarkTime: new Date()
+            }
+          };
+        } else {
+          watermarkOpt = {
+            enabled: false
+          };
+        }
+        const promise = new import_image_processor.ImageProcessor(file, resizeOptions, watermarkOpt, compressOptions).process().then((f) => {
+          if (!f) {
+            return Promise.resolve(null);
+          }
+          return (0, import_media_util.file2DataURL)(f).then((base64) => {
+            const uniqueFileName = (0, import_media_util.getUniqueFileName)(f, "jpg");
+            const media = {
+              showSrc: base64,
+              type: "photo",
+              file: new File([f], uniqueFileName, {
+                lastModified: f.lastModified,
+                type: f.type
+              }),
+              uniqueCode: (0, import_media_util.getFileUniqueCode)(file),
+              lastModified: f.lastModified,
+              fileSize: f.size,
+              deletable: true,
+              message: ""
+            };
+            return Promise.resolve(media);
+          });
+        });
+        promisesTodo.push(promise);
+      }
+      (0, import_toast.showLoadingToast)({
+        message: "\u5904\u7406\u4E2D...",
+        forbidClick: true,
+        duration: 0
+      });
+      return Promise.all(promisesTodo).then((medias) => {
+        const _medias = [];
+        medias.forEach((media) => {
+          if ((0, import_utils.isDef)(media)) {
+            _medias.push(media);
+          }
+        });
+        return _medias;
+      }).finally(() => {
+        (0, import_toast.closeToast)();
+      });
+    };
+    const readFiles = (files) => {
+      const notImages = files.filter((f) => !(0, import_media_util.isImageType)(f)).map((f) => transformNotImageFile(f));
+      let newMedias = [];
+      if (notImages.length > 0) {
+        newMedias = newMedias.concat(notImages);
+      }
+      const imageFiles = files.filter((f) => (0, import_media_util.isImageType)(f));
+      let promise;
+      if (imageFiles.length === 0) {
+        promise = Promise.resolve([]);
+      } else {
+        promise = transformImageFiles(imageFiles);
+      }
+      promise.then((medias) => {
+        if (medias && medias.length > 0) {
+          newMedias = newMedias.concat(medias);
+        }
+      }).finally(() => {
+        emit("update:mediaList", [...props.mediaList, ...newMedias]);
+        if (props.afterRead) {
+          props.afterRead(newMedias);
+        }
+      });
+    };
+    const handleInputFiles = (event) => {
+      const _files = event.target.files;
+      if (!_files || _files.length === 0) {
+        return;
+      }
+      const files = filterValidFiles(_files);
+      if (files.length === 0) {
+        return;
+      }
+      if (!checkFileCountAfterAdd(files)) {
+        return;
+      }
+      if (props.beforeRead) {
+        const response = props.beforeRead(files);
+        if (!response) {
+          return;
+        }
+        if ((0, import_utils.isPromise)(response)) {
+          response.then((data) => {
+            if (data) {
+              readFiles(data);
+            } else {
+              readFiles(files);
+            }
+          });
+          return;
+        }
+      }
+      readFiles(files);
+    };
+    const hiddenInput = () => [(0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "image/*",
+      "ref": cameraInputRef,
+      "multiple": true,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("photo", "take"),
+      "capture": "environment"
+    }, null), (0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "image/*,image/exact",
+      "ref": imageInputRef,
+      "multiple": true,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("photo", "pick")
+    }, null), (0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "video/*",
+      "ref": camcorderInputRef,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("video", "take"),
+      "capture": "environment"
+    }, null), (0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "video/*",
+      "ref": videoFileInputRef,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("video", "pick")
+    }, null), (0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "audio/mpeg",
+      "ref": audioRecorderInputRef,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("audio", "take"),
+      "capture": "nonce"
+    }, null), (0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "audio/mpeg",
+      "ref": audioFileInputRef,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("audio", "pick")
+    }, null), (0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "*/*",
+      "ref": fileInputRef,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("file", "pick")
+    }, null)];
+    const renderIcon = (mediaType, mediaAddType) => {
+      if (mediaType === "photo") {
+        if (mediaAddType === "take") {
+          return (0, import_vue.createVNode)(import_TakePhotoIcon.default, {
+            "class": bem("icon")
+          }, null);
+        } else if (mediaAddType === "pick") {
+          return (0, import_vue.createVNode)(import_PickPhotoIcon.default, {
+            "class": bem("icon")
+          }, null);
+        }
+      } else if (mediaType === "video") {
+        return (0, import_vue.createVNode)(import_TakeVideoIcon.default, {
+          "class": bem("icon")
+        }, null);
+      } else if (mediaType === "audio") {
+        return (0, import_vue.createVNode)(import_TakeAudioIcon.default, {
+          "class": bem("icon")
+        }, null);
+      } else if (mediaType === "file") {
+        return (0, import_vue.createVNode)(import_PickFileIcon.default, {
+          "class": bem("icon")
+        }, null);
+      }
+    };
+    const renderButton = (mediaType, mediaAddType) => {
+      let label = "";
+      if (mediaType === "photo") {
+        if (mediaAddType === "take") {
+          label = "\u62CD\u7167";
+        } else if (mediaAddType === "pick") {
+          label = "\u7167\u7247";
+        }
+      } else if (mediaType === "video") {
+        label = "\u6444\u50CF";
+      } else if (mediaType === "audio") {
+        label = "\u5F55\u97F3";
+      } else if (mediaType === "file") {
+        label = "\u6587\u6863";
+      }
+      return (0, import_vue.createVNode)("div", {
+        "class": bem("box")
+      }, [(0, import_vue.createVNode)("div", {
+        "class": bem("button"),
+        "onClick": () => mediaPick(mediaType, mediaAddType)
+      }, [renderIcon(mediaType, mediaAddType)]), (0, import_vue.createVNode)("div", {
+        "class": bem("label")
+      }, [label])]);
+    };
+    const renderButtons = () => {
+      const buttons = [];
+      if (props.allowTakePhoto) {
+        buttons.push(renderButton("photo", "take"));
+      }
+      if (props.allowPickPhoto) {
+        buttons.push(renderButton("photo", "pick"));
+      }
+      if (props.allowTakeVideo || props.allowPickVideo) {
+        let addType = "take_and_pick";
+        if (!props.allowTakeVideo) {
+          addType = "pick";
+        } else if (!props.allowPickVideo) {
+          addType = "take";
+        }
+        buttons.push(renderButton("video", addType));
+      }
+      if (props.allowTakeAudio || props.allowPickAudio) {
+        let addType = "take_and_pick";
+        if (!props.allowTakeAudio) {
+          addType = "pick";
+        } else if (!props.allowPickAudio) {
+          addType = "take";
+        }
+        buttons.push(renderButton("audio", addType));
+      }
+      if (props.allowPickFile) {
+        buttons.push(renderButton("file", "pick"));
+      }
+      return buttons;
+    };
+    const genThumbnailMask = (media) => {
+      const {
+        status,
+        message
+      } = media;
+      if (status === "uploading" || status === "failed") {
+        const MaskIcon = status === "failed" ? (0, import_vue.createVNode)(import_icon.default, {
+          "name": "close",
+          "class": bem("mask-icon")
+        }, null) : (0, import_vue.createVNode)(import_loading.default, {
+          "class": bem("loading")
+        }, null);
+        const showMessage = (0, import_utils.isDef)(message) && message !== "";
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("mask")
+        }, [MaskIcon, showMessage && (0, import_vue.createVNode)("div", {
+          "class": bem("mask-message")
+        }, [message])]);
+      }
+    };
+    const deleteMedia = (media, index) => {
+      const list = props.mediaList.slice(0);
+      list.splice(index, 1);
+      emit("update:mediaList", list);
+      emit("delete", media, index);
+    };
+    const renderMediaThumbnail = (media) => {
+      if (media.showSrc) {
+        return (0, import_vue.createVNode)(import_image.default, {
+          "src": media.showSrc,
+          "fit": "cover",
+          "radius": "4"
+        }, null);
+      } else if (media.type === "video") {
+        return (0, import_vue.createVNode)(import_DefaultVideoIcon.default, {
+          "class": bem("thumbnail")
+        }, null);
+      } else if (media.type === "audio") {
+        return (0, import_vue.createVNode)(import_DefaultAudioIcon.default, {
+          "class": bem("thumbnail")
+        }, null);
+      } else if (media.type === "file") {
+        return (0, import_vue.createVNode)(import_DefaultFileIcon.default, {
+          "class": bem("thumbnail")
+        }, null);
+      }
+    };
+    const onDelete = (media, index) => {
+      if (props.beforeDelete) {
+        const response = props.beforeDelete(media);
+        if (!response) {
+          return;
+        }
+        if ((0, import_utils.isPromise)(response)) {
+          response.then(() => {
+            deleteMedia(media, index);
+          });
+          return;
+        }
+      }
+      deleteMedia(media, index);
+    };
+    const previewMedia = (index) => {
+      if (props.preview && props.preview(props.mediaList, index)) {
+        return;
+      }
+      const media = props.mediaList[index];
+      if (media.type === "photo") {
+        const imageIndex = imageList.value.indexOf(media);
+        (0, import_image_preview.showImagePreview)({
+          images: imageList.value.map((image) => ({
+            url: image.showSrc || ""
+          })),
+          startPosition: imageIndex
+        });
+      } else if (media.type === "audio" || media.type === "video") {
+        if (!media.file && !media.url) {
+          (0, import_toast.showFailToast)("\u6587\u4EF6\u53C2\u6570\u7F3A\u5931");
+        } else {
+          mediaTypeToPlay.value = media.type;
+          mediaUrlToPlay.value = media.url || (URL || webkitURL).createObjectURL(media.file);
+          mediaPlayerVisible.value = true;
+        }
+      } else if (media.type === "file") {
+        (0, import_toast.showFailToast)("\u6682\u4E0D\u652F\u6301\u6B64\u7C7B\u6587\u4EF6\u7684\u9884\u89C8");
+      }
+    };
+    const renderMediaList = () => props.mediaList.map((media, index) => {
+      const showDelete = media.deletable && media.status !== "uploading";
+      const deleteIcon = showDelete && (0, import_vue.createVNode)(import_DeleteIcon.default, {
+        "class": bem("delete"),
+        "onClick": (event) => {
+          event.stopPropagation();
+          onDelete(media, index);
+        }
+      }, null);
+      return (0, import_vue.createVNode)(import_grid_item.default, {
+        "key": media.uniqueCode,
+        "onClick": () => previewMedia(index)
+      }, {
+        default: () => [renderMediaThumbnail(media), genThumbnailMask(media), deleteIcon]
+      });
+    });
+    const selectAction = (action) => {
+      actionVisible.value = false;
+      action.func && action.func();
+    };
+    return () => {
+      const title = props.showTitle && (0, import_vue.createVNode)("div", {
+        "class": bem("title")
+      }, [props.title]);
+      return (0, import_vue.createVNode)("div", {
+        "class": bem()
+      }, [title, hiddenInput(), (0, import_vue.createVNode)(import_media_player.default, {
+        "show": mediaPlayerVisible.value,
+        "onUpdate:show": ($event) => mediaPlayerVisible.value = $event,
+        "mediaType": mediaTypeToPlay.value,
+        "mediaUrl": mediaUrlToPlay.value
+      }, null), (0, import_vue.createVNode)(import_action_sheet.default, {
+        "show": actionVisible.value,
+        "onUpdate:show": ($event) => actionVisible.value = $event,
+        "actions": actionOptions.value,
+        "description": "\u8BF7\u9009\u62E9",
+        "cancel-text": "\u53D6\u6D88",
+        "close-on-click-action": true,
+        "onSelect": selectAction
+      }, null), (0, import_vue.createVNode)("div", {
+        "class": bem("line")
+      }, [renderButtons()]), (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_grid.default, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem("grid")
+      }, {
+        default: () => [renderMediaList()]
+      }), [[import_vue.vShow, props.mediaList.length]])]);
+    };
+  }
+});

package/lib/media-picker/image/DefaultAudioIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;