@sdata/web-vue 3.5.0 → 3.7.0

package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,8 @@ import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import usePopupContainer from "../_hooks/use-popup-container.js";
 import usePopupOverflowHidden from "../_hooks/use-popup-overflow-hidden.js";
-import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, reactive, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRefs, unref, useSlots, watch, withCtx } from "vue";
+import Image from "../image/index.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, reactive, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRefs, unref, useSlots, watch, withCtx } from "vue";
 //#region components/file-previewer/file-previewer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["tabindex"];
 var _hoisted_2 = [
@@ -16,10 +17,6 @@ var _hoisted_2 = [
 	"aria-modal",
 	"aria-label"
 ];
-var _hoisted_3 = ["src", "alt"];
-var _hoisted_4 = ["src"];
-var _hoisted_5 = ["src"];
-var _hoisted_6 = ["src"];
 var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "FilePreviewer" }), {}, {
 	__name: "file-previewer",
 	props: {
@@ -102,7 +99,22 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		renderToBody: {
 			type: Boolean,
 			default: true
-		}
+		},
+		/**
+		* @zh 图片预览器参数
+		* @en Image previewer props
+		*/
+		imageProps: { type: Object },
+		/**
+		* @zh 视频和音频预览器参数
+		* @en Video and audio previewer props
+		*/
+		mediaProps: { type: Object },
+		/**
+		* @zh PDF 预览器参数
+		* @en PDF previewer props
+		*/
+		pdfProps: { type: Object }
 	},
 	emits: [
 		"close",
@@ -113,12 +125,13 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const slots = useSlots();
 		const props = __props;
 		const emit = __emit;
-		const { src, type, visible, defaultVisible, fullscreen, popupContainer, renderToBody, maskClosable, closable, escToClose, title } = toRefs(props);
+		const { src, type, visible, defaultVisible, fullscreen, popupContainer, renderToBody, maskClosable, closable, escToClose, title, imageProps, mediaProps, pdfProps } = toRefs(props);
 		const prefixCls = getPrefixCls("file-previewer");
 		const wrapperRef = shallowRef();
 		const status = shallowRef("beforeLoad");
 		const requestId = shallowRef(0);
-		let videoJsHtmlPromise;
+		let videoJsVideoPromise;
+		let videoJsAudioPromise;
 		const localVisible = shallowRef(defaultVisible.value);
 		const mergedVisible = computed(() => {
 			var _visible$value;
@@ -170,6 +183,82 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			onLoad: onPreviewLoad,
 			onError: onLoadError
 		}));
