@stronk-tech/react-librespot-controller
v0.1.9
Published
`go-librespot` squeezebox-alike web frontend for small touchscreens
Downloads
1,898
Maintainers
Readme
react-librespot-controller
go-librespot
squeezebox-alike web frontend for small touchscreens
Can be deployed standalone or imported as a NPM module.
The player is styled in the Tokyo Night colour scheme except for the album image, which emits an ambilight effect based on the colours in the image.
Install go-librespot
TODO: refer to OG source instructions + explain systemd
script
[Unit]
Description=Spotify daemon
Documentation=https://github.com/devgianlu/go-librespot
Wants=sound.target
After=sound.target
Wants=network-online.target
After=network-online.target
[Service]
WorkingDirectory=/home/pulseaudio/go-librespot
ExecStart=/usr/local/go/bin/go run /home/pulseaudio/go-librespot/cmd/daemon
Restart=always
RestartSec=12
[Install]
WantedBy=default.target
Config go-librespot
TODO: instructions to enable the API
Make sure to mention the bind address.
Standalone
Create a .env
file and fill in you API endpoints
REACT_APP_API_BASE_URL=http://apollo:3678
REACT_APP_WS_URL=ws://apollo:3678/events
Run npm run test
for local debugging.
Run npm run static
to generate the build folder.
TODO: build instructions
TODO: nginx instructions. Include HTTPS instructions with local IP whitelist (+hairpin nat)
TODO: OS instructions (auto-login, open browser, etc)
Module
First install the dependency:
npm install --save `@stronk-tech/react-librespot-controller`
Then import the component and fill in your API endpoints:
import MediaPlayer from "@stronk-tech/react-librespot-controller";
<MediaPlayer websocketUrl={"ws://apollo:3678/events"} apiBaseUrl={"http://apollo:3678"} hideOnDisconnect={false} />
Props
hideOnDisconnect
: Whentrue
, the entire component will hide itself when there is no connection to the API endpoint. Otherwise it will display an error state.websocketUrl
: Full URL to the WebSocket endpoint of thego-librespot
client.apiBaseUrl
: Full URL to the HTTP API endpoint of thego-librespot
client.kioskMode
: Whentrue
, the component will fill the entire screen. Otherwise it will fill the available width and base the layout on the width only. It is recommended to leave this optionfalse
when importing the module into an existing webpage and totrue
when you are running the player standalone on a touch screen.layout
: Can beauto
,default
,widescreen
,portrait
. See the screenshots for how the layouts look like.
Screen shots
The player arranges itself based on the screen dimensions, with three possible layouts:
Default layout
Widescreen