Show relevant context when recording audio

frontend/viewer/src/lib/DialogsProvider.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import NewEntryDialog from '$lib/entry-editor/NewEntryDialog.svelte';
   import DeleteDialog from '$lib/entry-editor/DeleteDialog.svelte';
-  import AudioDialog from './components/audio/AudioDialog.svelte';
   import {useDialogsService} from '$lib/services/dialogs-service';
   import {useProjectContext} from '$lib/project-context.svelte';
   const projectContext = useProjectContext();
@@ -14,6 +13,5 @@
 
 {#if projectContext.maybeApi}
   <NewEntryDialog/>
-  <AudioDialog/>
 {/if}
 <DeleteDialog bind:this={deleteDialog}/>

frontend/viewer/src/lib/components/audio/AudioDialog.svelte

@@ -2,39 +2,35 @@
   import {t} from 'svelte-i18n-lingui';
   import {Button} from '$lib/components/ui/button';
   import * as Dialog from '$lib/components/ui/dialog';
-  import {useDialogsService} from '$lib/services/dialogs-service.js';
   import {useBackHandler} from '$lib/utils/back-handler.svelte';
   import {watch} from 'runed';
   import AudioProvider from './audio-provider.svelte';
   import AudioEditor from './audio-editor.svelte';
   import {useLexboxApi} from '$lib/services/service-provider';
   import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/UploadFileResult';
   import {AppNotification} from '$lib/notifications/notifications';
-
-  let open = $state(false);
+  import type {Snippet} from 'svelte';
+  import {cn} from '$lib/utils';
+
+  let {
+    open = $bindable(false),
+    title = undefined,
+    onSubmit = () => {},
+    children = undefined
+  } : {
+    open: boolean,
+    title?: string,
+    onSubmit?: (audioId: string) => void,
+    children?: Snippet
+  } = $props();
   useBackHandler({addToStack: () => open, onBack: () => open = false, key: 'audio-dialog'});
-  const dialogsService = useDialogsService();
-  dialogsService.invokeAudioDialog = getAudio;
   const lexboxApi = useLexboxApi();
 
   let submitting = $state(false);
   let selectedFile = $state<File>();
   let finalAudio = $state<File>();
   const tooBig = $derived((finalAudio?.size ?? 0) > 10 * 1024 * 1024);
 
-  let requester: {
-    resolve: (mediaUri: string | undefined) => void
-  } | undefined;
-
-
-  async function getAudio() {
-    reset();
-    return new Promise<string | undefined>((resolve) => {
-      requester = {resolve};
-      open = true;
-    });
-  }
-
   watch(() => open, () => {
     if (!open) reset();
   });
@@ -49,8 +45,6 @@
   }
 
   function reset() {
-    requester?.resolve(undefined);
-    requester = undefined;
     clearAudio();
   }
 
@@ -61,12 +55,11 @@
 
   async function submitAudio() {
     if (!selectedFile) throw new Error('No audio to upload');
-    if (!requester) throw new Error('No requester');
 
     submitting = true;
     try {
       const audioId = await uploadAudio();
-      requester.resolve(audioId);
+      onSubmit(audioId);
       close();
     } finally {
       submitting = false;
@@ -92,6 +85,7 @@
       case UploadFileResult.Error:
         throw new Error(response.errorMessage ?? $t`Unknown error`);
     }
+    if (!response.mediaUri) throw new Error(`No mediaUri returned`);
 
     return response.mediaUri;
   }
@@ -138,10 +132,15 @@
 
 
 <Dialog.Root bind:open>
-  <Dialog.DialogContent class="grid-rows-[auto_1fr_auto] sm:min-h-[min(calc(100%-16px),30rem)]">
+  <Dialog.DialogContent onOpenAutoFocus={(e) => e.preventDefault()} class={cn('sm:min-h-[min(calc(100%-16px),30rem)]',
+    children ? 'grid-rows-[auto_auto_1fr]' : 'grid-rows-[auto_1fr]')}>
     <Dialog.DialogHeader>
-      <Dialog.DialogTitle>{$t`Add audio`}</Dialog.DialogTitle>
+      <Dialog.DialogTitle>{title || $t`Add audio`}</Dialog.DialogTitle>
     </Dialog.DialogHeader>