+		const mergedImageProps = computed(() => {
+			var _imageProps$value;
+			const userProps = (_imageProps$value = imageProps === null || imageProps === void 0 ? void 0 : imageProps.value) !== null && _imageProps$value !== void 0 ? _imageProps$value : {};
+			return _objectSpread2(_objectSpread2({
+				preview: false,
+				width: "100%",
+				height: "100%",
+				fit: "contain",
+				alt: (title === null || title === void 0 ? void 0 : title.value) || ""
+			}, userProps), {}, {
+				src: currentSrc.value,
+				onLoad: (event) => {
+					callEventHandler(userProps.onLoad, event);
+					onPreviewLoad();
+				},
+				onError: (event) => {
+					callEventHandler(userProps.onError, event);
+					onLoadError();
+				}
+			});
+		});
+		const mediaSkin = computed(() => {
+			var _mediaProps$value$ski, _mediaProps$value;
+			return (_mediaProps$value$ski = mediaProps === null || mediaProps === void 0 || (_mediaProps$value = mediaProps.value) === null || _mediaProps$value === void 0 ? void 0 : _mediaProps$value.skin) !== null && _mediaProps$value$ski !== void 0 ? _mediaProps$value$ski : "default";
+		});
+		const useVideoJsMediaSkin = computed(() => mediaSkin.value !== false && mediaSkin.value !== "native");
+		const mediaSkinTag = computed(() => {
+			if (mediaSkin.value === "minimal") return type.value === "audio" ? "minimal-audio-skin" : "minimal-video-skin";
+			if (mediaSkin.value && mediaSkin.value !== "default") return String(mediaSkin.value);
+			return type.value === "audio" ? "audio-skin" : "video-skin";
+		});
+		const mediaPlayerTag = computed(() => type.value === "audio" ? "audio-player" : "video-player");
+		const mediaSkinClassNames = computed(() => [`${prefixCls}-media-skin`, `${prefixCls}-media-skin-${type.value}`]);
+		const mediaPlayerProps = computed(() => {
+			var _mediaProps$value$pla, _mediaProps$value2;
+			return (_mediaProps$value$pla = mediaProps === null || mediaProps === void 0 || (_mediaProps$value2 = mediaProps.value) === null || _mediaProps$value2 === void 0 ? void 0 : _mediaProps$value2.playerProps) !== null && _mediaProps$value$pla !== void 0 ? _mediaProps$value$pla : {};
+		});
+		const mediaSkinProps = computed(() => {
+			var _mediaProps$value$ski2, _mediaProps$value3;
+			return (_mediaProps$value$ski2 = mediaProps === null || mediaProps === void 0 || (_mediaProps$value3 = mediaProps.value) === null || _mediaProps$value3 === void 0 ? void 0 : _mediaProps$value3.skinProps) !== null && _mediaProps$value$ski2 !== void 0 ? _mediaProps$value$ski2 : {};
+		});
+		const mergedMediaProps = computed(() => {
+			const userProps = _objectSpread2({}, mediaProps === null || mediaProps === void 0 ? void 0 : mediaProps.value);
+			const { onLoadedData, onError } = userProps;
+			delete userProps.skin;
+			delete userProps.playerProps;
+			delete userProps.skinProps;
+			delete userProps.onLoadedData;
+			delete userProps.onError;
+			return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, useVideoJsMediaSkin.value ? void 0 : { controls: true }), type.value === "video" ? { playsinline: true } : void 0), userProps), {}, {
+				src: currentSrc.value,
+				onLoadedData: (event) => {
+					callEventHandler(onLoadedData, event);
+					onPreviewLoad();
+				},
+				onError: (event) => {
+					callEventHandler(onError, event);
+					onLoadError();
+				}
+			});
+		});
+		const mergedPdfProps = computed(() => {
+			var _pdfProps$value;
+			const userProps = (_pdfProps$value = pdfProps === null || pdfProps === void 0 ? void 0 : pdfProps.value) !== null && _pdfProps$value !== void 0 ? _pdfProps$value : {};
+			return _objectSpread2(_objectSpread2({ title: "PDF preview" }, userProps), {}, {
+				src: currentSrc.value,
+				onLoad: (event) => {
+					callEventHandler(userProps.onLoad, event);
+					onPreviewLoad();
+				},
+				onError: (event) => {
+					callEventHandler(userProps.onError, event);
+					onLoadError();
+				}
+			});
+		});
 		usePopupOverflowHidden(reactive({
 			container,
 			hidden: popupVisible
@@ -204,6 +293,13 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		function onLoadError() {
 			status.value = "error";
 		}
+		function callEventHandler(handler, event) {
+			if (Array.isArray(handler)) {
+				handler.forEach((item) => callEventHandler(item, event));
+				return;
+			}
+			if (typeof handler === "function") handler(event);
+		}
 		function ensureVideoJsHtml() {
 			return _ensureVideoJsHtml.apply(this, arguments);
 		}
@@ -213,16 +309,21 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					configurable: true,
 					value: window.Element
 				});
-				if (!videoJsHtmlPromise) videoJsHtmlPromise = import("@videojs/html");
-				yield videoJsHtmlPromise;
+				if (type.value === "audio") {
+					if (!videoJsAudioPromise) videoJsAudioPromise = import("@videojs/html/audio");
+					yield videoJsAudioPromise;
+					return;
+				}
+				if (!videoJsVideoPromise) videoJsVideoPromise = import("@videojs/html/video");
+				yield videoJsVideoPromise;
 			});
 			return _ensureVideoJsHtml.apply(this, arguments);
 		}
