Skip to main content
Version: 1.0.0

Routes / Navigation (Mirror)

Map of screens, flows, route guards, and inactivity behavior for the Mirror Android app.
The app supports two orientations with distinct journeys: Portrait and Landscape.

1) Entry & Orientation​

  • Startup → detect device orientation capability from the Mirror document in Firebase:
    • portrait | landscape | both
  • Common first-run flow (both orientations):
    1. Mirror ID Screen → operator enters mirrorId
    2. Loading / Sync → download brands + metadata + images + 3D assets + videos; persist local paths to Realm
    3. Looping Video (screensaver) → tap/interaction starts the journey

At any time, Change Language is accessible (global action).

2) Portrait Journey​

  1. Looping Video → user tap
  2. Gender Selection
  3. Frame Type Selection
  4. Brand Selection (only if more than one brand configured for this mirror)
  5. Glasses List (scrollable)
  6. 3D Viewer (WebView React) — shows selected glasses (transparent background overlay), UI controls in Kotlin
  7. VTO Activity (Second Activity) — Mediapipe face landmarker + CameraX + transparent WebView overlay
  • On any screen in this flow, inactivity → return to Looping Video.

3) Landscape Journey​

  • From Looping Video, a tap jumps directly to Second Activity presenting an auto-advancing selection of glasses:
    • Each glasses detail is shown for 10 seconds, then advances automatically to the next.
    • User can interact to pause or choose a pair immediately.

4) Second Activity (VTO)​

  • Shared behavior for Portrait & Landscape:
    • Mediapipe face landmarker + CameraX feed.
    • Transparent WebView running local React renderer (3D glasses overlay).
    • Inactivity / No-face fallback: if no face detected for 3 minutes, finish activity and return to Looping Video.
    • Local-only assets: all 3D models, textures, and videos are loaded from local paths stored in Realm.

5) Global Inactivity & Language​

  • Inactivity to Video: on any screen in the portrait flow, if the user does not interact, the app returns to Looping Video.
  • Change Language: available from every page; applies immediately to subsequent screens and UI labels.

6) Route Guards & Fallbacks​

  • Mirror ID required: block navigation beyond Loading/Sync until a valid mirrorId resolves to a Mirror document.
  • Content availability: if any asset fails to download, retry; if persistent failure, show non-blocking error and keep the item hidden from lists.
  • Orientation policy: respect the Mirror document setting:
    • If portrait only → lock portrait flow.
    • If landscape only → lock landscape flow.
    • If both → flow determined by current physical orientation at interaction time.

7) Data Hydration & Offline Cache​

  • On Sync:

    • Read Mirror document → resolve brands and content bundles.
    • Download all referenced assets (images, 3D models, videos).
    • Persist local file paths to Realm for fully offline operation.

  • At runtime:

    • WebView (React) and Kotlin UI read local paths; no network dependency during the experience.