feat: add audio preview functionality
This commit is contained in:
CaIon
@@ -240,6 +240,7 @@ export const getTaskLogsColumns = ({
|
||||
openContentModal,
|
||||
isAdminUser,
|
||||
openVideoModal,
|
||||
openAudioModal,
|
||||
}) => {
|
||||
return [
|
||||
{
|
||||
@@ -386,6 +387,26 @@ export const getTaskLogsColumns = ({
|
||||
dataIndex: 'fail_reason',
|
||||
fixed: 'right',
|
||||
render: (text, record, index) => {
|
||||
// Suno audio preview
|
||||
const isSunoSuccess =
|
||||
record.platform === 'suno' &&
|
||||
record.status === 'SUCCESS' &&
|
||||
Array.isArray(record.data) &&
|
||||
record.data.some((c) => c.audio_url);
|
||||
if (isSunoSuccess) {
|
||||
return (
|
||||
<a
|
||||
href='#'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
openAudioModal(record.data);
|
||||
}}
|
||||
>
|
||||
{t('点击预览音乐')}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// 视频预览：优先使用 result_url，兼容旧数据 fail_reason 中的 URL
|
||||
const isVideoTask =
|
||||
record.action === TASK_ACTION_GENERATE ||
|
||||
|
||||
@@ -40,6 +40,7 @@ const TaskLogsTable = (taskLogsData) => {
|
||||
copyText,
|
||||
openContentModal,
|
||||
openVideoModal,
|
||||
openAudioModal,
|
||||
showUserInfoFunc,
|
||||
isAdminUser,
|
||||
t,
|
||||
@@ -54,10 +55,11 @@ const TaskLogsTable = (taskLogsData) => {
|
||||
copyText,
|
||||
openContentModal,
|
||||
openVideoModal,
|
||||
openAudioModal,
|
||||
showUserInfoFunc,
|
||||
isAdminUser,
|
||||
});
|
||||
}, [t, COLUMN_KEYS, copyText, openContentModal, openVideoModal, showUserInfoFunc, isAdminUser]);
|
||||
}, [t, COLUMN_KEYS, copyText, openContentModal, openVideoModal, openAudioModal, showUserInfoFunc, isAdminUser]);
|
||||
|
||||
// Filter columns based on visibility settings
|
||||
const getVisibleColumns = () => {
|
||||
|
||||
@@ -25,6 +25,7 @@ import TaskLogsActions from './TaskLogsActions';
|
||||
import TaskLogsFilters from './TaskLogsFilters';
|
||||
import ColumnSelectorModal from './modals/ColumnSelectorModal';
|
||||
import ContentModal from './modals/ContentModal';
|
||||
import AudioPreviewModal from './modals/AudioPreviewModal';
|
||||
import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData';
|
||||
import { useIsMobile } from '../../../hooks/common/useIsMobile';
|
||||
import { createCardProPagination } from '../../../helpers/utils';
|
||||
@@ -45,6 +46,11 @@ const TaskLogsPage = () => {
|
||||
modalContent={taskLogsData.videoUrl}
|
||||
isVideo={true}
|
||||
/>
|
||||
<AudioPreviewModal
|
||||
isModalOpen={taskLogsData.isAudioModalOpen}
|
||||
setIsModalOpen={taskLogsData.setIsAudioModalOpen}
|
||||
audioClips={taskLogsData.audioClips}
|
||||
/>
|
||||
|
||||
<Layout>
|
||||
<CardPro
|
||||
|
||||
181
web/src/components/table/task-logs/modals/AudioPreviewModal.jsx
Normal file
181
web/src/components/table/task-logs/modals/AudioPreviewModal.jsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user