Skip to content

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

  1. Create or open an audio-only memory in the feed (type: "audio")
  2. Tap the audio memory to open the viewer modal
  3. Observe: "Image unavailable for this memory" appears instead of audio player
  4. 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/A with reason)
  • [ ] Verified no duplicate solved-bug log exists for same root cause