Skip to content

feat: add audio select menu#447

Open
harbassan wants to merge 5 commits into
vps-137-standardize-file-storage-and-metadata-managementfrom
vps-147-allow-attaching-already-uploaded-audio-files-to-audio
Open

feat: add audio select menu#447
harbassan wants to merge 5 commits into
vps-137-standardize-file-storage-and-metadata-managementfrom
vps-147-allow-attaching-already-uploaded-audio-files-to-audio

Conversation

@harbassan

@harbassan harbassan commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Issue

A clear and concise description of what the issue is

Solution

A clear and concise description of what the solution is

Risk

Potential risks that this PR might bring

Checklist

  • Acceptance criteria met
  • Wiki documentation is written and up to date
  • Unit tests written and passing
  • Integration tests written and passing
  • Continuous integration build passing

Summary by CodeRabbit

  • New Features

    • Added audio asset browsing, preview playback, selection, and upload capabilities in the authoring sidebar.
    • Added support for retrieving uploaded files by type, including images, audio, and documents.
    • Added audio components to the authoring canvas.
  • Bug Fixes

    • Updated image retrieval to use the corrected API route.
    • Improved audio playback cleanup when switching or removing components.

@linear

linear Bot commented Jul 17, 2026

Copy link
Copy Markdown

VPS-147

@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 57ee7a56-481e-45b2-83c6-7a39416bf28a

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

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

The PR generalizes file retrieval by type and adds frontend audio authoring support, including typed audio components, upload and selection flows, audio playback lists, scene integration, and updated image endpoint usage.

Changes

Audio file authoring

Layer / File(s) Summary
Generalized file retrieval
backend/src/db/daos/fileDao.js, backend/src/routes/api/files.js, backend/src/routes/api/__tests__/filesApi.test.js, frontend/src/features/authoring/images.tsx
File retrieval now filters by scenario and validated type, with image callers and API tests using the singular type route.
Audio data and selection flow
frontend/src/features/authoring/types.ts, frontend/src/features/authoring/audio/AudioSelectModal.tsx, frontend/src/features/authoring/audio/AudioListContainer.tsx
Audio scene and uploaded-file types are added; existing audio files can be fetched, played, selected, and added to the visual scene.
Audio upload and scene integration
frontend/src/features/authoring/audio/AudioManager.tsx, frontend/src/features/authoring/audio/EditAudioComponent.tsx, frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx, frontend/src/features/authoring/CanvasSideBar/AudioManager.jsx
Audio upload and selection controls are integrated into the sidebar, scene audio components use the shared type, and playback cleanup is expanded.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant AuthoringUI
  participant AudioManager
  participant FilesAPI
  participant AudioSelectModal
  participant VisualScene
  AuthoringUI->>AudioManager: Open audio controls
  AudioManager->>FilesAPI: Upload audio or open selection
  FilesAPI-->>AudioManager: UploadedFile metadata
  AudioManager->>AudioSelectModal: Fetch existing audio
  AudioSelectModal-->>AudioManager: Selected UploadedFile
  AudioManager->>VisualScene: Add AudioComponent
Loading

Possibly related PRs

  • UoaWDCC/VPS#424: Modifies the overlapping audio component handling in EditAudioComponent.tsx.
  • UoaWDCC/VPS#446: Extends the related file DAO and image-list API refactor.

Suggested labels: backend

Suggested reviewers: leowla

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description only contains template placeholders and omits the actual issue, solution, risk, and checklist details. Replace the placeholders with concrete details for each section: issue, solution, risk, and checklist status.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: adding an audio select menu.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch vps-147-allow-attaching-already-uploaded-audio-files-to-audio

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

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

@harbassan

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@backend/src/routes/api/files.js`:
- Around line 108-118: The GET route using "/:scenarioId/:type" conflicts with
single-file retrieval routes by interpreting file IDs as types. Update this
route to a distinct type-filter path, such as "/:scenarioId/type/:type", while
preserving VALID_TYPES validation and retrieveFiles usage; update all callers
and tests to use the new path and keep file-ID requests resolving to their
existing handler.

In `@frontend/src/features/authoring/audio/AudioManager.tsx`:
- Around line 16-34: Update addNewAudio and its picker usages to restrict
selection with accept="audio/*", and validate file.type.startsWith("audio/")
before calling api.post or creating the audio component. Reject non-audio files
early while preserving the existing upload flow for valid audio files.
- Around line 77-93: Replace the click-only dropdown trigger and href-less
anchors in AudioManager.tsx (lines 77-93) with native buttons while preserving
showFilePicker and showModal behavior. In AudioListContainer.tsx (lines 47-68),
render selection and playback as sibling buttons rather than nesting one
interactive control inside another.
- Around line 105-108: Update the audios.map rendering in the audio editor list
to use each audio component’s stable component ID as the React key instead of
the array index. Preserve the existing EditAudioComponent rendering and pass the
ID-based key from the audio object.

In `@frontend/src/features/authoring/audio/AudioSelectModal.tsx`:
- Around line 56-60: Update handleSubmit to clear the selected audio after
addExistingAudio completes, while preserving the existing close and add flow so
reopening the modal starts with no selection.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7a26c7dd-6c9c-4235-8193-ddedec7873da

📥 Commits

Reviewing files that changed from the base of the PR and between 6f00e5f and 973b882.

📒 Files selected for processing (11)
  • backend/src/db/daos/fileDao.js
  • backend/src/routes/api/__tests__/filesApi.test.js
  • backend/src/routes/api/files.js
  • frontend/src/features/authoring/CanvasSideBar/AudioManager.jsx
  • frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
  • frontend/src/features/authoring/audio/AudioListContainer.tsx
  • frontend/src/features/authoring/audio/AudioManager.tsx
  • frontend/src/features/authoring/audio/AudioSelectModal.tsx
  • frontend/src/features/authoring/audio/EditAudioComponent.tsx
  • frontend/src/features/authoring/images.tsx
  • frontend/src/features/authoring/types.ts
💤 Files with no reviewable changes (1)
  • frontend/src/features/authoring/CanvasSideBar/AudioManager.jsx

Comment thread backend/src/routes/api/files.js
Comment thread frontend/src/features/authoring/audio/AudioManager.tsx
Comment thread frontend/src/features/authoring/audio/AudioManager.tsx Outdated
Comment thread frontend/src/features/authoring/audio/AudioManager.tsx
Comment thread frontend/src/features/authoring/audio/AudioSelectModal.tsx
@harbassan

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant