enable file uploads for document audio

website/src/components/edit-word-audio/contribute-audio-panel.tsx

@@ -11,20 +11,34 @@ export function ContributeAudioPanel(p: {
   panelTitle: string
   Icon: IconType
   Component: ContributeAudioComponent
-  word: Dailp.FormFieldsFragment
+  parent: Dailp.FormFieldsFragment | Dailp.DocumentFieldsFragment
 }) {
-  const [_contributeAudioResult, contributeAudio] =
+  const [_contributeDocumentAudioResult, contributeDocumentAudio] =
+    Dailp.useAttachAudioToDocumentMutation()
+  const [_contributeWordAudioResult, contributeWordAudio] =
     Dailp.useAttachAudioToWordMutation()
+
   return (
     <CollapsiblePanel
       title={p.panelTitle}
       content={
         <ContributeAudioSection
           Component={p.Component}
           processUploadedAudio={async (resourceUrl: string) => {
-            const result = await contributeAudio({
-              input: { wordId: p.word.id, contributorAudioUrl: resourceUrl },
-            })
+            const result =
+              p.parent.__typename == "AnnotatedForm"
+                ? await contributeWordAudio({
+                    input: {
+                      contributorAudioUrl: resourceUrl,
+                      wordId: p.parent.id,
+                    },
+                  })
+                : await contributeDocumentAudio({
+                    input: {
+                      contributorAudioUrl: resourceUrl,
+                      documentId: p.parent.id,
+                    },
+                  })
             return result.error === undefined
           }}
         />

website/src/components/edit-word-audio/record.tsx

@@ -19,7 +19,7 @@ export function RecordWordAudioPanel(p: { word: Dailp.FormFieldsFragment }) {
       panelTitle="Record Audio"
       Icon={FaMicrophone}
       Component={RecordAudioContent}
-      word={p.word}
+      parent={p.word}
     />
   )
 }

website/src/components/edit-word-audio/upload.tsx

@@ -8,13 +8,15 @@ import { contributeAudioOptions } from "../contribute-audio-section.css"
 import { subtleButton } from "../subtle-button.css"
 import { ContributeAudioPanel } from "./contribute-audio-panel"
 
-export function UploadAudioPanel(p: { word: Dailp.FormFieldsFragment }) {
+export function UploadAudioPanel(p: {
+  uploadTo: Dailp.FormFieldsFragment | Dailp.DocumentFieldsFragment
+}) {
   return (
     <ContributeAudioPanel
       panelTitle="Upload Audio"
       Icon={MdUploadFile}
       Component={UploadAudioContent}
-      word={p.word}
+      parent={p.uploadTo}
     />
   )
 }

website/src/pages/documents/document.page.tsx

@@ -25,6 +25,7 @@ import { AudioPlayer, Breadcrumbs, Button, Link } from "src/components"
 import { IconTextButton } from "src/components/button"
 import { CommentValueProvider } from "src/components/edit-comment-feature"
 import { DocumentAudioWithCurate } from "src/components/edit-word-audio/editor"
+import { UploadAudioPanel } from "src/components/edit-word-audio/upload"
 import { RecordDocumentAudioPanel } from "src/components/record-document-audio-panel"
 import { useMediaQuery } from "src/custom-hooks"
 import { FormProvider as FormProviderDoc } from "src/edit-doc-data-form-context"
@@ -585,7 +586,10 @@ export const DocumentTitleHeader = (p: {
             </>
           )}
           {(role === UserRole.Editor || role === UserRole.Contributor) && (
-            <RecordDocumentAudioPanel document={p.doc} />
+            <>
+              <RecordDocumentAudioPanel document={p.doc} />
+              <UploadAudioPanel uploadTo={p.doc}></UploadAudioPanel>
+            </>
           )}
         </div>
       </div>