alexei.dolgolyov/media-player-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 20 Wiki Activity

Compare commits

base: alexei.dolgolyov/media-player-server:v0.1.1
Branches Tags
alexei.dolgolyov/media-player-server:master
alexei.dolgolyov/media-player-server:v0.4.0 alexei.dolgolyov/media-player-server:v0.3.1 alexei.dolgolyov/media-player-server:v0.3.0 alexei.dolgolyov/media-player-server:v0.2.7 alexei.dolgolyov/media-player-server:v0.2.6 alexei.dolgolyov/media-player-server:v0.2.5 alexei.dolgolyov/media-player-server:v0.2.4 alexei.dolgolyov/media-player-server:v0.2.3 alexei.dolgolyov/media-player-server:v0.2.2 alexei.dolgolyov/media-player-server:v0.2.1 alexei.dolgolyov/media-player-server:v0.2.0 alexei.dolgolyov/media-player-server:v0.1.8 alexei.dolgolyov/media-player-server:v0.1.7 alexei.dolgolyov/media-player-server:v0.1.6 alexei.dolgolyov/media-player-server:v0.1.5 alexei.dolgolyov/media-player-server:v0.1.4 alexei.dolgolyov/media-player-server:v0.1.3 alexei.dolgolyov/media-player-server:v0.1.2 alexei.dolgolyov/media-player-server:v0.1.1 alexei.dolgolyov/media-player-server:v0.1.0
...
compare: alexei.dolgolyov/media-player-server:v0.2.0
Branches Tags
alexei.dolgolyov/media-player-server:master
alexei.dolgolyov/media-player-server:v0.4.0 alexei.dolgolyov/media-player-server:v0.3.1 alexei.dolgolyov/media-player-server:v0.3.0 alexei.dolgolyov/media-player-server:v0.2.7 alexei.dolgolyov/media-player-server:v0.2.6 alexei.dolgolyov/media-player-server:v0.2.5 alexei.dolgolyov/media-player-server:v0.2.4 alexei.dolgolyov/media-player-server:v0.2.3 alexei.dolgolyov/media-player-server:v0.2.2 alexei.dolgolyov/media-player-server:v0.2.1 alexei.dolgolyov/media-player-server:v0.2.0 alexei.dolgolyov/media-player-server:v0.1.8 alexei.dolgolyov/media-player-server:v0.1.7 alexei.dolgolyov/media-player-server:v0.1.6 alexei.dolgolyov/media-player-server:v0.1.5 alexei.dolgolyov/media-player-server:v0.1.4 alexei.dolgolyov/media-player-server:v0.1.3 alexei.dolgolyov/media-player-server:v0.1.2 alexei.dolgolyov/media-player-server:v0.1.1 alexei.dolgolyov/media-player-server:v0.1.0

53 Commits
v0.1.1 ... v0.2.0

Author SHA1 Message Date
alexei.dolgolyov 62eeca1b9e chore: release v0.2.0
Release / create-release (push) Successful in 3s
Details
Lint & Test / test (push) Successful in 39s
Details
Release / build-linux (push) Successful in 1m3s
Details
Release / build-windows (push) Successful in 1m57s
Details
2026-04-25 15:34:35 +03:00
alexei.dolgolyov 4c93bfb8c1 ui(player): soften vinyl-stage halo, transparent-bg album placeholder, crossfade artwork swaps
Lint & Test / test (push) Successful in 1m50s
Details 
- vinyl-stage background fades to transparent (matches fullscreen Listening Room) — no more rectangular dark card around the sleeve+disc composition
- album-art placeholder SVG drops the opaque #282828 backdrop in favour of a translucent disc glyph so the sleeve cardstock shows through before the first artwork load
- new swapArtworkSrc helper retriggers the .is-swapping keyframes so artwork changes crossfade instead of popping
 2026-04-25 15:22:08 +03:00
alexei.dolgolyov 59840a1190 feat(player): fullscreen "Listening Room" mode 
Toggleable theater-scale player view that takes over the viewport
and amplifies the existing Studio Reference aesthetic — same fonts,
same copper/ink palette, just dialed up for immersive listening.

Layout & typography:
- Two-column centerfold: massive vinyl stage left (clamp(., 72vh, 720px)),
  editorial column right with Fraunces italic title at clamp(48px, 6.4vw,
  112px), Geist Mono console-style metadata strip, oversized timecodes,
  full-width amplitude spectrum.
- Mobile / portrait flips to vertical theater (vinyl top, masthead+
  transport below) at <=900px or any portrait orientation.

Ambient bloom:
- Duplicate of #album-art rendered behind everything at blur(110px)
  saturate(1.6) opacity(0.42) — paints the room in the record's color.
  Slow 28s drift animation. Light-theme variant at lower opacity.
- MutationObserver keeps bloom art in sync as tracks change.
- Vignette + edge darkening + subtle paper-grain veil frame the stage.

Interaction:
- Header button (corner-arrows-out icon) toggles; pressing 'F' anywhere
  outside text inputs also toggles; ESC exits.
- Native Fullscreen API requested as best-effort sugar on top of the
  CSS overlay (works on TV / tablet); CSS overlay alone covers the
  CSS-only fallback case (iOS Safari, embedded webviews).
- fullscreenchange listener mirrors OS-level exit back into the overlay.
- Auto-hide chrome + cursor after 2.5s idle, restored on mousemove.
- Focus moves to play/pause on enter; restored to invoking element on
  exit.
- Hides mini-player, tab bar, header, folio marks, and other tabs while
  active.

Motion:
- 320ms fade-in for the stage, 600ms vinyl rise, 1.4s bloom-in,
  staggered 80ms ladder for kicker -> title -> byline -> album -> meta
  -> spectrum -> transport. prefers-reduced-motion disables all.

i18n:
- player.fullscreen / player.fullscreen.exit / player.fullscreen.exit_short
  added to en.json and ru.json.

Files: index.html (header button + fs-chrome strip + fs-bloom layer),
styles.css (~360-line fullscreen block at end, scoped to body.is-
fullscreen-player), player.js (toggle + init + idle/key/observer
plumbing, ~170 lines), app.js (import + window export + init call).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-04-25 14:47:53 +03:00
alexei.dolgolyov 2a474ea52c fix(player): redesign cleanup pass — sleeve, tonearm, AGC, dead code 
Production-readiness pass before merging the Studio Reference redesign
to master.

Audio (backend):
- Reset AGC `_spectrum_ref` envelope on `start()` so a long silent gap
  between sessions doesn't make the first new transients clip at the
  ceiling. Annotated the trade-off (loud transient lifts reference for
  a few seconds afterwards — the price of real loudness).
- Add `tests/test_audio_analyzer.py` with 10 cases: bin-edge layout,
  AGC attack/release asymmetry, lifecycle reset. Skips numpy-dependent
  cases when numpy isn't installed; CI has it.

Vinyl mode dead code removed:
- The toggle button was dropped during the sleeve refactor but the JS
  state, 2 s `setInterval`, `beforeunload` handler, and `applyVinylMode`
  call (commented out in app.js) all stayed. Now properly excised from
  player.js + app.js + window.* exports.
- Stripped the matching `.album-art-container.vinyl*` CSS block and its
  `vinylSpin` keyframes (~95 LoC).

Sleeve + tonearm fixes:
- Removed the duplicate `.now-playing .vinyl-stage` / `.vinyl-label` /
  `.tonearm` block that was overriding the new `.vinyl-stage` rules by
  source order — the uncommitted tonearm geometry never took effect
  because the stale clone won the cascade.
- Tightened tonearm to 36% × 36% at right:-6%, top:26% so the SVG
  bounding box stays right of the sleeve (sleeve right edge ~68%).
  Needle now lands on the visible disc grooves at both rest and
  playing rotations and never overlaps the cover.
- Removed sleeve `transform: rotate(-2.5deg)` + the matching mobile
  `-1.8deg` override; sleeve now sits flat and squared-off.
- Removed the 1px inset hairline on the sleeve and the 1px outline +
  inset highlight on the album art — cleaner, no semitransparent
  border noise.
- Album art inset 5% to expose a cardstock margin around the print
  (using explicit width/height — `inset` shorthand triggered the CSS
  replaced-element rule that uses the image's intrinsic size and blew
  out the grid track).

Mobile + misc:
- Removed mobile tonearm overrides at 720px and 420px — they were
  calibrated for the pre-sleeve geometry and put the needle back over
  the cover on phones; desktop geometry is proportional and works.
- Added `<meta name="mobile-web-app-capable">` alongside the legacy
  Apple variant to silence the deprecation warning in Chromium.
- Replaced the "PRIMARY" badge on display cards with a copper star
  icon (translation key still drives title + aria-label).
- `.gitattributes` with `* text=auto eol=lf` so Windows checkouts stop
  nagging "LF will be replaced by CRLF".

Annotations:
- "REF · 24" record-label catalogue mark marked as intentional non-i18n
  decoration in index.html.

CI: ruff clean, pytest 7 passed + 3 numpy-skipped (all 10 run on CI).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-04-25 14:39:20 +03:00
alexei.dolgolyov f85ce77f14 ui(mobile): Pocket Edition layout + tablet tab range fix 
- Pocket Edition (<=720px): bottom-fixed tab nav with frosted
  backdrop, copper hairline + glow on active, mono numerals +
  abbreviated labels (legacy rule was hiding labels under 600px).
- Single-column hero player tab: centered vinyl + tonearm,
  clamp(28..38px) title, full-width volume row replacing the desktop
  VU cluster (the analog meter is decorative on a phone).
- Mini-player floats above the bottom nav, condensed to art + title +
  play/pause with the hairline progress on the top edge.
- Library pagination stacks to full-width buttons; settings tables
  reflow to card-style rows so no columns drop off-screen.
- Tablet 721-980px: editorial top tabs but with compressed padding so
  all five labels fit without clipping.
- Side-by-side player threshold bumped 980 -> 1240 so the right
  column has genuine room for controls + VU cluster (was clipping
  off the edge at 981-1240px). flex-wrap on .controls as safety net.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-04-25 12:16:51 +03:00
alexei.dolgolyov b09569f390 fix(vu): drive needle from RMS-dB loudness instead of peak-of-bins 
- Backend computes time-domain RMS, maps -60..-6 dB to 0..1, sends as
  `level` alongside the per-frame-normalized frequency bins.
- Frontend prefers `level` directly; drops the peak-of-bins fallback
  and the redundant volume-slider attenuation (loopback capture is
  already post-volume on Windows/macOS).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-04-25 12:16:41 +03:00
alexei.dolgolyov f2c82164e8 ui(vu): narrower 44deg swing, peak-based level, faster response; mini progress bar fix 
- VU needle swings -22..+22deg instead of -45..+45 for a more realistic VU look
- Switch from RMS to peak frequency reading so the needle catches musical hits
- Faster attack (0.7) and release (0.25) so it swings rather than pinning
- Replace explicit grid lines with subtle repeating-conic-gradient ticks
- Scope mini progress bar styles to .mini-player; taller (3px), clickable
 2026-04-25 11:41:32 +03:00
alexei.dolgolyov 588a303c44 ui: fix search icon overlap, Display cards, compact view, dark dropdowns 
Library
- Search icon overlapped placeholder text — legacy CSS positioned
  the icon absolutely (left: 0.6rem) inside a position: relative
  wrapper. Override now resets position: static (with !important)
  on icon, clear button, and wrapper, lets the flexbox order them
  naturally with gap: 10px, and zeroes the input's legacy
  padding: 0.4rem 2rem 0.4rem 2rem.
- Compact view now visually distinct from grid view: tighter
  grid (minmax(120px, 1fr) vs 200px), 18px gap, smaller sans-
  font name (13px sans 500 weight) instead of serif, smaller
  meta (9px), smaller browser-icon. The legacy
  .browser-grid-compact class was being applied but my
  .now-playing-styled rules ignored it.

Display tab — full card styling
- Cards: 360px min width (was 280px), serif name (17px) with
  copper monitor icon, mono uppercase resolution + manufacturer,
  copper-bordered "PRIMARY" badge.
- Power button: 38px circle, jade when ON (with copper-glow
  shadow), faint ink when OFF, copper on hover. Was previously
  unstyled / invisible.
- Brightness control: hairline divider above, copper hairline
  slider with copper handle and copper-glow, mono tabular-num
  percentage in copper.

Native form widgets readable on dark theme
- color-scheme: dark on :root (light on light theme) so native
  controls (select dropdowns, scrollbars) inherit dark colors.
- select option { background-color, color } so the popup list
  paints dark text on dark background instead of system white.
 2026-04-25 02:55:36 +03:00
alexei.dolgolyov 2049850180 ui: editorial styling for Library/Quick Access/Settings/Display + tab fix 
Tab bar
- Was rendering with all 4 borders + bg + radius (legacy capsule).
  Override now nukes border/background/radius/padding with !important
  and leaves only a single hairline border-bottom. Tabs now read as
  an editorial nav strip, not a card.

Library (browser tab)
- Breadcrumb: italic serif with copper hover, mono separator
- Toolbar: hairline-grouped controls, no card chrome
- View-toggle: square hairline pills with copper active
- Search: underline-only input, copper underline on focus
- Items-per-page: mono uppercase label + hairline select
- Browser grid: editorial cards (serif title + mono meta), copper
  hover border, copper play-overlay
- List view: hairline table with mono headers + serif cells
- Pagination: hairline buttons, mono uppercase, copper hover

Quick Access
- Console-rail layout (1px gaps on rule background)
- Cards: serif italic label, copper hover with icon lift
- Empty state: italic serif on dashed paper card

Settings
- Each settings-section becomes a numbered editorial card with a
  CSS counter (5.01, 5.02, ...) shown as a mono prefix on the
  italic-serif summary. Open/closed chevron via :before/:after
- Tables: hairline borders, mono uppercase headers, serif name cells
- Add-card: editorial dashed border, copper-on-hover
- Audio device selector: mono labels, hairline select, status
  pills (active/available/unavailable) in jade/amber/rust
- Folder badges, action buttons, empty states all aligned to
  the editorial palette

Display
- Monitor grid: editorial paper cards
- Headings: serif, copper hover on actions
- Empty state: italic serif on dashed card

Cross-cutting
- Icon-select trigger + popup restyled to editorial
 2026-04-25 02:50:51 +03:00
alexei.dolgolyov 9b84fdd0e5 fix(vu): drop conic-gradient mask, draw lines explicitly in 0-90 range 
The mask + repeating-conic-gradient combo was rendering the visible
arc shifted to the right (mask appeared centred on 12-3 o'clock
instead of 10:30-1:30). Cause unclear — likely a browser quirk
around `from -45deg` interaction between the two conic-gradients.

Replaced with a single non-repeating conic-gradient using `from 315deg`
(the positive equivalent of -45deg). Lines are drawn explicitly at
every 9° from 0° to 90° in the gradient (-45° to +45° in standard
orientation) — 11 lines total, with the centre line (at 0°) slightly
brighter so it reads as the meter's "0 VU" mark. Outside the 90°
active wedge the gradient is transparent, so no mask is needed.

Result: the leftmost gridline now sits exactly where the needle rests
at -45°, like a real VU meter at silence.
 2026-04-25 02:44:57 +03:00
alexei.dolgolyov 3de2b4496e fix(vu): clip grid arc to match needle swing range so rest = proper zero 
The grid pattern was a 360° repeating conic gradient (visible across
the full upper 180° arc), while the needle only swings -45..+45.
That made the rest position at -45 sit *inside* the visible arc
rather than at the leftmost gridline — looked wrong.

Now:
- Grid lines start at the -45 angle (matches needle origin)
- Conic-gradient mask clips visibility to the 90° active wedge
- Leftmost gridline now coincides with the needle's rest rotation
  → looks like a real VU meter at zero (silence)
 2026-04-25 02:41:29 +03:00
alexei.dolgolyov d7f488ac70 fix(ui): centred toolbar icons; full-width spectrum; needle at rest; drop dynamic bg 
Toolbar icons (off-centre inside hit box)
- Legacy .header-btn had padding: 4px 6px and inline-flex with no
  justify-content. With box-sizing: content-box and width: 36px, the
  asymmetric horizontal padding shifted icons to the upper-left of
  the 36×36 hit box.
- Override now sets display: inline-flex; align-items: center;
  justify-content: center; padding: 0; box-sizing: border-box and
  forces SVG children to display: block 16x16 so icons sit dead-
  centre.

Spectrum width — root cause finally found and removed
- An old override block (lines 4821–4878) was still in the file:
  .spectrum { max-width: 360px } + .spectrum span { width: 3px;
  flex: 0 0 3px } + 30 nth-child rules. They had equal/higher
  specificity for some props than the .now-playing-scoped rules
  and were declared first, so width was capping the row.
- Deleted that whole block. .now-playing .spectrum is now the
  single source of truth. Combined with the explicit
  grid-template-columns: repeat(40, minmax(0, 1fr)) (set both in
  CSS literal and from JS via gridTemplateColumns), the row
  reliably fills the column.

VU needle resting position
- CSS default rotation changed from -22deg (pointing upper-left)
  to -45deg — the conventional VU meter rest at silence (-∞ dB).
  Matches stopVuWobble() which also settles the needle there.