-		function prepareVideo(_x) {
-			return _prepareVideo.apply(this, arguments);
+		function prepareMedia(_x) {
+			return _prepareMedia.apply(this, arguments);
 		}
-		function _prepareVideo() {
-			_prepareVideo = _asyncToGenerator(function* (currentRequestId) {
+		function _prepareMedia() {
+			_prepareMedia = _asyncToGenerator(function* (currentRequestId) {
 				status.value = "loading";
 				try {
 					if (!isServerRendering) yield ensureVideoJsHtml();
@@ -233,7 +334,7 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					status.value = "error";
 				}
 			});
-			return _prepareVideo.apply(this, arguments);
+			return _prepareMedia.apply(this, arguments);
 		}
 		watch([
 			src,
@@ -252,11 +353,15 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				return;
 			}
 			const currentRequestId = requestId.value;
-			if (type.value === "video") {
-				prepareVideo(currentRequestId);
+			if (type.value === "video" || type.value === "audio") {
+				if (useVideoJsMediaSkin.value) {
+					prepareMedia(currentRequestId);
+					return;
+				}
+				status.value = "loading";
 				return;
 			}
-			if (type.value === "audio" || type.value === "pdf") {
+			if (type.value === "pdf") {
 				status.value = "loaded";
 				return;
 			}
@@ -296,44 +401,22 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				}, [unref(title) || _ctx.$slots.title ? (openBlock(), createElementBlock("header", {
 					key: 0,
 					class: normalizeClass(`${unref(prefixCls)}-header`)
-				}, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, toDisplayString(unref(title)), 3)])], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-body`) }, [renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(contentSlotProps.value)), () => [unref(type) === "image" ? (openBlock(), createElementBlock("img", {
-					key: currentSrc.value,
-					class: normalizeClass(`${unref(prefixCls)}-image`),
-					src: currentSrc.value,
-					alt: unref(title) || "",
-					onLoad: onPreviewLoad,
-					onError: onLoadError
-				}, null, 42, _hoisted_3)) : unref(type) === "video" ? (openBlock(), createBlock(resolveDynamicComponent("video-player"), {
-					key: 1,
-					class: normalizeClass(`${unref(prefixCls)}-video-player`)
-				}, {
-					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent("video-skin"), null, {
-						default: withCtx(() => [(openBlock(), createElementBlock("video", {
-							key: currentSrc.value,
-							class: normalizeClass(`${unref(prefixCls)}-video`),
-							src: currentSrc.value,
-							controls: "",
-							playsinline: ""
-						}, null, 10, _hoisted_4))]),
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, toDisplayString(unref(title)), 3)])], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-body`) }, [renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(contentSlotProps.value)), () => [unref(type) === "image" ? (openBlock(), createBlock(unref(Image), mergeProps({ key: currentSrc.value + "image" }, mergedImageProps.value, { class: `${unref(prefixCls)}-image` }), null, 16, ["class"])) : unref(type) === "video" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [useVideoJsMediaSkin.value ? (openBlock(), createBlock(resolveDynamicComponent(mediaPlayerTag.value), mergeProps({ key: 0 }, mediaPlayerProps.value, { class: `${unref(prefixCls)}-video-player` }), {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mediaSkinTag.value), mergeProps(mediaSkinProps.value, { class: mediaSkinClassNames.value }), {
+						default: withCtx(() => [(openBlock(), createElementBlock("video", mergeProps({ key: currentSrc.value + "video" }, mergedMediaProps.value, { class: `${unref(prefixCls)}-video` }), null, 16))]),
 						_: 1
-					}))]),
+					}, 16, ["class"]))]),
 					_: 1
