@maas/payload-plugin-media-cloud 0.0.10 → 0.0.14

package/dist/adapter/handleDelete.mjs

@@ -4,28 +4,6 @@ import { useErrorHandler } from "../hooks/useErrorHandler.mjs";
 //#region src/adapter/handleDelete.ts
 const { logError } = useErrorHandler();
 /**
-* Creates a handle delete function for processing file deletions from both Mux and S3 storage
-* @param args - The arguments for creating the delete handler
-* @param args.s3Store - The S3Store instance for S3 file operations
-* @param args.getMuxClient - Function that returns a Mux client instance
-* @returns A HandleDelete function that processes deletion requests based on storage type
-*/
-function getHandleDelete(args) {
-	const { s3Store, getMuxClient } = args;
-	return async ({ doc, req }) => {
-		if (req?.method !== "DELETE" || !doc) return;
-		const media = doc;
-		if (media?.storage === "mux" && media.mux?.uploadId) await deleteMuxAsset({
-			getMuxClient,
-			uploadId: media.mux.uploadId
-		});
-		else if (media.filename) await deleteS3File({
-			s3Store,
-			filename: media.filename
-		});
-	};
-}
-/**
 * Deletes a Mux asset by upload ID
 * @param args - The arguments for deleting the Mux asset
 * @param args.getMuxClient - Function that returns a Mux client instance
@@ -42,7 +20,7 @@ async function deleteMuxAsset(args) {
 			await mux.video.assets.delete(asset.id);
 		}
 	} catch (_error) {
-		logError(MediaCloudErrors.MUX_ASSET_DELETE_ERROR);
+		logError(MediaCloudErrors.MUX_ASSET_DELETE_ERROR.message);
 	}
 }
 /**
@@ -61,9 +39,38 @@ async function deleteS3File(args) {
 			Delete: { Objects: [{ Key: filename }, { Key: `${filename}.info` }] }
 		});
 	} catch (_error) {
-		logError(MediaCloudErrors.S3_DELETE_ERROR);
+		logError(MediaCloudErrors.S3_DELETE_ERROR.message);
 	}
 }
+/**
+* Creates a handle delete function for processing file deletions from both Mux and S3 storage
+* @param args - The arguments for creating the delete handler
+* @param args.s3Store - The S3Store instance for S3 file operations
+* @param args.getMuxClient - Function that returns a Mux client instance
+* @returns A HandleDelete function that processes deletion requests based on storage type
+*/
+function getHandleDelete(args) {
+	const { s3Store, getMuxClient } = args;
+	return async ({ doc, req }) => {
+		if (req?.method !== "DELETE" || !doc) return;
+		const media = doc;
+		switch (media?.storage) {
+			case "mux":
+				if (media.mux?.uploadId) await deleteMuxAsset({
+					getMuxClient,
+					uploadId: media.mux.uploadId
+				});
+				break;
+			case "s3":
+				if (media.filename) await deleteS3File({
+					s3Store,
+					filename: media.filename
+				});
+				break;
+			default: logError(MediaCloudErrors.UNKNOWN_STORAGE_TYPE.message);
+		}
+	};
+}
 
 //#endregion
 export { getHandleDelete };

