davidl/MyTube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Improve cloud storage handling for thumbnails

Browse Source
This commit is contained in:
Peifan Li
2025-12-19 17:39:07 -05:00
parent 924bf2d2a5
commit 3b21b97744
4 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/CollectionCard.tsx
View File

@@ -101,8 +101,14 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection, videos }) =
// Component for individual thumbnail with cloud storage support
const CollectionThumbnail: React.FC<{ video: Video; index: number }> = ({ video, index }) => {
const thumbnailUrl = useCloudStorageUrl(video.thumbnailPath, 'thumbnail');
const src = thumbnailUrl || video.thumbnailUrl || 'https://via.placeholder.com/240x180?text=No+Thumbnail';
// Only load thumbnail from cloud if the video itself is in cloud storage
const isVideoInCloud = video.videoPath?.startsWith('cloud:') ?? false;
const thumbnailPathForCloud = isVideoInCloud ? video.thumbnailPath : null;
const thumbnailUrl = useCloudStorageUrl(thumbnailPathForCloud, 'thumbnail');
const localThumbnailUrl = !isVideoInCloud && video.thumbnailPath
? `${import.meta.env.VITE_BACKEND_URL || 'http://localhost:5551'}${video.thumbnailPath}`
: undefined;
const src = thumbnailUrl || localThumbnailUrl || video.thumbnailUrl || 'https://via.placeholder.com/240x180?text=No+Thumbnail';
return (
<Box

10
frontend/src/components/ManagePage/VideosTable.tsx
View File

@@ -38,8 +38,14 @@ const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
// Component for thumbnail with cloud storage support
const ThumbnailImage: React.FC<{ video: Video }> = ({ video }) => {
const thumbnailUrl = useCloudStorageUrl(video.thumbnailPath, 'thumbnail');
const src = thumbnailUrl || video.thumbnailUrl || 'https://via.placeholder.com/120x90?text=No+Thumbnail';
// Only load thumbnail from cloud if the video itself is in cloud storage
const isVideoInCloud = video.videoPath?.startsWith('cloud:') ?? false;
const thumbnailPathForCloud = isVideoInCloud ? video.thumbnailPath : null;
const thumbnailUrl = useCloudStorageUrl(thumbnailPathForCloud, 'thumbnail');
const localThumbnailUrl = !isVideoInCloud && video.thumbnailPath
? `${BACKEND_URL || 'http://localhost:5551'}${video.thumbnailPath}`
: undefined;
const src = thumbnailUrl || localThumbnailUrl || video.thumbnailUrl || 'https://via.placeholder.com/120x90?text=No+Thumbnail';
return (
<Box

12
frontend/src/components/VideoCard.tsx
View File

@@ -89,9 +89,15 @@ const VideoCard: React.FC<VideoCardProps> = ({
// Use cloud storage hook for thumbnail URL
const thumbnailUrl = useCloudStorageUrl(video.thumbnailPath, 'thumbnail');
const thumbnailSrc = thumbnailUrl || video.thumbnailUrl;
// Use cloud storage hook for thumbnail URL only if video is in cloud storage
// Only load thumbnail from cloud if the video itself is in cloud storage
const isVideoInCloud = video.videoPath?.startsWith('cloud:') ?? false;
const thumbnailPathForCloud = isVideoInCloud ? video.thumbnailPath : null;
const thumbnailUrl = useCloudStorageUrl(thumbnailPathForCloud, 'thumbnail');
const localThumbnailUrl = !isVideoInCloud && video.thumbnailPath
? `${import.meta.env.VITE_BACKEND_URL || 'http://localhost:5551'}${video.thumbnailPath}`
: undefined;
const thumbnailSrc = thumbnailUrl || localThumbnailUrl || video.thumbnailUrl;
// Use cloud storage hook for video URL
const videoUrl = useCloudStorageUrl(video.videoPath, 'video');

10
frontend/src/components/VideoPlayer/UpNextSidebar.tsx
View File

@@ -34,7 +34,13 @@ interface UpNextSidebarProps {
const SidebarThumbnail: React.FC<{ video: Video }> = ({ video }) => {
const [isImageLoaded, setIsImageLoaded] = useState(false);
const thumbnailUrl = useCloudStorageUrl(video.thumbnailPath, 'thumbnail');
// Only load thumbnail from cloud if the video itself is in cloud storage
const isVideoInCloud = video.videoPath?.startsWith('cloud:') ?? false;
const thumbnailPathForCloud = isVideoInCloud ? video.thumbnailPath : null;
const thumbnailUrl = useCloudStorageUrl(thumbnailPathForCloud, 'thumbnail');
const localThumbnailUrl = !isVideoInCloud && video.thumbnailPath
? `${import.meta.env.VITE_BACKEND_URL || 'http://localhost:5551'}${video.thumbnailPath}`
: undefined;
return (
<Box sx={{ width: 168, minWidth: 168, position: 'relative' }}>
@@ -63,7 +69,7 @@ const SidebarThumbnail: React.FC<{ video: Video }> = ({ video }) => {
// The image is always rendered but hidden until loaded
}}
onLoad={() => setIsImageLoaded(true)}
image={thumbnailUrl || video.thumbnailUrl || 'https://via.placeholder.com/168x94?text=No+Thumbnail'}
image={thumbnailUrl || localThumbnailUrl || video.thumbnailUrl || 'https://via.placeholder.com/168x94?text=No+Thumbnail'}
alt={video.title}
onError={(e) => {
setIsImageLoaded(true);