feat: Search results page, gapless removal, UI polish (v1.0.11)

- Add full search results page (/search?q=) with artist, album, song sections - Fix search results column alignment (fixed-width Format column eliminates per-grid auto-sizing variance) - Remove experimental gapless playback (caused song skipping and beginning cutoffs) - Add known limitations to README and CHANGELOG (seeking, DnD reliability) - Update GitHub Actions to Node.js 24 (checkout@v5, setup-node@v5) - Add align-items: center to tracklist-header CSS Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-21 22:15:40 +00:00 · 2026-03-14 12:33:58 +01:00
parent 623a6a4a54
commit 1e599d9636
15 changed files with 181 additions and 67 deletions
@@ -14,9 +14,9 @@ jobs:
      release_id: ${{ steps.create-release.outputs.result }}
      package_version: ${{ steps.get-version.outputs.version }}
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
      - name: setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
        with:
          node-version: lts/*
      - name: get version
@@ -56,9 +56,9 @@ jobs:
            args: ''
    runs-on: ${{ matrix.settings.platform }}
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
      - name: setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
        with:
          node-version: lts/*
      - name: install Rust stable
@@ -80,7 +80,7 @@ jobs:
      contents: write
    runs-on: ubuntu-22.04
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5

      - name: install dependencies
        run: |
@@ -97,7 +97,7 @@ jobs:
          chmod +x /usr/local/bin/linuxdeploy-plugin-gstreamer.sh

      - name: setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
        with:
          node-version: lts/*

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## [1.0.11] - 2026-03-14
+
+### Added
+- **Search Results Page**: Pressing Enter in the search bar now navigates to a dedicated full search results page showing artists, albums, and songs with proper column layout and headers.
+
+### Fixed
+- **Search Results Column Alignment**: Artist and album columns in the search results song list are now correctly aligned with their column headers.
+- **Search Results Header Alignment**: Fixed column header labels not aligning with song row content (root cause: `auto`-width Format column was sized independently per grid row).
+
+### Changed
+- **Gapless Playback removed**: Removed the experimental gapless playback feature. It caused intermittent song skipping and beginning cutoffs and was not reliable enough to ship. Standard sequential playback is used instead.
+
+### Known Issues
+- **Seeking**: Seeking may occasionally be unreliable, particularly on Linux/GStreamer. Being actively investigated.
+- **Queue drag & drop (macOS / Windows)**: Queue reordering via drag & drop may not always work correctly on macOS and Windows. Being actively worked on.
+
 ## [1.0.10] - 2026-03-14

 ### Added
@@ -35,6 +35,8 @@ Designed specifically for users hosting their own music via Navidrome or other S

 ## ● Known Limitations

+- **Seeking (all platforms)**: Seeking may occasionally be unreliable — especially on Linux/GStreamer. This is a known issue currently being worked on.
+- **Queue drag & drop (macOS / Windows)**: Queue reordering via drag & drop is being actively worked on and may not always behave correctly on macOS and Windows.
 - **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.

 ## 📥 Installation
@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.0.10",
+  "version": "1.0.11",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -2732,7 +2732,7 @@ dependencies = [

 [[package]]
 name = "psysonic"
-version = "1.0.10"
+version = "1.0.11"
 dependencies = [
 "serde",
 "serde_json",
@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.0.10"
+version = "1.0.11"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.0.10",
+  "version": "1.0.11",
  "identifier": "dev.psysonic.app",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -23,6 +23,7 @@ import Statistics from './pages/Statistics';
 import Playlists from './pages/Playlists';
 import Help from './pages/Help';
 import RandomAlbums from './pages/RandomAlbums';
+import SearchResults from './pages/SearchResults';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
 import { useAuthStore } from './store/authStore';
@@ -137,6 +138,7 @@ function AppShell() {
            <Route path="/random-mix" element={<RandomMix />} />
            <Route path="/playlists" element={<Playlists />} />
            <Route path="/label/:name" element={<LabelAlbums />} />
+            <Route path="/search" element={<SearchResults />} />
            <Route path="/statistics" element={<Statistics />} />
            <Route path="/settings" element={<Settings />} />
            <Route path="/help" element={<Help />} />
@@ -69,6 +69,12 @@ export default function LiveSearch() {
          value={query}
          onChange={e => setQuery(e.target.value)}
          onFocus={() => results && setOpen(true)}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && query.trim()) {
+              setOpen(false);
+              navigate(`/search?q=${encodeURIComponent(query.trim())}`);
+            }
+          }}
          aria-autocomplete="list"
          aria-controls="search-results"
          aria-expanded={open}
@@ -23,7 +23,7 @@ const navItems = [
 ];

 function isNewer(latest: string, current: string): boolean {
-  const parse = (v: string) => v.replace(/^v/, '').split('.').map(Number);
+  const parse = (v: string) => v.replace(/^[^0-9]*/, '').split('.').map(Number);
  const [lMaj, lMin, lPat] = parse(latest);
  const [cMaj, cMin, cPat] = parse(current);
  if (lMaj !== cMaj) return lMaj > cMaj;