-				}, 8, ["class"])) : unref(type) === "audio" ? (openBlock(), createElementBlock("div", {
+				}, 16, ["class"])) : (openBlock(), createElementBlock("video", mergeProps({ key: currentSrc.value }, mergedMediaProps.value, { class: `${unref(prefixCls)}-video` }), null, 16))], 64)) : unref(type) === "audio" ? (openBlock(), createElementBlock("div", {
 					key: 2,
 					class: normalizeClass(`${unref(prefixCls)}-audio-panel`)
-				}, [(openBlock(), createElementBlock("audio", {
-					key: currentSrc.value,
-					class: normalizeClass(`${unref(prefixCls)}-audio`),
-					src: currentSrc.value,
-					controls: ""
-				}, null, 10, _hoisted_5))], 2)) : unref(type) === "pdf" ? (openBlock(), createElementBlock("iframe", {
-					key: currentSrc.value,
-					class: normalizeClass(`${unref(prefixCls)}-pdf`),
-					src: currentSrc.value,
-					title: "PDF preview",
-					onLoad: onPreviewLoad,
-					onError: onLoadError
-				}, null, 42, _hoisted_6)) : createCommentVNode("", true)])], 2)], 10, _hoisted_2),
+				}, [useVideoJsMediaSkin.value ? (openBlock(), createBlock(resolveDynamicComponent(mediaPlayerTag.value), mergeProps({ key: 0 }, mediaPlayerProps.value, { class: `${unref(prefixCls)}-audio-player` }), {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mediaSkinTag.value), mergeProps(mediaSkinProps.value, { class: mediaSkinClassNames.value }), {
+						default: withCtx(() => [(openBlock(), createElementBlock("audio", mergeProps({ key: currentSrc.value + "audio" }, mergedMediaProps.value, { class: `${unref(prefixCls)}-audio` }), null, 16))]),
+						_: 1
+					}, 16, ["class"]))]),
+					_: 1
+				}, 16, ["class"])) : (openBlock(), createElementBlock("audio", mergeProps({ key: currentSrc.value + "audio" }, mergedMediaProps.value, { class: `${unref(prefixCls)}-audio` }), null, 16))], 2)) : unref(type) === "pdf" ? (openBlock(), createElementBlock("iframe", mergeProps({ key: currentSrc.value + "pdf" }, mergedPdfProps.value, { class: `${unref(prefixCls)}-pdf` }), null, 16)) : createCommentVNode("", true)])], 2)], 10, _hoisted_2),
 				unref(fullscreen) && unref(closable) ? (openBlock(), createElementBlock("button", {
 					key: 1,
 					type: "button",

package/es/file-previewer/index.d.ts

@@ -44,6 +44,44 @@ declare const FilePreviewer: {
             type: BooleanConstructor;
             default: boolean;
         };
+        imageProps: {
+            type: import("vue").PropType<{
+                [x: string]: unknown;
+                [x: number]: unknown;
+                [x: symbol]: unknown;
+                src?: string | undefined;
+                width?: string | number | undefined;
+                height?: string | number | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                alt?: string | undefined;
+                hideFooter?: boolean | undefined;
+                footerPosition?: "outer" | "inner" | undefined;
+                showLoader?: boolean | undefined;
+                preview?: boolean | undefined;
+                previewVisible?: boolean | undefined;
+                defaultPreviewVisible?: boolean | undefined;
+                previewProps?: Partial<import("../image/interface.ts").ImagePreviewProps> | undefined;
+                extra?: import("vue").Slot | undefined;
+                error?: import("vue").Slot | undefined;
+                loader?: import("vue").Slot | undefined;
+                onPreviewVisibleChange?: ((visible: boolean) => void) | undefined;
+                fit?: ("fill" | "none" | "contain" | "cover" | "scale-down") | undefined;
+            }>;
+        };
+        mediaProps: {
+            type: import("vue").PropType<{
+                [x: string]: unknown;
+                [x: number]: unknown;
+                [x: symbol]: unknown;
+                skin?: import("./types").FilePreviewerMediaSkin | undefined;
+                playerProps?: import("type-fest").UnknownRecord | undefined;
+                skinProps?: import("type-fest").UnknownRecord | undefined;
+            }>;
+        };
+        pdfProps: {
+            type: import("vue").PropType<import("./types").FilePreviewerPdfProps>;
+        };
     }>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
@@ -117,6 +155,44 @@ declare const FilePreviewer: {
             type: BooleanConstructor;
             default: boolean;
         };
+        imageProps: {
+            type: import("vue").PropType<{
+                [x: string]: unknown;
+                [x: number]: unknown;
+                [x: symbol]: unknown;
+                src?: string | undefined;
+                width?: string | number | undefined;
+                height?: string | number | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                alt?: string | undefined;
+                hideFooter?: boolean | undefined;
+                footerPosition?: "outer" | "inner" | undefined;
+                showLoader?: boolean | undefined;
+                preview?: boolean | undefined;
+                previewVisible?: boolean | undefined;
+                defaultPreviewVisible?: boolean | undefined;
+                previewProps?: Partial<import("../image/interface.ts").ImagePreviewProps> | undefined;
+                extra?: import("vue").Slot | undefined;
+                error?: import("vue").Slot | undefined;
+                loader?: import("vue").Slot | undefined;
+                onPreviewVisibleChange?: ((visible: boolean) => void) | undefined;
+                fit?: ("fill" | "none" | "contain" | "cover" | "scale-down") | undefined;
+            }>;
+        };
+        mediaProps: {
+            type: import("vue").PropType<{
+                [x: string]: unknown;
+                [x: number]: unknown;
+                [x: symbol]: unknown;
+                skin?: import("./types").FilePreviewerMediaSkin | undefined;
+                playerProps?: import("type-fest").UnknownRecord | undefined;
+                skinProps?: import("type-fest").UnknownRecord | undefined;
+            }>;
+        };
+        pdfProps: {
+            type: import("vue").PropType<import("./types").FilePreviewerPdfProps>;
+        };
     }>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
@@ -183,6 +259,15 @@ declare const FilePreviewer: {
         type: BooleanConstructor;
         default: boolean;
     };
+    imageProps: {
+        type: import("vue").PropType<import("./types").FilePreviewerImageProps>;
+    };
+    mediaProps: {
+        type: import("vue").PropType<import("./types").FilePreviewerMediaProps>;
+    };
+    pdfProps: {
+        type: import("vue").PropType<import("./types").FilePreviewerPdfProps>;
+    };
 }>> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