package/dist/adapter/handleDelete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"handleDelete.mjs","names":[],"sources":["../../src/adapter/handleDelete.ts"],"sourcesContent":["import { useErrorHandler } from '../hooks/useErrorHandler'\nimport { MediaCloudErrors } from '../types/errors'\n\nimport type { HandleDelete } from '@payloadcms/plugin-cloud-storage/types'\nimport type { Document } from 'payload'\nimport type { Mux } from '@mux/mux-node'\nimport type { S3Store } from '../tus/stores/s3/s3-store'\n\ninterface HandleDeleteArgs {\n  s3Store: S3Store\n  getMuxClient: () => Mux\n}\n\ninterface DeleteMuxAssetArgs {\n  getMuxClient: () => Mux\n  uploadId: string\n}\n\ninterface DeleteS3FileArgs {\n  s3Store: S3Store\n  filename: string\n}\n\nconst { logError } = useErrorHandler()\n\n/**\n * Creates a handle delete function for processing file deletions from both Mux and S3 storage\n * @param args - The arguments for creating the delete handler\n * @param args.s3Store - The S3Store instance for S3 file operations\n * @param args.getMuxClient - Function that returns a Mux client instance\n * @returns A HandleDelete function that processes deletion requests based on storage type\n */\nexport function getHandleDelete(args: HandleDeleteArgs): HandleDelete {\n  const { s3Store, getMuxClient } = args\n  return async ({ doc, req }) => {\n    if (req?.method !== 'DELETE' || !doc) {\n      return\n    }\n\n    const media = doc as Document\n\n    if (media?.storage === 'mux' && media.mux?.uploadId) {\n      await deleteMuxAsset({ getMuxClient, uploadId: media.mux.uploadId })\n    } else if (media.filename) {\n      await deleteS3File({ s3Store, filename: media.filename })\n    }\n  }\n}\n\n/**\n * Deletes a Mux asset by upload ID\n * @param args - The arguments for deleting the Mux asset\n * @param args.getMuxClient - Function that returns a Mux client instance\n * @param args.uploadId - The upload ID of the Mux asset to delete\n * @returns Promise that resolves when the asset is deleted or rejects on error\n */\nasync function deleteMuxAsset(args: DeleteMuxAssetArgs): Promise<void> {\n  const { getMuxClient, uploadId } = args\n\n  try {\n    const mux = getMuxClient()\n    const assets = await mux.video.assets.list({ upload_id: uploadId })\n    if (assets.data.length > 0) {\n      const asset = assets.data[0]\n      await mux.video.assets.delete(asset.id)\n    }\n  } catch (_error) {\n    logError(MediaCloudErrors.MUX_ASSET_DELETE_ERROR)\n  }\n}\n\n/**\n * Deletes a file from S3 storage including its metadata info file\n * @param args - The arguments for deleting the S3 file\n * @param args.s3Store - The S3Store instance for S3 operations\n * @param args.filename - The filename of the file to delete from S3\n * @returns Promise that resolves when the file is deleted or rejects on error\n */\nasync function deleteS3File(args: DeleteS3FileArgs): Promise<void> {\n  const { s3Store, filename } = args\n\n  try {\n    const { client, bucket } = s3Store\n    await client.deleteObjects({\n      Bucket: bucket,\n      Delete: {\n        Objects: [{ Key: filename }, { Key: `${filename}.info` }],\n      },\n    })\n  } catch (_error) {\n    logError(MediaCloudErrors.S3_DELETE_ERROR)\n  }\n}\n"],"mappings":";;;;AAuBA,MAAM,EAAE,aAAa,iBAAiB;;;;;;;;AAStC,SAAgB,gBAAgB,MAAsC;CACpE,MAAM,EAAE,SAAS,iBAAiB;AAClC,QAAO,OAAO,EAAE,KAAK,UAAU;AAC7B,MAAI,KAAK,WAAW,YAAY,CAAC,IAC/B;EAGF,MAAM,QAAQ;AAEd,MAAI,OAAO,YAAY,SAAS,MAAM,KAAK,SACzC,OAAM,eAAe;GAAE;GAAc,UAAU,MAAM,IAAI;GAAU,CAAC;WAC3D,MAAM,SACf,OAAM,aAAa;GAAE;GAAS,UAAU,MAAM;GAAU,CAAC;;;;;;;;;;AAY/D,eAAe,eAAe,MAAyC;CACrE,MAAM,EAAE,cAAc,aAAa;AAEnC,KAAI;EACF,MAAM,MAAM,cAAc;EAC1B,MAAM,SAAS,MAAM,IAAI,MAAM,OAAO,KAAK,EAAE,WAAW,UAAU,CAAC;AACnE,MAAI,OAAO,KAAK,SAAS,GAAG;GAC1B,MAAM,QAAQ,OAAO,KAAK;AAC1B,SAAM,IAAI,MAAM,OAAO,OAAO,MAAM,GAAG;;UAElC,QAAQ;AACf,WAAS,iBAAiB,uBAAuB;;;;;;;;;;AAWrD,eAAe,aAAa,MAAuC;CACjE,MAAM,EAAE,SAAS,aAAa;AAE9B,KAAI;EACF,MAAM,EAAE,QAAQ,WAAW;AAC3B,QAAM,OAAO,cAAc;GACzB,QAAQ;GACR,QAAQ,EACN,SAAS,CAAC,EAAE,KAAK,UAAU,EAAE,EAAE,KAAK,GAAG,SAAS,QAAQ,CAAC,EAC1D;GACF,CAAC;UACK,QAAQ;AACf,WAAS,iBAAiB,gBAAgB"}
+{"version":3,"file":"handleDelete.mjs","names":[],"sources":["../../src/adapter/handleDelete.ts"],"sourcesContent":["import { useErrorHandler } from '../hooks/useErrorHandler'\nimport { MediaCloudErrors } from '../types/errors'\n\nimport type { HandleDelete } from '@payloadcms/plugin-cloud-storage/types'\nimport type { Document } from 'payload'\nimport type { Mux } from '@mux/mux-node'\nimport type { S3Store } from '../tus/stores/s3/s3-store'\n\ninterface HandleDeleteArgs {\n  s3Store: S3Store\n  getMuxClient: () => Mux\n}\n\ninterface DeleteMuxAssetArgs {\n  getMuxClient: () => Mux\n  uploadId: string\n}\n\ninterface DeleteS3FileArgs {\n  s3Store: S3Store\n  filename: string\n}\n\nconst { logError } = useErrorHandler()\n\n/**\n * Deletes a Mux asset by upload ID\n * @param args - The arguments for deleting the Mux asset\n * @param args.getMuxClient - Function that returns a Mux client instance\n * @param args.uploadId - The upload ID of the Mux asset to delete\n * @returns Promise that resolves when the asset is deleted or rejects on error\n */\nasync function deleteMuxAsset(args: DeleteMuxAssetArgs): Promise<void> {\n  const { getMuxClient, uploadId } = args\n\n  try {\n    const mux = getMuxClient()\n    const assets = await mux.video.assets.list({ upload_id: uploadId })\n    if (assets.data.length > 0) {\n      const asset = assets.data[0]\n      await mux.video.assets.delete(asset.id)\n    }\n  } catch (_error) {\n    logError(MediaCloudErrors.MUX_ASSET_DELETE_ERROR.message)\n  }\n}\n\n/**\n * Deletes a file from S3 storage including its metadata info file\n * @param args - The arguments for deleting the S3 file\n * @param args.s3Store - The S3Store instance for S3 operations\n * @param args.filename - The filename of the file to delete from S3\n * @returns Promise that resolves when the file is deleted or rejects on error\n */\nasync function deleteS3File(args: DeleteS3FileArgs): Promise<void> {\n  const { s3Store, filename } = args\n\n  try {\n    const { client, bucket } = s3Store\n    await client.deleteObjects({\n      Bucket: bucket,\n      Delete: {\n        Objects: [{ Key: filename }, { Key: `${filename}.info` }],\n      },\n    })\n  } catch (_error) {\n    logError(MediaCloudErrors.S3_DELETE_ERROR.message)\n  }\n}\n\n/**\n * Creates a handle delete function for processing file deletions from both Mux and S3 storage\n * @param args - The arguments for creating the delete handler\n * @param args.s3Store - The S3Store instance for S3 file operations\n * @param args.getMuxClient - Function that returns a Mux client instance\n * @returns A HandleDelete function that processes deletion requests based on storage type\n */\nexport function getHandleDelete(args: HandleDeleteArgs): HandleDelete {\n  const { s3Store, getMuxClient } = args\n  return async ({ doc, req }) => {\n    if (req?.method !== 'DELETE' || !doc) {\n      return\n    }\n\n    const media = doc as Document\n\n    switch (media?.storage) {\n      case 'mux':\n        if (media.mux?.uploadId) {\n          await deleteMuxAsset({ getMuxClient, uploadId: media.mux.uploadId })\n        }\n        break\n      case 's3':\n        if (media.filename) {\n          await deleteS3File({ s3Store, filename: media.filename })\n        }\n        break\n      default:\n        logError(MediaCloudErrors.UNKNOWN_STORAGE_TYPE.message)\n    }\n  }\n}\n"],"mappings":";;;;AAuBA,MAAM,EAAE,aAAa,iBAAiB;;;;;;;;AAStC,eAAe,eAAe,MAAyC;CACrE,MAAM,EAAE,cAAc,aAAa;AAEnC,KAAI;EACF,MAAM,MAAM,cAAc;EAC1B,MAAM,SAAS,MAAM,IAAI,MAAM,OAAO,KAAK,EAAE,WAAW,UAAU,CAAC;AACnE,MAAI,OAAO,KAAK,SAAS,GAAG;GAC1B,MAAM,QAAQ,OAAO,KAAK;AAC1B,SAAM,IAAI,MAAM,OAAO,OAAO,MAAM,GAAG;;UAElC,QAAQ;AACf,WAAS,iBAAiB,uBAAuB,QAAQ;;;;;;;;;;AAW7D,eAAe,aAAa,MAAuC;CACjE,MAAM,EAAE,SAAS,aAAa;AAE9B,KAAI;EACF,MAAM,EAAE,QAAQ,WAAW;AAC3B,QAAM,OAAO,cAAc;GACzB,QAAQ;GACR,QAAQ,EACN,SAAS,CAAC,EAAE,KAAK,UAAU,EAAE,EAAE,KAAK,GAAG,SAAS,QAAQ,CAAC,EAC1D;GACF,CAAC;UACK,QAAQ;AACf,WAAS,iBAAiB,gBAAgB,QAAQ;;;;;;;;;;AAWtD,SAAgB,gBAAgB,MAAsC;CACpE,MAAM,EAAE,SAAS,iBAAiB;AAClC,QAAO,OAAO,EAAE,KAAK,UAAU;AAC7B,MAAI,KAAK,WAAW,YAAY,CAAC,IAC/B;EAGF,MAAM,QAAQ;AAEd,UAAQ,OAAO,SAAf;GACE,KAAK;AACH,QAAI,MAAM,KAAK,SACb,OAAM,eAAe;KAAE;KAAc,UAAU,MAAM,IAAI;KAAU,CAAC;AAEtE;GACF,KAAK;AACH,QAAI,MAAM,SACR,OAAM,aAAa;KAAE;KAAS,UAAU,MAAM;KAAU,CAAC;AAE3D;GACF,QACE,UAAS,iBAAiB,qBAAqB,QAAQ"}

package/dist/adapter/handleUpload.mjs