Dynamic background — removed
- .bg-shader-canvas hidden via display: none.
- Toggle button (#bgToggle) hidden so the toolbar is cleaner.
- Canvas + JS module stay in DOM so the existing JS doesn't crash.
 2026-04-25 02:38:03 +03:00
alexei.dolgolyov 968eb156bc fix(player): real audio level on VU; full-width spectrum; hide canvas under vinyl 
VU needle reflects actual audio output
- Was just a synthetic wobble bounded by the volume slider value.
  Now reads RMS of the FFT bins (skipping bin 0 / DC) the visualizer
  feeds in, multiplies by current volume, and applies attack/release
  smoothing for analog-feeling ballistics.
- Falls back to the synthetic wobble when audio capture isn't
  running so the needle still looks alive on the static fallback.
- When playback stops, needle settles to the bottom of the swing
  (-45deg) instead of holding the volume position.

Spectrum width — actually fixed this time
- Root cause: CSS repeat() does NOT accept a CSS variable for its
  count argument, so my `repeat(var(--spectrum-bars), 1fr)` rule
  was invalid and silently dropped, leaving the legacy/auto sizing
  behavior. Set grid-template-columns directly from JS to
  `repeat(40, minmax(0, 1fr))`.
- CSS retains a `repeat(40, minmax(0, 1fr))` literal as a default
  so the row renders sane even before JS executes.

Spectrogram canvas under vinyl
- Hidden via display: none — the editorial .spectrum row already
  shows the audio spectrum; the canvas was redundant and ugly.
  Element stays in DOM so the visualizer JS keeps rendering (drives
  album-art bass-pulse + dynamic background bands).
 2026-04-25 02:27:56 +03:00
alexei.dolgolyov a0f74dfc39 fix(visualizer): full-width spectrum + device pick auto-starts capture 
Spectrum width
- grid-auto-flow: column with implicit columns wasn't reliably
  stretching to fill the parent. Switch to explicit
  grid-template-columns: repeat(var(--spectrum-bars), minmax(0, 1fr))
  with the bar count exposed as a CSS variable from JS so the
  column count and the actual bar count stay in sync.
- !important on display/grid-template-columns/width to defeat any
  legacy descendant rules.

Device selection
- Picking a device in the audio-device dropdown is an explicit
  signal that the user wants capture. Auto-enable the visualizer
  if it isn't already on, then call applyVisualizerMode so the
  WS subscription happens and the badge flips from 'Available' to
  'Active'. Was only doing this when visualizer was already on,
  which is why the user kept seeing 'Available, not capturing'.
 2026-04-25 02:24:01 +03:00
alexei.dolgolyov 6066b4a2c5 fix(visualizer): auto-enable actually starts capture; persist audio device 
Auto-enable was a no-op
- Writing 'visualizerEnabled'='true' to localStorage from app.js did
  not update the exported `let visualizerEnabled` in player.js. So
  applyVisualizerMode() saw the stale `false` and went into the
  DISABLE branch — leaving the device 'available, not capturing'.
- Add a setVisualizerEnabled() setter exported from player.js and
  call it before applyVisualizerMode() during boot.

Audio device persistence
- Save the selected device name to localStorage on change.
- On loadAudioDevices(), prefer status.current_device (server's
  current state) but fall back to the localStorage value if the
  server doesn't know one (e.g. after a server restart).
- If the saved device wasn't recognized by the server, push it back
  via POST /api/media/visualizer/device so capture lands on it
  immediately. Best-effort; no toast on failure.
 2026-04-25 02:17:03 +03:00
alexei.dolgolyov 153424eff8 ui(player): widen spectrum to fill column; swap volume control to left of VU cluster 
- Spectrum: switch from flex to grid auto-flow so each bar gets an
  equal-width column slot regardless of bar count. Fewer (40) but
  fatter bars now genuinely span the full grid column.
- Spectrum height bumped to 70px, gap 4px.
- VU cluster: flex-direction: row-reverse so volume controls sit on
  the LEFT, readout in the middle, VU meter on the RIGHT.
- Volume hairline divider switched from border-left to border-right
  so it stays between the volume controls and the readout.
 2026-04-25 02:13:22 +03:00
alexei.dolgolyov 336d596b66 fix(ui): full-width spectrum + log-mapped bars; deeper sepia + soft art fade 
Spectrum
- Logarithmic frequency-to-bar mapping (squared time so bins
  stretch toward the highs). Per-bar high-end gain ramps from
  1.0x at the lowest bar to 3.0x at the highest, so the right
  half of the spectrum no longer reads as dead air.
- Floor bumped from 6% to 12% so silent bars stay visible.
- Skip bin 0 (DC + sub-rumble) which was overwhelming the lows.
- Use peak (not average) within each band — punchier visual.
- Container height 56→64, gradient now copper-lo → copper →
  copper-hi for more visible top tips. min-width: 0 / box-sizing
  border-box ensures the row truly claims the full grid column.
- Backend FFT path is unchanged: WS audio_data → setFrequencyData
  → renderVisualizerFrame → updateEditorialSpectrum. No
  client-side analyzer added.

Album art (vinyl label)
- Deeper sepia (0.35→0.6) and lower saturate (0.85→0.7) so
  vibrant covers blend into the copper grooves.
- Soft radial mask: outer ~22% of the disc fades toward the
  vinyl black so the album art dissolves into the surface
  rather than terminating at a hard clip edge.
- Hover state pulls the fade inward and eases sepia back so
  the user can still see the real cover at near-natural color.
- Glow tint matches the new sepia depth.
 2026-04-25 02:07:20 +03:00
alexei.dolgolyov d937c1590c feat(ui): live VU + audio-driven spectrum, editorial banner, subtler dynamic bg 
VU needle (animated)
- Synthetic wobble bounded by current volume runs only while
  state==='playing'. Two combined sines + jitter make it look
  like a real analog needle reacting to peaks.
- Settles back to the static volume-mapped position when paused.

Spectrum (real audio)
- Now driven by the same frequencyData the visualizer canvas
  uses. Each visual bar averages a chunk of frequency bins.
- Spans are now JS-injected (60 bars) instead of hardcoded so
  the bar count is no longer baked in.
- Spectrum spans full width of the masthead column, height
  bumped to 56px for presence.
- CSS animation pauses (sets via `body.audio-spectrum-live`)
  when JS is driving heights so the keyframes don't fight.
- Synthetic CSS animation remains as the fallback when audio
  capture isn't available.

Visualizer auto-enable
- On first install with loopback support, visualizer is
  enabled so the spectrum is alive out of the box.

Dynamic background
- Lower max opacity (1 → 0.45 dark, 0.35 light)
- sepia + saturate filter + hue-rotate keep it palette-aligned
  with the copper editorial tones instead of fighting them
- mix-blend-mode screen (dark) / multiply (light) blends into
  the page background instead of overlaying

Update + connection banners
- Fully restyled: glassy card with copper hairline accent,
  mono uppercase text, copper hairline-border CTA buttons,
  minimal close button. Matches the rest of the editorial
  palette instead of the old solid-green-bar look.
 2026-04-25 02:03:15 +03:00
alexei.dolgolyov d157388a94 fix(ui): editorial toolbar + sepia album art 
Toolbar
- Strip the legacy dark capsule from .header-toolbar (background,
  border, border-radius, padding) — buttons now sit as individual
  ghost icons matching the mockup, with the per-button transparent
  border + copper hover that was already in place.

Album art
- Apply a warm sepia/saturate/contrast filter to #album-art inside
  the vinyl label so vibrant covers (e.g. Rammstein red) don't
  fight the copper palette and read consistent with the vinyl
  groove rendering. Eases back to near-natural color on .now-playing
  hover so the user can still see the real cover.
- Match the album-art-glow tint with the same hue-rotate so the
  bloom around the spinning label stays palette-aligned.
 2026-04-25 01:56:03 +03:00
alexei.dolgolyov e9e4165927 fix(ui): close more gaps with mockup (tabs, mini player, volume control) 
Tabs
- Replace SVG icons with mockup-style numeric badges (01..05)
- Hide the legacy .tab-indicator (was rendering as a long copper
  bar above the strip); active tab gets its own copper underline
  via .tab-btn.active::after
- Numbers turn copper on the active tab

Player view
- Volume control restored: mute button + slim copper slider live
  inside the VU cluster, on the right of the readout, separated
  by a hairline. Slider is the existing #volume-slider so all JS
  hooks (bidirectional sync, drag, etc.) keep working.
- Track title font scaled down (clamp 34..64) and clamped to 3
  lines with ellipsis so long YouTube-style titles don't dominate
  the masthead. Adds word-break + overflow-wrap.
- #artist:empty and #album:empty are now display:none so blank
  rows don't leave a gap when the source provides no metadata.

Mini player
- Forced display: grid with 4 columns: track / controls / progress
  / volume. Was inheriting legacy display:flex which pushed elements
  into a single non-aligned row.
- Position locked: position: fixed, bottom: 0, left/right: 0 with
  !important. The strip is firmly anchored to the viewport bottom.
- Top edge progress (::before) painted in copper with glow.
- Responsive collapse: hide progress at <=880px, hide volume at
  <=540px, leaving track + controls on phones.

i18n
- tab.player default text aligned to "Now Spinning" (matches
  existing en/ru values added earlier).
 2026-04-25 01:51:13 +03:00
alexei.dolgolyov 77b39e5684 fix(ui): snap player view directly from Studio Reference mockup 
Wholesale replacement of the player view markup + a verbatim mockup
CSS block scoped to .now-playing. Previous approach kept restyling
legacy classes which left a layered, inconsistent result. This is a
clean snap: same DOM structure as the mockup, same CSS rules, mapped
onto existing JS-touched IDs.

Markup
- One <section class="now-playing"> with vinyl-stage on left and
  track-masthead on right
- Vinyl spins via data-playstate and contains album art as the
  circular center label (existing #album-art img preserved)
- SVG tonearm pivots in/out by data-playstate
- Track masthead: .kicker (copper italic mono), large italic-serif
  .track-title, italic .track-byline, mono .track-album
- Meta grid: 2 cells (State / Source) with mono labels + italic
  serif values
- 30 .spectrum bars between metadata and transport
- .transport: progress-row (timecode + .progress-track + timecode)
  and .controls (3 .btn-trans buttons + .vu-cluster)
- Volume slider, mute button, visualizer toggle moved to a
  .visually-hidden block — they remain functional for JS / a11y
  but no longer compete for visual real estate. Volume control
  happens via the always-visible mini player.

VU cluster (mockup-faithful)
- 140x60 VU meter with conic-gradient grid background, copper
  needle, "VU" label
- Stacked readout: "OUT <strong>SYS</strong>" / "VOL <strong>72%</strong>"
- Click anywhere on cluster toggles mute (calls toggleMute())
- When muted: needle turns rust, readout strong turns rust,
  OUT label switches to MUTE

JS hooks
- updatePlaybackState already sets :root[data-playstate] (drives
  spin + tonearm)
- Volume tick now updates #vu-vol and #vu-out
- updateMuteIcon updates #vu-out + .vu-cluster.muted class

Scoping
- All new CSS is .now-playing-prefixed so other tabs and dialogs
  are untouched
- Legacy .progress-bar:hover scaleY and ::after scale(0) are
  defeated with !important inside .now-playing
 2026-04-25 01:43:11 +03:00
alexei.dolgolyov d9d4672ca3 fix(ui): drop redundant Elapsed/Length cells; restore timeline 
- Meta-grid reduced from 4 cells to 2 (State / Source). Elapsed and
  Length were duplicates of the timecodes already flanking the
  timeline. Added .meta-grid-2 modifier with a 2-column layout.
- Timeline was distorted by legacy rules: .progress-bar:hover did
  scaleY(1.4) (inflating the 2px hairline on hover) and the
  progress-fill::after handle defaulted to scale(0). Both are now
  forced via !important to keep the hairline flat and the copper
  handle always visible.
- progress-row uses minmax(0, 1fr) for the bar cell so it shrinks
  cleanly inside the grid.
- Removed unused meta.elapsed / meta.length keys from en.json + ru.json.
- Dead JS lookups for #meta-elapsed / #meta-length stay (cheap if-checks,
  no-op when DOM elements gone).
 2026-04-25 01:35:19 +03:00
alexei.dolgolyov 265b001b99 fix(ui): close gaps with Studio Reference mockup 
Side-by-side comparison surfaced several layout regressions vs. the
mockup. This commit lands all of them at once.

Header
- Restore centered "Media Server / Studio Reference Edition" wordmark
  in italic Fraunces
- Move folio marks to fixed page corners (visible on every tab):
  TL = green pulse + "Connected · Local 8765"
  TR = "Vol. I — Studio Reference · v0.x.x"
- Replace boxed version-label badge with copper mono inline in folio.tr
- Reduce header-to-content gap (container padding-top 28→56 with the
  folio now anchored above)

Player view
- Spectrum bars: smaller height (32px), centered with max-width so
  they don't span the whole right column
- Spectrogram canvas: hidden by default (opacity 0); reveals only when
  visualizer toggle is active. No more leaking into bottom-left.
- VU cluster volume controls: strip legacy box (background, padding,
  border-radius); compact stacked layout with thin slider, small mute
  button, mono "VOL · XX%" readout
- Disable legacy applyVinylMode() — the .vinyl class added a SECOND
  rotation animation on top of the structural .vinyl-stage spin,
  causing visible compounding. Vinyl is now purely structural.

Toggles
- Remove vinyl mode toggle button (vinyl is always on)
- Keep audio visualizer (spectrum vis) toggle — still shown by JS
  when supported

Mini player
- Force always-visible on non-player tabs regardless of scroll, by
  short-circuiting setMiniPlayerVisible when activeTab !== 'player'

i18n
- New keys: header.connected, header.volume, header.edition,
  header.edition_sub
- Removed unused: player.folio_left, player.folio_right
- en.json + ru.json updated
 2026-04-25 01:32:34 +03:00
alexei.dolgolyov 14e9f2294e feat(ui): rebuild player view to match Studio Reference mockup 
Restructures the player tab DOM to actually look like the editorial
mockup, not just inherit new fonts. The previous commit only swapped
tokens & typography on the legacy Spotify-clone layout.

DOM additions (all preserve existing JS-touched IDs):
- Vinyl stage: rotating vinyl wrapping the existing #album-art as a
  circular center label; spins only when state=playing via CSS hook
- SVG tonearm: pivots in/out based on data-playstate
- Kicker line: copper italic mono header above the track title
- Editorial 4-cell metadata grid: State / Source / Elapsed / Length
- Decorative spectrum bars (30, CSS-only animation, paused when idle)
- VU meter cluster: needle visual driven by volume %, alongside the
  preserved volume slider for a11y
- Folio marks: top-left and top-right of the player container

JS hooks (small, additive):
- updatePlaybackState now sets :root[data-playstate] for CSS
- progress tick mirrors timecode into meta-grid cells
- volume update rotates the VU needle
- folio-version mirrors the version label

i18n:
- new keys: player.kicker, player.modes, player.folio_*, meta.*
- added to both en.json and ru.json

Restored: media_server/static/redesign-mockup.html (Studio Reference
visual reference; deleting it in the prior commit was a mistake).
 2026-04-25 01:24:11 +03:00
alexei.dolgolyov 8110c152b0 feat(ui): Studio Reference redesign — editorial hi-fi aesthetic 
Replaces the Spotify-clone dark theme with a warm editorial design
language inspired by hi-fi audio mastering and magazine layouts.

- Self-host Fraunces, Geist, and Geist Mono as variable WOFF2 files
  (Latin + Latin-ext + Cyrillic subsets, OFL-licensed)
- New design tokens: warm charcoal + copper accent (dark) /
  cream paper + hunter emerald (light)
- Editorial typography: Fraunces serif for display + masthead,
  Geist for UI, Geist Mono for technical readouts (timecodes, bitrates)
- Player view restyled as magazine spread with framed album art
- Mini player as glassy console strip with copper hairline glow
- Tabs as italic editorial nav with copper underline
- Browser items as gallery cards with editorial typography
- Settings as numbered sections with refined tables
- Quick Access as console rail
- Dialogs and auth modal as paper cards with mono kickers
- Subtle film-grain overlay for analog warmth
- Localized tab labels: Player → Now Spinning, Browser → Library
 2026-04-25 01:07:45 +03:00
alexei.dolgolyov 21adeb1070 chore: release v0.1.8
Lint & Test / test (push) Successful in 15s
Details
Release / create-release (push) Successful in 8s
Details
Release / build-linux (push) Successful in 40s
Details
Release / build-windows (push) Successful in 1m7s
Details
2026-04-18 19:49:49 +03:00
alexei.dolgolyov 68614c982d fix(windows): keep required numpy submodules in build cleanup 
lib, linalg, ma, polynomial, fft, ctypeslib, matrixlib are imported
unconditionally by numpy/__init__.py and must not be trimmed.
 2026-04-18 19:49:09 +03:00
alexei.dolgolyov a2a258e898 chore: release v0.1.8
Lint & Test / test (push) Successful in 10s
Details
Release / create-release (push) Successful in 3s
Details
Release / build-linux (push) Successful in 48s
Details
Release / build-windows (push) Successful in 1m19s
Details
2026-04-18 19:30:02 +03:00
alexei.dolgolyov 456eb3a881 fix(windows): fix numpy DLL loading in embedded Python distribution 
- Generate numpy/_distributor_init_local.py during build so libopenblas
  can be located when running from the Windows installer
- Add os.add_dll_directory() call at runtime as a fallback for embedded Python
 2026-04-18 19:29:39 +03:00
alexei.dolgolyov c586b1b518 chore: release v0.1.8
Lint & Test / test (push) Successful in 10s
Details
Release / create-release (push) Successful in 3s
Details
Release / build-linux (push) Successful in 47s
Details
Release / build-windows (push) Successful in 1m10s
Details
2026-04-18 17:51:46 +03:00
alexei.dolgolyov ee5184920d fix(visualizer): sync state and re-subscribe from audio device load 
- Broaden audio import errors from ImportError to Exception, log at warning
- Move visualizer WS re-subscription into loadAudioDevices() so it runs
  after availability is confirmed from the API
- Show/hide the visualizer toggle button based on fetched availability
 2026-04-18 17:48:49 +03:00
alexei.dolgolyov af556e0bff chore: release v0.1.7
Lint & Test / test (push) Successful in 14s
Details
Release / create-release (push) Successful in 3s
Details
Release / build-windows (push) Successful in 47s
Details
Release / build-linux (push) Successful in 29s
Details
2026-04-17 23:40:45 +03:00
alexei.dolgolyov 26b4672a99 chore: release v0.1.6
Release / create-release (push) Successful in 3s
Details
Lint & Test / test (push) Successful in 10s
Details
Release / build-linux (push) Successful in 31s
Details
Release / build-windows (push) Successful in 52s
Details
2026-04-11 03:36:55 +03:00
alexei.dolgolyov 2e3bebfeb8 chore: release v0.1.5
Release / create-release (push) Successful in 10s
Details
Lint & Test / test (push) Successful in 15s
Details
Release / build-linux (push) Successful in 48s
Details
Release / build-windows (push) Successful in 1m10s
Details
2026-04-11 02:09:29 +03:00
alexei.dolgolyov 34eb7c7b19 fix(ws): make WebSocket token parameter optional 
Required token query param caused connection failures for clients
that authenticate via other means.
 2026-04-11 02:04:36 +03:00
alexei.dolgolyov 972ee54b91 chore: release v0.1.5
Release / create-release (push) Successful in 3s
Details
Lint & Test / test (push) Successful in 10s
Details
Release / build-linux (push) Successful in 53s
Details
Release / build-windows (push) Successful in 1m17s
Details
2026-04-11 01:43:43 +03:00
alexei.dolgolyov d09a0b90e4 fix(ws): fetch status eagerly on new WebSocket connection 
Instead of waiting for the next poll cycle, new clients now get the
current playback status immediately on connect by calling get_status_func
if no cached status is available yet.
 2026-04-11 01:40:40 +03:00
alexei.dolgolyov c3cb7a4da9 fix(dist): stop stripping .py sources; wipe payload on NSIS upgrade
Release / create-release (push) Successful in 5s
Details
Lint & Test / test (push) Successful in 11s
Details
Release / build-linux (push) Successful in 33s
Details
Release / build-windows (push) Successful in 57s
Details 
Two root causes for the 'imaging extension was built for another version
of Pillow' error users hit after install:

1) cleanup_site_packages ran 'find ... -name "*.py" ! -name "__init__.py"
   -delete' with a comment claiming 'keep .pyc only' — but no compileall
   step exists. Result: the dist shipped __init__.py + .pyd only, missing
   every submodule (Image.py, ImageDraw.py, _version.py, ...). Fresh
   installs were broken; in-place upgrades produced a half-old/half-new
   site-packages. Removed the deletion entirely.

