Make audio-input respect readonly

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

@@ -58,10 +58,12 @@
     loader = defaultLoader,
     audioId = $bindable(),
     onchange = () => {},
+    readonly = false,
   }: {
     loader?: (audioId: string) => Promise<ReadableStream | undefined | typeof handled>,
     audioId: string | undefined,
     onchange?: (audioId: string | undefined) => void;
+    readonly?: boolean;
   } = $props();
 
   const projectContext = useProjectContext();
@@ -253,9 +255,15 @@
 </script>
 {#if supportsAudio}
   {#if !audioId}
-    <Button variant="secondary" icon="i-mdi-microphone-plus" size="sm" iconProps={{class: 'size-5'}} onclick={onGetAudioClick}>
-      {$t`Add audio`}
-    </Button>
+    {#if !readonly}
+      <Button variant="secondary" icon="i-mdi-microphone-plus" size="sm" iconProps={{class: 'size-5'}} onclick={onGetAudioClick}>
+        {$t`Add audio`}
+      </Button>
+    {:else}
+      <div class="text-muted-foreground p-1">
+        {$t`No audio`}
+      </div>
+    {/if}
   {:else if isNotFoundAudioId(audioId)}
     <div class="text-muted-foreground p-1">
       {$t`Audio file not included in Send & Receive`}
@@ -294,21 +302,23 @@
             <time>{zeroDuration}</time> / <time class="text-muted-foreground">{missingDuration}</time>
           {/if}
         </span>
-        <ResponsiveMenu.Root>
-          <ResponsiveMenu.Trigger>
-            {#snippet child({props})}
-              <Button variant="secondary" icon="i-mdi-dots-vertical" size="sm-icon" {...props} />
-            {/snippet}
-          </ResponsiveMenu.Trigger>
-          <ResponsiveMenu.Content>
-            <ResponsiveMenu.Item icon="i-mdi-microphone-plus" onSelect={onGetAudioClick}>
-              {$t`Replace audio`}
-            </ResponsiveMenu.Item>
-            <ResponsiveMenu.Item icon="i-mdi-delete" onSelect={onRemoveAudio}>
-              {$t`Remove audio`}
-            </ResponsiveMenu.Item>
-          </ResponsiveMenu.Content>
-        </ResponsiveMenu.Root>
+        {#if !readonly}
+          <ResponsiveMenu.Root>
+            <ResponsiveMenu.Trigger>
+              {#snippet child({props})}
+                <Button variant="secondary" icon="i-mdi-dots-vertical" size="sm-icon" {...props} />
+              {/snippet}
+            </ResponsiveMenu.Trigger>
+            <ResponsiveMenu.Content>
+              <ResponsiveMenu.Item icon="i-mdi-microphone-plus" onSelect={onGetAudioClick}>
+                {$t`Replace audio`}
+              </ResponsiveMenu.Item>
+              <ResponsiveMenu.Item icon="i-mdi-delete" onSelect={onRemoveAudio}>
+                {$t`Remove audio`}
+              </ResponsiveMenu.Item>
+            </ResponsiveMenu.Content>
+          </ResponsiveMenu.Root>
+        {/if}
       {/if}
       {#key audioId}
         <audio bind:this={audio} onerror={onAudioError}>

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

@@ -50,7 +50,9 @@
           autocapitalize="off"
           onchange={() => onchange?.(ws.wsId, value[ws.wsId], value)} />
       {:else}
-        <AudioInput bind:audioId={value[ws.wsId]} onchange={() => onchange?.(ws.wsId, value[ws.wsId], value)}/>
+        <AudioInput
+          bind:audioId={value[ws.wsId]} onchange={() => onchange?.(ws.wsId, value[ws.wsId], value)}
+          {readonly} />
       {/if}
     </div>
   {/each}

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

@@ -75,7 +75,9 @@
           aria-label={ws.abbreviation}
         />
       {:else}
-        <AudioInput bind:audioId={() => getAudioId(value[ws.wsId]), audioId => setAudioId(audioId, ws.wsId)}/>
+        <AudioInput
+          bind:audioId={() => getAudioId(value[ws.wsId]), audioId => setAudioId(audioId, ws.wsId)}
+          {readonly} />
       {/if}
     </div>
   {/each}

frontend/viewer/src/locales/en.po

@@ -658,6 +658,10 @@ msgstr "New Word"
 msgid "No activity found"
 msgstr "No activity found"
 
+#: src/lib/components/field-editors/audio-input.svelte:264
+msgid "No audio"
+msgstr "No audio"
+
 #: src/lib/history/HistoryView.svelte:78
 msgid "No change name"
 msgstr "No change name"

frontend/viewer/src/locales/es.po

@@ -663,6 +663,10 @@ msgstr "Nueva palabra"
 msgid "No activity found"
 msgstr "No se ha encontrado actividad"
 
+#: src/lib/components/field-editors/audio-input.svelte:264
+msgid "No audio"
+msgstr ""
+
 #: src/lib/history/HistoryView.svelte:78
 msgid "No change name"
 msgstr "Sin cambio de nombre"

frontend/viewer/src/locales/fr.po

@@ -663,6 +663,10 @@ msgstr "Nouveau mot"
 msgid "No activity found"
 msgstr "Aucune activité trouvée"
 
+#: src/lib/components/field-editors/audio-input.svelte:264
+msgid "No audio"
+msgstr ""
+
 #: src/lib/history/HistoryView.svelte:78
 msgid "No change name"
 msgstr "Pas de changement de nom"

frontend/viewer/src/locales/id.po

@@ -663,6 +663,10 @@ msgstr "Kata Baru"
 msgid "No activity found"
 msgstr "Tidak ada aktivitas yang ditemukan"
 
+#: src/lib/components/field-editors/audio-input.svelte:264
+msgid "No audio"
+msgstr ""
+
 #: src/lib/history/HistoryView.svelte:78
 msgid "No change name"
 msgstr "Tidak ada perubahan nama"

frontend/viewer/src/locales/ko.po

@@ -663,6 +663,10 @@ msgstr "새 단어"
 msgid "No activity found"
 msgstr "활동을 찾을 수 없습니다."
 
+#: src/lib/components/field-editors/audio-input.svelte:264
+msgid "No audio"
+msgstr ""
+
 #: src/lib/history/HistoryView.svelte:78
 msgid "No change name"
 msgstr "이름 변경 안 함"