feat: add audio preview functionality

2026-02-22 23:23:13 +08:00
parent c1b05d3b5a
commit 183c750e59
12 changed files with 248 additions and 2 deletions
@@ -0,0 +1,181 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Typography, Tag, Button } from '@douyinfe/semi-ui';
+import { IconExternalOpen, IconCopy } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+
+const { Text, Title } = Typography;
+
+const formatDuration = (seconds) => {
+  if (!seconds || seconds <= 0) return '--:--';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
+const AudioClipCard = ({ clip }) => {
+  const { t } = useTranslation();
+  const [hasError, setHasError] = useState(false);
+  const audioRef = useRef(null);
+
+  useEffect(() => {
+    setHasError(false);
+  }, [clip.audio_url]);
+
+  const title = clip.title || t('未命名');
+  const tags = clip.tags || clip.metadata?.tags || '';
+  const duration = clip.duration || clip.metadata?.duration;
+  const imageUrl = clip.image_url || clip.image_large_url;
+  const audioUrl = clip.audio_url;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '16px',
+        padding: '16px',
+        borderRadius: '8px',
+        border: '1px solid var(--semi-color-border)',
+        background: 'var(--semi-color-bg-1)',
+      }}
+    >
+      {imageUrl && (
+        <img
+          src={imageUrl}
+          alt={title}
+          style={{
+            width: 80,
+            height: 80,
+            borderRadius: '8px',
+            objectFit: 'cover',
+            flexShrink: 0,
+          }}
+          onError={(e) => {
+            e.target.style.display = 'none';
+          }}
+        />
+      )}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            marginBottom: '4px',
+          }}
+        >
+          <Text strong ellipsis={{ showTooltip: true }} style={{ fontSize: 15 }}>
+            {title}
+          </Text>
+          {duration > 0 && (
+            <Tag size='small' color='grey' shape='circle'>
+              {formatDuration(duration)}
+            </Tag>
+          )}
+        </div>
+
+        {tags && (
+          <div style={{ marginBottom: '8px' }}>
+            <Text
+              type='tertiary'
+              size='small'
+              ellipsis={{ showTooltip: true, rows: 1 }}
+            >
+              {tags}
+            </Text>
+          </div>
+        )}
+
+        {hasError ? (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              flexWrap: 'wrap',
+            }}
+          >
+            <Text type='warning' size='small'>
+              {t('音频无法播放')}
+            </Text>
+            <Button
+              size='small'
+              icon={<IconExternalOpen />}
+              onClick={() => window.open(audioUrl, '_blank')}
+            >
+              {t('在新标签页中打开')}
+            </Button>
+            <Button
+              size='small'
+              icon={<IconCopy />}
+              onClick={() => navigator.clipboard.writeText(audioUrl)}
+            >
+              {t('复制链接')}
+            </Button>
+          </div>
+        ) : (
+          <audio
+            ref={audioRef}
+            src={audioUrl}
+            controls
+            preload='none'
+            onError={() => setHasError(true)}
+            style={{ width: '100%', height: 36 }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const AudioPreviewModal = ({ isModalOpen, setIsModalOpen, audioClips }) => {
+  const { t } = useTranslation();
+  const clips = Array.isArray(audioClips) ? audioClips : [];
+
+  return (
+    <Modal
+      title={t('音乐预览')}
+      visible={isModalOpen}
+      onOk={() => setIsModalOpen(false)}
+      onCancel={() => setIsModalOpen(false)}
+      closable={null}
+      footer={null}
+      bodyStyle={{
+        maxHeight: '70vh',
+        overflow: 'auto',
+        padding: '16px',
+      }}
+      width={560}
+    >
+      {clips.length === 0 ? (
+        <Text type='tertiary'>{t('无')}</Text>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {clips.map((clip, idx) => (
+            <AudioClipCard key={clip.clip_id || clip.id || idx} clip={clip} />
+          ))}
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default AudioPreviewModal;