2) NSIS installer extracted over the previous install without cleaning
   python/, app/, scripts/. Upgrades left stale files (old PIL/_version.py
   next to new PIL/_imaging.pyd) which raised the Pillow ABI mismatch.
   Wipe those subtrees before File /r, preserving config.yaml at the
   install root.
 2026-04-07 22:57:26 +03:00
alexei.dolgolyov e3889fef29 chore: release v0.1.4
Lint & Test / test (push) Successful in 10s
Details
Release / create-release (push) Successful in 3s
Details
Release / build-windows (push) Successful in 56s
Details
Release / build-linux (push) Successful in 31s
Details
2026-04-07 22:43:05 +03:00
alexei.dolgolyov 84500401e7 fix(ci): move pystray to VIS_DEPS so its Pillow resolves with core
Release / create-release (push) Successful in 3s
Details
Lint & Test / test (push) Successful in 10s
Details
Release / build-linux (push) Successful in 32s
Details
Release / build-windows (push) Successful in 1m7s
Details 
pystray in WIN_DEPS (per-dep loop) downloaded its own Pillow version,
which overwrote the one resolved alongside CORE_DEPS during unzip.
Result at runtime: '_imaging extension was built for another version
of Pillow'.

Move pystray into VIS_DEPS so it's resolved in the single cross-deps
pip-download call and shares one consistent Pillow version.
 2026-04-07 22:35:24 +03:00
alexei.dolgolyov 28293c6340 fix(ci): replace uvicorn[standard] with explicit extras for cross-build
Release / create-release (push) Successful in 3s
Details
Lint & Test / test (push) Successful in 10s
Details
Release / build-linux (push) Successful in 42s
Details
Release / build-windows (push) Successful in 1m9s
Details 
uvicorn[standard] pulls uvloop via a 'sys_platform != win32' marker.
pip evaluates env markers against the HOST (Linux in CI), so uvloop
is requested even in a --platform win_amd64 resolve. No uvloop wheel
exists for Windows, so pip backtracks across every uvicorn[standard]
version and fails with ResolutionImpossible.

Use plain uvicorn plus the Windows-compatible extras we actually need
(httptools, websockets, python-dotenv).
 2026-04-07 22:29:29 +03:00
alexei.dolgolyov 39b3aed5f3 fix(ci): hybrid pip download - single call for cross-platform deps
Release / create-release (push) Successful in 3s
Details
Lint & Test / test (push) Successful in 10s
Details
Release / build-windows (push) Failing after 31s
Details
Release / build-linux (push) Successful in 47s
Details 
The per-dep loop regressed pydantic/pydantic-core compatibility:
each dep resolves transitive versions independently, so 'pydantic'
brings core 2.41.5 while 'pydantic-settings' brings core 2.45.0,
and the later wheel overwrites the earlier during site-packages
unzip, producing:
  SystemError: pydantic-core 2.45.0 is incompatible with
  pydantic, which requires 2.41.5

Fix: single pip-download call for CORE_DEPS + VIS_DEPS so pip
resolves compatible transitive versions. Keep the per-dep loop
with --pre only for WIN_DEPS, where each dep needs its own
platform/non-platform fallback and winsdk requires --pre for
its beta wheels.
 2026-04-07 22:24:57 +03:00
alexei.dolgolyov ba90dffa18 fix(ci): revert to per-dep pip download loop with --pre
Release / create-release (push) Successful in 4s
Details
Lint & Test / test (push) Successful in 10s
Details
Release / build-linux (push) Successful in 40s
Details
Release / build-windows (push) Successful in 1m17s
Details 
Single pip-download call fails because the second fallback branch
(without --platform) tries to resolve Windows-only deps like winsdk
on Linux, where no wheels exist. The original per-dep loop isolates
each failure so the platform-specific branch handles each dep
independently. Add --pre throughout for winsdk (1.0.0bNN beta).
 2026-04-07 19:39:38 +03:00
alexei.dolgolyov 69df9b6b95 fix(ci): normalize non-PEP440 versions before stamping pyproject.toml
Lint & Test / test (push) Successful in 16s
Details 
If a tag or CI ref is not PEP 440 compliant (e.g. 'dev', 'nightly',
'snapshot-2024'), the previous detect_version stamped it raw into
pyproject.toml, which then broke 'pip install' with:
  configuration error: project.version must be pep440

Add a regex check after stripping the leading 'v'. If the result
is not PEP 440, substitute '0.0.0.dev0' and warn.

Pattern from ClaudeCodeFacts/gitea-python-ci-cd.md §3.
 2026-04-07 19:38:15 +03:00
alexei.dolgolyov 760c3df90c fix(ci): pass --pre to pip download for winsdk beta wheels
Release / create-release (push) Successful in 24s
Details
Lint & Test / test (push) Successful in 30s
Details
Release / build-linux (push) Successful in 38s
Details
Release / build-windows (push) Failing after 43s
Details 
The single pip-download call regressed winsdk fetching because pip
won't pick up pre-releases (1.0.0bNN) without --pre. The old per-dep
loop hid this via its fallback branch. Add --pre to both branches.
 2026-04-07 19:36:49 +03:00
alexei.dolgolyov 60f287bb40 ci: revert action caching, gitea cache backend not configured
Lint & Test / test (push) Has been cancelled
Details
Release / create-release (push) Successful in 36s
Details
Release / build-windows (push) Failing after 1m59s
Details
Release / build-linux (push) Successful in 2m48s
Details 
setup-node and actions/cache@v4 hang trying to talk to a missing
cache server, adding 1-3min per step. Drop the cache: directives
and explicit cache blocks. Keep the single pip-download call in
build-dist-windows.sh which is independent of any cache backend.
 2026-04-07 19:30:39 +03:00
alexei.dolgolyov f52af51a20 ci: cache pip wheels, npm deps, and embedded Python in release workflow
Lint & Test / test (push) Successful in 18s
Details
Release / create-release (push) Successful in 13s
Details
Release / build-windows (push) Has been cancelled
Details
Release / build-linux (push) Has been cancelled
Details 
- Add pip and npm caching to build-windows and build-linux jobs
- Cache embedded Python zip and Windows wheels across runs
- Collapse per-dep pip download loop into a single resolver call

First run after this lands populates the caches; subsequent
release builds should drop from ~11min to ~3-5min.
 2026-04-07 19:19:46 +03:00
alexei.dolgolyov f2d569a1b0 chore: release v0.1.3
Release / create-release (push) Successful in 4s
Details
Release / build-windows (push) Has been cancelled
Details
Release / build-linux (push) Has been cancelled
Details
Lint & Test / test (push) Has been cancelled
Details
2026-04-07 19:04:03 +03:00
alexei.dolgolyov db777fa64b fix: prevent dialog showModal from auto-focusing first input
Lint & Test / test (push) Successful in 1m18s
Details 
Patches HTMLDialogElement.prototype.showModal globally to move focus
onto the dialog element itself instead of the first focusable
descendant. On touch devices the previous behavior popped up the
on-screen keyboard whenever a modal opened, which was confusing.
 2026-04-07 19:01:42 +03:00
alexei.dolgolyov 2961f8eaec chore: release v0.1.2
Release / create-release (push) Successful in 4s
Details
Lint & Test / test (push) Successful in 11s
Details
Release / build-linux (push) Successful in 29s
Details
Release / build-windows (push) Successful in 1m11s
Details
2026-03-29 20:00:38 +03:00
alexei.dolgolyov c50a8f472c fix: make folder status visible with dot + text label
Lint & Test / test (push) Successful in 10s
Details 
Status dot was 8x8px with no text, nearly invisible in the table.
Now renders as a colored dot with an adjacent text label
(Available / Unavailable).
 2026-03-29 15:07:46 +03:00
alexei.dolgolyov cad6e8a1fe feat: redesign media browser UI
Lint & Test / test (push) Successful in 9s
Details 
- Root folder cards with hero-style layout and SVG icons
- Full-width thumbnails with aspect-ratio grid items
- List view column headers (Name, Bitrate, Duration, Size)
- Modernized breadcrumb with pill segments and overflow handling
- Proper skeleton shimmer replacing emoji hourglass on thumbnails
- Pagination shows "Showing X-Y of Z" item count
- Refined hover effects, animations, and visual hierarchy
- Download button revealed on row hover in list view
- Type badges hidden by default, shown on hover
- Localized new keys in en.json and ru.json
 2026-03-29 14:59:43 +03:00
alexei.dolgolyov c9ee41ad35 feat: add media folder management from WebUI
Lint & Test / test (push) Successful in 10s
Details 
- Add media_folders_management config flag (enabled by default)
- Guard folder CRUD endpoints with 403 when management disabled
- Wire up frontend folder add/edit/delete in Settings tab
- Add per-folder availability check (for network shares)
- Show unavailable badge on offline folders in browser view
- Expose management flag via /api/health endpoint
- Add EN/RU locale keys for folder management UI
 2026-03-29 14:44:03 +03:00
