# Deploy Admin Panel with Upload Feature

Quick guide to deploy the enhanced admin panel with manual upload capability.

## What Changed

✅ **Admin Panel**: Added drag-and-drop video upload
✅ **Empty State**: Improved UI when no videos exist
✅ **Upload API**: New endpoint for browser-based uploads
✅ **Progress Tracking**: Real-time upload progress bars

## Prerequisites

- ✅ Worker already deployed
- ✅ KV namespace created (VIDEO_METADATA)
- ✅ Admin password set
- ✅ Wrangler CLI authenticated

If you haven't set these up yet, run:
```bash
./scripts/setup-admin.sh
```

## Deploy Steps

### 1. Build the Enhanced Worker

```bash
cd /home/jeffe/Github/obs-r2-uploader
python3 scripts/build-worker.py
```

This embeds the updated admin.html with upload features into the worker.

### 2. Verify Configuration

Make sure `worker/wrangler.toml` has:

```toml
[[kv_namespaces]]
binding = "VIDEO_METADATA"
id = "your_kv_namespace_id"  # Should already be set

[[r2_buckets]]
binding = "R2_BUCKET"
bucket_name = "obs-videos"
```

### 3. Deploy to Cloudflare

```bash
cd worker
wrangler deploy
```

Expected output:
```
Published obs-video-server (X.XX sec)
  https://videos.jeffemmett.com
```

### 4. Test the Upload Feature

1. Visit: `https://videos.jeffemmett.com/admin`
2. Login with your admin password
3. Look for the green **📤 Upload Video** button in the header
4. Click it and try uploading a video

### 5. Test Empty State (Optional)

If you have no videos yet:
1. The admin panel should show a nice empty state
2. With the message "No videos yet"
3. And an upload button

## Verification Checklist

- [ ] Admin panel loads without errors
- [ ] Upload button visible in header
- [ ] Can open upload modal
- [ ] Can drag-and-drop video files
- [ ] Can click to browse files
- [ ] Upload progress bar shows
- [ ] Video appears in list after upload
- [ ] Can set visibility after upload
- [ ] Empty state shows when no videos (if applicable)

## Rollback (If Needed)

If something goes wrong, you can rollback:

```bash
cd worker
git checkout HEAD~1 video-server.js
wrangler deploy
```

Or redeploy the previous version:

```bash
wrangler rollback
```

## Troubleshooting

### Upload button not showing

```bash
# Clear browser cache
# Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)

# Or try incognito mode
```

### Upload fails with 404

Check that the upload endpoint exists:
```bash
# In worker/video-server.js, search for:
# path === '/admin/api/upload'
```

Should be present in the deployed worker.

### "Not found" error

Make sure you built the worker first:
```bash
python3 scripts/build-worker.py
```

Then deploy again.

### KV namespace errors

Verify KV namespace:
```bash
wrangler kv:namespace list
```

Update `wrangler.toml` with correct ID if needed.

## Quick Deploy Command

One-liner to rebuild and deploy:

```bash
python3 scripts/build-worker.py && cd worker && wrangler deploy && cd ..
```

## What to Expect

### Before Deployment
- No upload button in admin
- Empty state just says "No videos found"
- Can only upload via command line

### After Deployment
- Green upload button in admin header
- Nice empty state with icon and message
- Can drag-and-drop videos
- Real-time upload progress
- Automatic list refresh after upload

## Next Steps

After successful deployment:

1. **Test Upload**: Upload a test video via admin panel
2. **Set Visibility**: Try changing video visibility settings
3. **Share Videos**: Copy shareable links
4. **Create Clips**: Test the clip generation feature
5. **Read Docs**: Check [UPLOAD_FEATURE.md](UPLOAD_FEATURE.md) for full details

## Support

Having issues? Check:

- [ADMIN.md](ADMIN.md) - Admin panel documentation
- [UPLOAD_FEATURE.md](UPLOAD_FEATURE.md) - Upload feature details
- [SETUP.md](SETUP.md) - Initial setup guide

Or check worker logs:
```bash
wrangler tail
```

---

**Deployment Version:** 1.1
**Last Updated:** 2024-11-22