@@ -216,5 +301,5 @@ declare const FilePreviewer: {
     install: (app: App, options?: SDOptions) => void;
 };
 export type FilePreviewerInstance = InstanceType<typeof _FilePreviewer>;
-export type { FilePreviewerContentSlotProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './types';
+export type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerMediaProps, FilePreviewerMediaSkin, FilePreviewerPdfProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './types';
 export default FilePreviewer;

package/es/file-previewer/style/index.css

@@ -28,9 +28,6 @@
 .sd-file-previewer-inline {
   overflow: hidden;
   color: var(--sd-color-text-1);
-  background: var(--sd-color-fill-1);
-  border: 1px solid var(--sd-color-border-2);
-  border-radius: var(--sd-border-radius-medium);
 }
 .sd-file-previewer-mask {
   position: absolute;
@@ -82,31 +79,45 @@
   min-width: 0;
   min-height: 0;
 }
-.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-video, .sd-file-previewer-pdf {
+.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-audio-player, .sd-file-previewer-video, .sd-file-previewer-pdf {
   display: block;
   width: 100%;
   height: 100%;
 }
-.sd-file-previewer-image {
+.sd-file-previewer-image .sd-image-img {
   object-fit: contain;
 }
+.sd-file-previewer-video-player, .sd-file-previewer-audio-player {
+  min-width: 0 !important;
+  min-height: 0 !important;
+}
 .sd-file-previewer-video-player {
   max-width: 1180px;
   max-height: 78vh;
 }
-.sd-file-previewer-inline .sd-file-previewer-video-player {
+.sd-file-previewer-media-skin {
+  display: block;
+  width: 100%;
+  min-width: 0 !important;
   max-width: 100%;
-  max-height: none;
+  height: 100%;
+  min-height: 0 !important;
+  max-height: 100%;
+  --media-object-fit: cover;
 }
 .sd-file-previewer-video {
-  background: #000;
+  object-fit: cover;
+}
+.sd-file-previewer-inline .sd-file-previewer-video-player {
+  max-width: 100%;
+  max-height: none;
 }
 .sd-file-previewer-audio-panel {
   box-sizing: border-box;
   width: 100%;
   padding: 20px;
 }
-.sd-file-previewer-audio {
+.sd-file-previewer-audio-player, .sd-file-previewer-audio {
   display: block;
   width: 100%;
 }

package/es/file-previewer/style/index.scss

@@ -3,6 +3,7 @@
 @use './token.scss' as *;
 
 $file-previewer-prefix-cls: string.unquote('#{theme.$prefix}-file-previewer');
+$image-prefix-cls: string.unquote('#{theme.$prefix}-image');
 
 @mixin center() {
   position: absolute;
@@ -25,9 +26,6 @@ $file-previewer-prefix-cls: string.unquote('#{theme.$prefix}-file-previewer');
   &-inline {
     overflow: hidden;
     color: $file-previewer-color-content-text;
-    background: $file-previewer-color-inline-bg;
-    border: 1px solid $file-previewer-color-inline-border;
-    border-radius: $file-previewer-radius-panel;
   }
 
   &-mask {
@@ -94,6 +92,7 @@ $file-previewer-prefix-cls: string.unquote('#{theme.$prefix}-file-previewer');
 
   &-image,
   &-video-player,
+  &-audio-player,
   &-video,
   &-pdf {
     display: block;
@@ -101,22 +100,40 @@ $file-previewer-prefix-cls: string.unquote('#{theme.$prefix}-file-previewer');
     height: 100%;
   }
 
-  &-image {
+  &-image .#{$image-prefix-cls}-img {
     object-fit: contain;
   }
 
+  &-video-player,
+  &-audio-player {
+    min-width: 0 !important;
+    min-height: 0 !important;
+  }
+
   &-video-player {
     max-width: $file-previewer-size-media-width;
     max-height: $file-previewer-size-media-height;
   }
 
-  &-inline &-video-player {
+  &-media-skin {
+    display: block;
+    width: 100%;
+    min-width: 0 !important;
     max-width: 100%;
-    max-height: none;
+    height: 100%;
+    min-height: 0 !important;
+    max-height: 100%;
+
+    --media-object-fit: cover;
   }
 
   &-video {
-    background: #000;
+    object-fit: cover;
+  }
+
+  &-inline &-video-player {
+    max-width: 100%;
+    max-height: none;
   }
 
   &-audio-panel {
@@ -125,6 +142,7 @@ $file-previewer-prefix-cls: string.unquote('#{theme.$prefix}-file-previewer');
     padding: $file-previewer-spacing-panel-padding;
   }
 
+  &-audio-player,
   &-audio {
     display: block;
     width: 100%;

package/es/file-previewer/types.d.ts

@@ -1,5 +1,18 @@
+import type { Except, Simplify, UnknownRecord } from 'type-fest';
+import type { ImageProps } from '../image/interface';
 export type FilePreviewerType = 'image' | 'video' | 'audio' | 'pdf';
 export type FilePreviewerStatus = 'beforeLoad' | 'loading' | 'loaded' | 'error';
+type FilePreviewerImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export type FilePreviewerImageProps = Simplify<Except<Partial<ImageProps>, 'fit'> & {
+    fit?: FilePreviewerImageFit;
+} & UnknownRecord>;
+export type FilePreviewerMediaSkin = 'default' | 'minimal' | 'native' | false | (string & {});
+export type FilePreviewerMediaProps = Simplify<UnknownRecord & {
+    skin?: FilePreviewerMediaSkin;
+    playerProps?: UnknownRecord;
+    skinProps?: UnknownRecord;
+}>;
+export type FilePreviewerPdfProps = UnknownRecord;
 export interface FilePreviewerContentSlotProps {
     src: string;
     type: FilePreviewerType;
@@ -26,4 +39,8 @@ export interface FilePreviewerProps {
     escToClose?: boolean;
     popupContainer?: HTMLElement | string;
     renderToBody?: boolean;
+    imageProps?: FilePreviewerImageProps;
+    mediaProps?: FilePreviewerMediaProps;
+    pdfProps?: FilePreviewerPdfProps;
 }
+export {};

package/es/index.css

@@ -14897,9 +14897,6 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-file-previewer-inline {
   overflow: hidden;
   color: var(--sd-color-text-1);
-  background: var(--sd-color-fill-1);
-  border: 1px solid var(--sd-color-border-2);
-  border-radius: var(--sd-border-radius-medium);
 }
 .sd-file-previewer-mask {
   position: absolute;
@@ -14951,31 +14948,45 @@ body.sd-tour-active .sd-tour-popover * {
   min-width: 0;
   min-height: 0;
 }
-.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-video, .sd-file-previewer-pdf {
+.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-audio-player, .sd-file-previewer-video, .sd-file-previewer-pdf {
   display: block;
   width: 100%;
   height: 100%;
 }
-.sd-file-previewer-image {
+.sd-file-previewer-image .sd-image-img {
   object-fit: contain;
 }
+.sd-file-previewer-video-player, .sd-file-previewer-audio-player {
+  min-width: 0 !important;
+  min-height: 0 !important;
+}
 .sd-file-previewer-video-player {
   max-width: 1180px;
   max-height: 78vh;
 }
-.sd-file-previewer-inline .sd-file-previewer-video-player {
+.sd-file-previewer-media-skin {
+  display: block;
+  width: 100%;
+  min-width: 0 !important;
   max-width: 100%;
-  max-height: none;
+  height: 100%;
+  min-height: 0 !important;
+  max-height: 100%;
+  --media-object-fit: cover;
 }
 .sd-file-previewer-video {
-  background: #000;
+  object-fit: cover;
+}
+.sd-file-previewer-inline .sd-file-previewer-video-player {
+  max-width: 100%;
+  max-height: none;
 }
 .sd-file-previewer-audio-panel {
   box-sizing: border-box;
   width: 100%;
   padding: 20px;
 }
-.sd-file-previewer-audio {
+.sd-file-previewer-audio-player, .sd-file-previewer-audio {
   display: block;
   width: 100%;
 }
@@ -16603,19 +16614,12 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-color-picker-panel .sd-color-picker-select {
   width: 58px;
 }
-.sd-color-picker-panel .sd-color-picker-input-alpha {
-  flex: 0 0 auto;
-  width: 52px;
-}
 .sd-color-picker-panel .sd-color-picker-input-group {
   width: 100%;
 }
 .sd-color-picker-panel .sd-color-picker-format-input {
   min-width: 0;
 }
-.sd-color-picker-panel .sd-color-picker-input-hex .sd-input {
-  padding-left: 4px;
-}
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-palette,
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-control-bar,
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-color-block,

package/es/index.d.ts

@@ -70,7 +70,7 @@ export type { ColProps, GridColInstance, GridInstance, GridItemInstance, GridIte
 export { default as Icon } from './icon-component';
 export type { IconInstance, IconProps } from './icon-component';
 export { default as FilePreviewer } from './file-previewer';
-export type { FilePreviewerContentSlotProps, FilePreviewerInstance, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './file-previewer';
+export type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerInstance, FilePreviewerMediaProps, FilePreviewerMediaSkin, FilePreviewerPdfProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './file-previewer';
 export { default as Image, ImagePreviewAction, ImagePreview, ImagePreviewGroup } from './image';
 export type { ImageInstance, ImagePreviewActionInstance, ImagePreviewInstance, ImagePreviewGroupInstance, } from './image';
 export { default as Input, InputGroup, InputPassword, InputSearch } from './input';

package/es/index.js

@@ -66,6 +66,10 @@ import descriptions_item_default from "./descriptions/descriptions-item.js";
 import Descriptions from "./descriptions/index.js";
 import Divider from "./divider/index.js";
 import Drawer from "./drawer/index.js";
+import preview_action_default from "./image/preview-action.js";
+import preview_default from "./image/preview.js";
+import preview_group_default from "./image/preview-group.js";
+import Image from "./image/index.js";
 import FilePreviewer from "./file-previewer/index.js";
 import grid_col_default from "./grid/grid-col.js";
 import grid_item_default from "./grid/grid-item.js";
@@ -74,10 +78,6 @@ import Grid from "./grid/index.js";
 import form_item_default from "./form/form-item.js";
 import Form from "./form/index.js";
 import Icon from "./icon-component/index.js";
-import preview_action_default from "./image/preview-action.js";
-import preview_default from "./image/preview.js";
-import preview_group_default from "./image/preview-group.js";
-import Image from "./image/index.js";
 import { A2UI_0_8, defineJsonFormComponents, defineJsonFormSchemas } from "./json-form/types.js";
 import Textarea from "./textarea/index.js";
 import Mention from "./mention/index.js";