diff --git a/video-gen-app/src/pages/GeneratedRecord.tsx b/video-gen-app/src/pages/GeneratedRecord.tsx index 546a9c3a..f8105d06 100644 --- a/video-gen-app/src/pages/GeneratedRecord.tsx +++ b/video-gen-app/src/pages/GeneratedRecord.tsx @@ -569,6 +569,34 @@ const GeneratedRecord: React.FC = () => { const handleDateChange = (dateString: string) => { setSelectedDate(dateString); }; + const getVideoDimensions = (videoUrl: string): Promise => { + return new Promise((resolve) => { + const video = document.createElement('video'); + const baseUrl = import.meta.env.VITE_API_BASE || "http://localhost:8000"; + let cleanPath = videoUrl.startsWith('/') ? videoUrl.slice(1) : videoUrl; + let cleanBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl; + video.src = `${cleanBase}/${cleanPath}`; + video.crossOrigin = 'anonymous'; + video.onloadedmetadata = () => { + const width = video.videoWidth; + const height = video.videoHeight; + video.remove(); + resolve(`${width}x${height}`); + }; + video.onerror = () => { + video.remove(); + resolve(''); + }; + video.onabort = () => { + video.remove(); + resolve(''); + }; + setTimeout(() => { + video.remove(); + resolve(''); + }, 5000); + }); + }; useEffect(() => { setLoading(true); let historySource = ''; @@ -588,8 +616,16 @@ const GeneratedRecord: React.FC = () => { if (historySource) { parameters = `${selectedDate}?gen_type=${filterMedia}&history_source=${historySource}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`; } - gethistoryItems(parameters).then((res: any) => { + gethistoryItems(parameters).then(async (res: any) => { const data = Array.isArray(res) ? res : (res?.items || []); + for (const item of data) { + if (item.videoUrl && item.videoUrl.trim()) { + const dimensions = await getVideoDimensions(item.videoUrl); + if (dimensions) { + item.imagePx = dimensions; + } + } + } let recordList = [{ generatedDate: res.generatedDate, items: data, @@ -610,12 +646,19 @@ const GeneratedRecord: React.FC = () => { } finally { } } else { - gethistory(parameters).then((res: any) => { + gethistory(parameters).then(async (res: any) => { const data = Array.isArray(res) ? res : (res?.groups || []); - data.forEach(group => { + for (const group of data) { group.page = 1; - }); - // 如果是第一页,替换数据;否则追加数据 + for (const item of group.items) { + if (item.videoUrl && item.videoUrl.trim()) { + const dimensions = await getVideoDimensions(item.videoUrl); + if (dimensions) { + item.imagePx = dimensions; + } + } + } + } if (Pagebreak.page === 1) { setRecordList(data); } else { @@ -658,7 +701,6 @@ const GeneratedRecord: React.FC = () => { } try { const res: any = await gethistoryItems(parameters); - // gethistoryItems 返回数组,直接使用 const newItems: any[] = res.items || []; if (newItems && newItems.length > 0) { setRecordList(prev => prev.map(group => {