Make audio-input respect readonly

[myieye]

Before:

After:

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

Adds a readonly prop to AudioInput to gate UI controls. Forwards readonly from multi-ws and rich-multi-ws inputs. Updates locales to include the new "No audio" string. No non-UI logic changes.

Changes

Cohort / File(s)	Summary
Audio input readonly support frontend/viewer/src/lib/components/field-editors/audio-input.svelte	Adds public prop readonly?: boolean (default false). Hides Add audio button and shows “No audio” when no audio in readonly mode; disables edit dropdown when readonly. No changes when readonly is false.
Readonly prop forwarding frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte, frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte	Forwards {readonly} to AudioInput; formatting adjusted to multiline. No other logic changes.
Locale additions frontend/viewer/src/locales/en.po, frontend/viewer/src/locales/es.po, frontend/viewer/src/locales/fr.po, frontend/viewer/src/locales/id.po, frontend/viewer/src/locales/ko.po	Adds msgid "No audio" entries (en translated; others empty). References audio-input.svelte:264. No changes to existing messages.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• show audio fields to play back audio for FW classic projects #1775 — Also modifies audio-input.svelte to add a readonly prop and forwards it from multi-ws components.
• Update frontend/viewer/src/locales #1855 — Introduces the same "No audio" string and related localization updates.
• Add audio recording and file picking #1817 — Prior changes to audio-input.svelte UI/prop behavior (dialog integration, bindable audioId).

Suggested labels

💻 FW Lite, 📦 Lexbox

Suggested reviewers

• hahn-kev

Poem

Bun up, ears perked, I tip-tap code,
A quiet toggle: readonly mode.
No audio? I’ll say it plain—
In many tongues, the same refrain.
I hop along, controls at ease,
Less clicky chaos, more gentle breeze. 🐇🎧

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch make-audio-input-respect-readonly

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

UI unit Tests

  1 files  ±  0   40 suites  +37   23s ⏱️ +23s
 82 tests + 72   82 ✅ + 72  0 💤 ±0  0 ❌ ±0 
116 runs  +106  116 ✅ +106  0 💤 ±0  0 ❌ ±0 

Results for commit 5f6a003. ± Comparison against base commit c20ed56.

This pull request removes 10 and adds 82 tests. Note that renamed tests count towards both.

src/index.test.ts ‑ password hashing > can hash a pw using sha1
src/lib/i18n/i18n.test.ts ‑ buildRegionalLocaleRegex > should find all regional locales for available locales
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return en by default
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return en if no user locale is provided and acceptLanguageHeader does not have any supported locales
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return regional locale from acceptLanguageHeader if it has a higher quality rating than the regionless locale
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return supported locale from acceptLanguageHeader with highest quality rating if no user locale is provided
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return user locale if acceptLanguageHeader does not provide a regional/more specific locale
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return user locale if acceptLanguageHeader does not provide a regional/more specific locale with a higher quality rating
src/lib/i18n/i18n.test.ts ‑ pickBestLocale > should return user locale if acceptLanguageHeader is not provided
src/lib/user.test.ts ‑ jwtToUser > should convert a jwt token to a LexAuthUser

src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > accepts parent values when not dirty
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > does NOT guard against stomping deep changes, because StompGuard can't detect them
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > ignores parent values when dirty
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > initializes with the parent value
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > keeps subscribers up to date when it becomes dirty
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > pushs changes to parent
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > reverts new parent values when ignored
src/lib/components/stomp/stomp-guard.svelte.test.ts ‑ StompGuard > starts accepting parent changes again after a flush
src/lib/components/ui/format/format-duration.test.ts ‑ formatDuration > formats durations
src/lib/components/ui/format/format-duration.test.ts ‑ formatDuration > formats durations with smallest unit
…

♻️ This comment has been updated with latest results.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Aug 22, 2025, 9:57 AM

[github-actions]

C# Unit Tests

130 tests  ±0   130 ✅ ±0   18s ⏱️ -1s
 20 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 5f6a003. ± Comparison against base commit c20ed56.

♻️ This comment has been updated with latest results.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (5)

frontend/viewer/src/locales/fr.po (1)

