starred/nocturne-ui

Fork 0

mirror of https://github.com/usenocturne/nocturne-ui.git synced 2026-04-25 07:45:52 +03:00

[PR #123] [CLOSED] feat: PKCE auth, optimistic UI, smart polling, and performance improvements #126

New issue

Closed

opened 2026-02-28 15:42:16 +03:00 by kerem · 0 comments

kerem commented

2026-02-28 15:42:16 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/usenocturne/nocturne-ui/pull/123
Author: @tkima
Created: 12/24/2025
Status: ❌ Closed

Base: main ← Head: feature/improvements

📝 Commits (10+)

060b9db wip: switch to nocturne-app
8fed6be feat: use websocket for images
322c499 chore: run lint
adac8d5 fix: currently playing album is added to recently played on page load again
d61a5c0 fix: periodic player refreshes now work ui wide again
ffc5126 fix: image no longer loads ~5s after gradient
c4f33c9 fix: initial load no longer spams spotify.player.state
90d4e75 fix: prevent images from being refetched when new item is added to carousel
b5a00c6 feat/fix: add playlist loading, fix play song from playlist, fix shuffle
be30578 chore: run lint, clean up logging

📊 Changes

272 files changed (+13990 additions, -248 deletions)

View changed files

📝 .github/workflows/build.yml (+3 -1)
➕ documentation/CHANGES.md (+311 -0)
➕ documentation/readme.md (+174 -0)
➕ documentation/spotify-relay.php (+210 -0)
➕ documentation/sync-to-device.sh (+66 -0)
➕ nocturne-ui/.env.example (+11 -0)
➕ nocturne-ui/.github/workflows/build.yml (+34 -0)
📝 nocturne-ui/.prettierignore (+0 -0)
📝 nocturne-ui/.prettierrc (+0 -0)
📝 nocturne-ui/LICENSE (+0 -0)
📝 nocturne-ui/README.md (+0 -0)
📝 nocturne-ui/bun.lockb (+0 -0)
📝 nocturne-ui/eslint.config.js (+0 -0)
📝 nocturne-ui/index.html (+0 -0)
➕ nocturne-ui/package-lock.json (+6303 -0)
📝 nocturne-ui/package.json (+0 -0)
📝 nocturne-ui/postcss.config.js (+0 -0)
📝 nocturne-ui/public/fonts/Inter-Bold.woff2 (+0 -0)
📝 nocturne-ui/public/fonts/Inter-Medium.woff2 (+0 -0)
📝 nocturne-ui/public/fonts/Inter-Regular.woff2 (+0 -0)

...and 80 more files

📄 Description

Summary

Several features and performance improvements that I've been using on my Car Thing.

PKCE Authentication

Custom Spotify Client ID support via relay server
Settings UI to enter custom client ID at runtime
Client ID badge in Settings showing active auth type (Shared/Env/Custom)
Browser-based PKCE for dev mode
PHP relay script for handling OAuth callbacks (docs/spotify-relay.php maybe host on the domain)

Optimistic UI Updates

Instant feedback for play/pause/skip/seek actions
UI updates immediately, reverts on API failure
Album art opacity fade during skip transitions

Dial Seek Toggle

Toggle dial between volume (default) and ±10s seek in Settings
Useful for skipping ads in podcasts
Debounced API calls (1s after last dial turn)

Smart Playback Polling

Song-end detection: refreshes 500ms after track ends
Pause polling: 60s interval when paused (was 15s)
Play polling: normal 15s interval
Reduces API calls when idle

Fast Loading Screen

Network check bypassed by default for faster boot
Parallel task execution (token refresh + boot counter)
Faster retries: 4x3s instead of single long timeout
Shorter completion delay: 500ms (was 2s)

Other Improvements

Loading screen quotes for version tracking
QR code loading state shows text instead of placeholder
Dev mode debug info under progress bar (VITE_DEV_MODE=true)
Deploy script for syncing to device (docs/sync-to-device.sh)

Test plan

Tested PKCE auth with custom Spotify Client ID on device
Tested optimistic UI updates (play/pause/skip)
Tested dial seek toggle in Settings
Verified smart polling triggers on song end
Tested loading screen performance

All features tested and working on a physical Car Thing device, raspberry + car thing. Cherry pick away i should say. Thanks for all the work, love the ui!!

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/usenocturne/nocturne-ui/pull/123 **Author:** [@tkima](https://github.com/tkima) **Created:** 12/24/2025 **Status:** ❌ Closed **Base:** `main` ← **Head:** `feature/improvements` --- ### 📝 Commits (10+) - [`060b9db`](https://github.com/usenocturne/nocturne-ui/commit/060b9db0c117c9470943f9c50f6f0b699e904956) wip: switch to nocturne-app - [`8fed6be`](https://github.com/usenocturne/nocturne-ui/commit/8fed6be699b52f12e15bc9e5c74928d70ceed379) feat: use websocket for images - [`322c499`](https://github.com/usenocturne/nocturne-ui/commit/322c49951cf5df6fe31204a0e21d80ea315da2b3) chore: run lint - [`adac8d5`](https://github.com/usenocturne/nocturne-ui/commit/adac8d5e71817e12dbe72170cdad90e99f1cdf40) fix: currently playing album is added to recently played on page load again - [`d61a5c0`](https://github.com/usenocturne/nocturne-ui/commit/d61a5c0064e42e2bc05c8b60bfc220ca00dc38ef) fix: periodic player refreshes now work ui wide again - [`ffc5126`](https://github.com/usenocturne/nocturne-ui/commit/ffc5126cca321a1cbe533330d459d094b58711d4) fix: image no longer loads ~5s after gradient - [`c4f33c9`](https://github.com/usenocturne/nocturne-ui/commit/c4f33c9c4a07bbf6442ebcbf79436926b5aed9a8) fix: initial load no longer spams spotify.player.state - [`90d4e75`](https://github.com/usenocturne/nocturne-ui/commit/90d4e7590d831c77e4e7bd8ee57f716265aa1041) fix: prevent images from being refetched when new item is added to carousel - [`b5a00c6`](https://github.com/usenocturne/nocturne-ui/commit/b5a00c604c1873c124270aefb8483b1b7f942fe9) feat/fix: add playlist loading, fix play song from playlist, fix shuffle - [`be30578`](https://github.com/usenocturne/nocturne-ui/commit/be30578a491a66891a40a571bc3dff6b387602e9) chore: run lint, clean up logging ### 📊 Changes **272 files changed** (+13990 additions, -248 deletions) <details> <summary>View changed files</summary> 📝 `.github/workflows/build.yml` (+3 -1) ➕ `documentation/CHANGES.md` (+311 -0) ➕ `documentation/readme.md` (+174 -0) ➕ `documentation/spotify-relay.php` (+210 -0) ➕ `documentation/sync-to-device.sh` (+66 -0) ➕ `nocturne-ui/.env.example` (+11 -0) ➕ `nocturne-ui/.github/workflows/build.yml` (+34 -0) 📝 `nocturne-ui/.prettierignore` (+0 -0) 📝 `nocturne-ui/.prettierrc` (+0 -0) 📝 `nocturne-ui/LICENSE` (+0 -0) 📝 `nocturne-ui/README.md` (+0 -0) 📝 `nocturne-ui/bun.lockb` (+0 -0) 📝 `nocturne-ui/eslint.config.js` (+0 -0) 📝 `nocturne-ui/index.html` (+0 -0) ➕ `nocturne-ui/package-lock.json` (+6303 -0) 📝 `nocturne-ui/package.json` (+0 -0) 📝 `nocturne-ui/postcss.config.js` (+0 -0) 📝 `nocturne-ui/public/fonts/Inter-Bold.woff2` (+0 -0) 📝 `nocturne-ui/public/fonts/Inter-Medium.woff2` (+0 -0) 📝 `nocturne-ui/public/fonts/Inter-Regular.woff2` (+0 -0) _...and 80 more files_ </details> ### 📄 Description ## Summary Several features and performance improvements that I've been using on my Car Thing. ### PKCE Authentication - Custom Spotify Client ID support via relay server - Settings UI to enter custom client ID at runtime - Client ID badge in Settings showing active auth type (Shared/Env/Custom) - Browser-based PKCE for dev mode - PHP relay script for handling OAuth callbacks (`docs/spotify-relay.php` maybe host on the domain) ### Optimistic UI Updates - Instant feedback for play/pause/skip/seek actions - UI updates immediately, reverts on API failure - Album art opacity fade during skip transitions ### Dial Seek Toggle - Toggle dial between volume (default) and ±10s seek in Settings - Useful for skipping ads in podcasts - Debounced API calls (1s after last dial turn) ### Smart Playback Polling - Song-end detection: refreshes 500ms after track ends - Pause polling: 60s interval when paused (was 15s) - Play polling: normal 15s interval - Reduces API calls when idle ### Fast Loading Screen - Network check bypassed by default for faster boot - Parallel task execution (token refresh + boot counter) - Faster retries: 4x3s instead of single long timeout - Shorter completion delay: 500ms (was 2s) ### Other Improvements - Loading screen quotes for version tracking - QR code loading state shows text instead of placeholder - Dev mode debug info under progress bar (VITE_DEV_MODE=true) - Deploy script for syncing to device (`docs/sync-to-device.sh`) ## Test plan - [x] Tested PKCE auth with custom Spotify Client ID on device - [x] Tested optimistic UI updates (play/pause/skip) - [x] Tested dial seek toggle in Settings - [x] Verified smart polling triggers on song end - [x] Tested loading screen performance All features tested and working on a physical Car Thing device, raspberry + car thing. Cherry pick away i should say. Thanks for all the work, love the ui!! --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-02-28 15:42:16 +03:00

closed this issue
added the
pull-request
label

No labels

help wanted

pull-request

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/nocturne-ui#126

No description provided.

Rows
Columns