inicontent 1.0.0

package/app/components/Asset/Thumb.vue

@@ -0,0 +1,708 @@
+<template>
+	<NTooltip :disabled="hideTooltip || !asset.name">
+		<template #trigger>
+			<NTooltip :disabled="hideTooltip || !asset.name || !asset.createdAt" :delay="1500">
+				<template #trigger>
+					<!-- Image -->
+					<NImage v-if="asset.publicURL && imageExtensions.includes(asset.extension)" class="asset"
+						:src="asset.publicURL" :intersectionObserverOptions lazy
+						:preview-disabled="previewDisabled || useSharedPreview"
+						:renderToolbar="(props) => renderToolbar(props, asset)" @click="handleAssetClick"
+						:width="size" :height="size"
+						:style="size ? `width: ${size}px; height: ${size}px;` : undefined"
+						:img-props="size ? { style: `width: ${size}px; height: ${size}px;` } : undefined" />
+
+					<!-- PDF with thumbnail -->
+					<NImage v-else-if="asset.extension === 'pdf' && pdfThumbs[assetKey]" class="asset"
+						:src="pdfThumbs[assetKey]" :intersectionObserverOptions lazy preview-disabled
+						@click="handleAssetClick" 
+						:width="size" :height="size"
+						:style="size ? `width: ${size}px; height: ${size}px;` : undefined"
+						:img-props="size ? { style: `width: ${size}px; height: ${size}px;` } : undefined" />
+
+					<!-- PDF generating thumbnail -->
+					<NSpin v-else-if="asset.extension === 'pdf'" :show="generatingPdf[assetKey]" size="small">
+						<NIcon class="asset" v-intersect="() => !pdfThumbs[assetKey] && generatePdfThumb()"
+							@click="handleAssetClick" :width="size" :height="size">
+							<LazyAssetIcon :type="asset.type" class="icon" />
+						</NIcon>
+					</NSpin>
+
+					<!-- Video with thumbnail -->
+					<NImage v-else-if="videoExtensions.includes(asset.extension) && videoThumbs[assetKey]" class="asset"
+						:src="videoThumbs[assetKey]" :intersectionObserverOptions lazy preview-disabled
+						@click="handleAssetClick"
+						:width="size" :height="size"
+						:style="size ? `width: ${size}px; height: ${size}px;` : undefined"
+						:img-props="size ? { style: `width: ${size}px; height: ${size}px;` } : undefined" />
+
+					<!-- Video generating thumbnail -->
+					<NSpin v-else-if="videoExtensions.includes(asset.extension)"
+						:show="videoExtensions.includes(asset.extension) && generatingVideo[assetKey]" size="small">
+						<NIcon class="asset"
+							v-intersect="() => videoExtensions.includes(asset.extension) && !videoThumbs[assetKey] && generateVideoThumb()"
+							@click="handleAssetClick" :size>
+							<LazyAssetIcon :type="asset.type" class="icon" />
+						</NIcon>
+					</NSpin>
+
+					<!-- Document with thumbnail (docx, xlsx, pptx, etc.) -->
+					<NImage v-else-if="officeExtensions.includes(asset.extension) && docThumbs[assetKey]" class="asset"
+						:src="docThumbs[assetKey]" :intersectionObserverOptions lazy preview-disabled
+						@click="handleAssetClick"
+						:width="size" :height="size"
+						:style="size ? `width: ${size}px; height: ${size}px;` : undefined"
+						:img-props="size ? { style: `width: ${size}px; height: ${size}px;` } : undefined" />
+
+					<!-- Document generating thumbnail -->
+					<NSpin v-else-if="officeExtensions.includes(asset.extension)"
+						:show="generatingDoc[assetKey]" size="small">
+						<NIcon class="asset"
+							v-intersect="() => officeExtensions.includes(asset.extension) && !docThumbs[assetKey] && generateDocThumb()"
+							@click="handleAssetClick" :size>
+							<LazyAssetIcon :type="asset.type" class="icon" />
+						</NIcon>
+					</NSpin>
+
+					<!-- Other file types as icon -->
+					<NIcon v-else class="asset" @click="handleAssetClick" :size="size">
+						<LazyAssetIcon :type="asset.type" class="icon" />
+					</NIcon>
+				</template>
+				<div :style="{ direction: Language === 'ar' ? 'rtl' : 'ltr' }">
+					<div>
+						<strong>{{ t('name') }} :</strong>
+						<span>{{ asset.name }}{{ asset.extension ? `.${asset.extension}` :
+							''
+						}}</span>
+					</div>
+					<div>
+						<strong>{{ t("size") }}: </strong>
+						<span>{{ humanFileSize(asset.size) }}</span>
+					</div>
+					<div>
+						<strong>{{ t("type") }}: </strong>
+						<span>{{ asset.type }}</span>
+					</div>
+					<div>
+						<strong>{{ t('createdAt') }} :</strong>
+						<span>{{ asset.createdAt ? formatDate(asset.createdAt) : '' }}</span>
+					</div>
+				</div>
+			</NTooltip>
+		</template>
+		{{ asset.name }}{{ asset.extension ? `.${asset.extension}` : '' }}
+	</NTooltip>
+</template>
+
+<script lang="ts" setup>
+import type { ImageRenderToolbarProps } from "naive-ui";
+import type { Directive, VNodeChild } from "vue";
+import { Icon, NIcon, NTooltip } from "#components";
+import { imageExtensions, videoExtensions, officeExtensions } from "~/composables";
+import {
+	getCachedThumbnail,
+	cacheThumbnail,
+} from "~/composables/useThumbnailCache";
+import { generateDocumentThumbnail } from "~/composables/useDocumentThumbnail";
+import { useAssetPreview } from "~/composables/useAssetPreview";
+
+interface Props {
+	asset: Asset;
+	containerSelector?: string | null;
+	size?: number;
+	hideTooltip?: boolean;
+	previewDisabled?: boolean;
+	disableDefaultClickAction?: boolean;
+	previewAssets?: Asset[];
+	useSharedPreview?: boolean;
+}
+
+const {
+	asset,
+	containerSelector,
+	size,
+	hideTooltip,
+	previewDisabled = false,
+	disableDefaultClickAction = false,
+	previewAssets,
+	useSharedPreview = true,
+} = defineProps<Props>();
+const emit = defineEmits<{
+	(e: "click", event: MouseEvent): void;
+}>();
+
+const database = useState<Database>("database");
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
+
+const formatDate = (date: string | Date | number) => {
+	const d = new Date(date);
+	return d.toLocaleString(Language.value, {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
+};
+
+const intersectionObserverOptions = containerSelector
+	? {
+		root: containerSelector,
+	}
+	: undefined;
+// Video and PDF thumbnail generation state
+const videoThumbs = reactive<Record<string, string | undefined>>({});
+const generatingVideo = reactive<Record<string, boolean>>({});
+const pdfThumbs = reactive<Record<string, string | undefined>>({});
+const generatingPdf = reactive<Record<string, boolean>>({});
+
+// Document (Office) thumbnail generation state
+const docThumbs = reactive<Record<string, string | undefined>>({});
+const generatingDoc = reactive<Record<string, boolean>>({});
+
+const assetKey = computed(() =>
+	String(asset.id ?? asset.publicURL ?? asset.name),
+);
+
+function assetKeyValue(asset: Asset): string {
+	return String(asset.id ?? asset.publicURL ?? asset.name);
+}
+
+async function generateVideoThumb(timeSec = 0.5) {
+	if (!videoExtensions.includes(asset.extension)) return;
+	const key = assetKeyValue(asset);
+	if (videoThumbs[key] !== undefined) return videoThumbs[key];
+
+	try {
+		generatingVideo[key] = true;
+
+		// Try to get from cache first
+		const cached = await getCachedThumbnail(`video-${key}`);
+		if (cached) {
+			videoThumbs[key] = cached;
+			return cached;
+		}
+
+		const dataUrl = await new Promise<string | undefined>((resolve) => {
+			const video = document.createElement("video");
+			// Requires proper CORS headers on the asset URL
+			video.crossOrigin = "anonymous";
+			video.preload = "metadata";
+			video.muted = true;
+			// iOS specific: required for inline playback
+			video.playsInline = true;
+			// iOS specific: disable picture-in-picture
+			video.setAttribute("playsinline", "");
+			video.setAttribute("webkit-playsinline", "");
+
+			const cleanup = () => {
+				video.removeEventListener("loadedmetadata", onLoadedMetadata);
+				video.removeEventListener("loadeddata", onLoadedData);
+				video.removeEventListener("seeked", onSeeked);
+				video.removeEventListener("error", onError);
+				video.removeEventListener("canplay", onCanPlay);
+				video.pause();
+				video.src = "";
+				video.load();
+			};
+
+			const onError = (error: Event) => {
+				console.warn("Video thumbnail generation error:", error);
+				cleanup();
+				resolve(undefined);
+			};
+
+			let metadataLoaded = false;
+			let dataLoaded = false;
+
+			const onLoadedMetadata = () => {
+				metadataLoaded = true;
+				trySeek();
+			};
+
+			const onLoadedData = () => {
+				dataLoaded = true;
+				trySeek();
+			};
+
+			const onCanPlay = () => {
+				if (!metadataLoaded || !dataLoaded) {
+					trySeek();
+				}
+			};
+
+			const trySeek = () => {
+				// Wait for both metadata and data to be loaded (or canplay event)
+				if (!video.duration || video.duration === Infinity) {
+					// Duration not available yet, wait
+					return;
+				}
+
+				try {
+					const target = Number.isFinite(video.duration)
+						? Math.min(timeSec, Math.max(0, video.duration - 0.1))
+						: 0;
+
+					// iOS: Try to play briefly to trigger frame loading
+					const playPromise = video.play();
+					if (playPromise !== undefined) {
+						playPromise
+							.then(() => {
+								// Pause immediately after play succeeds
+								video.pause();
+								// Now seek to target time
+								if (target > 0 && video.currentTime !== target) {
+									video.currentTime = target;
+								} else {
+									// Already at position 0 or target, capture now
+									captureFrame();
+								}
+							})
+							.catch(() => {
+								// Play failed (might be restricted), try direct seek
+								if (target > 0) {
+									video.currentTime = target;
+								} else {
+									captureFrame();
+								}
+							});
+					} else {
+						// Old browsers without promise
+						video.pause();
+						if (target > 0) {
+							video.currentTime = target;
+						} else {
+							captureFrame();
+						}
+					}
+				} catch (error) {
+					console.warn("Error during video seek:", error);
+					// Try to capture current frame anyway
+					captureFrame();
+				}
+			};
+
+			const captureFrame = () => {
+				try {
+					const canvas = document.createElement("canvas");
+					canvas.width = video.videoWidth || 320;
+					canvas.height = video.videoHeight || 180;
+
+					// Handle case where dimensions are still not available
+					if (canvas.width === 0 || canvas.height === 0) {
+						canvas.width = 320;
+						canvas.height = 180;
+					}
+
+					const ctx = canvas.getContext("2d");
+					if (!ctx) {
+						cleanup();
+						resolve(undefined);
+						return;
+					}
+					ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+					const url = canvas.toDataURL("image/jpeg", 0.7);
+					cleanup();
+					resolve(url);
+				} catch (error) {
+					console.warn("Error capturing video frame:", error);
+					cleanup();
+					resolve(undefined);
+				}
+			};
+
+			const onSeeked = () => {
+				captureFrame();
+			};
+
+			video.addEventListener("loadedmetadata", onLoadedMetadata, {
+				once: false,
+			});
+			video.addEventListener("loadeddata", onLoadedData, { once: false });
+			video.addEventListener("canplay", onCanPlay, { once: false });
+			video.addEventListener("seeked", onSeeked, { once: true });
+			video.addEventListener("error", onError, { once: true });
+
+			// iOS: Must set src before load()
+			video.src = asset.publicURL;
+			// iOS: Explicitly call load() to start loading metadata
+			video.load();
+
+			// Fallback timeout in case events don't fire
+			setTimeout(() => {
+				if (videoThumbs[key] === undefined) {
+					console.warn("Video thumbnail generation timeout");
+					cleanup();
+					resolve(undefined);
+				}
+			}, 15000); // 15 second timeout
+		});
+
+		videoThumbs[key] = dataUrl;
+
+		// Cache the generated thumbnail
+		if (dataUrl) await cacheThumbnail(`video-${key}`, dataUrl);
+	} catch (error) {
+		console.warn("Error in generateVideoThumb:", error);
+		videoThumbs[key] = undefined;
+	} finally {
+		generatingVideo[key] = false;
+	}
+	return videoThumbs[key];
+}
+
+async function generatePdfThumb() {
+	if (asset.extension !== "pdf") return;
+	const key = assetKeyValue(asset);
+	if (pdfThumbs[key] !== undefined) return pdfThumbs[key];
+
+	try {
+		generatingPdf[key] = true;
+
+		// Try to get from cache first
+		const cached = await getCachedThumbnail(`pdf-${key}`);
+		if (cached) {
+			pdfThumbs[key] = cached;
+			return cached;
+		}
+
+		// Check file size before attempting to load
+		// Limit to 50MB to prevent memory issues with large PDFs
+		const maxFileSizeBytes = 50 * 1024 * 1024;
+		if (asset.size && asset.size > maxFileSizeBytes) {
+			console.warn(
+				`PDF file too large (${Math.round(asset.size / 1024 / 1024)}MB). Skipping thumbnail generation.`,
+			);
+			pdfThumbs[key] = undefined;
+			return;
+		}
+
+		// Dynamically import pdfjs-dist to avoid bundling issues
+		const pdfjsLib = await import("pdfjs-dist");
+		// Set worker source from CDN to avoid loading local worker file
+		pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+
+		// Create a timeout promise to abort if loading takes too long
+		const timeoutPromise: Promise<never> = new Promise((_resolve, reject) => {
+			setTimeout(() => reject(new Error("PDF loading timeout")), 30000); // 30 second timeout
+		});
+
+		const pdf = await Promise.race([
+			pdfjsLib.getDocument({
+				url: asset.publicURL as string,
+				// Needed so non-embedded/base-14 fonts get correct glyph widths instead of garbled spacing.
+				cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/cmaps/`,
+				cMapPacked: true,
+				standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/standard_fonts/`,
+				// Fall back to the system's Arabic/CJK fonts when they aren't embedded in the PDF.
+				useSystemFonts: true,
+				// Draw embedded glyph outlines directly instead of via @font-face+fillText, which breaks Arabic letter joining for some font subsets.
+				disableFontFace: true,
+			}).promise as Promise<unknown>,
+			timeoutPromise,
+		]);
+
+		if (!pdf || !(pdf as any).numPages || (pdf as any).numPages === 0) {
+			pdfThumbs[key] = undefined;
+			return;
+		}
+
+		const page = await Promise.race([
+			(pdf as any).getPage(1) as Promise<unknown>,
+			timeoutPromise,
+		]);
+
+		// Create a smaller square thumbnail (200x200px)
+		const thumbnailSize = 200;
+		// Render at device pixel ratio so text, images and icons stay sharp instead of blurry.
+		const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+		const viewport = (page as any).getViewport({ scale: 1 });
+
+		// Calculate scale to cover the square (like CSS cover) - use MAX instead of MIN
+		const scale = Math.max(
+			thumbnailSize / viewport.width,
+			thumbnailSize / viewport.height,
+		);
+		const scaledViewport = (page as any).getViewport({ scale: scale * pixelRatio });
+
+		const canvas = document.createElement("canvas");
+		// Make the canvas square at full resolution, scaled back down via CSS
+		canvas.width = thumbnailSize * pixelRatio;
+		canvas.height = thumbnailSize * pixelRatio;
+		canvas.style.width = `${thumbnailSize}px`;
+		canvas.style.height = `${thumbnailSize}px`;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) {
+			pdfThumbs[key] = undefined;
+			return;
+		}
+
+		// Center the scaled PDF content in the square canvas (crop excess)
+		const offsetX = (canvas.width - scaledViewport.width) / 2;
+		const offsetY = (canvas.height - scaledViewport.height) / 2;
+		ctx.translate(offsetX, offsetY);
+
+		await Promise.race([
+			(page as any).render({
+				canvasContext: ctx,
+				viewport: scaledViewport,
+				canvas: canvas,
+			}).promise as Promise<unknown>,
+			timeoutPromise,
+		]);
+
+		const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
+		pdfThumbs[key] = dataUrl;
+
+		// Cache the generated thumbnail
+		if (dataUrl) await cacheThumbnail(`pdf-${key}`, dataUrl);
+	} catch (error) {
+		console.warn(
+			`Failed to generate PDF thumbnail for ${asset.publicURL}:`,
+			error,
+		);
+		pdfThumbs[key] = undefined;
+	} finally {
+		generatingPdf[key] = false;
+	}
+	return pdfThumbs[key];
+}
+
+async function generateDocThumb() {
+	if (!officeExtensions.includes(asset.extension)) return;
+	const key = assetKeyValue(asset);
+	if (docThumbs[key] !== undefined) return docThumbs[key];
+
+	try {
+		generatingDoc[key] = true;
+
+		// Try to get from cache first
+		const cached = await getCachedThumbnail(`doc-${key}`);
+		if (cached) {
+			docThumbs[key] = cached;
+			return cached;
+		}
+
+		const dataUrl = await generateDocumentThumbnail(asset);
+		docThumbs[key] = dataUrl;
+		return dataUrl;
+	} catch (error) {
+		console.warn("Error in generateDocThumb:", error);
+		docThumbs[key] = undefined;
+	} finally {
+		generatingDoc[key] = false;
+	}
+	return docThumbs[key];
+}
+
+// Intersection observer directive for lazy actions
+const vIntersect: Directive<HTMLElement, () => void> = {
+	mounted(el, binding) {
+		const callback = binding.value;
+		if (typeof callback !== "function") return;
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					callback();
+					observer.disconnect();
+					break;
+				}
+			}
+		});
+		observer.observe(el);
+		// store on element for potential cleanup
+		(el as any).__io__ = observer;
+	},
+	unmounted(el) {
+		const observer: IntersectionObserver | undefined = (el as any).__io__;
+		if (observer) observer.disconnect();
+		delete (el as any).__io__;
+	},
+};
+
+const renderToolbar: (
+	props: ImageRenderToolbarProps,
+	file?: Asset,
+) => VNodeChild = (
+	{
+		nodes: {
+			rotateCounterclockwise,
+			rotateClockwise,
+			resizeToOriginalSize,
+			zoomOut,
+			zoomIn,
+			download,
+			close,
+		},
+	},
+	file?: Asset,
+) => {
+		if (download.props && file?.publicURL)
+			download.props.onClick = (event: MouseEvent) => {
+				event?.preventDefault();
+				window.open(file.publicURL as string, "_blank");
+				close?.props?.onClick?.();
+			};
+		return [
+			file?.name
+				? h(
+					NTooltip,
+					{},
+					{
+						default: () => file.name,
+						trigger: () =>
+							h(
+								"i",
+								{ class: "n-base-icon" },
+								h(Icon, { name: "tabler:info-circle-filled" }),
+							),
+					},
+				)
+				: null,
+			rotateCounterclockwise,
+			rotateClockwise,
+			zoomIn,
+			zoomOut,
+			resizeToOriginalSize,
+			download,
+			close,
+		];
+	};
+
+const { currentPreviewAsset, openPreview } = useAssetPreview();
+const requiresPreviewDownloadShortcut = computed(
+	() => asset.extension === "pdf" || videoExtensions.includes(asset.extension) || officeExtensions.includes(asset.extension),
+);
+const isPreviewingCurrentAsset = computed(() => {
+	const previewAsset = currentPreviewAsset.value;
+	if (!previewAsset) return false;
+	return assetKeyValue(previewAsset) === assetKey.value;
+});
+const shouldListenForDownloadShortcut = computed(
+	() => requiresPreviewDownloadShortcut.value && isPreviewingCurrentAsset.value,
+);
+let removePreviewShortcut: (() => void) | undefined;
+
+function handleAssetClick(event: MouseEvent) {
+	if (event.defaultPrevented) return false;
+
+	if (disableDefaultClickAction) {
+		emit("click", event);
+		return false;
+	}
+
+	if (asset.type === "dir") {
+		emit("click", event);
+		return false;
+	}
+
+	if (event.ctrlKey || event.metaKey) {
+		event.preventDefault();
+		event.stopPropagation();
+		return window.open(asset.publicURL as string, "_blank");
+	}
+
+	if (imageExtensions.includes(asset.extension)) {
+		openPreview(asset, { assets: previewAssets });
+		return;
+	}
+
+	if (useSharedPreview || asset.extension === "pdf") {
+		openPreview(asset, { assets: previewAssets });
+		return;
+	}
+
+	if (videoExtensions.includes(asset.extension)) {
+		openPreview(asset, { assets: previewAssets });
+		return;
+	}
+
+	if (officeExtensions.includes(asset.extension)) {
+		openPreview(asset, { assets: previewAssets });
+		return;
+	}
+
+	emit("click", event);
+
+	return false;
+}
+
+async function triggerAssetDownload(file: Asset = asset) {
+	if (!file.publicURL || typeof window === "undefined") return;
+	const link = document.createElement("a");
+	const defaultName = (() => {
+		if (file.name) return file.name;
+		try {
+			const url = new URL(file.publicURL);
+			const last = url.pathname.split("/").pop();
+			return last || "asset";
+		} catch {
+			return "asset";
+		}
+	})();
+	link.download = defaultName;
+	document.body.appendChild(link);
+
+	const downloadByOpening = () => {
+		const newTab = window.open(file.publicURL as string, "_blank", "noopener");
+		if (newTab) {
+			// Give the browser a moment to trigger the download before closing the tab
+			window.setTimeout(() => {
+				try {
+					newTab.close();
+				} catch {
+					/* Ignore cross-origin close errors */
+				}
+			}, 2000);
+		}
+	};
+
+	try {
+		link.href = file.publicURL as string;
+		link.rel = "noopener";
+		link.click();
+	} catch (error) {
+		console.warn("Falling back to opening asset in new tab", error);
+		downloadByOpening();
+	} finally {
+		document.body.removeChild(link);
+	}
+}
+
+function registerPreviewShortcut() {
+	if (!import.meta.client || removePreviewShortcut) return;
+	const handler = (event: KeyboardEvent) => {
+		if (!(event.metaKey || event.ctrlKey)) return;
+		if (event.key?.toLowerCase() !== "s") return;
+		event.preventDefault();
+		void triggerAssetDownload(currentPreviewAsset.value ?? asset);
+	};
+	window.addEventListener("keydown", handler);
+	removePreviewShortcut = () => window.removeEventListener("keydown", handler);
+}
+
+function cleanupPreviewShortcut() {
+	if (!removePreviewShortcut) return;
+	removePreviewShortcut();
+	removePreviewShortcut = undefined;
+}
+
+watch(
+	shouldListenForDownloadShortcut,
+	(shouldListen) => {
+		if (!import.meta.client) return;
+		if (shouldListen) {
+			registerPreviewShortcut();
+		} else {
+			cleanupPreviewShortcut();
+		}
+	},
+	{ immediate: true },
+);
+
+onBeforeUnmount(() => {
+	cleanupPreviewShortcut();
+});
+</script>