@@ -12,7 +12,7 @@ function getHandleUpload() {
 			case "mux":
 				data.storage = "mux";
 				data.mux = {
-					uploadId: ctx.uploadId || "",
+					uploadId: ctx.uploadId ?? "",
 					status: "preparing"
 				};
 				break;

package/dist/adapter/handleUpload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"handleUpload.mjs","names":[],"sources":["../../src/adapter/handleUpload.ts"],"sourcesContent":["import type { HandleUpload } from '@payloadcms/plugin-cloud-storage/types'\n\ninterface ClientUploadContext {\n  storage: 'mux' | 's3'\n  uploadId?: string\n  mimeType?: string\n}\n\n/**\n * Creates a handle upload function for processing file uploads to both Mux and S3 storage\n * @returns A HandleUpload function that processes client upload context and updates document data\n */\nexport function getHandleUpload(): HandleUpload {\n  return async function ({ clientUploadContext, data }) {\n    if (!clientUploadContext) {\n      return data\n    }\n\n    const ctx = clientUploadContext as ClientUploadContext\n    data.mimeType = ctx.mimeType\n\n    switch (ctx.storage) {\n      case 'mux':\n        data.storage = 'mux'\n        data.mux = {\n          uploadId: ctx.uploadId || '',\n          status: 'preparing',\n        }\n        break\n      default:\n        data.storage = 's3'\n        break\n    }\n\n    return data\n  }\n}\n"],"mappings":";;;;;AAYA,SAAgB,kBAAgC;AAC9C,QAAO,eAAgB,EAAE,qBAAqB,QAAQ;AACpD,MAAI,CAAC,oBACH,QAAO;EAGT,MAAM,MAAM;AACZ,OAAK,WAAW,IAAI;AAEpB,UAAQ,IAAI,SAAZ;GACE,KAAK;AACH,SAAK,UAAU;AACf,SAAK,MAAM;KACT,UAAU,IAAI,YAAY;KAC1B,QAAQ;KACT;AACD;GACF;AACE,SAAK,UAAU;AACf;;AAGJ,SAAO"}
+{"version":3,"file":"handleUpload.mjs","names":[],"sources":["../../src/adapter/handleUpload.ts"],"sourcesContent":["import type { HandleUpload } from '@payloadcms/plugin-cloud-storage/types'\n\ninterface ClientUploadContext {\n  storage: 'mux' | 's3'\n  uploadId?: string\n  mimeType?: string\n}\n\n/**\n * Creates a handle upload function for processing file uploads to both Mux and S3 storage\n * @returns A HandleUpload function that processes client upload context and updates document data\n */\nexport function getHandleUpload(): HandleUpload {\n  return async function ({ clientUploadContext, data }) {\n    if (!clientUploadContext) {\n      return data\n    }\n\n    const ctx = clientUploadContext as ClientUploadContext\n    data.mimeType = ctx.mimeType\n\n    switch (ctx.storage) {\n      case 'mux':\n        data.storage = 'mux'\n        data.mux = {\n          uploadId: ctx.uploadId ?? '',\n          status: 'preparing',\n        }\n        break\n      default:\n        data.storage = 's3'\n        break\n    }\n\n    return data\n  }\n}\n"],"mappings":";;;;;AAYA,SAAgB,kBAAgC;AAC9C,QAAO,eAAgB,EAAE,qBAAqB,QAAQ;AACpD,MAAI,CAAC,oBACH,QAAO;EAGT,MAAM,MAAM;AACZ,OAAK,WAAW,IAAI;AAEpB,UAAQ,IAAI,SAAZ;GACE,KAAK;AACH,SAAK,UAAU;AACf,SAAK,MAAM;KACT,UAAU,IAAI,YAAY;KAC1B,QAAQ;KACT;AACD;GACF;AACE,SAAK,UAAU;AACf;;AAGJ,SAAO"}

package/dist/collections/mediaCollection.d.mts

