Refactor video player and camera angle switching

- Removed inline JSON data for video clips; replaced with API endpoint to fetch video data.
- Simplified camera angle switching UI with a 3-column button grid around a Model Y graphic.
- Updated camera view mapping to use 'back' instead of 'rear'.
- Enhanced noise canvas handling during video loading.
- Streamlined clip playback logic and added auto-play for next clips in the same camera.
- Improved search and sorting functionality by removing unnecessary elements.
- Updated HTML structure for better accessibility and user experience.

README.md

@@ -5,24 +5,32 @@ A Flask web app for browsing and playing TeslaCam (Tesla Dashcam/Sentry) recordi
 ## Features
 
 - **Recursive scan** of the TeslaCam directory tree (`RecentClips`, `SavedClips`, `SentryClips`, etc.) for `.mp4` files matching the TeslaCam naming convention `YYYY-MM-DD_HH-MM-SS-${camera_view}.mp4`.
-- **Categorization by camera view** — front, left repeater, right repeater, rear, left pillar, right pillar — with friendly display names.
+- **Categorization by camera view** — front, left repeater, right repeater, back, left pillar, right pillar — with friendly display names.
 - **Multi-angle synchronized playback** — clips sharing the same timestamp are grouped so you can switch between camera angles for the same moment.
-- **Search & sort** — filter clips by filename, sort oldest-first or A–Z.
+- **3-column camera selector** with a top-down Model Y graphic showing camera positions.
+- **Auto-play** — oldest front camera clip plays on page load.
 - **Safe streaming** — videos are served via Flask with path resolution relative to the configured TeslaCam root.
+- **Password-protected** — simple session-based login page.
 - **Dark Tesla-themed UI** built with responsive HTML/CSS (no build step).
 
 ## Project Structure
 
 ```txt
 tesla-cam-view/
-├── videoplayer.py          # Flask app: scanning, routing, video streaming
+├── videoplayer.py          # Flask app: scanning, routing, video streaming, auth
 ├── requirements.txt        # Python dependencies
 ├── .env                    # Local configuration (git-ignored)
 ├── .env.example            # Configuration template (committed)
 ├── .gitignore
 ├── templates/
-│   ├── index.html          # Main page: camera tabs, player, clip list
+│   ├── index.html          # Main page: video player + 3-col camera selector
+│   ├── login.html          # Password login page
 │   └── camera_view.html    # Single-camera view page
+├── static/
+│   ├── css/
+│   │   └── style.css       # Dark Tesla-themed styles
+│   └── js/
+│       └── app.js          # Video player, camera switching, prefetch
 └── README.md
 ```
 
@@ -68,6 +76,8 @@ process manager.
 | Variable             | Default         | Description                                     |
 | -------------------- | --------------- | ----------------------------------------------- |
 | `TESLACAM_DIRECTORY` | `/mnt/TeslaCam` | Root directory of the TeslaCam USB drive        |
+| `LOGIN_PASSWORD`     | `teslacam`      | Password for the web login page                 |
+| `SECRET_KEY`         | auto-generated  | Flask session secret (set in production)        |
 | `FLASK_RUN_HOST`     | `0.0.0.0`       | Bind address (local dev server only)            |
 | `FLASK_RUN_PORT`     | `5000`          | Port (local dev server only)                    |
 | `FLASK_DEBUG`        | `0`             | Enable Flask debug mode (local dev server only) |
@@ -104,16 +114,14 @@ gunicorn -w 2 -b 0.0.0.0:5000 'videoplayer:app'
 For a systemd service or other process manager, set the variable in the unit
 file / environment rather than relying on `.env`.
 
-- The **main page** lists all clips grouped by camera view with a player and searchable clip list.
-- Click a clip to play it; use the camera switch buttons to jump between angles for the same timestamp.
-- The `/camera/<view>` route shows all clips for a single camera.
+- The **main page** lists all clips grouped by camera view with a player.
+- Click a play button to start playing; use the camera switch buttons to jump between angles for the same timestamp.
 
 ## Routes
 
 | Route                    | Description                                          |
 | ------------------------ | ---------------------------------------------------- |
 | `/`                      | Main page with all videos categorized by camera view |
-| `/camera/<camera_view>`  | All videos for a single camera view                  |
 | `/video/<path:filepath>` | Streams a video file from the TeslaCam directory     |
 | `/refresh`               | Forces a re-scan of the TeslaCam directory           |
 
@@ -124,7 +132,7 @@ file / environment rather than relying on `.env`.
 | `front`          | Front          |
 | `left_repeater`  | Left Repeater  |
 | `right_repeater` | Right Repeater |
-| `rear`           | Rear           |
+| `back`           | Back           |
 | `left_pillar`    | Left Pillar    |
 | `right_pillar`   | Right Pillar   |