README.md

@@ -2,8 +2,7 @@
   <img width="600" src="assets/branding/spotube_banner.png" alt="Spotube Logo">
 
 A cross-platform extensible open-source music streaming platform.<br>
-Bring your own music metadata/playlist/audio-source with plugins created by community or by
+Bring your own music metadata/playlist/audio-source with plugins created by community or by yourself. A small step towards the decentralized music streaming era!
-yourself. A small step towards the decentralized music streaming era!
 
 <a href="https://spotube.cc"><img alt="Visit the website" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/documentation/website_vector.svg"></a>
 <a href="https://discord.gg/uJ94vxB6vg"><img alt="Discord Server" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/social/discord-plural_vector.svg"></a>
@@ -17,16 +16,17 @@ yourself. A small step towards the decentralized music streaming era!
 
 ---
 
-![Spotube Desktop](assets/feature-graphics/readme-hero.png)
+![Spotube Desktop](assets/branding/spotube-screenshot.png)
-![Spotube Mobile](assets/feature-graphics/readme-mobile.png)
 
-****</div>
+![Spotube Mobile](assets/branding/mobile-screenshots/combined.jpg)
+
+</div>
 
 ## 🌃 Features
 
 - 🧩 Plugin powered, supports any platform or custom music service through plugins.
 - 🗺️ Community driven plugins for popular platforms or create your own.
-- ⬇️ Freely downloadable tracks with tagged **metadata**.
+- ⬇️ Freely downloadable tracks with tagged metadata.
 - 🖥️ 📱 Cross-platform support.
 - 🪶 Small size & less data usage.
 - 🕒 Time synced lyrics regardless of the plugin support.
@@ -41,183 +41,132 @@ Download Spotube from the Official Website: https://spotube.cc
 
 ### 🔄 Nightly Builds
 
