mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
kennethobsequio
b37218f90e
git-subtree-dir: apps/web git-subtree-mainline:eaa6d2276agit-subtree-split:459af9d46a
33 lines
1.3 KiB
React
33 lines
1.3 KiB
React
import { ImageIcon } from "lucide-react";
|
|
import { ZoomableImage } from "@/modules/admin/components/courses/LessonsPreview";
|
|
import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
|
|
import { MediaFallback } from "@/components/generic/MediaFallback";
|
|
|
|
// content shape: { asset_id?, url?, storage_provider?, alt? }
|
|
//
|
|
// url is redacted (null) server-side for S3 assets — see redactS3Url() in
|
|
// controllers/admin/assets.controller.js. Resolve through useAssetPreviewSrc
|
|
// (media.util.js) instead of reading content.url directly, so S3-backed
|
|
// images re-mint a fresh stream token/thumbnail at render time.
|
|
export function ImageBlock({ content }) {
|
|
const { src, loading } = useAssetPreviewSrc(
|
|
{ asset_id: content?.asset_id, storage_provider: content?.storage_provider, file_url: content?.url, thumbnail_url: content?.url },
|
|
{ scope: "client" },
|
|
);
|
|
|
|
if (loading) {
|
|
return <MediaFallback className="aspect-video rounded-lg" />;
|
|
}
|
|
|
|
if (!src) {
|
|
return (
|
|
<div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
|
|
<ImageIcon className="h-4 w-4" />
|
|
No image
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <ZoomableImage url={src} alt={content?.alt} />;
|
|
}
|