Audio Player Not Displayed for Audio Memories
Metadata
- Date:
2026-05-08 - Status:
investigating - Severity:
high - Related issue/ticket:
N/A - Owner:
N/A
About
Overview: - When viewing an audio memory in the MemoryViewerModal, the audio player controls are not displayed - User sees "Image unavailable for this memory" message instead of an audio player - This blocks users from listening to audio memories - Audio memories are supported by the backend feed endpoint (type: "audio") but the frontend has no renderer
Technical Questions: - Is the MemoryViewerModal component designed to handle audio memories? - Why doesn't it have an audio player component like it has a VideoPlayer component? - Are audio memories properly typed in the MemoryFeedItem interface? (Yes, confirmed)
Resources: - /home/lewibs/github/encache1/encache1/main/app/components/memory/memory-viewer-modal.tsx — Modal component that renders memories (only handles visual) - /home/lewibs/github/encache1/encache1/main/app/lib/api/memory/listMemories.ts — MemoryFeedItem type definition (supports "audio") - /home/lewibs/github/encache1/encache1/docs/docs/memories-feed.md — Feed documentation confirms audio type is returned by backend - /home/lewibs/github/encache1/encache1/main/app/__tests__/memory-viewer-modal.test.tsx — Tests for the modal (no audio tests) - /home/lewibs/github/encache1/encache1/main/app/lib/phone-audio-capture.ts — Shows expo-av is available for audio
Steps to cause failure
flowchart LR
A[Backend feed returns audio memory] --> B[User opens memory feed]
B --> C[User clicks on audio memory]
C --> D[MemoryViewerModal opens with audio item]
D --> E{Memory type check}
E -->|visual| F[VideoPlayer renders]
E -->|audio| G["Falls through to placeholder<br/>Image unavailable"]
E -->|text| G
F --> H[User can listen]
G --> I[User CANNOT listen - bug] System
flowchart TD
Feed["Memory Feed Lambda<br/>(returns visual/audio/text)"]
ListAPI["listMemories API<br/>(type: visual|audio|text)"]
Modal["MemoryViewerModal<br/>(only checks for visual)"]
VideoPlayer["VideoPlayer Component<br/>(for visual memories)"]
AudioPlayer["AudioPlayer Component<br/>(MISSING!)"]
Feed -->|session with audio| ListAPI
ListAPI -->|type: audio| Modal
Modal -->|check type| VideoPlayer
Modal -->|audio type| Placeholder["Placeholder<br/>Image unavailable"]
VideoPlayer -->|success| Controls["Video player controls<br/>(play, mute, scrub, etc)"]
Placeholder -->|missing| AudioPlayer
Controls -->|user listens| Success["✓ User can listen"]
AudioPlayer -->|MISSING| Fail["✗ User cannot listen"] Notes: - MemoryFeedItem type supports 3 types: "text", "audio", "visual" - MemoryViewerModal renderItem only renders VideoPlayer when type === "visual" AND processing_status === "complete" AND index === activeIndex - Otherwise renders either Image (if thumbnail) or Placeholder (if no thumbnail) - Audio memories have no thumbnail, so they always fall through to placeholder - No AudioPlayer component exists in the codebase - Backend supports audio types per memories-feed.md documentation
Reproduction Details
- Create or open an audio-only memory in the feed (type: "audio")
- Tap the audio memory to open the viewer modal
- Observe: "Image unavailable for this memory" appears instead of audio player
- Expected: Audio player with controls (play/pause, scrubber, mute, etc.) similar to VideoPlayer
Reproduction test (unit preferred): See memory-viewer-modal.test.tsx — test case needs to be added for audio type
Notes for PR
The root cause is architectural: the MemoryViewerModal was designed only to handle visual memories (videos), not audio memories. The component's renderItem logic checks:
{item.type === "visual" && ... ? (
<VideoPlayer ... />
) : item.thumbnail ? (
<View>...</View>
) : (
<Placeholder /> // <- audio memories end up here
)}
Audio memories have no thumbnail field (they're audio-only), so they always fall through to the placeholder.
The fix requires: 1. Create an AudioPlayer component using expo-av Sound API (similar to VideoPlayer but for audio) 2. Add audio case handling in MemoryViewerModal's renderItem function (check item.type === "audio") 3. Determine if audio metadata (duration, etc.) is needed from backend or if processing_status alone is sufficient 4. Add unit tests for audio player functionality 5. Test with actual audio memory from the feed
Audit Log
| ID | Action | Note | Context |
|---|---|---|---|
| 1 | Create audit log | Initialize bug investigation | bug report: audio player not showing |
| 2 | Read MemoryViewerModal code | Found only VideoPlayer (lines 479-507) | no audio handling, falls to placeholder |
| 3 | Read MemoryFeedItem type | Confirmed "audio" type exists | listMemories.ts supports audio type |
| 4 | Check memories-feed docs | Confirmed backend returns audio type | feed groups by session, returns type: audio |
| 5 | Check test coverage | Only VideoPlayer tests present | memory-viewer-modal.test.tsx has no audio tests |
| 6 | Analyze flow | Traced renderItem logic | audio items have no thumbnail → fall through to placeholder |
| 7 | Check audio libraries | Found expo-av available | phone-audio-capture.ts uses Audio API |
Verification
- [ ] Reproduced failure before fix
- [ ] Reproduction test fails before fix
- [ ] Root cause identified with evidence (CONFIRMED: no audio type handler in renderItem)
- [ ] Fix applied at source (no workaround-only patch)
- [ ] Reproduction test passes after fix
- [ ] Reproduction path now passes
- [ ] Regression test added/updated (or
N/Awith reason) - [ ] Verified no duplicate solved-bug log exists for same root cause