@@ -4,6 +4,7 @@ import { CollectionConfig } from "payload";
 //#region src/collections/mediaCollection.d.ts
 interface GetMediaCollectionArgs {
   s3Store: S3Store;
+  baseCollection?: CollectionConfig;
 }
 /**
  * Creates a media collection configuration for Payload CMS

package/dist/collections/mediaCollection.mjs

@@ -5,8 +5,8 @@
 * @returns A configured Payload collection for media files
 */
 function getMediaCollection(args) {
-	const { s3Store } = args;
-	return {
+	const { s3Store, baseCollection } = args;
+	const config = {
 		slug: "media",
 		access: {
 			read: () => true,
@@ -156,6 +156,12 @@ function getMediaCollection(args) {
 			}
 		]
 	};
+	if (!baseCollection) return config;
+	return {
+		...baseCollection,
+		...config,
+		fields: [...baseCollection.fields || [], ...config.fields]
+	};
 }
 
 //#endregion

package/dist/collections/mediaCollection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mediaCollection.mjs","names":[],"sources":["../../src/collections/mediaCollection.ts"],"sourcesContent":["import type { CollectionConfig } from 'payload'\nimport type { Document } from 'payload'\nimport type { S3Store } from './../tus/stores/s3/s3-store'\n\ninterface GetMediaCollectionArgs {\n  s3Store: S3Store\n}\n\n/**\n * Creates a media collection configuration for Payload CMS\n * @param args - Arguments including the S3Store instance\n * @returns A configured Payload collection for media files\n */\nexport function getMediaCollection(\n  args: GetMediaCollectionArgs\n): CollectionConfig {\n  const { s3Store } = args\n\n  return {\n    slug: 'media',\n    access: {\n      read: () => true,\n      delete: () => true,\n    },\n    admin: {\n      group: 'Media Cloud',\n      pagination: {\n        defaultLimit: 50,\n      },\n    },\n    upload: {\n      crop: false,\n      displayPreview: true,\n      hideRemoveFile: true,\n      adminThumbnail({ doc }: { doc: Document }) {\n        if (doc?.storage === 'mux' && doc?.mux?.playbackId) {\n          return `https://image.mux.com/${doc.mux.playbackId}/thumbnail.jpg?width=200&height=200&fit_mode=pad`\n        } else if (doc?.storage === 's3') {\n          // @TODO: Make configurable\n          const url = s3Store.getUrl(doc.filename)\n          return `https://wsrv.nl/?url=${url}?width=200&height=200&default=1`\n        }\n        return null\n      },\n    },\n    fields: [\n      {\n        name: 'alt',\n        label: 'Alternative Text',\n        type: 'text',\n      },\n      {\n        name: 'caption',\n        label: 'Caption',\n        type: 'text',\n      },\n      {\n        name: 'copyright',\n        label: 'Copyright',\n        type: 'text',\n      },\n      {\n        type: 'row',\n        fields: [\n          {\n            name: 'width',\n            label: 'Width',\n            type: 'text',\n            admin: {\n              readOnly: true,\n              hidden: false,\n              width: '50%',\n            },\n          },\n          {\n            name: 'height',\n            label: 'Height',\n            type: 'number',\n            admin: {\n              readOnly: true,\n              hidden: false,\n              width: '50%',\n            },\n          },\n        ],\n      },\n      {\n        name: 'storage',\n        label: 'Storage',\n        type: 'select',\n        options: [\n          {\n            label: 'Mux',\n            value: 'mux',\n          },\n          {\n            label: 'S3',\n            value: 's3',\n          },\n        ],\n        admin: {\n          readOnly: true,\n        },\n      },\n      {\n        name: 'mux',\n        label: 'Mux',\n        type: 'group',\n        admin: {\n          disableListColumn: true,\n          disableBulkEdit: true,\n          disableListFilter: true,\n          readOnly: true,\n          condition: (data) => {\n            return data.storage === 'mux'\n          },\n        },\n        fields: [\n          {\n            name: 'preview',\n            type: 'ui',\n            admin: {\n              condition: (data) => {\n                return data.storage === 'mux'\n              },\n              disableListColumn: true,\n              components: {\n                Field: '@maas/payload-plugin-media-cloud/components#MuxPreview',\n              },\n            },\n          },\n          {\n            name: 'status',\n            label: 'Status',\n            type: 'text',\n          },\n          {\n            name: 'uploadId',\n            label: 'Upload ID',\n            type: 'text',\n          },\n          {\n            name: 'assetId',\n            label: 'Asset ID',\n            type: 'text',\n          },\n          {\n            name: 'playbackId',\n            label: 'Playback ID',\n            type: 'text',\n          },\n          {\n            name: 'aspectRatio',\n            label: 'Aspect Ratio',\n            type: 'text',\n          },\n          {\n            name: 'duration',\n            label: 'Duration',\n            type: 'number',\n          },\n          {\n            name: 'tracks',\n            label: 'Tracks',\n            type: 'json',\n          },\n          {\n            name: 'maxResolutionTier',\n            label: 'Max Resolution Tier',\n            type: 'text',\n          },\n          {\n            name: 'videoQuality',\n            label: 'Video Quality',\n            type: 'text',\n          },\n          {\n            name: 'staticRenditions',\n            label: 'Static Renditions',\n            type: 'json',\n          },\n        ],\n      },\n    ],\n  }\n}\n"],"mappings":";;;;;;AAaA,SAAgB,mBACd,MACkB;CAClB,MAAM,EAAE,YAAY;AAEpB,QAAO;EACL,MAAM;EACN,QAAQ;GACN,YAAY;GACZ,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,YAAY,EACV,cAAc,IACf;GACF;EACD,QAAQ;GACN,MAAM;GACN,gBAAgB;GAChB,gBAAgB;GAChB,eAAe,EAAE,OAA0B;AACzC,QAAI,KAAK,YAAY,SAAS,KAAK,KAAK,WACtC,QAAO,yBAAyB,IAAI,IAAI,WAAW;aAC1C,KAAK,YAAY,KAG1B,QAAO,wBADK,QAAQ,OAAO,IAAI,SAAS,CACL;AAErC,WAAO;;GAEV;EACD,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACP;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACP;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACP;GACD;IACE,MAAM;IACN,QAAQ,CACN;KACE,MAAM;KACN,OAAO;KACP,MAAM;KACN,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;MACR;KACF,EACD;KACE,MAAM;KACN,OAAO;KACP,MAAM;KACN,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;MACR;KACF,CACF;IACF;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACN,SAAS,CACP;KACE,OAAO;KACP,OAAO;KACR,EACD;KACE,OAAO;KACP,OAAO;KACR,CACF;IACD,OAAO,EACL,UAAU,MACX;IACF;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;KACL,mBAAmB;KACnB,iBAAiB;KACjB,mBAAmB;KACnB,UAAU;KACV,YAAY,SAAS;AACnB,aAAO,KAAK,YAAY;;KAE3B;IACD,QAAQ;KACN;MACE,MAAM;MACN,MAAM;MACN,OAAO;OACL,YAAY,SAAS;AACnB,eAAO,KAAK,YAAY;;OAE1B,mBAAmB;OACnB,YAAY,EACV,OAAO,0DACR;OACF;MACF;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF"}
+{"version":3,"file":"mediaCollection.mjs","names":["config: CollectionConfig"],"sources":["../../src/collections/mediaCollection.ts"],"sourcesContent":["import type { CollectionConfig } from 'payload'\nimport type { Document } from 'payload'\nimport type { S3Store } from './../tus/stores/s3/s3-store'\n\ninterface GetMediaCollectionArgs {\n  s3Store: S3Store\n  baseCollection?: CollectionConfig\n}\n\n/**\n * Creates a media collection configuration for Payload CMS\n * @param args - Arguments including the S3Store instance\n * @returns A configured Payload collection for media files\n */\nexport function getMediaCollection(\n  args: GetMediaCollectionArgs\n): CollectionConfig {\n  const { s3Store, baseCollection } = args\n\n  const config: CollectionConfig = {\n    slug: 'media',\n    access: {\n      read: () => true,\n      delete: () => true,\n    },\n    admin: {\n      group: 'Media Cloud',\n      pagination: {\n        defaultLimit: 50,\n      },\n    },\n    upload: {\n      crop: false,\n      displayPreview: true,\n      hideRemoveFile: true,\n      adminThumbnail({ doc }: { doc: Document }) {\n        if (doc?.storage === 'mux' && doc?.mux?.playbackId) {\n          return `https://image.mux.com/${doc.mux.playbackId}/thumbnail.jpg?width=200&height=200&fit_mode=pad`\n        } else if (doc?.storage === 's3') {\n          // @TODO: Make configurable\n          const url = s3Store.getUrl(doc.filename)\n          return `https://wsrv.nl/?url=${url}?width=200&height=200&default=1`\n        }\n        return null\n      },\n    },\n    fields: [\n      {\n        name: 'alt',\n        label: 'Alternative Text',\n        type: 'text',\n      },\n      {\n        name: 'caption',\n        label: 'Caption',\n        type: 'text',\n      },\n      {\n        name: 'copyright',\n        label: 'Copyright',\n        type: 'text',\n      },\n      {\n        type: 'row',\n        fields: [\n          {\n            name: 'width',\n            label: 'Width',\n            type: 'text',\n            admin: {\n              readOnly: true,\n              hidden: false,\n              width: '50%',\n            },\n          },\n          {\n            name: 'height',\n            label: 'Height',\n            type: 'number',\n            admin: {\n              readOnly: true,\n              hidden: false,\n              width: '50%',\n            },\n          },\n        ],\n      },\n      {\n        name: 'storage',\n        label: 'Storage',\n        type: 'select',\n        options: [\n          {\n            label: 'Mux',\n            value: 'mux',\n          },\n          {\n            label: 'S3',\n            value: 's3',\n          },\n        ],\n        admin: {\n          readOnly: true,\n        },\n      },\n      {\n        name: 'mux',\n        label: 'Mux',\n        type: 'group',\n        admin: {\n          disableListColumn: true,\n          disableBulkEdit: true,\n          disableListFilter: true,\n          readOnly: true,\n          condition: (data) => {\n            return data.storage === 'mux'\n          },\n        },\n        fields: [\n          {\n            name: 'preview',\n            type: 'ui',\n            admin: {\n              condition: (data) => {\n                return data.storage === 'mux'\n              },\n              disableListColumn: true,\n              components: {\n                Field: '@maas/payload-plugin-media-cloud/components#MuxPreview',\n              },\n            },\n          },\n          {\n            name: 'status',\n            label: 'Status',\n            type: 'text',\n          },\n          {\n            name: 'uploadId',\n            label: 'Upload ID',\n            type: 'text',\n          },\n          {\n            name: 'assetId',\n            label: 'Asset ID',\n            type: 'text',\n          },\n          {\n            name: 'playbackId',\n            label: 'Playback ID',\n            type: 'text',\n          },\n          {\n            name: 'aspectRatio',\n            label: 'Aspect Ratio',\n            type: 'text',\n          },\n          {\n            name: 'duration',\n            label: 'Duration',\n            type: 'number',\n          },\n          {\n            name: 'tracks',\n            label: 'Tracks',\n            type: 'json',\n          },\n          {\n            name: 'maxResolutionTier',\n            label: 'Max Resolution Tier',\n            type: 'text',\n          },\n          {\n            name: 'videoQuality',\n            label: 'Video Quality',\n            type: 'text',\n          },\n          {\n            name: 'staticRenditions',\n            label: 'Static Renditions',\n            type: 'json',\n          },\n        ],\n      },\n    ],\n  }\n\n  // Simple merge: if baseCollection exists, spread it first, then our config overrides\n  if (!baseCollection) {\n    return config\n  }\n\n  return {\n    ...baseCollection,\n    ...config,\n    fields: [...(baseCollection.fields || []), ...config.fields],\n  }\n}\n"],"mappings":";;;;;;AAcA,SAAgB,mBACd,MACkB;CAClB,MAAM,EAAE,SAAS,mBAAmB;CAEpC,MAAMA,SAA2B;EAC/B,MAAM;EACN,QAAQ;GACN,YAAY;GACZ,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,YAAY,EACV,cAAc,IACf;GACF;EACD,QAAQ;GACN,MAAM;GACN,gBAAgB;GAChB,gBAAgB;GAChB,eAAe,EAAE,OAA0B;AACzC,QAAI,KAAK,YAAY,SAAS,KAAK,KAAK,WACtC,QAAO,yBAAyB,IAAI,IAAI,WAAW;aAC1C,KAAK,YAAY,KAG1B,QAAO,wBADK,QAAQ,OAAO,IAAI,SAAS,CACL;AAErC,WAAO;;GAEV;EACD,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACP;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACP;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACP;GACD;IACE,MAAM;IACN,QAAQ,CACN;KACE,MAAM;KACN,OAAO;KACP,MAAM;KACN,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;MACR;KACF,EACD;KACE,MAAM;KACN,OAAO;KACP,MAAM;KACN,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;MACR;KACF,CACF;IACF;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACN,SAAS,CACP;KACE,OAAO;KACP,OAAO;KACR,EACD;KACE,OAAO;KACP,OAAO;KACR,CACF;IACD,OAAO,EACL,UAAU,MACX;IACF;GACD;IACE,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;KACL,mBAAmB;KACnB,iBAAiB;KACjB,mBAAmB;KACnB,UAAU;KACV,YAAY,SAAS;AACnB,aAAO,KAAK,YAAY;;KAE3B;IACD,QAAQ;KACN;MACE,MAAM;MACN,MAAM;MACN,OAAO;OACL,YAAY,SAAS;AACnB,eAAO,KAAK,YAAY;;OAE1B,mBAAmB;OACnB,YAAY,EACV,OAAO,0DACR;OACF;MACF;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACD;MACE,MAAM;MACN,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;AAGD,KAAI,CAAC,eACH,QAAO;AAGT,QAAO;EACL,GAAG;EACH,GAAG;EACH,QAAQ,CAAC,GAAI,eAAe,UAAU,EAAE,EAAG,GAAG,OAAO,OAAO;EAC7D"}

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

@@ -3,7 +3,7 @@
 import { MediaCloudErrors } from "../../types/errors.mjs";
 import { useErrorHandler } from "../../hooks/useErrorHandler.mjs";
 import { getFileType, isVideo, sanitizeFilename } from "../../utils/file.mjs";
-import { emitter } from "../../hooks/useEmitter.mjs";
+import { useMediaCloudEmitter } from "../../hooks/useMediaCloudEmitter.mjs";
 import * as upchunk from "@mux/upchunk";
 import * as tus from "tus-js-client";
 import { toast } from "@payloadcms/ui";
@@ -11,6 +11,7 @@ import { createClientUploadHandler } from "@payloadcms/plugin-cloud-storage/clie
 
 //#region src/components/upload-handler/upload-handler.tsx
 const { logError, throwError } = useErrorHandler();
+const emitter = useMediaCloudEmitter();
 const MUX_CHUNK_SIZE = 30720;
 const TUS_CHUNK_SIZE = 1024 * 1024;
 const TUS_RETRY_DELAYS = [
@@ -24,9 +25,9 @@ const TUS_RETRY_DELAYS = [
 * @param uploadUrl - The upload URL to parse
 * @returns The extracted upload ID or empty string if parsing fails
 */
-function parseUploadId(uploadUrl) {
+function parseFilename(uploadUrl) {
 	if (!uploadUrl) {
-		logError(MediaCloudErrors.UPLOAD_NO_URL);
+		logError(MediaCloudErrors.UPLOAD_NO_URL.message);
 		return "";
 	}
 	return new URL(uploadUrl).pathname.split("/").pop() || "";
@@ -39,11 +40,9 @@ function parseUploadId(uploadUrl) {
 async function muxUpload(args) {
 	const { file, serverURL, apiRoute, mimeType, updateFilename } = args;
 	const filename = sanitizeFilename(file.name);
-	const getUploadUrlEndpoint = `${serverURL}${apiRoute}/mux/upload`;
-	const getAssetEndpoint = `${serverURL}${apiRoute}/mux/asset`;
 	updateFilename(filename);
 	try {
-		const { url, uploadId } = await (await fetch(getUploadUrlEndpoint, {
+		const { url, uploadId } = await (await fetch(`${serverURL}${apiRoute}/mux/upload`, {
 			body: JSON.stringify({
 				filename,
 				mimeType
@@ -57,33 +56,34 @@ async function muxUpload(args) {
 			file,
 			chunkSize: MUX_CHUNK_SIZE
 		});
-		emitter.emit("add-upload", {
-			id: uploadId,
+		emitter.emit("addUpload", {
 			filename,
+			uploadId,
 			polling: false,
-			pollingUrl: getAssetEndpoint
+			pollingUrl: `${serverURL}${apiRoute}/mux/asset`
 		});
 		uploader.on("error", function() {
-			logError(MediaCloudErrors.MUX_UPLOAD_ERROR);
+			logError(MediaCloudErrors.MUX_UPLOAD_ERROR.message);
 			toast.error("Video upload failed");
-			emitter.emit("remove-upload", { id: uploadId });
+			emitter.emit("removeUpload", { uploadId });
 		});
 		uploader.on("progress", function(progress) {
-			emitter.emit("update-upload", {
-				id: uploadId,
+			emitter.emit("updateUpload", {
+				filename,
 				progress: progress.detail
 			});
 		});
 		uploader.on("success", function() {
-			emitter.emit("upload-completed", { id: uploadId });
+			emitter.emit("uploadComplete", { filename });
 		});
 		return {
+			filename,
 			uploadId,
 			mimeType,
 			storage: "mux"
 		};
 	} catch (_error) {
-		logError(MediaCloudErrors.MUX_DIRECT_UPLOAD_ERROR);
+		logError(MediaCloudErrors.MUX_DIRECT_UPLOAD_ERROR.message);
 		toast.error("Video upload failed");
 		return null;
 	}
@@ -112,32 +112,29 @@ async function tusUpload(args) {
 				contentLength: filesize
 			},
 			onError: function() {
-				logError(MediaCloudErrors.TUS_UPLOAD_ERROR);
+				logError(MediaCloudErrors.TUS_UPLOAD_ERROR.message);
 				toast.error("File upload failed");
 				resolve(null);
 			},
 			onProgress: function(bytesUploaded, bytesTotal) {
 				const percentage = Math.round(bytesUploaded / bytesTotal * 100);
-				const uploadId = parseUploadId(upload?.url);
-				emitter.emit("update-upload", {
-					id: uploadId,
+				const filename$1 = parseFilename(upload?.url);
+				emitter.emit("updateUpload", {
+					filename: filename$1,
 					progress: percentage
 				});
 			},
 			onSuccess: function() {
-				const uploadId = parseUploadId(upload?.url);
-				emitter.emit("upload-completed", { id: uploadId });
-				fetch(`${serverURL}${apiRoute}/uploads/${uploadId}/process`);
+				const filename$1 = parseFilename(upload?.url);
+				emitter.emit("uploadComplete", { filename: filename$1 });
+				fetch(`${serverURL}${apiRoute}/uploads/${filename$1}/process`);
 			},
 			onUploadUrlAvailable: function() {
-				const uploadId = parseUploadId(upload?.url);
-				updateFilename(uploadId);
-				emitter.emit("add-upload", {
-					id: uploadId,
-					filename
-				});
+				const filename$1 = parseFilename(upload?.url);
+				updateFilename(filename$1);
+				emitter.emit("addUpload", { filename: filename$1 });
 				resolve({
-					uploadId,
+					filename: filename$1,
 					mimeType,
 					storage: "s3"
 				});
@@ -149,7 +146,7 @@ async function tusUpload(args) {
 const UploadHandler = createClientUploadHandler({ handler: async function(args) {
 	const { serverURL, apiRoute, file, updateFilename } = args;
 	try {
-		const mimeType = await getFileType(file);
+		const mimeType = await getFileType(file) || file.type || "application/octet-stream";
 		if (!mimeType) {
 			throwError(MediaCloudErrors.FILE_TYPE_UNKNOWN);
 			return null;
@@ -164,9 +161,10 @@ const UploadHandler = createClientUploadHandler({ handler: async function(args)
 		};
 		if (isVideoFile) return await muxUpload(uploadArgs);
 		else return await tusUpload(uploadArgs);
-	} catch (_error) {
-		logError(MediaCloudErrors.UPLOAD_HANDLER_ERROR);
-		toast.error("Upload failed");
+	} catch (error) {
+		console.error("[PLUGIN-MEDIA-CLOUD] Upload handler detailed error:", error);
+		logError(MediaCloudErrors.UPLOAD_HANDLER_ERROR.message);
+		toast.error(`Upload failed: ${error instanceof Error ? error.message : "Unknown error"}`);
 		return null;
 	}
 } });

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

@@ -1 +1 @@
-{"version":3,"file":"upload-handler.mjs","names":["uploadArgs: UploadArgs"],"sources":["../../../src/components/upload-handler/upload-handler.tsx"],"sourcesContent":["'use client'\n\nimport * as upchunk from '@mux/upchunk'\nimport * as tus from 'tus-js-client'\n\nimport { toast } from '@payloadcms/ui'\nimport { createClientUploadHandler } from '@payloadcms/plugin-cloud-storage/client'\n\nimport { MediaCloudErrors } from '../../types/errors'\nimport { emitter } from '../../hooks/useEmitter'\nimport { useErrorHandler } from '../../hooks/useErrorHandler'\nimport { isVideo, getFileType, sanitizeFilename } from '../../utils/file'\n\ninterface UploadArgs {\n  serverURL: string\n  apiRoute: string\n  file: File\n  mimeType: string\n  updateFilename: (filename: string) => void\n}\n\ninterface UploadResult {\n  uploadId: string\n  mimeType: string\n  storage: 'mux' | 's3'\n}\n\ninterface MuxCreateUploadResponse {\n  url: string\n  uploadId: string\n}\n\nconst { logError, throwError } = useErrorHandler()\n\nconst MUX_CHUNK_SIZE = 30720\nconst TUS_CHUNK_SIZE = 1024 * 1024\nconst TUS_RETRY_DELAYS = [0, 1000, 2000, 5000]\n\n/**\n * Utility function to parse upload ID from URL\n * @param uploadUrl - The upload URL to parse\n * @returns The extracted upload ID or empty string if parsing fails\n */\nfunction parseUploadId(uploadUrl?: string | null): string {\n  if (!uploadUrl) {\n    logError(MediaCloudErrors.UPLOAD_NO_URL)\n    return ''\n  }\n  const url = new URL(uploadUrl)\n  return url.pathname.split('/').pop() || ''\n}\n\n/**\n * Handles Mux video upload with progress tracking\n * @param args - The upload arguments including file, server URL, and callbacks\n * @returns Promise that resolves to upload result or null if upload fails\n */\nasync function muxUpload(args: UploadArgs): Promise<UploadResult | null> {\n  const { file, serverURL, apiRoute, mimeType, updateFilename } = args\n\n  const filename = sanitizeFilename(file.name)\n  const getUploadUrlEndpoint = `${serverURL}${apiRoute}/mux/upload`\n  const getAssetEndpoint = `${serverURL}${apiRoute}/mux/asset`\n\n  updateFilename(filename)\n\n  try {\n    // Request upload URL from Mux\n    const response = await fetch(getUploadUrlEndpoint, {\n      body: JSON.stringify({ filename, mimeType }),\n      credentials: 'include',\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const { url, uploadId } = (await response.json()) as MuxCreateUploadResponse\n\n    // Create upchunk uploader\n    const uploader = await upchunk.createUpload({\n      endpoint: url,\n      file,\n      chunkSize: MUX_CHUNK_SIZE,\n    })\n\n    // Add upload to tracker\n    emitter.emit('add-upload', {\n      id: uploadId,\n      filename,\n      polling: false,\n      pollingUrl: getAssetEndpoint,\n    })\n\n    // Set up event handlers\n    uploader.on('error', function () {\n      logError(MediaCloudErrors.MUX_UPLOAD_ERROR)\n      toast.error('Video upload failed')\n      emitter.emit('remove-upload', { id: uploadId })\n    })\n\n    uploader.on('progress', function (progress) {\n      emitter.emit('update-upload', {\n        id: uploadId,\n        progress: progress.detail,\n      })\n    })\n\n    uploader.on('success', function () {\n      emitter.emit('upload-completed', { id: uploadId })\n    })\n\n    return {\n      uploadId,\n      mimeType,\n      storage: 'mux',\n    }\n  } catch (_error) {\n    logError(MediaCloudErrors.MUX_DIRECT_UPLOAD_ERROR)\n    toast.error('Video upload failed')\n    return null\n  }\n}\n\n/**\n * Handles TUS file upload with resumable capabilities\n * @param args - The upload arguments including file, server URL, and callbacks\n * @returns Promise that resolves to upload result or null if upload fails\n */\nasync function tusUpload(args: UploadArgs): Promise<UploadResult | null> {\n  const { apiRoute, serverURL, file, mimeType, updateFilename } = args\n\n  const filename = file.name\n  const filetype = file.type\n  const filesize = file.size.toString()\n\n  return new Promise((resolve) => {\n    const upload = new tus.Upload(file, {\n      endpoint: `${serverURL}${apiRoute}/uploads`,\n      retryDelays: TUS_RETRY_DELAYS,\n      chunkSize: TUS_CHUNK_SIZE,\n      metadata: {\n        filename,\n        filetype,\n        filesize,\n        contentType: filetype,\n        contentDisposition: 'inline',\n        contentLength: filesize,\n      },\n      onError: function () {\n        logError(MediaCloudErrors.TUS_UPLOAD_ERROR)\n        toast.error('File upload failed')\n        resolve(null)\n      },\n      onProgress: function (bytesUploaded, bytesTotal) {\n        const percentage = Math.round((bytesUploaded / bytesTotal) * 100)\n        const uploadId = parseUploadId(upload?.url)\n        emitter.emit('update-upload', {\n          id: uploadId,\n          progress: percentage,\n        })\n      },\n      onSuccess: function () {\n        const uploadId = parseUploadId(upload?.url)\n        emitter.emit('upload-completed', { id: uploadId })\n\n        // Trigger post upload processing\n        fetch(`${serverURL}${apiRoute}/uploads/${uploadId}/process`)\n      },\n      onUploadUrlAvailable: function () {\n        const uploadId = parseUploadId(upload?.url)\n        updateFilename(uploadId)\n        emitter.emit('add-upload', { id: uploadId, filename })\n        resolve({\n          uploadId,\n          mimeType,\n          storage: 's3',\n        })\n      },\n    })\n\n    upload.start()\n  })\n}\n\nexport const UploadHandler = createClientUploadHandler({\n  handler: async function (args) {\n    const { serverURL, apiRoute, file, updateFilename } = args\n\n    try {\n      const mimeType = await getFileType(file)\n\n      if (!mimeType) {\n        throwError(MediaCloudErrors.FILE_TYPE_UNKNOWN)\n        return null\n      }\n\n      const isVideoFile = await isVideo(file)\n      const uploadArgs: UploadArgs = {\n        file,\n        serverURL,\n        apiRoute,\n        mimeType,\n        updateFilename,\n      }\n\n      if (isVideoFile) {\n        return await muxUpload(uploadArgs)\n      } else {\n        return await tusUpload(uploadArgs)\n      }\n    } catch (_error) {\n      logError(MediaCloudErrors.UPLOAD_HANDLER_ERROR)\n      toast.error('Upload failed')\n      return null\n    }\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"upload-handler.mjs","names":["filename","uploadArgs: UploadArgs"],"sources":["../../../src/components/upload-handler/upload-handler.tsx"],"sourcesContent":["'use client'\n\nimport * as upchunk from '@mux/upchunk'\nimport * as tus from 'tus-js-client'\n\nimport { toast } from '@payloadcms/ui'\nimport { createClientUploadHandler } from '@payloadcms/plugin-cloud-storage/client'\n\nimport { MediaCloudErrors } from '../../types/errors'\nimport { useMediaCloudEmitter } from '../../hooks/useMediaCloudEmitter'\nimport { useErrorHandler } from '../../hooks/useErrorHandler'\nimport { isVideo, getFileType, sanitizeFilename } from '../../utils/file'\n\ninterface UploadArgs {\n  serverURL: string\n  apiRoute: string\n  file: File\n  mimeType: string\n  updateFilename: (filename: string) => void\n}\n\ninterface UploadResult {\n  filename: string\n  uploadId?: string\n  mimeType: string\n  storage: 'mux' | 's3'\n}\n\ninterface MuxCreateUploadResponse {\n  url: string\n  uploadId: string\n  filename: string\n}\n\nconst { logError, throwError } = useErrorHandler()\nconst emitter = useMediaCloudEmitter()\n\nconst MUX_CHUNK_SIZE = 30720\nconst TUS_CHUNK_SIZE = 1024 * 1024\nconst TUS_RETRY_DELAYS = [0, 1000, 2000, 5000]\n\n/**\n * Utility function to parse upload ID from URL\n * @param uploadUrl - The upload URL to parse\n * @returns The extracted upload ID or empty string if parsing fails\n */\nfunction parseFilename(uploadUrl?: string | null): string {\n  if (!uploadUrl) {\n    logError(MediaCloudErrors.UPLOAD_NO_URL.message)\n    return ''\n  }\n  const url = new URL(uploadUrl)\n  return url.pathname.split('/').pop() || ''\n}\n\n/**\n * Handles Mux video upload with progress tracking\n * @param args - The upload arguments including file, server URL, and callbacks\n * @returns Promise that resolves to upload result or null if upload fails\n */\nasync function muxUpload(args: UploadArgs): Promise<UploadResult | null> {\n  const { file, serverURL, apiRoute, mimeType, updateFilename } = args\n\n  const filename = sanitizeFilename(file.name)\n  updateFilename(filename)\n\n  try {\n    // Request upload URL from Mux\n    const response = await fetch(`${serverURL}${apiRoute}/mux/upload`, {\n      body: JSON.stringify({ filename, mimeType }),\n      credentials: 'include',\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const { url, uploadId } = (await response.json()) as MuxCreateUploadResponse\n\n    // Create upchunk uploader\n    const uploader = await upchunk.createUpload({\n      endpoint: url,\n      file,\n      chunkSize: MUX_CHUNK_SIZE,\n    })\n\n    // Add upload to tracker\n    emitter.emit('addUpload', {\n      filename,\n      uploadId,\n      polling: false,\n      pollingUrl: `${serverURL}${apiRoute}/mux/asset`,\n    })\n\n    // Set up event handlers\n    uploader.on('error', function () {\n      logError(MediaCloudErrors.MUX_UPLOAD_ERROR.message)\n      toast.error('Video upload failed')\n      emitter.emit('removeUpload', { uploadId })\n    })\n\n    uploader.on('progress', function (progress) {\n      emitter.emit('updateUpload', {\n        filename,\n        progress: progress.detail,\n      })\n    })\n\n    uploader.on('success', function () {\n      emitter.emit('uploadComplete', { filename })\n    })\n\n    // Update collection entry\n    // with filename, uploadId, mimeType, and storage\n    return {\n      filename,\n      uploadId,\n      mimeType,\n      storage: 'mux',\n    }\n  } catch (_error) {\n    logError(MediaCloudErrors.MUX_DIRECT_UPLOAD_ERROR.message)\n    toast.error('Video upload failed')\n    return null\n  }\n}\n\n/**\n * Handles TUS file upload with resumable capabilities\n * @param args - The upload arguments including file, server URL, and callbacks\n * @returns Promise that resolves to upload result or null if upload fails\n */\nasync function tusUpload(args: UploadArgs): Promise<UploadResult | null> {\n  const { apiRoute, serverURL, file, mimeType, updateFilename } = args\n\n  const filename = file.name\n  const filetype = file.type\n  const filesize = file.size.toString()\n\n  return new Promise((resolve) => {\n    const upload = new tus.Upload(file, {\n      endpoint: `${serverURL}${apiRoute}/uploads`,\n      retryDelays: TUS_RETRY_DELAYS,\n      chunkSize: TUS_CHUNK_SIZE,\n      metadata: {\n        filename,\n        filetype,\n        filesize,\n        contentType: filetype,\n        contentDisposition: 'inline',\n        contentLength: filesize,\n      },\n      onError: function () {\n        logError(MediaCloudErrors.TUS_UPLOAD_ERROR.message)\n        toast.error('File upload failed')\n        resolve(null)\n      },\n      onProgress: function (bytesUploaded, bytesTotal) {\n        const percentage = Math.round((bytesUploaded / bytesTotal) * 100)\n        const filename = parseFilename(upload?.url)\n        emitter.emit('updateUpload', {\n          filename,\n          progress: percentage,\n        })\n      },\n      onSuccess: function () {\n        const filename = parseFilename(upload?.url)\n        emitter.emit('uploadComplete', { filename })\n\n        // Trigger post upload processing\n        fetch(`${serverURL}${apiRoute}/uploads/${filename}/process`)\n      },\n      onUploadUrlAvailable: function () {\n        const filename = parseFilename(upload?.url)\n        updateFilename(filename)\n        emitter.emit('addUpload', { filename })\n\n        // Update collection entry\n        // with filename, mimeType, and storage\n        resolve({\n          filename,\n          mimeType,\n          storage: 's3',\n        })\n      },\n    })\n\n    upload.start()\n  })\n}\n\nexport const UploadHandler = createClientUploadHandler({\n  handler: async function (args) {\n    const { serverURL, apiRoute, file, updateFilename } = args\n\n    try {\n      const mimeType =\n        (await getFileType(file)) || file.type || 'application/octet-stream'\n\n      if (!mimeType) {\n        throwError(MediaCloudErrors.FILE_TYPE_UNKNOWN)\n        return null\n      }\n\n      const isVideoFile = await isVideo(file)\n      const uploadArgs: UploadArgs = {\n        file,\n        serverURL,\n        apiRoute,\n        mimeType,\n        updateFilename,\n      }\n\n      if (isVideoFile) {\n        return await muxUpload(uploadArgs)\n      } else {\n        return await tusUpload(uploadArgs)\n      }\n    } catch (error) {\n      console.error(\n        '[PLUGIN-MEDIA-CLOUD] Upload handler detailed error:',\n        error\n      )\n      logError(MediaCloudErrors.UPLOAD_HANDLER_ERROR.message)\n      toast.error(\n        `Upload failed: ${error instanceof Error ? error.message : 'Unknown error'}`\n      )\n      return null\n    }\n  },\n})\n"],"mappings":"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"}

package/dist/components/upload-manager/upload-manager.d.mts

@@ -1,11 +1,12 @@
+import { MediaCloudEmitterEvents } from "../../types/index.mjs";
 import React from "react";
 import "./upload-manager.css";
 
 //#region src/components/upload-manager/upload-manager.d.ts
 interface Upload {
-  id: string;
   filename: string;
   progress: number;
+  uploadId?: string;
   error?: string;
   polling?: boolean;
   pollingUrl?: string;
@@ -14,23 +15,12 @@ interface Upload {
 interface UploadManagerContextType {
   showUploadManager?: boolean;
   activeUploads: Upload[];
-  addUpload: (args: AddUploadArgs) => void;
-  updateUpload: (args: UpdateUploadArgs) => void;
+  addUpload: (args: MediaCloudEmitterEvents['addUpload']) => void;
+  updateUpload: (args: MediaCloudEmitterEvents['updateUpload']) => void;
 }
 interface UploadManagerProviderArgs {
   children: React.ReactNode;
 }
-interface AddUploadArgs {
-  id: string;
-  filename: string;
-  polling?: boolean;
-  pollingUrl?: string;
-}
-interface UpdateUploadArgs {
-  id: string;
-  progress: number;
-  polling?: boolean;
-}
 /**
  * Provider component for upload management context
  * @param args - Arguments including children to wrap

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

@@ -2,7 +2,7 @@
 
 import { MediaCloudErrors } from "../../types/errors.mjs";
 import { useErrorHandler } from "../../hooks/useErrorHandler.mjs";
-import { useEmitter } from "../../hooks/useEmitter.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";
@@ -24,6 +24,7 @@ function UploadManagerProvider(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();
@@ -33,7 +34,6 @@ function UploadManagerProvider(args) {
 	useEffect(() => {
 		activeUploadsRef.current = activeUploads;
 	}, [activeUploads]);
-	const emitter = useEmitter();
 	const checkAutoSwitchToCompleted = useCallback((uploads) => {
 		const hasActiveUploads = uploads.some((upload) => upload.status === "uploading");
 		const hasProcessingUploads = uploads.some((upload) => upload.status === "processing");
@@ -45,13 +45,13 @@ function UploadManagerProvider(args) {
 		if (pollingUploads.length === 0) return;
 		const pollAssets = async () => {
 			for (const pollingUpload of pollingUploads) try {
-				const response = await fetch(`${pollingUpload.pollingUrl}?upload_id=${pollingUpload.id}`, {
+				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.id === pollingUpload.id ? {
+						const updatedUploads = prev.map((upload) => upload.uploadId === pollingUpload.uploadId ? {
 							...upload,
 							polling: false,
 							progress: 100,
@@ -62,7 +62,7 @@ function UploadManagerProvider(args) {
 					});
 				}
 			} catch (_error) {
-				logError(MediaCloudErrors.UPLOAD_POLLING_ERROR);
+				logError(MediaCloudErrors.UPLOAD_POLLING_ERROR.message);
 			}
 		};
 		const intervalId = setInterval(pollAssets, 2e3);
@@ -73,26 +73,26 @@ function UploadManagerProvider(args) {
 		logError
 	]);
 	/**
-	* Handles the 'upload-errored' event
+	* Handles the 'uploadError' event
 	* @param event - The upload error event
 	*/
 	const onUploadError = useCallback((event) => {
-		const { id, error } = event;
-		logError(MediaCloudErrors.TUS_UPLOAD_ERROR);
-		setActiveUploads((prev) => prev.map((upload) => upload.id === id ? {
+		const { filename, error } = event;
+		logError(MediaCloudErrors.TUS_UPLOAD_ERROR.message);
+		setActiveUploads((prev) => prev.map((upload) => upload.filename === filename ? {
 			...upload,
 			error,
 			status: "completed"
 		} : upload));
 	}, [logError]);
 	/**
-	* Handles the 'add-upload' event
+	* Handles the 'addUpload' event
 	* @param event - The add upload event
 	*/
 	const onAddUpload = useCallback((event) => {
 		const upload = {
-			id: event.id,
 			filename: event.filename,
+			uploadId: event.uploadId,
 			progress: 0,
 			polling: event.polling,
 			pollingUrl: event.pollingUrl,
@@ -103,12 +103,12 @@ function UploadManagerProvider(args) {
 		if (activeTabRef.current !== "uploading") setActiveTab("uploading");
 	}, []);
 	/**
-	* Handles the 'update-upload' event
+	* Handles the 'updateUpload' event
 	* @param event - The update upload event
 	*/
 	const onUpdateUpload = useCallback((event) => {
-		const { id, progress, polling } = event;
-		setActiveUploads((prev) => prev.map((upload) => upload.id === id ? {
+		const { filename, progress, polling } = event;
+		setActiveUploads((prev) => prev.map((upload) => upload.filename === filename ? {
 			...upload,
 			progress,
 			...polling !== void 0 && { polling },
@@ -116,25 +116,25 @@ function UploadManagerProvider(args) {
 		} : upload));
 	}, []);
 	/**
-	* Handles the 'remove-upload' event
+	* Handles the 'removeUpload' event
 	* @param event - The remove upload event
 	*/
 	const onRemoveUpload = useCallback((event) => {
-		setActiveUploads((prev) => prev.filter((upload) => upload.id !== event.id));
+		setActiveUploads((prev) => prev.filter((upload) => upload.filename !== event.filename));
 	}, []);
 	/**
-	* Handles the 'upload-completed' event
+	* Handles the 'uploadComplete' event
 	* @param event - The upload completed event
 	*/
-	const onUploadCompleted = useCallback((event) => {
-		if (activeUploadsRef.current.find((upload) => upload.id === event.id)?.pollingUrl) setActiveUploads((prev) => prev.map((upload) => upload.id === event.id ? {
+	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.id === event.id ? {
+			const updatedUploads = prev.map((upload) => upload.filename === event.filename ? {
 				...upload,
 				progress: 100,
 				status: "completed"
@@ -144,17 +144,17 @@ function UploadManagerProvider(args) {
 		});
 	}, [checkAutoSwitchToCompleted]);
 	useEffect(() => {
-		emitter.on("add-upload", onAddUpload);
-		emitter.on("update-upload", onUpdateUpload);
-		emitter.on("remove-upload", onRemoveUpload);
-		emitter.on("upload-errored", onUploadError);
-		emitter.on("upload-completed", onUploadCompleted);
+		emitter.on("addUpload", onAddUpload);
+		emitter.on("updateUpload", onUpdateUpload);
+		emitter.on("removeUpload", onRemoveUpload);
+		emitter.on("uploadError", onUploadError);
+		emitter.on("uploadComplete", onUploadComplete);
 		return () => {
-			emitter.off("add-upload", onAddUpload);
-			emitter.off("update-upload", onUpdateUpload);
-			emitter.off("remove-upload", onRemoveUpload);
-			emitter.off("upload-errored", onUploadError);
-			emitter.off("upload-completed", onUploadCompleted);
+			emitter.off("addUpload", onAddUpload);
+			emitter.off("updateUpload", onUpdateUpload);
+			emitter.off("removeUpload", onRemoveUpload);
+			emitter.off("uploadError", onUploadError);
+			emitter.off("uploadComplete", onUploadComplete);
 		};
 	}, [
 		emitter,
@@ -162,16 +162,15 @@ function UploadManagerProvider(args) {
 		onUpdateUpload,
 		onRemoveUpload,
 		onUploadError,
-		onUploadCompleted
+		onUploadComplete
 	]);
 	/**
 	* Adds a new upload to the manager
 	* @param args - The upload arguments
 	*/
 	const addUpload = useCallback((args$1) => {
-		const { id, filename, polling = false, pollingUrl } = args$1;
+		const { filename, polling = false, pollingUrl } = args$1;
 		const upload = {
-			id,
 			filename,
 			progress: 0,
 			polling,
@@ -185,8 +184,8 @@ function UploadManagerProvider(args) {
 	* @param args - The update arguments
 	*/
 	const updateUpload = useCallback((args$1) => {
-		const { id, progress, polling } = args$1;
-		setActiveUploads((prev) => prev.map((upload) => upload.id === id ? {
+		const { filename, progress, polling } = args$1;
+		setActiveUploads((prev) => prev.map((upload) => upload.filename === filename ? {
 			...upload,
 			progress,
 			...polling !== void 0 && { polling },
@@ -204,7 +203,7 @@ function UploadManagerProvider(args) {
 	function renderUploadList(args$1) {
 		const { uploads } = args$1;
 		return <ul>
-        {uploads.map((upload) => <li key={upload.id} data-status={upload.status}>
+        {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">