Remove Memory Viewer Processing State Overlays

Status: draft
Type: plan
Last updated: 2025-05-10

System Intent

Remove the "Processing…" and "Processing failed" state overlays from the memory-viewer-modal component to enable immediate video playback regardless of processing status. Users should see all videos watchable at all times, with no state-gating overlays blocking playback.

Current behavior: - Videos show a semi-transparent overlay when processing_status is "pending" - Videos show a red overlay when processing_status is "failed" - Videos are not rendered (only thumbnail shown) until processing completes or fails - The component polls for processing_status updates from the API

Desired behavior: - All videos are immediately playable, regardless of processing_status - No overlays appear on any state - The ProcessingOverlay component is removed or conditionally disabled - Video URL is fetched and rendered even when processing_status is "pending" or "failed"

Mermaid Diagram

graph TB
    A[User opens memory viewer] --> B{Memory type?}
    B -->|audio| C[Render AudioPlayer]
    B -->|visual| D{Fetch video URL}
    D -->|Success| E[Render VideoView immediately]
    D -->|API pending/failed| E
    E --> F[User can play video anytime]

    style A fill:#e1f5ff
    style F fill:#c8e6c9

Black-Box Contracts

Input Specification

Memory Item (MemoryFeedItem type) | Field | Type | Required | Notes | Updated | |-------|------|----------|-------|---------| | id | string | Yes | Unique memory identifier | N | | type | "audio" | "visual" | Yes | Content type | N | | processing_status | "pending" | "failed" | "complete" | Yes | Processing state (will be ignored for playback) | Y | | thumbnail | string | null | No | Presigned URL to thumbnail image | N |

Output Specification

VideoPlayer Render | Condition | Output | Notes | |-----------|--------|-------| | Loading (video not fetched) | Thumbnail + spinner | Immediate display while fetching | | Video ready (regardless of status) | VideoView component | Always rendered, always playable | | No video URL available | Error placeholder | Only shown when fetch fails |

Processing Status Behavior

Status	Old Behavior	New Behavior
"pending"	Show loading spinner + overlay	Render video if available, ignore status
"failed"	Show red overlay	Render video if available, ignore status
"complete"	Render video normally	Render video normally

Acceptance Criteria & Test Plan

Flow 1: Play video with pending processing status

Input: - Memory item with processing_status = "pending" and valid presigned_url from API

Expected behavior: - VideoView renders immediately (no overlay) - User can play/pause/scrub without waiting - No "Processing…" text appears

Pass criteria: - VideoView component is rendered - No ProcessingOverlay with text visible - Video can be played

Flow 2: Play video with failed processing status

Input: - Memory item with processing_status = "failed" and valid presigned_url from API

Expected behavior: - VideoView renders immediately (no red overlay) - User can play the video - No "Processing failed" text appears

Pass criteria: - VideoView component is rendered - No ProcessingOverlay with text visible - Video can be played

Flow 3: Play video with complete processing status

Input: - Memory item with processing_status = "complete" and valid presigned_url

Expected behavior: - Behaves identically to flows 1 & 2 (for consistency)

Pass criteria: - VideoView component is rendered - Video plays as expected

Flow 4: Handle video fetch error (API returns error)

Input: - Memory item where getOrFetchMemoryVideo() throws an error

Expected behavior: - Error placeholder is shown ("Video unavailable") - No overlays appear

Pass criteria: - Error icon and text are displayed - No ProcessingOverlay appears

Input: - Memory item with type = "visual", processing_status = "pending", and thumbnail

Expected behavior: - Thumbnail is shown in non-active carousel position - No overlay blocks the thumbnail - User can swipe to it and play

Pass criteria: - Thumbnail visible in carousel - No ProcessingOverlay blocks it - Can navigate to and play video

Pseudocode

Simplified VideoPlayer flow

function VideoPlayer(memoryId, width, height, initialThumbnail):
  state = {
    videoUrl: null,
    thumbnailUrl: initialThumbnail || null,
    duration: 30,
    loading: true,
    error: null,
    isPlaying: false,
    isMuted: false,
    position: 0,
  }

  // REMOVED: processingStatus state — no longer track it

  on mount:
    // Fetch thumbnail if not provided
    if not initialThumbnail:
      getMemoryThumbnail(memoryId)
        .then(url => state.thumbnailUrl = url)
        .catch(() => {})

    // Fetch video URL — ignore processing status
    getOrFetchMemoryVideo(memoryId)
      .then(response => {
        // CHANGED: Always try to set videoUrl, regardless of status
        state.videoUrl = response.presigned_url
        state.duration = response.duration_seconds || 30
        state.loading = false
        // REMOVED: processingStatus checks
      })
      .catch(err => {
        state.error = err.message
        state.loading = false
      })

  // During render:
  if state.loading:
    return loading_placeholder_with_thumbnail

  if state.error or not state.videoUrl:
    return error_placeholder

  // REMOVED: Check for processingStatus !== "complete"
  return VideoView(videoUrl)

function MemoryViewerModal(...):
  for each memory in memories:
    if memory.type == "audio" and index == activeIndex:
      render AudioPlayer
    else if memory.type == "visual" and index == activeIndex:
      // CHANGED: Remove processing_status check
      render VideoPlayer(
        memoryId=memory.id,
        width=width,
        height=height,
        initialThumbnail=memory.thumbnail
      )
    else if memory.thumbnail:
      // CHANGED: Stop rendering ProcessingOverlay
      render Image(thumbnail)
      // REMOVED: ProcessingOverlay(memory.processing_status)
    else:
      render placeholder
      // REMOVED: ProcessingOverlay(memory.processing_status)

Implementation Checklist

[ ] VideoPlayer component (memory-viewer-modal.tsx, lines 60–419)
[ ] Remove processingStatus state variable
[ ] Remove conditional render at line 285–315 (the if processingStatus && processingStatus !== "complete" block)
[ ] Update getOrFetchMemoryVideo logic (lines 151–181) to always set videoUrl regardless of status
[ ] Remove polling/status checks; let the component treat all statuses the same
[ ] MemoryViewerModal component (memory-viewer-modal.tsx, lines 428–523)
[ ] Remove processing_status === "complete" condition from line 473
[ ] Remove ProcessingOverlay imports and renders (lines 487, 498)
[ ] Simplify the render logic to show VideoPlayer for all processing states
[ ] ProcessingOverlay component (memory-viewer-modal.tsx, lines 25–45)
[ ] Remove the entire component definition (no longer needed)
[ ] Styles (memory-viewer-modal.tsx, lines 558–573)
[ ] Remove viewerOverlayPending style definition
[ ] Remove viewerOverlayFailed style definition
[ ] Remove viewerOverlayText style definition
[ ] Tests (if they exist)
[ ] Update or remove tests that verify overlay behavior
[ ] Add tests verifying videos render regardless of processing status
[ ] Verify all three status values (pending/failed/complete) render VideoView

Risk Assessment

Low risk changes: - Removing ProcessingOverlay component is a pure removal with no side effects - All video playback logic remains unchanged

Edge cases to verify: 1. What happens if getOrFetchMemoryVideo returns a pending status but no URL? → Error placeholder shown (safe) 2. Video in carousel, user swipes back and forth? → Thumbnail shown, no overlay (safe) 3. Audio memory behavior unchanged? → Yes, audio path is untouched (safe)

Success Criteria

No "Processing…" or "Processing failed" text overlays appear in the UI
All videos (pending/failed/complete status) can be played immediately
Error cases still display error placeholders (when API fails to fetch URL)
Tests pass (updated to reflect new behavior)
Code review: no regressions in video playback, thumbnail display, or error handling