39 changed files with 8742 additions and 519 deletions
Expand all files Collapse all files
.gitattributes
+16
View File
@@ -0,0 +1,16 @@
# Normalise text files to LF in the repo so Windows checkouts stop
# nagging "LF will be replaced by CRLF" on every git status.
* text=auto eol=lf
# Binary assets — never touch.
*.png binary
*.jpg binary
*.jpeg binary
*.gif binary
*.ico binary
*.svg text
*.woff binary
*.woff2 binary
*.exe binary
*.dll binary
*.zip binary
RELEASE_NOTES.md
+55 -16
View File
@@ -1,18 +1,36 @@
## v0.1.1 (2026-03-28)
## v0.2.0 (2026-04-25)
A major UI overhaul — the **Studio Reference** editorial hi-fi redesign — plus a fullscreen "Listening Room" mode, a Pocket Edition mobile layout, and a fully audio-driven VU/spectrum cluster.
### Features
- **Studio Reference redesign** — editorial hi-fi aesthetic across the entire UI ([8110c15](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/8110c15))
- **Player view rebuilt** to match the Studio Reference mockup ([14e9f22](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/14e9f22))
- **Live VU meter + audio-driven spectrum**, editorial banner, subtler dynamic background ([d937c15](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d937c15))
- **Fullscreen "Listening Room" mode** for the player ([59840a1](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/59840a1))
- **Pocket Edition** mobile layout + tablet tab range fix ([f85ce77](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/f85ce77))
### UI Improvements
- Editorial styling for Library, Quick Access, Settings, Display + tab fix ([2049850](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/2049850))
- Search icon overlap fix, Display cards, compact view, dark dropdowns ([588a303](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/588a303))
- Widen spectrum to fill column; volume control moved to left of VU cluster ([153424e](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/153424e))
- VU: narrower 44° swing, peak-based level, faster response; mini progress bar fix ([f2c8216](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/f2c8216))
- Soften vinyl-stage halo, transparent-bg album placeholder, crossfade artwork swaps ([4c93bfb](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/4c93bfb))
### Bug Fixes
- Use custom app icon for Windows shortcuts instead of the default Python executable icon ([5e5e503](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/5e5e503))
- Check if port is already in use before starting the server ([5219263](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/5219263))
### Improvements
- Replace `packaging` library with lightweight built-in version comparison — one fewer dependency ([5219263](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/5219263))
---
### Development / Internal
#### CI/Build
- Add manual build workflow for testing artifacts without tagging a release ([4f9e99e](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/4f9e99e))
- VU needle now driven from RMS-dB loudness instead of peak-of-bins ([b09569f](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/b09569f))
- VU: drop conic-gradient mask, draw lines explicitly in 0–90° range ([9b84fdd](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/9b84fdd))
- VU: clip grid arc to match needle swing range so rest = proper zero ([3de2b44](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/3de2b44))
- Centred toolbar icons; full-width spectrum; needle at rest; drop dynamic bg ([d7f488a](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d7f488a))
- Real audio level on VU; full-width spectrum; hide canvas under vinyl ([968eb15](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/968eb15))
- Visualizer: full-width spectrum + device pick auto-starts capture ([a0f74df](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/a0f74df))
- Visualizer: auto-enable actually starts capture; persist audio device ([6066b4a](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/6066b4a))
- Full-width spectrum + log-mapped bars; deeper sepia + soft art fade ([336d596](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/336d596))
- Editorial toolbar + sepia album art ([d157388](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d157388))
- Close more gaps with mockup (tabs, mini player, volume control) ([e9e4165](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/e9e4165))
- Snap player view directly from Studio Reference mockup ([77b39e5](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/77b39e5))
- Drop redundant Elapsed/Length cells; restore timeline ([d9d4672](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d9d4672))
- Close gaps with Studio Reference mockup ([265b001](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/265b001))
- Player redesign cleanup pass — sleeve, tonearm, AGC, dead code ([2a474ea](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/2a474ea))
---
@@ -21,8 +39,29 @@
| Hash | Message | Author |
|------|---------|--------|
| [5219263](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/5219263) | fix: port-in-use check and remove packaging dependency | alexei.dolgolyov |
| [5e5e503](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/5e5e503) | fix: use custom icon for Windows shortcuts instead of python.exe | alexei.dolgolyov |
| [4f9e99e](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/4f9e99e) | ci: add manual build workflow for testing artifacts | alexei.dolgolyov |
| [4c93bfb](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/4c93bfb) | ui(player): soften vinyl-stage halo, transparent-bg album placeholder, crossfade artwork swaps | alexei.dolgolyov |
| [59840a1](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/59840a1) | feat(player): fullscreen "Listening Room" mode | alexei.dolgolyov |
| [2a474ea](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/2a474ea) | fix(player): redesign cleanup pass — sleeve, tonearm, AGC, dead code | alexei.dolgolyov |
| [f85ce77](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/f85ce77) | ui(mobile): Pocket Edition layout + tablet tab range fix | alexei.dolgolyov |
| [b09569f](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/b09569f) | fix(vu): drive needle from RMS-dB loudness instead of peak-of-bins | alexei.dolgolyov |
| [f2c8216](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/f2c8216) | ui(vu): narrower 44deg swing, peak-based level, faster response; mini progress bar fix | alexei.dolgolyov |
| [588a303](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/588a303) | ui: fix search icon overlap, Display cards, compact view, dark dropdowns | alexei.dolgolyov |
| [2049850](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/2049850) | ui: editorial styling for Library/Quick Access/Settings/Display + tab fix | alexei.dolgolyov |
| [9b84fdd](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/9b84fdd) | fix(vu): drop conic-gradient mask, draw lines explicitly in 0-90 range | alexei.dolgolyov |
| [3de2b44](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/3de2b44) | fix(vu): clip grid arc to match needle swing range so rest = proper zero | alexei.dolgolyov |
| [d7f488a](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d7f488a) | fix(ui): centred toolbar icons; full-width spectrum; needle at rest; drop dynamic bg | alexei.dolgolyov |
| [968eb15](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/968eb15) | fix(player): real audio level on VU; full-width spectrum; hide canvas under vinyl | alexei.dolgolyov |
| [a0f74df](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/a0f74df) | fix(visualizer): full-width spectrum + device pick auto-starts capture | alexei.dolgolyov |
| [6066b4a](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/6066b4a) | fix(visualizer): auto-enable actually starts capture; persist audio device | alexei.dolgolyov |
| [153424e](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/153424e) | ui(player): widen spectrum to fill column; swap volume control to left of VU cluster | alexei.dolgolyov |
| [336d596](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/336d596) | fix(ui): full-width spectrum + log-mapped bars; deeper sepia + soft art fade | alexei.dolgolyov |
| [d937c15](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d937c15) | feat(ui): live VU + audio-driven spectrum, editorial banner, subtler dynamic bg | alexei.dolgolyov |
| [d157388](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d157388) | fix(ui): editorial toolbar + sepia album art | alexei.dolgolyov |
| [e9e4165](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/e9e4165) | fix(ui): close more gaps with mockup (tabs, mini player, volume control) | alexei.dolgolyov |
| [77b39e5](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/77b39e5) | fix(ui): snap player view directly from Studio Reference mockup | alexei.dolgolyov |
| [d9d4672](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d9d4672) | fix(ui): drop redundant Elapsed/Length cells; restore timeline | alexei.dolgolyov |
| [265b001](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/265b001) | fix(ui): close gaps with Studio Reference mockup | alexei.dolgolyov |
| [14e9f22](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/14e9f22) | feat(ui): rebuild player view to match Studio Reference mockup | alexei.dolgolyov |
| [8110c15](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/8110c15) | feat(ui): Studio Reference redesign — editorial hi-fi aesthetic | alexei.dolgolyov |
</details>
build-common.sh
+25 -4
View File
@@ -23,6 +23,17 @@ detect_version() {
VERSION_CLEAN="${VERSION#v}"
# Normalize non-PEP440 labels (e.g. "dev", "nightly", "snapshot") to a
# valid PEP440 dev release. Without this, pip/setuptools rejects
# pyproject.toml with: `project.version` must be pep440.
#
# Valid forms: 1.2.3, 1.2.3a1, 1.2.3rc2, 1.2.3.dev0, 1.2.3.post1, +local
# Invalid forms: dev, vdev, nightly, snapshot-2024
if ! [[ "$VERSION_CLEAN" =~ ^[0-9]+(\.[0-9]+)*((a|b|rc|\.dev|\.post)[0-9]+)*(\+[a-zA-Z0-9.]+)?$ ]]; then
echo " Warning: '$VERSION_CLEAN' is not PEP440-compliant, using 0.0.0.dev0"
VERSION_CLEAN="0.0.0.dev0"
fi
# Stamp version into pyproject.toml (single source of truth)
sed -i "s/^version = .*/version = \"${VERSION_CLEAN}\"/" pyproject.toml
}
@@ -80,8 +91,11 @@ cleanup_site_packages() {
find "$sp_dir" -name "*.pyi" -delete 2>/dev/null || true
rm -rf "$sp_dir"/{pip,setuptools,pkg_resources,_distutils_hack}* 2>/dev/null || true
# Trim numpy if present
for mod in polynomial linalg ma lib distutils f2py typing _pyinstaller; do
# Trim numpy if present.
# Keep only modules that numpy/__init__.py does NOT import unconditionally —
# lib, linalg, ma, polynomial, fft, ctypeslib, matrixlib are all required for
# `import numpy` to succeed, so they MUST stay.
for mod in distutils f2py typing _pyinstaller; do
rm -rf "$sp_dir/numpy/$mod" 2>/dev/null || true
done
@@ -98,6 +112,13 @@ cleanup_site_packages() {
# Strip debug symbols from native extensions
find "$sp_dir" -name "*.$ext_suffix" -exec strip --strip-debug {} \; 2>/dev/null || true
# Remove .py source files (keep .pyc only) — saves ~30-40% on pure-Python packages
find "$sp_dir" -name "*.py" ! -name "__init__.py" -delete 2>/dev/null || true
# NOTE: do NOT strip .py source files. A previous version of this function
# ran `find ... -name "*.py" ! -name "__init__.py" -delete` with a comment
# claiming "keep .pyc only" — but no compileall step exists, so the dist
# shipped with __init__.py + .pyd only, missing every submodule (Image.py,
# ImageDraw.py, _version.py, ...). Fresh installs would fail with
# ModuleNotFoundError; in-place upgrades over an older install produced a
# half-old/half-new site-packages where PIL/__init__.py was new but
# PIL/_version.py was stale, yielding the runtime "_imaging extension was
# built for another version of Pillow" import error.
}
build-dist-linux.sh
+1 -1
View File
@@ -21,7 +21,7 @@ echo "Creating virtualenv..."
python3 -m venv "${DIST_DIR}/venv"
source "${DIST_DIR}/venv/bin/activate"
pip install --quiet --upgrade pip
pip install --quiet ".[visualizer]"
pip install --quiet "."
# Remove the installed package (app source is on PYTHONPATH via launcher)
rm -rf "${DIST_DIR}"/venv/lib/python*/site-packages/media_server*
build-dist-windows.sh
+60 -10
View File
@@ -19,10 +19,15 @@ BUILD_OUTPUT="build/MediaServer-v${VERSION_CLEAN}-win-x64"
clean_dist "${DIST_DIR}" "${WHEEL_DIR}" "${SITE_PACKAGES}"
# --- Download embedded Python ---
echo "Downloading embedded Python ${PYTHON_VERSION}..."
curl -sL "https://www.python.org/ftp/python/${PYTHON_VERSION}/python-${PYTHON_VERSION}-embed-amd64.zip" \
-o build/python-embed.zip
# --- Download embedded Python (cache-friendly) ---
mkdir -p build
if [ ! -f build/python-embed.zip ]; then
echo "Downloading embedded Python ${PYTHON_VERSION}..."
curl -sL "https://www.python.org/ftp/python/${PYTHON_VERSION}/python-${PYTHON_VERSION}-embed-amd64.zip" \
-o build/python-embed.zip
else
echo "Using cached embedded Python ${PYTHON_VERSION}"
fi
unzip -qo build/python-embed.zip -d "${DIST_DIR}/python"
# Patch ._pth to enable site-packages and app source
@@ -35,9 +40,18 @@ echo '..\app' >> "$PTH_FILE"
echo "Downloading Windows wheels..."
# Core dependencies
# NOTE: uvicorn[standard] pulls in uvloop via `sys_platform != 'win32'` marker.
# pip evaluates env markers against the HOST (Linux in CI), so uvloop is
# requested, but `--platform win_amd64 --only-binary :all:` cannot find a
# Windows wheel for uvloop (none exist). Result: pip backtracks across every
# uvicorn[standard] version and ResolutionImpossible. Fix: use plain uvicorn
# and list only the Windows-compatible standard extras we actually need.
CORE_DEPS=(
"fastapi>=0.109.0"
"uvicorn[standard]>=0.27.0"
"uvicorn>=0.27.0"
"httptools>=0.5.0"
"websockets>=10.4"
"python-dotenv>=0.13"
"pydantic>=2.0"
"pydantic-settings>=2.0"
"pyyaml>=6.0"
@@ -46,30 +60,50 @@ CORE_DEPS=(
)
# Windows-specific dependencies
# NOTE: wmi is a transitive dep of screen-brightness-control gated on
# `platform_system == "Windows"`. pip evaluates env markers against the HOST
# (Linux in CI), so it gets skipped during cross-build. Listed explicitly here
# so the wheel actually lands in the Windows bundle. Same gotcha as the
# uvicorn[standard]/uvloop case documented above.
WIN_DEPS=(
"winsdk>=1.0.0b10"
"pywin32>=306"
"comtypes>=1.2.0"
"pycaw>=20230407"
"screen-brightness-control>=0.20.0"
"wmi>=1.5.1"
"monitorcontrol>=3.0.0"
"pystray>=0.19.0"
)
# Visualizer dependencies
VIS_DEPS=(
"soundcard>=0.4.0"
"numpy>=1.24.0,<2.0"
# pystray lives here (not WIN_DEPS) so its transitive Pillow resolves in the
# same pass as CORE_DEPS. Keeping it in the per-dep WIN_DEPS loop downloaded
# a second Pillow version that clobbered the core one on unzip, producing
# "_imaging extension was built for another version of Pillow" at runtime.
"pystray>=0.19.0"
)
ALL_DEPS=("${CORE_DEPS[@]}" "${WIN_DEPS[@]}" "${VIS_DEPS[@]}")
# Resolve core + visualizer deps in a SINGLE call so pip picks compatible
# transitive versions (notably pydantic/pydantic-core must match).
# Per-dep loops resolve each dep independently and can leave mismatched
# transitive versions that overwrite each other in the site-packages unzip.
CROSS_DEPS=("${CORE_DEPS[@]}" "${VIS_DEPS[@]}")
pip download --quiet --no-cache-dir --dest "$WHEEL_DIR" \
--platform win_amd64 --python-version "${PYTHON_SHORT}" \
--implementation cp --only-binary :all: \
"${CROSS_DEPS[@]}"
for dep in "${ALL_DEPS[@]}"; do
pip download --quiet --no-cache-dir --dest "$WHEEL_DIR" \
# Windows-only deps in a loop with --pre: winsdk only ships beta wheels
# (1.0.0bNN) and each dep needs its own platform/non-platform fallback.
for dep in "${WIN_DEPS[@]}"; do
pip download --pre --quiet --no-cache-dir --dest "$WHEEL_DIR" \
--platform win_amd64 --python-version "${PYTHON_SHORT}" \
--implementation cp --only-binary :all: \
"$dep" 2>/dev/null || \
pip download --quiet --no-cache-dir --dest "$WHEEL_DIR" \
pip download --pre --quiet --no-cache-dir --dest "$WHEEL_DIR" \
--only-binary :all: \
"$dep"
done
@@ -85,6 +119,22 @@ for whl in "$WHEEL_DIR"/*.whl; do
unzip -qo "$whl" -d "$SITE_PACKAGES"
done
# numpy wheels from PyPI don't include _distributor_init_local.py unless
# patched by delvewheel. In embedded Python, os.add_dll_directory() is never
# called, so libopenblas can't be found and numpy fails to import.
# Generate the missing loader here instead.
if [ -d "${SITE_PACKAGES}/numpy" ]; then
cat > "${SITE_PACKAGES}/numpy/_distributor_init_local.py" << 'EOF'
import os
import sys
if sys.platform == 'win32':
_libs = os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'numpy.libs'))
if os.path.isdir(_libs):
os.add_dll_directory(_libs)
EOF
echo "Generated numpy/_distributor_init_local.py"
fi
cleanup_site_packages "$SITE_PACKAGES" "pyd" "dll"
verify_frontend
copy_app_files "$DIST_DIR"
config.example.yaml
+5
View File
@@ -56,6 +56,11 @@ scripts:
timeout: 10
shell: true
# Media folder management from Web UI (default: true)
# When enabled, media folders can be added, edited, and deleted from the Settings tab.
# Set to false to disable folder management from the UI.
# media_folders_management: false
# Callback scripts (executed after media actions)
# All callbacks are optional - if not defined, the action runs without callback
callbacks:
installer.nsi
+13
View File
@@ -70,6 +70,19 @@ Section "!Core (required)" SecCore
SetOutPath "$INSTDIR"
; Wipe previous payload before extracting so stale files from an older
; version cannot survive an upgrade. Without this, in-place upgrades
; produce a half-old/half-new site-packages — e.g. an old PIL/_version.py
; alongside a new PIL/_imaging.pyd, which raises "_imaging extension was
; built for another version of Pillow" at runtime. config.yaml lives at
; $INSTDIR root and is preserved.
RMDir /r "$INSTDIR\python"
RMDir /r "$INSTDIR\app"
RMDir /r "$INSTDIR\scripts"
Delete "$INSTDIR\${EXENAME}"
Delete "$INSTDIR\VERSION"
Delete "$INSTDIR\config.example.yaml"
; Copy entire distribution
File /r "dist\media-server\*.*"
media_server/config.py
+4
View File
@@ -124,6 +124,10 @@ class Settings(BaseSettings):
default_factory=dict,
description="Media folders available for browsing in the media browser",
)
media_folders_management: bool = Field(
default=True,
description="Allow adding, editing, and deleting media folders from the Web UI",
)
# Thumbnail settings
thumbnail_size: str = Field(
media_server/routes/browser.py
+19 -2
View File
@@ -24,6 +24,15 @@ logger = logging.getLogger(__name__)
router = APIRouter(prefix="/api/browser", tags=["browser"])
def _require_folder_management() -> None:
"""Raise 403 if media folder management is disabled in config."""
if not settings.media_folders_management:
raise HTTPException(
status_code=403,
detail="Media folder management is disabled. Set media_folders_management: true in config.yaml to enable.",
)
async def _broadcast_after_open(controller, label: str, max_wait: float = 2.0) -> None:
"""Poll until media session registers, then broadcast status update.
@@ -83,17 +92,22 @@ async def list_folders(_: str = Depends(verify_token)):
"""List all configured media folders.
Returns:
Dictionary of folder configurations.
Dictionary with folder configurations and management flag.
"""
folders = {}
for folder_id, config in settings.media_folders.items():
folder_path = Path(config.path)
folders[folder_id] = {
"id": folder_id,
"label": config.label,
"path": config.path,
"enabled": config.enabled,
"available": folder_path.is_dir(),
}
return folders
return {
"folders": folders,
"management_enabled": settings.media_folders_management,
}
@router.post("/folders/create")
@@ -112,6 +126,7 @@ async def create_folder(
Raises:
HTTPException: If folder already exists or validation fails.
"""
_require_folder_management()
try:
# Validate folder_id format (alphanumeric and underscore only)
if not request.folder_id.replace("_", "").isalnum():
@@ -169,6 +184,7 @@ async def update_folder(
Raises:
HTTPException: If folder doesn't exist or validation fails.
"""
_require_folder_management()
try:
# Validate path exists
path = Path(request.path)
@@ -217,6 +233,7 @@ async def delete_folder(
Raises:
HTTPException: If folder doesn't exist.
"""
_require_folder_management()
try:
config_manager.delete_media_folder(folder_id)
media_server/routes/health.py
+2
View File
@@ -7,6 +7,7 @@ from fastapi import APIRouter, Request
from .. import __version__
from ..auth import auth_enabled
from ..config import settings
router = APIRouter(prefix="/api", tags=["health"])
@@ -23,6 +24,7 @@ async def health_check(request: Request) -> dict[str, Any]:
"platform": platform.system(),
"version": __version__,
"auth_required": auth_enabled(),
"media_folders_management": settings.media_folders_management,
}
# Include cached update info if available
media_server/routes/media.py
+1 -1
View File
@@ -323,7 +323,7 @@ async def set_visualizer_device(
@router.websocket("/ws")
async def websocket_endpoint(
websocket: WebSocket,
token: str = Query(..., description="API authentication token"),
token: str | None = Query(None, description="API authentication token"),
) -> None:
"""WebSocket endpoint for real-time media status updates.
media_server/services/audio_analyzer.py
+52 -9
View File
@@ -15,10 +15,25 @@ def _load_numpy():
global _np
if _np is None:
try:
import os
import sys
if sys.platform == 'win32':
# Embedded Python doesn't auto-load DLLs from numpy.libs;
# add the directory explicitly so libopenblas can be found.
try:
import importlib.util
spec = importlib.util.find_spec('numpy')
if spec and spec.submodule_search_locations:
numpy_dir = list(spec.submodule_search_locations)[0]
libs_dir = os.path.join(os.path.dirname(numpy_dir), 'numpy.libs')
if os.path.isdir(libs_dir):
os.add_dll_directory(libs_dir)
except Exception:
pass
import numpy as np
_np = np
except ImportError:
logger.info("numpy not installed - audio visualizer unavailable")
except Exception as e:
logger.warning("numpy unavailable - audio visualizer disabled: %s", e)
return _np
@@ -28,8 +43,8 @@ def _load_soundcard():
try:
import soundcard as sc
_sc = sc
except ImportError:
logger.info("soundcard not installed - audio visualizer unavailable")
except Exception as e:
logger.warning("soundcard unavailable - audio visualizer disabled: %s", e)
return _sc
@@ -56,6 +71,11 @@ class AudioAnalyzer:
self._lifecycle_lock = threading.Lock()
self._data: dict | None = None
self._current_device_name: str | None = None
# Slow AGC envelope so the spectrum reflects real dynamics
# instead of being renormalized to peak=1.0 every frame.
# A loud transient (e.g. notification beep) lifts the reference
# for a few seconds afterwards; this is the price of real loudness.
self._spectrum_ref = 0.01
# Pre-compute logarithmic bin edges
self._bin_edges = self._compute_bin_edges()
@@ -95,6 +115,10 @@ class AudioAnalyzer:
if not self.available:
return False
# Reset AGC envelope so a long silent gap between sessions
# doesn't make the first new transients clip at the ceiling.
self._spectrum_ref = 0.01
self._running = True
self._thread = threading.Thread(target=self._capture_loop, daemon=True)
self._thread.start()
@@ -269,10 +293,28 @@ class AudioAnalyzer:
counts = bin_ends - bin_starts
bins = (cumsum[bin_ends] - cumsum[bin_starts]) / counts
# Normalize to 0-1
max_val = bins.max()
if max_val > 0:
bins *= (1.0 / max_val)
# True loudness from time-domain RMS, mapped via dB
# so the VU needle reflects actual program level — not
# the per-frame-normalized spectrum.
rms = float(np.sqrt(np.mean(mono.astype(np.float64) ** 2)))
if rms > 1e-6:
db = 20.0 * np.log10(rms)
# Map -60 dB..-6 dB to 0..1 (typical music range)
level = max(0.0, min(1.0, (db + 60.0) / 54.0))
else:
level = 0.0
# Slow auto-gain: envelope follower with fast attack,
# slow release. Quiet music yields small bars; loud
# passages reach the top; the reference adapts over
# seconds instead of resetting every frame.
current_peak = float(bins.max())
if current_peak > self._spectrum_ref:
self._spectrum_ref += (current_peak - self._spectrum_ref) * 0.05
else:
self._spectrum_ref += (current_peak - self._spectrum_ref) * 0.005
ref = max(self._spectrum_ref, 1e-4)
bins = np.clip(bins / ref, 0.0, 1.5)
# Bass energy: average of first 4 bins (~20-200Hz)
bass = float(bins[:4].mean()) if self.num_bins >= 4 else 0.0
@@ -280,9 +322,10 @@ class AudioAnalyzer:
# Round for compact JSON
frequencies = np.round(bins, 3).tolist()
bass = round(bass, 3)
level = round(level, 3)
with self._lock:
self._data = {"frequencies": frequencies, "bass": bass}
self._data = {"frequencies": frequencies, "bass": bass, "level": level}
# Throttle to target FPS
elapsed = time.monotonic() - t0
media_server/services/websocket_manager.py
+12 -2
View File
@@ -19,6 +19,7 @@ class ConnectionManager:
self._active_connections: set[WebSocket] = set()
self._lock = asyncio.Lock()
self._last_status: dict[str, Any] | None = None
self._get_status_func: Callable[[], Coroutine[Any, Any, Any]] | None = None
self._broadcast_task: asyncio.Task | None = None
self._poll_interval: float = 0.5 # Internal poll interval for change detection
self._position_broadcast_interval: float = 5.0 # Send position updates every 5s during playback
@@ -39,9 +40,17 @@ class ConnectionManager:
)
# Send current status immediately upon connection
if self._last_status:
status = self._last_status
if not status and self._get_status_func:
try:
await websocket.send_json({"type": "status", "data": self._last_status})
result = await self._get_status_func()
status = result.model_dump()
self._last_status = status
except Exception as e:
logger.debug("Failed to fetch initial status: %s", e)
if status:
try:
await websocket.send_json({"type": "status", "data": status})
except Exception as e:
logger.debug("Failed to send initial status: %s", e)
@@ -251,6 +260,7 @@ class ConnectionManager:
if self._running:
return
self._get_status_func = get_status_func
self._running = True
self._broadcast_task = asyncio.create_task(
self._status_monitor_loop(get_status_func)
media_server/static/css/styles.css
+5697 -262
View File
File diff suppressed because it is too large Load Diff
media_server/static/fonts/Fraunces-italic-latin-ext.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/Fraunces-italic-latin.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/Fraunces-latin-ext.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/Fraunces-latin.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/Geist-cyrillic.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/Geist-latin-ext.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/Geist-latin.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/GeistMono-cyrillic.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/GeistMono-latin-ext.woff2
BIN
View File
Binary file not shown.
media_server/static/fonts/GeistMono-latin.woff2
BIN
View File
Binary file not shown.
media_server/static/index.html
+182 -68
View File
@@ -6,6 +6,7 @@
<title>Media Server</title>
<meta name="description" content="Remote media player control and file browser">
<meta name="theme-color" content="#121212">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Media Server">
@@ -75,11 +76,15 @@
</div>
</div>
<!-- Folio marks at page corners -->
<span class="folio tl"><span class="status-dot" id="status-dot" aria-live="polite"></span><span data-i18n="header.connected">Connected</span> · <span id="folio-host">Local 8765</span></span>
<span class="folio tr"><span data-i18n="header.volume">Vol. I</span> — <span data-i18n="header.edition">Studio Reference</span> · <span id="version-label"></span></span>
<div class="container">
<header>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span class="status-dot" id="status-dot" aria-live="polite"></span>
<span class="version-label" id="version-label"></span>
<div class="brand">
<span class="brand-name" data-i18n="app.title">Media Server</span>
<span class="brand-sub" data-i18n="header.edition_sub">Studio Reference Edition</span>
</div>
<div class="header-toolbar">
<div id="headerLinks" class="header-links"></div>
@@ -95,6 +100,10 @@
<button class="header-btn" onclick="toggleDynamicBackground()" data-i18n-title="player.background" title="Dynamic background" aria-label="Dynamic background" id="bgToggle">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z"/></svg>
</button>
<button class="header-btn" onclick="togglePlayerFullscreen()" data-i18n-title="player.fullscreen" title="Fullscreen player" aria-label="Fullscreen player" id="fullscreenToggle">
<svg id="fullscreen-icon-enter" viewBox="0 0 24 24"><path fill="currentColor" d="M5 5h5v2H7v3H5V5zm9 0h5v5h-2V7h-3V5zm0 14v-2h3v-3h2v5h-5zM5 14h2v3h3v2H5v-5z"/></svg>
<svg id="fullscreen-icon-exit" viewBox="0 0 24 24" style="display:none"><path fill="currentColor" d="M8 8H5v2H3V6a1 1 0 0 1 1-1h4v3zm8 0h3v2h2V6a1 1 0 0 0-1-1h-4v3zm0 8h3v-2h2v4a1 1 0 0 1-1 1h-4v-3zM8 16H5v-2H3v4a1 1 0 0 0 1 1h4v-3z"/></svg>
</button>
<button class="header-btn" onclick="toggleTheme()" data-i18n-title="player.theme" title="Toggle theme" aria-label="Toggle theme" id="theme-toggle">
<svg id="theme-icon-sun" viewBox="0 0 24 24" style="display: none;">
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
@@ -127,103 +136,174 @@
<button class="connection-banner-btn" id="connectionBannerBtn" onclick="manualReconnect()" style="display: none;" data-i18n="connection.reconnect">Reconnect</button>
</div>
<!-- Tab Bar -->
<!-- Tab Bar (editorial: numbered, italic active) -->
<div class="tab-bar" id="tabBar" role="tablist">
<div class="tab-indicator" id="tabIndicator"></div>
<button class="tab-btn active" data-tab="player" onclick="switchTab('player')" role="tab" aria-selected="true" aria-controls="panel-player" tabindex="0">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
<span data-i18n="tab.player">Player</span>
<span class="tab-num">01</span>
<span data-i18n="tab.player">Now Spinning</span>
</button>
<button class="tab-btn" data-tab="display" onclick="switchTab('display')" role="tab" aria-selected="false" aria-controls="panel-display" tabindex="-1">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6v2H8v2h8v-2h-2v-2h6c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/></svg>
<span class="tab-num">02</span>
<span data-i18n="tab.display">Display</span>
</button>
<button class="tab-btn" data-tab="browser" onclick="switchTab('browser')" role="tab" aria-selected="false" aria-controls="panel-browser" tabindex="-1">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
<span data-i18n="tab.browser">Browser</span>
<span class="tab-num">03</span>
<span data-i18n="tab.browser">Library</span>
</button>
<button class="tab-btn" data-tab="quick-actions" onclick="switchTab('quick-actions')" role="tab" aria-selected="false" aria-controls="panel-quick-actions" tabindex="-1">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>
<span class="tab-num">04</span>
<span data-i18n="tab.quick_access">Quick Access</span>
</button>
<button class="tab-btn" data-tab="settings" onclick="switchTab('settings')" role="tab" aria-selected="false" aria-controls="panel-settings" tabindex="-1">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
<span class="tab-num">05</span>
<span data-i18n="tab.settings">Settings</span>
</button>
</div>
<div class="player-container" data-tab-content="player" role="tabpanel" id="panel-player">
<div class="player-layout">
<div class="album-art-container">
<!-- Fullscreen-only chrome: floating top strip with kicker + exit. Auto-hides on idle. -->
<div class="fs-chrome" id="fsChrome" aria-hidden="true">
<div class="fs-chrome-mark">
<span class="fs-chrome-edition" data-i18n="header.edition">Studio Reference</span>
<span class="fs-chrome-sep">·</span>
<span class="fs-chrome-kicker" data-i18n="player.kicker">Now Playing</span>
</div>
<button class="fs-chrome-exit" onclick="togglePlayerFullscreen()" data-i18n-title="player.fullscreen.exit" title="Exit fullscreen" aria-label="Exit fullscreen">
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M8 8H5v2H3V6a1 1 0 0 1 1-1h4v3zm8 0h3v2h2V6a1 1 0 0 0-1-1h-4v3zm0 8h3v-2h2v4a1 1 0 0 1-1 1h-4v-3zM8 16H5v-2H3v4a1 1 0 0 0 1 1h4v-3z"/></svg>
<span data-i18n="player.fullscreen.exit_short">Exit</span>
<kbd class="fs-chrome-kbd">ESC</kbd>
</button>
</div>
<!-- Ambient album-art bloom: paints the room in the record's color while in fullscreen -->
<div class="fs-bloom" id="fsBloom" aria-hidden="true">
<img id="fs-bloom-art" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3C/svg%3E" alt="">
</div>
<section class="now-playing player-layout">
<!-- Vinyl stage: cardstock sleeve + disc peeking out, plus tonearm -->
<div class="vinyl-stage album-art-container">
<img id="album-art-glow" class="album-art-glow" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3C/svg%3E" alt="" aria-hidden="true">
<img id="album-art" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3Cpath fill='%236a6a6a' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E" alt="Album Art">
<div class="sleeve">
<img id="album-art" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%236a6a6a' opacity='0.35' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E" alt="Album Art">
<div class="sleeve-grain" aria-hidden="true"></div>
<div class="sleeve-corner" aria-hidden="true"></div>
</div>
<div class="vinyl-wrap">
<div class="vinyl">
<div class="vinyl-label">
<!-- Stylised record-label catalogue mark, not user-facing
copy — intentionally not in the i18n bundle. -->
<span class="vinyl-label-text">REF · 24</span>
</div>
</div>
</div>
<svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<linearGradient id="armGrad" x1="0" x2="1">
<stop offset="0" stop-color="#3a3528"/>
<stop offset="0.5" stop-color="#9C937F"/>
<stop offset="1" stop-color="#5C5447"/>
</linearGradient>
</defs>
<circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
<circle cx="176" cy="24" r="6" fill="#3A3528"/>
<circle cx="176" cy="24" r="2" fill="#E08038"/>
<line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad)" stroke-width="3.5" stroke-linecap="round"/>
<rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
<rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
<circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
<circle cx="62" cy="138" r="6" fill="none" stroke="#E08038" stroke-width="0.5" opacity="0.4"/>
</svg>
<canvas id="spectrogram-canvas" class="spectrogram-canvas" width="300" height="64"></canvas>
</div>
<div class="player-details">
<div class="track-info">
<div id="track-title" data-i18n="player.no_media">No media playing</div>
<div id="artist"></div>
<div id="album"></div>
<div class="playback-state">
<svg class="state-icon" id="state-icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
</svg>
<span id="playback-state" data-i18n="state.idle">Idle</span>
<!-- Track masthead -->
<div class="track-masthead player-details">
<div class="kicker"><span data-i18n="player.kicker">Now Playing</span></div>
<h1 class="track-title" id="track-title" data-i18n="player.no_media">No media playing</h1>
<div class="track-byline" id="artist"></div>
<div class="track-album" id="album"></div>
<!-- 2-cell metadata grid -->
<div class="meta-grid meta-grid-2">
<div class="meta-cell">
<div class="label" data-i18n="meta.state">State</div>
<div class="value">
<svg class="state-icon" id="state-icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
</svg>
<span id="playback-state" data-i18n="state.idle">Idle</span>
</div>
</div>
<div class="meta-cell">
<div class="label" data-i18n="meta.source">Source</div>
<div class="value source-value">
<span class="source-icon" id="sourceIcon"></span>
<span id="source" data-i18n="player.unknown_source">Unknown</span>
</div>
</div>
</div>
<div class="progress-container">
<div class="time-display">
<span id="current-time">0:00</span>
<span id="total-time">0:00</span>
<!-- Spectrum bars — driven by real audio when visualizer is active,
CSS-animated synthetic motion otherwise. JS injects the spans. -->
<div class="spectrum" id="player-spectrum" aria-hidden="true"></div>
<!-- Transport -->
<div class="transport">
<div class="progress-row">
<span class="timecode elapsed" id="current-time">0:00</span>
<div class="progress-track progress-bar" id="progress-bar" data-duration="0" role="slider" aria-label="Playback position" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0">
<div class="progress-fill" id="progress-fill"></div>
</div>
<span class="timecode" id="total-time">0:00</span>
</div>
<div class="progress-bar" id="progress-bar" data-duration="0" role="slider" aria-label="Playback position" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0">
<div class="progress-fill" id="progress-fill"></div>
</div>
</div>
<div class="controls">
<button onclick="previousTrack()" data-i18n-title="player.previous" title="Previous" id="btn-previous">
<svg viewBox="0 0 24 24">
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
</svg>
</button>
<button class="primary" onclick="togglePlayPause()" data-i18n-title="player.play" title="Play/Pause" id="btn-play-pause">
<svg viewBox="0 0 24 24" id="play-pause-icon">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<button onclick="nextTrack()" data-i18n-title="player.next" title="Next" id="btn-next">
<svg viewBox="0 0 24 24">
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
</svg>
</button>
</div>
<div class="volume-container">
<button class="mute-btn" onclick="toggleMute()" data-i18n-title="player.mute" title="Mute" id="btn-mute">
<svg viewBox="0 0 24 24" id="mute-icon">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
</svg>
</button>
<input type="range" id="volume-slider" min="0" max="100" value="50" aria-label="Volume">
<div class="volume-display" id="volume-display">50%</div>
</div>
<div class="source-info">
<span class="source-label"><span class="source-icon" id="sourceIcon"></span><span id="source" data-i18n="player.unknown_source">Unknown</span></span>
<div class="player-toggles">
<button class="vinyl-toggle-btn" onclick="toggleVinylMode()" id="vinylToggle" data-i18n-title="player.vinyl" title="Vinyl mode">
<svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="12" r="3" fill="currentColor"/><circle cx="12" cy="12" r="6.5" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.5"/></svg>
<div class="controls">
<button class="btn-trans" onclick="previousTrack()" data-i18n-title="player.previous" title="Previous" id="btn-previous">
<svg viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
</button>
<button class="vinyl-toggle-btn" onclick="toggleVisualizer()" id="visualizerToggle" data-i18n-title="player.visualizer" title="Audio visualizer" style="display:none">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 18h2v-8H3v8zm4 0h2V6H7v12zm4 0h2V2h-2v16zm4 0h2v-6h-2v6zm4 0h2V9h-2v9z"/></svg>
<button class="btn-trans primary" onclick="togglePlayPause()" data-i18n-title="player.play" title="Play/Pause" id="btn-play-pause">
<svg viewBox="0 0 24 24" id="play-pause-icon"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="btn-trans" onclick="nextTrack()" data-i18n-title="player.next" title="Next" id="btn-next">
<svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
</button>
<div class="vu-cluster">
<div class="vu-meter" aria-hidden="true">
<div class="vu-needle" id="vuNeedle"></div>
</div>
<div class="vu-readout">
<span>OUT <strong id="vu-out">SYS</strong></span>
<span>VOL <strong id="vu-vol">50%</strong></span>
</div>
<!-- Volume control: mute + slim slider, integrated -->
<div class="vu-volume">
<button class="mute-btn" onclick="toggleMute()" data-i18n-title="player.mute" title="Mute" id="btn-mute">
<svg viewBox="0 0 24 24" id="mute-icon">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
</svg>
</button>
<input type="range" id="volume-slider" min="0" max="100" value="50" aria-label="Volume">
</div>
</div>
</div>
</div>
<!-- Hidden but functional: legacy display + visualizer toggle. -->
<div class="visually-hidden">
<div id="volume-display">50%</div>
<button onclick="toggleVisualizer()" id="visualizerToggle" data-i18n-title="player.visualizer" title="Audio visualizer" style="display:none">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 18h2v-8H3v8zm4 0h2V6H7v12zm4 0h2V2h-2v16zm4 0h2v-6h-2v6zm4 0h2V9h-2v9z"/></svg>
</button>
</div>
</div>
</div>
</section>
</div>
<!-- Media Browser Section -->
@@ -290,6 +370,7 @@
<span id="pageTotal">/ 1</span>
</div>
<button id="nextPage" onclick="nextPage()" data-i18n="browser.next">Next</button>
<span class="pagination-showing" id="paginationShowing"></span>
</div>
</div>
@@ -323,6 +404,39 @@
</div>
</details>
<details class="settings-section" open id="mediaFoldersSection" style="display: none;">
<summary data-i18n="settings.section.media_folders">Media Folders</summary>
<div class="settings-section-content">
<p class="settings-section-description" data-i18n="browser.folders_description">
Media folders available for browsing. Folders on network shares show availability status.
</p>
<table class="scripts-table">
<thead>
<tr>
<th data-i18n="browser.folders_table.id">ID</th>
<th data-i18n="browser.folders_table.label">Label</th>
<th data-i18n="browser.folders_table.path">Path</th>
<th data-i18n="browser.folders_table.status">Status</th>
<th data-i18n="browser.folders_table.actions">Actions</th>
</tr>
</thead>
<tbody id="foldersTableBody">
<tr>
<td colspan="5" class="empty-state">
<div class="empty-state-illustration">
<svg viewBox="0 0 64 64"><path d="M8 16h20l4-6h20a4 4 0 014 4v36a4 4 0 01-4 4H8a4 4 0 01-4-4V20a4 4 0 014-4z"/><path d="M4 24h56" stroke-dasharray="4 3" opacity="0.4"/></svg>
<p data-i18n="browser.folders_empty">No media folders configured. Click "+" to add one.</p>
</div>
</td>
</tr>
</tbody>
</table>
<div class="add-card" onclick="showAddFolderDialog()">
<span class="add-card-icon">+</span>
</div>
</div>
</details>
<details class="settings-section" open>
<summary data-i18n="settings.section.scripts">Scripts</summary>
<div class="settings-section-content">
media_server/static/js/app.js
+75 -9
View File
@@ -21,11 +21,11 @@ import {
activeTab, switchTab, updateTabIndicator, setMiniPlayerVisible,
initTheme, toggleTheme, initAccentColor, applyAccentColor,
renderAccentSwatches, selectAccentColor, toggleAccentPicker, lightenColor,
toggleVinylMode, applyVinylMode,
visualizerEnabled, visualizerAvailable,
visualizerEnabled, visualizerAvailable, setVisualizerEnabled,
checkVisualizerAvailability, toggleVisualizer, applyVisualizerMode,
loadAudioDevices, onAudioDeviceChanged,
setupProgressDrag, updateUI, updatePlaybackState, stopPositionInterpolation,
togglePlayerFullscreen, initPlayerFullscreen,
} from './player.js';
// Layer 2: WebSocket
@@ -57,6 +57,7 @@ import {
onBrowserSearch, clearBrowserSearch, onItemsPerPageChanged,
downloadFile, closeFolderDialog, saveFolder,
showManageFoldersDialog,
showAddFolderDialog, showEditFolderDialog, deleteFolderConfirm,
} from './browser.js';
import {
@@ -95,10 +96,12 @@ Object.assign(window, {
switchTab,
// Theme & accent
toggleTheme, toggleAccentPicker, selectAccentColor, lightenColor,
// Vinyl & visualizer
toggleVinylMode, toggleVisualizer,
// Visualizer (vinyl spin is structural CSS — no toggle)
toggleVisualizer,
// Background
toggleDynamicBackground,
// Fullscreen
togglePlayerFullscreen,
// Auth
authenticate, clearToken, manualReconnect,
// Locale
@@ -117,6 +120,7 @@ Object.assign(window, {
onBrowserSearch, clearBrowserSearch, onItemsPerPageChanged,
downloadFile, closeFolderDialog, saveFolder,
showManageFoldersDialog,
showAddFolderDialog, showEditFolderDialog, deleteFolderConfirm,
// Links
showAddLinkDialog, showEditLinkDialog, closeLinkDialog,
saveLink, deleteLinkConfirm,
@@ -131,6 +135,23 @@ Object.assign(window, {
// Initialization (DOMContentLoaded)
// ============================================================
// Prevent <dialog>.showModal() from auto-focusing the first input field.
// On touch devices this pops up the on-screen keyboard, which is confusing
// when the user just opened a dialog. Force focus onto the dialog itself.
const _origShowModal = HTMLDialogElement.prototype.showModal;
HTMLDialogElement.prototype.showModal = function (...args) {
if (!this.hasAttribute('tabindex')) {
this.setAttribute('tabindex', '-1');
}
const result = _origShowModal.apply(this, args);
const active = document.activeElement;
if (active && active !== this && this.contains(active)) {
active.blur();
this.focus({ preventScroll: true });
}
return result;
};
window.addEventListener('DOMContentLoaded', async () => {
// Cache DOM references
cacheDom();
@@ -138,18 +159,45 @@ window.addEventListener('DOMContentLoaded', async () => {
// Initialize theme and accent color
initTheme();
initAccentColor();
initPlayerFullscreen();
// Register service worker for PWA installability
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').catch(() => {});
}
// Initialize vinyl mode
applyVinylMode();
// Build the editorial spectrum bars. Fewer, fatter bars read better
// than many thin ones at this column width. JS-managed so we can
// drive heights from real audio data when available.
const spectrumRoot = document.getElementById('player-spectrum');
if (spectrumRoot && !spectrumRoot.children.length) {
const SPECTRUM_BARS = 40;
// CSS repeat() doesn't accept a var() for its count — set the
// grid column template from JS so it always matches the bar
// count and stretches each bar to claim 1fr of the row.
spectrumRoot.style.gridTemplateColumns =
`repeat(${SPECTRUM_BARS}, minmax(0, 1fr))`;
const frag = document.createDocumentFragment();
for (let i = 0; i < SPECTRUM_BARS; i++) {
const s = document.createElement('span');
// Pseudo-random heights for the synthetic CSS animation phase
s.style.setProperty('--bar-h', (25 + Math.abs(Math.sin(i * 0.7)) * 70).toFixed(0) + '%');
s.style.setProperty('--bar-delay', (-Math.random() * 1.1).toFixed(2) + 's');
frag.appendChild(s);
}
spectrumRoot.appendChild(frag);
}
// Initialize audio visualizer
// Initialize audio visualizer — auto-enable when supported so the
// spectrum shows real audio out of the box.
checkVisualizerAvailability().then(() => {
if (visualizerEnabled && visualizerAvailable) {
if (!visualizerAvailable) return;
// First install: opt the user in by default since the spectrum
// is the centerpiece of the player view.
const stored = localStorage.getItem('visualizerEnabled');
const shouldEnable = stored === null ? true : stored === 'true';
if (shouldEnable) {
setVisualizerEnabled(true); // updates the let in player.js
applyVisualizerMode();
}
});
@@ -323,6 +371,24 @@ window.addEventListener('DOMContentLoaded', async () => {
else if (action === 'delete') deleteCallbackConfirm(name);
});
// Folder dialog backdrop click to close
const folderDialog = document.getElementById('folderDialog');
folderDialog.addEventListener('click', (e) => {
if (e.target === folderDialog) {
closeFolderDialog();
}
});
// Delegated click handlers for folder table actions
document.getElementById('foldersTableBody').addEventListener('click', (e) => {
const btn = e.target.closest('[data-action]');
if (!btn) return;
const action = btn.dataset.action;
const folderId = btn.dataset.folderId;
if (action === 'edit') showEditFolderDialog(folderId);
else if (action === 'delete') deleteFolderConfirm(folderId);
});
// Link dialog backdrop click to close
const linkDialog = document.getElementById('linkDialog');
linkDialog.addEventListener('click', (e) => {
@@ -352,7 +418,7 @@ window.addEventListener('DOMContentLoaded', async () => {
// Initialize browser toolbar and load folders
initBrowserToolbar();
if (token) {
if (!authReq || token) {
loadMediaFolders();
}
media_server/static/js/browser.js
+213 -24
View File
@@ -3,7 +3,7 @@
// ============================================================
import {
t, showToast, escapeHtml, closeDialog,
t, showToast, showConfirm, escapeHtml, closeDialog,
SEARCH_DEBOUNCE_MS, EMPTY_SVG_FILE, EMPTY_SVG_FOLDER, emptyStateHtml,
getAuthHeaders, hasCredentials,
} from './core.js';
@@ -15,6 +15,7 @@ let currentOffset = 0;
let itemsPerPage = parseInt(localStorage.getItem('mediaBrowser.itemsPerPage')) || 100;
let totalItems = 0;
let mediaFolders = {};
let managementEnabled = false;
let viewMode = localStorage.getItem('mediaBrowser.viewMode') || 'grid';
let cachedItems = null;
let browserSearchTerm = '';
@@ -33,7 +34,20 @@ export async function loadMediaFolders() {
if (!response.ok) throw new Error('Failed to load folders');
mediaFolders = await response.json();
const data = await response.json();
mediaFolders = data.folders || {};
managementEnabled = data.management_enabled || false;
// Show/hide the media folders settings section
const section = document.getElementById('mediaFoldersSection');
if (section) {
section.style.display = managementEnabled ? '' : 'none';
}
// Render folders table in settings if management is enabled
if (managementEnabled) {
loadFoldersTable();
}
// Load last browsed path or show root folder list
loadLastBrowserPath();
@@ -69,41 +83,48 @@ function showRootFolders() {
revokeBlobUrls(container);
if (viewMode === 'list') {
container.className = 'browser-list';
} else if (viewMode === 'compact') {
container.className = 'browser-grid browser-grid-compact';
} else {
container.className = 'browser-grid';
container.className = 'browser-grid browser-root-grid';
}
container.innerHTML = '';
const folderSvg = '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>';
Object.entries(mediaFolders).forEach(([id, folder]) => {
if (!folder.enabled) return;
const unavailable = folder.available === false;
const unavailableClass = unavailable ? ' unavailable' : '';
if (viewMode === 'list') {
const row = document.createElement('div');
row.className = 'browser-list-item';
row.onclick = () => {
currentFolderId = id;
browsePath(id, '');
};
row.className = 'browser-list-item' + unavailableClass;
if (!unavailable) {
row.onclick = () => {
currentFolderId = id;
browsePath(id, '');
};
}
row.innerHTML = `
<div class="browser-list-icon">\u{1F4C1}</div>
<div class="browser-list-name">${folder.label}</div>
<div class="browser-list-icon" style="color: var(--accent)">${folderSvg}</div>
<div class="browser-list-name">${escapeHtml(folder.label)}${unavailable ? ' <span class="folder-unavailable-badge">' + t('browser.unavailable') + '</span>' : ''}</div>
`;
container.appendChild(row);
} else {
const card = document.createElement('div');
card.className = 'browser-item';
card.onclick = () => {
currentFolderId = id;
browsePath(id, '');
};
card.className = 'browser-item browser-root-folder' + unavailableClass;
if (!unavailable) {
card.onclick = () => {
currentFolderId = id;
browsePath(id, '');
};
}
card.innerHTML = `
<div class="browser-thumb-wrapper">
<div class="browser-icon">\u{1F4C1}</div>
<div class="browser-icon" style="color: var(--accent)">${folderSvg}</div>
</div>
<div class="browser-item-info">
<div class="browser-item-name">${folder.label}</div>
<div class="browser-item-name">${escapeHtml(folder.label)}</div>
${unavailable ? '<div class="browser-item-meta folder-unavailable-badge">' + t('browser.unavailable') + '</div>' : ''}
</div>
`;
container.appendChild(card);
@@ -248,6 +269,19 @@ function renderBrowserList(items, container) {
return;
}
// Column header row
const header = document.createElement('div');
header.className = 'browser-list-header';
header.innerHTML = `
<span></span>
<span>${t('browser.list_header.name')}</span>
<span>${t('browser.list_header.bitrate')}</span>
<span>${t('browser.list_header.duration')}</span>
<span>${t('browser.list_header.size')}</span>
<span></span>
`;
container.appendChild(header);
items.forEach((item, idx) => {
const row = document.createElement('div');
row.className = 'browser-list-item';
@@ -662,6 +696,7 @@ function renderPagination() {
const nextBtn = document.getElementById('nextPage');
const pageInput = document.getElementById('pageInput');
const pageTotal = document.getElementById('pageTotal');
const showingEl = document.getElementById('paginationShowing');
const totalPages = Math.ceil(totalItems / itemsPerPage);
const currentPage = Math.floor(currentOffset / itemsPerPage) + 1;
@@ -676,6 +711,13 @@ function renderPagination() {
pageInput.max = totalPages;
pageTotal.textContent = `/ ${totalPages}`;
// "Showing X-Y of Z"
if (showingEl) {
const from = currentOffset + 1;
const to = Math.min(currentOffset + itemsPerPage, totalItems);
showingEl.textContent = t('browser.showing_items', { from, to, total: totalItems });
}
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === totalPages;
}
@@ -845,10 +887,72 @@ function loadLastBrowserPath() {
}
}
// Folder Management
export function showManageFoldersDialog() {
// TODO: Implement folder management UI
showToast(t('browser.manage_folders_hint'), 'info');
// Folder Management — Settings table
export function loadFoldersTable() {
const tbody = document.getElementById('foldersTableBody');
if (!tbody) return;
const entries = Object.entries(mediaFolders);
if (entries.length === 0) {
tbody.innerHTML = `<tr><td colspan="5" class="empty-state">
<div class="empty-state-illustration">
<svg viewBox="0 0 64 64"><path d="M8 16h20l4-6h20a4 4 0 014 4v36a4 4 0 01-4 4H8a4 4 0 01-4-4V20a4 4 0 014-4z"/><path d="M4 24h56" stroke-dasharray="4 3" opacity="0.4"/></svg>
<p data-i18n="browser.folders_empty">${t('browser.folders_empty')}</p>
</div></td></tr>`;
return;
}
tbody.innerHTML = entries.map(([id, folder]) => {
const available = folder.available !== false;
const statusIcon = available
? '<span class="status-dot status-online">' + t('browser.folder_available') + '</span>'
: '<span class="status-dot status-offline">' + t('browser.folder_unavailable') + '</span>';
const enabledBadge = folder.enabled
? ''
: ' <span class="folder-disabled-badge">' + t('browser.folder_disabled') + '</span>';
return `<tr>
<td>${escapeHtml(id)}${enabledBadge}</td>
<td>${escapeHtml(folder.label)}</td>
<td class="path-cell" title="${escapeHtml(folder.path)}">${escapeHtml(folder.path)}</td>
<td>${statusIcon}</td>
<td class="actions-cell">
<button class="btn-icon" data-action="edit" data-folder-id="${escapeHtml(id)}" title="${t('browser.folder_edit')}">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
<button class="btn-icon btn-danger-icon" data-action="delete" data-folder-id="${escapeHtml(id)}" title="${t('browser.folder_delete')}">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
</button>
</td>
</tr>`;
}).join('');
}
export function showAddFolderDialog() {
document.getElementById('folderDialogTitle').textContent = t('browser.folder_dialog.title_add');
document.getElementById('folderIsEdit').value = '';
document.getElementById('folderOriginalId').value = '';
document.getElementById('folderId').value = '';
document.getElementById('folderId').disabled = false;
document.getElementById('folderLabel').value = '';
document.getElementById('folderPath').value = '';
document.getElementById('folderEnabled').checked = true;
document.getElementById('folderDialog').showModal();
}
export function showEditFolderDialog(folderId) {
const folder = mediaFolders[folderId];
if (!folder) return;
document.getElementById('folderDialogTitle').textContent = t('browser.folder_dialog.title_edit');
document.getElementById('folderIsEdit').value = '1';
document.getElementById('folderOriginalId').value = folderId;
document.getElementById('folderId').value = folderId;
document.getElementById('folderId').disabled = true;
document.getElementById('folderLabel').value = folder.label;
document.getElementById('folderPath').value = folder.path;
document.getElementById('folderEnabled').checked = folder.enabled;
document.getElementById('folderDialog').showModal();
}
export function closeFolderDialog() {
@@ -857,5 +961,90 @@ export function closeFolderDialog() {
export async function saveFolder(event) {
event.preventDefault();
closeFolderDialog();
const isEdit = document.getElementById('folderIsEdit').value === '1';
const folderId = isEdit
? document.getElementById('folderOriginalId').value
: document.getElementById('folderId').value.trim();
const label = document.getElementById('folderLabel').value.trim();
const path = document.getElementById('folderPath').value.trim();
const enabled = document.getElementById('folderEnabled').checked;
if (!folderId || !label || !path) return;
const submitBtn = document.querySelector('#folderForm button[type="submit"]');
if (submitBtn) submitBtn.disabled = true;
try {
let response;
if (isEdit) {
response = await fetch(`/api/browser/folders/update/${encodeURIComponent(folderId)}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
body: JSON.stringify({ label, path, enabled }),
});
} else {
response = await fetch('/api/browser/folders/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
body: JSON.stringify({ folder_id: folderId, label, path, enabled }),
});
}
if (response.ok) {
closeFolderDialog();
showToast(t(isEdit ? 'browser.folder_updated' : 'browser.folder_created'), 'success');
await loadMediaFolders();
} else {
const result = await response.json().catch(() => ({}));
showToast(result.detail || t('browser.folder_save_error'), 'error');
}
} catch (error) {
console.error('Error saving folder:', error);
showToast(t('browser.folder_save_error'), 'error');
} finally {
if (submitBtn) submitBtn.disabled = false;
}
}
export async function deleteFolderConfirm(folderId) {
if (!await showConfirm(t('browser.folder_confirm_delete', { name: folderId }))) {
return;
}
try {
const response = await fetch(`/api/browser/folders/delete/${encodeURIComponent(folderId)}`, {
method: 'DELETE',
headers: getAuthHeaders(),
});
if (response.ok) {
showToast(t('browser.folder_deleted'), 'success');
await loadMediaFolders();
} else {
const result = await response.json().catch(() => ({}));
showToast(result.detail || t('browser.folder_delete_error'), 'error');
}
} catch (error) {
console.error('Error deleting folder:', error);
showToast(t('browser.folder_delete_error'), 'error');
}
}
// Legacy stub — now handled via settings table
export function showManageFoldersDialog() {
if (managementEnabled) {
// Switch to settings tab and scroll to the folders section
const switchTabFn = window.switchTab;
if (switchTabFn) switchTabFn('settings');
setTimeout(() => {
const section = document.getElementById('mediaFoldersSection');
if (section) {
section.setAttribute('open', '');
section.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
} else {
showToast(t('browser.manage_folders_hint'), 'info');
}
}
media_server/static/js/core.js
+4
View File
@@ -116,6 +116,8 @@ export function cacheDom() {
dom.progressFill = document.getElementById('progress-fill');
dom.currentTime = document.getElementById('current-time');
dom.totalTime = document.getElementById('total-time');
dom.metaElapsed = document.getElementById('meta-elapsed');
dom.metaLength = document.getElementById('meta-length');
dom.progressBar = document.getElementById('progress-bar');
dom.miniProgressFill = document.getElementById('mini-progress-fill');
dom.miniCurrentTime = document.getElementById('mini-current-time');
@@ -317,6 +319,8 @@ export async function fetchVersion() {
const label = document.getElementById('version-label');
if (data.version) {
label.textContent = `v${data.version}`;
const folioVersion = document.getElementById('folio-version');
if (folioVersion) folioVersion.textContent = `v${data.version}`;
}
if (data.update_available) {
showUpdateBanner(data.update_available);
media_server/static/js/links.js
+7 -1
View File
@@ -57,7 +57,13 @@ export async function loadDisplayMonitors() {
const details = [monitor.resolution, monitor.manufacturer].filter(Boolean).join(' \u00B7 ');
const detailsHtml = details ? `<span class="display-monitor-details">${details}</span>` : '';
const primaryBadge = monitor.is_primary ? `<span class="display-primary-badge">${t('display.primary')}</span>` : '';
const primaryBadge = monitor.is_primary
? `<span class="display-primary-badge" title="${t('display.primary')}" aria-label="${t('display.primary')}">
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
<path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</span>`
: '';
card.innerHTML = `
<div class="display-monitor-header">
media_server/static/js/player.js
+390 -92
View File
@@ -19,6 +19,8 @@ import { IconSelect } from './icon-select.js';
export let activeTab = 'player';
export function setMiniPlayerVisible(visible) {
// On any non-player tab the mini player must stay visible regardless of scroll.
if (activeTab !== 'player') visible = true;
const miniPlayer = document.getElementById('mini-player');
if (visible) {
miniPlayer.classList.remove('hidden');
@@ -206,75 +208,13 @@ document.addEventListener('click', (e) => {
}
});
// Vinyl mode
let vinylMode = localStorage.getItem('vinylMode') === 'true';
function getVinylAngle() {
const art = document.getElementById('album-art');
if (!art) return 0;
const st = getComputedStyle(art);
const tr = st.transform;
if (!tr || tr === 'none') return 0;
const m = tr.match(/matrix\((.+)\)/);
if (!m) return 0;
const vals = m[1].split(',').map(Number);
const angle = Math.round(Math.atan2(vals[1], vals[0]) * (180 / Math.PI));
return ((angle % 360) + 360) % 360;
}
function saveVinylAngle() {
if (!vinylMode) return;
localStorage.setItem('vinylAngle', getVinylAngle());
}
function restoreVinylAngle() {
const saved = localStorage.getItem('vinylAngle');
if (saved) {
const art = document.getElementById('album-art');
if (art) art.style.setProperty('--vinyl-offset', `${saved}deg`);
}
}
setInterval(saveVinylAngle, 2000);
window.addEventListener('beforeunload', saveVinylAngle);
export function toggleVinylMode() {
if (vinylMode) saveVinylAngle();
vinylMode = !vinylMode;
localStorage.setItem('vinylMode', vinylMode);
applyVinylMode();
}
export function applyVinylMode() {
const container = document.querySelector('.album-art-container');
const btn = document.getElementById('vinylToggle');
if (!container) return;
if (vinylMode) {
container.classList.add('vinyl');
if (btn) btn.classList.add('active');
restoreVinylAngle();
updateVinylSpin();
} else {
saveVinylAngle();
container.classList.remove('vinyl', 'spinning', 'paused');
if (btn) btn.classList.remove('active');
}
}
function updateVinylSpin() {
const container = document.querySelector('.album-art-container');
if (!container || !vinylMode) return;
container.classList.remove('spinning', 'paused');
if (currentPlayState === 'playing') {
container.classList.add('spinning');
} else if (currentPlayState === 'paused') {
container.classList.add('paused');
}
}
// Audio Visualizer
export let visualizerEnabled = localStorage.getItem('visualizerEnabled') === 'true';
export let visualizerAvailable = false;
export function setVisualizerEnabled(value) {
visualizerEnabled = !!value;
localStorage.setItem('visualizerEnabled', visualizerEnabled);
}
let visualizerCtx = null;
let visualizerAnimFrame = null;
export let frequencyData = null;
@@ -355,15 +295,13 @@ export function stopVisualizerRender() {
if (visualizerCtx && canvas) {
visualizerCtx.clearRect(0, 0, canvas.width, canvas.height);
}
const art = document.getElementById('album-art');
if (art) {
art.style.transform = '';
art.style.removeProperty('--vinyl-scale');
}
const glow = document.getElementById('album-art-glow');
if (glow) glow.style.opacity = '';
frequencyData = null;
smoothedFrequencies = null;
document.body.classList.remove('audio-spectrum-live');
// Reset spectrum bar heights so the synthetic CSS animation takes back over
document.querySelectorAll('.now-playing .spectrum > span').forEach(s => {
s.style.height = '';
});
}
function renderVisualizerFrame() {
@@ -406,19 +344,49 @@ function renderVisualizerFrame() {
visualizerCtx.fill();
}
const bass = frequencyData.bass || 0;
const scale = 1 + bass * 0.04;
const art = document.getElementById('album-art');
if (art) {
if (vinylMode) {
art.style.setProperty('--vinyl-scale', scale);
} else {
art.style.transform = `scale(${scale})`;
// Bass-driven album-art scale + glow pulse removed — the
// "burst" looked unnatural on the sleeve. Spectrum bars +
// VU needle remain the audio-reactive elements.
// Drive the editorial .spectrum bars from the same frequency data.
updateEditorialSpectrum(smoothedFrequencies, numBins);
}
// ─── Editorial spectrum (.spectrum bars) driven by audio ──────
// The bin distribution from the FFT is heavy on lows (the bass + mids
// dominate); a linear mapping leaves the right half of the spectrum
// looking dead. Use a logarithmic frequency-to-bar mapping plus a
// per-bar high-end gain so all bars carry visible motion.
function updateEditorialSpectrum(bins, numBins) {
const root = document.querySelector('.now-playing .spectrum');
if (!root) return;
const bars = root.children;
const barCount = bars.length;
if (!barCount) return;
document.body.classList.add('audio-spectrum-live');
// Skip the very lowest bin (DC + sub-rumble) which often dominates.
const lowBin = 1;
const highBin = numBins - 1;
for (let i = 0; i < barCount; i++) {
// Logarithmic mapping: equal-area slices of the audible spectrum
// map to equal numbers of bars. Each bar covers a wider bin range
// toward the highs so they get amplified naturally.
const t0 = i / barCount;
const t1 = (i + 1) / barCount;
const startIdx = Math.max(lowBin, Math.floor(lowBin + Math.pow(t0, 2.0) * (highBin - lowBin)));
const endIdx = Math.max(startIdx + 1, Math.floor(lowBin + Math.pow(t1, 2.0) * (highBin - lowBin)));
let peak = 0;
for (let j = startIdx; j < endIdx && j < numBins; j++) {
if (bins[j] > peak) peak = bins[j];
}
}
const glow = document.getElementById('album-art-glow');
if (glow) {
glow.style.opacity = (0.4 + bass * 0.4).toFixed(2);
// Per-bar high-end gain: 1.0 at the lowest bar, ~1.8 at the highest.
// Backend now ships AGC-normalized bins (peak ~1, transients up to 1.5)
// so the master multiplier stays modest to avoid perma-clipping.
const gain = 1 + (i / barCount) * 0.8;
// Floor at 12% so silent bars are still visually present.
const pct = Math.max(12, Math.min(100, peak * 65 * gain));
bars[i].style.height = pct + '%';
}
}
@@ -460,13 +428,24 @@ export async function loadAudioDevices() {
select.appendChild(opt);
}
if (status.current_device) {
// Prefer server-reported device; fall back to the last user choice
// saved in localStorage (so reloads persist even if the server
// forgets between restarts).
const savedDevice = localStorage.getItem('audioDevice') || '';
const targetDevice = status.current_device || savedDevice;
let pendingPushToServer = false;
if (targetDevice) {
for (let i = 0; i < select.options.length; i++) {
if (select.options[i].value === status.current_device) {
if (select.options[i].value === targetDevice) {
select.selectedIndex = i;
break;
}
}
// If the saved device wasn't on the server, push it back so
// capture starts on the right one.
if (!status.current_device && savedDevice) {
pendingPushToServer = true;
}
}
// Enhance with icon grid
@@ -485,7 +464,33 @@ export async function loadAudioDevices() {
});
_audioDeviceIconSelect.setValue(select.value, false);
// Sync visualizerAvailable from the fetched status so that
// applyVisualizerMode() and the toggle button are consistent.
visualizerAvailable = status.available;
const btn = document.getElementById('visualizerToggle');
if (btn) btn.style.display = visualizerAvailable ? '' : 'none';
updateAudioDeviceStatus(status);
// Re-subscribe the WebSocket if the user had the visualizer enabled.
if (visualizerEnabled && visualizerAvailable) {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'enable_visualizer' }));
}
}
// If the user's previously-chosen device wasn't recognized by
// the server (e.g. server restart cleared in-memory state),
// push it back so capture lands on the right one.
if (pendingPushToServer && savedDevice) {
try {
await fetch('/api/media/visualizer/device', {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
body: JSON.stringify({ device_name: savedDevice })
});
} catch (_) { /* best-effort */ }
}
} catch (e) {
section.style.display = 'none';
}
@@ -513,6 +518,13 @@ export async function onAudioDeviceChanged() {
const deviceName = select.value || null;
// Persist locally so reloads survive even if the server doesn't.
if (deviceName) {
localStorage.setItem('audioDevice', deviceName);
} else {
localStorage.removeItem('audioDevice');
}
try {
const resp = await fetch('/api/media/visualizer/device', {
method: 'POST',
@@ -524,7 +536,12 @@ export async function onAudioDeviceChanged() {
const result = await resp.json();
updateAudioDeviceStatus({ available: result.success, ...result });
await checkVisualizerAvailability();
if (visualizerEnabled) applyVisualizerMode();
// Picking a device is an explicit signal the user wants
// capture: auto-enable the visualizer if it isn't already on.
if (!visualizerEnabled && visualizerAvailable) {
setVisualizerEnabled(true);
}
applyVisualizerMode();
showToast(t('settings.audio.device_changed'), 'success');
} else {
showToast(t('settings.audio.device_change_failed'), 'error');
@@ -596,6 +613,18 @@ export function setupProgressDrag(bar, fill) {
});
}
// Replace the album-art src and replay the .is-swapping CSS animation
// so the new artwork crossfades in instead of popping. Re-toggling the
// class across rAF restarts the keyframes even if it was already on.
function swapArtworkSrc(imgEl, newSrc) {
if (!imgEl) return;
if (imgEl.src === newSrc) return;
imgEl.classList.remove('is-swapping');
void imgEl.offsetWidth;
imgEl.src = newSrc;
imgEl.classList.add('is-swapping');
}
export function updateUI(status) {
setLastStatus(status);
@@ -622,7 +651,7 @@ export function updateUI(status) {
if (artworkKey !== lastArtworkKey) {
lastArtworkKey = artworkKey;
const placeholderArt = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3Cpath fill='%236a6a6a' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E";
const placeholderArt = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%236a6a6a' opacity='0.35' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E";
const placeholderGlow = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3C/svg%3E";
if (artworkSource) {
fetch(`/api/media/artwork?_=${Date.now()}`, {
@@ -634,7 +663,7 @@ export function updateUI(status) {
const oldBlobUrl = currentArtworkBlobUrl;
const url = URL.createObjectURL(blob);
currentArtworkBlobUrl = url;
dom.albumArt.src = url;
swapArtworkSrc(dom.albumArt, url);
dom.miniAlbumArt.src = url;
if (dom.albumArtGlow) dom.albumArtGlow.src = url;
if (oldBlobUrl) setTimeout(() => URL.revokeObjectURL(oldBlobUrl), 1000);
@@ -645,7 +674,7 @@ export function updateUI(status) {
URL.revokeObjectURL(currentArtworkBlobUrl);
currentArtworkBlobUrl = null;
}
dom.albumArt.src = placeholderArt;
swapArtworkSrc(dom.albumArt, placeholderArt);
dom.miniAlbumArt.src = placeholderArt;
if (dom.albumArtGlow) dom.albumArtGlow.src = placeholderGlow;
}
@@ -664,6 +693,17 @@ export function updateUI(status) {
dom.volumeDisplay.textContent = `${status.volume}%`;
dom.miniVolumeSlider.value = status.volume;
dom.miniVolumeDisplay.textContent = `${status.volume}%`;
// VU needle: map 0-100 volume to -22deg..+22deg rotation.
const needle = document.getElementById('vuNeedle');
if (needle) {
const deg = -22 + (status.volume / 100) * 44;
needle.style.transform = `rotate(${deg}deg)`;
}
// Editorial VU readout: VOL XX% / OUT (SYS or MUTED)
const vuVol = document.getElementById('vu-vol');
if (vuVol) vuVol.textContent = `${status.volume}%`;
const vuOut = document.getElementById('vu-out');
if (vuOut) vuOut.textContent = status.muted ? 'MUTE' : 'SYS';
}
updateMuteIcon(status.muted);
@@ -685,8 +725,84 @@ export function updateUI(status) {
}
}
// ─── VU needle ───────────────────────────────────────────────
// The needle reflects ACTUAL audio output level (computed from the
// FFT data the visualizer feeds in). When audio capture isn't
// running, fall back to a synthetic wobble bounded by the volume
// slider position so the needle still looks alive.
let vuWobbleHandle = null;
let vuWobbleStart = 0;
let vuLevelSmoothed = 0;
const VU_LEVEL_ATTACK = 0.7; // Fast climb so the needle catches musical hits
const VU_LEVEL_RELEASE = 0.25; // Faster fall so it swings between hits, not pins
function readAudioLevel() {
if (!frequencyData) return null;
// Backend sends a true loudness signal (RMS-derived dB, 0..1).
// The bins are renormalized per frame so peak-of-bins is useless for level.
if (typeof frequencyData.level === 'number') return frequencyData.level;
if (!frequencyData.frequencies) return null;
const bins = frequencyData.frequencies;
if (!bins.length) return null;
let peak = 0;
for (let i = 1; i < bins.length; i++) {
if (bins[i] > peak) peak = bins[i];
}
return Math.min(1, peak * 1.4);
}
function startVuWobble() {
if (vuWobbleHandle) return;
vuWobbleStart = performance.now();
const tick = () => {
const needle = document.getElementById('vuNeedle');
if (needle) {
// Loopback capture is post-volume on Windows/macOS, so the
// measured level already reflects the output knob — no extra
// (vol/100) attenuation needed.
const audioLevel = readAudioLevel();
let target;
if (audioLevel != null) {
// Real audio: apply attack/release smoothing for
// analog-feeling ballistics.
const k = audioLevel > vuLevelSmoothed ? VU_LEVEL_ATTACK : VU_LEVEL_RELEASE;
vuLevelSmoothed = vuLevelSmoothed * (1 - k) + audioLevel * k;
target = -22 + vuLevelSmoothed * 44;
} else {
const slider = document.getElementById('volume-slider');
const vol = slider ? Number(slider.value) || 0 : 0;
const base = -22 + (vol / 100) * 44;
const mag = Math.max(2, Math.min(14, vol * 0.16));
const t = (performance.now() - vuWobbleStart) / 1000;
target = base
+ Math.sin(t * 6.3) * mag * 0.55
+ Math.sin(t * 11.7 + 1.3) * mag * 0.30
+ (Math.random() - 0.5) * mag * 0.30;
}
needle.style.transform = `rotate(${target}deg)`;
}
vuWobbleHandle = requestAnimationFrame(tick);
};
vuWobbleHandle = requestAnimationFrame(tick);
}
function stopVuWobble() {
if (vuWobbleHandle) {
cancelAnimationFrame(vuWobbleHandle);
vuWobbleHandle = null;
}
vuLevelSmoothed = 0;
const needle = document.getElementById('vuNeedle');
if (needle) needle.style.transform = 'rotate(-22deg)';
}
export function updatePlaybackState(state) {
setCurrentPlayState(state);
// Expose state to CSS so tonearm / vinyl spin can react.
document.documentElement.dataset.playstate = state;
// Drive the VU needle wobble — running only while playing.
if (state === 'playing') startVuWobble();
else stopVuWobble();
switch(state) {
case 'playing':
dom.playbackState.textContent = t('state.playing');
@@ -712,7 +828,6 @@ export function updatePlaybackState(state) {
dom.playPauseIcon.innerHTML = SVG_PLAY;
dom.miniPlayPauseIcon.innerHTML = SVG_PLAY;
}
updateVinylSpin();
}
function updateProgress(position, duration) {
@@ -726,6 +841,8 @@ function updateProgress(position, duration) {
dom.progressFill.style.width = widthStr;
dom.currentTime.textContent = currentStr;
dom.totalTime.textContent = totalStr;
if (dom.metaElapsed) dom.metaElapsed.textContent = currentStr;
if (dom.metaLength) dom.metaLength.textContent = totalStr;
dom.progressBar.dataset.duration = duration;
dom.progressBar.setAttribute('aria-valuenow', posRound);
dom.progressBar.setAttribute('aria-valuemax', durRound);
@@ -763,4 +880,185 @@ function updateMuteIcon(muted) {
const path = muted ? SVG_MUTED : SVG_UNMUTED;
dom.muteIcon.innerHTML = path;
dom.miniMuteIcon.innerHTML = path;
const vuOut = document.getElementById('vu-out');
if (vuOut) vuOut.textContent = muted ? 'MUTE' : 'SYS';
const cluster = document.querySelector('.now-playing .vu-cluster');
if (cluster) cluster.classList.toggle('muted', muted);
}
// ============================================================
// Fullscreen player mode — Listening Room
//
// Two-layer model:
// 1. CSS overlay (`body.is-fullscreen-player`) — works everywhere,
// reuses existing player markup, takes over the viewport via
// position:fixed.
// 2. Native Fullscreen API on top — true OS-level fullscreen when
// the user agent allows it. The CSS class is the source of truth;
// the native API is best-effort sugar.
// ============================================================
let fsChromeIdleTimer = null;
const FS_CHROME_IDLE_MS = 2500;
let fsLastFocusedElement = null;
let fsBloomSyncObserver = null;
function syncFullscreenBloomArt() {
const src = document.getElementById('album-art');
const bloom = document.getElementById('fs-bloom-art');
if (!src || !bloom) return;
if (src.src && src.src !== bloom.src) bloom.src = src.src;
}
function showFsChrome() {
document.body.classList.remove('fs-chrome-hidden');
if (fsChromeIdleTimer) clearTimeout(fsChromeIdleTimer);
if (document.body.classList.contains('is-fullscreen-player')) {
fsChromeIdleTimer = setTimeout(() => {
document.body.classList.add('fs-chrome-hidden');
}, FS_CHROME_IDLE_MS);
}
}
function onFsMouseMove() {
showFsChrome();
}
function onFsKeyDown(e) {
// ESC exits regardless of focus location (native API also dispatches its own,
// but we handle the CSS-only fallback case here).
if (e.key === 'Escape' && document.body.classList.contains('is-fullscreen-player')) {
e.preventDefault();
exitPlayerFullscreen();
}
}
function onGlobalFsHotkey(e) {
// 'F' toggles fullscreen — but never when user is typing into a field.
if (e.key !== 'f' && e.key !== 'F') return;
const tag = (e.target && e.target.tagName) || '';
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
if (e.target && e.target.isContentEditable) return;
if (e.metaKey || e.ctrlKey || e.altKey) return;
e.preventDefault();
togglePlayerFullscreen();
}
function onNativeFullscreenChange() {
// If the user pressed ESC at the OS level or otherwise exited native
// fullscreen, mirror the state in our CSS overlay.
const hasNative = !!document.fullscreenElement;
const hasOverlay = document.body.classList.contains('is-fullscreen-player');
if (!hasNative && hasOverlay) {
// User left native fullscreen — also drop the overlay so the UI
// returns to its normal state in one motion.
exitPlayerFullscreen({ skipNativeExit: true });
}
}
function updateFullscreenButtonIcons(active) {
const enter = document.getElementById('fullscreen-icon-enter');
const exit = document.getElementById('fullscreen-icon-exit');
if (enter) enter.style.display = active ? 'none' : '';
if (exit) exit.style.display = active ? '' : 'none';
const btn = document.getElementById('fullscreenToggle');
if (btn) {
btn.classList.toggle('active', active);
btn.setAttribute('aria-pressed', active ? 'true' : 'false');
}
}
export function enterPlayerFullscreen() {
if (document.body.classList.contains('is-fullscreen-player')) return;
// If we're not on the player tab, jump to it first so the markup is visible.
if (activeTab !== 'player') switchTab('player');
fsLastFocusedElement = document.activeElement;
document.body.classList.add('is-fullscreen-player');
setMiniPlayerVisible(false);
updateFullscreenButtonIcons(true);
syncFullscreenBloomArt();
// Watch for album-art swaps so the bloom keeps up.
const src = document.getElementById('album-art');
if (src && 'MutationObserver' in window) {
if (fsBloomSyncObserver) fsBloomSyncObserver.disconnect();
fsBloomSyncObserver = new MutationObserver(syncFullscreenBloomArt);
fsBloomSyncObserver.observe(src, { attributes: true, attributeFilter: ['src'] });
}
document.addEventListener('mousemove', onFsMouseMove, { passive: true });
document.addEventListener('keydown', onFsKeyDown);
showFsChrome();
// Move keyboard focus onto the play/pause button so Space/Enter immediately
// controls playback once the user enters the room.
const playBtn = document.getElementById('btn-play-pause');
if (playBtn) playBtn.focus({ preventScroll: true });
// Best-effort native fullscreen. Failure is silent — the CSS overlay
// already gives the user the immersive view.
const target = document.documentElement;
if (target.requestFullscreen && !document.fullscreenElement) {
target.requestFullscreen({ navigationUI: 'hide' }).catch(() => {});
}
localStorage.setItem('fullscreenPlayerEnabled', 'true');
}
export function exitPlayerFullscreen({ skipNativeExit = false } = {}) {
if (!document.body.classList.contains('is-fullscreen-player')) return;
document.body.classList.remove('is-fullscreen-player', 'fs-chrome-hidden');
updateFullscreenButtonIcons(false);
if (fsChromeIdleTimer) {
clearTimeout(fsChromeIdleTimer);
fsChromeIdleTimer = null;
}
if (fsBloomSyncObserver) {
fsBloomSyncObserver.disconnect();
fsBloomSyncObserver = null;
}
document.removeEventListener('mousemove', onFsMouseMove);
document.removeEventListener('keydown', onFsKeyDown);
if (!skipNativeExit && document.fullscreenElement && document.exitFullscreen) {
document.exitFullscreen().catch(() => {});
}
// Re-evaluate mini-player visibility against scroll position.
if (activeTab === 'player') {
const playerContainer = document.querySelector('.player-container');
if (playerContainer) {
const rect = playerContainer.getBoundingClientRect();
const inView = rect.top < window.innerHeight && rect.bottom > 0;
setMiniPlayerVisible(!inView);
}
} else {
setMiniPlayerVisible(true);
}
// Restore focus to whatever invoked the toggle.
if (fsLastFocusedElement && typeof fsLastFocusedElement.focus === 'function') {
try { fsLastFocusedElement.focus({ preventScroll: true }); } catch (_) {}
}
fsLastFocusedElement = null;
localStorage.removeItem('fullscreenPlayerEnabled');
}
export function togglePlayerFullscreen() {
if (document.body.classList.contains('is-fullscreen-player')) {
exitPlayerFullscreen();
} else {
enterPlayerFullscreen();
}
}
export function initPlayerFullscreen() {
document.addEventListener('keydown', onGlobalFsHotkey);
document.addEventListener('fullscreenchange', onNativeFullscreenChange);
}
media_server/static/js/websocket.js
+1 -4
View File
@@ -8,7 +8,7 @@ import {
WS_MAX_RECONNECT_ATTEMPTS, WS_PING_INTERVAL_MS,
authRequired, showUpdateBanner,
} from './core.js';
import { updateUI, visualizerEnabled, visualizerAvailable, setFrequencyData, stopPositionInterpolation, loadAudioDevices } from './player.js';
import { updateUI, setFrequencyData, stopPositionInterpolation, loadAudioDevices } from './player.js';
import { loadScripts, loadScriptsTable, displayQuickAccess } from './scripts.js';
import { loadCallbacksTable } from './callbacks.js';
import { loadHeaderLinks, loadLinksTable } from './links.js';
@@ -81,9 +81,6 @@ export function connectWebSocket(token) {
loadLinksTable();
loadHeaderLinks();
loadAudioDevices();
if (visualizerEnabled && visualizerAvailable) {
newWs.send(JSON.stringify({ type: 'enable_visualizer' }));
}
};
newWs.onmessage = (event) => {
media_server/static/locales/en.json
+39 -3
View File
@@ -19,12 +19,23 @@
"player.status.connected": "Connected",
"player.status.disconnected": "Disconnected",
"player.no_media": "No media playing",
"player.kicker": "Now Playing",
"player.modes": "Modes",
"header.connected": "Connected",
"header.volume": "Vol. I",
"header.edition": "Studio Reference",
"header.edition_sub": "Studio Reference Edition",
"meta.state": "State",
"meta.source": "Source",
"player.title_unavailable": "Title unavailable",
"player.source": "Source:",
"player.unknown_source": "Unknown",
"player.vinyl": "Vinyl mode",
"player.visualizer": "Audio visualizer",
"player.background": "Dynamic background",
"player.fullscreen": "Fullscreen player",
"player.fullscreen.exit": "Exit fullscreen",
"player.fullscreen.exit_short": "Exit",
"state.playing": "Playing",
"state.paused": "Paused",
"state.stopped": "Stopped",
@@ -126,8 +137,8 @@
"callbacks.msg.list_failed": "Failed to load callbacks",
"callbacks.confirm.delete": "Are you sure you want to delete the callback \"{name}\"?",
"callbacks.confirm.unsaved": "You have unsaved changes. Are you sure you want to discard them?",
"tab.player": "Player",
"tab.browser": "Browser",
"tab.player": "Now Spinning",
"tab.browser": "Library",
"tab.quick_access": "Quick Access",
"tab.settings": "Settings",
"tab.display": "Display",
@@ -173,7 +184,27 @@
"browser.play_all_error": "Failed to play folder",
"browser.error_loading": "Error loading directory",
"browser.error_loading_folders": "Failed to load media folders",
"browser.manage_folders_hint": "Folder management coming soon! For now, edit config.yaml to add media folders.",
"browser.manage_folders_hint": "Folder management is disabled. Set media_folders_management: true in config.yaml to enable.",
"browser.unavailable": "Unavailable",
"browser.folder_available": "Available",
"browser.folder_unavailable": "Unavailable (path not reachable)",
"browser.folder_disabled": "disabled",
"browser.folder_edit": "Edit folder",
"browser.folder_delete": "Delete folder",
"browser.folder_created": "Media folder created successfully",
"browser.folder_updated": "Media folder updated successfully",
"browser.folder_deleted": "Media folder deleted successfully",
"browser.folder_save_error": "Failed to save media folder",
"browser.folder_delete_error": "Failed to delete media folder",
"browser.folder_confirm_delete": "Are you sure you want to delete the folder \"{name}\"?",
"browser.folders_description": "Media folders available for browsing. Folders on network shares show availability status.",
"browser.folders_empty": "No media folders configured. Click \"+\" to add one.",
"browser.folders_table.id": "ID",
"browser.folders_table.label": "Label",
"browser.folders_table.path": "Path",
"browser.folders_table.status": "Status",
"browser.folders_table.actions": "Actions",
"settings.section.media_folders": "Media Folders",
"browser.folder_dialog.title_add": "Add Media Folder",
"browser.folder_dialog.title_edit": "Edit Media Folder",
"browser.folder_dialog.folder_id": "Folder ID *",
@@ -185,6 +216,11 @@
"browser.folder_dialog.enabled": "Enabled",
"browser.folder_dialog.cancel": "Cancel",
"browser.folder_dialog.save": "Save",
"browser.list_header.name": "Name",
"browser.list_header.bitrate": "Bitrate",
"browser.list_header.duration": "Duration",
"browser.list_header.size": "Size",
"browser.showing_items": "Showing {from}\u2013{to} of {total}",
"browser.download_error": "Failed to download file",
"connection.reconnecting": "Connection lost. Reconnecting (attempt {attempt})...",
"connection.lost": "Connection lost. Server may be unavailable.",
media_server/static/locales/ru.json
+39 -3
View File
@@ -19,12 +19,23 @@
"player.status.connected": "Подключено",
"player.status.disconnected": "Отключено",
"player.no_media": "Медиа не воспроизводится",
"player.kicker": "Сейчас играет",
"player.modes": "Режимы",
"header.connected": "Подключено",
"header.volume": "Том I",
"header.edition": "Studio Reference",
"header.edition_sub": "Studio Reference Edition",
"meta.state": "Состояние",
"meta.source": "Источник",
"player.title_unavailable": "Название недоступно",
"player.source": "Источник:",
"player.unknown_source": "Неизвестно",
"player.vinyl": "Режим винила",
"player.visualizer": "Аудио визуализатор",
"player.background": "Динамический фон",
"player.fullscreen": "Полноэкранный режим",
"player.fullscreen.exit": "Выйти из полного экрана",
"player.fullscreen.exit_short": "Выйти",
"state.playing": "Воспроизведение",
"state.paused": "Пауза",
"state.stopped": "Остановлено",
@@ -126,8 +137,8 @@
"callbacks.msg.list_failed": "Не удалось загрузить обратные вызовы",
"callbacks.confirm.delete": "Вы уверены, что хотите удалить обратный вызов \"{name}\"?",
"callbacks.confirm.unsaved": "У вас есть несохраненные изменения. Вы уверены, что хотите отменить их?",
"tab.player": "Плеер",
"tab.browser": "Браузер",
"tab.player": "Сейчас играет",
"tab.browser": "Библиотека",
"tab.quick_access": "Быстрый Доступ",
"tab.settings": "Настройки",
"tab.display": "Дисплей",
@@ -173,7 +184,27 @@
"browser.play_all_error": "Не удалось воспроизвести папку",
"browser.error_loading": "Ошибка загрузки каталога",
"browser.error_loading_folders": "Не удалось загрузить медиа папки",
"browser.manage_folders_hint": "Управление папками скоро появится! Пока редактируйте config.yaml для добавления медиа папок.",
"browser.manage_folders_hint": "Управление папками отключено. Установите media_folders_management: true в config.yaml для включения.",
"browser.unavailable": "Недоступна",
"browser.folder_available": "Доступна",
"browser.folder_unavailable": "Недоступна (путь не найден)",
"browser.folder_disabled": "отключена",
"browser.folder_edit": "Редактировать папку",
"browser.folder_delete": "Удалить папку",
"browser.folder_created": "Медиа папка успешно создана",
"browser.folder_updated": "Медиа папка успешно обновлена",
"browser.folder_deleted": "Медиа папка успешно удалена",
"browser.folder_save_error": "Не удалось сохранить медиа папку",
"browser.folder_delete_error": "Не удалось удалить медиа папку",
"browser.folder_confirm_delete": "Вы уверены, что хотите удалить папку \"{name}\"?",
"browser.folders_description": "Медиа папки для просмотра. Для сетевых ресурсов показан статус доступности.",
"browser.folders_empty": "Медиа папки не настроены. Нажмите \"+\" для добавления.",
"browser.folders_table.id": "ID",
"browser.folders_table.label": "Метка",
"browser.folders_table.path": "Путь",
"browser.folders_table.status": "Статус",
"browser.folders_table.actions": "Действия",
"settings.section.media_folders": "Медиа папки",
"browser.folder_dialog.title_add": "Добавить медиа папку",
"browser.folder_dialog.title_edit": "Редактировать медиа папку",
"browser.folder_dialog.folder_id": "ID папки *",
@@ -185,6 +216,11 @@
"browser.folder_dialog.enabled": "Включено",
"browser.folder_dialog.cancel": "Отмена",
"browser.folder_dialog.save": "Сохранить",
"browser.list_header.name": "Название",
"browser.list_header.bitrate": "Битрейт",
"browser.list_header.duration": "Длительность",
"browser.list_header.size": "Размер",
"browser.showing_items": "Показано {from}\u2013{to} из {total}",
"browser.download_error": "Не удалось скачать файл",
"connection.reconnecting": "Соединение потеряно. Переподключение (попытка {attempt})...",
"connection.lost": "Соединение потеряно. Сервер может быть недоступен.",
media_server/static/redesign-mockup.html
+1671
View File
File diff suppressed because it is too large Load Diff
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "media-server-frontend",
"version": "1.0.0",
"version": "0.2.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "media-server-frontend",
"version": "1.0.0",
"version": "0.2.0",
"devDependencies": {
"esbuild": "^0.27.4"
}
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "media-server-frontend",
"version": "1.0.0",
"version": "0.2.0",
"private": true,
"description": "Frontend build tooling for media server WebUI",
"scripts": {
pyproject.toml
+4 -5
View File
@@ -1,6 +1,6 @@
[project]
name = "media-server"
version = "0.1.1"
version = "0.2.0"
description = "REST API server for controlling system-wide media playback"
readme = "README.md"
license = { text = "MIT" }
@@ -32,6 +32,8 @@ dependencies = [
"pyyaml>=6.0",
"mutagen>=1.47.0",
"pillow>=10.0.0",
"soundcard>=0.4.0",
"numpy>=1.24.0,<2.0",
]
[project.optional-dependencies]
@@ -41,13 +43,10 @@ windows = [
"comtypes>=1.2.0",
"pycaw>=20230407",
"screen-brightness-control>=0.20.0",
"wmi>=1.5.1",
"monitorcontrol>=3.0.0",
"pystray>=0.19.0",
]
visualizer = [
"soundcard>=0.4.0",
"numpy>=1.24.0,<2.0",
]
dev = [
"pytest>=7.0",
"pytest-asyncio>=0.21",
tests/__init__.py
View File
tests/test_audio_analyzer.py
+152
View File
@@ -0,0 +1,152 @@
"""Tests for AudioAnalyzer.
Covers the pure-Python pieces that don't need real audio hardware:
- Logarithmic FFT bin edge layout
- Slow-AGC envelope follower (attack vs release behaviour)
- Lifecycle reset of the AGC reference on start()
Tests are skipped when numpy isn't installed in the host environment
so they don't block CI on a minimal interpreter.
"""
from __future__ import annotations
import pytest
from media_server.services.audio_analyzer import AudioAnalyzer, _load_numpy
np = _load_numpy()
needs_numpy = pytest.mark.skipif(np is None, reason="numpy not available")
@pytest.fixture
def analyzer() -> AudioAnalyzer:
return AudioAnalyzer(num_bins=16, sample_rate=44100, chunk_size=1024)
# ── _compute_bin_edges ────────────────────────────────────────────
@needs_numpy
def test_bin_edges_count_matches_num_bins_plus_one(analyzer: AudioAnalyzer) -> None:
edges = analyzer._compute_bin_edges()
assert len(edges) == analyzer.num_bins + 1
@needs_numpy
def test_bin_edges_are_monotonic_non_decreasing(analyzer: AudioAnalyzer) -> None:
edges = analyzer._compute_bin_edges()
assert all(edges[i] <= edges[i + 1] for i in range(len(edges) - 1))
@needs_numpy
def test_bin_edges_stay_within_fft_size(analyzer: AudioAnalyzer) -> None:
edges = analyzer._compute_bin_edges()
fft_size = analyzer.chunk_size // 2 + 1
assert max(edges) <= fft_size - 1
assert min(edges) >= 0
# ── AGC envelope follower (the new behaviour) ─────────────────────
def _step_envelope(analyzer: AudioAnalyzer, peak: float) -> float:
"""Run one frame of the AGC update with a known peak value.
Mirrors the math inside _capture_loop without spinning up a real
capture thread or requiring numpy: pure Python on a single float.
"""
if peak > analyzer._spectrum_ref:
analyzer._spectrum_ref += (peak - analyzer._spectrum_ref) * 0.05
else:
analyzer._spectrum_ref += (peak - analyzer._spectrum_ref) * 0.005
return analyzer._spectrum_ref
def test_agc_initial_reference_is_quiet(analyzer: AudioAnalyzer) -> None:
assert analyzer._spectrum_ref == pytest.approx(0.01)
def test_agc_attacks_quickly_toward_loud_signal(analyzer: AudioAnalyzer) -> None:
# Drive 30 frames of a loud signal; reference should climb sharply.
for _ in range(30):
_step_envelope(analyzer, peak=1.0)
# 30 frames of attack=0.05 brings (1 - 0.99^30) ≈ 0.78 of the way to 1.0.
assert analyzer._spectrum_ref > 0.5
assert analyzer._spectrum_ref < 1.0
def test_agc_releases_slowly_toward_quiet_signal(analyzer: AudioAnalyzer) -> None:
analyzer._spectrum_ref = 1.0
for _ in range(30):
_step_envelope(analyzer, peak=0.0)
# Release coefficient is 0.005 — after 30 frames we should have shed
# only ~14% of the headroom, not snap back to silent.
assert analyzer._spectrum_ref > 0.7
assert analyzer._spectrum_ref < 1.0
def test_agc_is_asymmetric_attack_faster_than_release(analyzer: AudioAnalyzer) -> None:
a = AudioAnalyzer()
b = AudioAnalyzer()
a._spectrum_ref = 0.5
b._spectrum_ref = 0.5
# One attack frame toward 1.0
_step_envelope(a, peak=1.0)
# One release frame toward 0.0 (same magnitude of error: 0.5)
_step_envelope(b, peak=0.0)
attack_delta = a._spectrum_ref - 0.5
release_delta = 0.5 - b._spectrum_ref
# Attack coefficient (0.05) is 10× the release coefficient (0.005).
assert attack_delta == pytest.approx(release_delta * 10, rel=1e-6)
# ── start() lifecycle reset ──────────────────────────────────────
def test_start_resets_spectrum_ref_when_unavailable(
monkeypatch: pytest.MonkeyPatch, analyzer: AudioAnalyzer
) -> None:
"""Even when start() returns False (no hardware), the AGC state
should remain at the documented quiet baseline."""
# Force unavailable so start() short-circuits without spawning a thread.
monkeypatch.setattr(
AudioAnalyzer, "available", property(lambda self: False)
)
analyzer._spectrum_ref = 0.95 # leftover from prior session
started = analyzer.start()
assert started is False
# start() returned early before the reset — by design (no capture
# means no need to renormalize). Document the contract.
assert analyzer._spectrum_ref == 0.95
def test_start_resets_spectrum_ref_when_available(
monkeypatch: pytest.MonkeyPatch, analyzer: AudioAnalyzer
) -> None:
"""When capture actually starts, leftover AGC state from a prior
session must be cleared so the first transients don't clip."""
monkeypatch.setattr(
AudioAnalyzer, "available", property(lambda self: True)
)
# Stub out the thread so we don't actually spin up a capture loop.
monkeypatch.setattr(
"media_server.services.audio_analyzer.threading.Thread",
lambda *a, **kw: type("T", (), {"start": lambda self: None})(),
)
analyzer._spectrum_ref = 0.95 # leftover from prior session
try:
started = analyzer.start()
assert started is True
assert analyzer._spectrum_ref == pytest.approx(0.01)
finally:
analyzer._running = False
# ── get_frequency_data thread-safe contract ───────────────────────
def test_get_frequency_data_returns_none_before_capture(
analyzer: AudioAnalyzer,
) -> None:
assert analyzer.get_frequency_data() is None