feat: refactoring

.cursor/rules/furumi-node-player-client-components.mdc

@@ -1,49 +0,0 @@
----
-description: Новые React-компоненты — папка kebab-case, TSX + CSS module, index.ts (furumi-node-player/client/src)
-globs: furumi-node-player/client/src/**/*
-alwaysApply: false
----
-
-# Структура новых компонентов (furumi-node-player/client)
-
-**Область:** при добавлении **нового** компонента в `furumi-node-player/client/src/` используйте расположение и файлы ниже.
-
-## Расположение
-
-- Базовая папка: `furumi-node-player/client/src/components/`
-- Для каждого компонента — **отдельная подпапка** с именем в **kebab-case** (например `play-button`, `search-dropdown`).
-
-## Файлы внутри папки компонента
-
-1. **Компонент:** `components/<имя-kebab>/<имя-kebab>.tsx` — реализация компонента; к нему подключён CSS-модуль (`import styles from './<имя-kebab>.module.css'`).
-2. **Стили:** `components/<имя-kebab>/<имя-kebab>.module.css` — модульные стили для этого компонента.
-3. **Баррель:** `components/<имя-kebab>/index.ts` — **реэкспорт всего** из файла компонента: `export * from './<имя-kebab>'`.
-
-Импорт снаружи: `import { MyWidget } from './components/my-widget'` (относительный путь к папке), без указания `index.ts`.
-
-## Пример (`my-widget`)
-
-```
-components/my-widget/
-  my-widget.tsx
-  my-widget.module.css
-  index.ts
-```
-
-```typescript
-// my-widget.tsx
-import styles from './my-widget.module.css'
-
-export function MyWidget() {
-  return <div className={styles.root}>…</div>
-}
-```
-
-```typescript
-// index.ts
-export * from './my-widget'
-```
-
-## Примечание
-
-Существующие файлы-компоненты в корне `components/` (один файл без папки) — наследие; **новые** компоненты добавляйте только по структуре выше.

.github/workflows/docker-publish-agent-dev.yml

@@ -41,7 +41,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: docker/Dockerfile.agent
+          file: Dockerfile.agent
           push: true
           tags: ${{ steps.info.outputs.tags }}
           build-args: |

.github/workflows/docker-publish-agent.yml

@@ -52,7 +52,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: docker/Dockerfile.agent
+          file: Dockerfile.agent
           push: true
           tags: ${{ steps.info.outputs.tags }}
           build-args: |

.github/workflows/docker-publish-node-player-dev.yml

@@ -1,40 +0,0 @@
-name: Publish Node Player Image (dev)
-
-on:
-  push:
-    branches:
-      - DEV
-
-env:
-  REGISTRY: docker.io
-  IMAGE_NAME: ${{ secrets.DOCKERHUB_USERNAME }}/furumi-node-player
-
-jobs:
-  build-and-push-image:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: docker/Dockerfile.node-player
-          push: true
-          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:dev
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

.github/workflows/docker-publish-node-player.yml

