diff --git a/admin/src/components/media/PhotoCard.tsx b/admin/src/components/media/PhotoCard.tsx
index c1d14a92..337cab31 100644
--- a/admin/src/components/media/PhotoCard.tsx
+++ b/admin/src/components/media/PhotoCard.tsx
@@ -8,18 +8,9 @@ import {
FolderOutlined,
PictureOutlined,
} from '@ant-design/icons';
-import { getAuthCallbacks } from '@/lib/api';
+import { useSignedMediaUrl } from '@/lib/media-url';
import type { Photo } from '@/types/media';
-/** Append JWT access token as query param for
![]()
src URLs */
-function getAuthenticatedUrl(url: string): string {
- const { getAccessToken } = getAuthCallbacks();
- const accessToken = getAccessToken();
- if (!accessToken) return url;
- const separator = url.includes('?') ? '&' : '?';
- return `${url}${separator}token=${accessToken}`;
-}
-
interface PhotoCardProps {
photo: Photo;
selected?: boolean;
@@ -50,6 +41,7 @@ export default function PhotoCard({
onTogglePublish,
}: PhotoCardProps) {
const thumbnailUrl = photo.thumbnailUrl;
+ const signedThumbnailUrl = useSignedMediaUrl(thumbnailUrl);
const hoverActions = (
- {thumbnailUrl ? (
+ {thumbnailUrl && signedThumbnailUrl ? (
})
src URLs */
-function getAuthenticatedUrl(url: string): string {
- const { getAccessToken } = getAuthCallbacks();
- const accessToken = getAccessToken();
- if (!accessToken) return url;
- const separator = url.includes('?') ? '&' : '?';
- return `${url}${separator}token=${accessToken}`;
-}
-
interface PhotoViewerModalProps {
photo: Photo | null;
open: boolean;
@@ -22,9 +13,10 @@ export default function PhotoViewerModal({ photo, open, onClose }: PhotoViewerMo
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
- if (!photo) return null;
+ const adminImageUrl = photo ? `/media/photos/${photo.id}/image?size=large` : null;
+ const signedImageUrl = useSignedMediaUrl(adminImageUrl);
- const adminImageUrl = `/media/photos/${photo.id}/image?size=large`;
+ if (!photo) return null;
return (
/