@@ -44,6 +44,9 @@ const enTranslation = {
    albums: 'Albums',
    songs: 'Songs',
    clearLabel: 'Clear search',
+    title: 'Search',
+    resultsFor: 'Results for "{{query}}"',
+    album: 'Album',
  },
  nowPlaying: {
    tooltip: 'Who is listening?',
@@ -402,6 +405,9 @@ const deTranslation = {
    albums: 'Alben',
    songs: 'Songs',
    clearLabel: 'Suche leeren',
+    title: 'Suche',
+    resultsFor: 'Ergebnisse für „{{query}}"',
+    album: 'Album',
  },
  nowPlaying: {
    tooltip: 'Wer hört was?',
@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Play, Search } from 'lucide-react';
+import { search, SearchResults as ISearchResults, SubsonicSong } from '../api/subsonic';
+import { usePlayerStore } from '../store/playerStore';
+import AlbumRow from '../components/AlbumRow';
+import ArtistRow from '../components/ArtistRow';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(s: number) {
+  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+}
+
+export default function SearchResults() {
+  const { t } = useTranslation();
+  const [params] = useSearchParams();
+  const query = params.get('q') ?? '';
+  const [results, setResults] = useState<ISearchResults | null>(null);
+  const [loading, setLoading] = useState(false);
+  const playTrack = usePlayerStore(s => s.playTrack);
+  const currentTrack = usePlayerStore(s => s.currentTrack);
+
+  useEffect(() => {
+    if (!query.trim()) { setResults(null); return; }
+    setLoading(true);
+    search(query, { artistCount: 20, albumCount: 20, songCount: 50 })
+      .then(r => setResults(r))
+      .finally(() => setLoading(false));
+  }, [query]);
+
+  const hasResults = results && (results.artists.length || results.albums.length || results.songs.length);
+
+  const playSong = (song: SubsonicSong, list: SubsonicSong[]) => {
+    playTrack({
+      id: song.id, title: song.title, artist: song.artist, album: song.album,
+      albumId: song.albumId, artistId: song.artistId, duration: song.duration,
+      coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
+      suffix: song.suffix, userRating: song.userRating,
+    }, list.map(s => ({
+      id: s.id, title: s.title, artist: s.artist, album: s.album,
+      albumId: s.albumId, artistId: s.artistId, duration: s.duration,
+      coverArt: s.coverArt, year: s.year, bitRate: s.bitRate,
+      suffix: s.suffix, userRating: s.userRating,
+    })));
+  };
+
+  return (
+    <div className="content-body animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      <div style={{ marginBottom: '-1.5rem' }}>
+        <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
+          <Search size={22} />
+          {query ? t('search.resultsFor', { query }) : t('search.title')}
+        </h1>
+      </div>
+
+      {loading && (
+        <div className="loading-center"><div className="spinner" /></div>
+      )}
+
+      {!loading && query && !hasResults && (
+        <div className="empty-state">{t('search.noResults', { query })}</div>
+      )}
+
+      {!loading && results && (
+        <>
+          {results.artists.length > 0 && (
+            <ArtistRow title={t('search.artists')} artists={results.artists} />
+          )}
+
+          {results.albums.length > 0 && (
+            <AlbumRow title={t('search.albums')} albums={results.albums} />
+          )}
+
+          {results.songs.length > 0 && (
+            <section className="album-row-section">
+              <div className="album-row-header" style={{ marginBottom: '1rem' }}>
+                <h2 className="section-title" style={{ marginBottom: 0 }}>{t('search.songs')}</h2>
+              </div>
+              <div className="tracklist" style={{ padding: 0 }}>
+                <div className="tracklist-header" style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}>
+                  <div />
+                  <div>{t('albumDetail.trackTitle')}</div>
+                  <div>{t('albumDetail.trackArtist')}</div>
+                  <div>{t('search.album')}</div>
+                  <div>{t('albumDetail.trackFormat')}</div>
+                  <div style={{ textAlign: 'right' }}>{t('albumDetail.trackDuration')}</div>
+                </div>
+                {results.songs.map(song => (
+                  <div
+                    key={song.id}
+                    className={`track-row${currentTrack?.id === song.id ? ' active' : ''}`}
+                    style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}
+                    onDoubleClick={() => playSong(song, results.songs)}
+                    role="row"
+                    draggable
+                    onDragStart={e => {
+                      e.dataTransfer.effectAllowed = 'copy';
+                      const track = {
+                        id: song.id, title: song.title, artist: song.artist, album: song.album,
+                        albumId: song.albumId, artistId: song.artistId, duration: song.duration,
+                        coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
+                        suffix: song.suffix, userRating: song.userRating,
+                      };
+                      e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                    }}
+                  >
+                    <button
+                      className="btn btn-ghost"
+                      style={{ padding: 4 }}
+                      onClick={e => { e.stopPropagation(); playSong(song, results.songs); }}
+                    >
+                      <Play size={14} fill="currentColor" />
+                    </button>
+                    <div className="track-info">
+                      <span className="track-title" title={song.title}>{song.title}</span>
+                    </div>
+                    <div className="track-artist-cell"><span className="track-artist" title={song.artist}>{song.artist}</span></div>
+                    <div className="track-artist-cell"><span className="track-artist" title={song.album}>{song.album}</span></div>
+                    <span className="track-codec" style={{ alignSelf: 'center' }}>
+                      {[song.suffix?.toUpperCase(), song.bitRate ? `${song.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
+                    </span>
+                    <span className="track-duration" style={{ textAlign: 'right' }}>
+                      {formatDuration(song.duration)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
@@ -374,7 +374,7 @@ export default function Settings() {
                Psysonic
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
-                {t('settings.aboutVersion')} 1.0.10
+                {t('settings.aboutVersion')} 1.0.11
              </div>
            </div>
          </div>
@@ -30,7 +30,6 @@ interface PlayerState {
  currentTime: number;
  volume: number;
  howl: Howl | null;
-  prefetched: Map<string, Howl>;
  scrobbled: boolean;

  // Actions
@@ -46,8 +45,7 @@ interface PlayerState {
  setProgress: (t: number, duration: number) => void;
  enqueue: (tracks: Track[]) => void;
  clearQueue: () => void;
-  prefetchUpcoming: (fromIndex: number, queue: Track[]) => void;
-  
+
  isQueueVisible: boolean;
  toggleQueue: () => void;

@@ -81,7 +79,6 @@ let gstSeeking = false;           // true while GStreamer is processing a seek
 let pendingSeekTime: number | null = null; // queue at most one seek
 let gstSeekWatchdog: ReturnType<typeof setTimeout> | null = null; // safety release if onseek never fires
 let hangRecoveryPos: number | null = null; // set before a recovery playTrack call so onplay seeks here
-let gaplessPrewarmedId: string | null = null; // track id whose prefetched Howl has been silently pre-started
 let hangLastTime = -1;            // last observed currentTime for hang detection
 let hangStallTime = 0;            // Date.now() when currentTime last moved

@@ -131,7 +128,6 @@ export const usePlayerStore = create<PlayerState>()(
      currentTime: 0,
      volume: 0.8,
      howl: null,
-      prefetched: new Map(),
      scrobbled: false,
      isQueueVisible: true,
      isFullscreenOpen: false,
@@ -172,29 +168,11 @@ export const usePlayerStore = create<PlayerState>()(
    pendingSeekTime = null;
    hangLastTime = -1;
    hangStallTime = 0;
-    gaplessPrewarmedId = null;

    const newQueue = queue ?? state.queue;
    const idx = newQueue.findIndex(t => t.id === track.id);

-    // Reuse a prefetched Howl if available — it's already connected and buffering
-    const prefetchMap = state.prefetched;
-    let howl: Howl;
-    let gaplessHandoff = false;
-    if (prefetchMap.has(track.id)) {
-      howl = prefetchMap.get(track.id)!;
-      prefetchMap.delete(track.id);
-      set({ prefetched: new Map(prefetchMap) });
-      if (howl.playing()) {
-        // Gapless: pipeline already running — pause, seek to 0, then play
-        gaplessHandoff = true;
-        howl.pause();
-        hangRecoveryPos = 0; // onplay will seek to position 0
-      }
-      howl.volume(state.volume);
-    } else {
-      howl = new Howl({ src: [buildStreamUrl(track.id)], html5: true, volume: state.volume });
-    }
+    const howl = new Howl({ src: [buildStreamUrl(track.id)], html5: true, volume: state.volume });

    howl.on('play', () => {
      set({ isPlaying: true });
@@ -247,18 +225,6 @@ export const usePlayerStore = create<PlayerState>()(
          return;
        }

-          // Gapless pre-warm: start next track's Howl silently ~1s before end
-          if (!gaplessPrewarmedId && dur > 2 && dur - cur < 1.0) {
-            const { queue: q, queueIndex: qi, repeatMode: rm, prefetched: pf } = get();
-            const nextIdx = qi + 1;
-            const nextTrack = nextIdx < q.length ? q[nextIdx]
-              : (rm === 'all' && q.length > 0 ? q[0] : null);
-            if (nextTrack && pf.has(nextTrack.id)) {
-              const nh = pf.get(nextTrack.id)!;
-              if (!nh.playing()) { nh.volume(0); nh.play(); gaplessPrewarmedId = nextTrack.id; }
-            }
-          }
-
        // Scrobble at 50%
        if (prog >= 0.5 && !get().scrobbled) {
          set({ scrobbled: true });
@@ -267,8 +233,6 @@ export const usePlayerStore = create<PlayerState>()(
        }
      }, 500);

-      // Prefetch next 3
-      get().prefetchUpcoming(idx + 1, newQueue);
    });

    howl.on('end', () => {
@@ -406,23 +370,6 @@ export const usePlayerStore = create<PlayerState>()(
    syncQueueToServer([], null, 0);
  },

-  // Internal: prefetch next N tracks
-  prefetchUpcoming: (fromIndex: number, queue: Track[]) => {
-    const { prefetched } = get();
-    // Unload and clear old prefetches to prevent memory leaks
-    prefetched.forEach((h, id) => {
-      h.unload();
-    });
-    prefetched.clear();
-
-    const toFetch = queue.slice(fromIndex, fromIndex + 3);
-    toFetch.forEach(track => {
-      const url = buildStreamUrl(track.id);
-      const h = new Howl({ src: [url], html5: true, preload: true, autoplay: false });
-      prefetched.set(track.id, h);
-    });
-    set({ prefetched: new Map(prefetched) });
-  },
  // Playlist management
  reorderQueue: (startIndex: number, endIndex: number) => {
    const { queue, queueIndex, currentTrack } = get();
@@ -569,6 +569,7 @@
  display: grid;
  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
  gap: var(--space-3);
+  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  font-weight: 600;