Skip to content

feat: add video preview modal #1429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Calcium-Ion merged 1 commit into from
Aug 9, 2025
Merged

feat: add video preview modal #1429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion web/src/components/table/task-logs/TaskLogsColumnDefs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@ export const getTaskLogsColumns = ({
copyText,
openContentModal,
isAdminUser,
openVideoModal,
}) => {
return [
{
Expand Down Expand Up @@ -342,7 +343,13 @@ export const getTaskLogsColumns = ({
const isUrl = typeof text === 'string' && /^https?:\/\//.test(text);
if (isSuccess && isVideoTask && isUrl) {
return (
<a href={text} target="_blank" rel="noopener noreferrer">
<a
href="#"
onClick={e => {
e.preventDefault();
openVideoModal(text);
}}
>
{t('点击预览视频')}
</a>
);
Expand Down
3 changes: 3 additions & 0 deletions web/src/components/table/task-logs/TaskLogsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const TaskLogsTable = (taskLogsData) => {
handlePageSizeChange,
copyText,
openContentModal,
openVideoModal,
isAdminUser,
t,
COLUMN_KEYS,
Expand All @@ -51,13 +52,15 @@ const TaskLogsTable = (taskLogsData) => {
COLUMN_KEYS,
copyText,
openContentModal,
openVideoModal,
isAdminUser,
});
}, [
t,
COLUMN_KEYS,
copyText,
openContentModal,
openVideoModal,
isAdminUser,
]);

Expand Down
9 changes: 8 additions & 1 deletion web/src/components/table/task-logs/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,14 @@ const TaskLogsPage = () => {
<>
{/* Modals */}
<ColumnSelectorModal {...taskLogsData} />
<ContentModal {...taskLogsData} />
<ContentModal {...taskLogsData} isVideo={false} />
{/* 新增：视频预览弹窗 */}
<ContentModal
isModalOpen={taskLogsData.isVideoModalOpen}
setIsModalOpen={taskLogsData.setIsVideoModalOpen}
modalContent={taskLogsData.videoUrl}
isVideo={true}
/>

<Layout>
<CardPro
Expand Down
7 changes: 6 additions & 1 deletion web/src/components/table/task-logs/modals/ContentModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const ContentModal = ({
isModalOpen,
setIsModalOpen,
modalContent,
isVideo,
}) => {
return (
<Modal
Expand All @@ -34,7 +35,11 @@ const ContentModal = ({
bodyStyle={{ height: '400px', overflow: 'auto' }}
width={800}
>
<p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
{isVideo ? (
<video src={modalContent} controls style={{ width: '100%' }} autoPlay />
) : (
<p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
)}
</Modal>
);
};
Expand Down
16 changes: 16 additions & 0 deletions web/src/hooks/task-logs/useTaskLogsData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ export const useTaskLogsData = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [modalContent, setModalContent] = useState('');

// 新增：视频预览弹窗状态
const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
const [videoUrl, setVideoUrl] = useState('');

// Form state
const [formApi, setFormApi] = useState(null);
let now = new Date();
Expand Down Expand Up @@ -243,6 +247,12 @@ export const useTaskLogsData = () => {
setIsModalOpen(true);
};

// 新增：打开视频预览弹窗
const openVideoModal = (url) => {
setVideoUrl(url);
setIsVideoModalOpen(true);
};

// Initialize data
useEffect(() => {
const localPageSize = parseInt(localStorage.getItem('task-page-size')) || ITEMS_PER_PAGE;
Expand All @@ -264,6 +274,11 @@ export const useTaskLogsData = () => {
setIsModalOpen,
modalContent,

// 新增：视频弹窗状态
isVideoModalOpen,
setIsVideoModalOpen,
videoUrl,

// Form state
formApi,
setFormApi,
Expand All @@ -290,6 +305,7 @@ export const useTaskLogsData = () => {
refresh,
copyText,
openContentModal,
openVideoModal, // 新增
enrichLogs,
syncPageData,

Expand Down