Feature/debug

[Jamie-Poeffel]

Summary by CodeRabbit

• New Features

  • Added debug mode toggle in Settings (tap version 5+ times to enable/disable)
  • Interactive video preview with draggable corners and swap functionality in call screen
  • Dynamic camera/microphone device selection with dropdown interface

• Bug Fixes

  • Phone number input now properly formats and validates input
  • Debug floating action button visibility controlled by debug state
  • Conditional debug logging throughout the app

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Introduces runtime debug state management via a new useDebugEnabled() hook, refactors the videocall setup screen with dynamic device enumeration and dropdown UI selectors, updates the call screen to self-manage the draggable preview with internal pan responder and gesture control, adds phone number initialization support, and conditionally gates debug UI components.

Changes

Cohort / File(s)	Summary
Debug State Infrastructure utils/debugState.ts, components/debug/DebugContext.tsx	New module-level debug flag with getter/setter and useDebugEnabled() hook. Context updated to thread isDebug through debug hooks and register/unregister sections/actions based on state.
Settings Debug Toggle app/(protected)/(tabs)/settings.tsx	Adds tap counter on version text with 2-second window; 5+ taps toggle debug mode via setDebugEnabled(). Shows bug icon when debug enabled. Imports useRef and debug state utilities.
Phone Input Component components/PhoneNumberInput.tsx, app/(protected)/settings/personaldetails.tsx	PhoneNumberInput now accepts initialValue and style props with parsing/formatting on init. Personal details switched from Field to PhoneNumberInput with dynamic loading, whitespace stripping, and hardcoded label.
Home & Root Debug UI app/(protected)/(tabs)/index.tsx, app/_layout.tsx	Home tab conditionally renders DebugFAB via useDebugEnabled(). Root layout guards debug logging with __DEV__ conditional checks.
Videocall Setup Screen app/(protected)/videocall/(pages)/SetupScreen.tsx	Dynamically enumerates camera/microphone devices via mediaDevices.enumerateDevices(), maps to {id, label, sub} entries, and auto-initializes selection. Replaces static pill lists with reusable Field + Dropdown modal component. Refactors interests area with dynamic subtitle showing selection count.
Call Screen Preview Management app/(protected)/videocall/(pages)/CallScreen.tsx	Removes external animation/pan props from exported Props. Internally computes preview corner positions, creates PanResponder with snapping, and manages animated swap state (swapScale, swapped). Explicitly disables/enables navigation gestures via expo-router. Removes like/match notification banner.
Videocall Core & Layout app/(protected)/videocall/index.tsx, app/(protected)/videocall/_layout.tsx	Adds useDebugEnabled() to gate debug logging and DebugFAB visibility. Introduces refs to persist selected camera/microphone IDs and apply exact deviceId constraints in getUserMedia(). Layout disables gesture navigation for videocall/index screen.

Sequence Diagrams

sequenceDiagram
    actor User
    participant Settings as Settings Screen
    participant DebugState as Debug State
    participant DebugContext as Debug Context
    
    User->>Settings: Tap version text 5+ times (within 2s)
    Settings->>DebugState: setDebugEnabled(true/false)
    DebugState->>Settings: notify listeners
    Settings->>Settings: re-render + show Alert
    DebugState->>DebugContext: isDebug updated
    DebugContext->>DebugContext: re-register/unregister debug sections

Loading

sequenceDiagram
    participant SetupScreen as Setup Screen
    participant MediaEnum as mediaDevices API
    participant Dropdown as Field + Dropdown
    participant CallFlow as Call Flow
    
    SetupScreen->>MediaEnum: enumerateDevices()
    MediaEnum-->>SetupScreen: [{id, label}, ...]
    SetupScreen->>SetupScreen: map to entries, auto-select first
    User->>Dropdown: tap to expand device list
    Dropdown-->>User: modal dropdown with options
    User->>Dropdown: select device
    SetupScreen->>CallFlow: pass selected deviceId to startCall()
    CallFlow->>CallFlow: apply exact deviceId constraint in getUserMedia()

Loading

sequenceDiagram
    participant CallScreen
    participant PanResponder as Pan Responder
    participant Animated as Animated API
    participant Preview as Video Preview
    
    CallScreen->>CallScreen: compute corner positions from window dims
    CallScreen->>PanResponder: create responder with corner snapping
    User->>PanResponder: drag preview
    PanResponder->>PanResponder: snap to nearest corner
    User->>Preview: tap to swap streams
    Preview->>Animated: update swapScale animation
    Animated->>Preview: re-render with swapped=true/false

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• #171: Introduces the debug context and DebugFAB component that this PR extends with runtime debug state management.
• #163: Modifies CallScreen draggable preview and pan responder logic, with overlapping changes to preview state management.
• #166: Updates CallScreen props and videocall index device/preview handling, sharing similar refactoring patterns.

Suggested labels

Feature

Suggested reviewers

• GRuoss
• LuisAll12

Poem

🐰 Hops through debug states with glee,
Device lists enumerate free,
Pan responders snap corners tight,
Phone numbers parse just right,
Settings tap-dance enables sight! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.41% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Feature/debug' is vague and non-descriptive; it uses generic branch naming convention rather than a clear summary of the actual changes.	Provide a more descriptive title that summarizes the main feature, such as 'Add runtime debug state management and conditional debug UI rendering' or 'Implement toggleable debug mode with state persistence'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/debug

---

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

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}