@maas/payload-plugin-media-cloud 0.0.9 → 0.0.11

package/dist/components/upload-manager/upload-manager.mjs

@@ -0,0 +1,273 @@
+'use client';
+
+import { MediaCloudErrors } from "../../types/errors.mjs";
+import { useErrorHandler } from "../../hooks/useErrorHandler.mjs";
+import { useMediaCloudEmitter } from "../../hooks/useMediaCloudEmitter.mjs";
+import { createContext, use, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@payloadcms/ui";
+import "./upload-manager.css";
+
+//#region src/components/upload-manager/upload-manager.tsx
+const UploadManagerContext = createContext({
+	showUploadManager: false,
+	activeUploads: [],
+	addUpload: () => {},
+	updateUpload: () => {}
+});
+/**
+* Provider component for upload management context
+* @param args - Arguments including children to wrap
+* @returns JSX element providing upload management context
+*/
+function UploadManagerProvider(args) {
+	const { children } = args;
+	const [showUploadManager, setShowUploadManager] = useState(false);
+	const [activeUploads, setActiveUploads] = useState([]);
+	const [activeTab, setActiveTab] = useState("uploading");
+	const emitter = useMediaCloudEmitter();
+	const activeTabRef = useRef(activeTab);
+	const activeUploadsRef = useRef(activeUploads);
+	const { logError } = useErrorHandler();
+	useEffect(() => {
+		activeTabRef.current = activeTab;
+	}, [activeTab]);
+	useEffect(() => {
+		activeUploadsRef.current = activeUploads;
+	}, [activeUploads]);
+	const checkAutoSwitchToCompleted = useCallback((uploads) => {
+		const hasActiveUploads = uploads.some((upload) => upload.status === "uploading");
+		const hasProcessingUploads = uploads.some((upload) => upload.status === "processing");
+		const hasCompletedUploads = uploads.some((upload) => upload.status === "completed");
+		if (!hasActiveUploads && !hasProcessingUploads && hasCompletedUploads && activeTabRef.current !== "completed") setActiveTab("completed");
+	}, []);
+	useEffect(() => {
+		const pollingUploads = activeUploads.filter((upload) => upload.polling && upload.pollingUrl);
+		if (pollingUploads.length === 0) return;
+		const pollAssets = async () => {
+			for (const pollingUpload of pollingUploads) try {
+				const response = await fetch(`${pollingUpload.pollingUrl}?upload_id=${pollingUpload.uploadId}`, {
+					method: "GET",
+					credentials: "include"
+				});
+				if (response.ok) {
+					if ((await response.json()).ready) setActiveUploads((prev) => {
+						const updatedUploads = prev.map((upload) => upload.uploadId === pollingUpload.uploadId ? {
+							...upload,
+							polling: false,
+							progress: 100,
+							status: "completed"
+						} : upload);
+						setTimeout(() => checkAutoSwitchToCompleted(updatedUploads), 0);
+						return updatedUploads;
+					});
+				}
+			} catch (_error) {
+				logError(MediaCloudErrors.UPLOAD_POLLING_ERROR);
+			}
+		};
+		const intervalId = setInterval(pollAssets, 2e3);
+		return () => clearInterval(intervalId);
+	}, [
+		activeUploads,
+		checkAutoSwitchToCompleted,
+		logError
+	]);
+	/**
+	* Handles the 'uploadError' event
+	* @param event - The upload error event
+	*/
+	const onUploadError = useCallback((event) => {
+		const { filename, error } = event;
+		logError(MediaCloudErrors.TUS_UPLOAD_ERROR);
+		setActiveUploads((prev) => prev.map((upload) => upload.filename === filename ? {
+			...upload,
+			error,
+			status: "completed"
+		} : upload));
+	}, [logError]);
+	/**
+	* Handles the 'addUpload' event
+	* @param event - The add upload event
+	*/
+	const onAddUpload = useCallback((event) => {
+		const upload = {
+			filename: event.filename,
+			uploadId: event.uploadId,
+			progress: 0,
+			polling: event.polling,
+			pollingUrl: event.pollingUrl,
+			status: "uploading"
+		};
+		setActiveUploads((prev) => [...prev, upload]);
+		setShowUploadManager(true);
+		if (activeTabRef.current !== "uploading") setActiveTab("uploading");
+	}, []);
+	/**
+	* Handles the 'updateUpload' event
+	* @param event - The update upload event
+	*/
+	const onUpdateUpload = useCallback((event) => {
+		const { filename, progress, polling } = event;
+		setActiveUploads((prev) => prev.map((upload) => upload.filename === filename ? {
+			...upload,
+			progress,
+			...polling !== void 0 && { polling },
+			status: polling ? "processing" : progress >= 100 ? "completed" : "uploading"
+		} : upload));
+	}, []);
+	/**
+	* Handles the 'removeUpload' event
+	* @param event - The remove upload event
+	*/
+	const onRemoveUpload = useCallback((event) => {
+		setActiveUploads((prev) => prev.filter((upload) => upload.filename !== event.filename));
+	}, []);
+	/**
+	* Handles the 'uploadComplete' event
+	* @param event - The upload completed event
+	*/
+	const onUploadComplete = useCallback((event) => {
+		if (activeUploadsRef.current.find((upload) => upload.filename === event.filename)?.pollingUrl) setActiveUploads((prev) => prev.map((upload) => upload.filename === event.filename ? {
+			...upload,
+			polling: true,
+			progress: 100,
+			status: "processing"
+		} : upload));
+		else setActiveUploads((prev) => {
+			const updatedUploads = prev.map((upload) => upload.filename === event.filename ? {
+				...upload,
+				progress: 100,
+				status: "completed"
+			} : upload);
+			setTimeout(() => checkAutoSwitchToCompleted(updatedUploads), 0);
+			return updatedUploads;
+		});
+	}, [checkAutoSwitchToCompleted]);
+	useEffect(() => {
+		emitter.on("addUpload", onAddUpload);
+		emitter.on("updateUpload", onUpdateUpload);
+		emitter.on("removeUpload", onRemoveUpload);
+		emitter.on("uploadError", onUploadError);
+		emitter.on("uploadComplete", onUploadComplete);
+		return () => {
+			emitter.off("addUpload", onAddUpload);
+			emitter.off("updateUpload", onUpdateUpload);
+			emitter.off("removeUpload", onRemoveUpload);
+			emitter.off("uploadError", onUploadError);
+			emitter.off("uploadComplete", onUploadComplete);
+		};
+	}, [
+		emitter,
+		onAddUpload,
+		onUpdateUpload,
+		onRemoveUpload,
+		onUploadError,
+		onUploadComplete
+	]);
+	/**
+	* Adds a new upload to the manager
+	* @param args - The upload arguments
+	*/
+	const addUpload = useCallback((args$1) => {
+		const { filename, polling = false, pollingUrl } = args$1;
+		const upload = {
+			filename,
+			progress: 0,
+			polling,
+			pollingUrl,
+			status: "uploading"
+		};
+		setActiveUploads((prev) => [...prev, upload]);
+	}, []);
+	/**
+	* Updates an existing upload in the manager
+	* @param args - The update arguments
+	*/
+	const updateUpload = useCallback((args$1) => {
+		const { filename, progress, polling } = args$1;
+		setActiveUploads((prev) => prev.map((upload) => upload.filename === filename ? {
+			...upload,
+			progress,
+			...polling !== void 0 && { polling },
+			status: polling ? "processing" : progress >= 100 ? "completed" : "uploading"
+		} : upload));
+	}, []);
+	const uploadingFiles = activeUploads.filter((upload) => upload.status === "uploading");
+	const processingFiles = activeUploads.filter((upload) => upload.status === "processing");
+	const completedFiles = activeUploads.filter((upload) => upload.status === "completed");
+	/**
+	* Renders the upload list
+	* @param args - The render arguments
+	* @returns JSX element representing the upload list
+	*/
+	function renderUploadList(args$1) {
+		const { uploads } = args$1;
+		return <ul>
+        {uploads.map((upload) => <li key={upload.filename} data-status={upload.status}>
+            <div className="upload-info">
+              <span className="upload-filename">{upload.filename}</span>
+              <span className="upload-meta">
+                {upload.status === "processing" ? "Processing..." : upload.progress < 100 ? `${Math.ceil(upload.progress)}%` : "Completed"}
+              </span>
+            </div>
+            <div className="upload-progress-bar" style={{ ["--progress"]: upload.status === "processing" ? "1" : `${upload.progress / 100}` }}>
+              <div data-active={upload.status === "processing"} className="upload-progress" />
+            </div>
+          </li>)}
+      </ul>;
+	}
+	/**
+	* Closes the upload manager
+	*/
+	function closeUploadManager() {
+		if (!activeUploads.some((upload) => upload.polling)) {
+			setActiveUploads([]);
+			setShowUploadManager(false);
+		}
+	}
+	const value = {
+		activeUploads,
+		addUpload,
+		updateUpload
+	};
+	return <UploadManagerContext.Provider value={value}>
+      {showUploadManager && <div className="upload-manager">
+          <div className="upload-manager__header">
+            <h4>Uploads</h4>
+            <Button buttonStyle="icon-label" icon="x" margin={false} onClick={closeUploadManager} />
+          </div>
+
+          <div className="upload-manager__tabs">
+            <button data-active={activeTab === "uploading"} className="upload-tab" onClick={() => setActiveTab("uploading")}>
+              Uploading ({uploadingFiles.length})
+            </button>
+            <button data-active={activeTab === "processing"} className="upload-tab" onClick={() => setActiveTab("processing")}>
+              Processing ({processingFiles.length})
+            </button>
+            <button data-active={activeTab === "completed"} className="upload-tab" onClick={() => setActiveTab("completed")}>
+              Completed ({completedFiles.length})
+            </button>
+          </div>
+
+          <div className="upload-manager__content">
+            {activeTab === "uploading" && uploadingFiles.length > 0 && <div>{renderUploadList({ uploads: uploadingFiles })}</div>}
+            {activeTab === "processing" && processingFiles.length > 0 && <div>{renderUploadList({ uploads: processingFiles })}</div>}
+            {activeTab === "completed" && completedFiles.length > 0 && <div>
+                {renderUploadList({ uploads: completedFiles })}
+                <div className="upload-manager__footer">
+                  <Button buttonStyle="subtle" size="small" margin={false} onClick={() => window?.location?.reload()}>
+                    Refresh
+                  </Button>
+                </div>
+              </div>}
+            {(activeTab === "uploading" && uploadingFiles.length === 0 || activeTab === "processing" && processingFiles.length === 0 || activeTab === "completed" && completedFiles.length === 0) && <p className="upload-empty-state">No {activeTab} files</p>}
+          </div>
+        </div>}
+      {children}
+    </UploadManagerContext.Provider>;
+}
+const useUploadManagerContext = () => use(UploadManagerContext);
+
+//#endregion
+export { UploadManagerProvider, useUploadManagerContext };
+//# sourceMappingURL=upload-manager.mjs.map

package/dist/components/upload-manager/upload-manager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-manager.mjs","names":["upload: Upload","args","value: UploadManagerContextType"],"sources":["../../../src/components/upload-manager/upload-manager.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  use,\n  useState,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport { Button } from '@payloadcms/ui'\n\nimport { useMediaCloudEmitter } from '../../hooks/useMediaCloudEmitter'\nimport { useErrorHandler } from '../../hooks/useErrorHandler'\nimport { MediaCloudErrors } from '../../types/errors'\n\nimport type { MediaCloudEmitterEvents } from '../../types'\nimport type React from 'react'\n\nimport './upload-manager.css'\n\ninterface Upload {\n  filename: string\n  progress: number\n  uploadId?: string\n  error?: string\n  polling?: boolean\n  pollingUrl?: string\n  status?: 'uploading' | 'processing' | 'completed'\n}\n\ninterface UploadManagerContextType {\n  showUploadManager?: boolean\n  activeUploads: Upload[]\n  addUpload: (args: MediaCloudEmitterEvents['addUpload']) => void\n  updateUpload: (args: MediaCloudEmitterEvents['updateUpload']) => void\n}\n\ninterface UploadManagerProviderArgs {\n  children: React.ReactNode\n}\n\ninterface RenderUploadListArgs {\n  uploads: Upload[]\n}\n\nconst UploadManagerContext = createContext<UploadManagerContextType>({\n  showUploadManager: false,\n  activeUploads: [],\n  addUpload: () => {},\n  updateUpload: () => {},\n})\n\n/**\n * Provider component for upload management context\n * @param args - Arguments including children to wrap\n * @returns JSX element providing upload management context\n */\nexport function UploadManagerProvider(args: UploadManagerProviderArgs) {\n  const { children } = args\n  const [showUploadManager, setShowUploadManager] = useState(false)\n  const [activeUploads, setActiveUploads] = useState<Upload[]>([])\n  const [activeTab, setActiveTab] = useState<\n    'uploading' | 'processing' | 'completed'\n  >('uploading')\n\n  const emitter = useMediaCloudEmitter()\n  const activeTabRef = useRef(activeTab)\n  const activeUploadsRef = useRef(activeUploads)\n\n  const { logError } = useErrorHandler()\n\n  // Keep refs in sync with state\n  useEffect(() => {\n    activeTabRef.current = activeTab\n  }, [activeTab])\n\n  useEffect(() => {\n    activeUploadsRef.current = activeUploads\n  }, [activeUploads])\n\n  // Helper function to check if we should auto-switch to completed tab\n  const checkAutoSwitchToCompleted = useCallback((uploads: Upload[]) => {\n    const hasActiveUploads = uploads.some(\n      (upload) => upload.status === 'uploading'\n    )\n    const hasProcessingUploads = uploads.some(\n      (upload) => upload.status === 'processing'\n    )\n    const hasCompletedUploads = uploads.some(\n      (upload) => upload.status === 'completed'\n    )\n\n    // Auto-switch to completed tab if no uploading/processing uploads remain\n    if (\n      !hasActiveUploads &&\n      !hasProcessingUploads &&\n      hasCompletedUploads &&\n      activeTabRef.current !== 'completed'\n    ) {\n      setActiveTab('completed')\n    }\n  }, [])\n\n  // Polling logic\n  useEffect(() => {\n    const pollingUploads = activeUploads.filter(\n      (upload) => upload.polling && upload.pollingUrl\n    )\n\n    if (pollingUploads.length === 0) {\n      return\n    }\n\n    const pollAssets = async () => {\n      for (const pollingUpload of pollingUploads) {\n        try {\n          const response = await fetch(\n            `${pollingUpload.pollingUrl}?upload_id=${pollingUpload.uploadId}`,\n            {\n              method: 'GET',\n              credentials: 'include',\n            }\n          )\n\n          if (response.ok) {\n            const data = await response.json()\n\n            if (data.ready) {\n              // Asset is ready, stop polling for this upload\n              setActiveUploads((prev) => {\n                const updatedUploads = prev.map((upload) =>\n                  upload.uploadId === pollingUpload.uploadId\n                    ? {\n                        ...upload,\n                        polling: false,\n                        progress: 100,\n                        status: 'completed' as const,\n                      }\n                    : upload\n                )\n\n                // Check if we should auto-switch to completed tab\n                setTimeout(() => checkAutoSwitchToCompleted(updatedUploads), 0)\n\n                return updatedUploads\n              })\n            }\n          }\n        } catch (_error) {\n          logError(MediaCloudErrors.UPLOAD_POLLING_ERROR)\n        }\n      }\n    }\n\n    const intervalId = setInterval(pollAssets, 2000) // Poll every 2 seconds\n\n    return () => clearInterval(intervalId)\n  }, [activeUploads, checkAutoSwitchToCompleted, logError])\n\n  /**\n   * Handles the 'uploadError' event\n   * @param event - The upload error event\n   */\n  const onUploadError = useCallback(\n    (event: MediaCloudEmitterEvents['uploadError']) => {\n      const { filename, error } = event\n\n      logError(MediaCloudErrors.TUS_UPLOAD_ERROR)\n\n      setActiveUploads((prev) =>\n        prev.map((upload) =>\n          upload.filename === filename\n            ? { ...upload, error: error, status: 'completed' }\n            : upload\n        )\n      )\n    },\n    [logError]\n  )\n\n  /**\n   * Handles the 'addUpload' event\n   * @param event - The add upload event\n   */\n  const onAddUpload = useCallback(\n    (event: MediaCloudEmitterEvents['addUpload']) => {\n      const upload: Upload = {\n        filename: event.filename,\n        uploadId: event.uploadId,\n        progress: 0,\n        polling: event.polling,\n        pollingUrl: event.pollingUrl,\n        status: 'uploading',\n      }\n\n      setActiveUploads((prev) => [...prev, upload])\n\n      // Show the upload manager when new upload starts\n      setShowUploadManager(true)\n\n      // Auto-switch to uploading tab when new upload starts\n      if (activeTabRef.current !== 'uploading') {\n        setActiveTab('uploading')\n      }\n    },\n    []\n  )\n\n  /**\n   * Handles the 'updateUpload' event\n   * @param event - The update upload event\n   */\n  const onUpdateUpload = useCallback(\n    (event: MediaCloudEmitterEvents['updateUpload']) => {\n      const { filename, progress, polling } = event\n      setActiveUploads((prev) =>\n        prev.map((upload) =>\n          upload.filename === filename\n            ? {\n                ...upload,\n                progress,\n                ...(polling !== undefined && { polling }),\n                status: polling\n                  ? 'processing'\n                  : progress >= 100\n                    ? 'completed'\n                    : 'uploading',\n              }\n            : upload\n        )\n      )\n    },\n    []\n  )\n\n  /**\n   * Handles the 'removeUpload' event\n   * @param event - The remove upload event\n   */\n  const onRemoveUpload = useCallback(\n    (event: MediaCloudEmitterEvents['removeUpload']) => {\n      setActiveUploads((prev) =>\n        prev.filter((upload) => upload.filename !== event.filename)\n      )\n    },\n    []\n  )\n\n  /**\n   * Handles the 'uploadComplete' event\n   * @param event - The upload completed event\n   */\n  const onUploadComplete = useCallback(\n    (event: MediaCloudEmitterEvents['uploadComplete']) => {\n      // Check if this upload has a polling URL (Mux upload)\n      const upload = activeUploadsRef.current.find(\n        (upload) => upload.filename === event.filename\n      )\n      if (upload?.pollingUrl) {\n        setActiveUploads((prev) =>\n          prev.map((upload) =>\n            upload.filename === event.filename\n              ? {\n                  ...upload,\n                  polling: true,\n                  progress: 100,\n                  status: 'processing' as const,\n                }\n              : upload\n          )\n        )\n      } else {\n        // Regular upload completion\n        setActiveUploads((prev) => {\n          const updatedUploads = prev.map((upload) =>\n            upload.filename === event.filename\n              ? { ...upload, progress: 100, status: 'completed' as const }\n              : upload\n          )\n\n          // Check if we should auto-switch to completed tab\n          setTimeout(() => checkAutoSwitchToCompleted(updatedUploads), 0)\n\n          return updatedUploads\n        })\n      }\n    },\n    [checkAutoSwitchToCompleted]\n  )\n\n  useEffect(() => {\n    emitter.on('addUpload', onAddUpload)\n    emitter.on('updateUpload', onUpdateUpload)\n    emitter.on('removeUpload', onRemoveUpload)\n    emitter.on('uploadError', onUploadError)\n    emitter.on('uploadComplete', onUploadComplete)\n\n    return () => {\n      emitter.off('addUpload', onAddUpload)\n      emitter.off('updateUpload', onUpdateUpload)\n      emitter.off('removeUpload', onRemoveUpload)\n      emitter.off('uploadError', onUploadError)\n      emitter.off('uploadComplete', onUploadComplete)\n    }\n  }, [\n    emitter,\n    onAddUpload,\n    onUpdateUpload,\n    onRemoveUpload,\n    onUploadError,\n    onUploadComplete,\n  ])\n\n  /**\n   * Adds a new upload to the manager\n   * @param args - The upload arguments\n   */\n  const addUpload = useCallback(\n    (args: MediaCloudEmitterEvents['addUpload']) => {\n      const { filename, polling = false, pollingUrl } = args\n      const upload: Upload = {\n        filename,\n        progress: 0,\n        polling,\n        pollingUrl,\n        status: 'uploading',\n      }\n\n      setActiveUploads((prev) => [...prev, upload])\n    },\n    []\n  )\n\n  /**\n   * Updates an existing upload in the manager\n   * @param args - The update arguments\n   */\n  const updateUpload = useCallback(\n    (args: MediaCloudEmitterEvents['updateUpload']) => {\n      const { filename, progress, polling } = args\n      setActiveUploads((prev) =>\n        prev.map((upload) =>\n          upload.filename === filename\n            ? {\n                ...upload,\n                progress,\n                ...(polling !== undefined && { polling }),\n                status: polling\n                  ? 'processing'\n                  : progress >= 100\n                    ? 'completed'\n                    : 'uploading',\n              }\n            : upload\n        )\n      )\n    },\n    []\n  )\n\n  // Filter uploads by status\n  const uploadingFiles = activeUploads.filter(\n    (upload) => upload.status === 'uploading'\n  )\n  const processingFiles = activeUploads.filter(\n    (upload) => upload.status === 'processing'\n  )\n  const completedFiles = activeUploads.filter(\n    (upload) => upload.status === 'completed'\n  )\n\n  /**\n   * Renders the upload list\n   * @param args - The render arguments\n   * @returns JSX element representing the upload list\n   */\n  function renderUploadList(args: RenderUploadListArgs) {\n    const { uploads } = args\n    return (\n      <ul>\n        {uploads.map((upload) => (\n          <li key={upload.filename} data-status={upload.status}>\n            <div className=\"upload-info\">\n              <span className=\"upload-filename\">{upload.filename}</span>\n              <span className=\"upload-meta\">\n                {upload.status === 'processing'\n                  ? 'Processing...'\n                  : upload.progress < 100\n                    ? `${Math.ceil(upload.progress)}%`\n                    : 'Completed'}\n              </span>\n            </div>\n            <div\n              className=\"upload-progress-bar\"\n              style={\n                {\n                  ['--progress']:\n                    upload.status === 'processing'\n                      ? '1'\n                      : `${upload.progress / 100}`,\n                } as React.CSSProperties\n              }\n            >\n              <div\n                data-active={upload.status === 'processing'}\n                className=\"upload-progress\"\n              />\n            </div>\n          </li>\n        ))}\n      </ul>\n    )\n  }\n\n  /**\n   * Closes the upload manager\n   */\n  function closeUploadManager() {\n    // Only allow closing if no uploads are actively polling\n    const hasPollingUploads = activeUploads.some((upload) => upload.polling)\n    if (!hasPollingUploads) {\n      setActiveUploads([])\n      setShowUploadManager(false)\n    }\n  }\n\n  const value: UploadManagerContextType = {\n    activeUploads,\n    addUpload,\n    updateUpload,\n  }\n\n  return (\n    <UploadManagerContext.Provider value={value}>\n      {showUploadManager && (\n        <div className=\"upload-manager\">\n          <div className=\"upload-manager__header\">\n            <h4>Uploads</h4>\n            <Button\n              buttonStyle=\"icon-label\"\n              icon=\"x\"\n              margin={false}\n              onClick={closeUploadManager}\n            />\n          </div>\n\n          <div className=\"upload-manager__tabs\">\n            <button\n              data-active={activeTab === 'uploading'}\n              className=\"upload-tab\"\n              onClick={() => setActiveTab('uploading')}\n            >\n              Uploading ({uploadingFiles.length})\n            </button>\n            <button\n              data-active={activeTab === 'processing'}\n              className=\"upload-tab\"\n              onClick={() => setActiveTab('processing')}\n            >\n              Processing ({processingFiles.length})\n            </button>\n            <button\n              data-active={activeTab === 'completed'}\n              className=\"upload-tab\"\n              onClick={() => setActiveTab('completed')}\n            >\n              Completed ({completedFiles.length})\n            </button>\n          </div>\n\n          <div className=\"upload-manager__content\">\n            {activeTab === 'uploading' && uploadingFiles.length > 0 && (\n              <div>{renderUploadList({ uploads: uploadingFiles })}</div>\n            )}\n            {activeTab === 'processing' && processingFiles.length > 0 && (\n              <div>{renderUploadList({ uploads: processingFiles })}</div>\n            )}\n            {activeTab === 'completed' && completedFiles.length > 0 && (\n              <div>\n                {renderUploadList({ uploads: completedFiles })}\n                <div className=\"upload-manager__footer\">\n                  <Button\n                    buttonStyle=\"subtle\"\n                    size=\"small\"\n                    margin={false}\n                    onClick={() => window?.location?.reload()}\n                  >\n                    Refresh\n                  </Button>\n                </div>\n              </div>\n            )}\n            {((activeTab === 'uploading' && uploadingFiles.length === 0) ||\n              (activeTab === 'processing' && processingFiles.length === 0) ||\n              (activeTab === 'completed' && completedFiles.length === 0)) && (\n              <p className=\"upload-empty-state\">No {activeTab} files</p>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n    </UploadManagerContext.Provider>\n  )\n}\n\nexport const useUploadManagerContext = () => use(UploadManagerContext)\n"],"mappings":"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"}

package/dist/endpoints/{muxAssetHandler.d.ts → muxAssetHandler.d.mts}

@@ -1,5 +1,5 @@
-import { Mux as Mux$1 } from "@mux/mux-node";
 import { PayloadHandler } from "payload";
+import { Mux as Mux$1 } from "@mux/mux-node";
 
 //#region src/endpoints/muxAssetHandler.d.ts
 interface GetMuxAssetHandlerArgs {
@@ -8,4 +8,4 @@ interface GetMuxAssetHandlerArgs {
 declare function getMuxAssetHandler(args: GetMuxAssetHandlerArgs): PayloadHandler;
 //#endregion
 export { getMuxAssetHandler };
-//# sourceMappingURL=muxAssetHandler.d.ts.map
+//# sourceMappingURL=muxAssetHandler.d.mts.map

package/dist/endpoints/{muxAssetHandler.js → muxAssetHandler.mjs}

@@ -7,11 +7,10 @@ function getMuxAssetHandler(args) {
 			const { query } = req;
 			const uploadId = query.upload_id;
 			if (!uploadId) return Response.json({ message: "Upload ID is required" }, { status: 400 });
-			const assets = await mux.video.assets.list({
+			const asset = (await mux.video.assets.list({
 				limit: 1,
 				upload_id: uploadId
-			});
-			const asset = assets?.data[0];
+			}))?.data[0];
 			if (!asset) return Response.json({ message: "No asset found for the given upload ID" }, { status: 404 });
 			if (asset.status === "ready") {
 				const { payload } = req;
@@ -22,12 +21,14 @@ function getMuxAssetHandler(args) {
 					pagination: false
 				});
 				if (docs.length > 0) {
-					if (asset?.status === "ready") {
-						const { id } = docs[0];
-						await payload.update({
-							collection: "media",
-							id,
-							data: { mux: {
+					const { id } = docs[0];
+					const width = Array.from(asset.tracks ?? []).reduce((max, track) => track.type === "video" && track.max_width ? Math.max(max, track.max_width) : max, 0);
+					const height = Array.from(asset.tracks ?? []).reduce((max, track) => track.type === "video" && track.max_height ? Math.max(max, track.max_height) : max, 0);
+					await payload.update({
+						collection: "media",
+						id,
+						data: {
+							mux: {
 								status: asset.status,
 								assetId: asset.id,
 								playbackId: asset.playback_ids?.[0]?.id,
@@ -37,9 +38,11 @@ function getMuxAssetHandler(args) {
 								maxResolutionTier: asset.max_resolution_tier,
 								videoQuality: asset.video_quality,
 								staticRenditions: asset.static_renditions
-							} }
-						});
-					}
+							},
+							width,
+							height
+						}
+					});
 				}
 				return Response.json({
 					ready: asset.status === "ready",
@@ -57,4 +60,4 @@ function getMuxAssetHandler(args) {
 
 //#endregion
 export { getMuxAssetHandler };
-//# sourceMappingURL=muxAssetHandler.js.map
+//# sourceMappingURL=muxAssetHandler.mjs.map

package/dist/endpoints/muxAssetHandler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxAssetHandler.mjs","names":[],"sources":["../../src/endpoints/muxAssetHandler.ts"],"sourcesContent":["import type { Mux } from '@mux/mux-node'\nimport type { PayloadHandler } from 'payload'\nimport type { StaticRenditions } from '../types'\n\ninterface GetMuxAssetHandlerArgs {\n  getMuxClient: () => Mux\n}\n\nexport function getMuxAssetHandler(\n  args: GetMuxAssetHandlerArgs\n): PayloadHandler {\n  const { getMuxClient } = args\n\n  return async (req) => {\n    try {\n      const mux = getMuxClient()\n      const { query } = req\n\n      const uploadId = query.upload_id as string\n\n      if (!uploadId) {\n        return Response.json(\n          { message: 'Upload ID is required' },\n          { status: 400 }\n        )\n      }\n\n      const assets = await mux.video.assets.list({\n        limit: 1,\n        upload_id: uploadId,\n      })\n\n      const asset = assets?.data[0]\n\n      if (!asset) {\n        return Response.json(\n          { message: 'No asset found for the given upload ID' },\n          { status: 404 }\n        )\n      }\n\n      if (asset.status === 'ready') {\n        const { payload } = req\n\n        const { docs } = await payload.find({\n          collection: 'media',\n          where: {\n            'mux.uploadId': {\n              equals: uploadId,\n            },\n          },\n          limit: 1,\n          pagination: false,\n        })\n\n        if (docs.length > 0) {\n          const { id } = docs[0]\n\n          const width = Array.from(asset.tracks ?? []).reduce(\n            (max, track) =>\n              track.type === 'video' && track.max_width\n                ? Math.max(max, track.max_width)\n                : max,\n            0\n          )\n\n          const height = Array.from(asset.tracks ?? []).reduce(\n            (max, track) =>\n              track.type === 'video' && track.max_height\n                ? Math.max(max, track.max_height)\n                : max,\n            0\n          )\n\n          await payload.update({\n            collection: 'media',\n            id,\n            data: {\n              mux: {\n                status: asset.status,\n                assetId: asset.id,\n                playbackId: asset.playback_ids?.[0]?.id,\n                aspectRatio: asset.aspect_ratio,\n                duration: asset.duration,\n                tracks: asset.tracks,\n                maxResolutionTier: asset.max_resolution_tier,\n                videoQuality: asset.video_quality,\n                staticRenditions: asset.static_renditions as StaticRenditions,\n              },\n              width,\n              height,\n            },\n          })\n        }\n\n        return Response.json(\n          {\n            ready: asset.status === 'ready',\n            asset,\n          },\n          { status: 200 }\n        )\n      } else {\n        return Response.json(\n          {\n            ready: false,\n            asset,\n          },\n          { status: 200 }\n        )\n      }\n    } catch (_error) {\n      return Response.json(\n        { message: 'Failed to fetch Mux asset' },\n        { status: 500 }\n      )\n    }\n  }\n}\n"],"mappings":";AAQA,SAAgB,mBACd,MACgB;CAChB,MAAM,EAAE,iBAAiB;AAEzB,QAAO,OAAO,QAAQ;AACpB,MAAI;GACF,MAAM,MAAM,cAAc;GAC1B,MAAM,EAAE,UAAU;GAElB,MAAM,WAAW,MAAM;AAEvB,OAAI,CAAC,SACH,QAAO,SAAS,KACd,EAAE,SAAS,yBAAyB,EACpC,EAAE,QAAQ,KAAK,CAChB;GAQH,MAAM,SALS,MAAM,IAAI,MAAM,OAAO,KAAK;IACzC,OAAO;IACP,WAAW;IACZ,CAAC,GAEoB,KAAK;AAE3B,OAAI,CAAC,MACH,QAAO,SAAS,KACd,EAAE,SAAS,0CAA0C,EACrD,EAAE,QAAQ,KAAK,CAChB;AAGH,OAAI,MAAM,WAAW,SAAS;IAC5B,MAAM,EAAE,YAAY;IAEpB,MAAM,EAAE,SAAS,MAAM,QAAQ,KAAK;KAClC,YAAY;KACZ,OAAO,EACL,gBAAgB,EACd,QAAQ,UACT,EACF;KACD,OAAO;KACP,YAAY;KACb,CAAC;AAEF,QAAI,KAAK,SAAS,GAAG;KACnB,MAAM,EAAE,OAAO,KAAK;KAEpB,MAAM,QAAQ,MAAM,KAAK,MAAM,UAAU,EAAE,CAAC,CAAC,QAC1C,KAAK,UACJ,MAAM,SAAS,WAAW,MAAM,YAC5B,KAAK,IAAI,KAAK,MAAM,UAAU,GAC9B,KACN,EACD;KAED,MAAM,SAAS,MAAM,KAAK,MAAM,UAAU,EAAE,CAAC,CAAC,QAC3C,KAAK,UACJ,MAAM,SAAS,WAAW,MAAM,aAC5B,KAAK,IAAI,KAAK,MAAM,WAAW,GAC/B,KACN,EACD;AAED,WAAM,QAAQ,OAAO;MACnB,YAAY;MACZ;MACA,MAAM;OACJ,KAAK;QACH,QAAQ,MAAM;QACd,SAAS,MAAM;QACf,YAAY,MAAM,eAAe,IAAI;QACrC,aAAa,MAAM;QACnB,UAAU,MAAM;QAChB,QAAQ,MAAM;QACd,mBAAmB,MAAM;QACzB,cAAc,MAAM;QACpB,kBAAkB,MAAM;QACzB;OACD;OACA;OACD;MACF,CAAC;;AAGJ,WAAO,SAAS,KACd;KACE,OAAO,MAAM,WAAW;KACxB;KACD,EACD,EAAE,QAAQ,KAAK,CAChB;SAED,QAAO,SAAS,KACd;IACE,OAAO;IACP;IACD,EACD,EAAE,QAAQ,KAAK,CAChB;WAEI,QAAQ;AACf,UAAO,SAAS,KACd,EAAE,SAAS,6BAA6B,EACxC,EAAE,QAAQ,KAAK,CAChB"}

package/dist/endpoints/{muxCreateUploadHandler.d.ts → muxCreateUploadHandler.d.mts}

@@ -1,6 +1,6 @@
-import { MediaCloudPluginOptions } from "../types/index.js";
-import { Mux as Mux$1 } from "@mux/mux-node";
+import { MediaCloudPluginOptions } from "../types/index.mjs";
 import { PayloadHandler } from "payload";
+import { Mux as Mux$1 } from "@mux/mux-node";
 
 //#region src/endpoints/muxCreateUploadHandler.d.ts
 interface GetMuxCreateUploadHandlerArgs {
@@ -10,4 +10,4 @@ interface GetMuxCreateUploadHandlerArgs {
 declare function getMuxCreateUploadHandler(args: GetMuxCreateUploadHandlerArgs): PayloadHandler;
 //#endregion
 export { getMuxCreateUploadHandler };
-//# sourceMappingURL=muxCreateUploadHandler.d.ts.map
+//# sourceMappingURL=muxCreateUploadHandler.d.mts.map

package/dist/endpoints/{muxCreateUploadHandler.js → muxCreateUploadHandler.mjs}

@@ -1,5 +1,5 @@
-import { MediaCloudErrors } from "../types/errors.js";
-import { useErrorHandler } from "../hooks/useErrorHandler.js";
+import { MediaCloudErrors } from "../types/errors.mjs";
+import { useErrorHandler } from "../hooks/useErrorHandler.mjs";
 
 //#region src/endpoints/muxCreateUploadHandler.ts
 function getMuxCreateUploadHandler(args) {
@@ -11,8 +11,7 @@ function getMuxCreateUploadHandler(args) {
 				throwError(MediaCloudErrors.MUX_REQUEST_NO_JSON);
 				throw new Error();
 			}
-			const body = req.json ? await req.json() : "";
-			const { filename } = body;
+			const { filename } = req.json ? await req.json() : "";
 			const mux = getMuxClient();
 			const assetOptions = pluginOptions.mux?.assetOptions || {};
 			const upload = await mux.video.uploads.create({
@@ -37,4 +36,4 @@ function getMuxCreateUploadHandler(args) {
 
 //#endregion
 export { getMuxCreateUploadHandler };
-//# sourceMappingURL=muxCreateUploadHandler.js.map
+//# sourceMappingURL=muxCreateUploadHandler.mjs.map

package/dist/endpoints/muxCreateUploadHandler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxCreateUploadHandler.mjs","names":[],"sources":["../../src/endpoints/muxCreateUploadHandler.ts"],"sourcesContent":["import type { Mux } from '@mux/mux-node'\n\nimport type { PayloadHandler } from 'payload'\nimport { MediaCloudPluginOptions } from '../types'\nimport { useErrorHandler } from '../hooks/useErrorHandler'\nimport { MediaCloudErrors } from '../types/errors'\n\ninterface GetMuxCreateUploadHandlerArgs {\n  getMuxClient: () => Mux\n  pluginOptions: MediaCloudPluginOptions\n}\n\nexport function getMuxCreateUploadHandler(\n  args: GetMuxCreateUploadHandlerArgs\n): PayloadHandler {\n  const { getMuxClient, pluginOptions } = args\n\n  return async (req) => {\n    const { throwError, logError } = useErrorHandler()\n\n    try {\n      if (!req.json) {\n        throwError(MediaCloudErrors.MUX_REQUEST_NO_JSON)\n        throw new Error() // This will never execute but satisfies TypeScript\n      }\n      const body = req.json ? await req.json() : ''\n      const { filename } = body\n      const mux = getMuxClient()\n      const assetOptions = pluginOptions.mux?.assetOptions || {}\n      const upload = await mux.video.uploads.create({\n        cors_origin: '*',\n        new_asset_settings: {\n          playback_policies: ['public'],\n          meta: {\n            title: filename,\n          },\n          ...assetOptions,\n        },\n        test: pluginOptions.mux?.testMode ?? false,\n      })\n      return Response.json({ url: upload.url, uploadId: upload.id })\n    } catch (_error) {\n      logError(MediaCloudErrors.MUX_CREATE_UPLOAD_ERROR)\n      return Response.json(\n        { message: 'Failed to create upload' },\n        { status: 500 }\n      )\n    }\n  }\n}\n"],"mappings":";;;;AAYA,SAAgB,0BACd,MACgB;CAChB,MAAM,EAAE,cAAc,kBAAkB;AAExC,QAAO,OAAO,QAAQ;EACpB,MAAM,EAAE,YAAY,aAAa,iBAAiB;AAElD,MAAI;AACF,OAAI,CAAC,IAAI,MAAM;AACb,eAAW,iBAAiB,oBAAoB;AAChD,UAAM,IAAI,OAAO;;GAGnB,MAAM,EAAE,aADK,IAAI,OAAO,MAAM,IAAI,MAAM,GAAG;GAE3C,MAAM,MAAM,cAAc;GAC1B,MAAM,eAAe,cAAc,KAAK,gBAAgB,EAAE;GAC1D,MAAM,SAAS,MAAM,IAAI,MAAM,QAAQ,OAAO;IAC5C,aAAa;IACb,oBAAoB;KAClB,mBAAmB,CAAC,SAAS;KAC7B,MAAM,EACJ,OAAO,UACR;KACD,GAAG;KACJ;IACD,MAAM,cAAc,KAAK,YAAY;IACtC,CAAC;AACF,UAAO,SAAS,KAAK;IAAE,KAAK,OAAO;IAAK,UAAU,OAAO;IAAI,CAAC;WACvD,QAAQ;AACf,YAAS,iBAAiB,wBAAwB;AAClD,UAAO,SAAS,KACd,EAAE,SAAS,2BAA2B,EACtC,EAAE,QAAQ,KAAK,CAChB"}

package/dist/endpoints/{muxWebhookHandler.d.ts → muxWebhookHandler.d.mts}

@@ -1,5 +1,5 @@
-import { Mux as Mux$1 } from "@mux/mux-node";
 import { PayloadHandler } from "payload";
+import { Mux as Mux$1 } from "@mux/mux-node";
 
 //#region src/endpoints/muxWebhookHandler.d.ts
 interface GetMuxWebhookHandlerArgs {
@@ -8,4 +8,4 @@ interface GetMuxWebhookHandlerArgs {
 declare function getMuxWebhookHandler(args: GetMuxWebhookHandlerArgs): PayloadHandler;
 //#endregion
 export { getMuxWebhookHandler };
-//# sourceMappingURL=muxWebhookHandler.d.ts.map
+//# sourceMappingURL=muxWebhookHandler.d.mts.map

package/dist/endpoints/muxWebhookHandler.mjs

@@ -0,0 +1,71 @@
+//#region src/endpoints/muxWebhookHandler.ts
+function getMuxWebhookHandler(args) {
+	const { getMuxClient } = args;
+	return async (req) => {
+		const mux = getMuxClient();
+		try {
+			const body = req.json ? await req.json() : "";
+			const headers = req.headers;
+			mux.webhooks.verifySignature(body, headers);
+			const event = JSON.parse(body);
+			switch (event.type) {
+				case "video.asset.created":
+				case "video.asset.errored":
+				case "video.asset.deleted":
+				case "video.asset.static_renditions.ready":
+					console.log(`Received Mux webhook: ${event.type}, ${event.object.id}`);
+					break;
+				case "video.asset.ready":
+				case "video.asset.static_renditions.ready":
+				case "video.asset.static_renditions.deleted":
+					await updateMuxAsset({
+						asset: event.object,
+						payload: req.payload
+					});
+					break;
+			}
+			return Response.json({ message: "Webhook received" }, { status: 200 });
+		} catch (error) {
+			return Response.json({ message: error instanceof Error ? error.message : String(error) }, { status: 500 });
+		}
+	};
+}
+async function updateMuxAsset(args) {
+	const { asset, payload } = args;
+	if (asset.status === "ready") {
+		const { docs } = await payload.find({
+			collection: "media",
+			where: { "mux.assetId": { equals: asset.id } },
+			limit: 1,
+			pagination: false
+		});
+		if (docs.length > 0) {
+			const { id } = docs[0];
+			const width = Array.from(asset.tracks ?? []).reduce((max, track) => track.type === "video" && track.max_width ? Math.max(max, track.max_width) : max, 0);
+			const height = Array.from(asset.tracks ?? []).reduce((max, track) => track.type === "video" && track.max_height ? Math.max(max, track.max_height) : max, 0);
+			await payload.update({
+				collection: "media",
+				id,
+				data: {
+					mux: {
+						status: asset.status,
+						assetId: asset.id,
+						playbackId: asset.playback_ids?.[0]?.id,
+						aspectRatio: asset.aspect_ratio,
+						duration: asset.duration,
+						tracks: asset.tracks,
+						maxResolutionTier: asset.max_resolution_tier,
+						videoQuality: asset.video_quality,
+						staticRenditions: asset.static_renditions
+					},
+					width,
+					height
+				}
+			});
+		}
+	}
+}
+
+//#endregion
+export { getMuxWebhookHandler };
+//# sourceMappingURL=muxWebhookHandler.mjs.map

package/dist/endpoints/muxWebhookHandler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxWebhookHandler.mjs","names":[],"sources":["../../src/endpoints/muxWebhookHandler.ts"],"sourcesContent":["import type { Mux } from '@mux/mux-node'\nimport type { BasePayload, PayloadHandler } from 'payload'\nimport type { StaticRenditions } from '../types'\n\ninterface GetMuxWebhookHandlerArgs {\n  getMuxClient: () => Mux\n}\n\nexport function getMuxWebhookHandler(\n  args: GetMuxWebhookHandlerArgs\n): PayloadHandler {\n  const { getMuxClient } = args\n\n  return async (req) => {\n    const mux = getMuxClient()\n\n    try {\n      const body = req.json ? await req.json() : ''\n      const headers = req.headers\n\n      // Verify the webhook signature\n      mux.webhooks.verifySignature(body, headers)\n\n      // Parse the request body\n      const event = JSON.parse(body)\n\n      // Handle the event\n      switch (event.type) {\n        case 'video.asset.created':\n        case 'video.asset.errored':\n        case 'video.asset.deleted':\n        case 'video.asset.static_renditions.ready':\n          console.log(`Received Mux webhook: ${event.type}, ${event.object.id}`)\n          break\n        case 'video.asset.ready':\n        case 'video.asset.static_renditions.ready':\n        case 'video.asset.static_renditions.deleted':\n          await updateMuxAsset({ asset: event.object, payload: req.payload })\n          break\n      }\n\n      return Response.json({ message: 'Webhook received' }, { status: 200 })\n    } catch (error) {\n      return Response.json(\n        { message: error instanceof Error ? error.message : String(error) },\n        { status: 500 }\n      )\n    }\n  }\n}\n\ninterface UpdateMuxAssetArgs {\n  asset: Mux.Video.Asset\n  payload: BasePayload\n}\n\nasync function updateMuxAsset(args: UpdateMuxAssetArgs): Promise<void> {\n  const { asset, payload } = args\n\n  if (asset.status === 'ready') {\n    const { docs } = await payload.find({\n      collection: 'media',\n      where: {\n        'mux.assetId': {\n          equals: asset.id,\n        },\n      },\n      limit: 1,\n      pagination: false,\n    })\n\n    if (docs.length > 0) {\n      const { id } = docs[0]\n\n      const width = Array.from(asset.tracks ?? []).reduce(\n        (max, track) =>\n          track.type === 'video' && track.max_width\n            ? Math.max(max, track.max_width)\n            : max,\n        0\n      )\n\n      const height = Array.from(asset.tracks ?? []).reduce(\n        (max, track) =>\n          track.type === 'video' && track.max_height\n            ? Math.max(max, track.max_height)\n            : max,\n        0\n      )\n\n      await payload.update({\n        collection: 'media',\n        id,\n        data: {\n          mux: {\n            status: asset.status,\n            assetId: asset.id,\n            playbackId: asset.playback_ids?.[0]?.id,\n            aspectRatio: asset.aspect_ratio,\n            duration: asset.duration,\n            tracks: asset.tracks,\n            maxResolutionTier: asset.max_resolution_tier,\n            videoQuality: asset.video_quality,\n            staticRenditions: asset.static_renditions as StaticRenditions,\n          },\n          width,\n          height,\n        },\n      })\n    }\n  }\n}\n"],"mappings":";AAQA,SAAgB,qBACd,MACgB;CAChB,MAAM,EAAE,iBAAiB;AAEzB,QAAO,OAAO,QAAQ;EACpB,MAAM,MAAM,cAAc;AAE1B,MAAI;GACF,MAAM,OAAO,IAAI,OAAO,MAAM,IAAI,MAAM,GAAG;GAC3C,MAAM,UAAU,IAAI;AAGpB,OAAI,SAAS,gBAAgB,MAAM,QAAQ;GAG3C,MAAM,QAAQ,KAAK,MAAM,KAAK;AAG9B,WAAQ,MAAM,MAAd;IACE,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;AACH,aAAQ,IAAI,yBAAyB,MAAM,KAAK,IAAI,MAAM,OAAO,KAAK;AACtE;IACF,KAAK;IACL,KAAK;IACL,KAAK;AACH,WAAM,eAAe;MAAE,OAAO,MAAM;MAAQ,SAAS,IAAI;MAAS,CAAC;AACnE;;AAGJ,UAAO,SAAS,KAAK,EAAE,SAAS,oBAAoB,EAAE,EAAE,QAAQ,KAAK,CAAC;WAC/D,OAAO;AACd,UAAO,SAAS,KACd,EAAE,SAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,EAAE,EACnE,EAAE,QAAQ,KAAK,CAChB;;;;AAUP,eAAe,eAAe,MAAyC;CACrE,MAAM,EAAE,OAAO,YAAY;AAE3B,KAAI,MAAM,WAAW,SAAS;EAC5B,MAAM,EAAE,SAAS,MAAM,QAAQ,KAAK;GAClC,YAAY;GACZ,OAAO,EACL,eAAe,EACb,QAAQ,MAAM,IACf,EACF;GACD,OAAO;GACP,YAAY;GACb,CAAC;AAEF,MAAI,KAAK,SAAS,GAAG;GACnB,MAAM,EAAE,OAAO,KAAK;GAEpB,MAAM,QAAQ,MAAM,KAAK,MAAM,UAAU,EAAE,CAAC,CAAC,QAC1C,KAAK,UACJ,MAAM,SAAS,WAAW,MAAM,YAC5B,KAAK,IAAI,KAAK,MAAM,UAAU,GAC9B,KACN,EACD;GAED,MAAM,SAAS,MAAM,KAAK,MAAM,UAAU,EAAE,CAAC,CAAC,QAC3C,KAAK,UACJ,MAAM,SAAS,WAAW,MAAM,aAC5B,KAAK,IAAI,KAAK,MAAM,WAAW,GAC/B,KACN,EACD;AAED,SAAM,QAAQ,OAAO;IACnB,YAAY;IACZ;IACA,MAAM;KACJ,KAAK;MACH,QAAQ,MAAM;MACd,SAAS,MAAM;MACf,YAAY,MAAM,eAAe,IAAI;MACrC,aAAa,MAAM;MACnB,UAAU,MAAM;MAChB,QAAQ,MAAM;MACd,mBAAmB,MAAM;MACzB,cAAc,MAAM;MACpB,kBAAkB,MAAM;MACzB;KACD;KACA;KACD;IACF,CAAC"}

package/dist/endpoints/tusPostProcessorHandler.d.mts

@@ -0,0 +1,11 @@
+import { S3Store } from "../tus/stores/s3/s3-store.mjs";
+import { PayloadHandler } from "payload";
+
+//#region src/endpoints/tusPostProcessorHandler.d.ts
+interface GetTusPostProcessorHandlerArgs {
+  s3Store: S3Store;
+}
+declare function getTusPostProcessorHandler(args: GetTusPostProcessorHandlerArgs): PayloadHandler;
+//#endregion
+export { getTusPostProcessorHandler };
+//# sourceMappingURL=tusPostProcessorHandler.d.mts.map

package/dist/endpoints/tusPostProcessorHandler.mjs

@@ -0,0 +1,46 @@
+import { MediaCloudErrors } from "../types/errors.mjs";
+import { useErrorHandler } from "../hooks/useErrorHandler.mjs";
+import { imageSize } from "image-size";
+
+//#region src/endpoints/tusPostProcessorHandler.ts
+function getTusPostProcessorHandler(args) {
+	const { s3Store } = args;
+	const { throwError, logError } = useErrorHandler();
+	return async function(req) {
+		try {
+			const { routeParams, payload } = req;
+			const filename = routeParams?.filename;
+			if (!filename) throwError(MediaCloudErrors.FILE_MISSING_NAME);
+			const decodedFilename = decodeURIComponent(filename);
+			const { docs } = await payload.find({
+				collection: "media",
+				where: { filename: { equals: decodedFilename } },
+				limit: 1,
+				pagination: false
+			});
+			const media = docs?.[0];
+			if (!media) throwError(MediaCloudErrors.FILE_NOT_FOUND);
+			if (media.storage !== "s3") return Response.json({ message: "Asset not stored on S3, skipping processing" }, { status: 200 });
+			const matchedId = media?.id;
+			const url = s3Store.getUrl(filename);
+			const arrayBuffer = await (await fetch(url)).arrayBuffer();
+			const { width, height } = imageSize(Buffer.from(arrayBuffer));
+			if (width && height) await payload.update({
+				collection: "media",
+				id: matchedId,
+				data: {
+					width,
+					height
+				}
+			});
+			return Response.json({ message: "Asset processed" }, { status: 200 });
+		} catch (_error) {
+			logError(MediaCloudErrors.FILE_DIMENSIONS_ERROR);
+			return Response.json({ message: "Failed to process asset" }, { status: 500 });
+		}
+	};
+}
+
+//#endregion
+export { getTusPostProcessorHandler };
+//# sourceMappingURL=tusPostProcessorHandler.mjs.map

package/dist/endpoints/tusPostProcessorHandler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tusPostProcessorHandler.mjs","names":[],"sources":["../../src/endpoints/tusPostProcessorHandler.ts"],"sourcesContent":["import type { PayloadHandler } from 'payload'\nimport { useErrorHandler } from '../hooks/useErrorHandler'\nimport { MediaCloudErrors } from '../types/errors'\n\nimport { S3Store } from '../tus/stores/s3/s3-store'\nimport { imageSize } from 'image-size'\n\ninterface GetTusPostProcessorHandlerArgs {\n  s3Store: S3Store\n}\n\nexport function getTusPostProcessorHandler(\n  args: GetTusPostProcessorHandlerArgs\n): PayloadHandler {\n  const { s3Store } = args\n  const { throwError, logError } = useErrorHandler()\n\n  return async function (req) {\n    try {\n      const { routeParams, payload } = req\n      const filename = routeParams?.filename as string\n\n      if (!filename) {\n        throwError(MediaCloudErrors.FILE_MISSING_NAME)\n      }\n\n      const decodedFilename = decodeURIComponent(filename)\n\n      const { docs } = await payload.find({\n        collection: 'media',\n        where: {\n          filename: {\n            equals: decodedFilename,\n          },\n        },\n        limit: 1,\n        pagination: false,\n      })\n\n      const media = docs?.[0]\n\n      if (!media) {\n        throwError(MediaCloudErrors.FILE_NOT_FOUND)\n      }\n\n      if (media.storage !== 's3') {\n        return Response.json(\n          { message: 'Asset not stored on S3, skipping processing' },\n          { status: 200 }\n        )\n      }\n\n      const matchedId = media?.id\n\n      const url = s3Store.getUrl(filename)\n      const response = await fetch(url)\n      const arrayBuffer = await response.arrayBuffer()\n      const buffer = Buffer.from(arrayBuffer)\n\n      const dimensions = imageSize(buffer)\n      const { width, height } = dimensions\n\n      if (width && height) {\n        await payload.update({\n          collection: 'media',\n          id: matchedId,\n          data: {\n            width,\n            height,\n          },\n        })\n      }\n\n      return Response.json({ message: 'Asset processed' }, { status: 200 })\n    } catch (_error) {\n      logError(MediaCloudErrors.FILE_DIMENSIONS_ERROR)\n      return Response.json(\n        { message: 'Failed to process asset' },\n        { status: 500 }\n      )\n    }\n  }\n}\n"],"mappings":";;;;;AAWA,SAAgB,2BACd,MACgB;CAChB,MAAM,EAAE,YAAY;CACpB,MAAM,EAAE,YAAY,aAAa,iBAAiB;AAElD,QAAO,eAAgB,KAAK;AAC1B,MAAI;GACF,MAAM,EAAE,aAAa,YAAY;GACjC,MAAM,WAAW,aAAa;AAE9B,OAAI,CAAC,SACH,YAAW,iBAAiB,kBAAkB;GAGhD,MAAM,kBAAkB,mBAAmB,SAAS;GAEpD,MAAM,EAAE,SAAS,MAAM,QAAQ,KAAK;IAClC,YAAY;IACZ,OAAO,EACL,UAAU,EACR,QAAQ,iBACT,EACF;IACD,OAAO;IACP,YAAY;IACb,CAAC;GAEF,MAAM,QAAQ,OAAO;AAErB,OAAI,CAAC,MACH,YAAW,iBAAiB,eAAe;AAG7C,OAAI,MAAM,YAAY,KACpB,QAAO,SAAS,KACd,EAAE,SAAS,+CAA+C,EAC1D,EAAE,QAAQ,KAAK,CAChB;GAGH,MAAM,YAAY,OAAO;GAEzB,MAAM,MAAM,QAAQ,OAAO,SAAS;GAEpC,MAAM,cAAc,OADH,MAAM,MAAM,IAAI,EACE,aAAa;GAIhD,MAAM,EAAE,OAAO,WADI,UAFJ,OAAO,KAAK,YAAY,CAEH;AAGpC,OAAI,SAAS,OACX,OAAM,QAAQ,OAAO;IACnB,YAAY;IACZ,IAAI;IACJ,MAAM;KACJ;KACA;KACD;IACF,CAAC;AAGJ,UAAO,SAAS,KAAK,EAAE,SAAS,mBAAmB,EAAE,EAAE,QAAQ,KAAK,CAAC;WAC9D,QAAQ;AACf,YAAS,iBAAiB,sBAAsB;AAChD,UAAO,SAAS,KACd,EAAE,SAAS,2BAA2B,EACtC,EAAE,QAAQ,KAAK,CAChB"}