@quantabit/media-sdk 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,783 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { BaseApiClient } from '@quantabit/sdk-config';
+
+function ImageViewer({
+  src,
+  alt = '',
+  zoom = true,
+  className = ''
+}) {
+  const [fullscreen, setFullscreen] = useState(false);
+  const [scale, setScale] = useState(1);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt,
+    onClick: () => zoom && setFullscreen(true),
+    className: `qmd-img ${className}`,
+    style: {
+      maxWidth: '100%',
+      borderRadius: 8,
+      cursor: zoom ? 'zoom-in' : 'default',
+      transition: 'all 0.2s'
+    }
+  }), fullscreen && /*#__PURE__*/React.createElement("div", {
+    onClick: () => {
+      setFullscreen(false);
+      setScale(1);
+    },
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 99999,
+      background: 'rgba(0,0,0,0.9)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'zoom-out'
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt,
+    style: {
+      maxWidth: '90vw',
+      maxHeight: '90vh',
+      objectFit: 'contain',
+      transform: `scale(${scale})`,
+      transition: 'transform 0.2s'
+    },
+    onClick: e => {
+      e.stopPropagation();
+      setScale(s => s >= 2 ? 1 : s + 0.5);
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setFullscreen(false);
+      setScale(1);
+    },
+    style: {
+      position: 'absolute',
+      top: 20,
+      right: 20,
+      border: 'none',
+      background: 'rgba(255,255,255,0.1)',
+      color: '#fff',
+      width: 36,
+      height: 36,
+      borderRadius: '50%',
+      cursor: 'pointer',
+      fontSize: 18
+    }
+  }, "\u2715")));
+}
+
+function VideoPlayer({
+  src,
+  poster,
+  autoplay = false,
+  controls = true,
+  width = '100%',
+  aspectRatio = '16/9',
+  className = ''
+}) {
+  const ref = useRef(null);
+  const [playing, setPlaying] = useState(autoplay);
+  const toggle = () => {
+    if (ref.current) {
+      if (ref.current.paused) {
+        ref.current.play();
+        setPlaying(true);
+      } else {
+        ref.current.pause();
+        setPlaying(false);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `qmd-video ${className}`,
+    style: {
+      position: 'relative',
+      width,
+      aspectRatio,
+      borderRadius: 12,
+      overflow: 'hidden',
+      background: '#000'
+    }
+  }, /*#__PURE__*/React.createElement("video", {
+    ref: ref,
+    src: src,
+    poster: poster,
+    autoPlay: autoplay,
+    controls: controls,
+    playsInline: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    },
+    onPlay: () => setPlaying(true),
+    onPause: () => setPlaying(false)
+  }), !controls && /*#__PURE__*/React.createElement("button", {
+    onClick: toggle,
+    style: {
+      position: 'absolute',
+      inset: 0,
+      border: 'none',
+      background: 'transparent',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, !playing && /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 60,
+      height: 60,
+      borderRadius: '50%',
+      background: 'rgba(0,0,0,0.6)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 0,
+      height: 0,
+      borderLeft: '18px solid #fff',
+      borderTop: '12px solid transparent',
+      borderBottom: '12px solid transparent',
+      marginLeft: 4
+    }
+  }))));
+}
+
+function AudioPlayer({
+  src,
+  title,
+  artist,
+  cover,
+  className = ''
+}) {
+  const ref = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const toggle = () => {
+    if (ref.current) {
+      if (playing) ref.current.pause();else ref.current.play();
+    }
+  };
+  const fmt = s => {
+    const m = Math.floor(s / 60);
+    return m + ':' + String(Math.floor(s % 60)).padStart(2, '0');
+  };
+  useEffect(() => {
+    const a = ref.current;
+    if (!a) return;
+    const onTime = () => setProgress(a.currentTime);
+    const onMeta = () => setDuration(a.duration);
+    a.addEventListener('timeupdate', onTime);
+    a.addEventListener('loadedmetadata', onMeta);
+    return () => {
+      a.removeEventListener('timeupdate', onTime);
+      a.removeEventListener('loadedmetadata', onMeta);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `qmd-audio ${className}`,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
+      padding: '12px 16px',
+      borderRadius: 14,
+      border: '1px solid #e4e4e7',
+      background: '#fff'
+    }
+  }, /*#__PURE__*/React.createElement("audio", {
+    ref: ref,
+    src: src,
+    onPlay: () => setPlaying(true),
+    onPause: () => setPlaying(false)
+  }), cover && /*#__PURE__*/React.createElement("img", {
+    src: cover,
+    alt: "",
+    style: {
+      width: 44,
+      height: 44,
+      borderRadius: 8,
+      objectFit: 'cover',
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, title && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      fontWeight: 600,
+      color: '#18181b'
+    }
+  }, title), artist && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: '#71717a'
+    }
+  }, artist), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      marginTop: 4
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10,
+      color: '#a1a1aa',
+      width: 30
+    }
+  }, fmt(progress)), /*#__PURE__*/React.createElement("div", {
+    onClick: e => {
+      const r = e.currentTarget.getBoundingClientRect();
+      const pct = (e.clientX - r.left) / r.width;
+      ref.current.currentTime = pct * duration;
+    },
+    style: {
+      flex: 1,
+      height: 4,
+      borderRadius: 2,
+      background: '#e4e4e7',
+      cursor: 'pointer',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      width: duration ? `${progress / duration * 100}%` : '0%',
+      background: '#3b82f6',
+      borderRadius: 2,
+      transition: 'width 0.1s'
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10,
+      color: '#a1a1aa',
+      width: 30
+    }
+  }, fmt(duration)))), /*#__PURE__*/React.createElement("button", {
+    onClick: toggle,
+    style: {
+      width: 36,
+      height: 36,
+      borderRadius: '50%',
+      border: 'none',
+      background: '#3b82f6',
+      color: '#fff',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0
+    }
+  }, playing ? '⏸' : '▶'));
+}
+
+function Gallery({
+  images = [],
+  columns = 3,
+  gap = 8,
+  className = ''
+}) {
+  const [active, setActive] = useState(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `qmd-gallery ${className}`,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: `repeat(${columns},1fr)`,
+      gap
+    }
+  }, images.map((img, i) => {
+    const src = typeof img === 'string' ? img : img.src;
+    const alt = img.alt || '';
+    return /*#__PURE__*/React.createElement("img", {
+      key: i,
+      src: src,
+      alt: alt,
+      onClick: () => setActive(i),
+      style: {
+        width: '100%',
+        aspectRatio: '1',
+        objectFit: 'cover',
+        borderRadius: 8,
+        cursor: 'pointer',
+        transition: 'all 0.2s'
+      },
+      className: "qmd-gallery-item"
+    });
+  })), active != null && /*#__PURE__*/React.createElement("div", {
+    onClick: () => setActive(null),
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 99999,
+      background: 'rgba(0,0,0,0.9)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: e => {
+      e.stopPropagation();
+      setActive(a => a > 0 ? a - 1 : images.length - 1);
+    },
+    style: {
+      position: 'absolute',
+      left: 20,
+      border: 'none',
+      background: 'rgba(255,255,255,0.1)',
+      color: '#fff',
+      width: 40,
+      height: 40,
+      borderRadius: '50%',
+      cursor: 'pointer',
+      fontSize: 18
+    }
+  }, "\u2039"), /*#__PURE__*/React.createElement("img", {
+    src: typeof images[active] === 'string' ? images[active] : images[active].src,
+    alt: "",
+    style: {
+      maxWidth: '85vw',
+      maxHeight: '85vh',
+      objectFit: 'contain',
+      borderRadius: 8
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: e => {
+      e.stopPropagation();
+      setActive(a => (a + 1) % images.length);
+    },
+    style: {
+      position: 'absolute',
+      right: 20,
+      border: 'none',
+      background: 'rgba(255,255,255,0.1)',
+      color: '#fff',
+      width: 40,
+      height: 40,
+      borderRadius: '50%',
+      cursor: 'pointer',
+      fontSize: 18
+    }
+  }, "\u203A"), /*#__PURE__*/React.createElement("button", {
+    onClick: () => setActive(null),
+    style: {
+      position: 'absolute',
+      top: 20,
+      right: 20,
+      border: 'none',
+      background: 'rgba(255,255,255,0.1)',
+      color: '#fff',
+      width: 36,
+      height: 36,
+      borderRadius: '50%',
+      cursor: 'pointer',
+      fontSize: 18
+    }
+  }, "\u2715"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      bottom: 20,
+      color: '#fff',
+      fontSize: 13
+    }
+  }, active + 1, " / ", images.length)));
+}
+
+/**
+ * Media SDK - API 客户端
+ * 媒体服务后端接口封装
+ * 
+ * 使用 BaseApiClient 基类简化代码
+ */
+
+
+/**
+ * 媒体 API 客户端
+ */
+class MediaApiClient extends BaseApiClient {
+  constructor(config = {}) {
+    super('/media', config);
+  }
+
+  // ============ 上传 ============
+
+  /**
+   * 获取上传凭证
+   * @param {Object} options - 上传选项
+   */
+  async getUploadToken(options = {}) {
+    return this.post('/upload/token', options);
+  }
+
+  /**
+   * 上传图片
+   * @param {File} file - 文件对象
+   * @param {Object} options - 上传选项
+   * @param {Function} onProgress - 进度回调
+   */
+  async uploadImage(file, options = {}, onProgress = null) {
+    return this._upload('/upload/image', file, options, onProgress);
+  }
+
+  /**
+   * 上传视频
+   * @param {File} file - 文件对象
+   * @param {Object} options - 上传选项
+   * @param {Function} onProgress - 进度回调
+   */
+  async uploadVideo(file, options = {}, onProgress = null) {
+    return this._upload('/upload/video', file, options, onProgress);
+  }
+
+  /**
+   * 上传音频
+   * @param {File} file - 文件对象
+   * @param {Object} options - 上传选项
+   * @param {Function} onProgress - 进度回调
+   */
+  async uploadAudio(file, options = {}, onProgress = null) {
+    return this._upload('/upload/audio', file, options, onProgress);
+  }
+
+  /**
+   * 内部上传方法
+   */
+  async _upload(path, file, options, onProgress) {
+    const formData = new FormData();
+    formData.append('file', file);
+    Object.entries(options).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      const token = this.getToken();
+      if (onProgress) {
+        xhr.upload.onprogress = e => {
+          if (e.lengthComputable) {
+            onProgress(e.loaded / e.total);
+          }
+        };
+      }
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve(JSON.parse(xhr.responseText));
+        } else {
+          reject(new Error(`Upload failed: ${xhr.status}`));
+        }
+      };
+      xhr.onerror = () => reject(new Error('Upload failed'));
+      xhr.open('POST', `${this.baseUrl}${path}`);
+      if (token) xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+      xhr.send(formData);
+    });
+  }
+
+  // ============ 媒体查询 ============
+
+  /**
+   * 获取媒体列表
+   * @param {Object} params - 查询参数
+   */
+  async getMediaList(params = {}) {
+    return this.get('/list', params);
+  }
+
+  /**
+   * 获取媒体详情
+   * @param {string} mediaId - 媒体 ID
+   */
+  async getMedia(mediaId) {
+    return this.get(`/${mediaId}`);
+  }
+
+  /**
+   * 删除媒体
+   * @param {string} mediaId - 媒体 ID
+   */
+  async deleteMedia(mediaId) {
+    return this.delete(`/${mediaId}`);
+  }
+
+  /**
+   * 批量删除媒体
+   * @param {string[]} mediaIds - 媒体 ID 列表
+   */
+  async batchDeleteMedia(mediaIds) {
+    return this.post('/batch-delete', {
+      media_ids: mediaIds
+    });
+  }
+
+  // ============ 图片处理 ============
+
+  /**
+   * 获取图片缩略图 URL
+   * @param {string} mediaId - 媒体 ID
+   * @param {Object} options - 处理选项
+   */
+  async getThumbnailUrl(mediaId, options = {}) {
+    return this.get(`/${mediaId}/thumbnail`, options);
+  }
+
+  /**
+   * 裁剪图片
+   * @param {string} mediaId - 媒体 ID
+   * @param {Object} cropOptions - 裁剪参数
+   */
+  async cropImage(mediaId, cropOptions) {
+    return this.post(`/${mediaId}/crop`, cropOptions);
+  }
+
+  /**
+   * 压缩图片
+   * @param {string} mediaId - 媒体 ID
+   * @param {Object} compressOptions - 压缩参数
+   */
+  async compressImage(mediaId, compressOptions) {
+    return this.post(`/${mediaId}/compress`, compressOptions);
+  }
+
+  // ============ 视频处理 ============
+
+  /**
+   * 获取视频封面
+   * @param {string} mediaId - 媒体 ID
+   * @param {number} time - 时间点（秒）
+   */
+  async getVideoCover(mediaId, time = 0) {
+    return this.get(`/${mediaId}/cover`, {
+      time
+    });
+  }
+
+  /**
+   * 转码视频
+   * @param {string} mediaId - 媒体 ID
+   * @param {Object} transcodeOptions - 转码参数
+   */
+  async transcodeVideo(mediaId, transcodeOptions) {
+    return this.post(`/${mediaId}/transcode`, transcodeOptions);
+  }
+
+  /**
+   * 获取转码状态
+   * @param {string} mediaId - 媒体 ID
+   */
+  async getTranscodeStatus(mediaId) {
+    return this.get(`/${mediaId}/transcode/status`);
+  }
+
+  // ============ 存储统计 ============
+
+  /**
+   * 获取存储使用情况
+   */
+  async getStorageUsage() {
+    return this.get('/usage');
+  }
+
+  /**
+   * 获取配额信息
+   */
+  async getQuota() {
+    return this.get('/quota');
+  }
+}
+
+// 创建默认实例
+const mediaApi = new MediaApiClient();
+
+/**
+ * Media SDK - React Hooks
+ */
+
+function useMedia() {
+  const [media, setMedia] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState(null);
+  const fetchMedia = useCallback(async (params = {}) => {
+    try {
+      const result = await mediaApi.getMedia(params);
+      setMedia(result.data || []);
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+  const uploadMedia = useCallback(async (file, options = {}) => {
+    setUploading(true);
+    setProgress(0);
+    try {
+      const result = await mediaApi.uploadMedia(file, {
+        ...options,
+        onProgress: p => setProgress(p)
+      });
+      await fetchMedia();
+      return result;
+    } catch (err) {
+      setError(err.message);
+      throw err;
+    } finally {
+      setUploading(false);
+      setProgress(0);
+    }
+  }, [fetchMedia]);
+  const deleteMedia = useCallback(async mediaId => {
+    await mediaApi.deleteMedia(mediaId);
+    await fetchMedia();
+  }, [fetchMedia]);
+  return {
+    media,
+    uploading,
+    progress,
+    error,
+    fetchMedia,
+    uploadMedia,
+    deleteMedia
+  };
+}
+
+/**
+ * Media SDK - 国际化
+ */
+
+const messages = {
+  zh: {
+    'media.title': '媒体库',
+    'media.upload': '上传',
+    'media.delete': '删除',
+    'media.preview': '预览',
+    'media.download': '下载',
+    'media.types.image': '图片',
+    'media.types.video': '视频',
+    'media.types.audio': '音频',
+    'media.types.document': '文档',
+    'media.status.uploading': '上传中...',
+    'media.status.uploading_progress': '上传中 {progress}%',
+    'media.status.success': '上传成功',
+    'media.status.failed': '上传失败',
+    'media.empty': '暂无媒体文件',
+    'media.usage': '存储使用',
+    'media.limit': '存储限制',
+    'media.select_file': '选择文件',
+    'loading': '加载中...'
+  },
+  en: {
+    'media.title': 'Media Library',
+    'media.upload': 'Upload',
+    'media.delete': 'Delete',
+    'media.preview': 'Preview',
+    'media.download': 'Download',
+    'media.types.image': 'Image',
+    'media.types.video': 'Video',
+    'media.types.audio': 'Audio',
+    'media.types.document': 'Document',
+    'media.status.uploading': 'Uploading...',
+    'media.status.uploading_progress': 'Uploading {progress}%',
+    'media.status.success': 'Upload successful',
+    'media.status.failed': 'Upload failed',
+    'media.empty': 'No media files',
+    'media.usage': 'Storage Used',
+    'media.limit': 'Storage Limit',
+    'media.select_file': 'Select File',
+    'loading': 'Loading...'
+  },
+  ja: {
+    'media.title': 'メディアライブラリ',
+    'media.upload': 'アップロード',
+    'media.delete': '削除',
+    'media.preview': 'プレビュー',
+    'media.download': 'ダウンロード',
+    'media.types.image': '画像',
+    'media.types.video': '動画',
+    'media.types.audio': '音声',
+    'media.types.document': 'ドキュメント',
+    'media.status.uploading': 'アップロード中...',
+    'media.status.uploading_progress': 'アップロード中 {progress}%',
+    'media.status.success': 'アップロード成功',
+    'media.status.failed': 'アップロード失敗',
+    'media.empty': 'メディアファイルがありません',
+    'media.usage': 'ストレージ使用量',
+    'media.limit': 'ストレージ制限',
+    'media.select_file': 'ファイルを選択',
+    'loading': '読み込み中...'
+  },
+  ko: {
+    'media.title': '미디어 라이브러리',
+    'media.upload': '업로드',
+    'media.delete': '삭제',
+    'media.preview': '미리보기',
+    'media.download': '다운로드',
+    'media.types.image': '이미지',
+    'media.types.video': '비디오',
+    'media.types.audio': '오디오',
+    'media.types.document': '문서',
+    'media.status.uploading': '업로드 중...',
+    'media.status.uploading_progress': '업로드 중 {progress}%',
+    'media.status.success': '업로드 성공',
+    'media.status.failed': '업로드 실패',
+    'media.empty': '미디어 파일이 없습니다',
+    'media.usage': '스토리지 사용량',
+    'media.limit': '스토리지 제한',
+    'media.select_file': '파일 선택',
+    'loading': '로딩 중...'
+  }
+};
+let currentLanguage = 'en';
+function t(key, params = {}) {
+  let text = messages[currentLanguage]?.[key] || messages.en?.[key] || key;
+  Object.entries(params).forEach(([k, v]) => {
+    text = text.replace(new RegExp(`\\{${k}\\}`, 'g'), v);
+  });
+  return text;
+}
+
+/**
+ * Media SDK - 组件
+ */
+
+function MediaGallery({
+  onSelect
+}) {
+  const {
+    media,
+    loading,
+    deleteMedia
+  } = useMedia();
+  if (loading) return /*#__PURE__*/React.createElement("div", {
+    className: "eco-loading"
+  }, t('loading'));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "eco-media-gallery"
+  }, media.map(item => /*#__PURE__*/React.createElement("div", {
+    key: item.id,
+    className: "eco-media-item",
+    onClick: () => onSelect?.(item)
+  }, item.type === 'image' ? /*#__PURE__*/React.createElement("img", {
+    src: item.url,
+    alt: item.name
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "eco-media-icon"
+  }, item.type === 'video' ? '🎬' : '📄'), /*#__PURE__*/React.createElement("div", {
+    className: "eco-media-name"
+  }, item.name), /*#__PURE__*/React.createElement("button", {
+    className: "eco-btn eco-btn-sm eco-btn-danger",
+    onClick: e => {
+      e.stopPropagation();
+      deleteMedia(item.id);
+    }
+  }, t('media.delete')))));
+}
+
+export { AudioPlayer, Gallery, ImageViewer, MediaGallery, VideoPlayer, useMedia };
+//# sourceMappingURL=index.esm.js.map