Fix hidden library items not rendering in the browser
Items flagged hidden_from_guests (blacklisted tags) returned 404 for <img> requests since tags cannot send the auth header. The API now exposes signed raw_url/thumbnail_url fields (mirroring upload previews and avatars), and the SPA uses them in the gallery, detail view, duplicates and delete screens, and upload visual matches.
This commit is contained in:
@@ -229,7 +229,7 @@ export default function DeletePage() {
|
||||
>
|
||||
<div className="relative aspect-square overflow-hidden bg-ctp-mantle">
|
||||
<img
|
||||
src={`/api/files/${item.j_id}/thumbnail/`}
|
||||
src={item.thumbnail_url}
|
||||
alt={item.filename}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-cover"
|
||||
|
||||
@@ -33,6 +33,8 @@ function MemberCard({
|
||||
selected: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const preview =
|
||||
entry.thumbnail_url ?? `/api/files/${entry.j_id}/thumbnail/`;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -43,7 +45,7 @@ function MemberCard({
|
||||
<button type="button" onClick={onToggle} className="block w-full text-left">
|
||||
<div className="relative aspect-square overflow-hidden bg-ctp-mantle">
|
||||
<img
|
||||
src={`/api/files/${entry.j_id}/thumbnail/`}
|
||||
src={preview}
|
||||
alt={entry.j_id}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-cover"
|
||||
@@ -219,7 +221,10 @@ export default function DuplicatesPage() {
|
||||
<div className="w-32 shrink-0">
|
||||
<div className="aspect-square overflow-hidden rounded-md bg-ctp-mantle">
|
||||
<img
|
||||
src={`/api/files/${group.j_id}/thumbnail/`}
|
||||
src={
|
||||
group.thumbnail_url ??
|
||||
`/api/files/${group.j_id}/thumbnail/`
|
||||
}
|
||||
alt={group.j_id}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-cover"
|
||||
|
||||
@@ -300,13 +300,17 @@ export function LibraryDetail({ jId }: { jId: string }) {
|
||||
const ordering = useUi((state) => state.ordering);
|
||||
const user = useAuth((state) => state.user);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const rawUrl = `/api/files/${jId}/raw/`;
|
||||
|
||||
const query = useQuery({
|
||||
queryKey: ["file", jId],
|
||||
queryFn: () => api<MediaItem>(`/api/files/${jId}/`),
|
||||
});
|
||||
|
||||
const rawUrl = query.data?.raw_url ?? `/api/files/${jId}/raw/`;
|
||||
const downloadUrl = rawUrl.includes("?")
|
||||
? `${rawUrl}&download=1`
|
||||
: `${rawUrl}?download=1`;
|
||||
|
||||
const neighborsQuery = useQuery({
|
||||
queryKey: ["neighbors", jId, ordering],
|
||||
queryFn: () =>
|
||||
@@ -335,7 +339,7 @@ export function LibraryDetail({ jId }: { jId: string }) {
|
||||
if (isTypingTarget(event.target)) return;
|
||||
if (event.key === "d" || event.key === "D") {
|
||||
event.preventDefault();
|
||||
window.location.href = `${rawUrl}?download=1`;
|
||||
window.location.href = downloadUrl;
|
||||
return;
|
||||
}
|
||||
const neighbors = neighborsQuery.data;
|
||||
@@ -347,7 +351,7 @@ export function LibraryDetail({ jId }: { jId: string }) {
|
||||
}
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [neighborsQuery.data, navigate, rawUrl]);
|
||||
}, [neighborsQuery.data, navigate, downloadUrl]);
|
||||
|
||||
if (query.isPending) {
|
||||
return (
|
||||
@@ -400,7 +404,7 @@ export function LibraryDetail({ jId }: { jId: string }) {
|
||||
}
|
||||
actions={
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<a href={`${rawUrl}?download=1`} className={linkButtonClass}>
|
||||
<a href={downloadUrl} className={linkButtonClass}>
|
||||
<Download className="h-4 w-4" /> Download
|
||||
</a>
|
||||
{canDelete ? (
|
||||
|
||||
@@ -385,7 +385,10 @@ function MetadataModal({
|
||||
className="flex items-center gap-3 rounded-md border border-ctp-surface0 bg-ctp-surface0/40 p-2"
|
||||
>
|
||||
<img
|
||||
src={`/api/files/${match.j_id}/thumbnail/`}
|
||||
src={
|
||||
match.thumbnail_url ??
|
||||
`/api/files/${match.j_id}/thumbnail/`
|
||||
}
|
||||
alt={match.j_id}
|
||||
loading="lazy"
|
||||
className="h-12 w-12 shrink-0 rounded object-cover"
|
||||
|
||||
Reference in New Issue
Block a user