A React app meant for a Raspberry Pi Zero 2 W with a Hyperpixel 4.0 Square display.

The React app can be hosted either directly on the Pi, or somewhere else.

When not playing a clock is shown, and when enabled a request will be made to the local Pi to turn the screen on and off.

Occupancy detection can also be enabled, where a Home Assistant entity state will be queried. When the entity is off, the screen will be turned off.

Unfortunately due to cross-origin request issues TLS will most likely need to be enabled on everything.

Place contents of autostart in .config/lxsession/LXDE-pi/autostart, which will call autostart-spotify-playing.sh. This will hide the cursor, disable the screensaver and power management, and start Chromium in kiosk mode after a delay to so the URL actually loads.

screen.php will need to be hosted on the Pi, and the URL added to your .env.production. It calls screen.sh, which the www-data user needs to call with sudo so the script has access to your user's .Xauthority file.

Create /etc/sudoers.d/screen containing

www-data ALL=(ALL) NOPASSWD: /root/screen.sh on, /root/screen.sh off

Add a Home Assistant boolean entity to your .env.production. For example, I have a helper entity that I toggle with a "when people are home" automation in HomeKit which is named input_boolean.homekit_occupied.

You will have to enable CORS in your Home Assistant configuration for the domain the React app is running on.

http:
  cors_allowed_origins:
    - http://localhost:5173
    - https://spotify-playing

It may be helpful to use xdotool to reload Chromium without needing to VNC into the Pi. An example is the reload-chromium.sh script.

Heavily inspired by Now Playing at chorus.fm.