# Testing the Tape Viewer

## Quick Start

### 1. Create a Test Tape
Open Aesthetic Computer and run:
```
tape 3 notepat
```

This will:
- Record 3 seconds of the `notepat` piece
- Upload frames + audio to S3 as a ZIP
- Generate a short code (e.g., `#abc`)
- Display the code in the console

Look for the console message:
```
📼 Tape code: #abc
```

### 2. View the Tape
Load the tape viewer with your code:
```
tape %abc
```

Replace `abc` with your actual tape code.

### 3. Test Playback
- Click **Play** button to start playback
- Press **Space** to pause/resume
- Use **Arrow keys** to navigate frames (when paused)
- Press **Home** to jump to start
- Press **End** to jump to end

### 4. Test Download
- Click **Download** button to download the original ZIP file
- Should download as `tape-abc.zip`

### 5. Test Show Mode
Try lightbox mode:
```
tape %abc:show
```

Should display without UI buttons (just the video playback).

## Expected Behavior

### Loading Phase
1. Display "Loading..." with animated ellipsis
2. Fetch tape metadata from MongoDB
3. Download ZIP from S3 (user or guest bucket)
4. Extract frames, timing.json, metadata.json, soundtrack.wav
5. Display first frame with Play button

### Playback Phase
1. Click Play → frames advance based on timing.json
2. Audio starts synchronized with frames
3. Frame counter updates: "Frame 1/90"
4. Time display shows: "0.0s / 3.0s"
5. Playback indicator shows: ▶ or ⏸

### End of Tape
1. Playback stops automatically at last frame
2. Audio stops cleanly
3. Can restart by clicking Play again

## Testing Different Scenarios

### Guest Tape (No Login)
```
tape 3 wand
```
- Should create anonymous tape
- Code generated (e.g., `#xyz`)
- Stored in `art-aesthetic-computer` bucket
- Viewable with `tape %xyz`

### User Tape (Logged In)
```
tape 5 notepat
```
- Should create user-owned tape
- Code generated and associated with user
- Stored in `user-aesthetic-computer` bucket
- Viewable with `tape %code`

### Different Pieces
Try recording different pieces:
```
tape 3 wand
tape 5 line
tape 2 prompt
```

Each should generate unique codes and be viewable.

### Error Cases

**Non-existent Code:**
```
tape %zzz
```
Expected: "Tape %zzz not found (404)"

**Invalid Code:**
```
tape %
```
Expected: "Enter a tape code like: tape %abc"

**Nuked Tape:**
If a tape has been deleted:
Expected: "Tape %abc has been deleted"

## Console Logs to Check

### During Load:
```
📼 tape.mjs boot - params: [...] hash: abc
📼 Loading tape by code from hash: %abc
📡 Fetching tape metadata for code: abc
📊 Tape metadata: { slug: "...", bucket: "...", ... }
📦 Downloading ZIP from: https://...
📦 ZIP downloaded: 3.34 MB
📦 ZIP loaded, files: ["frame-00000.png", ...]
📋 Metadata: { piece: "notepat", totalDuration: 3.0, ... }
⏱️  Timing data: 90 frames
🖼️  Loading 90 frames...
  Loaded 10/90 frames
  Loaded 20/90 frames
  ...
  Loaded 90/90 frames
🎵 Loading soundtrack.wav...
🎵 Audio loaded: 3.00s
✅ Tape loaded successfully!
```

### During Playback:
```
🎵 Audio playback started at offset 0.00s
```

### On Download:
```
(Browser download dialog should appear)
```

## Known Limitations

### Current Version
- No scrubbing/seek bar (coming soon)
- No speed controls (1x only)
- No loop option
- No volume control
- All frames loaded into memory (may use significant RAM for long tapes)

### Browser Requirements
- Modern browser with:
  - `createImageBitmap` API
  - Web Audio API
  - Fetch API
- Audio may require user interaction to start (autoplay policy)

## Troubleshooting

### "Tape %abc not found"
- Check if the tape code is correct
- Verify tape exists in MongoDB
- Check console for API response status

### No audio playback
- Check console for audio loading errors
- Try clicking Play button (may need user interaction)
- Verify `soundtrack.wav` exists in ZIP
- Check browser audio permissions

### Frames not advancing
- Check console for timing data
- Verify `timing.json` exists in ZIP
- Check if browser is throttling animations

### ZIP download fails
- Check S3 URL in console
- Verify bucket permissions
- Check network connectivity

## Next Steps

After successful testing:
1. Create tapes with different pieces
2. Test with different durations (1s, 10s, 30s)
3. Share tape codes with others
4. Test on mobile devices
5. Test in different browsers

## Feedback

Report any issues or suggestions:
- Frame timing accuracy
- Audio sync quality
- UI responsiveness
- Loading performance
- Error handling