@agentscope-ai/design 1.0.26-beta.1768893648373 → 1.0.26-beta.1769162388973

package/lib/components/commonComponents/MediaPreview/index.style.js

@@ -0,0 +1,54 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import createGlobalStyle from "../../../libs/createStyle";
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-media-preview-container {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 9999;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--", "-color-bg-mask);\n}\n\n.", "-media-preview-main-content {\n  border-radius: var(--", "-border-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  transition: transform 0.3s ease, opacity 0.15s ease;\n  opacity: 1;\n\n  &.transitioning {\n    opacity: 0;\n  }\n}\n\n.", "-media-preview-main-media {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.", "-media-preview-nav-left {\n  position: absolute;\n  left: 48px;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  padding: 0;\n}\n\n.", "-media-preview-nav-right {\n  position: absolute;\n  right: 48px;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  padding: 0;\n}\n\n.", "-media-preview-nav-icon {\n  font-size: 48px;\n  color: var(--", "-color-bg-base);\n}\n\n.", "-media-preview-toolbar {\n  position: absolute;\n  top: 36px;\n  right: 36px;\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n}\n\n.", "-media-preview-zoom-controls {\n  display: flex;\n  flex-direction: row;\n  border-radius: 8px;\n  background: var(--", "-color-bg-mask);\n}\n\n.", "-media-preview-close-button {\n  display: flex;\n  flex-direction: row;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  border: none;\n}\n\n.", "-media-preview-tool-button {\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.", "-media-preview-tool-icon {\n  font-size: 24px;\n  color: var(--", "-color-bg-base);\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.8;\n  }\n}\n\n.", "-media-preview-thumbnail-carousel {\n  position: absolute;\n  bottom: 42px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 8px;\n  border-radius: 8px;\n  background: var(--", "-color-bg-mask);\n}\n\n.", "-media-preview-thumbnail-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n.", "-media-preview-thumbnail-nav-icon {\n  font-size: 16px;\n  color: var(--", "-color-bg-base);\n  cursor: pointer;\n  flex-shrink: 0;\n\n  &:hover {\n    color: var(--", "-color-bg-base) !important;\n    opacity: 0.8;\n  }\n}\n\n.", "-media-preview-thumbnail-list {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  max-width: 720px;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.", "-media-preview-thumbnail-item {\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  flex-shrink: 0;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n\n  &.active {\n    border-color: var(--", "-color-bg-base);\n  }\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n"])), function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+});

package/lib/components/commonComponents/Video/index.js

@@ -13,7 +13,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useEffect, useState, useRef } from 'react';
+import React, { forwardRef, useEffect, useState, useRef, useCallback } from 'react';
 import classNames from 'classnames';
 import MediaPlayerController from "../Audio/Control";
 import { useControllableValue } from 'ahooks';
@@ -104,10 +104,7 @@ var Video = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   }, [isPlaying]);
-
-  // 检测视频是否有音频通道
-  var handleCanPlayThrough = function handleCanPlayThrough(e) {
-    var _videoProps$onCanPlay;
+  var checkHasAudio = useCallback(function () {
     if (videoRef.current) {
       // 方法1: 检查mozHasAudio属性 (Firefox)
       if ('mozHasAudio' in videoRef.current) {
@@ -122,7 +119,15 @@ var Video = /*#__PURE__*/forwardRef(function (props, ref) {
         setEnableVolume(false);
       }
     }
+  }, []);
+
+  // 检测视频是否有音频通道
+  var handleCanPlayThrough = function handleCanPlayThrough(e) {
+    var _videoProps$onCanPlay;
     (_videoProps$onCanPlay = videoProps.onCanPlayThrough) === null || _videoProps$onCanPlay === void 0 || _videoProps$onCanPlay.call(videoProps, e);
+    setTimeout(function () {
+      checkHasAudio();
+    }, 100);
   };
 
   // 视频加载完成处理

package/lib/index.d.ts

@@ -38,7 +38,10 @@ export { default as Steps } from './components/commonComponents/Steps';
 export { default as SlateEditor } from './components/commonComponents/SlateEditor';
 export { default as Slider, type SliderInputProps, } from './components/commonComponents/Slider';
 export { default as Spinner, type SparkSpinnerProps, type SparkSpinnerProps as SpinnerProps, } from './components/commonComponents/Spinner';
+export { default as Audio, type AudioProps, } from './components/commonComponents/Audio';
 export { default as Descriptions } from './components/commonComponents/Descriptions';
+export { FileCard, default as FileIcon, type SparkFileCardProps, type SparkFileIconProps, } from './components/commonComponents/FileIcon';
+export { default as MediaPreview, type MediaItem, type MediaPreviewProps, } from './components/commonComponents/MediaPreview';
 export { default as SliderSelector } from './components/commonComponents/SliderSelector';
 export { default as Statistic } from './components/commonComponents/Statistic';
 export { default as Switch, type SparkSwitchProps as SwitchProps, } from './components/commonComponents/Switch';
@@ -48,15 +51,13 @@ export { default as Tag, type SparkTagProps as TagProps, } from './components/co
 export { default as TimePicker } from './components/commonComponents/TimePicker';
 export { default as Tooltip, type SparkTooltipProps as TooltipProps, } from './components/commonComponents/Tooltip';
 export { default as Upload } from './components/commonComponents/Upload';
-export { default as Video, type VideoProps } from './components/commonComponents/Video';
-export { default as Audio, type AudioProps } from './components/commonComponents/Audio';
-export { FileCard, default as FileIcon, type SparkFileCardProps, type SparkFileIconProps, } from './components/commonComponents/FileIcon';
+export { default as Video, type VideoProps, } from './components/commonComponents/Video';
 /**
  * 移动端组件
  */
-export { default as MobileModal, type SparkMobileModalProps as MobileModalProps } from './components/mobileComponents/MobileModal';
-export { default as MobileDrawer, type SparkMobileDrawerProps as MobileDrawerProps } from './components/mobileComponents/MobileDrawer';
-export { default as MobileAlertDialog, type MobileAlertDialogProps } from './components/mobileComponents/MobileAlertDialog';
+export { default as MobileAlertDialog, type MobileAlertDialogProps, } from './components/mobileComponents/MobileAlertDialog';
+export { default as MobileDrawer, type SparkMobileDrawerProps as MobileDrawerProps, } from './components/mobileComponents/MobileDrawer';
+export { default as MobileModal, type SparkMobileModalProps as MobileModalProps, } from './components/mobileComponents/MobileModal';
 /**
  * hooks
  */
@@ -66,11 +67,11 @@ export { default as useGlobalStyle } from './hooks/useGlobalStyle';
  */
 export { default as delay } from './libs/delay';
 export { safeHtml } from './libs/dom';
-export { copy, renderTooltip } from './libs/utils';
-export { waitForDom, waitForFunc } from './libs/waitFor';
 export { default as requestPop, type AliyunPopOptions, type BaseResponse, type RequestOptions, } from './libs/requestPop';
 export { default as requestPopSse, type SseOptions, type SseResponse, } from './libs/requestPopSse';
 export { default as requestSse } from './libs/requestSse';
+export { copy, renderTooltip } from './libs/utils';
+export { waitForDom, waitForFunc } from './libs/waitFor';
 /**
  * Spark的ConfigProvider
  */

package/lib/index.js

@@ -43,7 +43,10 @@ export { default as Steps } from "./components/commonComponents/Steps";
 export { default as SlateEditor } from "./components/commonComponents/SlateEditor";
 export { default as Slider } from "./components/commonComponents/Slider";
 export { default as Spinner } from "./components/commonComponents/Spinner";
+export { default as Audio } from "./components/commonComponents/Audio";
 export { default as Descriptions } from "./components/commonComponents/Descriptions";
+export { FileCard, default as FileIcon } from "./components/commonComponents/FileIcon";
+export { default as MediaPreview } from "./components/commonComponents/MediaPreview";
 export { default as SliderSelector } from "./components/commonComponents/SliderSelector";
 export { default as Statistic } from "./components/commonComponents/Statistic";
 export { default as Switch } from "./components/commonComponents/Switch";
@@ -54,15 +57,13 @@ export { default as TimePicker } from "./components/commonComponents/TimePicker"
 export { default as Tooltip } from "./components/commonComponents/Tooltip";
 export { default as Upload } from "./components/commonComponents/Upload";
 export { default as Video } from "./components/commonComponents/Video";
-export { default as Audio } from "./components/commonComponents/Audio";
-export { FileCard, default as FileIcon } from "./components/commonComponents/FileIcon";
 
 /**
  * 移动端组件
  */
-export { default as MobileModal } from "./components/mobileComponents/MobileModal";
-export { default as MobileDrawer } from "./components/mobileComponents/MobileDrawer";
 export { default as MobileAlertDialog } from "./components/mobileComponents/MobileAlertDialog";
+export { default as MobileDrawer } from "./components/mobileComponents/MobileDrawer";
+export { default as MobileModal } from "./components/mobileComponents/MobileModal";
 
 /**
  * hooks
@@ -74,11 +75,11 @@ export { default as useGlobalStyle } from "./hooks/useGlobalStyle";
  */
 export { default as delay } from "./libs/delay";
 export { safeHtml } from "./libs/dom";
-export { copy, renderTooltip } from "./libs/utils";
-export { waitForDom, waitForFunc } from "./libs/waitFor";
 export { default as requestPop } from "./libs/requestPop";
 export { default as requestPopSse } from "./libs/requestPopSse";
 export { default as requestSse } from "./libs/requestSse";
+export { copy, renderTooltip } from "./libs/utils";
+export { waitForDom, waitForFunc } from "./libs/waitFor";
 
 /**
  * Spark的ConfigProvider