+    {#if children}
+      <!-- Ensure children only occupy 1 grid row -->
+      <div>{@render children?.()}</div>
+    {/if}
     {#if !selectedFile}
       <AudioProvider {onFileSelected} {onRecordingComplete}/>
     {:else}

frontend/viewer/src/lib/components/audio/audio-editor.svelte

@@ -96,11 +96,9 @@
       <span class="col-span-4">{$t`${finalAudio.type}`}</span>
     </DevContent>
   </span>
-    <!-- contain-size prevents wavesurfer from freaking out inside a grid
-    contain-inline-size would improve the height reactivity of the waveform, but
-    results in the waveform sometimes change its height unexpectedly -->
-    <!-- pb-8 ensures the timeline is in the bounds of the container -->
-    <div class="w-full grow max-h-32 pb-3 contain-size border-y">
+    <!-- contain-inline-size prevents wavesurfer from freaking out inside a grid -->
+    <!-- pb ensures the waveform timeline is in the bounds of this container -->
+    <div class="w-full h-32 pb-3 contain-inline-size border-y">
       <Waveform audio={finalAudio} bind:playing bind:audioApi bind:duration showTimeline autoplay class="size-full"/>
     </div>
     <div class="flex gap-2">

frontend/viewer/src/lib/components/audio/audio-provider.svelte

@@ -85,17 +85,20 @@
             {$t`Hold to record or\npress and release to start recording.`}
           </span>
         {/if}
-        <Recorder.Trigger bind:walkieTalkieMode />
+        <Recorder.Trigger autofocus bind:walkieTalkieMode />
       </div>
     </Recorder.Root>
   </div>
-</div>
 
-<!-- Hidden file input -->
-<input
-  bind:this={fileInputElement}
-  type="file"
-  accept="audio/*"
-  onchange={handleFileSelection}
-  class="hidden"
-/>
+  <!--
+  Hidden file input.
+  Should not be at root level as it might trigger a margin/gap.
+  -->
+  <input
+    bind:this={fileInputElement}
+    type="file"
+    accept="audio/*"
+    onchange={handleFileSelection}
+    class="hidden"
+  />
+</div>

frontend/viewer/src/lib/components/editor/field/field-root.svelte

@@ -1,23 +1,32 @@
 <script lang="ts" module>
   import {Context} from 'runed';
-
-  type FieldRootStateProps = {
+  import type {FieldId} from '$lib/entry-editor/field-data';
+  const fieldIdSymbol = Symbol('fw-lite-field-id');
+  class FieldRootState {
+    //require using the constructor when this type is used
+    private readonly [fieldIdSymbol] = true;
     labelId: string;
-  };
+    fieldId? = $state<FieldId>();
+    label? = $state<string>();
+
+    constructor(labelId: string) {
+      this.labelId = labelId;
+    }
+  }
 
-  const fieldRootContext = new Context<FieldRootStateProps>('Field.Root');
+  const fieldRootContext = new Context<FieldRootState>('Field.Root');
 
-  export function usesFieldRoot(props: FieldRootStateProps): FieldRootStateProps {
+  export function usesFieldRoot(props: FieldRootState): FieldRootState {
     return fieldRootContext.set(props);
   }
 
-  type FieldTitleStateProps = FieldRootStateProps;
+  type FieldTitleStateProps = FieldRootState;
 
   export function useFieldTitle(): FieldTitleStateProps {
     return fieldRootContext.get();
   }
 
-  type FieldBodyStateProps = FieldRootStateProps;
+  type FieldBodyStateProps = FieldRootState;
   export function tryUseFieldBody(): FieldBodyStateProps | undefined {
     return fieldRootContext.getOr(undefined);
   }
@@ -28,19 +37,23 @@
   import type {WithElementRef} from 'bits-ui';
   import type {HTMLAttributes} from 'svelte/elements';
 
-  type FieldRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+  type FieldRootProps = { fieldId?: FieldId } & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
   const fieldLabelId = $props.id();
-  usesFieldRoot({labelId: fieldLabelId});
+  const fieldProps = usesFieldRoot(new FieldRootState(fieldLabelId));
+  $effect(() => {
+    fieldProps.fieldId = fieldId;
+  });
 
   const {
     class: className,
     children,
+    fieldId = undefined,
     ref = $bindable(null),
     ...restProps
   }: FieldRootProps = $props();
 </script>
 
-<div class={cn('grid grid-cols-subgrid col-span-full items-baseline', className)} {...restProps}>
+<div style="grid-area: {fieldId}" class={cn('grid grid-cols-subgrid col-span-full items-baseline', className)} {...restProps}>
   {@render children?.()}
 </div>

frontend/viewer/src/lib/components/editor/field/field-title.svelte

@@ -17,6 +17,9 @@
 
   const view = useCurrentView();
   const label = $derived(pickViewText(name, $view.type));
+  $effect(() => {
+    stateProps.label = label;
+  });
   const title = $derived(typeof name === 'string' ? undefined
     : $view.type === 'fw-classic'
       ? $t`${name.lite} (FieldWorks Lite)`

frontend/viewer/src/lib/components/field-editors/audio-input.svelte

@@ -50,26 +50,32 @@
   import {formatDuration, normalizeDuration} from '$lib/components/ui/format';
   import {t} from 'svelte-i18n-lingui';
   import {ReadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/ReadFileResult';
-  import {useDialogsService} from '$lib/services/dialogs-service';
   import * as ResponsiveMenu from '$lib/components/responsive-menu';
+  import AudioDialog from '$lib/components/audio/AudioDialog.svelte';
+  import {tryUseFieldBody} from '$lib/components/editor/field/field-root.svelte';
+  import {useSubjectContext} from '$lib/entry-editor/object-editors/subject-context';
+  import LexiconEditorPrimitive from '$lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte';
+  import OverrideFields from '$lib/OverrideFields.svelte';
 
   const handled = Symbol();
   let {
     loader = defaultLoader,
     audioId = $bindable(),
     onchange = () => {},
     readonly = false,
+    wsLabel = undefined,
   }: {
     loader?: (audioId: string) => Promise<{stream: ReadableStream, filename: string} | undefined | typeof handled>,
     audioId: string | undefined,
     onchange?: (audioId: string | undefined) => void;
     readonly?: boolean;
+    wsLabel?: string;
   } = $props();
 
   const projectContext = useProjectContext();
   const api = $derived(projectContext?.maybeApi);
   const supportsAudio = $derived(projectContext?.features.audio);
-  const dialogService = useDialogsService();
+  const fieldProps = tryUseFieldBody();
 
   async function defaultLoader(audioId: string) {
     if (!api) throw new Error('No api, unable to load audio');
@@ -217,12 +223,10 @@
   });
   let smallestUnit = $derived(totalLength.minutes > 0 ? 'seconds' as const : 'milliseconds' as const);
 
-  async function onGetAudioClick() {
-    const result = await dialogService.getAudio();
-    if (result) {
-      audioId = result;
-      onchange(audioId)
-    }
+  let audioDialogOpen = $state(false);
+  function onAudioDialogSubmit(newAudioId: string) {
+    audioId = newAudioId;
+    onchange(newAudioId);
   }
 
   function onRemoveAudio() {
@@ -264,11 +268,26 @@
     return audio.error.code === MediaError.MEDIA_ERR_NETWORK &&
       audio.error.message?.includes('demuxer seek failed');
   }
+  let dialogTitle = $derived(fieldProps?.label && wsLabel ? `${fieldProps.label}: ${wsLabel}` : fieldProps?.label || wsLabel);
+  let subject = useSubjectContext();
 </script>
 {#if supportsAudio}
+  {#if !readonly}
+    <AudioDialog title={dialogTitle} bind:open={audioDialogOpen} onSubmit={onAudioDialogSubmit}>
+      {#if subject?.current}
+        <OverrideFields shownFields={fieldProps?.fieldId ? [fieldProps.fieldId] : []}>
+          <LexiconEditorPrimitive object={subject.current}/>
+        </OverrideFields>
+      {/if}
+    </AudioDialog>
+  {/if}
   {#if !audioId}
     {#if !readonly}
-      <Button variant="secondary" icon="i-mdi-microphone-plus" size="sm" iconProps={{class: 'size-5'}} onclick={onGetAudioClick}>
+      <Button variant="secondary"
+              icon="i-mdi-microphone-plus"
+              size="sm"
+              iconProps={{class: 'size-5'}}
+              onclick={() => audioDialogOpen = true}>
         {$t`Add audio`}
       </Button>
     {:else}
@@ -322,7 +341,7 @@
           </ResponsiveMenu.Trigger>
           <ResponsiveMenu.Content>
             {#if !readonly}
-              <ResponsiveMenu.Item icon="i-mdi-microphone-plus" onSelect={onGetAudioClick}>
+              <ResponsiveMenu.Item icon="i-mdi-microphone-plus" onSelect={() => audioDialogOpen = true}>
                 {$t`Replace audio`}
               </ResponsiveMenu.Item>
               <ResponsiveMenu.Item icon="i-mdi-delete" onSelect={onRemoveAudio}>

frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte

@@ -52,6 +52,7 @@
       {:else}
         <AudioInput
           bind:audioId={value[ws.wsId]} onchange={() => onchange?.(ws.wsId, value[ws.wsId], value)}
+          wsLabel={ws.abbreviation}
           {readonly} />
       {/if}
     </div>

frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte

@@ -77,6 +77,7 @@
       {:else}
         <AudioInput
           bind:audioId={() => getAudioId(value[ws.wsId]), audioId => setAudioId(audioId, ws.wsId)}
+          wsLabel={ws.abbreviation}
           {readonly} />
       {/if}
     </div>