13 KiB
13 KiB
Gallery Viewer
This document describes the full-screen asset viewer for viewing photos and videos.
Overview
The gallery viewer provides:
- Full-screen photo/video viewing
- Swipe navigation between assets
- Pinch-to-zoom on images
- Video playback controls
- Asset actions and info
Viewer Layout
┌─────────────────────────────────────────────────────────────┐
│ ← [Actions: Share, Edit, Cast, ⋮] Info ℹ️ │
├─────────────────────────────────────────────────────────────┤
│ │
│ │
│ │
│ [Full Screen Asset] │
│ │
│ │
│ │
├─────────────────────────────────────────────────────────────┤
│ [Stack thumbnails if stacked] │
├─────────────────────────────────────────────────────────────┤
│ ♥ 📤 ⬇️ 🗑 [Add to Album] │
└─────────────────────────────────────────────────────────────┘
Navigation
Gestures
| Gesture | Action |
|---|---|
| Swipe left/right | Navigate to next/previous asset |
| Swipe down | Close viewer |
| Swipe up | Show asset info panel |
| Single tap | Toggle controls visibility |
| Double tap | Toggle zoom |
| Pinch | Zoom in/out |
Tap-to-Navigate Mode
Optional setting that enables:
- Tap left quarter: Previous asset
- Tap right quarter: Next asset
- Tap center: Toggle controls
Image Viewing
Loading Strategy
- Show thumbhash placeholder immediately
- Load thumbnail from cache
- Load preview resolution
- Load original when zoomed
Zoom Features
- Pinch to zoom (up to 3x)
- Double tap to toggle zoom
- Pan when zoomed
- Reset on page change
Motion Photos
- Long press to play motion component
- Auto-plays on image tap (optional)
- Shows motion indicator icon
Video Playback
Video Controls
┌─────────────────────────────────────────────────────────────┐
│ │
│ [Video Frame] │
│ │
│ ▶ / ⏸ │
│ │
├─────────────────────────────────────────────────────────────┤
│ 0:45 ────────●────────────────────────── 3:24 │
│ │
│ [Mute] [Quality] [Fullscreen] [Cast] │
└─────────────────────────────────────────────────────────────┘
Video Settings
| Setting | Description |
|---|---|
| Auto-play | Start playing when opened |
| Loop | Repeat when finished |
| Load Original | Use full quality (uses more data) |
Video Quality
- Transcoded versions available
- Original quality option
- Adaptive based on network
Top App Bar
Actions Available
| Icon | Action |
|---|---|
| ← | Close viewer |
| Share | System share sheet |
| Edit | Open image editor |
| Cast | Cast to Chromecast |
| ⋮ | More options menu |
| ℹ️ | Show info panel |
More Options Menu
- Download
- Set as album cover
- View in map
- Show motion photo
- Stack/unstack
- Advanced info (debug)
Bottom Action Bar
Primary Actions
| Icon | Action |
|---|---|
| ♥ | Toggle favorite |
| 📤 | Share |
| ⬇️ | Download to device |
| 🗑 | Move to trash |
| 📁 | Add to album |
Asset Info Panel
Swipe up or tap info button to show:
┌─────────────────────────────────────────────────────────────┐
│ ───── (drag handle) │
├─────────────────────────────────────────────────────────────┤
│ IMG_1234.jpg │
│ December 15, 2024 at 3:45 PM │
├─────────────────────────────────────────────────────────────┤
│ Details │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 📷 Apple iPhone 15 Pro │ │
│ │ 📐 4032 × 3024 │ │
│ │ 💾 4.2 MB │ │
│ │ 📍 San Francisco, CA │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ EXIF Information │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Aperture: f/1.8 │ │
│ │ Shutter: 1/120s │ │
│ │ ISO: 64 │ │
│ │ Focal Length: 24mm │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Description │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Add a description... │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ People │
│ [Face thumbnails with names] │
├─────────────────────────────────────────────────────────────┤
│ Location │
│ [Small map preview] │
└─────────────────────────────────────────────────────────────┘
Info Sections
- Header: Filename and date
- Details: Camera, dimensions, size, location
- EXIF: Technical camera data
- Description: Editable caption
- People: Recognized faces
- Location: Map preview (if geotagged)
Asset Stacks
What are Stacks?
Groups of similar assets shown as one item:
- Burst photos
- Edited versions
- Similar shots
Stack Display
┌─────────────────────────────────────────────────────────────┐
│ [Main stack asset displayed] │
├─────────────────────────────────────────────────────────────┤
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 1 │ │ 2 │ │ 3 │ │ 4 │ ← Stack thumbnails │
│ │ ● │ │ │ │ │ │ │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
└─────────────────────────────────────────────────────────────┘
Stack Actions
- Tap thumbnail to switch
- Long press to set as primary
- Unstack to separate assets
Editing
Available Edits
- Crop and rotate
- Filters
- Adjustments (brightness, contrast, etc.)
Edit Flow
- Tap edit icon
- Make changes
- Save as new or overwrite
Casting
Chromecast Support
- Cast images to TV
- Shows high-resolution version
- Video streaming support
Cast Flow
- Tap cast icon
- Select device
- Asset displays on TV
- Control from phone
Download
Download Options
- Save to device gallery
- Choose quality (original/transcoded)
- Live photos download both parts
Download API
GET /assets/{id}/original
Response: Binary file data
Activities (Comments)
For shared albums with activity enabled:
Activity Panel
┌─────────────────────────────────────────────────────────────┐
│ ← Activity │
├─────────────────────────────────────────────────────────────┤
│ 👤 Jane: Love this photo! ♥ │
│ 👤 John: Great shot! │
│ 👤 You: Thanks! │
├─────────────────────────────────────────────────────────────┤
│ [Add a comment...] [Send] │
└─────────────────────────────────────────────────────────────┘
Activity API
GET /activities?albumId={albumId}&assetId={assetId}
POST /activities
Body:
{
"albumId": "album-uuid",
"assetId": "asset-uuid",
"type": "comment" | "like",
"comment": "Great photo!"
}
Performance
Image Caching
- Thumbnails cached aggressively
- Preview images cached with limits
- Original images not cached (too large)
Preloading
- Next/previous images preloaded
- Smooth navigation experience
- Configurable cache size
Memory Management
- Release memory when leaving
- Dispose video players
- Clear caches when low memory