diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js index c2bbe38..9ab3317 100644 --- a/src/app/(payload)/admin/importMap.js +++ b/src/app/(payload)/admin/importMap.js @@ -11,6 +11,7 @@ import { default as default_2f2033acccb3be245f1a85f7b4271dac } from '@/component import { default as default_4b88a624e9f0b376cffcc6814d459adb } from '@/components/admin/assignments/AssignmentMembersField' import { default as default_0edde40a6ccd30c893b1227360f69360 } from '@/components/static/TickDurationDescription' import { default as default_2d468cc5cf0b647ffca3201592c20825 } from '@/components/static/WarningMessage' +import { AudioPreviewField as AudioPreviewField_6bccef9bf4ea41ed573ab9f36fa579b2 } from '@/components/admin/voiceover/AudioPreviewField' import { default as default_7fa52484aec46e988e9cfb5e86c0c759 } from '@/components/admin/narrative-flow/NarrativeFlowEditor' import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' @@ -58,6 +59,7 @@ export const importMap = { "@/components/admin/assignments/AssignmentMembersField#default": default_4b88a624e9f0b376cffcc6814d459adb, "@/components/static/TickDurationDescription#default": default_0edde40a6ccd30c893b1227360f69360, "@/components/static/WarningMessage#default": default_2d468cc5cf0b647ffca3201592c20825, + "@/components/admin/voiceover/AudioPreviewField#AudioPreviewField": AudioPreviewField_6bccef9bf4ea41ed573ab9f36fa579b2, "@/components/admin/narrative-flow/NarrativeFlowEditor#default": default_7fa52484aec46e988e9cfb5e86c0c759, "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, diff --git a/src/collections/voiceover/VoiceSubmissions.ts b/src/collections/voiceover/VoiceSubmissions.ts index 4c4aa99..3234dec 100644 --- a/src/collections/voiceover/VoiceSubmissions.ts +++ b/src/collections/voiceover/VoiceSubmissions.ts @@ -35,6 +35,16 @@ export const VoiceSubmissions: CollectionConfig = { delete: ({ req }) => hasRoles(["developer"], req.user), }, fields: [ + { + name: "audioPreview", + type: "ui", + label: "Take audio", + admin: { + components: { + Field: "@/components/admin/voiceover/AudioPreviewField#AudioPreviewField", + }, + }, + }, { name: "script", type: "relationship", diff --git a/src/components/admin/voiceover/AudioPreviewField.tsx b/src/components/admin/voiceover/AudioPreviewField.tsx new file mode 100644 index 0000000..4f9a85a --- /dev/null +++ b/src/components/admin/voiceover/AudioPreviewField.tsx @@ -0,0 +1,64 @@ +"use client"; + +import { useDocumentInfo } from "@payloadcms/ui"; +import React from "react"; + +type UploadDocData = { + filename?: string | null; + filesize?: number | null; + mimeType?: string | null; + url?: string | null; +}; + +const formatBytes = (bytes: number | null | undefined): string => { + if (!bytes || bytes <= 0) return ""; + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`; + return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; +}; + +/** + * Inline audio player for upload collections. Registered on voice-submissions as + * a `ui` field so reviewers can listen to a take directly in the admin panel. + * Reads the document's file URL from document info (no form state involved). + */ +export const AudioPreviewField = () => { + const { data } = useDocumentInfo(); + const doc = (data ?? {}) as UploadDocData; + const url = doc.url ?? (doc.filename ? `/api/media/file/${doc.filename}` : ""); + + if (!url) { + return ( +

+ No audio file on this submission yet. +

+ ); + } + + const meta = [doc.filename, doc.mimeType, formatBytes(doc.filesize)].filter(Boolean).join(" | "); + + return ( +
+ +

+ {meta} +

+
+ ); +}; + +export default AudioPreviewField;