666-669: Translate "No audio" in French to avoid fallback to English.

Provide a localized msgstr to keep UX consistent with other translated audio strings.

Apply this diff:

 msgid "No audio"
-msgstr ""
+msgstr "Aucun audio"

frontend/viewer/src/locales/es.po (1)

666-669: Add Spanish translation for "No audio".

Untranslated strings will render in English; suggest a concise placeholder.

 msgid "No audio"
-msgstr ""
+msgstr "Sin audio"

frontend/viewer/src/locales/ko.po (1)

666-669: Add Korean translation for "No audio".

Fill in msgstr to match surrounding audio labels.

 msgid "No audio"
-msgstr ""
+msgstr "오디오 없음"

frontend/viewer/src/locales/id.po (1)

666-669: Add Indonesian translation for "No audio".

Prevents fallback to English in readonly placeholder.

 msgid "No audio"
-msgstr ""
+msgstr "Tidak ada audio"

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

258-266: Nice RO gating and UX copy

Hiding “Add audio” in RO and showing a localized “No audio” placeholder matches expectations. i18n key usage via $t looks correct.

For minor a11y improvement, consider announcing this state change to screen readers when it toggles:

-      <div class="text-muted-foreground p-1">
+      <div class="text-muted-foreground p-1" role="status" aria-live="polite">
         {$t`No audio`}
       </div>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 16af514 and 2da6d6d.

📒 Files selected for processing (8)

• frontend/viewer/src/lib/components/field-editors/audio-input.svelte (3 hunks)
• frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte (1 hunks)
• frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte (1 hunks)
• frontend/viewer/src/locales/en.po (1 hunks)
• frontend/viewer/src/locales/es.po (1 hunks)
• frontend/viewer/src/locales/fr.po (1 hunks)
• frontend/viewer/src/locales/id.po (1 hunks)
• frontend/viewer/src/locales/ko.po (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-06-02T14:27:02.745Z

Learnt from: myieye
PR: sillsdev/languageforge-lexbox#1720
File: frontend/viewer/src/locales/es.json:1786-1790
Timestamp: 2025-06-02T14:27:02.745Z
Learning: Spanish locale file (frontend/viewer/src/locales/es.json) contains generated code that may have null line numbers in origin entries due to limitations in the code generation process.

Applied to files:

• frontend/viewer/src/locales/es.po

📚 Learning: 2025-05-27T06:18:33.852Z

Learnt from: hahn-kev
PR: sillsdev/languageforge-lexbox#1710
File: frontend/viewer/src/project/browse/BrowseView.svelte:17-19
Timestamp: 2025-05-27T06:18:33.852Z
Learning: The NewEntryButton component in frontend/viewer/src/project/NewEntryButton.svelte already internally checks features.write permission and conditionally renders based on write access, so external disabled props are not needed.

Applied to files:

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Build UI / publish-ui
• GitHub Check: Build API / publish-api
• GitHub Check: check-and-lint
• GitHub Check: frontend-component-unit-tests
• GitHub Check: Build FW Lite and run tests
• GitHub Check: frontend

🔇 Additional comments (4)

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

305-321: Edit actions correctly hidden in read-only

Conditionally rendering the actions menu only when !readonly prevents replace/remove in RO while still allowing playback/seek. This is the right tradeoff for “read-only”.

---

61-67: Audit complete: readonly prop correctly forwarded in all <AudioInput> instances
The new readonly prop (defaulting to false) maintains backward compatibility and matches other editors’ patterns. Verified that every <AudioInput> usage forwards {readonly}:

• frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte (lines 78–81)
• frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte (lines 53–56)

No missing forwards detected—approving these changes.

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

78-81: Readonly is forwarded correctly to AudioInput

Forwarding {readonly} alongside the existing binder keeps behavior consistent with other editors. No behavioral regressions expected.

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

53-56: Readonly forwarding added and looks good

Passing {readonly} to AudioInput brings the audio branch in line with the text inputs’ RO behavior. Binder and onchange wiring are unchanged.

[hahn-kev]

This seemed like a nice place to insert this small tweak. It needs more work but it's there now.