Add React UI with real-time music sync progress

[oaquique]

Summary

This PR adds a new React-based web interface accessible at /react/ that provides a modern, responsive dashboard for TeslaUSB. All code is embedded directly in this repository.

Key Features

• Real-time music sync progress - Shows percentage, speed, and estimated time remaining during music sync
• Device model display - Shows device type (Raspberry Pi 4, Radxa Zero 3W, etc.) in the sidebar
• Per-drive storage info - Individual storage bars for TeslaCam, Music, LightShow, and Boombox drives
• Multi-device temperature support - Works with Pi thermal zones and hwmon (for Radxa, etc.)
• Mobile-responsive design - Works well on phones and desktops
• Lightweight - ~58KB JavaScript, ~25KB CSS

Files Changed

New:

• teslausb-www-react/ - Full source code (Preact/Vite) and pre-built dist/ folder
• cgi-bin/storage.sh - API endpoint for per-drive storage information
• cgi-bin/music_sync_progress.sh - API endpoint for real-time rsync progress

Modified:

• setup/pi/configure-web.sh - Installs React UI from local dist/ folder
• run/cifs_archive/copy-music.sh - Adds progress2 to rsync for real-time progress output
• cgi-bin/status.sh - Adds device_model field and improves temperature detection

Access Points

After installation, users will have three UI options:

• Standard UI at /
• Vue UI at /new/
• React UI at /react/

Screenshots

The UI includes:

• System dashboard with uptime, temperature, snapshots, and network status
• Real-time sync status with progress indicators

• File browser for TeslaCam, Music, LightShow, and Boombox folders

• Video viewer for dashcam clips

• Log viewer for Archive, Setup and Diagnostics

Test plan

• Install on a fresh TeslaUSB setup
• Verify React UI loads at /react/
• Test music sync and verify real-time progress display
• Test on both Raspberry Pi and Radxa devices
• Verify storage bars show correct information for each drive
• Test mobile responsiveness

[KODIKAS-NL]

Awesome! I was thinking about creating a new React UI myself, but you beat me to it :)
Did you have a look at the new SEI explorer from Tesla? https://github.com/teslamotors/dashcam?tab=readme-ov-file
It should be doable to use the code from https://github.com/teslamotors/dashcam/blob/master/dashcam-mp4.js to extract the metadata and display it in a overlay on the viewer.

[KODIKAS-NL]

@oaquique
I didn't do a fresh install but checked out your repo in my current install, copied the new/changed files in cgi-bin and copied the new ui in de /var/www/html/react folder.
Initially I didn't work because al url's in de index.html file are relative to the root, like:
<link rel="manifest" href="/manifest.json" />
I manually removed all leading slahes and then it works great :)
You should be able to solve this by adding:
"homepage": "."
to the package.json
( https://create-react-app.dev/docs/deployment/#building-for-relative-paths )

I do see a recurring error in de console:
[Error] Failed to load resource: the server responded with a status of 416 (Requested Range Not Satisfiable) (archiveloop.log, line 0) [Error] Failed to load resource: the server responded with a status of 416 (Requested Range Not Satisfiable) (archiveloop.log, line 0)
Didn't look into it yet, so it could be because I didn't do a full install.

[oaquique]

Thanks for the feedback @KODIKAS-NL! 🙏

I've pushed a fix that addresses both issues:

Relative paths: Changed Vite's base path to ./ and updated all URLs in index.html to use relative paths. The UI should now work from any subfolder without manual edits.

416 errors: Added a HEAD request check before making range requests during log polling. This checks the file size first and only makes a range request when there's actually new content, eliminating those console errors.

Regarding the Tesla SEI explorer / dashcam-mp4.js for metadata overlays - that's a great idea for a future enhancement! Would be cool to show event timestamps, location, and other metadata on the video player.

[marcone]

Awesome! I was thinking about creating a new React UI myself, but you beat me to it :) Did you have a look at the new SEI explorer from Tesla? https://github.com/teslamotors/dashcam?tab=readme-ov-file It should be doable to use the code from https://github.com/teslamotors/dashcam/blob/master/dashcam-mp4.js to extract the metadata and display it in a overlay on the viewer.

Note that that code from Tesla does not specify any license.

[oaquique]

Awesome! I was thinking about creating a new React UI myself, but you beat me to it :) Did you have a look at the new SEI explorer from Tesla? https://github.com/teslamotors/dashcam?tab=readme-ov-file It should be doable to use the code from https://github.com/teslamotors/dashcam/blob/master/dashcam-mp4.js to extract the metadata and display it in a overlay on the viewer.

Note that that code from Tesla does not specify any license.

Agreed, without clear licensing terms, I wouldn't include that code.

[oaquique]

Update: TeslaCam Archive Progress Tracking

This update adds consistent progress display for both TeslaCam and Music sync operations.

Changes

• New cam_sync_progress.sh CGI script - Tracks CAM archive progress by:

  • Detecting rsync processes for TeslaCam archiving
  • Parsing rsync log files for progress data (bytes, percentage, speed, ETA)
  • Falling back to archiveloop.log analysis when rsync logs aren't available

• Refactored SyncStatus component - Now shows consistent progress for both sync types:

  • Progress bar with percentage
  • Bytes transferred and transfer speed
  • ETA remaining

Fixes

• Fixed "0/40 files" showing without actual progress during CAM sync
• Fixed stale progress text persisting after sync completes
• Fixed progress not clearing when switching between sync types