@@ -1,57 +0,0 @@
-name: Publish Node Player Image
-
-on:
-  push:
-    branches:
-      - '**'
-      - '!DEV'
-    tags:
-      - 'v*.*.*'
-
-env:
-  REGISTRY: docker.io
-  IMAGE_NAME: ${{ secrets.DOCKERHUB_USERNAME }}/furumi-node-player
-
-jobs:
-  build-and-push-image:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Determine version and tags
-        id: info
-        run: |
-          IMAGE="${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
-          SHORT_SHA="$(echo '${{ github.sha }}' | cut -c1-7)"
-
-          if [[ "${{ github.ref }}" == refs/tags/v* ]]; then
-            TAG="${{ github.ref_name }}"
-            VERSION="${TAG#v}"
-            echo "tags=${IMAGE}:${VERSION},${IMAGE}:latest" >> "$GITHUB_OUTPUT"
-          else
-            echo "tags=${IMAGE}:trunk,${IMAGE}:${SHORT_SHA}" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: docker/Dockerfile.node-player
-          push: true
-          tags: ${{ steps.info.outputs.tags }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

.github/workflows/docker-publish-player-dev.yml

@@ -41,7 +41,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: docker/Dockerfile.web-player
+          file: Dockerfile.web-player
           push: true
           tags: ${{ steps.info.outputs.tags }}
           build-args: |

.github/workflows/docker-publish-player.yml

@@ -52,7 +52,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: docker/Dockerfile.web-player
+          file: Dockerfile.web-player
           push: true
           tags: ${{ steps.info.outputs.tags }}
           build-args: |

.github/workflows/docker-publish.yml

@@ -51,7 +51,6 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: docker/Dockerfile
           push: true
           tags: ${{ steps.info.outputs.tags }}
           build-args: |

.gitignore

@@ -1,5 +1,4 @@
 /target
-/docker/inbox
+/inbox
-/docker/storage
+/storage
 .env
-.DS_Store

Cargo.lock

@@ -2,12 +2,6 @@
 # It is not intended for manual editing.
 version = 4
 
-[[package]]
-name = "adler2"
-version = "2.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
-
 [[package]]
 name = "aho-corasick"
 version = "1.1.4"
@@ -578,15 +572,6 @@ version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "19d374276b40fb8bbdee95aef7c7fa6b5316ec764510eb64b8dd0e2ed0d7e7f5"
 
-[[package]]
-name = "crc32fast"
-version = "1.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9481c1c90cbf2ac953f07c8d4a58aa3945c425b7185c9154d67a65e4230da511"
-dependencies = [
- "cfg-if",
-]
-
 [[package]]
 name = "crossbeam-channel"
 version = "0.5.15"
@@ -984,16 +969,6 @@ version = "0.5.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1d674e81391d1e1ab681a28d99df07927c6d4aa5b027d7da16ba32d1d21ecd99"
 
-[[package]]
-name = "flate2"
-version = "1.1.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "843fba2746e448b37e26a819579957415c8cef339bf08564fe8b7ddbd959573c"
-dependencies = [
- "crc32fast",
- "miniz_oxide",
-]
-
 [[package]]
 name = "flume"
 version = "0.11.1"
@@ -1042,7 +1017,6 @@ dependencies = [
  "chrono",
  "clap",
  "encoding_rs",
- "id3",
  "reqwest 0.12.28",
  "serde",
  "serde_json",
@@ -1140,7 +1114,7 @@ dependencies = [
  "futures-core",
  "futures-util",
  "hmac",
- "jsonwebtoken 10.3.0",
+ "jsonwebtoken",
  "libc",
  "mime_guess",
  "ogg",
@@ -1176,10 +1150,8 @@ dependencies = [
  "anyhow",
  "axum",
  "base64 0.22.1",
- "chrono",
  "clap",
  "hmac",
- "jsonwebtoken 9.3.1",
  "mime_guess",
  "openidconnect",
  "rand 0.8.5",
@@ -1193,7 +1165,6 @@ dependencies = [
  "tokio",
  "tokio-util",
  "tower 0.4.13",
- "tower-http",
  "tracing",
  "tracing-subscriber",
  "urlencoding",
@@ -1777,17 +1748,6 @@ version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d3067d79b975e8844ca9eb072e16b31c3c1c36928edf9c6789548c524d0d954"
 
-[[package]]
-name = "id3"
-version = "1.16.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "965c5e6a62a241f2f673df956ea5f52c27780bc1031855890a551ed9b869e2d1"
-dependencies = [
- "bitflags 2.11.0",
- "byteorder",
- "flate2",
-]
-
 [[package]]
 name = "ident_case"
 version = "1.0.1"
@@ -1904,21 +1864,6 @@ dependencies = [
  "wasm-bindgen",
 ]
 
-[[package]]
-name = "jsonwebtoken"
-version = "9.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a87cc7a48537badeae96744432de36f4be2b4a34a05a5ef32e9dd8a1c169dde"
-dependencies = [
- "base64 0.22.1",
- "js-sys",
- "pem",
- "ring",
- "serde",
- "serde_json",
- "simple_asn1",
-]
-
 [[package]]
 name = "jsonwebtoken"
 version = "10.3.0"
@@ -2076,16 +2021,6 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
 
-[[package]]
-name = "miniz_oxide"
-version = "0.8.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
-dependencies = [
- "adler2",
- "simd-adler32",
-]
-
 [[package]]
 name = "mio"
 version = "1.1.1"
@@ -3477,12 +3412,6 @@ dependencies = [
  "rand_core 0.6.4",
 ]
 
-[[package]]
-name = "simd-adler32"
-version = "0.3.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "703d5c7ef118737c72f1af64ad2f6f8c5e1921f818cdcb97b8fe6fc69bf66214"
-
 [[package]]
 name = "simple_asn1"
 version = "0.6.4"

Dockerfile.agent

@@ -0,0 +1,32 @@
+FROM rust:1.88.0-bookworm AS builder
+
+RUN apt-get update && apt-get install -y \
+    pkg-config \
+    libssl-dev \
+    protobuf-compiler \
+    cmake \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /usr/src/app
+COPY . .
+
+ARG FURUMI_VERSION=dev
+RUN FURUMI_VERSION=${FURUMI_VERSION} cargo build --release --bin furumi-agent
+
+FROM debian:bookworm-slim
+
+RUN apt-get update && apt-get install -y \
+    ca-certificates \
+    libssl-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN useradd -ms /bin/bash appuser
+WORKDIR /home/appuser
+
+COPY --from=builder /usr/src/app/target/release/furumi-agent /usr/local/bin/furumi-agent
+
+USER appuser
+
+EXPOSE 8090
+
+ENTRYPOINT ["furumi-agent"]

Dockerfile.web-player

@@ -0,0 +1,32 @@
+FROM rust:1.88.0-bookworm AS builder
+
+RUN apt-get update && apt-get install -y \
+    pkg-config \
+    libssl-dev \
+    protobuf-compiler \
+    cmake \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /usr/src/app
+COPY . .
+
+ARG FURUMI_VERSION=dev
+RUN FURUMI_VERSION=${FURUMI_VERSION} cargo build --release --bin furumi-web-player
+
+FROM debian:bookworm-slim
+
+RUN apt-get update && apt-get install -y \
+    ca-certificates \
+    libssl-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN useradd -ms /bin/bash appuser
+WORKDIR /home/appuser
+
+COPY --from=builder /usr/src/app/target/release/furumi-web-player /usr/local/bin/furumi-web-player
+
+USER appuser
+
+EXPOSE 8080
+
+ENTRYPOINT ["furumi-web-player"]

docker-compose.yml

@@ -16,8 +16,8 @@ services:
 
   agent:
     build:
-      context: ..
+      context: .
-      dockerfile: docker/Dockerfile.agent
+      dockerfile: Dockerfile.agent
     container_name: furumi-agent
     depends_on:
       db:
@@ -25,12 +25,10 @@ services:
     ports:
       - "8090:8090"
     environment:
-      RUST_LOG: info
       FURUMI_AGENT_DATABASE_URL: "postgres://${POSTGRES_USER:-furumi}:${POSTGRES_PASSWORD:-furumi}@db:5432/${POSTGRES_DB:-furumi}"
       FURUMI_AGENT_INBOX_DIR: "/inbox"
       FURUMI_AGENT_STORAGE_DIR: "/storage"
       FURUMI_AGENT_OLLAMA_URL: "${OLLAMA_URL:-http://host.docker.internal:11434}"
-      FURUMI_AGENT_OLLAMA_MODEL: "${OLLAMA_MODEL:-qwen3:14b}"
       FURUMI_AGENT_OLLAMA_AUTH: "${OLLAMA_AUTH:-CHANGE-ME}"
       FURUMI_PLAYER_BIND: "0.0.0.0:8090"
       FURUMI_AGENT_POLL_INTERVAL_SECS: 5
@@ -43,8 +41,8 @@ services:
 
   web-player:
     build:
-      context: ..
+      context: .
-      dockerfile: docker/Dockerfile.web-player
+      dockerfile: Dockerfile.web-player
     container_name: furumi-web-player
     depends_on:
       db:
@@ -55,11 +53,7 @@ services:
       FURUMI_PLAYER_DATABASE_URL: "postgres://${POSTGRES_USER:-furumi}:${POSTGRES_PASSWORD:-furumi}@db:5432/${POSTGRES_DB:-furumi}"
       FURUMI_PLAYER_STORAGE_DIR: "/storage"
       FURUMI_PLAYER_BIND: "0.0.0.0:8085"
-      FURUMI_PLAYER_OIDC_ISSUER_URL: "${OIDC_ISSUER_URL}"
+      FURUMI_PLAYER_API_KEY: "node-player-api-key"
-      FURUMI_PLAYER_OIDC_CLIENT_ID: "${OIDC_CLIENT_ID}"
-      FURUMI_PLAYER_OIDC_CLIENT_SECRET: "${OIDC_CLIENT_SECRET}"
-      FURUMI_PLAYER_OIDC_REDIRECT_URL: "${OIDC_REDIRECT_URL}"
-      FURUMI_PLAYER_OIDC_SESSION_SECRET: "${OIDC_SESSION_SECRET}"
     volumes:
       - ./storage:/storage
     restart: always

docker/Dockerfile.agent

@@ -1,59 +0,0 @@
-FROM rust:1.88.0-bookworm AS builder
-
-RUN apt-get update && apt-get install -y \
-    pkg-config \
-    libssl-dev \
-    protobuf-compiler \
-    cmake \
-    && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /usr/src/app
-
-# 1. Copy workspace manifests and lock file (changes rarely → cached layer)
-COPY Cargo.toml Cargo.lock ./
-COPY furumi-common/Cargo.toml furumi-common/Cargo.toml
-COPY furumi-server/Cargo.toml furumi-server/Cargo.toml
-COPY furumi-client-core/Cargo.toml furumi-client-core/Cargo.toml
-COPY furumi-mount-linux/Cargo.toml furumi-mount-linux/Cargo.toml
-COPY furumi-mount-macos/Cargo.toml furumi-mount-macos/Cargo.toml
-COPY furumi-agent/Cargo.toml furumi-agent/Cargo.toml
-COPY furumi-web-player/Cargo.toml furumi-web-player/Cargo.toml
-
-# 2. Create dummy sources so cargo can resolve and build dependencies
-RUN mkdir -p furumi-common/src && echo "pub fn _dummy(){}" > furumi-common/src/lib.rs \
-    && mkdir -p furumi-server/src && echo "fn main(){}" > furumi-server/src/main.rs \
-    && mkdir -p furumi-client-core/src && echo "pub fn _dummy(){}" > furumi-client-core/src/lib.rs \
-    && mkdir -p furumi-mount-linux/src && echo "fn main(){}" > furumi-mount-linux/src/main.rs \
-    && mkdir -p furumi-mount-macos/src && echo "fn main(){}" > furumi-mount-macos/src/main.rs \
-    && mkdir -p furumi-agent/src && echo "fn main(){}" > furumi-agent/src/main.rs \
-    && mkdir -p furumi-web-player/src && echo "fn main(){}" > furumi-web-player/src/main.rs
-
-# 3. Build dependencies only (this layer is cached until Cargo.toml/lock change)
-RUN cargo build --release --bin furumi-agent 2>/dev/null || true
-
-# 4. Copy real source code
-COPY . .
-
-# 5. Touch sources to invalidate cargo's fingerprint for our crates (not deps)
-RUN touch furumi-common/src/lib.rs furumi-agent/src/main.rs
-
-ARG FURUMI_VERSION=dev
-RUN FURUMI_VERSION=${FURUMI_VERSION} cargo build --release --bin furumi-agent
-
-FROM debian:bookworm-slim
-
-RUN apt-get update && apt-get install -y \
-    ca-certificates \
-    libssl-dev \
-    && rm -rf /var/lib/apt/lists/*
-
-RUN useradd -ms /bin/bash appuser
-WORKDIR /home/appuser
-
-COPY --from=builder /usr/src/app/target/release/furumi-agent /usr/local/bin/furumi-agent
-
-USER appuser
-
-EXPOSE 8090
-
-ENTRYPOINT ["furumi-agent"]

docker/Dockerfile.node-player

@@ -1,38 +0,0 @@
-FROM node:22-alpine AS build
-
-WORKDIR /app
-
-# 1. Install server dependencies (cached layer)
-COPY furumi-node-player/server/package.json furumi-node-player/server/package-lock.json ./server/
-RUN cd server && npm ci
-
-# 2. Install client dependencies (cached layer)
-COPY furumi-node-player/client/package.json furumi-node-player/client/package-lock.json ./client/
-RUN cd client && npm ci
-
-# 3. Build server
-COPY furumi-node-player/server/ ./server/
-RUN cd server && npm run build
-
-# 4. Build client (VITE_FURUMI_API_URL empty = relative /api on same origin)
-COPY furumi-node-player/client/ ./client/
-RUN cd client && npm run build
-
-FROM node:22-alpine
-
-WORKDIR /app
-
-# Server runtime
-COPY --from=build /app/server/dist ./server/dist
-COPY --from=build /app/server/node_modules ./server/node_modules
-COPY --from=build /app/server/package.json ./server/
-
-# Client static files
-COPY --from=build /app/client/dist ./client/dist
-
-ENV NODE_ENV=production
-ENV PORT=3001
-
-EXPOSE 3001
-
-CMD ["node", "server/dist/index.js"]

docker/Dockerfile.web-player

@@ -1,59 +0,0 @@
-FROM rust:1.88.0-bookworm AS builder
-
-RUN apt-get update && apt-get install -y \
-    pkg-config \
-    libssl-dev \
-    protobuf-compiler \
-    cmake \
-    && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /usr/src/app
-
-# 1. Copy workspace manifests and lock file (changes rarely → cached layer)
-COPY Cargo.toml Cargo.lock ./
-COPY furumi-common/Cargo.toml furumi-common/Cargo.toml
-COPY furumi-server/Cargo.toml furumi-server/Cargo.toml
-COPY furumi-client-core/Cargo.toml furumi-client-core/Cargo.toml
-COPY furumi-mount-linux/Cargo.toml furumi-mount-linux/Cargo.toml
-COPY furumi-mount-macos/Cargo.toml furumi-mount-macos/Cargo.toml
-COPY furumi-agent/Cargo.toml furumi-agent/Cargo.toml
-COPY furumi-web-player/Cargo.toml furumi-web-player/Cargo.toml
-
-# 2. Create dummy sources so cargo can resolve and build dependencies
-RUN mkdir -p furumi-common/src && echo "pub fn _dummy(){}" > furumi-common/src/lib.rs \
-    && mkdir -p furumi-server/src && echo "fn main(){}" > furumi-server/src/main.rs \
-    && mkdir -p furumi-client-core/src && echo "pub fn _dummy(){}" > furumi-client-core/src/lib.rs \
-    && mkdir -p furumi-mount-linux/src && echo "fn main(){}" > furumi-mount-linux/src/main.rs \
-    && mkdir -p furumi-mount-macos/src && echo "fn main(){}" > furumi-mount-macos/src/main.rs \
-    && mkdir -p furumi-agent/src && echo "fn main(){}" > furumi-agent/src/main.rs \
-    && mkdir -p furumi-web-player/src && echo "fn main(){}" > furumi-web-player/src/main.rs
-
-# 3. Build dependencies only (this layer is cached until Cargo.toml/lock change)
-RUN cargo build --release --bin furumi-web-player 2>/dev/null || true
-
-# 4. Copy real source code
-COPY . .
-
-# 5. Touch sources to invalidate cargo's fingerprint for our crates (not deps)
-RUN touch furumi-common/src/lib.rs furumi-web-player/src/main.rs
-
-ARG FURUMI_VERSION=dev
-RUN FURUMI_VERSION=${FURUMI_VERSION} cargo build --release --bin furumi-web-player
-
-FROM debian:bookworm-slim
-
-RUN apt-get update && apt-get install -y \
-    ca-certificates \
-    libssl-dev \
-    && rm -rf /var/lib/apt/lists/*
-
-RUN useradd -ms /bin/bash appuser
-WORKDIR /home/appuser
-
-COPY --from=builder /usr/src/app/target/release/furumi-web-player /usr/local/bin/furumi-web-player
-
-USER appuser
-
-EXPOSE 8080
-
-ENTRYPOINT ["furumi-web-player"]

furumi-agent/Cargo.toml

@@ -14,7 +14,6 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 sqlx = { version = "0.8", features = ["runtime-tokio-rustls", "postgres", "chrono", "uuid", "migrate"] }
 symphonia = { version = "0.5", default-features = false, features = ["mp3", "aac", "flac", "vorbis", "wav", "alac", "adpcm", "pcm", "mpa", "isomp4", "ogg", "aiff", "mkv"] }
-id3 = "1"
 thiserror = "2.0"
 tokio = { version = "1.50", features = ["full"] }
 tracing = "0.1"

furumi-agent/migrations/0005_users_and_play_events.sql

@@ -1,20 +0,0 @@
-CREATE TABLE users (
-    id           TEXT PRIMARY KEY,
-    username     TEXT NOT NULL,
-    display_name TEXT,
-    email        TEXT,
-    created_at   TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    last_seen_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
-CREATE TABLE play_events (
-    id        BIGSERIAL PRIMARY KEY,
-    user_id   TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-    track_id  BIGINT NOT NULL REFERENCES tracks(id) ON DELETE CASCADE,
-    played_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
-CREATE INDEX idx_play_events_user_id ON play_events(user_id);
-CREATE INDEX idx_play_events_track_id ON play_events(track_id);
-CREATE INDEX idx_play_events_user_track ON play_events(user_id, track_id);
-CREATE INDEX idx_play_events_played_at ON play_events(played_at DESC);

furumi-agent/prompts/merge.txt

@@ -4,14 +4,14 @@ You are a music library artist merge assistant. You will receive a list of artis
 
 You will receive a structured list like:
 
-### Artist ID 42: "deep purple"
+### Artist ID 42: "pink floyd"
-  Album ID 10: "machine head" (1972)
+  Album ID 10: "the wall" (1979)
-    - 01. "Highway Star" [track_id=100]
+    - 01. "In the Flesh?" [track_id=100]
-    - 02. "Maybe I'm a Leo" [track_id=101]
+    - 02. "The Thin Ice" [track_id=101]
 
-### Artist ID 43: "Deep Purple"
+### Artist ID 43: "Pink Floyd"
-  Album ID 11: "Burn" (1974)
+  Album ID 11: "Wish You Were Here" (1975)
-    - 01. "Burn" [track_id=200]
+    - 01. "Shine On You Crazy Diamond (Parts I-V)" [track_id=200]
 
 ## Your task
 
@@ -20,7 +20,7 @@ Determine if the artists are duplicates and produce a merge plan.
 ## Rules
 
 ### 1. Canonical artist name
-- Use correct capitalization and canonical spelling (e.g., "deep purple" → "Deep Purple", "AC DC" → "AC/DC").
+- Use correct capitalization and canonical spelling (e.g., "pink floyd" → "Pink Floyd", "AC DC" → "AC/DC").
 - If the database already contains an artist with a well-formed name, prefer that exact form.
 - If one artist has clearly more tracks or albums, their name spelling may be more authoritative.
 - Fix obvious typos or casing errors.
@@ -54,7 +54,7 @@ Determine if the artists are duplicates and produce a merge plan.
 
 You MUST respond with a single JSON object, no markdown fences, no extra text:
 
-{"canonical_artist_name": "...", "winner_artist_id": 42, "album_mappings": [{"source_album_id": 10, "canonical_name": "Machine Head", "merge_into_album_id": null}, {"source_album_id": 11, "canonical_name": "Burn", "merge_into_album_id": null}], "notes": "..."}
+{"canonical_artist_name": "...", "winner_artist_id": 42, "album_mappings": [{"source_album_id": 10, "canonical_name": "The Wall", "merge_into_album_id": null}, {"source_album_id": 11, "canonical_name": "Wish You Were Here", "merge_into_album_id": null}], "notes": "..."}
 
 - `canonical_artist_name`: the single correct name for this artist after merging.
 - `winner_artist_id`: the integer ID of the artist whose record survives (must be one of the IDs provided).

furumi-agent/prompts/normalize.txt

@@ -3,10 +3,10 @@ You are a music metadata normalization assistant. Your job is to take raw metada
 ## Rules
 
 1. **Artist names** must use correct capitalization and canonical spelling. Examples:
-   - "deep purple" → "Deep Purple"
+   - "pink floyd" → "Pink Floyd"
    - "AC DC" → "AC/DC"
-   - "guns n roses" → "Guns N' Roses"
+   - "Guns n roses" → "Guns N' Roses"
-   - "led zepplin" → "Led Zeppelin" (fix common misspellings)
+   - "Led zepplin" → "Led Zeppelin" (fix common misspellings)
    - "саша скул" → "Саша Скул" (fix capitalization, keep the language as-is)
    - If the database already contains a matching artist (same name in any case or transliteration), always use the existing canonical name exactly. For example, if the DB has "Саша Скул" and the file says "саша скул" or "Sasha Skul", use "Саша Скул".
    - **Compound artist fields**: When the artist field or path contains multiple artist names joined by "и", "and", "&", "/", ",", "x", or "vs", you MUST split them. The "artist" field must contain ONLY ONE primary artist. All others go into "featured_artists". If one of the names already exists in the database, prefer that one as the primary artist.
@@ -43,12 +43,12 @@ You are a music metadata normalization assistant. Your job is to take raw metada
    - Preserve original language for non-English albums.
    - If the database already contains a matching album under the same artist, use the existing name exactly.
    - Do not alter the creative content of album names (same principle as track titles).
-   - **Remastered editions**: A remastered release is a separate album entity, even if it shares the same title and tracks as the original. If the tags or path indicate a remaster (e.g., "Remastered", "Remaster", "REMASTERED" anywhere in tags, filename, or path), append " (Remastered)" to the album name if not already present, and use the year of the remaster release (not the original). Example: original album "Paranoid" (1970) remastered in 2009 → album: "Paranoid (Remastered)", year: 2009.
+   - **Remastered editions**: A remastered release is a separate album entity, even if it shares the same title and tracks as the original. If the tags or path indicate a remaster (e.g., "Remastered", "Remaster", "REMASTERED" anywhere in tags, filename, or path), append " (Remastered)" to the album name if not already present, and use the year of the remaster release (not the original). Example: original album "The Wall" (1979) remastered in 2011 → album: "The Wall (Remastered)", year: 2011.
 
 4. **Track titles** must use correct capitalization, but their content must be preserved exactly.
    - Use title case for English titles.
    - Preserve original language for non-English titles.
-   - Remove leading track numbers if present (e.g., "01 - Smoke on the Water" → "Smoke on the Water").
+   - Remove leading track numbers if present (e.g., "01 - Have a Cigar" → "Have a Cigar").
    - **NEVER remove, add, or alter words, numbers, suffixes, punctuation marks, or special characters in titles.** Your job is to fix capitalization and encoding, not to edit the creative content. If a title contains unusual punctuation, numbers, apostrophes, or symbols — they are intentional and must be kept as-is.
    - If all tracks in the same album follow a naming pattern (e.g., numbered names like "Part 1", "Part 2"), preserve that pattern consistently. Do not simplify or truncate individual track names.
 
@@ -64,7 +64,7 @@ You are a music metadata normalization assistant. Your job is to take raw metada
 
 10. **Consistency**: When the database already contains entries for an artist or album, your output MUST match the existing canonical names. Do not introduce new variations.
 
-11. **Confidence**: MUST be a decimal number between 0.0 and 1.0 (e.g., 0.95, 0.7, 0.3). NEVER use words like "high", "medium", "low" — only a numeric float value.
+11. **Confidence**: Rate your confidence from 0.0 to 1.0.
    - 1.0: All fields are clear and unambiguous.
    - 0.8+: Minor inferences made (e.g., year from path), but high certainty.
    - 0.5-0.8: Some guesswork involved, human review recommended.

furumi-agent/src/db.rs

@@ -334,31 +334,18 @@ pub async fn approve_and_finalize(
         .fetch_one(pool)
         .await?;
 
-    // Check if track already exists by file_hash (re-approval of same file)
+    // Check if track already exists (e.g. previously approved but pending not cleaned up)
     let existing: Option<(i64,)> = sqlx::query_as("SELECT id FROM tracks WHERE file_hash = $1")
         .bind(&pt.file_hash)
         .fetch_optional(pool)
         .await?;
 
     if let Some((track_id,)) = existing {
+        // Already finalized — just mark pending as approved
         update_pending_status(pool, pending_id, "approved", None).await?;
         return Ok(track_id);
     }
 
-    // Check if track already exists by storage_path (Merged: different quality file landed
-    // at the same destination, source was deleted — don't create a phantom duplicate)
-    let existing_path: Option<(i64,)> = sqlx::query_as(
-        "SELECT id FROM tracks WHERE storage_path = $1 AND NOT hidden"
-    )
-    .bind(storage_path)
-    .fetch_optional(pool)
-    .await?;
-
-    if let Some((track_id,)) = existing_path {
-        update_pending_status(pool, pending_id, "merged", None).await?;
-        return Ok(track_id);
-    }
-
     let artist_name = pt.norm_artist.as_deref().unwrap_or("Unknown Artist");
     let artist_id = upsert_artist(pool, artist_name).await?;
 
@@ -850,12 +837,6 @@ pub struct AlbumTrackRow {
     pub genre: Option<String>,
 }
 
-pub async fn set_album_tracks_genre(pool: &PgPool, album_id: i64, genre: &str) -> Result<(), sqlx::Error> {
-    sqlx::query("UPDATE tracks SET genre = $2 WHERE album_id = $1")
-        .bind(album_id).bind(genre).execute(pool).await?;
-    Ok(())
-}
-
 pub async fn get_album_details(pool: &PgPool, id: i64) -> Result<Option<AlbumDetails>, sqlx::Error> {
     let row: Option<(i64, String, Option<i32>, i64, String)> = sqlx::query_as(
         "SELECT a.id, a.name, a.year, ar.id, ar.name FROM albums a JOIN artists ar ON ar.id=a.artist_id WHERE a.id=$1"
@@ -892,14 +873,6 @@ pub async fn get_album_cover(pool: &PgPool, album_id: i64) -> Result<Option<(Str
     Ok(row)
 }
 
-/// Returns the storage_path of the first track in an album (for embedded cover fallback).
-pub async fn get_album_first_track_path(pool: &PgPool, album_id: i64) -> Result<Option<String>, sqlx::Error> {
-    let row: Option<(String,)> = sqlx::query_as(
-        "SELECT storage_path FROM tracks WHERE album_id=$1 ORDER BY track_number NULLS LAST, title LIMIT 1"
-    ).bind(album_id).fetch_optional(pool).await?;
-    Ok(row.map(|(p,)| p))
-}
-
 pub async fn get_artist_by_id(pool: &PgPool, id: i64) -> Result<Option<Artist>, sqlx::Error> {
     sqlx::query_as::<_, Artist>("SELECT id, name, hidden FROM artists WHERE id=$1")
         .bind(id).fetch_optional(pool).await

furumi-agent/src/ingest/metadata.rs

@@ -19,25 +19,9 @@ pub struct RawMetadata {
     pub duration_secs: Option<f64>,
 }
 
-/// Extract metadata from an audio file.
+/// Extract metadata from an audio file using Symphonia.
-/// For MP3, falls back to the `id3` crate when Symphonia cannot probe the file
-/// (e.g., ID3 tag with large embedded cover art exceeds Symphonia's 1 MB probe limit).
 /// Must be called from a blocking context (spawn_blocking).
 pub fn extract(path: &Path) -> anyhow::Result<RawMetadata> {
-    match extract_via_symphonia(path) {
-        Ok(meta) => return Ok(meta),
-        Err(e) => {
-            let is_mp3 = path.extension().and_then(|e| e.to_str()).map(|e| e.eq_ignore_ascii_case("mp3")).unwrap_or(false);
-            if is_mp3 {
-                tracing::debug!(error = %e, "Symphonia failed on MP3, falling back to id3 crate");
-                return extract_mp3_via_id3(path);
-            }
-            return Err(e);
-        }
-    }
-}
-
-fn extract_via_symphonia(path: &Path) -> anyhow::Result<RawMetadata> {
     let file = std::fs::File::open(path)?;
     let mss = MediaSourceStream::new(Box::new(file), Default::default());
 
@@ -82,25 +66,6 @@ fn extract_via_symphonia(path: &Path) -> anyhow::Result<RawMetadata> {
     Ok(meta)
 }
 
-/// Read MP3 tags via the `id3` crate. Duration is not available this way.
-fn extract_mp3_via_id3(path: &Path) -> anyhow::Result<RawMetadata> {
-    use id3::TagLike;
-
-    let tag = id3::Tag::read_from_path(path)
-        .map_err(|e| anyhow::anyhow!("id3 read failed: {}", e))?;
-
-    let mut meta = RawMetadata::default();
-    meta.title = tag.title().map(|s| fix_encoding(s.to_owned()));
-    meta.artist = tag.artist().map(|s| fix_encoding(s.to_owned()));
-    meta.album = tag.album().map(|s| fix_encoding(s.to_owned()));
-    meta.year = tag.year().and_then(|y| u32::try_from(y).ok());
-    meta.track_number = tag.track();
-    meta.genre = tag.genre().map(|s: &str| fix_encoding(s.to_owned()));
-    // duration_secs remains None — acceptable for large-cover files
-
-    Ok(meta)
-}
-
 fn extract_tags(tags: &[symphonia::core::meta::Tag], meta: &mut RawMetadata) {
     for tag in tags {
         let value = fix_encoding(tag.value.to_string());

furumi-agent/src/ingest/mod.rs

@@ -188,20 +188,8 @@ async fn reprocess_pending(state: &Arc<AppState>) -> anyhow::Result<usize> {
                             }
                         }
                     } else {
-                        // Source file is gone — check if already in library by hash
+                        tracing::error!(id = %pt.id, "Source file missing: {:?}", source);
-                        let in_library: (bool,) = sqlx::query_as(
+                        db::update_pending_status(&state.pool, pt.id, "error", Some("Source file missing")).await?;
-                            "SELECT EXISTS(SELECT 1 FROM tracks WHERE file_hash = $1)"
-                        )
-                        .bind(&pt.file_hash)
-                        .fetch_one(&state.pool).await.unwrap_or((false,));
-
-                        if in_library.0 {
-                            tracing::info!(id = %pt.id, "Source missing but track already in library — merging");
-                            db::update_pending_status(&state.pool, pt.id, "merged", None).await?;
-                        } else {
-                            tracing::error!(id = %pt.id, "Source file missing: {:?}", source);
-                            db::update_pending_status(&state.pool, pt.id, "error", Some("Source file missing")).await?;
-                        }
                         continue;
                     };
 

furumi-agent/src/ingest/normalize.rs

@@ -25,37 +25,16 @@ pub async fn normalize(
 ) -> anyhow::Result<NormalizedFields> {
     let user_message = build_user_message(raw, hints, similar_artists, similar_albums, folder_ctx);
 
-    let schema = normalize_schema();
     let response = call_ollama(
         &state.config.ollama_url,
         &state.config.ollama_model,
         &state.system_prompt,
         &user_message,
         state.config.ollama_auth.as_deref(),
-        0.5,
-        512,
-        Some(("normalized_metadata", schema.clone())),
     )
     .await?;
 
-    match parse_response(&response) {
+    parse_response(&response)
-        Ok(fields) => Ok(fields),
-        Err(e) => {
-            tracing::warn!(error = %e, "LLM parse failed, retrying with higher frequency_penalty");
-            let response2 = call_ollama(
-                &state.config.ollama_url,
-                &state.config.ollama_model,
-                &state.system_prompt,
-                &user_message,
-                state.config.ollama_auth.as_deref(),
-                1.5,
-                512,
-                Some(("normalized_metadata", schema)),
-            )
-            .await?;
-            parse_response(&response2)
-        }
-    }
 }
 
 fn build_user_message(
@@ -134,49 +113,32 @@ fn build_user_message(
 }
 
 #[derive(Serialize)]
-struct ChatRequest {
+struct OllamaRequest {
     model: String,
-    messages: Vec<ChatMessage>,
+    messages: Vec<OllamaMessage>,
-    #[serde(skip_serializing_if = "Option::is_none")]
+    format: String,
-    response_format: Option<ChatResponseFormat>,
     stream: bool,
-    temperature: f64,
+    options: OllamaOptions,
-    max_tokens: u32,
-    frequency_penalty: f64,
 }
 
 #[derive(Serialize)]
-struct ChatMessage {
+struct OllamaMessage {
     role: String,
     content: String,
 }
 
 #[derive(Serialize)]
-struct ChatResponseFormat {
+struct OllamaOptions {
-    #[serde(rename = "type")]
+    temperature: f64,
-    kind: String,
-    json_schema: JsonSchemaWrapper,
-}
-
-#[derive(Serialize)]
-struct JsonSchemaWrapper {
-    name: String,
-    strict: bool,
-    schema: serde_json::Value,
 }
 
 #[derive(Deserialize)]
-struct ChatResponse {
+struct OllamaResponse {
-    choices: Vec<ChatChoice>,
+    message: OllamaResponseMessage,
 }
 
 #[derive(Deserialize)]
-struct ChatChoice {
+struct OllamaResponseMessage {
-    message: ChatResponseMessage,
-}
-
-#[derive(Deserialize)]
-struct ChatResponseMessage {
     content: String,
 }
 
@@ -186,40 +148,30 @@ pub async fn call_ollama(
     system_prompt: &str,
     user_message: &str,
     auth: Option<&str>,
-    frequency_penalty: f64,
-    max_tokens: u32,
-    schema: Option<(&str, serde_json::Value)>,
 ) -> anyhow::Result<String> {
     let client = reqwest::Client::builder()
         .timeout(std::time::Duration::from_secs(120))
         .build()?;
 
-    let response_format = schema.map(|(name, schema)| ChatResponseFormat {
+    let request = OllamaRequest {
-        kind: "json_schema".to_owned(),
-        json_schema: JsonSchemaWrapper { name: name.to_owned(), strict: true, schema },
-    });
-
-    let request = ChatRequest {
         model: model.to_owned(),
         messages: vec![
-            ChatMessage {
+            OllamaMessage {
                 role: "system".to_owned(),
                 content: system_prompt.to_owned(),
             },
-            ChatMessage {
+            OllamaMessage {
                 role: "user".to_owned(),
                 content: user_message.to_owned(),
             },
         ],
-        response_format,
+        format: "json".to_owned(),
         stream: false,
-        temperature: 0.1,
+        options: OllamaOptions { temperature: 0.1 },
-        max_tokens,
-        frequency_penalty,
     };
 
-    let url = format!("{}/v1/chat/completions", base_url.trim_end_matches('/'));
+    let url = format!("{}/api/chat", base_url.trim_end_matches('/'));
-    tracing::info!(%url, model, prompt_len = user_message.len(), "Calling LLM API...");
+    tracing::info!(%url, model, prompt_len = user_message.len(), "Calling Ollama API...");
 
     let start = std::time::Instant::now();
     let mut req = client.post(&url).json(&request);
@@ -232,45 +184,18 @@ pub async fn call_ollama(
     if !resp.status().is_success() {
         let status = resp.status();
         let body = resp.text().await.unwrap_or_default();
-        tracing::error!(%status, body = &body[..body.len().min(500)], "LLM API error");
+        tracing::error!(%status, body = &body[..body.len().min(500)], "Ollama API error");
-        anyhow::bail!("LLM returned {}: {}", status, body);
+        anyhow::bail!("Ollama returned {}: {}", status, body);
     }
 
-    let chat_resp: ChatResponse = resp.json().await?;
+    let ollama_resp: OllamaResponse = resp.json().await?;
-    let content = chat_resp
-        .choices
-        .into_iter()
-        .next()
-        .ok_or_else(|| anyhow::anyhow!("LLM returned empty choices"))?
-        .message
-        .content;
     tracing::info!(
         elapsed_ms = elapsed.as_millis() as u64,
-        response_len = content.len(),
+        response_len = ollama_resp.message.content.len(),
-        "LLM response received"
+        "Ollama response received"
     );
-    tracing::debug!(raw_response = %content, "LLM raw output");
+    tracing::debug!(raw_response = %ollama_resp.message.content, "LLM raw output");
-    Ok(content)
+    Ok(ollama_resp.message.content)
-}
-
-fn normalize_schema() -> serde_json::Value {
-    serde_json::json!({
-        "type": "object",
-        "properties": {
-            "artist":           { "type": ["string", "null"] },
-            "album":            { "type": ["string", "null"] },
-            "title":            { "type": ["string", "null"] },
-            "year":             { "type": ["integer", "null"] },
-            "track_number":     { "type": ["integer", "null"] },
-            "genre":            { "type": ["string", "null"] },
-            "featured_artists": { "type": "array", "items": { "type": "string" } },
-            "release_kind":     { "type": ["string", "null"] },
-            "confidence":       { "type": ["number", "null"] },
-            "notes":            { "type": ["string", "null"] }
-        },
-        "required": ["artist", "album", "title", "year", "track_number", "genre", "featured_artists", "release_kind", "confidence", "notes"],
-        "additionalProperties": false
-    })
 }
 
 /// Parse the LLM JSON response into NormalizedFields.
@@ -297,7 +222,6 @@ fn parse_response(response: &str) -> anyhow::Result<NormalizedFields> {
         genre: Option<String>,
         #[serde(default)]
         featured_artists: Vec<String>,
-        #[serde(rename = "release_kind")]
         release_type: Option<String>,
         confidence: Option<f64>,
         notes: Option<String>,

furumi-agent/src/merge.rs

@@ -35,39 +35,12 @@ pub async fn propose_merge(state: &Arc<AppState>, merge_id: Uuid) -> anyhow::Res
 
     let user_message = build_merge_message(&artists_data);
 
-    let schema = serde_json::json!({
-        "type": "object",
-        "properties": {
-            "canonical_artist_name": { "type": "string" },
-            "winner_artist_id":      { "type": "integer" },
-            "album_mappings": {
-                "type": "array",
-                "items": {
-                    "type": "object",
-                    "properties": {
-                        "source_album_id":     { "type": "integer" },
-                        "canonical_name":      { "type": "string" },
-                        "merge_into_album_id": { "type": ["integer", "null"] }
-                    },
-                    "required": ["source_album_id", "canonical_name", "merge_into_album_id"],
-                    "additionalProperties": false
-                }
-            },
-            "notes": { "type": "string" }
-        },
-        "required": ["canonical_artist_name", "winner_artist_id", "album_mappings", "notes"],
-        "additionalProperties": false
-    });
-
     let response = call_ollama(
         &state.config.ollama_url,
         &state.config.ollama_model,
         &state.merge_prompt,
         &user_message,
         state.config.ollama_auth.as_deref(),
-        0.5,
-        4096,
-        Some(("artist_merge", schema)),
     ).await?;
 
     let proposal = parse_merge_response(&response)?;

furumi-agent/src/web/admin.html

@@ -295,14 +295,13 @@ function renderFilterBar(s) {
   `;
 }
 
-function showTab(tab, btn, noHash) {
+function showTab(tab, btn) {
   currentTab = tab;
   document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
   btn.classList.add('active');
   clearSelection();
   const pag = document.getElementById('lib-pagination');
   if (pag) pag.style.display = 'none';
-  if (!noHash) location.hash = tab;
   if (tab === 'queue') { loadQueue(); loadStats(); }
   else if (tab === 'artists') { libPage.artists = 0; renderLibSearchBar([{ label: 'Artist', key: 'q', tab: 'artists', value: libSearch.artists.q, placeholder: 'search artist…' }], ''); loadLibArtists(); }
   else if (tab === 'tracks')  { libPage.tracks = 0; renderLibSearchBar([{ label: 'Title', key: 'q', tab: 'tracks', value: libSearch.tracks.q, placeholder: 'search title…' }, { label: 'Artist', key: 'artist', tab: 'tracks', value: libSearch.tracks.artist, placeholder: 'search artist…' }, { label: 'Album', key: 'album', tab: 'tracks', value: libSearch.tracks.album, placeholder: 'search album…' }], ''); loadLibTracks(); }
@@ -313,11 +312,7 @@ function showTab(tab, btn, noHash) {
 // --- Queue ---
 async function loadQueue(status, keepSelection) {
   currentFilter = status;
-  if (!keepSelection) {
+  if (!keepSelection) { clearSelection(); queueOffset = 0; }
-    clearSelection();
-    queueOffset = 0;
-    location.hash = status ? 'queue/' + status : 'queue';
-  }
   const qs = `?${status ? 'status='+status+'&' : ''}limit=${queuePageSize+1}&offset=${queueOffset}`;
   const raw = await api(`/queue${qs}`) || [];
   const hasMore = raw.length > queuePageSize;
@@ -364,9 +359,6 @@ function renderQueue(hasMore) {
     const artist = it.norm_artist || it.raw_artist || '-';
     const title = it.norm_title || it.raw_title || '-';
     const album = it.norm_album || it.raw_album || '-';
-    const albumCoverUrl = (it.norm_album || it.raw_album) && (it.norm_artist || it.raw_artist)
-      ? `${API}/albums/cover-by-name?artist=${encodeURIComponent(it.norm_artist||it.raw_artist||'')}&name=${encodeURIComponent(it.norm_album||it.raw_album||'')}`
-      : null;
     const year = it.norm_year || it.raw_year || '';
     const tnum = it.norm_track_number || it.raw_track_number || '';
     const canApprove = it.status === 'review';
@@ -376,7 +368,7 @@ function renderQueue(hasMore) {
       <td><span class="status status-${it.status}">${it.status}</span></td>
       <td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_artist')" title="${esc(it.raw_artist||'')}">${esc(artist)}</td>
       <td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_title')" title="${esc(it.raw_title||'')}">${esc(title)}</td>
-      <td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_album')" title="${esc(it.raw_album||'')}"><span style="display:inline-flex;align-items:center;gap:4px">${albumCoverUrl?`<img src="${albumCoverUrl}" style="width:20px;height:20px;border-radius:2px;object-fit:cover;flex-shrink:0" onerror="this.style.display='none'">`:''}${esc(album)}</span></td>
+      <td class="editable" ondblclick="inlineEdit(this,'${it.id}','norm_album')" title="${esc(it.raw_album||'')}">${esc(album)}</td>
       <td>${year}</td>
       <td>${tnum}</td>
       <td>${conf}</td>
@@ -1171,37 +1163,6 @@ function openTrackEditForArtist(trackId, artistId) {
   openTrackEdit(trackId, () => openArtistForm(artistId));
 }
 
-// --- Album inline meta edit (from artist form) ---
-async function saveAlbumMeta(albumId, artistId) {
-  const name = document.getElementById(`alb-name-${albumId}`)?.value?.trim();
-  const yearRaw = document.getElementById(`alb-year-${albumId}`)?.value;
-  if (!name) return;
-  await api(`/albums/${albumId}/edit`, {
-    method: 'PUT',
-    headers: {'Content-Type':'application/json'},
-    body: JSON.stringify({ name, year: parseInt(yearRaw) || null, artist_id: artistId }),
-  });
-  // Update header display in place
-  const block = document.getElementById(`album-block-${albumId}`);
-  if (block) {
-    const nameSpan = block.querySelector('.ab-name');
-    if (nameSpan) nameSpan.textContent = name;
-    const yearSpan = block.querySelector('.ab-year');
-    if (yearSpan) yearSpan.textContent = yearRaw || '';
-  }
-}
-
-async function applyAlbumGenre(albumId) {
-  const genre = document.getElementById(`alb-genre-${albumId}`)?.value?.trim();
-  if (!genre) return;
-  await api(`/albums/${albumId}/genre`, {
-    method: 'PUT',
-    headers: {'Content-Type':'application/json'},
-    body: JSON.stringify({ genre }),
-  });
-  document.getElementById(`alb-genre-${albumId}`).value = '';
-}
-
 // --- Helpers ---
 function openModal() { document.getElementById('modalOverlay').classList.add('visible'); }
 function closeModal() { document.getElementById('modalOverlay').classList.remove('visible'); }
@@ -1534,20 +1495,7 @@ async function openArtistForm(id) {
         <button class="btn btn-edit" style="font-size:10px;padding:2px 6px" onclick="openTrackEditForArtist(${t.id},${id})">Edit</button>
         <button data-hidden="${t.hidden}" onclick="toggleTrackHidden(${t.id},this)">${t.hidden?'Show':'Hide'}</button>
       </div>`).join('');
-    const albumMeta = `<div style="padding:8px 10px;border-bottom:1px solid var(--border);background:var(--bg-panel)">
+    body.innerHTML = tracks;
-      <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
-        <input id="alb-name-${alb.id}" value="${esc(alb.name)}" placeholder="Album name"
-               style="flex:2;min-width:140px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:11px;font-family:inherit">
-        <input id="alb-year-${alb.id}" type="number" value="${alb.year??''}" placeholder="Year"
-               style="width:70px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:11px;font-family:inherit">
-        <button class="btn btn-primary" style="font-size:10px;padding:3px 10px" onclick="saveAlbumMeta(${alb.id},${id})">Save</button>
-        <span style="color:var(--border);user-select:none">|</span>
-        <input id="alb-genre-${alb.id}" placeholder="Apply genre to all tracks…"
-               style="flex:1;min-width:130px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:11px;font-family:inherit">
-        <button class="btn btn-edit" style="font-size:10px;padding:3px 10px" onclick="applyAlbumGenre(${alb.id})">Apply</button>
-      </div>
-    </div>`;
-    body.innerHTML = albumMeta + tracks;
     if (openAlbumBlocks.has(alb.id)) body.classList.add('open');
   }
 
@@ -1638,82 +1586,9 @@ async function removeAppearance(artistId, trackId, btn) {
   btn.closest('.appearance-row').remove();
 }
 
-// --- Cover preview ---
-(function() {
-  const box = document.createElement('div');
-  box.id = 'cover-preview';
-  box.style.cssText = [
-    'display:none', 'position:fixed', 'z-index:9999', 'pointer-events:none',
-    'border-radius:10px', 'overflow:hidden',
-    'box-shadow:0 12px 40px rgba(0,0,0,0.85)',
-    'border:1px solid rgba(255,255,255,0.08)',
-    'background:#0a0c12', 'transition:opacity 0.1s',
-  ].join(';');
-  const img = document.createElement('img');
-  img.style.cssText = 'display:block;width:280px;height:280px;object-fit:contain';
-  box.appendChild(img);
-  document.body.appendChild(box);
-
-  let showTimer = null;
-
-  function isCoverImg(el) {
-    return el && el.tagName === 'IMG' && el.src && el.src.includes('/cover');
-  }
-
-  function place(e) {
-    const margin = 16, pw = 280, ph = 280;
-    const vw = window.innerWidth, vh = window.innerHeight;
-    let x = e.clientX + margin, y = e.clientY + margin;
-    if (x + pw > vw - 8) x = e.clientX - pw - margin;
-    if (y + ph > vh - 8) y = e.clientY - ph - margin;
-    box.style.left = x + 'px';
-    box.style.top  = y + 'px';
-  }
-
-  document.addEventListener('mouseover', e => {
-    if (!isCoverImg(e.target)) return;
-    clearTimeout(showTimer);
-    showTimer = setTimeout(() => {
-      img.src = e.target.src;
-      box.style.display = 'block';
-      place(e);
-    }, 120);
-  });
-
-  document.addEventListener('mousemove', e => {
-    if (box.style.display === 'none') return;
-    if (!isCoverImg(e.target)) { clearTimeout(showTimer); box.style.display = 'none'; return; }
-    place(e);
-  });
-
-  document.addEventListener('mouseout', e => {
-    if (!isCoverImg(e.target)) return;
-    clearTimeout(showTimer);
-    box.style.display = 'none';
-  });
-})();
-
 // --- Init ---
-(function restoreFromHash() {
-  const hash = location.hash.slice(1); // strip #
-  if (!hash) return;
-  const [tab, filter] = hash.split('/');
-  const validTabs = ['queue','tracks','albums','artists','merges'];
-  if (!validTabs.includes(tab)) return;
-  const btn = Array.from(document.querySelectorAll('nav button'))
-    .find(b => (b.getAttribute('onclick') || '').includes(`'${tab}'`));
-  if (!btn) return;
-  // Switch tab without overwriting the hash
-  showTab(tab, btn, true);
-  // For queue, also restore the filter
-  if (tab === 'queue' && filter) {
-    currentFilter = filter;
-    loadQueue(filter);
-  }
-})();
-
 loadStats();
-if (currentTab === 'queue' && !location.hash.slice(1)) loadQueue();
+loadQueue();
 setInterval(loadStats, 5000);
 // Auto-refresh queue when on queue tab
 setInterval(() => { if (currentTab === 'queue') loadQueue(currentFilter, true); }, 5000);

furumi-agent/src/web/api.rs

@@ -528,20 +528,6 @@ pub async fn update_album_full(
     }
 }
 
-#[derive(Deserialize)]
-pub struct SetGenreBody { pub genre: String }
-
-pub async fn set_album_tracks_genre(
-    State(state): State<S>,
-    Path(id): Path<i64>,
-    Json(body): Json<SetGenreBody>,
-) -> impl IntoResponse {
-    match db::set_album_tracks_genre(&state.pool, id, &body.genre).await {
-        Ok(()) => StatusCode::NO_CONTENT.into_response(),
-        Err(e) => error_response(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
-    }
-}
-
 #[derive(Deserialize)]
 pub struct ReorderBody {
     pub orders: Vec<(i64, i32)>,
@@ -558,82 +544,19 @@ pub async fn reorder_album_tracks(
     }
 }
 
-/// Cover by artist+album name — used for queue items that may not have an album_id yet.
-#[derive(Deserialize)]
-pub struct CoverByNameQuery {
-    #[serde(default)] pub artist: String,
-    #[serde(default)] pub name: String,
-}
-pub async fn album_cover_by_name(State(state): State<S>, Query(q): Query<CoverByNameQuery>) -> impl IntoResponse {
-    let album_id = match db::find_album_id(&state.pool, &q.artist, &q.name).await {
-        Ok(Some(id)) => id,
-        _ => return StatusCode::NOT_FOUND.into_response(),
-    };
-    album_cover_by_id(&state, album_id).await
-}
-
 pub async fn album_cover(State(state): State<S>, Path(id): Path<i64>) -> impl IntoResponse {
-    album_cover_by_id(&state, id).await
+    let cover = match db::get_album_cover(&state.pool, id).await {
-}
+        Ok(Some(c)) => c,
-
+        Ok(None) => return StatusCode::NOT_FOUND.into_response(),
-async fn album_cover_by_id(state: &super::AppState, id: i64) -> axum::response::Response {
+        Err(e) => return error_response(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
-    // 1. Try album_images table
-    if let Ok(Some((file_path, mime_type))) = db::get_album_cover(&state.pool, id).await {
-        if let Ok(bytes) = tokio::fs::read(&file_path).await {
-            return ([(axum::http::header::CONTENT_TYPE, mime_type)], bytes).into_response();
-        }
-    }
-
-    // 2. Fallback: extract embedded cover from first track in album
-    if let Ok(Some(track_path)) = db::get_album_first_track_path(&state.pool, id).await {
-        let path = std::path::PathBuf::from(track_path);
-        if path.exists() {
-            let result = tokio::task::spawn_blocking(move || extract_embedded_cover(&path)).await;
-            if let Ok(Some((bytes, mime))) = result {
-                return ([(axum::http::header::CONTENT_TYPE, mime)], bytes).into_response();
-            }
-        }
-    }
-
-    StatusCode::NOT_FOUND.into_response()
-}
-
-fn extract_embedded_cover(path: &std::path::Path) -> Option<(Vec<u8>, String)> {
-    use symphonia::core::{
-        formats::FormatOptions,
-        io::MediaSourceStream,
-        meta::MetadataOptions,
-        probe::Hint,
     };
-
+    match tokio::fs::read(&cover.0).await {
-    let file = std::fs::File::open(path).ok()?;
+        Ok(bytes) => (
-    let mss = MediaSourceStream::new(Box::new(file), Default::default());
+            [(axum::http::header::CONTENT_TYPE, cover.1)],
-
+            bytes,
-    let mut hint = Hint::new();
+        ).into_response(),
-    if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
+        Err(_) => StatusCode::NOT_FOUND.into_response(),
-        hint.with_extension(ext);
     }
-
-    let mut probed = symphonia::default::get_probe()
-        .format(
-            &hint,
-            mss,
-            &FormatOptions { enable_gapless: false, ..Default::default() },
-            &MetadataOptions::default(),
-        )
-        .ok()?;
-
-    if let Some(rev) = probed.metadata.get().as_ref().and_then(|m| m.current()) {
-        if let Some(v) = rev.visuals().first() {
-            return Some((v.data.to_vec(), v.media_type.clone()));
-        }
-    }
-    if let Some(rev) = probed.format.metadata().current() {
-        if let Some(v) = rev.visuals().first() {
-            return Some((v.data.to_vec(), v.media_type.clone()));
-        }
-    }
-    None
 }
 
 #[derive(Deserialize)]

furumi-agent/src/web/mod.rs

@@ -41,12 +41,10 @@ pub fn build_router(state: Arc<AppState>) -> Router {
         .route("/tracks/:id", get(api::get_track).put(api::update_track))
         .route("/tracks/:id/hidden", put(api::set_track_hidden))
         .route("/albums/search", get(api::search_albums_for_artist))
-        .route("/albums/cover-by-name", get(api::album_cover_by_name))
         .route("/albums/:id/cover", get(api::album_cover))
         .route("/albums/:id/full", get(api::get_album_full))
         .route("/albums/:id/reorder", put(api::reorder_album_tracks))
         .route("/albums/:id/edit", put(api::update_album_full))
-        .route("/albums/:id/genre", put(api::set_album_tracks_genre))
         .route("/albums/:id/hidden", put(api::set_album_hidden))
         .route("/albums/:id/release_type", put(api::set_album_release_type))
         .route("/albums/:id", put(api::update_album))

furumi-node-player/client/.env.example

@@ -1,2 +1,2 @@
-# Leave empty — vite proxy handles /api in dev, same-origin in production
+VITE_API_BASE_URL=http://localhost:8085
-VITE_FURUMI_API_URL=
+VITE_API_KEY=

furumi-node-player/client/package-lock.json

@@ -8,11 +8,9 @@
       "name": "client",
       "version": "0.0.0",
       "dependencies": {
-        "@reduxjs/toolkit": "^2.11.2",
         "axios": "^1.7.9",
         "react": "^19.2.4",
-        "react-dom": "^19.2.4",
+        "react-dom": "^19.2.4"
-        "react-redux": "^9.2.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.4",
@@ -589,32 +587,6 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
-    "node_modules/@reduxjs/toolkit": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
-      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@standard-schema/spec": "^1.0.0",
-        "@standard-schema/utils": "^0.3.0",
-        "immer": "^11.0.0",
-        "redux": "^5.0.1",
-        "redux-thunk": "^3.1.0",
-        "reselect": "^5.1.0"
-      },
-      "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
-        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-redux": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.10",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.10.tgz",
@@ -877,18 +849,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@standard-schema/spec": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
-      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "license": "MIT"
-    },
-    "node_modules/@standard-schema/utils": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
-      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
-      "license": "MIT"
-    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -928,7 +888,7 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -944,12 +904,6 @@
         "@types/react": "^19.2.0"
       }
     },
-    "node_modules/@types/use-sync-external-store": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
-      "license": "MIT"
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.57.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.1.tgz",
@@ -1542,7 +1496,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2173,16 +2127,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/immer": {
-      "version": "11.1.4",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
-      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -2887,50 +2831,6 @@
         "react": "^19.2.4"
       }
     },
-    "node_modules/react-redux": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/use-sync-external-store": "^0.0.6",
-        "use-sync-external-store": "^1.4.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^18.2.25 || ^19",
-        "react": "^18.0 || ^19",
-        "redux": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "redux": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/redux": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
-      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
-    },
-    "node_modules/redux-thunk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
-      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "redux": "^5.0.0"
-      }
-    },
-    "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
-      "license": "MIT"
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3194,15 +3094,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/vite": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.1.tgz",

furumi-node-player/client/package.json

@@ -10,11 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.11.2",
     "axios": "^1.7.9",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.4"
-    "react-redux": "^9.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

furumi-node-player/client/public/sw.js

@@ -1,45 +0,0 @@
-const DB_NAME = 'furumi-sw'
-const STORE = 'auth'
-const KEY = 'bearer'
-
-function openDB() {
-  return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_NAME, 1)
-    req.onupgradeneeded = () => req.result.createObjectStore(STORE)
-    req.onsuccess = () => resolve(req.result)
-    req.onerror = () => reject(req.error)
-  })
-}
-
-async function getToken() {
-  try {
-    const db = await openDB()
-    return new Promise((resolve) => {
-      const tx = db.transaction(STORE, 'readonly')
-      const req = tx.objectStore(STORE).get(KEY)
-      req.onsuccess = () => resolve(req.result || null)
-      req.onerror = () => resolve(null)
-    })
-  } catch {
-    return null
-  }
-}
-
-self.addEventListener('fetch', (e) => {
-  const url = new URL(e.request.url)
-  if (url.origin !== self.location.origin || !url.pathname.startsWith('/api/')) return
-
-  e.respondWith(
-    (async () => {
-      const token = await getToken()
-      if (!token) return fetch(e.request)
-
-      const headers = new Headers(e.request.headers)
-      headers.set('Authorization', `Bearer ${token}`)
-      return fetch(new Request(e.request, { headers }))
-    })()
-  )
-})
-
-self.addEventListener('install', () => self.skipWaiting())
-self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()))

furumi-node-player/client/src/App.css

@@ -1,102 +1,71 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+.page {
-
-.auth-page {
   min-height: 100vh;
   display: grid;
   place-items: center;
   padding: 24px;
-  background: #0a0c12;
-  font-family: 'Inter', system-ui, sans-serif;
-  color: #e2e8f0;
 }
 
-/* ---------- loading spinner ---------- */
+.card {
+  width: min(520px, 100%);
+  border: 1px solid #d8dde6;
+  border-radius: 14px;
+  padding: 24px;
+  background-color: #ffffff;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+}
 
-.auth-loading {
+.subtitle {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #5a6475;
+}
+
+.settings {
+  margin-bottom: 16px;
+  padding: 12px;
+  border: 1px solid #e6eaf2;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.toggle {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 20px;
+  gap: 10px;
-}
+  color: #0f172a;
-
-.spinner {
-  width: 36px;
-  height: 36px;
-  border: 3px solid #1f2c45;
-  border-top-color: #7c6af7;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.auth-loading .logo {
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: #7c6af7;
-}
-
-.auth-loading p {
-  color: #64748b;
-  font-size: 0.85rem;
-}
-
-/* ---------- login card ---------- */
-
-.auth-card {
-  width: min(380px, 100%);
-  background: #111520;
-  border: 1px solid #1f2c45;
-  border-radius: 16px;
-  padding: 2.5rem 2rem;
-  text-align: center;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.auth-card .logo {
-  font-size: 1.8rem;
-  font-weight: 700;
-  color: #7c6af7;
-  margin-bottom: 4px;
-}
-
-.auth-card .subtitle {
-  font-size: 0.85rem;
-  color: #64748b;
-  margin-bottom: 2rem;
-}
-
-.auth-card .btn-login {
-  display: block;
-  width: 100%;
-  padding: 0.75rem;
-  text-align: center;
-  background: #7c6af7;
-  border: none;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 0.95rem;
   font-weight: 600;
+}
+
+.toggle input {
+  width: 18px;
+  height: 18px;
+}
+
+.hint {
+  margin: 10px 0 0;
+  color: #5a6475;
+}
+
+.btn {
+  display: inline-block;
   text-decoration: none;
-  cursor: pointer;
+  background: #2251ff;
-  transition: background 0.2s;
+  color: #ffffff;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-weight: 600;
 }
 
-.auth-card .btn-login:hover {
+.btn.ghost {
-  background: #6b58e8;
+  background: #edf1ff;
+  color: #1e3fc4;
+  margin-top: 10px;
 }
 
-.auth-card .error {
+.profile p {
-  color: #f87171;
+  margin: 8px 0;
-  font-size: 0.85rem;
-  margin-bottom: 1rem;
 }
 
+.error {
+  color: #cc1e1e;
+}

furumi-node-player/client/src/App.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { FurumiPlayer } from './FurumiPlayer'
-import { setAuthToken, clearAuthToken } from './furumiApi'
 import './App.css'
 
 type UserProfile = {
@@ -9,19 +8,38 @@ type UserProfile = {
   email?: string
 }
 
+const NO_AUTH_STORAGE_KEY = 'furumiNodePlayer.runWithoutAuth'
+
 function App() {
   const [loading, setLoading] = useState(true)
   const [user, setUser] = useState<UserProfile | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const [runWithoutAuth, setRunWithoutAuth] = useState(() => {
+    try {
+      return window.localStorage.getItem(NO_AUTH_STORAGE_KEY) === '1'
+    } catch {
+      return false
+    }
+  })
+
+  const apiBase = useMemo(() => import.meta.env.VITE_API_BASE_URL ?? '', [])
 
   useEffect(() => {
+    if (runWithoutAuth) {
+      setError(null)
+      setUser({ sub: 'noauth', name: 'No Auth' })
+      setLoading(false)
+      return
+    }
+
     const loadMe = async () => {
       try {
-        const response = await fetch('/auth/me', { credentials: 'include' })
+        const response = await fetch(`${apiBase}/api/me`, {
+          credentials: 'include',
+        })
 
         if (response.status === 401) {
           setUser(null)
-          clearAuthToken()
           return
         }
 
@@ -31,20 +49,6 @@ function App() {
 
         const data = await response.json()
         setUser(data.user ?? null)
-
-        if (data.user) {
-          try {
-            const tokenRes = await fetch('/auth/token', { credentials: 'include' })
-            if (tokenRes.ok) {
-              const tokenData = await tokenRes.json()
-              if (tokenData.access_token) {
-                setAuthToken(tokenData.access_token)
-              }
-            }
-          } catch {
-            // Token fetch failed
-          }
-        }
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to load session')
       } finally {
@@ -53,40 +57,84 @@ function App() {
     }
 
     void loadMe()
-  }, [])
+  }, [apiBase, runWithoutAuth])
 
-  // Authenticated — render player immediately
+  const loginUrl = `${apiBase}/api/login`
-  if (!loading && user) {
+  const logoutUrl = `${apiBase}/api/logout`
-    return <FurumiPlayer user={user} />
-  }
 
-  // Loading — show spinner (no login form flash)
-  if (loading) {
-    return (
-      <main className="auth-page">
-        <div className="auth-loading">
-          <div className="logo">Furumi</div>
-          <div className="spinner" />
-          <p>Loading...</p>
-        </div>
-      </main>
-    )
-  }
-
-  // Not authenticated — show login
   return (
-    <main className="auth-page">
+    <>
-      <section className="auth-card">
+      {!loading && (user || runWithoutAuth) ? (
-        <div className="logo">Furumi</div>
+        <FurumiPlayer />
-        <p className="subtitle">Sign in to continue</p>
+      ) : (
+        <main className="page">
+          <section className="card">
+            <h1>OIDC Login</h1>
+            <p className="subtitle">Авторизация обрабатывается на Express сервере.</p>
 
-        {error && <p className="error">{error}</p>}
+            <div className="settings">
+              <label className="toggle">
+                <input
+                  type="checkbox"
+                  checked={runWithoutAuth}
+                  onChange={(e) => {
+                    const next = e.target.checked
+                    setRunWithoutAuth(next)
+                    try {
+                      if (next) window.localStorage.setItem(NO_AUTH_STORAGE_KEY, '1')
+                      else window.localStorage.removeItem(NO_AUTH_STORAGE_KEY)
+                    } catch {
+                      // ignore
+                    }
+                    setLoading(true)
+                    setUser(null)
+                  }}
+                />
+                <span>Запускать без авторизации</span>
+              </label>
+            </div>
 
-        <a className="btn-login" href="/auth/login">
+            {loading && <p>Проверяю сессию...</p>}
-          Sign in with SSO
+            {error && <p className="error">Ошибка: {error}</p>}
-        </a>
+
-      </section>
+            {!loading && runWithoutAuth && (
-    </main>
+              <p className="hint">
+                Режим без авторизации включён. Для входа отключи настройку выше.
+              </p>
+            )}
+
+            {!loading && !user && (
+              <a className="btn" href={loginUrl}>
+                Войти через OIDC
+              </a>
+            )}
+
+            {!loading && user && (
+              <div className="profile">
+                <p>
+                  <strong>ID:</strong> {user.sub}
+                </p>
+                {user.name && (
+                  <p>
+                    <strong>Имя:</strong> {user.name}
+                  </p>
+                )}
+                {user.email && (
+                  <p>
+                    <strong>Email:</strong> {user.email}
+                  </p>
+                )}
+                {!runWithoutAuth && (
+                  <a className="btn ghost" href={logoutUrl}>
+                    Выйти
+                  </a>
+                )}
+              </div>
+            )}
+          </section>
+        </main>
+      )}
+    </>
   )
 }
 

furumi-node-player/client/src/FurumiPlayer.tsx

@@ -1,58 +1,27 @@
 import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import './furumi-player.css'
-import { furumiApi, searchTracks, recordPlay } from './furumiApi'
-import { store, useAppDispatch, useAppSelector } from './store'
-import { fetchArtists } from './store/slices/artistsSlice'
-import { fetchArtistAlbums } from './store/slices/albumsSlice'
-import { fetchArtistTracks } from './store/slices/artistTracksSlice'
-import { fetchAlbumTracks } from './store/slices/albumTracksSlice'
-import { fetchTrackDetail } from './store/slices/trackDetailSlice'
 import {
-  addTrack,
+  API_ROOT,
-  addTracksBatch,
+  getArtists,
-  replaceQueue,
+  getArtistAlbums,
-  clearQueue,
+  getAlbumTracks,
-  playAtIndex,
+  getArtistTracks,
-  removeFromQueueAt,
+  searchTracks,
-  moveQueueItemInOrder,
+  getTrackInfo,
-  rebuildShuffleOrder,
+  preloadStream,
-  selectQueueOrder,
+} from './furumiApi'
-  selectPlayingOrigIdx,
-  selectQueueScrollSignal,
-  selectNowPlayingTrack,
-  selectQueueItems,
-} from './store/slices/queueSlice'
-import { attachAudioPlayback } from './audioPlaybackService'
 import { fmt } from './utils'
-import { Header } from './components/header'
+import { Header } from './components/Header'
 import { MainPanel, type Crumb } from './components/MainPanel'
 import { PlayerBar } from './components/PlayerBar'
-import type { Track } from './types'
+import type { QueueItem } from './components/QueueList'
-
-export type UserProfile = {
-  sub: string
-  name?: string
-  email?: string
-}
-
-export function FurumiPlayer({ user }: { user: UserProfile }) {
-  const dispatch = useAppDispatch()
-  const artistsLoading = useAppSelector((s) => s.artists.loading)
-  const artistsError = useAppSelector((s) => s.artists.error)
-  const albumsLoading = useAppSelector((s) => s.albums.loading)
-  const albumsError = useAppSelector((s) => s.albums.error)
-  const albumTracksLoading = useAppSelector((s) => s.albumTracks.loading)
-  const albumTracksError = useAppSelector((s) => s.albumTracks.error)
-
-  const queueItemsView = useAppSelector(selectQueueItems)
-  const queueOrderView = useAppSelector(selectQueueOrder)
-  const queuePlayingOrigIdxView = useAppSelector(selectPlayingOrigIdx)
-  const queueScrollSignal = useAppSelector(selectQueueScrollSignal)
-  const nowPlayingTrack = useAppSelector(selectNowPlayingTrack)
 
+export function FurumiPlayer() {
   const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>(
     [],
   )
+  const [libraryLoading, setLibraryLoading] = useState(false)
+  const [libraryError, setLibraryError] = useState<string | null>(null)
   const [libraryItems, setLibraryItems] = useState<
     Array<{
       key: string
@@ -69,76 +38,102 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
     Array<{ result_type: string; slug: string; name: string; detail?: string }>
   >([])
   const [searchOpen, setSearchOpen] = useState(false)
-  const searchSelectRef = useRef<(type: string, slug: string) => void>(() => { })
+  const searchSelectRef = useRef<(type: string, slug: string) => void>(() => {})
+
+  const [nowPlayingTrack, setNowPlayingTrack] = useState<QueueItem | null>(null)
+  const [queueItemsView, setQueueItemsView] = useState<QueueItem[]>([])
+  const [queueOrderView, setQueueOrderView] = useState<number[]>([])
+  const [queuePlayingOrigIdxView, setQueuePlayingOrigIdxView] = useState<number>(-1)
+  const [queueScrollSignal, setQueueScrollSignal] = useState(0)
+  const [queue, setQueue] = useState<QueueItem[]>([])
 
   const queueActionsRef = useRef<{
     playIndex: (i: number) => void
     removeFromQueue: (idx: number) => void
     moveQueueItem: (fromPos: number, toPos: number) => void
-    clearQueue: () => void
   } | null>(null)
 
   const audioRef = useRef<HTMLAudioElement>(null)
 
   useEffect(() => {
-    if (!nowPlayingTrack) {
+    // --- Original player script adapted for React environment ---
-      document.title = 'Furumi Player'
-      return
-    }
-    document.title = `${nowPlayingTrack.title} — Furumi`
-    if ('mediaSession' in navigator) {
-      try {
-        const meta = new window.MediaMetadata({
-          title: nowPlayingTrack.title,
-          artist: nowPlayingTrack.artist || '',
-          album: '',
-        })
-        navigator.mediaSession.metadata = meta
-        furumiApi.get(`/tracks/${nowPlayingTrack.slug}/cover`, { responseType: 'blob' })
-          .then((res) => {
-            meta.artwork = [{ src: URL.createObjectURL(res.data), sizes: '512x512' }]
-          })
-          .catch(() => {})
-      } catch {
-        // ignore
-      }
-    }
-  }, [nowPlayingTrack])
-
-  useEffect(() => {
     const audioEl = audioRef.current
     if (!audioEl) return
     const audio = audioEl
 
+    let queueIndex = -1
+    let shuffle = false
+    let repeatAll = true
+    let shuffleOrder: number[] = []
     let searchTimer: number | null = null
     let toastTimer: number | null = null
+    let muted = false
 
-    function showToast(msg: string) {
+    // Restore prefs
-      const t = document.getElementById('toast')
+    try {
-      if (!t) return
+      const v = window.localStorage.getItem('furumi_vol')
-      t.textContent = msg
+      const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
-      t.classList.add('show')
+      if (v !== null && volSlider) {
-      if (toastTimer) window.clearTimeout(toastTimer)
+        audio.volume = Number(v) / 100
-      toastTimer = window.setTimeout(() => t.classList.remove('show'), 2500)
+        volSlider.value = v
+      }
+      const btnShuffle = document.getElementById('btnShuffle')
+      const btnRepeat = document.getElementById('btnRepeat')
+      shuffle = window.localStorage.getItem('furumi_shuffle') === '1'
+      repeatAll = window.localStorage.getItem('furumi_repeat') !== '0'
+      btnShuffle?.classList.toggle('active', shuffle)
+      btnRepeat?.classList.toggle('active', repeatAll)
+    } catch {
+      // ignore
     }
 
+    // --- Audio events ---
+    audio.addEventListener('timeupdate', () => {
+      if (audio.duration) {
+        const fill = document.getElementById('progressFill')
+        const timeElapsed = document.getElementById('timeElapsed')
+        const timeDuration = document.getElementById('timeDuration')
+        if (fill) fill.style.width = `${(audio.currentTime / audio.duration) * 100}%`
+        if (timeElapsed) timeElapsed.textContent = fmt(audio.currentTime)
+        if (timeDuration) timeDuration.textContent = fmt(audio.duration)
+      }
+    })
+    audio.addEventListener('ended', () => nextTrack())
+    audio.addEventListener('play', () => {
+      const btn = document.getElementById('btnPlayPause')
+      if (btn) btn.innerHTML = '&#9208;'
+    })
+    audio.addEventListener('pause', () => {
+      const btn = document.getElementById('btnPlayPause')
+      if (btn) btn.innerHTML = '&#9654;'
+    })
+    audio.addEventListener('error', () => {
+      showToast('Playback error')
+      nextTrack()
+    })
+
+    // --- Library navigation ---
     async function showArtists() {
       setBreadcrumb([{ label: 'Artists', action: showArtists }])
-      try {
+      setLibraryLoading(true)
-        const artists = await dispatch(fetchArtists()).unwrap()
+      setLibraryError(null)
-        setLibraryItems(
+      const artists = await getArtists()
-          artists.map((a) => ({
+      if (!artists) {
-            key: `artist:${a.slug}`,
+        setLibraryLoading(false)
-            className: 'file-item dir',
+        setLibraryError('Error')
-            icon: '👤',
+        return
-            name: a.name,
-            detail: `${a.album_count} albums`,
-            onClick: () => void showArtistAlbums(a.slug, a.name),
-          })),
-        )
-      } catch {
-        // Error is stored in artists.error
       }
+      setLibraryLoading(false)
+      setLibraryItems(
+        (artists as any[]).map((a) => ({
+          key: `artist:${a.slug}`,
+          className: 'file-item dir',
+          icon: '👤',
+          name: a.name,
+          detail: `${a.album_count} albums`,
+          onClick: () => void showArtistAlbums(a.slug, a.name),
+        })),
+      )
     }
 
     async function showArtistAlbums(artistSlug: string, artistName: string) {
@@ -146,38 +141,42 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
         { label: 'Artists', action: showArtists },
         { label: artistName, action: () => showArtistAlbums(artistSlug, artistName) },
       ])
-      try {
+      setLibraryLoading(true)
-        const { albums } = await dispatch(fetchArtistAlbums(artistSlug)).unwrap()
+      setLibraryError(null)
-        const allTracksItem = {
+      const albums = await getArtistAlbums(artistSlug)
-          key: `artist-all:${artistSlug}`,
+      if (!albums) {
-          className: 'file-item',
+        setLibraryLoading(false)
-          icon: '▶',
+        setLibraryError('Error')
-          name: 'Play all tracks',
+        return
-          nameClassName: 'name',
-          onClick: () => void playAllArtistTracks(artistSlug),
-        }
-        const albumItems = albums.map((a) => {
-          const year = a.year ? ` (${a.year})` : ''
-          return {
-            key: `album:${a.slug}`,
-            className: 'file-item dir',
-            icon: '💿',
-            name: `${a.name}${year}`,
-            detail: `${a.track_count} tracks`,
-            onClick: () => void showAlbumTracks(a.slug, a.name, artistSlug, artistName),
-            button: {
-              title: 'Add album to queue',
-              onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => {
-                ev.stopPropagation()
-                void addAlbumToQueue(a.slug)
-              },
-            },
-          }
-        })
-        setLibraryItems([allTracksItem, ...albumItems])
-      } catch {
-        // Error is stored in albums.error
       }
+      setLibraryLoading(false)
+      const allTracksItem = {
+        key: `artist-all:${artistSlug}`,
+        className: 'file-item',
+        icon: '▶',
+        name: 'Play all tracks',
+        nameClassName: 'name',
+        onClick: () => void playAllArtistTracks(artistSlug),
+      }
+      const albumItems = (albums as any[]).map((a) => {
+        const year = a.year ? ` (${a.year})` : ''
+        return {
+          key: `album:${a.slug}`,
+          className: 'file-item dir',
+          icon: '💿',
+          name: `${a.name}${year}`,
+          detail: `${a.track_count} tracks`,
+          onClick: () => void showAlbumTracks(a.slug, a.name, artistSlug, artistName),
+          button: {
+            title: 'Add album to queue',
+            onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => {
+              ev.stopPropagation()
+              void addAlbumToQueue(a.slug)
+            },
+          },
+        }
+      })
+      setLibraryItems([allTracksItem, ...albumItems])
     }
 
     async function showAlbumTracks(
@@ -191,9 +190,15 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
         { label: artistName, action: () => showArtistAlbums(artistSlug, artistName) },
         { label: albumName },
       ])
-      const result = await dispatch(fetchAlbumTracks(albumSlug))
+      setLibraryLoading(true)
-      if (result.meta.requestStatus === 'rejected') return
+      setLibraryError(null)
-      const { tracks } = result.payload as { albumSlug: string; tracks: Track[] }
+      const tracks = await getAlbumTracks(albumSlug)
+      if (!tracks) {
+        setLibraryLoading(false)
+        setLibraryError('Error')
+        return
+      }
+      setLibraryLoading(false)
       const playAlbumItem = {
         key: `album-play:${albumSlug}`,
         className: 'file-item',
@@ -203,7 +208,7 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
           void addAlbumToQueue(albumSlug, true)
         },
       }
-      const trackItems = tracks.map((t) => {
+      const trackItems = (tracks as any[]).map((t) => {
         const num = t.track_number ? `${t.track_number}. ` : ''
         const dur = t.duration_secs ? fmt(t.duration_secs) : ''
         return {
@@ -233,6 +238,7 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
       setBreadcrumbs(parts)
     }
 
+    // --- Queue management ---
     function addTrackToQueue(
       track: {
         slug: string
@@ -243,65 +249,60 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
       },
       playNow?: boolean,
     ) {
-      const prevIdx = store.getState().queue.currentIndex
+      const existing = queue.findIndex((t) => t.slug === track.slug)
-      dispatch(addTrack({ track, playNow }))
+      if (existing !== -1) {
-      const q = store.getState().queue
+        if (playNow) playIndex(existing)
-      if (q.currentIndex !== -1 && (playNow || q.currentIndex !== prevIdx)) {
+        return
-        playIndex(q.currentIndex)
+      }
+      setQueue((q) => [...q, track]);
+      updateQueueModel()
+      if (playNow || (queueIndex === -1 && queue.length === 1)) {
+        playIndex(queue.length - 1)
       }
     }
 
     async function addAlbumToQueue(albumSlug: string, playFirst?: boolean) {
-      const result = await dispatch(fetchAlbumTracks(albumSlug))
+      const tracks = await getAlbumTracks(albumSlug)
-      if (result.meta.requestStatus === 'rejected') return
+      if (!tracks || !(tracks as any[]).length) return
-      const { tracks } = result.payload as { albumSlug: string; tracks: Track[] }
+      const list = tracks as any[]
-      if (!tracks || !tracks.length) return
+      let firstIdx = queue.length
-      const list = tracks.map((t) => ({
+      list.forEach((t) => {
-        slug: t.slug,
+        if (queue.find((q) => q.slug === t.slug)) return
-        title: t.title,
+        setQueue((q) => [...q, t])
-        artist: t.artist_name,
+      })
-        album_slug: t.album_slug,
+      updateQueueModel()
-        duration: t.duration_secs,
+      if (playFirst || queueIndex === -1) playIndex(firstIdx)
-      }))
-      const prevIdx = store.getState().queue.currentIndex
-      dispatch(addTracksBatch({ tracks: list, playFirst }))
-      const q = store.getState().queue
-      if (q.currentIndex !== -1 && q.currentIndex !== prevIdx) {
-        playIndex(q.currentIndex)
-      }
       showToast(`Added ${list.length} tracks`)
     }
 
     async function playAllArtistTracks(artistSlug: string) {
-      const result = await dispatch(fetchArtistTracks(artistSlug))
+      const tracks = await getArtistTracks(artistSlug)
-      if (result.meta.requestStatus === 'rejected') return
+      if (!tracks || !(tracks as any[]).length) return
-      const { tracks } = result.payload as { artistSlug: string; tracks: Track[] }
+      const list = tracks as any[]
-      if (!tracks || !tracks.length) return
+      clearQueue()
-      const list = tracks.map((t) => ({
+      list.forEach((t) => {
-        slug: t.slug,
+        queue.push({
-        title: t.title,
+          slug: t.slug,
-        artist: t.artist_name,
+          title: t.title,
-        album_slug: t.album_slug,
+          artist: t.artist_name,
-        duration: t.duration_secs,
+          album_slug: t.album_slug,
-      }))
+          duration: t.duration_secs,
-      dispatch(replaceQueue({ items: list, playFromIndex: 0 }))
+        })
+      })
+      updateQueueModel()
       playIndex(0)
       showToast(`Added ${list.length} tracks`)
     }
 
-    const playback = attachAudioPlayback(audio, {
-      onEnded: nextTrack,
-      onErrorSkip: nextTrack,
-      onToast: showToast,
-    })
-
     function playIndex(i: number) {
-      const q = store.getState().queue
+      if (i < 0 || i >= queue.length) return
-      if (i < 0 || i >= q.items.length) return
+      queueIndex = i
-      dispatch(playAtIndex(i))
+      const track = queue[i]
-      const track = store.getState().queue.items[i]
+      audio.src = `${API_ROOT}/stream/${track.slug}`
-      void playback.loadStreamForTrack(track.slug)
+      void audio.play().catch(() => {})
-      void recordPlay(track.slug)
+      updateNowPlaying(track)
+      updateQueueModel()
+      setQueueScrollSignal((s) => s + 1)
       if (window.history && window.history.replaceState) {
         const url = new URL(window.location.href)
         url.searchParams.set('t', track.slug)
@@ -309,58 +310,181 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
       }
     }
 
-    function removeFromQueue(idx: number) {
+    function updateNowPlaying(track: QueueItem | null) {
-      const wasPlaying = store.getState().queue.currentIndex === idx
+      setNowPlayingTrack(track)
-      dispatch(removeFromQueueAt(idx))
+      if (!track) return
-      if (wasPlaying) playback.pauseAndClearSource()
-    }
 
-    function moveQueueItem(fromPos: number, toPos: number) {
+      document.title = `${track.title} — Furumi`
-      dispatch(moveQueueItemInOrder({ fromPos, toPos }))
-    }
 
-    function clearQueuePlayback() {
+      const coverUrl = `${API_ROOT}/tracks/${track.slug}/cover`
-      dispatch(clearQueue())
+      if ('mediaSession' in navigator) {
-      playback.pauseAndClearSource()
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    }
+        navigator.mediaSession.metadata = new window.MediaMetadata({
-
+          title: track.title,
-    function nextTrack() {
+          artist: track.artist || '',
-      const q = store.getState().queue
+          album: '',
-      if (!q.items.length) return
+          artwork: [{ src: coverUrl, sizes: '512x512' }],
-      const order = selectQueueOrder(store.getState())
+        })
-      const pos = order.indexOf(q.currentIndex)
-      if (pos < order.length - 1) playIndex(order[pos + 1])
-      else if (q.repeatAll) {
-        if (q.shuffle) dispatch(rebuildShuffleOrder())
-        const first = selectQueueOrder(store.getState())[0]
-        if (first !== undefined) playIndex(first)
       }
     }
 
-    function prevTrack() {
+    function currentOrder() {
-      const q = store.getState().queue
+      if (!shuffle) return [...Array(queue.length).keys()]
-      if (!q.items.length) return
+      if (shuffleOrder.length !== queue.length) buildShuffleOrder()
-      if (playback.rewindCurrentTrackIfPastThreshold()) return
+      return shuffleOrder
-      const order = selectQueueOrder(store.getState())
-      const pos = order.indexOf(q.currentIndex)
-      if (pos > 0) playIndex(order[pos - 1])
-      else if (q.repeatAll) playIndex(order[order.length - 1])
     }
 
-    function togglePlay() {
+    function buildShuffleOrder() {
-      const q = store.getState().queue
+      shuffleOrder = [...Array(queue.length).keys()]
-      playback.togglePlay(() => {
+      for (let i = shuffleOrder.length - 1; i > 0; i--) {
-        playIndex(q.currentIndex === -1 ? 0 : q.currentIndex)
+        const j = Math.floor(Math.random() * (i + 1))
-      })
+        ;[shuffleOrder[i], shuffleOrder[j]] = [shuffleOrder[j], shuffleOrder[i]]
+      }
+      if (queueIndex !== -1) {
+        const ci = shuffleOrder.indexOf(queueIndex)
+        if (ci > 0) {
+          shuffleOrder.splice(ci, 1)
+          shuffleOrder.unshift(queueIndex)
+        }
+      }
+    }
+
+    function updateQueueModel() {
+      const order = currentOrder()
+      setQueueItemsView(queue)
+      setQueueOrderView(order.slice())
+      setQueuePlayingOrigIdxView(queueIndex)
+    }
+
+    function removeFromQueue(idx: number) {
+      if (idx === queueIndex) {
+        queueIndex = -1
+        audio.pause()
+        audio.src = ''
+        updateNowPlaying(null)
+      } else if (queueIndex > idx) {
+        queueIndex--
+      }
+
+      // queue.splice(idx, 1)
+      setQueue((q) => q.filter((_, i) => i !== idx));
+
+      if (shuffle) {
+        const si = shuffleOrder.indexOf(idx)
+        if (si !== -1) shuffleOrder.splice(si, 1)
+        for (let i = 0; i < shuffleOrder.length; i++) {
+          if (shuffleOrder[i] > idx) shuffleOrder[i]--
+        }
+      }
+      updateQueueModel()
+    }
+
+    function moveQueueItem(from: number, to: number) {
+      if (from === to) return
+      if (shuffle) {
+        const item = shuffleOrder.splice(from, 1)[0]
+        shuffleOrder.splice(to, 0, item)
+      } else {
+        const item = queue.splice(from, 1)[0]
+        queue.splice(to, 0, item)
+        if (queueIndex === from) queueIndex = to
+        else if (from < queueIndex && to >= queueIndex) queueIndex--
+        else if (from > queueIndex && to <= queueIndex) queueIndex++
+      }
+      updateQueueModel()
     }
 
     queueActionsRef.current = {
       playIndex,
       removeFromQueue,
       moveQueueItem,
-      clearQueue: clearQueuePlayback,
     }
 
+    function clearQueue() {
+      setQueue([]);
+      queueIndex = -1
+      shuffleOrder = []
+      audio.pause()
+      audio.src = ''
+      updateNowPlaying(null)
+      document.title = 'Furumi Player'
+      updateQueueModel()
+    }
+
+    // --- Playback controls ---
+    function togglePlay() {
+      if (!audio.src && queue.length) {
+        playIndex(queueIndex === -1 ? 0 : queueIndex)
+        return
+      }
+      if (audio.paused) void audio.play()
+      else audio.pause()
+    }
+
+    function nextTrack() {
+      if (!queue.length) return
+      const order = currentOrder()
+      const pos = order.indexOf(queueIndex)
+      if (pos < order.length - 1) playIndex(order[pos + 1])
+      else if (repeatAll) {
+        if (shuffle) buildShuffleOrder()
+        playIndex(currentOrder()[0])
+      }
+    }
+
+    function prevTrack() {
+      if (!queue.length) return
+      if (audio.currentTime > 3) {
+        audio.currentTime = 0
+        return
+      }
+      const order = currentOrder()
+      const pos = order.indexOf(queueIndex)
+      if (pos > 0) playIndex(order[pos - 1])
+      else if (repeatAll) playIndex(order[order.length - 1])
+    }
+
+    function toggleShuffle() {
+      shuffle = !shuffle
+      if (shuffle) buildShuffleOrder()
+      const btn = document.getElementById('btnShuffle')
+      btn?.classList.toggle('active', shuffle)
+      window.localStorage.setItem('furumi_shuffle', shuffle ? '1' : '0')
+      updateQueueModel()
+    }
+
+    function toggleRepeat() {
+      repeatAll = !repeatAll
+      const btn = document.getElementById('btnRepeat')
+      btn?.classList.toggle('active', repeatAll)
+      window.localStorage.setItem('furumi_repeat', repeatAll ? '1' : '0')
+    }
+
+    // --- Seek & Volume ---
+    function seekTo(e: MouseEvent) {
+      if (!audio.duration) return
+      const bar = document.getElementById('progressBar') as HTMLDivElement | null
+      if (!bar) return
+      const rect = bar.getBoundingClientRect()
+      const pct = (e.clientX - rect.left) / rect.width
+      audio.currentTime = pct * audio.duration
+    }
+
+    function toggleMute() {
+      muted = !muted
+      audio.muted = muted
+      const volIcon = document.getElementById('volIcon')
+      if (volIcon) volIcon.innerHTML = muted ? '&#128263;' : '&#128266;'
+    }
+
+    function setVolume(v: number) {
+      audio.volume = v / 100
+      const volIcon = document.getElementById('volIcon')
+      if (volIcon) volIcon.innerHTML = v === 0 ? '&#128263;' : '&#128266;'
+      window.localStorage.setItem('furumi_vol', String(v))
+    }
+
+    // --- Search ---
     function onSearch(q: string) {
       if (searchTimer) {
         window.clearTimeout(searchTimer)
@@ -394,11 +518,21 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
           { slug, title: '', artist: '', album_slug: null, duration: null },
           true,
         )
-        void playback.loadStreamForTrack(slug)
+        void preloadStream(slug)
       }
     }
     searchSelectRef.current = onSearchSelect
 
+    // --- Helpers ---
+    function showToast(msg: string) {
+      const t = document.getElementById('toast')
+      if (!t) return
+      t.textContent = msg
+      t.classList.add('show')
+      if (toastTimer) window.clearTimeout(toastTimer)
+      toastTimer = window.setTimeout(() => t.classList.remove('show'), 2500)
+    }
+
     function toggleSidebar() {
       const sidebar = document.getElementById('sidebar')
       const overlay = document.getElementById('sidebarOverlay')
@@ -406,115 +540,98 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
       overlay?.classList.toggle('show')
     }
 
-    const onMediaSeekTo = (d: { seekTime?: number }) => {
+    // --- MediaSession ---
-      if (typeof d.seekTime === 'number') {
-        playback.seekToTime(d.seekTime)
-      }
-    }
-
     if ('mediaSession' in navigator) {
       try {
         navigator.mediaSession.setActionHandler('play', togglePlay)
         navigator.mediaSession.setActionHandler('pause', togglePlay)
         navigator.mediaSession.setActionHandler('previoustrack', prevTrack)
         navigator.mediaSession.setActionHandler('nexttrack', nextTrack)
-        navigator.mediaSession.setActionHandler('seekto', onMediaSeekTo as (d: any) => void)
+        navigator.mediaSession.setActionHandler('seekto', (d: any) => {
+          if (typeof d.seekTime === 'number') {
+            audio.currentTime = d.seekTime
+          }
+        })
       } catch {
         // ignore
       }
     }
 
-    const onMenuClick = () => toggleSidebar()
+    // --- Wire DOM events that were inline in HTML ---
     const btnMenu = document.querySelector('.btn-menu')
-    btnMenu?.addEventListener('click', onMenuClick)
+    btnMenu?.addEventListener('click', () => toggleSidebar())
 
-    const onSidebarOverlayClick = () => toggleSidebar()
     const sidebarOverlay = document.getElementById('sidebarOverlay')
-    sidebarOverlay?.addEventListener('click', onSidebarOverlayClick)
+    sidebarOverlay?.addEventListener('click', () => toggleSidebar())
 
     const searchInput = document.getElementById('searchInput') as HTMLInputElement | null
-    const onSearchInput = (e: Event) => {
-      onSearch((e.target as HTMLInputElement).value)
-    }
-    const onSearchKeydown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') closeSearch()
-    }
     if (searchInput) {
-      searchInput.addEventListener('input', onSearchInput)
+      searchInput.addEventListener('input', (e) => {
-      searchInput.addEventListener('keydown', onSearchKeydown)
+        onSearch((e.target as HTMLInputElement).value)
+      })
+      searchInput.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'Escape') closeSearch()
+      })
     }
 
-    const onPrevClick = () => prevTrack()
+    const btnShuffle = document.getElementById('btnShuffle')
-    const onPlayClick = () => togglePlay()
+    btnShuffle?.addEventListener('click', () => toggleShuffle())
-    const onNextClick = () => nextTrack()
+    const btnRepeat = document.getElementById('btnRepeat')
+    btnRepeat?.addEventListener('click', () => toggleRepeat())
+    const btnClear = document.getElementById('btnClearQueue')
+    btnClear?.addEventListener('click', () => clearQueue())
 
     const btnPrev = document.getElementById('btnPrev')
-    btnPrev?.addEventListener('click', onPrevClick)
+    btnPrev?.addEventListener('click', () => prevTrack())
     const btnPlay = document.getElementById('btnPlayPause')
-    btnPlay?.addEventListener('click', onPlayClick)
+    btnPlay?.addEventListener('click', () => togglePlay())
     const btnNext = document.getElementById('btnNext')
-    btnNext?.addEventListener('click', onNextClick)
+    btnNext?.addEventListener('click', () => nextTrack())
 
-      ; (async () => {
+    const progressBar = document.getElementById('progressBar')
-        const url = new URL(window.location.href)
+    progressBar?.addEventListener('click', (e) => seekTo(e as MouseEvent))
-        const urlSlug = url.searchParams.get('t')
-        if (urlSlug) {
-          try {
-            const { detail } = await dispatch(fetchTrackDetail(urlSlug)).unwrap()
-            addTrackToQueue(
-              {
-                slug: detail.slug,
-                title: detail.title,
-                artist: detail.artist_name,
-                album_slug: detail.album_slug,
-                duration: detail.duration_secs,
-              },
-              true,
-            )
-          } catch {
-            // fetchTrackDetail rejected — track not found or error
-          }
-        }
-        void showArtists()
-      })()
 
-    return () => {
+    const volIcon = document.getElementById('volIcon')
-      queueActionsRef.current = null
+    volIcon?.addEventListener('click', () => toggleMute())
-      playback.dispose()
+    const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
-      btnMenu?.removeEventListener('click', onMenuClick)
+    if (volSlider) {
-      sidebarOverlay?.removeEventListener('click', onSidebarOverlayClick)
+      volSlider.addEventListener('input', (e) => {
-      searchInput?.removeEventListener('input', onSearchInput)
+        const v = Number((e.target as HTMLInputElement).value)
-      searchInput?.removeEventListener('keydown', onSearchKeydown)
+        setVolume(v)
-      btnPrev?.removeEventListener('click', onPrevClick)
+      })
-      btnPlay?.removeEventListener('click', onPlayClick)
+    }
-      btnNext?.removeEventListener('click', onNextClick)
+
-      if ('mediaSession' in navigator) {
+    const clearQueueBtn = document.getElementById('btnClearQueue')
-        try {
+    clearQueueBtn?.addEventListener('click', () => clearQueue())
-          navigator.mediaSession.setActionHandler('play', null)
+
-          navigator.mediaSession.setActionHandler('pause', null)
+    // --- Init ---
-          navigator.mediaSession.setActionHandler('previoustrack', null)
+    ;(async () => {
-          navigator.mediaSession.setActionHandler('nexttrack', null)
+      const url = new URL(window.location.href)
-          navigator.mediaSession.setActionHandler('seekto', null)
+      const urlSlug = url.searchParams.get('t')
-        } catch {
+      if (urlSlug) {
-          // ignore
+        const info = await getTrackInfo(urlSlug)
+        if (info) {
+          addTrackToQueue(
+            {
+              slug: (info as any).slug,
+              title: (info as any).title,
+              artist: (info as any).artist_name,
+              album_slug: (info as any).album_slug,
+              duration: (info as any).duration_secs,
+            },
+            true,
+          )
         }
       }
+      void showArtists()
+    })()
+
+    // Cleanup: best-effort remove listeners on unmount
+    return () => {
+      queueActionsRef.current = null
+      audio.pause()
     }
-  }, [dispatch])
+  }, [])
-
-  const libraryLoading =
-    breadcrumbs.length === 1
-      ? artistsLoading
-      : breadcrumbs.length === 2
-        ? albumsLoading
-        : albumTracksLoading
-
-  const libraryError =
-    breadcrumbs.length === 1
-      ? artistsError
-      : breadcrumbs.length === 2
-        ? albumsError
-        : albumTracksError
 
   return (
     <div className="furumi-root">
@@ -522,8 +639,6 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
         searchOpen={searchOpen}
         searchResults={searchResults}
         onSearchSelect={(type, slug) => searchSelectRef.current(type, slug)}
-        onPlayTrack={(slug) => searchSelectRef.current('track', slug)}
-        user={user}
       />
 
       <MainPanel
@@ -531,6 +646,10 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
         libraryLoading={libraryLoading}
         libraryError={libraryError}
         libraryItems={libraryItems}
+        queueItemsView={queueItemsView}
+        queueOrderView={queueOrderView}
+        queuePlayingOrigIdxView={queuePlayingOrigIdxView}
+        queueScrollSignal={queueScrollSignal}
         onQueuePlay={(origIdx) => queueActionsRef.current?.playIndex(origIdx)}
         onQueueRemove={(origIdx) =>
           queueActionsRef.current?.removeFromQueue(origIdx)
@@ -538,26 +657,13 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
         onQueueMove={(fromPos, toPos) =>
           queueActionsRef.current?.moveQueueItem(fromPos, toPos)
         }
-        onClearQueue={() => queueActionsRef.current?.clearQueue()}
       />
 
-      <PlayerBar
+      <PlayerBar track={nowPlayingTrack} />
-        track={nowPlayingTrack}
-        queue={queueItemsView}
-        order={queueOrderView}
-        playingOrigIdx={queuePlayingOrigIdxView}
-        scrollSignal={queueScrollSignal}
-        onQueuePlay={(origIdx) => queueActionsRef.current?.playIndex(origIdx)}
-        onQueueRemove={(origIdx) =>
-          queueActionsRef.current?.removeFromQueue(origIdx)
-        }
-        onQueueMove={(fromPos, toPos) =>
-          queueActionsRef.current?.moveQueueItem(fromPos, toPos)
-        }
-      />
 
       <div className="toast" id="toast" />
       <audio ref={audioRef} />
     </div>
   )
 }
+

furumi-node-player/client/src/audioPlaybackService.ts

@@ -1,194 +0,0 @@
-import { furumiApi } from './furumiApi'
-import { fmt } from './utils'
-
-const MAX_PLAYBACK_ERROR_SKIPS = 5
-
-/** Seconds from track start above which "previous" rewinds current track instead. */
-const PREV_TRACK_REWIND_THRESHOLD_SEC = 3
-
-export interface AudioPlaybackCallbacks {
-  onEnded: () => void
-  /** Called after a recoverable playback error (to advance queue). */
-  onErrorSkip: () => void
-  onToast: (msg: string) => void
-}
-
-export interface AudioPlaybackHandle {
-  loadStreamForTrack(slug: string): Promise<void>
-  pauseAndClearSource(): void
-  togglePlay(whenNoSource: () => void): void
-  seekFromProgressBarClick(e: MouseEvent): void
-  toggleMute(): void
-  setVolume(percent: number): void
-  seekToTime(seconds: number): void
-  /** If current time is past the threshold, seeks to 0 and returns true (caller should skip prev-track logic). */
-  rewindCurrentTrackIfPastThreshold(): boolean
-  dispose(): void
-}
-
-function syncVolumeFromStorage(audio: HTMLAudioElement) {
-  try {
-    const v = window.localStorage.getItem('furumi_vol')
-    const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
-    if (v !== null && volSlider) {
-      audio.volume = Number(v) / 100
-      volSlider.value = v
-    }
-  } catch {
-    // ignore
-  }
-}
-
-export function attachAudioPlayback(
-  audio: HTMLAudioElement,
-  callbacks: AudioPlaybackCallbacks,
-): AudioPlaybackHandle {
-  let muted = false
-  let playbackErrorSkips = 0
-
-  syncVolumeFromStorage(audio)
-
-  function onTimeUpdate() {
-    if (!audio.duration) return
-    const fill = document.getElementById('progressFill')
-    const timeElapsed = document.getElementById('timeElapsed')
-    const timeDuration = document.getElementById('timeDuration')
-    if (fill) fill.style.width = `${(audio.currentTime / audio.duration) * 100}%`
-    if (timeElapsed) timeElapsed.textContent = fmt(audio.currentTime)
-    if (timeDuration) timeDuration.textContent = fmt(audio.duration)
-  }
-
-  function setPlayPauseButtonPlaying(playing: boolean) {
-    const btn = document.getElementById('btnPlayPause')
-    if (btn) btn.innerHTML = playing ? '&#9208;' : '&#9654;'
-  }
-
-  function onPlaying() {
-    playbackErrorSkips = 0
-  }
-
-  function onPlay() {
-    setPlayPauseButtonPlaying(true)
-  }
-
-  function onPause() {
-    setPlayPauseButtonPlaying(false)
-  }
-
-  function onError() {
-    callbacks.onToast('Playback error')
-    if (playbackErrorSkips >= MAX_PLAYBACK_ERROR_SKIPS) return
-    playbackErrorSkips += 1
-    callbacks.onErrorSkip()
-  }
-
-  function onEnded() {
-    callbacks.onEnded()
-  }
-
-  audio.addEventListener('timeupdate', onTimeUpdate)
-  audio.addEventListener('ended', onEnded)
-  audio.addEventListener('playing', onPlaying)
-  audio.addEventListener('play', onPlay)
-  audio.addEventListener('pause', onPause)
-  audio.addEventListener('error', onError)
-
-  const progressBar = document.getElementById('progressBar')
-  const onProgressClick = (e: Event) => seekFromProgressBarClick(e as MouseEvent)
-  progressBar?.addEventListener('click', onProgressClick)
-
-  const volIcon = document.getElementById('volIcon')
-  const onVolIconClick = () => toggleMute()
-  volIcon?.addEventListener('click', onVolIconClick)
-
-  const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
-  const onVolInput = (e: Event) => {
-    const v = Number((e.target as HTMLInputElement).value)
-    setVolume(v)
-  }
-  volSlider?.addEventListener('input', onVolInput)
-
-  async function loadStreamForTrack(slug: string) {
-    try {
-      const res = await furumiApi.get(`/stream/${slug}`, { responseType: 'blob' })
-      audio.src = URL.createObjectURL(res.data)
-      await audio.play().catch(() => { })
-    } catch {
-      // stream failed
-    }
-  }
-
-  function pauseAndClearSource() {
-    audio.pause()
-    audio.src = ''
-  }
-
-  function togglePlay(whenNoSource: () => void) {
-    if (!audio.src) {
-      whenNoSource()
-      return
-    }
-    if (audio.paused) void audio.play()
-    else audio.pause()
-  }
-
-  function seekFromProgressBarClick(e: MouseEvent) {
-    if (!audio.duration) return
-    const bar = document.getElementById('progressBar') as HTMLDivElement | null
-    if (!bar) return
-    const rect = bar.getBoundingClientRect()
-    const pct = (e.clientX - rect.left) / rect.width
-    audio.currentTime = pct * audio.duration
-  }
-
-  function toggleMute() {
-    muted = !muted
-    audio.muted = muted
-    const icon = document.getElementById('volIcon')
-    if (icon) icon.innerHTML = muted ? '&#128263;' : '&#128266;'
-  }
-
-  function setVolume(percent: number) {
-    audio.volume = percent / 100
-    const icon = document.getElementById('volIcon')
-    if (icon) icon.innerHTML = percent === 0 ? '&#128263;' : '&#128266;'
-    window.localStorage.setItem('furumi_vol', String(percent))
-  }
-
-  function seekToTime(seconds: number) {
-    audio.currentTime = seconds
-  }
-
-  function rewindCurrentTrackIfPastThreshold(): boolean {
-    if (audio.currentTime > PREV_TRACK_REWIND_THRESHOLD_SEC) {
-      audio.currentTime = 0
-      return true
-    }
-    return false
-  }
-
-  function dispose() {
-    audio.removeEventListener('timeupdate', onTimeUpdate)
-    audio.removeEventListener('ended', onEnded)
-    audio.removeEventListener('playing', onPlaying)
-    audio.removeEventListener('play', onPlay)
-    audio.removeEventListener('pause', onPause)
-    audio.removeEventListener('error', onError)
-    progressBar?.removeEventListener('click', onProgressClick)
-    volIcon?.removeEventListener('click', onVolIconClick)
-    volSlider?.removeEventListener('input', onVolInput)
-    audio.pause()
-  }
-
-  return {
-    loadStreamForTrack,
-    pauseAndClearSource,
-    togglePlay,
-    seekFromProgressBarClick,
-    toggleMute,
-    setVolume,
-    seekToTime,
-    rewindCurrentTrackIfPastThreshold,
-    dispose,
-  }
-}

furumi-node-player/client/src/components/AuthImg.tsx

@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react'
-import { furumiApi } from '../furumiApi'
-
-export function AuthImg({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) {
-  const [blobUrl, setBlobUrl] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!src) return
-    let revoked = false
-    furumiApi.get(src, { responseType: 'blob' })
-      .then((res) => {
-        if (!revoked) setBlobUrl(URL.createObjectURL(res.data))
-      })
-      .catch(() => {})
-    return () => {
-      revoked = true
-      if (blobUrl) URL.revokeObjectURL(blobUrl)
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [src])
-
-  if (!blobUrl) return null
-  return <img src={blobUrl} alt={alt ?? ''} {...props} />
-}

furumi-node-player/client/src/components/Header.tsx

@@ -0,0 +1,45 @@
+import { SearchDropdown } from './SearchDropdown'
+
+type SearchResultItem = {
+  result_type: string
+  slug: string
+  name: string
+  detail?: string
+}
+
+type HeaderProps = {
+  searchOpen: boolean
+  searchResults: SearchResultItem[]
+  onSearchSelect: (type: string, slug: string) => void
+}
+
+export function Header({
+  searchOpen,
+  searchResults,
+  onSearchSelect,
+}: HeaderProps) {
+  return (
+    <header className="header">
+      <div className="header-logo">
+        <button className="btn-menu">&#9776;</button>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="9" cy="18" r="3" />
+          <circle cx="18" cy="15" r="3" />
+          <path d="M12 18V6l9-3v3" />
+        </svg>
+        Furumi
+        <span className="header-version">v</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <div className="search-wrap">
+          <input id="searchInput" placeholder="Search..." />
+          <SearchDropdown
+            isOpen={searchOpen}
+            results={searchResults}
+            onSelect={onSearchSelect}
+          />
+        </div>
+      </div>
+    </header>
+  )
+}

furumi-node-player/client/src/components/MainPanel.tsx

@@ -1,18 +1,7 @@
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { useAppDispatch, useAppSelector } from '../store'
-import {
-  selectPlayingOrigIdx,
-  selectQueueItems,
-  selectQueueOrder,
-  selectQueueScrollSignal,
-  selectRepeatAll,
-  selectShuffle,
-  toggleRepeat,
-  toggleShuffle,
-} from '../store/slices/queueSlice'
 import { Breadcrumbs } from './Breadcrumbs'
 import { LibraryList } from './LibraryList'
-import { QueueList } from './QueueList'
+import { QueueList, type QueueItem } from './QueueList'
 
 export type Crumb = { label: string; action?: () => void }
 
@@ -32,10 +21,13 @@ type MainPanelProps = {
   libraryLoading: boolean
   libraryError: string | null
   libraryItems: LibraryListItem[]
+  queueItemsView: QueueItem[]
+  queueOrderView: number[]
+  queuePlayingOrigIdxView: number
+  queueScrollSignal: number
   onQueuePlay: (origIdx: number) => void
   onQueueRemove: (origIdx: number) => void
   onQueueMove: (fromPos: number, toPos: number) => void
-  onClearQueue: () => void
 }
 
 export function MainPanel({
@@ -43,19 +35,14 @@ export function MainPanel({
   libraryLoading,
   libraryError,
   libraryItems,
+  queueItemsView,
+  queueOrderView,
+  queuePlayingOrigIdxView,
+  queueScrollSignal,
   onQueuePlay,
   onQueueRemove,
   onQueueMove,
-  onClearQueue,
 }: MainPanelProps) {
-  const dispatch = useAppDispatch()
-  const queueItemsView = useAppSelector(selectQueueItems)
-  const queueOrderView = useAppSelector(selectQueueOrder)
-  const queuePlayingOrigIdxView = useAppSelector(selectPlayingOrigIdx)
-  const queueScrollSignal = useAppSelector(selectQueueScrollSignal)
-  const shuffle = useAppSelector(selectShuffle)
-  const repeatAll = useAppSelector(selectRepeatAll)
-
   return (
     <div className="main">
       <div className="sidebar-overlay" id="sidebarOverlay" />
@@ -71,21 +58,13 @@ export function MainPanel({
         <div className="queue-header">
           <span>Queue</span>
           <div className="queue-actions">
-            <button
+            <button className="queue-btn active" id="btnShuffle">
-              type="button"
-              className={`queue-btn${shuffle ? ' active' : ''}`}
-              onClick={() => dispatch(toggleShuffle())}
-            >
               Shuffle
             </button>
-            <button
+            <button className="queue-btn active" id="btnRepeat">
-              type="button"
-              className={`queue-btn${repeatAll ? ' active' : ''}`}
-              onClick={() => dispatch(toggleRepeat())}
-            >
               Repeat
             </button>
-            <button type="button" className="queue-btn" onClick={onClearQueue}>
+            <button className="queue-btn" id="btnClearQueue">
               Clear
             </button>
           </div>

furumi-node-player/client/src/components/NowPlaying.tsx

@@ -1,13 +1,16 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
-import { AuthImg } from './AuthImg'
+import { API_ROOT } from '../furumiApi'
 import type { QueueItem } from './QueueList'
 
-function Cover({ slug }: { slug: string }) {
+function Cover({ src }: { src: string }) {
   const [errored, setErrored] = useState(false)
-  const src = `/tracks/${slug}/cover`
+
+  useEffect(() => {
+    setErrored(false)
+  }, [src])
 
   if (errored) return <>&#127925;</>
-  return <AuthImg src={src} alt="" onError={() => setErrored(true)} />
+  return <img src={src} alt="" onError={() => setErrored(true)} />
 }
 
 export function NowPlaying({ track }: { track: QueueItem | null }) {
@@ -29,10 +32,12 @@ export function NowPlaying({ track }: { track: QueueItem | null }) {
     )
   }
 
+  const coverUrl = `${API_ROOT}/tracks/${track.slug}/cover`
+
   return (
     <div className="np-info">
       <div className="np-cover" id="npCover">
-        <Cover slug={track.slug} />
+        <Cover src={coverUrl} />
       </div>
       <div className="np-text">
         <div className="np-title" id="npTitle">
@@ -45,3 +50,4 @@ export function NowPlaying({ track }: { track: QueueItem | null }) {
     </div>
   )
 }
+

furumi-node-player/client/src/components/PlayerBar.tsx

@@ -1,28 +1,7 @@
 import { NowPlaying } from './NowPlaying'
-import { QueuePopover } from './queue-popover'
 import type { QueueItem } from './QueueList'
 
-type PlayerBarProps = {
+export function PlayerBar({ track }: { track: QueueItem | null }) {
-  track: QueueItem | null
-  queue: QueueItem[]
-  order: number[]
-  playingOrigIdx: number
-  scrollSignal: number
-  onQueuePlay: (origIdx: number) => void
-  onQueueRemove: (origIdx: number) => void
-  onQueueMove: (fromPos: number, toPos: number) => void
-}
-
-export function PlayerBar({
-  track,
-  queue,
-  order,
-  playingOrigIdx,
-  scrollSignal,
-  onQueuePlay,
-  onQueueRemove,
-  onQueueMove,
-}: PlayerBarProps) {
   return (
     <div className="player-bar">
       <NowPlaying track={track} />
@@ -51,15 +30,6 @@ export function PlayerBar({
         </div>
       </div>
       <div className="volume-row">
-        <QueuePopover
-          queue={queue}
-          order={order}
-          playingOrigIdx={playingOrigIdx}
-          scrollSignal={scrollSignal}
-          onPlay={onQueuePlay}
-          onRemove={onQueueRemove}
-          onMove={onQueueMove}
-        />
         <span className="vol-icon" id="volIcon">
           &#128266;
         </span>

furumi-node-player/client/src/components/QueueList.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { AuthImg } from './AuthImg'
+import { API_ROOT } from '../furumiApi'
 
 export type QueueItem = {
   slug: string
@@ -32,10 +32,14 @@ function fmt(secs: number) {
   return `${m}:${pad(s % 60)}`
 }
 
-function Cover({ slug }: { slug: string }) {
+function Cover({ src }: { src: string }) {
   const [errored, setErrored] = useState(false)
+  useEffect(() => {
+    setErrored(false)
+  }, [src])
+
   if (errored) return <>&#127925;</>
-  return <AuthImg src={`/tracks/${slug}/cover`} alt="" onError={() => setErrored(true)} />
+  return <img src={src} alt="" onError={() => setErrored(true)} />
 }
 
 export function QueueList({
@@ -73,7 +77,7 @@ export function QueueList({
         if (!t) return null
 
         const isPlaying = origIdx === playingOrigIdx
-        const hasAlbum = !!t.album_slug
+        const coverSrc = t.album_slug ? `${API_ROOT}/tracks/${t.slug}/cover` : ''
         const dur = t.duration ? fmt(t.duration) : ''
         const isDragging = draggingPos === pos
         const isDragOver = dragOverPos === pos
@@ -114,7 +118,7 @@ export function QueueList({
           >
             <span className="qi-index">{isPlaying ? '' : pos + 1}</span>
             <div className="qi-cover">
-              {hasAlbum ? <Cover slug={t.slug} /> : <>&#127925;</>}
+              {coverSrc ? <Cover src={coverSrc} /> : <>&#127925;</>}
             </div>
             <div className="qi-info">
               <div className="qi-title">{t.title}</div>

furumi-node-player/client/src/components/header/Header.tsx

@@ -1,109 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { SearchDropdown } from '../SearchDropdown'
-import { RecentPlays } from './RecentPlays'
-import styles from './header.module.css'
-
-type SearchResultItem = {
-  result_type: string
-  slug: string
-  name: string
-  detail?: string
-}
-
-type UserInfo = {
-  sub: string
-  name?: string
-  email?: string
-}
-
-type HeaderProps = {
-  searchOpen: boolean
-  searchResults: SearchResultItem[]
-  onSearchSelect: (type: string, slug: string) => void
-  onPlayTrack: (slug: string) => void
-  user: UserInfo
-}
-
-function UserMenu({ user, onShowRecent }: { user: UserInfo; onShowRecent: () => void }) {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', handleClick)
-    return () => document.removeEventListener('mousedown', handleClick)
-  }, [])
-
-  const initials = (user.name ?? user.sub)
-    .split(' ')
-    .map((w) => w[0])
-    .slice(0, 2)
-    .join('')
-    .toUpperCase()
-
-  return (
-    <div className={styles.userMenu} ref={ref}>
-      <button className={styles.userAvatar} onClick={() => setOpen(!open)} title={user.name ?? user.sub}>
-        {initials}
-      </button>
-      {open && (
-        <div className={styles.userDropdown}>
-          <div className={styles.userInfo}>
-            <div className={styles.userName}>{user.name ?? user.sub}</div>
-            {user.email && <div className={styles.userEmail}>{user.email}</div>}
-          </div>
-          <button className={styles.userAction} onClick={() => { setOpen(false); onShowRecent() }}>
-            Recent plays
-          </button>
-          <a href="/auth/logout" className={styles.userLogout}>Sign out</a>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function Header({
-  searchOpen,
-  searchResults,
-  onSearchSelect,
-  onPlayTrack,
-  user,
-}: HeaderProps) {
-  const [showRecent, setShowRecent] = useState(false)
-
-  return (
-    <>
-      <header className={styles.header}>
-        <div className={styles.headerLogo}>
-          <button className="btn-menu">&#9776;</button>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <circle cx="9" cy="18" r="3" />
-            <circle cx="18" cy="15" r="3" />
-            <path d="M12 18V6l9-3v3" />
-          </svg>
-          Furumi
-          <span className={styles.headerVersion}>v</span>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-          <div className="search-wrap">
-            <input id="searchInput" placeholder="Search..." />
-            <SearchDropdown
-              isOpen={searchOpen}
-              results={searchResults}
-              onSelect={onSearchSelect}
-            />
-          </div>
-          <UserMenu user={user} onShowRecent={() => setShowRecent(true)} />
-        </div>
-      </header>
-      {showRecent && (
-        <RecentPlays
-          onClose={() => setShowRecent(false)}
-          onPlay={onPlayTrack}
-        />
-      )}
-    </>
-  )
-}

furumi-node-player/client/src/components/header/RecentPlays.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useState } from 'react'
-import { getRecentPlays, type RecentPlay } from '../../furumiApi'
-import styles from './header.module.css'
-
-function timeAgo(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime()
-  const mins = Math.floor(diff / 60000)
-  if (mins < 1) return 'just now'
-  if (mins < 60) return `${mins}m ago`
-  const hrs = Math.floor(mins / 60)
-  if (hrs < 24) return `${hrs}h ago`
-  const days = Math.floor(hrs / 24)
-  return `${days}d ago`
-}
-
-export function RecentPlays({ onClose, onPlay }: { onClose: () => void; onPlay: (slug: string) => void }) {
-  const [plays, setPlays] = useState<RecentPlay[] | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    getRecentPlays().then((data) => {
-      setPlays(data)
-      setLoading(false)
-    })
-  }, [])
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [onClose])
-
-  return (
-    <div className={styles.recentOverlay} onClick={onClose}>
-      <div className={styles.recentPanel} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.recentHeader}>
-          <h2>Recent plays</h2>
-          <button className={styles.recentClose} onClick={onClose}>&#10005;</button>
-        </div>
-        <div className={styles.recentList}>
-          {loading && <p className={styles.recentEmpty}>Loading...</p>}
-          {!loading && (!plays || plays.length === 0) && (
-            <p className={styles.recentEmpty}>No play history yet</p>
-          )}
-          {plays?.map((p, i) => (
-            <div
-              key={`${p.track_slug}-${i}`}
-              className={styles.recentItem}
-              onClick={() => { onPlay(p.track_slug); onClose() }}
-            >
-              <div className={styles.recentTrack}>
-                <div className={styles.recentTitle}>{p.track_title}</div>
-                <div className={styles.recentArtist}>{p.artist_name}</div>
-              </div>
-              <div className={styles.recentTime}>{timeAgo(p.played_at)}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

furumi-node-player/client/src/components/header/header.module.css

@@ -1,234 +0,0 @@
-.header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.75rem 1.5rem;
-    background: var(--bg-panel);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    z-index: 10;
-}
-
-.headerLogo {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-weight: 700;
-    font-size: 1.1rem;
-    color: #ffffff;
-}
-
-.headerLogo svg {
-    width: 22px;
-    height: 22px;
-}
-
-.headerVersion {
-    font-size: 0.7rem;
-    color: var(--text-muted);
-    background: rgba(255, 255, 255, 0.05);
-    padding: 0.1rem 0.4rem;
-    border-radius: 4px;
-    margin-left: 0.25rem;
-    font-weight: 500;
-    text-decoration: none;
-}
-
-/* User menu */
-
-.userMenu {
-    position: relative;
-}
-
-.userAvatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: var(--accent);
-    color: #fff;
-    border: none;
-    font-size: 0.75rem;
-    font-weight: 600;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.2s;
-}
-
-.userAvatar:hover {
-    background: var(--accent-dim);
-}
-
-.userDropdown {
-    position: absolute;
-    top: calc(100% + 8px);
-    right: 0;
-    min-width: 200px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
-    z-index: 100;
-    overflow: hidden;
-    animation: fadeIn 0.15s ease;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-4px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.userInfo {
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--border);
-}
-
-.userName {
-    font-weight: 600;
-    font-size: 0.9rem;
-    color: var(--text);
-}
-
-.userEmail {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    margin-top: 2px;
-}
-
-.userLogout {
-    display: block;
-    padding: 10px 16px;
-    color: var(--danger);
-    text-decoration: none;
-    font-size: 0.85rem;
-    font-weight: 500;
-    transition: background 0.15s;
-}
-
-.userLogout:hover {
-    background: var(--bg-hover);
-}
-
-.userAction {
-    display: block;
-    padding: 10px 16px;
-    color: var(--text);
-    text-decoration: none;
-    font-size: 0.85rem;
-    font-weight: 500;
-    cursor: pointer;
-    background: none;
-    border: none;
-    width: 100%;
-    text-align: left;
-    transition: background 0.15s;
-}
-
-.userAction:hover {
-    background: var(--bg-hover);
-}
-
-/* Recent plays overlay */
-
-.recentOverlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 200;
-    display: grid;
-    place-items: center;
-    animation: fadeIn 0.15s ease;
-}
-
-.recentPanel {
-    width: min(480px, 90vw);
-    max-height: 70vh;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: 14px;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-}
-
-.recentHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border);
-}
-
-.recentHeader h2 {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text);
-    margin: 0;
-}
-
-.recentClose {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 1rem;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 4px;
-}
-
-.recentClose:hover {
-    color: var(--text);
-    background: var(--bg-hover);
-}
-
-.recentList {
-    overflow-y: auto;
-    flex: 1;
-}
-
-.recentItem {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 20px;
-    cursor: pointer;
-    transition: background 0.15s;
-}
-
-.recentItem:hover {
-    background: var(--bg-hover);
-}
-
-.recentTrack {
-    min-width: 0;
-    flex: 1;
-}
-
-.recentTitle {
-    font-size: 0.85rem;
-    color: var(--text);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.recentArtist {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    margin-top: 1px;
-}
-
-.recentTime {
-    font-size: 0.7rem;
-    color: var(--text-dim);
-    flex-shrink: 0;
-    margin-left: 12px;
-}
-
-.recentEmpty {
-    padding: 32px 20px;
-    text-align: center;
-    color: var(--text-muted);
-    font-size: 0.85rem;
-}

furumi-node-player/client/src/components/header/index.ts

@@ -1 +0,0 @@
-export * from './Header'

furumi-node-player/client/src/components/queue-popover/index.ts

@@ -1 +0,0 @@
-export * from './queue-popover'

furumi-node-player/client/src/components/queue-popover/queue-popover.module.css

@@ -1,68 +0,0 @@
-.root {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.35rem;
-  margin: 0;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  font: inherit;
-  line-height: 1;
-}
-
-.trigger:hover {
-  color: var(--text);
-  background: var(--bg-hover);
-}
-
-.triggerIcon {
-  font-size: 0.95rem;
-}
-
-.popover {
-  position: absolute;
-  bottom: calc(100% + 0.5rem);
-  right: 0;
-  z-index: 60;
-  display: flex;
-  flex-direction: column;
-  min-width: min(100vw - 2rem, 320px);
-  max-width: min(100vw - 2rem, 360px);
-  max-height: min(50vh, 360px);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  background: var(--bg-card);
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
-}
-
-.header {
-  flex-shrink: 0;
-  padding: 0.55rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  border-bottom: 1px solid var(--border);
-}
-
-.body {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 0.35rem 0.5rem;
-}
-
-.body :global(.queue-empty) {
-  padding: 1.25rem 0.75rem;
-  font-size: 0.8rem;
-}

furumi-node-player/client/src/components/queue-popover/queue-popover.tsx

@@ -1,86 +0,0 @@
-import { useEffect, useId, useRef, useState } from 'react'
-import { QueueList, type QueueItem } from '../QueueList'
-import styles from './queue-popover.module.css'
-
-export type QueuePopoverProps = {
-  queue: QueueItem[]
-  order: number[]
-  playingOrigIdx: number
-  scrollSignal: number
-  onPlay: (origIdx: number) => void
-  onRemove: (origIdx: number) => void
-  onMove: (fromPos: number, toPos: number) => void
-}
-
-export function QueuePopover({
-  queue,
-  order,
-  playingOrigIdx,
-  scrollSignal,
-  onPlay,
-  onRemove,
-  onMove,
-}: QueuePopoverProps) {
-  const [open, setOpen] = useState(false)
-  const rootRef = useRef<HTMLDivElement>(null)
-  const titleId = useId()
-  const panelId = useId()
-
-  useEffect(() => {
-    if (!open) return
-    function onDocMouseDown(e: MouseEvent) {
-      const el = rootRef.current
-      if (el && !el.contains(e.target as Node)) setOpen(false)
-    }
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') setOpen(false)
-    }
-    document.addEventListener('mousedown', onDocMouseDown)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onDocMouseDown)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [open])
-
-  return (
-    <div className={styles.root} ref={rootRef}>
-      <button
-        type="button"
-        className={styles.trigger}
-        title="Playback queue"
-        aria-expanded={open}
-        aria-haspopup="dialog"
-        aria-controls={open ? panelId : undefined}
-        onClick={() => setOpen((v) => !v)}
-      >
-        <span className={styles.triggerIcon} aria-hidden>
-          &#9776;
-        </span>
-      </button>
-      {open && (
-        <div
-          id={panelId}
-          className={styles.popover}
-          role="dialog"
-          aria-labelledby={titleId}
-        >
-          <div className={styles.header} id={titleId}>
-            Queue
-          </div>
-          <div className={styles.body}>
-            <QueueList
-              queue={queue}
-              order={order}
-              playingOrigIdx={playingOrigIdx}
-              scrollSignal={scrollSignal}
-              onPlay={onPlay}
-              onRemove={onRemove}
-              onMove={onMove}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

furumi-node-player/client/src/furumi-player.css

@@ -31,6 +31,40 @@
   --danger: #f87171;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.header-logo svg {
+  width: 22px;
+  height: 22px;
+}
+
+.header-version {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  margin-left: 0.25rem;
+  font-weight: 500;
+  text-decoration: none;
+}
 
 .btn-menu {
   display: none;
@@ -344,10 +378,6 @@
   color: var(--accent);
 }
 
-.qi-title {
-  color: #ffffff;
-}
-
 .queue-item .qi-index {
   font-size: 0.75rem;
   color: var(--text-muted);
@@ -501,7 +531,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #ffffff;
 }
 
 .np-artist {

furumi-node-player/client/src/furumiApi.ts

@@ -1,109 +1,46 @@
 import axios from 'axios'
-import type { Album, Artist, SearchResult, Track, TrackDetail } from './types'
 
-const FURUMI_API_BASE = import.meta.env.VITE_FURUMI_API_URL ?? ''
+const API_BASE = import.meta.env.VITE_API_BASE_URL ?? ''
-export const API_ROOT = `${FURUMI_API_BASE}/api`
+export const API_ROOT = `${API_BASE}/api`
+
+const apiKey = import.meta.env.VITE_API_KEY
 
 export const furumiApi = axios.create({
   baseURL: API_ROOT,
+  headers: apiKey ? { 'x-api-key': apiKey } : {},
 })
 
-function sendTokenToSW(token: string) {
+export async function getArtists() {
-  try {
+  const res = await furumiApi.get('/artists').catch(() => null)
-    const req = indexedDB.open('furumi-sw', 1)
-    req.onupgradeneeded = () => req.result.createObjectStore('auth')
-    req.onsuccess = () => {
-      const tx = req.result.transaction('auth', 'readwrite')
-      tx.objectStore('auth').put(token, 'bearer')
-    }
-  } catch { /* ignore */ }
-}
-
-export function setAuthToken(token: string) {
-  furumiApi.defaults.headers.common['Authorization'] = `Bearer ${token}`
-  sendTokenToSW(token)
-}
-
-export function clearAuthToken() {
-  delete furumiApi.defaults.headers.common['Authorization']
-}
-
-async function refreshToken(): Promise<boolean> {
-  try {
-    const res = await fetch('/auth/token', { credentials: 'include' })
-    if (!res.ok) return false
-    const data = await res.json()
-    if (data.access_token) {
-      setAuthToken(data.access_token)
-      return true
-    }
-  } catch { /* ignore */ }
-  return false
-}
-
-let refreshPromise: Promise<boolean> | null = null
-
-furumiApi.interceptors.response.use(
-  (response) => response,
-  async (error) => {
-    const original = error.config
-    if (error.response?.status === 401 && !original._retried) {
-      original._retried = true
-      if (!refreshPromise) {
-        refreshPromise = refreshToken().finally(() => { refreshPromise = null })
-      }
-      const ok = await refreshPromise
-      if (ok) return furumiApi(original)
-    }
-    return Promise.reject(error)
-  },
-)
-
-export async function getArtists(): Promise<Artist[] | null> {
-  const res = await furumiApi.get<Artist[]>('/artists').catch(() => null)
   return res?.data ?? null
 }
 
-export async function getArtistAlbums(artistSlug: string): Promise<Album[] | null> {
+export async function getArtistAlbums(artistSlug: string) {
-  const res = await furumiApi.get<Album[]>(`/artists/${artistSlug}/albums`).catch(() => null)
+  const res = await furumiApi.get(`/artists/${artistSlug}/albums`).catch(() => null)
   return res?.data ?? null
 }
 
-export async function getAlbumTracks(albumSlug: string): Promise<Track[] | null> {
+export async function getAlbumTracks(albumSlug: string) {
-  const res = await furumiApi.get<Track[]>(`/albums/${albumSlug}`).catch(() => null)
+  const res = await furumiApi.get(`/albums/${albumSlug}`).catch(() => null)
   return res?.data ?? null
 }
 
-export async function getArtistTracks(artistSlug: string): Promise<Track[] | null> {
+export async function getArtistTracks(artistSlug: string) {
-  const res = await furumiApi.get<Track[]>(`/artists/${artistSlug}/tracks`).catch(() => null)
+  const res = await furumiApi.get(`/artists/${artistSlug}/tracks`).catch(() => null)
   return res?.data ?? null
 }
 
-export async function searchTracks(query: string): Promise<SearchResult[] | null> {
+export async function searchTracks(query: string) {
-  const res = await furumiApi
+  const res = await furumiApi.get(`/search?q=${encodeURIComponent(query)}`).catch(() => null)
-    .get<SearchResult[]>(`/search?q=${encodeURIComponent(query)}`)
-    .catch(() => null)
   return res?.data ?? null
 }
 
-export async function getTrackInfo(trackSlug: string): Promise<TrackDetail | null> {
+export async function getTrackInfo(trackSlug: string) {
-  const res = await furumiApi.get<TrackDetail>(`/tracks/${trackSlug}`).catch(() => null)
+  const res = await furumiApi.get(`/tracks/${trackSlug}`).catch(() => null)
   return res?.data ?? null
 }
 
-export type RecentPlay = {
+export async function preloadStream(trackSlug: string) {
-  track_slug: string
+  await furumiApi.get(`/stream/${trackSlug}`).catch(() => null)
-  track_title: string
-  artist_name: string
-  album_slug: string | null
-  played_at: string
 }
 
-export async function getRecentPlays(): Promise<RecentPlay[] | null> {
-  const res = await furumiApi.get<RecentPlay[]>('/me/recent').catch(() => null)
-  return res?.data ?? null
-}
-
-export async function recordPlay(trackSlug: string): Promise<void> {
-  await furumiApi.post(`/tracks/${trackSlug}/play`).catch(() => null)
-}

furumi-node-player/client/src/index.css

@@ -1,8 +1,3 @@
-html,
-body {
-  height: 100%;
-}
-
 body {
   margin: 0;
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -10,10 +5,6 @@ body {
   background-color: #f3f6fb;
 }
 
-#root {
-  height: 100%;
-}
-
 * {
   box-sizing: border-box;
 }

furumi-node-player/client/src/main.tsx

@@ -1,18 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { Provider } from 'react-redux'
-import { store } from './store'
 import './index.css'
 import App from './App.tsx'
 
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw.js')
-}
-
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Provider store={store}>
+    <App />
-      <App />
-    </Provider>
   </StrictMode>,
 )

furumi-node-player/client/src/store/index.ts

@@ -1,25 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit'
-import { useDispatch, useSelector, type TypedUseSelectorHook } from 'react-redux'
-import artistsReducer from './slices/artistsSlice'
-import albumsReducer from './slices/albumsSlice'
-import albumTracksReducer from './slices/albumTracksSlice'
-import artistTracksReducer from './slices/artistTracksSlice'
-import trackDetailReducer from './slices/trackDetailSlice'
-import queueReducer from './slices/queueSlice'
-
-export const store = configureStore({
-  reducer: {
-    artists: artistsReducer,
-    albums: albumsReducer,
-    albumTracks: albumTracksReducer,
-    artistTracks: artistTracksReducer,
-    trackDetail: trackDetailReducer,
-    queue: queueReducer,
-  },
-})
-
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
-
-export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

furumi-node-player/client/src/store/slices/albumTracksSlice.ts

@@ -1,54 +0,0 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import type { Track } from '../../types'
-import { getAlbumTracks } from '../../furumiApi'
-
-export const fetchAlbumTracks = createAsyncThunk(
-  'albumTracks/fetch',
-  async (albumSlug: string, { rejectWithValue }) => {
-    const data = await getAlbumTracks(albumSlug)
-    if (data === null) return rejectWithValue('Failed to fetch album tracks')
-    return { albumSlug, tracks: data }
-  },
-)
-
-interface AlbumTracksState {
-  byAlbum: Record<string, Track[]>
-  loading: boolean
-  error: string | null
-}
-
-const initialState: AlbumTracksState = {
-  byAlbum: {},
-  loading: false,
-  error: null,
-}
-
-const albumTracksSlice = createSlice({
-  name: 'albumTracks',
-  initialState,
-  reducers: {
-    clearAlbumTracks(state) {
-      state.byAlbum = {}
-      state.error = null
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchAlbumTracks.pending, (state) => {
-        state.loading = true
-        state.error = null
-      })
-      .addCase(fetchAlbumTracks.fulfilled, (state, action) => {
-        state.loading = false
-        state.byAlbum[action.payload.albumSlug] = action.payload.tracks
-        state.error = null
-      })
-      .addCase(fetchAlbumTracks.rejected, (state, action) => {
-        state.loading = false
-        state.error = action.payload as string ?? 'Unknown error'
-      })
-  },
-})
-
-export const { clearAlbumTracks } = albumTracksSlice.actions
-export default albumTracksSlice.reducer

furumi-node-player/client/src/store/slices/albumsSlice.ts

@@ -1,54 +0,0 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import type { Album } from '../../types'
-import { getArtistAlbums } from '../../furumiApi'
-
-export const fetchArtistAlbums = createAsyncThunk(
-  'albums/fetchByArtist',
-  async (artistSlug: string, { rejectWithValue }) => {
-    const data = await getArtistAlbums(artistSlug)
-    if (data === null) return rejectWithValue('Failed to fetch albums')
-    return { artistSlug, albums: data }
-  },
-)
-
-interface AlbumsState {
-  byArtist: Record<string, Album[]>
-  loading: boolean
-  error: string | null
-}
-
-const initialState: AlbumsState = {
-  byArtist: {},
-  loading: false,
-  error: null,
-}
-
-const albumsSlice = createSlice({
-  name: 'albums',
-  initialState,
-  reducers: {
-    clearAlbums(state) {
-      state.byArtist = {}
-      state.error = null
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchArtistAlbums.pending, (state) => {
-        state.loading = true
-        state.error = null
-      })
-      .addCase(fetchArtistAlbums.fulfilled, (state, action) => {
-        state.loading = false
-        state.byArtist[action.payload.artistSlug] = action.payload.albums
-        state.error = null
-      })
-      .addCase(fetchArtistAlbums.rejected, (state, action) => {
-        state.loading = false
-        state.error = action.payload as string ?? 'Unknown error'
-      })
-  },
-})
-
-export const { clearAlbums } = albumsSlice.actions
-export default albumsSlice.reducer

furumi-node-player/client/src/store/slices/artistTracksSlice.ts

@@ -1,54 +0,0 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import type { Track } from '../../types'
-import { getArtistTracks } from '../../furumiApi'
-
-export const fetchArtistTracks = createAsyncThunk(
-  'artistTracks/fetch',
-  async (artistSlug: string, { rejectWithValue }) => {
-    const data = await getArtistTracks(artistSlug)
-    if (data === null) return rejectWithValue('Failed to fetch artist tracks')
-    return { artistSlug, tracks: data }
-  },
-)
-
-interface ArtistTracksState {
-  byArtist: Record<string, Track[]>
-  loading: boolean
-  error: string | null
-}
-
-const initialState: ArtistTracksState = {
-  byArtist: {},
-  loading: false,
-  error: null,
-}
-
-const artistTracksSlice = createSlice({
-  name: 'artistTracks',
-  initialState,
-  reducers: {
-    clearArtistTracks(state) {
-      state.byArtist = {}
-      state.error = null
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchArtistTracks.pending, (state) => {
-        state.loading = true
-        state.error = null
-      })
-      .addCase(fetchArtistTracks.fulfilled, (state, action) => {
-        state.loading = false
-        state.byArtist[action.payload.artistSlug] = action.payload.tracks
-        state.error = null
-      })
-      .addCase(fetchArtistTracks.rejected, (state, action) => {
-        state.loading = false
-        state.error = action.payload as string ?? 'Unknown error'
-      })
-  },
-})
-
-export const { clearArtistTracks } = artistTracksSlice.actions
-export default artistTracksSlice.reducer

furumi-node-player/client/src/store/slices/artistsSlice.ts

@@ -1,54 +0,0 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import type { Artist } from '../../types'
-import { getArtists } from '../../furumiApi'
-
-export const fetchArtists = createAsyncThunk(
-  'artists/fetch',
-  async (_, { rejectWithValue }) => {
-    const data = await getArtists()
-    if (data === null) return rejectWithValue('Failed to fetch artists')
-    return data
-  },
-)
-
-interface ArtistsState {
-  items: Artist[]
-  loading: boolean
-  error: string | null
-}
-
-const initialState: ArtistsState = {
-  items: [],
-  loading: false,
-  error: null,
-}
-
-const artistsSlice = createSlice({
-  name: 'artists',
-  initialState,
-  reducers: {
-    clearArtists(state) {
-      state.items = []
-      state.error = null
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchArtists.pending, (state) => {
-        state.loading = true
-        state.error = null
-      })
-      .addCase(fetchArtists.fulfilled, (state, action) => {
-        state.loading = false
-        state.items = action.payload
-        state.error = null
-      })
-      .addCase(fetchArtists.rejected, (state, action) => {
-        state.loading = false
-        state.error = action.payload as string ?? 'Unknown error'
-      })
-  },
-})
-
-export const { clearArtists } = artistsSlice.actions
-export default artistsSlice.reducer

furumi-node-player/client/src/store/slices/queueSlice.ts

@@ -1,274 +0,0 @@
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import type { QueueItem } from '../../components/QueueList'
-
-export interface QueueState {
-  items: QueueItem[]
-  currentIndex: number
-  shuffle: boolean
-  repeatAll: boolean
-  shuffleOrder: number[]
-  scrollSignal: number
-}
-
-function readShufflePref(): boolean {
-  try {
-    return window.localStorage.getItem('furumi_shuffle') === '1'
-  } catch {
-    return false
-  }
-}
-
-function readRepeatPref(): boolean {
-  try {
-    return window.localStorage.getItem('furumi_repeat') !== '0'
-  } catch {
-    return true
-  }
-}
-
-function buildShuffleOrder(state: QueueState) {
-  const n = state.items.length
-  if (n === 0) {
-    state.shuffleOrder = []
-    return
-  }
-  const order = [...Array(n).keys()]
-  for (let i = order.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1))
-    ;[order[i], order[j]] = [order[j], order[i]]
-  }
-  if (state.currentIndex !== -1) {
-    const ci = order.indexOf(state.currentIndex)
-    if (ci > 0) {
-      order.splice(ci, 1)
-      order.unshift(state.currentIndex)
-    }
-  }
-  state.shuffleOrder = order
-}
-
-function ensureShuffleOrder(state: QueueState) {
-  if (!state.shuffle) return
-  if (state.shuffleOrder.length !== state.items.length) {
-    buildShuffleOrder(state)
-  }
-}
-
-const initialState: QueueState = {
-  items: [],
-  currentIndex: -1,
-  shuffle: typeof window !== 'undefined' ? readShufflePref() : false,
-  repeatAll: typeof window !== 'undefined' ? readRepeatPref() : true,
-  shuffleOrder: [],
-  scrollSignal: 0,
-}
-
-const queueSlice = createSlice({
-  name: 'queue',
-  initialState,
-  reducers: {
-    addTrack(
-      state,
-      action: PayloadAction<{
-        track: QueueItem
-        playNow?: boolean
-      }>,
-    ) {
-      const { track, playNow } = action.payload
-      const existing = state.items.findIndex((t) => t.slug === track.slug)
-      if (existing !== -1) {
-        if (playNow) {
-          state.currentIndex = existing
-          state.scrollSignal += 1
-        }
-        return
-      }
-      const oldLen = state.items.length
-      const idle = state.currentIndex === -1
-      state.items.push(track)
-      ensureShuffleOrder(state)
-      if (playNow || (oldLen === 0 && idle)) {
-        state.currentIndex = state.items.length - 1
-        state.scrollSignal += 1
-      }
-    },
-
-    addTracksBatch(
-      state,
-      action: PayloadAction<{
-        tracks: QueueItem[]
-        playFirst?: boolean
-      }>,
-    ) {
-      const { tracks, playFirst } = action.payload
-      let firstNewIdx: number | null = null
-      for (const t of tracks) {
-        if (state.items.some((q) => q.slug === t.slug)) continue
-        if (firstNewIdx === null) firstNewIdx = state.items.length
-        state.items.push(t)
-      }
-      ensureShuffleOrder(state)
-      if (firstNewIdx === null) return
-      if (playFirst || state.currentIndex === -1) {
-        state.currentIndex = firstNewIdx
-        state.scrollSignal += 1
-      }
-    },
-
-    replaceQueue(
-      state,
-      action: PayloadAction<{
-        items: QueueItem[]
-        playFromIndex?: number
-      }>,
-    ) {
-      const { items, playFromIndex = 0 } = action.payload
-      state.items = items
-      state.currentIndex =
-        items.length > 0 ? Math.min(playFromIndex, items.length - 1) : -1
-      state.shuffleOrder = []
-      ensureShuffleOrder(state)
-    },
-
-    clearQueue(state) {
-      state.items = []
-      state.currentIndex = -1
-      state.shuffleOrder = []
-      state.scrollSignal += 1
-    },
-
-    playAtIndex(state, action: PayloadAction<number>) {
-      const i = action.payload
-      if (i < 0 || i >= state.items.length) return
-      state.currentIndex = i
-      state.scrollSignal += 1
-    },
-
-    removeFromQueueAt(state, action: PayloadAction<number>) {
-      const idx = action.payload
-      if (idx < 0 || idx >= state.items.length) return
-
-      if (idx === state.currentIndex) {
-        state.currentIndex = -1
-      } else if (state.currentIndex > idx) {
-        state.currentIndex -= 1
-      }
-
-      state.items.splice(idx, 1)
-
-      if (state.shuffle) {
-        const si = state.shuffleOrder.indexOf(idx)
-        if (si !== -1) state.shuffleOrder.splice(si, 1)
-        for (let i = 0; i < state.shuffleOrder.length; i++) {
-          if (state.shuffleOrder[i] > idx) state.shuffleOrder[i] -= 1
-        }
-      }
-
-      ensureShuffleOrder(state)
-    },
-
-    moveQueueItemInOrder(
-      state,
-      action: PayloadAction<{ fromPos: number; toPos: number }>,
-    ) {
-      const { fromPos, toPos } = action.payload
-      if (fromPos === toPos) return
-
-      if (state.shuffle) {
-        const order = state.shuffleOrder
-        if (fromPos < 0 || fromPos >= order.length) return
-        if (toPos < 0 || toPos >= order.length) return
-        const item = order.splice(fromPos, 1)[0]
-        order.splice(toPos, 0, item)
-        return
-      }
-
-      const items = state.items
-      if (fromPos < 0 || fromPos >= items.length) return
-      if (toPos < 0 || toPos >= items.length) return
-      const qIdx = state.currentIndex
-      const item = items.splice(fromPos, 1)[0]
-      items.splice(toPos, 0, item)
-      if (qIdx === fromPos) state.currentIndex = toPos
-      else if (fromPos < qIdx && toPos >= qIdx) state.currentIndex -= 1
-      else if (fromPos > qIdx && toPos <= qIdx) state.currentIndex += 1
-    },
-
-    toggleShuffle(state) {
-      state.shuffle = !state.shuffle
-      try {
-        window.localStorage.setItem('furumi_shuffle', state.shuffle ? '1' : '0')
-      } catch {
-        // ignore
-      }
-      if (state.shuffle) buildShuffleOrder(state)
-      else state.shuffleOrder = []
-    },
-
-    toggleRepeat(state) {
-      state.repeatAll = !state.repeatAll
-      try {
-        window.localStorage.setItem('furumi_repeat', state.repeatAll ? '1' : '0')
-      } catch {
-        // ignore
-      }
-    },
-
-    rebuildShuffleOrder(state) {
-      if (state.shuffle) buildShuffleOrder(state)
-    },
-  },
-})
-
-export const {
-  addTrack,
-  addTracksBatch,
-  replaceQueue,
-  clearQueue,
-  playAtIndex,
-  removeFromQueueAt,
-  moveQueueItemInOrder,
-  toggleShuffle,
-  toggleRepeat,
-  rebuildShuffleOrder,
-} = queueSlice.actions
-
-type QueueSliceRoot = { queue: QueueState }
-
-export function selectQueueItems(state: QueueSliceRoot) {
-  return state.queue.items
-}
-
-// TODO: toggle shuffle should rebuild the shuffle order
-export function selectQueueOrder(state: QueueSliceRoot): number[] {
-  const q = state.queue
-  if (!q.shuffle) return q.items.map((_, i) => i)
-  if (q.shuffleOrder.length !== q.items.length) {
-    return q.items.map((_, i) => i)
-  }
-  return q.shuffleOrder
-}
-
-export function selectPlayingOrigIdx(state: QueueSliceRoot) {
-  return state.queue.currentIndex
-}
-
-export function selectQueueScrollSignal(state: QueueSliceRoot) {
-  return state.queue.scrollSignal
-}
-
-export function selectNowPlayingTrack(state: QueueSliceRoot): QueueItem | null {
-  const q = state.queue
-  if (q.currentIndex < 0 || q.currentIndex >= q.items.length) return null
-  return q.items[q.currentIndex]
-}
-
-export function selectShuffle(state: QueueSliceRoot) {
-  return state.queue.shuffle
-}
-
-export function selectRepeatAll(state: QueueSliceRoot) {
-  return state.queue.repeatAll
-}
-
-export default queueSlice.reducer

furumi-node-player/client/src/store/slices/trackDetailSlice.ts

@@ -1,57 +0,0 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import type { TrackDetail } from '../../types'
-import { getTrackInfo } from '../../furumiApi'
-
-export const fetchTrackDetail = createAsyncThunk(
-  'trackDetail/fetch',
-  async (trackSlug: string, { rejectWithValue }) => {
-    const data = await getTrackInfo(trackSlug)
-    if (data === null) return rejectWithValue('Failed to fetch track detail')
-    return { trackSlug, detail: data }
-  },
-)
-
-interface TrackDetailState {
-  bySlug: Record<string, TrackDetail>
-  loading: boolean
-  error: string | null
-}
-
-const initialState: TrackDetailState = {
-  bySlug: {},
-  loading: false,
-  error: null,
-}
-
-const trackDetailSlice = createSlice({
-  name: 'trackDetail',
-  initialState,
-  reducers: {
-    clearTrackDetail(state) {
-      state.bySlug = {}
-      state.error = null
-    },
-    removeTrackDetail(state, action: { payload: string }) {
-      delete state.bySlug[action.payload]
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchTrackDetail.pending, (state) => {
-        state.loading = true
-        state.error = null
-      })
-      .addCase(fetchTrackDetail.fulfilled, (state, action) => {
-        state.loading = false
-        state.bySlug[action.payload.trackSlug] = action.payload.detail
-        state.error = null
-      })
-      .addCase(fetchTrackDetail.rejected, (state, action) => {
-        state.loading = false
-        state.error = action.payload as string ?? 'Unknown error'
-      })
-  },
-})
-
-export const { clearTrackDetail, removeTrackDetail } = trackDetailSlice.actions
-export default trackDetailSlice.reducer

furumi-node-player/client/src/types.ts

@@ -1,42 +0,0 @@
-// API entity types (see PLAYER-API.md)
-
-export interface Artist {
-  slug: string
-  name: string
-  album_count: number
-  track_count: number
-}
-
-export interface Album {
-  slug: string
-  name: string
-  year: number | null
-  track_count: number
-  has_cover: boolean
-}
-
-export interface Track {
-  slug: string
-  title: string
-  track_number: number | null
-  duration_secs: number
-  artist_name: string
-  album_name: string | null
-  album_slug: string | null
-  genre: string | null
-}
-
-export interface TrackDetail extends Track {
-  storage_path: string
-  artist_slug: string
-  album_year: number | null
-}
-
-export type SearchResultType = 'artist' | 'album' | 'track'
-
-export interface SearchResult {
-  result_type: SearchResultType
-  slug: string
-  name: string
-  detail: string | null
-}

furumi-node-player/client/vite.config.ts

@@ -6,16 +6,8 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      '/auth': {
-        target: 'http://localhost:3001',
-        changeOrigin: true,
-      },
-      '/callback': {
-        target: 'http://localhost:3001',
-        changeOrigin: true,
-      },
       '/api': {
-        target: 'http://localhost:8085',
+        target: 'http://localhost:3001',
         changeOrigin: true,
       },
     },

furumi-node-player/server/src/index.ts

@@ -1,6 +1,5 @@
 import 'dotenv/config';
 
-import path from 'path';
 import cors from 'cors';
 import express from 'express';
 import { auth } from 'express-openid-connect';
@@ -24,11 +23,12 @@ const oidcConfig = {
   clientSecret: process.env.OIDC_CLIENT_SECRET ?? '',
   authorizationParams: {
     response_type: 'code',
-    scope: process.env.OIDC_SCOPE ?? 'openid profile email offline_access',
+    scope: process.env.OIDC_SCOPE ?? 'openid profile email',
   },
 };
 
 if (!disableAuth && (!oidcConfig.clientID || !oidcConfig.issuerBaseURL || !oidcConfig.clientSecret)) {
+  // Keep a clear startup failure if OIDC is not configured.
   throw new Error(
     'OIDC config is missing. Set OIDC_ISSUER_BASE_URL, OIDC_CLIENT_ID, OIDC_CLIENT_SECRET in server/.env (or set DISABLE_AUTH=true)',
   );
@@ -46,11 +46,11 @@ if (!disableAuth) {
   app.use(auth(oidcConfig));
 }
 
-app.get('/auth/health', (_req, res) => {
+app.get('/api/health', (_req, res) => {
   res.json({ ok: true });
 });
 
-app.get('/auth/me', (req, res) => {
+app.get('/api/me', (req, res) => {
   if (disableAuth) {
     res.json({
       authenticated: false,
@@ -74,42 +74,7 @@ app.get('/auth/me', (req, res) => {
   });
 });
 
-app.get('/auth/token', async (req, res) => {
+app.get('/api/login', (req, res) => {
-  if (disableAuth) {
-    res.status(204).end();
-    return;
-  }
-
-  if (!req.oidc.isAuthenticated()) {
-    res.status(401).json({ authenticated: false });
-    return;
-  }
-
-  let accessToken = req.oidc.accessToken;
-  if (!accessToken?.access_token) {
-    res.status(500).json({ error: 'no access token in session' });
-    return;
-  }
-
-  // Refresh if expired
-  if (accessToken.isExpired()) {
-    try {
-      accessToken = await accessToken.refresh();
-    } catch (e) {
-      console.error('Token refresh failed:', e);
-      res.status(401).json({ error: 'token refresh failed' });
-      return;
-    }
-  }
-
-  res.json({
-    access_token: accessToken.access_token,
-    token_type: 'Bearer',
-    expires_in: accessToken.expires_in,
-  });
-});
-
-app.get('/auth/login', (req, res) => {
   if (disableAuth) {
     res.status(204).end();
     return;
@@ -120,7 +85,7 @@ app.get('/auth/login', (req, res) => {
   });
 });
 
-app.get('/auth/logout', (req, res) => {
+app.get('/api/logout', (req, res) => {
   if (disableAuth) {
     res.status(204).end();
     return;
@@ -131,13 +96,6 @@ app.get('/auth/logout', (req, res) => {
   });
 });
 
-// Production: serve Vite-built client as static files
-const clientDist = path.resolve(import.meta.dirname, '../../client/dist');
-app.use(express.static(clientDist));
-app.get('/{*path}', (_req, res) => {
-  res.sendFile(path.join(clientDist, 'index.html'));
-});
-
 app.listen(port, () => {
   console.log(
     `${disableAuth ? 'NO-AUTH' : 'OIDC auth'} server listening on http://localhost:${port}`,

furumi-web-player/Cargo.toml

@@ -9,7 +9,6 @@ axum = { version = "0.7", features = ["tokio", "macros"] }
 clap = { version = "4.5", features = ["derive", "env"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-chrono = { version = "0.4", features = ["serde"] }
 sqlx = { version = "0.8", features = ["runtime-tokio-rustls", "postgres", "chrono", "uuid", "migrate"] }
 tokio = { version = "1.50", features = ["full"] }
 tower = { version = "0.4", features = ["util"] }
@@ -19,8 +18,7 @@ mime_guess = "2.0"
 symphonia = { version = "0.5", default-features = false, features = ["mp3", "aac", "flac", "vorbis", "wav", "alac", "adpcm", "pcm", "mpa", "isomp4", "ogg", "aiff", "mkv"] }
 tokio-util = { version = "0.7", features = ["io"] }
 openidconnect = "3.4"
-reqwest = { version = "0.12", default-features = false, features = ["rustls-tls", "json"] }
+reqwest = { version = "0.12", default-features = false, features = ["rustls-tls"] }
-jsonwebtoken = "9"
 sha2 = "0.10"
 hmac = "0.12"
 base64 = "0.22"

furumi-web-player/src/db.rs

@@ -82,82 +82,6 @@ pub struct SearchResult {
     pub detail: Option<String>, // artist name for albums/tracks
 }
 
-// --- User management ---
-
-pub async fn upsert_user(
-    pool: &PgPool,
-    id: &str,
-    username: &str,
-    display_name: Option<&str>,
-    email: Option<&str>,
-) -> Result<(), sqlx::Error> {
-    sqlx::query(
-        r#"INSERT INTO users (id, username, display_name, email, last_seen_at)
-           VALUES ($1, $2, $3, $4, NOW())
-           ON CONFLICT (id) DO UPDATE SET
-             username = EXCLUDED.username,
-             display_name = EXCLUDED.display_name,
-             email = EXCLUDED.email,
-             last_seen_at = NOW()"#
-    )
-    .bind(id)
-    .bind(username)
-    .bind(display_name)
-    .bind(email)
-    .execute(pool)
-    .await?;
-    Ok(())
-}
-
-pub async fn record_play_event(
-    pool: &PgPool,
-    user_id: &str,
-    track_slug: &str,
-) -> Result<bool, sqlx::Error> {
-    let result = sqlx::query(
-        r#"INSERT INTO play_events (user_id, track_id, played_at)
-           SELECT $1, t.id, NOW()
-           FROM tracks t WHERE t.slug = $2"#
-    )
-    .bind(user_id)
-    .bind(track_slug)
-    .execute(pool)
-    .await?;
-    Ok(result.rows_affected() > 0)
-}
-
-#[derive(Debug, Serialize, sqlx::FromRow)]
-pub struct RecentPlay {
-    pub track_slug: String,
-    pub track_title: String,
-    pub artist_name: String,
-    pub album_slug: Option<String>,
-    pub played_at: chrono::DateTime<chrono::Utc>,
-}
-
-pub async fn recent_plays(
-    pool: &PgPool,
-    user_id: &str,
-    limit: i32,
-) -> Result<Vec<RecentPlay>, sqlx::Error> {
-    sqlx::query_as::<_, RecentPlay>(
-        r#"SELECT t.slug AS track_slug, t.title AS track_title,
-           ar.name AS artist_name, al.slug AS album_slug,
-           pe.played_at
-           FROM play_events pe
-           JOIN tracks t ON pe.track_id = t.id
-           JOIN artists ar ON t.artist_id = ar.id
-           LEFT JOIN albums al ON t.album_id = al.id
-           WHERE pe.user_id = $1
-           ORDER BY pe.played_at DESC
-           LIMIT $2"#
-    )
-    .bind(user_id)
-    .bind(limit)
-    .fetch_all(pool)
-    .await
-}
-
 // --- Queries ---
 
 pub async fn list_artists(pool: &PgPool) -> Result<Vec<ArtistListItem>, sqlx::Error> {

furumi-web-player/src/main.rs

@@ -40,6 +40,9 @@ struct Args {
     #[arg(long, env = "FURUMI_PLAYER_OIDC_SESSION_SECRET")]
     oidc_session_secret: Option<String>,
 
+    /// API key for x-api-key header auth (alternative to OIDC session)
+    #[arg(long, env = "FURUMI_PLAYER_API_KEY")]
+    api_key: Option<String>,
 }
 
 #[tokio::main]
@@ -91,10 +94,15 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
         std::process::exit(1);
     });
 
+    if args.api_key.is_some() {
+        tracing::info!("x-api-key auth: enabled");
+    }
+
     let state = Arc::new(web::AppState {
         pool,
         storage_dir: Arc::new(args.storage_dir),
         oidc: oidc_state,
+        api_key: args.api_key,
     });
 
     tracing::info!("Web player: http://{}", bind_addr);

furumi-web-player/src/web/api.rs

@@ -9,10 +9,8 @@ use axum::{
 use serde::Deserialize;
 use tokio::io::{AsyncReadExt, AsyncSeekExt};
 
-use axum::Extension;
 use crate::db;
 use super::AppState;
-use super::auth::AuthUser;
 
 type S = Arc<AppState>;
 
@@ -293,30 +291,6 @@ pub async fn search(State(state): State<S>, Query(q): Query<SearchQuery>) -> imp
     }
 }
 
-// --- Play tracking ---
-
-pub async fn recent_plays(
-    State(state): State<S>,
-    Extension(user): Extension<AuthUser>,
-) -> impl IntoResponse {
-    match db::recent_plays(&state.pool, &user.id, 50).await {
-        Ok(plays) => (StatusCode::OK, Json(serde_json::to_value(plays).unwrap())).into_response(),
-        Err(e) => error_json(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
-    }
-}
-
-pub async fn record_play(
-    State(state): State<S>,
-    Path(slug): Path<String>,
-    Extension(user): Extension<AuthUser>,
-) -> impl IntoResponse {
-    match db::record_play_event(&state.pool, &user.id, &slug).await {
-        Ok(true) => StatusCode::NO_CONTENT.into_response(),
-        Ok(false) => error_json(StatusCode::NOT_FOUND, "track not found"),
-        Err(e) => error_json(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
-    }
-}
-
 // --- Helpers ---
 
 fn error_json(status: StatusCode, message: &str) -> Response {

furumi-web-player/src/web/auth.rs

@@ -3,9 +3,10 @@ use axum::{
     extract::{Request, State},
     http::{header, HeaderMap, StatusCode},
     middleware::Next,
-    response::{IntoResponse, Redirect, Response},
+    response::{Html, IntoResponse, Redirect, Response},
 };
 
+const X_API_KEY: &str = "x-api-key";
 use openidconnect::{
     core::{CoreClient, CoreProviderMetadata, CoreResponseType},
     reqwest::async_http_client,
@@ -17,26 +18,17 @@ use serde::Deserialize;
 
 use base64::Engine;
 use hmac::{Hmac, Mac};
-use jsonwebtoken::{decode, decode_header, DecodingKey, Validation as JwtValidation};
-use jsonwebtoken::jwk::JwkSet;
-use std::time::{Duration, Instant};
-use tokio::sync::RwLock;
 
 use super::AppState;
 use std::sync::Arc;
 
 const SESSION_COOKIE: &str = "furumi_session";
-const JWKS_CACHE_TTL: Duration = Duration::from_secs(3600);
 
 type HmacSha256 = Hmac<sha2::Sha256>;
 
 pub struct OidcState {
     pub client: CoreClient,
     pub session_secret: Vec<u8>,
-    jwks_uri: String,
-    issuer_url: String,
-    jwks_cache: RwLock<Option<(JwkSet, Instant)>>,
-    http_client: reqwest::Client,
 }
 
 pub async fn oidc_init(
@@ -52,9 +44,6 @@ pub async fn oidc_init(
     )
     .await?;
 
-    let jwks_uri = provider_metadata.jwks_uri().to_string();
-    let issuer_url = provider_metadata.issuer().to_string();
-
     let client = CoreClient::from_provider_metadata(
         provider_metadata,
         ClientId::new(client_id),
@@ -73,84 +62,9 @@ pub async fn oidc_init(
         b
     };
 
-    let http_client = reqwest::Client::new();
-
-    tracing::info!("JWKS URI: {}", jwks_uri);
-
     Ok(OidcState {
         client,
         session_secret,
-        jwks_uri,
-        issuer_url,
-        jwks_cache: RwLock::new(None),
-        http_client,
-    })
-}
-
-impl OidcState {
-    async fn get_jwks(&self) -> anyhow::Result<JwkSet> {
-        {
-            let cache = self.jwks_cache.read().await;
-            if let Some((ref jwks, fetched_at)) = *cache {
-                if fetched_at.elapsed() < JWKS_CACHE_TTL {
-                    return Ok(jwks.clone());
-                }
-            }
-        }
-        self.refresh_jwks().await
-    }
-
-    async fn refresh_jwks(&self) -> anyhow::Result<JwkSet> {
-        tracing::debug!("Fetching JWKS from {}", self.jwks_uri);
-        let jwks: JwkSet = self.http_client.get(&self.jwks_uri).send().await?.json().await?;
-        let mut cache = self.jwks_cache.write().await;
-        *cache = Some((jwks.clone(), Instant::now()));
-        Ok(jwks)
-    }
-}
-
-#[derive(Debug, Clone)]
-pub struct AuthUser {
-    pub id: String,
-    pub username: String,
-    pub display_name: Option<String>,
-    pub email: Option<String>,
-}
-
-#[derive(Debug, serde::Deserialize)]
-struct BearerClaims {
-    sub: String,
-    preferred_username: Option<String>,
-    name: Option<String>,
-    email: Option<String>,
-}
-
-async fn validate_bearer_token(oidc: &OidcState, token: &str) -> Option<AuthUser> {
-    let header = decode_header(token).ok()?;
-    let kid = header.kid.as_ref()?;
-
-    let mut jwks = oidc.get_jwks().await.ok()?;
-    let mut jwk = jwks.find(kid);
-
-    // Handle key rotation: refresh JWKS if kid not found
-    if jwk.is_none() {
-        jwks = oidc.refresh_jwks().await.ok()?;
-        jwk = jwks.find(kid);
-    }
-
-    let key = DecodingKey::from_jwk(jwk?).ok()?;
-
-    let mut validation = JwtValidation::new(header.alg);
-    validation.set_issuer(&[&oidc.issuer_url]);
-    validation.validate_aud = false;
-
-    let data = decode::<BearerClaims>(token, &key, &validation).ok()?;
-    let c = data.claims;
-    Some(AuthUser {
-        id: c.sub.clone(),
-        username: c.preferred_username.unwrap_or(c.sub),
-        display_name: c.name,
-        email: c.email,
     })
 }
 
@@ -180,73 +94,75 @@ fn verify_sso_cookie(secret: &[u8], cookie_val: &str) -> Option<String> {
     }
 }
 
-/// Auth middleware: requires valid Bearer JWT or SSO session cookie.
+/// Auth middleware: requires valid SSO session cookie or x-api-key header.
-/// Inserts AuthUser into request extensions and upserts user in DB.
 pub async fn require_auth(
     State(state): State<Arc<AppState>>,
-    mut req: Request,
+    req: Request,
     next: Next,
 ) -> Response {
-    let mut auth_user: Option<AuthUser> = None;
+    // 1. Check x-api-key header (if configured)
-
+    if let Some(ref expected) = state.api_key {
-    // 1. Check Bearer token — JWT from OIDC provider
+        if let Some(val) = req
-    if let Some(ref oidc) = state.oidc {
-        if let Some(token) = req
             .headers()
-            .get(header::AUTHORIZATION)
+            .get(X_API_KEY)
             .and_then(|v| v.to_str().ok())
-            .and_then(|v| v.strip_prefix("Bearer "))
         {
-            auth_user = validate_bearer_token(oidc, token).await;
+            if val == expected {
+                return next.run(req).await;
+            }
         }
     }
 
     // 2. Check SSO session cookie (if OIDC configured)
-    if auth_user.is_none() {
+    if let Some(ref oidc) = state.oidc {
-        if let Some(ref oidc) = state.oidc {
+        let cookies = req
-            let cookies = req
+            .headers()
-                .headers()
+            .get(header::COOKIE)
-                .get(header::COOKIE)
+            .and_then(|v| v.to_str().ok())
-                .and_then(|v| v.to_str().ok())
+            .unwrap_or("");
-                .unwrap_or("");
 
-            for c in cookies.split(';') {
+        for c in cookies.split(';') {
-                let c = c.trim();
+            let c = c.trim();
-                if let Some(val) = c.strip_prefix(&format!("{}=", SESSION_COOKIE)) {
+            if let Some(val) = c.strip_prefix(&format!("{}=", SESSION_COOKIE)) {
-                    if let Some(user_id) = verify_sso_cookie(&oidc.session_secret, val) {
+                if verify_sso_cookie(&oidc.session_secret, val).is_some() {
-                        auth_user = Some(AuthUser {
+                    return next.run(req).await;
-                            id: user_id.clone(),
-                            username: user_id,
-                            display_name: None,
-                            email: None,
-                        });
-                        break;
-                    }
                 }
             }
         }
     }
 
-    match auth_user {
+    let uri = req.uri().to_string();
-        Some(user) => {
+    if uri.starts_with("/api/") {
-            tracing::debug!("Auth OK for user: {}", user.username);
+        (StatusCode::UNAUTHORIZED, "Unauthorized").into_response()
-            // Upsert user in background
+    } else if state.oidc.is_some() {
-            let pool = state.pool.clone();
+        Redirect::to("/login").into_response()
-            let u = user.clone();
+    } else {
-            tokio::spawn(async move {
+        // Only API key configured — no web login available
-                if let Err(e) = crate::db::upsert_user(
+        (StatusCode::UNAUTHORIZED, "Unauthorized").into_response()
-                    &pool, &u.id, &u.username, u.display_name.as_deref(), u.email.as_deref(),
-                ).await {
-                    tracing::warn!("Failed to upsert user: {}", e);
-                }
-            });
-            req.extensions_mut().insert(user);
-            next.run(req).await
-        }
-        None => (StatusCode::UNAUTHORIZED, "Unauthorized").into_response(),
     }
 }
 
+/// GET /login — show SSO login page.
+pub async fn login_page(State(state): State<Arc<AppState>>) -> impl IntoResponse {
+    if state.oidc.is_none() {
+        return Redirect::to("/").into_response();
+    }
+
+    Html(LOGIN_HTML).into_response()
+}
+
+/// GET /logout — clear session cookie.
+pub async fn logout() -> impl IntoResponse {
+    let cookie = format!(
+        "{}=; HttpOnly; SameSite=Strict; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT",
+        SESSION_COOKIE
+    );
+    let mut headers = HeaderMap::new();
+    headers.insert(header::SET_COOKIE, cookie.parse().unwrap());
+    headers.insert(header::LOCATION, "/login".parse().unwrap());
+    (StatusCode::FOUND, headers, Body::empty()).into_response()
+}
+
 #[derive(Deserialize)]
 pub struct LoginQuery {
     pub next: Option<String>,
@@ -419,9 +335,9 @@ pub async fn oidc_callback(
         .unwrap_or(false);
 
     let session_attrs = if is_https {
-        "SameSite=Lax; Secure"
+        "SameSite=Strict; Secure"
     } else {
-        "SameSite=Lax"
+        "SameSite=Strict"
     };
 
     let session_cookie = format!(
@@ -438,3 +354,47 @@ pub async fn oidc_callback(
 
     (StatusCode::FOUND, headers, Body::empty()).into_response()
 }
+
+const LOGIN_HTML: &str = r#"<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Furumi Player — Login</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100vh;
+    display: flex; align-items: center; justify-content: center;
+    background: #0d0f14;
+    font-family: 'Inter', system-ui, sans-serif;
+    color: #e2e8f0;
+  }
+  .card {
+    background: #161b27;
+    border: 1px solid #2a3347;
+    border-radius: 16px;
+    padding: 2.5rem 3rem;
+    width: 360px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+    text-align: center;
+  }
+  .logo { font-size: 1.8rem; font-weight: 700; color: #7c6af7; margin-bottom: 0.25rem; }
+  .subtitle { font-size: 0.85rem; color: #64748b; margin-bottom: 2rem; }
+  .btn-sso {
+    display: block; width: 100%; padding: 0.75rem; text-align: center;
+    background: #7c6af7; border: none; border-radius: 8px;
+    color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: none;
+    cursor: pointer; transition: background 0.2s;
+  }
+  .btn-sso:hover { background: #6b58e8; }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="logo">Furumi</div>
+  <div class="subtitle">Sign in to continue</div>
+  <a href="/auth/login" class="btn-sso">SSO Login</a>
+</div>
+</body>
+</html>"#;

furumi-web-player/src/web/mod.rs

@@ -5,7 +5,7 @@ use std::sync::Arc;
 use std::path::PathBuf;
 use std::time::Duration;
 
-use axum::{Router, routing::{get, post}, middleware};
+use axum::{Router, routing::get, middleware};
 use axum::http::{header, Method};
 use sqlx::PgPool;
 use tower_http::cors::{Any, CorsLayer};
@@ -16,6 +16,7 @@ pub struct AppState {
     #[allow(dead_code)]
     pub storage_dir: Arc<PathBuf>,
     pub oidc: Option<Arc<auth::OidcState>>,
+    pub api_key: Option<String>,
 }
 
 pub fn build_router(state: Arc<AppState>) -> Router {
@@ -29,31 +30,39 @@ pub fn build_router(state: Arc<AppState>) -> Router {
         .route("/tracks/:slug", get(api::get_track_detail))
         .route("/tracks/:slug/cover", get(api::track_cover))
         .route("/stream/:slug", get(api::stream_track))
-        .route("/search", get(api::search))
+        .route("/search", get(api::search));
-        .route("/tracks/:slug/play", post(api::record_play))
-        .route("/me/recent", get(api::recent_plays));
 
-    let api = Router::new()
+    let authed = Router::new()
+        .route("/", get(player_html))
         .nest("/api", library);
 
     let requires_auth = state.oidc.is_some();
 
     let app = if requires_auth {
-        api.route_layer(middleware::from_fn_with_state(state.clone(), auth::require_auth))
+        authed
+            .route_layer(middleware::from_fn_with_state(state.clone(), auth::require_auth))
     } else {
-        api
+        authed
     };
 
     let cors = CorsLayer::new()
         .allow_origin(Any)
-        .allow_methods([Method::GET, Method::POST, Method::OPTIONS, Method::HEAD])
+        .allow_methods([Method::GET, Method::OPTIONS, Method::HEAD])
-        .allow_headers([header::ACCEPT, header::CONTENT_TYPE, header::AUTHORIZATION])
+        .allow_headers([header::ACCEPT, header::CONTENT_TYPE, header::HeaderName::from_static("x-api-key")])
         .max_age(Duration::from_secs(600));
 
     Router::new()
+        .route("/login", get(auth::login_page))
+        .route("/logout", get(auth::logout))
         .route("/auth/login", get(auth::oidc_login))
         .route("/auth/callback", get(auth::oidc_callback))
         .merge(app)
         .layer(cors)
         .with_state(state)
 }
+
+async fn player_html() -> axum::response::Html<String> {
+    let html = include_str!("player.html")
+        .replace("<!-- VERSION_PLACEHOLDER -->", option_env!("FURUMI_VERSION").unwrap_or(env!("CARGO_PKG_VERSION")));
+    axum::response::Html(html)
+}