kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

add: more commits

Browse Source 
Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
This commit is contained in:
kennethobsequio
2026-07-03 17:28:36 +08:00
parent 7e964f2432
commit ad48f8add1
7 changed files with 165 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useAssetPreviewSrc.js
+46
View File
@@ -0,0 +1,46 @@
// hooks/useAssetPreviewSrc.js
//
// React binding around utils/media.util.js's resolveAssetSrc/fetchAssetPreviewSrc.
// Replaces the duplicated useState+useEffect token-resolution block that used
// to live in each admin ViewXAsset page.
//
// Always resolves a preview regardless of is_public — admins need to see the
// real asset to manage it. (The download-only-no-preview treatment is a
// client-facing concept, not an admin one — see downloadAsset()/saveBlob() in
// media.util.js for the download affordance, used alongside the preview here.)
import { useEffect, useState } from "react";
import { resolveAssetSrc, fetchAssetPreviewSrc } from "@/utils/media.util";
export function useAssetPreviewSrc(asset, { scope = "admin" } = {}) {
const [src, setSrc] = useState(null);
const [thumbnailUrl, setThumbnailUrl] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
setSrc(null);
setThumbnailUrl(null);
if (!asset) return;
const fastSrc = resolveAssetSrc(asset);
if (fastSrc) {
setSrc(fastSrc);
setThumbnailUrl(asset.thumbnail_url ?? null);
return;
}
let cancelled = false;
setLoading(true);
fetchAssetPreviewSrc(asset, { scope }).then((result) => {
if (cancelled) return;
setSrc(result.src);
setThumbnailUrl(result.thumbnailUrl);
}).finally(() => {
if (!cancelled) setLoading(false);
});
return () => { cancelled = true; };
}, [asset, scope]);
return { src, thumbnailUrl, loading };
}
src/modules/admin/pages/assets/ViewAudioAsset.jsx
+8 -31
View File
@@ -1,12 +1,13 @@
// modules/admin/pages/assets/ViewAudioAsset.jsx
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { ArrowLeft, Lock, Globe, Music2 } from "lucide-react";
import api from "@/utils/api.util";
import { ArrowLeft, Lock, Globe, Music2, Download } from "lucide-react";
import { useDateFormat } from "@/hooks/useDateFormat";
import { useAssets } from "@/contexts/AdminAssetsContext";
import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
import { downloadAsset } from "@/utils/media.util";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
@@ -33,39 +34,12 @@ export default function ViewAudioAsset() {
const { fmtDateTime } = useDateFormat();
const { selectedAsset, loading, fetchAsset } = useAssets();
const [streamUrl, setStreamUrl] = useState(null);
const [thumbnailUrl, setThumbnailUrl] = useState(null);
const { src: streamUrl, thumbnailUrl } = useAssetPreviewSrc(selectedAsset, { scope: "admin" });
useEffect(() => {
if (assetId) fetchAsset(assetId);
}, [assetId]);
useEffect(() => {
if (!selectedAsset) return;
setStreamUrl(null);
setThumbnailUrl(null);
if (selectedAsset.storage_provider !== "s3") {
setStreamUrl(selectedAsset.file_url ?? null);
return;
}
const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
// fetchAsset already embeds stream_token/thumbnail_url for S3 assets —
// only fall back to a token request if it's somehow missing (expired
// cache edge case).
if (selectedAsset.stream_token) {
setStreamUrl(`${API_BASE}/client/media/stream/${selectedAsset.stream_token}`);
if (selectedAsset.thumbnail_url) setThumbnailUrl(selectedAsset.thumbnail_url);
return;
}
api.post("/admin/media/token", { asset_id: selectedAsset.asset_id })
.then(({ data }) => {
const { token, thumbnail_url } = data?.data ?? {};
if (token) setStreamUrl(`${API_BASE}/client/media/stream/${token}`);
if (thumbnail_url) setThumbnailUrl(thumbnail_url);
})
.catch(() => setStreamUrl(null));
}, [selectedAsset]);
if (loading) {
return <MediaFallback className="h-96 rounded-lg" />;
}
@@ -101,6 +75,9 @@ export default function ViewAudioAsset() {
<h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
<p className="text-sm text-muted-foreground">{a.mime_type}</p>
</div>
<Button variant="outline" size="sm" onClick={() => downloadAsset(a, { scope: "admin" })}>
<Download className="h-4 w-4" /> Download
</Button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
src/modules/admin/pages/assets/ViewDocumentAsset.jsx
+8 -23
View File
@@ -1,12 +1,13 @@
// modules/admin/pages/assets/ViewDocumentAsset.jsx
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { ArrowLeft, Lock, Globe, FileText } from "lucide-react";
import api from "@/utils/api.util";
import { ArrowLeft, Lock, Globe, FileText, Download } from "lucide-react";
import { useDateFormat } from "@/hooks/useDateFormat";
import { useAssets } from "@/contexts/AdminAssetsContext";
import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
import { downloadAsset } from "@/utils/media.util";
import { Spinner } from "@/components/ui/spinner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
@@ -30,31 +31,12 @@ export default function ViewDocumentAsset() {
const { fmtDateTime } = useDateFormat();
const { selectedAsset, loading, fetchAsset } = useAssets();
const [streamUrl, setStreamUrl] = useState(null);
const { src: streamUrl } = useAssetPreviewSrc(selectedAsset, { scope: "admin" });
useEffect(() => {
if (assetId) fetchAsset(assetId);
}, [assetId]);
useEffect(() => {
if (!selectedAsset) return;
setStreamUrl(null);
if (selectedAsset.storage_provider !== "s3") {
setStreamUrl(selectedAsset.file_url ?? null);
return;
}
const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
// fetchAsset already embeds stream_token for S3 assets — only fall back
// to a token request if it's somehow missing (expired cache edge case).
if (selectedAsset.stream_token) {
setStreamUrl(`${API_BASE}/client/media/stream/${selectedAsset.stream_token}`);
return;
}
api.post("/admin/media/token", { asset_id: selectedAsset.asset_id })
.then(({ data }) => setStreamUrl(`${API_BASE}/client/media/stream/${data?.data?.token}`))
.catch(() => setStreamUrl(null));
}, [selectedAsset]);
if (loading) {
return (
<div className="flex items-center justify-center h-96">
@@ -87,6 +69,9 @@ export default function ViewDocumentAsset() {
<h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
<p className="text-sm text-muted-foreground">{a.mime_type}</p>
</div>
<Button variant="outline" size="sm" onClick={() => downloadAsset(a, { scope: "admin" })}>
<Download className="h-4 w-4" /> Download
</Button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
src/modules/admin/pages/assets/ViewImageAsset.jsx
+8 -23
View File
@@ -1,12 +1,13 @@
// modules/admin/pages/assets/ViewImageAsset.jsx
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import api from "@/utils/api.util";
import { ArrowLeft, Lock, Globe } from "lucide-react";
import { ArrowLeft, Lock, Globe, Download } from "lucide-react";
import { useDateFormat } from "@/hooks/useDateFormat";
import { useAssets } from "@/contexts/AdminAssetsContext";
import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
import { downloadAsset } from "@/utils/media.util";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
@@ -28,31 +29,12 @@ export default function ViewImageAsset() {
const { fmtDateTime } = useDateFormat();
const { selectedAsset, loading, fetchAsset } = useAssets();
const [streamUrl, setStreamUrl] = useState(null);
const { src: streamUrl } = useAssetPreviewSrc(selectedAsset, { scope: "admin" });
useEffect(() => {
if (assetId) fetchAsset(assetId);
}, [assetId]);
useEffect(() => {
if (!selectedAsset) return;
setStreamUrl(null);
if (selectedAsset.storage_provider !== "s3") {
setStreamUrl(selectedAsset.file_url ?? null);
return;
}
const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
// fetchAsset already embeds stream_token for S3 assets — only fall back
// to a token request if it's somehow missing (expired cache edge case).
if (selectedAsset.stream_token) {
setStreamUrl(`${API_BASE}/client/media/stream/${selectedAsset.stream_token}`);
return;
}
api.post("/admin/media/token", { asset_id: selectedAsset.asset_id })
.then(({ data }) => setStreamUrl(`${API_BASE}/client/media/stream/${data?.data?.token}`))
.catch(() => setStreamUrl(null));
}, [selectedAsset]);
if (loading) {
return <MediaFallback className="h-96 rounded-lg" />;
}
@@ -80,6 +62,9 @@ export default function ViewImageAsset() {
<h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
<p className="text-sm text-muted-foreground">{a.mime_type}</p>
</div>
<Button variant="outline" size="sm" onClick={() => downloadAsset(a, { scope: "admin" })}>
<Download className="h-4 w-4" /> Download
</Button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
src/modules/admin/pages/assets/ViewVideoAsset.jsx
+8 -23
View File
@@ -1,12 +1,13 @@
// modules/admin/pages/assets/ViewVideoAsset.jsx
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { ArrowLeft, Lock, Globe } from "lucide-react";
import api from "@/utils/api.util";
import { ArrowLeft, Lock, Globe, Download } from "lucide-react";
import { useDateFormat } from "@/hooks/useDateFormat";
import { useAssets } from "@/contexts/AdminAssetsContext";
import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
import { downloadAsset } from "@/utils/media.util";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
@@ -38,31 +39,12 @@ export default function ViewVideoAsset() {
const { fmtDateTime } = useDateFormat();
const { selectedAsset, loading, fetchAsset } = useAssets();
const [streamUrl, setStreamUrl] = useState(null);
const { src: streamUrl } = useAssetPreviewSrc(selectedAsset, { scope: "admin" });
useEffect(() => {
if (assetId) fetchAsset(assetId);
}, [assetId]);
useEffect(() => {
if (!selectedAsset) return;
setStreamUrl(null);
if (selectedAsset.storage_provider !== "s3") {
setStreamUrl(selectedAsset.file_url ?? null);
return;
}
const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
// fetchAsset already embeds stream_token for S3 assets — only fall back
// to a token request if it's somehow missing (expired cache edge case).
if (selectedAsset.stream_token) {
setStreamUrl(`${API_BASE}/client/media/stream/${selectedAsset.stream_token}`);
return;
}
api.post("/admin/media/token", { asset_id: selectedAsset.asset_id })
.then(({ data }) => setStreamUrl(`${API_BASE}/client/media/stream/${data?.data?.token}`))
.catch(() => setStreamUrl(null));
}, [selectedAsset]);
if (loading) {
return <MediaFallback className="h-96 rounded-lg" />;
}
@@ -90,6 +72,9 @@ export default function ViewVideoAsset() {
<h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
<p className="text-sm text-muted-foreground">{a.mime_type}</p>
</div>
<Button variant="outline" size="sm" onClick={() => downloadAsset(a, { scope: "admin" })}>
<Download className="h-4 w-4" /> Download
</Button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
src/modules/client/components/FilePreview.jsx
+2 -13
View File
@@ -36,6 +36,7 @@ import {
import { formatDate } from '@/utils/table.util';
import { formatBytes } from './blocks/FileUpload';
import api from '@/utils/api.util';
import { saveBlob } from '@/utils/media.util';
import FileZoomViewer from './FileZoomViewer';
// ─── Resolve preview kind from mime type ──────────────────────────────────────
@@ -190,18 +191,6 @@ const PreviewBody = ({ file, kind, blobUrl, loading, error, downloadUrl, onDownl
}
};
// ─── Trigger a browser download from a blob ────────────────────────────────────
const downloadBlob = (blob, fileName) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
// ─── Main dialog ────────────────────────────────────────────────────────────────
const FilePreview = ({ file, open, onOpenChange, streamUrl, downloadUrl }) => {
const kind = file ? resolveKind(file.mime_type, file.file_name) : 'other';
@@ -223,7 +212,7 @@ const FilePreview = ({ file, open, onOpenChange, streamUrl, downloadUrl }) => {
setDownloading(true);
try {
const res = await api.get(url, { responseType: 'blob' });
downloadBlob(res.data, file.file_name);
saveBlob(res.data, file.file_name);
} catch {
// fall back to direct link if proxy fails (e.g. public file_url)
if (file.file_url) window.open(file.file_url, '_blank');
src/utils/media.util.js
+85 -5
View File
@@ -1,13 +1,21 @@
// utils/media.util.js
//
// Resolves a displayable <img> src for an asset payload that may carry a
// short-lived stream_token (private/S3 — proxied through the backend) instead
// of a raw file_url. Private assets must never expose their real storage URL
// to the browser — see controllers/admin/assets.controller.js's redactS3Url
// pattern, mirrored for advertisements in controllers/*/advertisements.controller.js.
// Resolves a displayable <img>/<video>/<audio> src for an asset payload that
// may carry a short-lived stream_token (private/S3 — proxied through the
// backend) instead of a raw file_url. Private assets must never expose their
// real storage URL to the browser — see controllers/admin/assets.controller.js's
// redactS3Url pattern, mirrored for advertisements in
// controllers/*/advertisements.controller.js.
import api from "@/utils/api.util";
const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
const TOKEN_ENDPOINTS = {
admin: "/admin/media/token",
client: "/client/media/token",
};
export function streamUrl(token) {
return token ? `${API_BASE}/client/media/stream/${token}` : null;
}
@@ -20,3 +28,75 @@ export function resolveAssetSrc(asset) {
if (asset.stream_token) return streamUrl(asset.stream_token);
return asset.thumbnail_url || asset.file_url || null;
}
// ─── fetchAssetPreviewSrc ──────────────────────────────────────────────────────
//
// Async fallback for when resolveAssetSrc() can't resolve synchronously (S3
// asset whose stream_token wasn't embedded on the row — e.g. an expired cache
// edge case). Mints a fresh token via the admin or client media-token endpoint.
// Non-S3 assets (chibisafe/local) resolve straight to file_url — no request.
//
// Returns { src, thumbnailUrl }.
export async function fetchAssetPreviewSrc(asset, { scope = "admin" } = {}) {
if (!asset) return { src: null, thumbnailUrl: null };
if (asset.storage_provider !== "s3") {
return { src: asset.file_url ?? null, thumbnailUrl: asset.thumbnail_url ?? null };
}
if (asset.stream_token) {
return { src: streamUrl(asset.stream_token), thumbnailUrl: asset.thumbnail_url ?? null };
}
try {
const { data } = await api.post(TOKEN_ENDPOINTS[scope] ?? TOKEN_ENDPOINTS.admin, {
asset_id: asset.asset_id,
});
const { token, thumbnail_url } = data?.data ?? {};
return { src: streamUrl(token), thumbnailUrl: thumbnail_url ?? null };
} catch {
return { src: null, thumbnailUrl: null };
}
}
// ─── saveBlob ───────────────────────────────────────────────────────────────────
//
// Triggers a browser "Save As" for an in-memory blob via a synthetic <a download>
// click. Shared by downloadAsset() below and FilePreview.jsx's file-completion
// download flow — kept in one place instead of being copy-pasted per consumer.
export function saveBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename ?? "download";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// ─── downloadAsset ──────────────────────────────────────────────────────────────
//
// Fetches an asset's bytes (via the same proxy/file_url resolution as above)
// and saves it locally, without ever mounting a preview element. Used for
// "Public" assets in the Assets admin surfaces, which are download-only —
// see AssetPickerSheet.jsx / the admin ViewXAsset pages.
export async function downloadAsset(asset, { scope = "admin" } = {}) {
if (!asset) return;
const filename = asset.display_name ?? asset.original_name ?? "download";
let src = resolveAssetSrc(asset);
if (!src) {
({ src } = await fetchAssetPreviewSrc(asset, { scope }));
}
if (!src) return;
try {
const { data: blob } = await api.get(src, { responseType: "blob" });
saveBlob(blob, filename);
} catch {
// Cross-origin CDN (chibisafe/public file_url) may reject the blob
// fetch — fall back to opening it directly.
if (asset.file_url) window.open(asset.file_url, "_blank");
}
}