-Grab the latest nightly builds of
+Grab the latest nightly builds of Spotube [from the Offical Website](https://spotube.cc/downloads/nightly).
-Spotube [from the Offical Website](https://spotube.cc/downloads/nightly).
+
+## 🕳️ Building from source
 
-<details>
-<summary>
-<h3 style="display: inline;">🕳️ Building from source [Click to expand]</h3>
-</summary>
-<hr/>
 <a href="https://github.com/team-spotube/spotube/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/KRTirtho/spotube/spotube-release-binary.yml?+label=Build%20Status"></a>
 
-Spotube is a Compose Multiplatform app.
+Spotube is a Kotlin Multiplatform + Compose Multiplatform app. The desktop app is built with the [Nucleus](https://nucleusframework.dev) Gradle plugin and released as a **GraalVM native image**: an ahead-of-time compiled binary that needs no JVM installed.
 
-### 1. Prerequisites
+### Prerequisites
 
-- **JDK 21** to run Gradle (the Gradle daemon JDK and GraalVM are provisioned automatically).
+- **JDK 21** to run Gradle. The Gradle daemon JDK and the GraalVM toolchain are provisioned automatically.
-- **Rust** (`rustup` + `cargo`), for the `composeApp` library built
+- **Rust** (`rustup` + `cargo`). The `composeApp` Rust library is built through [Gobley](https://gobley.dev).
-  through [Gobley](https://gobley.dev).
 - **Android SDK**, only for Android builds.
-- **[ComposeNativeWebview](https://github.com/kdroidFilter/ComposeNativeWebview)**, which isn't on
+- **Unpublished dependency.** One dependency isn't on Maven Central yet. Clone it and run `./gradlew publishToMavenLocal` in it:
-  Maven Central yet. Clone it at the commit pinned as `COMPOSE_WEBVIEW_COMMIT` in [
+  - [kdroidFilter/ComposeNativeWebview](https://github.com/kdroidFilter/ComposeNativeWebview), at the commit pinned in [`spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml) (`COMPOSE_WEBVIEW_COMMIT`)
-  `spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml) and run
+- **Linux runtime libraries** (needed to run the app, including `:composeApp:run`). The `.deb`/`.rpm` install these as dependencies from your distro. For a source build, install them yourself, **including VLC**. Only the `.AppImage` is self-contained (it bundles VLC, GTK 3 and WebKitGTK, and uses just the host's glibc, graphics, X11 and sound libraries):
-  `./gradlew publishToMavenLocal` in it.
-- **Linux only: runtime libraries, including VLC.** Needed to run the app, including
-  `:composeApp:run`:
 
-  | Distro                   | Command                                                                                                                                                          |
+  | Distro | Command |
-  | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  |---|---|
-  | Debian/Ubuntu            | `sudo apt-get install libvlc5 vlc-plugin-base libwebkit2gtk-4.1-0 libgtk-3-0 libasound2 libgl1 libxtst6 libxi6 libxrender1`                                      |
+  | Debian/Ubuntu | `sudo apt-get install libvlc5 vlc-plugin-base libwebkit2gtk-4.1-0 libgtk-3-0 libasound2 libgl1 libxtst6 libxi6 libxrender1` |
-  | Fedora                   | `sudo dnf install vlc-libs webkit2gtk4.1 gtk3 alsa-lib mesa-libGL libXtst libXi libXrender` (`vlc-libs` needs [RPM Fusion](https://rpmfusion.org/Configuration)) |
+  | Fedora | `sudo dnf install vlc-libs webkit2gtk4.1 gtk3 alsa-lib mesa-libGL libXtst libXi libXrender`. `vlc-libs` is only in [RPM Fusion](https://rpmfusion.org/Configuration), so enable it first. |
-  | Arch / CachyOS / Manjaro | `sudo pacman -S vlc webkit2gtk-4.1 gtk3 alsa-lib libglvnd libxtst libxi libxrender`                                                                              |
+  | Arch / CachyOS / Manjaro | `sudo pacman -S vlc webkit2gtk-4.1 gtk3 alsa-lib libglvnd libxtst libxi libxrender` |
-  | openSUSE                 | `sudo zypper install libvlc5 libwebkit2gtk-4_1-0 libgtk-3-0 libasound2 Mesa-libGL1 libXtst6 libXi6 libXrender1`                                                  |
+  | openSUSE | `sudo zypper install libvlc5 libwebkit2gtk-4_1-0 libgtk-3-0 libasound2 Mesa-libGL1 libXtst6 libXi6 libXrender1` (for wide codec support, switch to the [Packman](https://en.opensuse.org/Additional_package_repositories#Packman) repo's VLC) |
 
-  On Ubuntu 24.04+/Debian 13, `libgtk-3-0` and `libasound2` are `libgtk-3-0t64` and `libasound2t64`;
+  Arch-based distros and openSUSE have no native package here. Use the `.AppImage`. The `.rpm` is built with Fedora package names, so it won't resolve on openSUSE.
-  apt resolves this itself.
 
-### 2. Run in development
+  On Ubuntu 24.04+/Debian 13 `libgtk-3-0` and `libasound2` are named `libgtk-3-0t64` and `libasound2t64`; apt resolves this automatically.
+
+Always use the Gradle wrapper (`./gradlew`, or `gradlew.bat` on Windows).
+
+### Development
 
-Desktop (JVM), fastest edit/run loop
 ```bash
-./gradlew :composeApp:run
+./gradlew :composeApp:run                    # desktop (JVM), fastest edit/run loop
+./gradlew :composeApp:assembleStableDebug    # Android debug APK (or assembleNightlyDebug)
 ```
 
-Android debug APK
+Development builds stay fast. The release-only optimizations (the Rust release profile with LTO and symbol stripping, the native image, native-library pruning) are only applied when you build something to ship. See [Production vs development builds](#production-vs-development-builds).
-```bash
-./gradlew :composeApp:assembleStableDebug
-```
-> Use `./gradlew :composeApp:assembleNightlyDebug` for the nightly channel.
 
-Development builds stay fast: the release-only optimizations below are skipped.
+### Building the desktop app (GraalVM native image)
 
-### 3. Build the desktop app
+#### Native toolchain
 
-A native build takes **about 10 minutes**, uses **every CPU core** and peaks at **~15 GB of RAM**.
+[Nucleus downloads and caches GraalVM CE](https://nucleusframework.dev/en/docs/performance/graalvm/) under `~/.gradle/nucleus/graalvm` on the first native build. Set `GRAALVM_HOME` to use your own GraalVM instead. Each OS also needs a native C toolchain:
-It only happens for the tasks below, never for `run`.
 
-**Native toolchain** (Nucleus downloads GraalVM CE on the first build; set `GRAALVM_HOME` to use
+| OS | Requirements |
-your own):
+|---|---|
+| Linux | `gcc`, `zlib` headers, `patchelf`; plus `rpm` for `.rpm` packages, `fuse` for `.AppImage`, and, for the AppImage's bundled libraries, `zstd` (plus `ar`/`tar` and `readelf`, from binutils). Debian/Ubuntu: `sudo apt-get install build-essential zlib1g-dev patchelf rpm fuse zstd`. Fedora: `sudo dnf install gcc zlib-devel patchelf rpm-build fuse zstd` (also install the [Linux runtime libraries](#prerequisites) to run what you build) |
+| macOS | Xcode Command Line Tools (`xcode-select --install`) |
+| Windows | Visual Studio Build Tools with the "Desktop development with C++" workload. Build from an "x64 Native Tools" prompt if `native-image` can't find MSVC. |
 
-| OS      | Requirements                                                                                                                                                                                                                                                    |
+A native build is a whole-program compile. It takes **about 10 minutes**, uses **every CPU core**, and peaks at roughly **15 GB of RAM** (it gets slower, not broken, with less). That only happens for the native tasks below, never for `run`.
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Linux   | `gcc`, `zlib` headers, `patchelf`; `rpm` for `.rpm`, `fuse` + `zstd` for `.AppImage`. <br/>Debian/Ubuntu: `sudo apt-get install build-essential zlib1g-dev patchelf rpm fuse zstd`. <br/>Fedora: `sudo dnf install gcc zlib-devel patchelf rpm-build fuse zstd` |
-| macOS   | Xcode Command Line Tools (`xcode-select --install`)                                                                                                                                                                                                             |
-| Windows | Visual Studio Build Tools with "Desktop development with C++" (use an "x64 Native Tools" prompt if `native-image` can't find MSVC)                                                                                                                              |
 
-**Build and run the app folder:**
+#### Build and run
 
 ```bash
+# App folder: binary + its native libs, in composeApp/build/compose/binaries/main/graalvm-app/
 ./gradlew :composeApp:createGraalvmNativeDistributable
-```
-> Output folder: composeApp/build/compose/binaries/main/graalvm-app/
 
-Build and launch in one step
+# Run that folder's binary directly
-```bash
+./composeApp/build/compose/binaries/main/graalvm-app/org.spotube.spotube/spotube
+
+# Or build and launch in one step
 ./gradlew :composeApp:runGraalvmNativeDistributable
 ```
 
-Keep the `spotube` binary next to the libraries it was built with; it loads them from its own
+Keep the `spotube` binary next to the `.so`/`.dll`/`lib/` files it was built with; it loads them from its own folder.
-folder.
 
-**Installers** (each OS builds only its own):
+#### Installers
 
-| OS               | Command                                                                 |
+Each OS can only build its own installers:
-| ---------------- | ----------------------------------------------------------------------- |
-| Linux            | `./gradlew :composeApp:packageGraalvmDeb :composeApp:packageGraalvmRpm` |
-| Linux (AppImage) | `./gradlew :composeApp:packageGraalvmAppImage -PappImage=true`          |
-| Windows          | `./gradlew :composeApp:packageGraalvmExe` (or `packageGraalvmMsi`)      |
-| macOS            | `./gradlew :composeApp:packageGraalvmDmg`                               |
-> Output folder: `composeApp/build/compose/binaries/main/graalvm-<format>`
 
-> [!Tip]
+| OS | Command | Output |
-> Add `-Pnightly=true` for the nightly channel (separate icons and name).
+|---|---|---|
+| Linux | `./gradlew :composeApp:packageGraalvmDeb :composeApp:packageGraalvmRpm`, then `./gradlew :composeApp:packageGraalvmAppImage -PappImage=true` | `composeApp/build/compose/binaries/main/graalvm-{deb,rpm,appimage}/` |
+| Windows | `./gradlew :composeApp:packageGraalvmExe` (or `packageGraalvmMsi`) | `composeApp/build/compose/binaries/main/graalvm-exe/` |
+| macOS | `./gradlew :composeApp:packageGraalvmDmg` | `composeApp/build/compose/binaries/main/graalvm-dmg/` |
 
-<details>
+Add `-Pnightly=true` for the nightly channel (separate icons and name).
-<summary>How the Linux AppImage bundle works</summary>
 
-- [`DownloadLinuxGtkBundleTask`](buildSrc/src/main/kotlin/org/spotube/gradle/DownloadLinuxGtkBundleTask.kt)
+The `.deb` and `.rpm` use your distro's shared libraries and declare them as dependencies, so the package manager installs them (on Fedora, `vlc-libs` needs RPM Fusion enabled). The `.AppImage` is the self-contained one: it bundles VLC, GTK 3 and WebKitGTK (see [What the AppImage bundles](#what-the-appimage-bundles)).
-  downloads the Ubuntu 24.04 packages (audio-only VLC via
-  [vlcj-bundler](https://github.com/team-spotube/vlcj-bundler-gradle-plugin), GTK 3, WebKitGTK 4.1,
-  glib-networking), keeps only what GTK/WebKit reach and relocates the libraries with `patchelf`.
-  Needs `ar`, `tar`, `zstd`, `readelf`, `patchelf`.
-- WebKitGTK has its helper-process path compiled in, so
-  [`AppImageEnvironment`](composeApp/src/jvmMain/kotlin/org/spotube/spotube/core/appimage/AppImageEnvironment.kt)
-  patches it to a relative path and moves to that directory at startup. It also sets
-  `GIO_EXTRA_MODULES` and `WEBKIT_DISABLE_DMABUF_RENDERER=1` (the bundled WebKitGTK 2.44 never
-  paints against a newer host Mesa).
-- `main()` must call `GraalVmInitializer.initialize()` first: the VLC loader and the environment
-  setup read `compose.application.resources.dir`.
 
-</details>
+#### What the AppImage bundles
 
-### 4. Native build breaks, JVM works
+Build it with `./gradlew :composeApp:packageGraalvmAppImage -PappImage=true`. Without `-PappImage=true` nothing is bundled and the app uses the system libraries, which is what the `.deb`/`.rpm` and `:composeApp:run` do.
 
-A native image is a closed world: everything reached through reflection, JNI or JNA (vlcj, Zipline,
+The bundle follows the [AppImage exclude list](https://github.com/AppImageCommunity/pkg2appimage/blob/master/excludelist) and what Tauri apps ship. It carries VLC (audio-only, from the [vlcj-bundler](https://github.com/team-spotube/vlcj-bundler-gradle-plugin) plugin's `bundleVlc` option), GTK 3, WebKitGTK 4.1, GLib/GIO, pango/cairo and their dependencies, plus glib-networking for HTTPS in the webview. It leaves the host's glibc, `libstdc++`, `libz`, GL/EGL/DRM, X11/xcb, ALSA, fontconfig/freetype/harfbuzz and the Wayland libraries alone, so the host's graphics, display and sound stack is used. Everything is taken from the Ubuntu 24.04 archive, so the AppImage needs glibc 2.38 or newer.
-NewPipe, ktor, datastore, ...) must be declared at build time. Nucleus generates most of it; the
-rest lives in [`composeApp/graalvm/reachability-metadata.json`](composeApp/graalvm/reachability-metadata.json).
 
-Symptoms: `ClassNotFoundException`, `NoSuchMethodException` or `MissingReflectionRegistrationError`
+How it works, in short:
-in the native binary, while `:composeApp:run` works.
+- [`DownloadLinuxGtkBundleTask`](buildSrc/src/main/kotlin/org/spotube/gradle/DownloadLinuxGtkBundleTask.kt) downloads the packages, keeps the libraries reachable from GTK/WebKit and relocates them with `patchelf`. Needs `ar`, `tar`, `zstd`, `readelf` and `patchelf`.
+- WebKitGTK has its helper-process path compiled in, so the library is patched to look relative to the working directory, and at startup the app moves there ([`AppImageEnvironment`](composeApp/src/jvmMain/kotlin/org/spotube/spotube/core/appimage/AppImageEnvironment.kt)). It also points `GIO_EXTRA_MODULES` at the bundled TLS module and sets `WEBKIT_DISABLE_DMABUF_RENDERER=1`, because the bundled WebKitGTK 2.44's dmabuf renderer never paints (or aborts) against a newer host Mesa/compositor. The display backend is left alone: forcing X11 doesn't help, since the webview doesn't paint on XWayland either.
+- Startup order matters: `main()` calls `GraalVmInitializer.initialize()` first, since the VLC loader and the environment setup read `compose.application.resources.dir`.
 
-1. `./gradlew :composeApp:runWithNativeAgent` starts the app on the JVM with GraalVM's tracing agent.
+#### Reflection metadata (when a feature breaks only in the native build)
-2. Use the broken feature, then **close the window normally**. Ctrl+C discards the recording.
-3. Commit the updated JSON in `composeApp/graalvm/` and rebuild.
 
-> [!Tip]
+A native image is a closed world: anything the app reaches through reflection, JNI or JNA (vlcj, the Zipline/QuickJS plugin engine, NewPipe, ktor, datastore, …) must be declared at build time. Nucleus generates most of this automatically. The rest is in [`composeApp/graalvm/reachability-metadata.json`](composeApp/graalvm/reachability-metadata.json).
-> `./gradlew :composeApp:runGraalvmNative` is a faster debug loop: a quick `-Ob` build that names the
-> missing registration.
 
-> [!Warning]
+If something works in `:composeApp:run` but throws `ClassNotFoundException`, `NoSuchMethodException`, `MissingReflectionRegistrationError` or similar in the native binary, record what's missing:
-> Keep the hand-written `uk.co.caprica.vlcj.binding.lib.LibVlc` entry, or playback fails to initialize.
 
-### 5. Production vs development builds
+```bash
+./gradlew :composeApp:runWithNativeAgent
+```
 
-Production mode turns on automatically for `package*`, `create*`, `notarize*` and
+The app starts on the JVM with GraalVM's tracing agent attached. Use the broken feature (and anything near it), then **close the window normally**: the recorded entries are merged into `composeApp/graalvm/` only on a clean exit, not with Ctrl+C. Commit the updated JSON and rebuild the native image.
-`nativeImageCompile` tasks. Force it with `-Pproduction=true|false`.
 
-| Area        | Development            | Production                                                                                                               |
+`./gradlew :composeApp:runGraalvmNative` gives a faster debugging loop: a quick-build (`-Ob`) native image that reports exactly which registration is missing.
-| ----------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| Rust lib    | fast `debug` profile   | `release` with LTO and stripping (31 MB → 1.8 MB)                                                                        |
-| Desktop app | hot-reloadable JVM app | size-optimized (`-Os`) GraalVM native image                                                                              |
-| Native libs | all                    | host OS/CPU only; Skia loaded from `lib/`; on Linux ~10 KB `libjvm.so`/`libjava.so` shims instead of the JDK's 28 MB one |
 
-Android picks the Rust profile from its build type.
+Keep the hand-written `uk.co.caprica.vlcj.binding.lib.LibVlc` entry. JNA's direct mapping looks up its `native` methods through reflection, and without the entry, playback fails to initialize.
 
-### 6. Releases
+### Production vs development builds
 
-Run [`spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml) manually
+Production mode is switched on automatically when you ask Gradle for a shippable artifact: any `package*`, `create*`, `notarize*` or `nativeImageCompile` task. You can force it either way with `-Pproduction=true` or `-Pproduction=false`.
-(`workflow_dispatch`) as `stable`, `beta` or `nightly`.
 
-- **Beta:** the stable build as a draft, tagged `v<version>-beta.N`. Set `betaNumber` in
+| | Development (`run`, debug builds) | Production (installers, native image) |
-  `composeApp/build.gradle.kts` to N, and back to `null` for stable.
+|---|---|---|
-- **Desktop:** each platform (Linux x86_64 and aarch64, Windows, macOS) builds its installers on its
+| Rust library (desktop) | `debug` profile, fast incremental compile | `release` profile with LTO, single codegen unit, stripped (31 MB → 1.8 MB) |
-  own runner.
+| Desktop app | JVM, hot-reloadable | GraalVM native image, `-Os` (size-optimized) |
-- **Android:** a signed APK.
+| Native libraries | everything on the classpath | only the host OS/CPU's natives; other OSes' and CPUs' libraries are pruned from the uber JAR the image is compiled from |
+| Skia (Skiko) | extracted from the JAR | loaded from `lib/` next to the binary, not embedded a second time |
+| JDK runtime libs (Linux) | n/a | native-image's ~10 KB `libjvm.so`/`libjava.so` shims instead of the JDK's (28 MB `libjvm.so`) |
 
-</details>
+Android picks the Rust profile from its build type (`debug` or `release`) on its own.
-<hr/>
 
-## 📚 Resources
+### Releases
 
-**Core stack**
+Releases are built by [`spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml), run manually (`workflow_dispatch`) as `stable`, `beta` or `nightly`. A beta is the stable build released like a stable release (draft, not a pre-release), tagged `v<version>-beta.N` (set `betaNumber` in `composeApp/build.gradle.kts` to N, and back to `null` for stable). Each desktop platform (Linux x86_64 and aarch64, Windows, macOS) builds its native installers on its own runner. Android builds a signed APK.
-- [Kotlin Multiplatform](https://kotlinlang.org/docs/multiplatform.html)
-- [Compose Multiplatform](https://www.jetbrains.com/compose-multiplatform/)
-- [Compose Hot Reload](https://github.com/JetBrains/compose-hot-reload)
-- [Koin for KMP](https://insert-koin.io/docs/reference/koin-mp/kmp)
-- [Ktor client](https://ktor.io/docs/client-create-multiplatform-application.html)
-- [DataStore for KMP](https://developer.android.com/kotlin/multiplatform/datastore)
-
-**Desktop and native**
-- [Nucleus](https://github.com/kdroidFilter/Nucleus): desktop packaging and GraalVM integration
-- [ComposeNativeWebview](https://github.com/kdroidFilter/ComposeNativeWebview)
-- [GraalVM Native Image](https://www.graalvm.org/latest/reference-manual/native-image/) and its
-  [reachability metadata](https://www.graalvm.org/latest/reference-manual/native-image/metadata/)
-- [Gobley](https://gobley.dev): Rust in Kotlin Multiplatform
-- [vlcj](https://github.com/caprica/vlcj): VLC bindings for audio playback
-
-**Plugins**
-- [Zipline](https://github.com/cashapp/zipline): runs the JS plugins
 
 ## 👥 The Spotube team
 

composeApp/src/commonMain/kotlin/org/spotube/spotube/modules/shell/AppShell.kt

@@ -32,23 +32,17 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
-import androidx.compose.animation.core.spring
-import androidx.compose.animation.core.Spring
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.dp
@@ -305,15 +299,6 @@ internal fun CompactPlayerOverlay(
     onAlternativeSource: () -> Unit,
     onExpandLyrics: () -> Unit,
     floatingPlayer: @Composable (Modifier) -> Unit = { AppFloatingPlayer(modifier = it) },
-    expandedPlayer: @Composable (modifier: Modifier, onCollapse: () -> Unit) -> Unit = { modifier, onCollapse ->
-        AppExpandedPlayer(
-            modifier = modifier,
-            onCollapse = onCollapse,
-            onQueue = onQueue,
-            onAlternativeSource = onAlternativeSource,
-            onExpandLyrics = onExpandLyrics
-        )
-    },
     bottomBar: @Composable (Modifier) -> Unit = {
         AppBottombar(navigator = navigator, navigationState = navigationState, modifier = it)
     },
@@ -340,39 +325,16 @@ internal fun CompactPlayerOverlay(
     val sheetState = key(peekHeight) {
         rememberBottomSheetState(
             initialDetent = partialDetent,
-            detents = listOf(partialDetent, SheetDetent.FullyExpanded),
+            detents = listOf(partialDetent, SheetDetent.FullyExpanded)
-            // A spring carries the fling velocity into the settle, so releasing mid-drag
-            // glides to the nearest detent instead of stalling and then easing like a tween.
-            animationSpec = spring(
-                dampingRatio = Spring.DampingRatioNoBouncy,
-                stiffness = Spring.StiffnessMediumLow)
         )
     }
 
-    // Read only inside draw/derived scopes: the sheet offset changes every drag frame, and
+    val progress = if (!sheetState.offset.isFinite() ||
-    // reading it in composition would recompose the whole player on each one.
+        (sheetState.isIdle && sheetState.currentDetent == partialDetent)
-    val progress by remember(sheetState, partialDetent) {
+    ) 0f else runCatching {
-        derivedStateOf {
+        sheetState.progress(partialDetent, SheetDetent.FullyExpanded)
-            val value = if (!sheetState.offset.isFinite() ||
+    }.getOrDefault(0f).takeIf { it.isFinite() } ?: 0f
-                (sheetState.isIdle && sheetState.currentDetent == partialDetent)
+    val uiState = viewModel.compactSheetUiState(progress.coerceIn(0f, 1f))
-            ) 0f else runCatching {
-                sheetState.progress(partialDetent, SheetDetent.FullyExpanded)
-            }.getOrDefault(0f).takeIf { it.isFinite() } ?: 0f
-            value.coerceIn(0f, 1f)
-        }
-    }
-    // Keyed on the sheet state: it is recreated when the peek height changes, and a derived
-    // value left reading the previous sheet's progress would never update again.
-    val expandedPlayerVisible by remember(sheetState) {
-        derivedStateOf { viewModel.compactSheetUiState(progress).showExpandedPlayer }
-    }
-    val floatingPlayerVisible by remember(sheetState) {
-        derivedStateOf { viewModel.compactSheetUiState(progress).floatingPlayerAlpha > 0.01f }
-    }
-    // Once shown, keep the expanded player composed: composing it (view models, lyrics, cover
-    // art) on the first drag frame of every gesture is the hitch the user feels as lag.
-    var expandedPlayerComposed by remember { mutableStateOf(false) }
-    if (expandedPlayerVisible) expandedPlayerComposed = true
 
     Box(modifier = Modifier.fillMaxSize()) {
         content()
@@ -383,52 +345,44 @@ internal fun CompactPlayerOverlay(
         ) {
             Sheet(modifier = Modifier.fillMaxSize()) {
                 Box(modifier = Modifier.fillMaxSize()) {
-                    if (expandedPlayerComposed) {
+                    if (uiState.showExpandedPlayer) {
-                        expandedPlayer(
+                        AppExpandedPlayer(
-                            Modifier
+                            modifier = Modifier
                                 .fillMaxSize()
-                                .graphicsLayer {
+                                .graphicsLayer { alpha = uiState.expandedPlayerAlpha },
-                                    alpha = viewModel.compactSheetUiState(progress).expandedPlayerAlpha
+                            onCollapse = {
-                                },
+                                scope.launch { sheetState.animateTo(partialDetent) }
-                            { scope.launch { sheetState.animateTo(partialDetent) } }
+                            },
+                            onQueue = onQueue,
+                            onAlternativeSource = onAlternativeSource,
+                            onExpandLyrics = onExpandLyrics
                         )
                     }
 
-                    // Always composed: building it (view model, cover art, player state) only once
+                    if (uiState.floatingPlayerAlpha > 0.01f) {
-                    // progress drops below the fade-out point stalls the collapse mid-drag.
+                        Column(modifier = Modifier.fillMaxWidth()) {
-                    Column(modifier = Modifier.fillMaxWidth()) {
+                            floatingPlayer(
-                        floatingPlayer(
+                                Modifier
-                            Modifier
+                                    .graphicsLayer {
-                                .zeroSizeUnless(floatingPlayerVisible)
+                                        alpha = uiState.floatingPlayerAlpha
-                                .graphicsLayer {
+                                    })
-                                    alpha = viewModel.floatingPlayerAlpha(progress)
+                        }
-                                })
                     }
                 }
             }
         }
 
-        bottomBar(
+        if (uiState.floatingPlayerAlpha > 0.01f) {
-            Modifier
+            bottomBar(
-                .fillMaxWidth()
+                Modifier
-                .align(Alignment.BottomCenter)
+                    .fillMaxWidth()
-                .zeroSizeUnless(floatingPlayerVisible)
+                    .align(Alignment.BottomCenter)
-                .onSizeChanged { size ->
+                    .onSizeChanged { size ->
-                    viewModel.onBottomBarMeasured(with(density) { size.height.toDp() })
+                        viewModel.onBottomBarMeasured(with(density) { size.height.toDp() })
-                }
+                    }
-                .graphicsLayer {
+                    .graphicsLayer {
-                    alpha = viewModel.floatingPlayerAlpha(progress)
+                        alpha = uiState.floatingPlayerAlpha
-                })
+                    })
+        }
     }
 }
-
-/**
- * Keeps the content composed but takes it out of layout, drawing and hit testing while it is
- * fully faded out, so it neither steals touches from what is above it nor costs a re-composition
- * when it comes back.
- */
-private fun Modifier.zeroSizeUnless(visible: Boolean): Modifier =
-    if (visible) this else layout { measurable, constraints ->
-        measurable.measure(constraints)
-        layout(0, 0) {}
-    }

composeApp/src/jvmTest/kotlin/org/spotube/spotube/modules/shell/CompactPlayerOverlayDragTest.kt

@@ -1,113 +0,0 @@
-package org.spotube.spotube.modules.shell
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.remember
-import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.ImageComposeScene
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.input.pointer.PointerEventType
-import androidx.compose.ui.input.pointer.PointerType
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.use
-import org.spotube.spotube.core.navigation.Navigator
-import org.spotube.spotube.core.navigation.Routes
-import org.spotube.spotube.core.navigation.TOP_LEVEL_ROUTES
-import org.spotube.spotube.core.navigation.rememberNavigationState
-import org.spotube.spotube.core.ui.theming.SpotubeTheme
-import org.spotube.spotube.modules.settings.Theme
-import org.spotube.spotube.modules.settings.UserSettings
-import kotlin.test.Test
-import kotlin.test.assertFalse
-import kotlin.test.assertTrue
-
-@OptIn(ExperimentalComposeUiApi::class)
-class CompactPlayerOverlayDragTest {
-    @Test
-    fun draggingTheSheetUpShowsTheExpandedPlayer() {
-        var expandedComposed = false
-        var floatingCompositions = 0
-        var floatingPlaced = false
-        val width = 400
-        val height = 800
-        ImageComposeScene(width, height) {
-            SpotubeTheme(UserSettings(theme = Theme.DARK)) {
-                val navigation = rememberNavigationState(Routes.Home, TOP_LEVEL_ROUTES)
-                val navigator = remember(navigation) { Navigator(navigation) }
-                CompactPlayerOverlay(
-                    navigator = navigator,
-                    navigationState = navigation,
-                    viewModel = remember { AppShellViewModel() },
-                    onQueue = {}, onAlternativeSource = {}, onExpandLyrics = {},
-                    floatingPlayer = { modifier ->
-                        DisposableEffect(Unit) {
-                            floatingCompositions++
-                            onDispose {}
-                        }
-                        Box(
-                            modifier.fillMaxWidth().height(64.dp).background(Color.Gray)
-                                .onGloballyPositioned { floatingPlaced = true })
-                    },
-                    expandedPlayer = { modifier, _ ->
-                        DisposableEffect(Unit) {
-                            expandedComposed = true
-                            onDispose { expandedComposed = false }
-                        }
-                        Box(modifier.fillMaxSize().background(Color.Red))
-                    },
-                    bottomBar = { modifier ->
-                        Box(modifier.fillMaxWidth().height(56.dp).background(Color.Blue))
-                    }
-                ) { Box(Modifier.fillMaxSize()) }
-            }
-        }.use { scene ->
-            var t = 0L
-            fun frame() { scene.render(t); t += 16_000_000L }
-            repeat(10) { frame() }
-            assertTrue(floatingPlaced, "floating player should show while collapsed")
-            assertFalse(expandedComposed, "expanded player should not be composed while collapsed")
-
-            // grab the floating player (just above the bottom bar) and drag to the top
-            val startY = height - 120f + 20f
-            val start = Offset(width / 2f, startY)
-            scene.sendPointerEvent(PointerEventType.Press, start, type = PointerType.Touch, timeMillis = t / 1_000_000L)
-            repeat(5) { frame() }
-            var y = startY
-            repeat(30) {
-                y -= (startY - 40f) / 30f
-                scene.sendPointerEvent(PointerEventType.Move, Offset(width / 2f, y), type = PointerType.Touch, timeMillis = t / 1_000_000L)
-                frame()
-            }
-            scene.sendPointerEvent(PointerEventType.Release, Offset(width / 2f, y), type = PointerType.Touch, timeMillis = t / 1_000_000L)
-            repeat(120) { frame() }
-
-            assertTrue(expandedComposed, "expanded player should be composed after dragging up")
-            // out of layout while the expanded player covers it, but never re-composed
-            floatingPlaced = false
-            repeat(5) { frame() }
-            assertFalse(floatingPlaced, "floating player should be out of layout when fully expanded")
-
-            // drag back down: the floating player must return without being composed again
-            val downStart = Offset(width / 2f, 60f)
-            scene.sendPointerEvent(PointerEventType.Press, downStart, type = PointerType.Touch, timeMillis = t / 1_000_000L)
-            repeat(5) { frame() }
-            var dy = downStart.y
-            repeat(30) {
-                dy += (height - 160f) / 30f
-                scene.sendPointerEvent(PointerEventType.Move, Offset(width / 2f, dy), type = PointerType.Touch, timeMillis = t / 1_000_000L)
-                frame()
-            }
-            scene.sendPointerEvent(PointerEventType.Release, Offset(width / 2f, dy), type = PointerType.Touch, timeMillis = t / 1_000_000L)
-            repeat(120) { frame() }
-            assertTrue(floatingPlaced, "floating player should be back after collapsing")
-            assertTrue(floatingCompositions == 1, "floating player was composed $floatingCompositions times, expected 1")
-        }
-    }
-}

packaging/linux/org.spotube.spotube.metainfo.xml.mustache

@@ -55,28 +55,8 @@
 
   <screenshots>
     <screenshot type="default">
-      <caption>Browse music from the service your plugin connects to</caption>
+      <caption>Spotube on the desktop</caption>
-      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/home-desktop-dark.png</image>
+      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/branding/spotube-screenshot.png</image>
-    </screenshot>
-    <screenshot>
-      <caption>Synced lyrics</caption>
-      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/lyrics-desktop-dark.png</image>
-    </screenshot>
-    <screenshot>
-      <caption>Your playlists</caption>
-      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/playlists-desktop-dark.png</image>
-    </screenshot>
-    <screenshot>
-      <caption>Search tracks, albums, artists, playlists and users</caption>
-      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/search-desktop-dark.png</image>
-    </screenshot>
-    <screenshot>
-      <caption>Local folders and downloads</caption>
-      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/local-tracks-desktop-dark.png</image>
-    </screenshot>
-    <screenshot>
-      <caption>Group Jam rooms</caption>
-      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/group-jam-desktop-dark.png</image>
     </screenshot>
   </screenshots>