Merge pull request #16 from chrisuthe/chrisuthe/task/compose-now-playing-and-welcome-adaptive-layout

Compose Now Playing and Welcome: adaptive layout, blurred art backdrop, auto-connect prompt

Author: chrisuthe

docs/ARCHITECTURE.md

@@ -1152,3 +1152,65 @@ other file under `src/Sendspin.Player`. The progress bar no longer steps by the
 (`Core/MediaSession/AnchoredPosition.cs`) and projects from there on each tick, so it is right on a
 head whose timer is a quantum late as much as on one whose timer is exact. Phase 5 paces the backdrop
 with the same helper at 60 Hz.
+
+### As shipped (reskin phase 3) — Now Playing, Welcome, the backdrop, the prompt
+
+**Now Playing** (`Views/NowPlayingView.axaml`) is one tree with two compositions. Below 640 px of view
+width it is the reference's stacked column — the art tile, then centred title / artist / album, then
+the progress row, then the transport; at 640 px and above the art sits on the left with the text
+column, progress row and transport left-aligned beside it, vertically centred. The switch is the
+`wide` class on the composition grid, set from `OnSizeChanged` in the code-behind, and every
+difference between the two is a style in the view keyed on that class (grid row and column spans,
+alignments, text alignment). It is a class toggle rather than an Avalonia 12 container query because
+the test that pins which composition is active (`Sendspin.Ui.Tests/NowPlayingViewTests`) and Phase
+5's breathing-art work both read the switch off the one control, and because the art's size is a
+computed value a query could not express anyway: the body width minus the 24 px margins when
+stacked, the body height when split, less what the text and transport need, never more than 320 px
+and never less than 96 (`NowPlayingView.ArtSizeFor`, pinned by a theory). The tile is three borders:
+`ArtBreath`, the wrapper Phase 5 animates, carrying nothing today; `ArtTile`, which holds the resting
+`BoxShadow` (the cheap glow in the effect table above) and must not clip, since a shadow lies outside
+the bounds; and `ArtClip`, which clips the picture to the 12 px radius and paints `ArtPlaceholderBrush`
+behind the `MusicIcon` glyph. The shadow is set from the code-behind because a `BoxShadow` holds a
+`Color`, not a brush, so it reads `.Color` off the `ArtShadowBrush` token and re-reads it on
+`ActualThemeVariantChanged`. The progress row is elapsed / a 4 px bar / duration; for a live stream
+(`MediaSessionState.IsLive`, the one rule) the bar is hidden and the duration slot reads `LIVE`.
+`MainViewModel` exposes `ElapsedText`, `DurationText`, `HasKnownDuration` and `RepeatTooltip`;
+`PositionText` is gone, nothing else bound it. The idle title is null rather than a failed binding, so
+"Nothing playing" is a `TargetNullValue` — the Phase 2 `FallbackValue` alone never showed it.
+
+**The blurred backdrop.** `MainViewModel.LoadArtwork` decodes the artwork file once per artwork
+change (it already deduplicated by path) and, alongside `Artwork`, produces `ArtBackdrop` with
+`Bitmap.CreateScaledBitmap` to 64×64 — a decoded `Bitmap`, which is what that method accepts. Layer 0
+of the window binds it to an `Image` with `Stretch="UniformToFill"`, a `BlurEffect` of radius 32 and
+a −48 px margin so the blur's soft edge falls outside the window instead of fading to the opaque root
+along the border. The blur runs over the 64 px source and is cached — the `blur-once` row above —
+so dragging the window does not repaint it. `HasArtBackdrop` is connected-and-bitmap-present, set in
+the two places that change either, and the veil follows `HasBackdrop` as Phase 2 left it. Both
+bitmaps are unbound before they are disposed, for the render-thread reason in the view model.
+
+**Welcome** (`Views/WelcomeView.axaml`) is cards on `TranslucentSurfaceBrush` with the settings card's
+1 px `SystemControlForegroundBaseLowBrush` hairline — with no backdrop behind Welcome the surface is
+the root's own colour, and it is the border that makes a card read as one. "This player" holds the
+name as a write-through `TextBox` and, while advertising, an accent dot with "Broadcasting, visible
+to servers". The dot pulses at 2 Hz from a `UiClock` in the view's code-behind — an Avalonia
+`Animation` would spin a core on the Wayland head, per the clock table — and the clock runs only while
+the view is attached, the player is advertising and nothing is connected, which is when the card is on
+screen. Which mode the player is in is read once, at view-model construction, exactly as the player
+service reads it: a mode changed in Settings takes effect after a restart, and the card describes what
+the service is doing now. Discover mode shows "Servers on this network" (a `ListBox` of name and
+`host:port`, "Searching for servers…" while empty, Connect, or "Connecting…" while `IsConnecting`);
+advertise mode shows "Waiting for a server" instead. "Connect by address" is an `Expander` beneath
+either, collapsed by default.
+
+**The auto-connect prompt** is an in-window card over the body (`AutoConnectPrompt` in
+`MainWindow.axaml`), shown once per server: when a connection succeeds in discover mode while
+`AutoConnect` is `Never` and `PlayerSettings.AutoConnectPromptedServerId` is not the server just
+connected to. The id is read from `LastServerId`, which the player service writes before it raises
+the connection event. Every answer records the id, so "Not now" is remembered too; "Just once" and
+"Always" write the policy through `SettingsViewModel.AutoConnect` — the same
+`SettingsService.Update` — so the Settings combo shows the answer rather than the value it loaded at
+startup. The service's start-up auto-connect is untouched: a "just once" connection reverts the policy
+to `Never` before it connects, and the server it connects to has already been asked about.
+`Sendspin.Ui.Tests/AutoConnectPromptTests` walks each answer and the once-per-server rule.
+Screenshots: `docs/screenshots/reskin/phase3-{narrow,wide}-{light,dark}.png` and
+`phase3-welcome-{advertise,discover}.png`.

docs/screenshots/reskin/phase3-narrow-dark.png

@@ -105,6 +105,15 @@ public sealed class PlayerSettings
     /// <summary>Gets or sets the server id to auto-connect to.</summary>
     public string? LastServerId { get; set; }
 
+    /// <summary>
+    /// Gets or sets the server the auto-connect question has already been asked for.
+    /// </summary>
+    /// <remarks>
+    /// The question is asked once per server, whatever the answer, so "not now" has to leave a
+    /// record too: without one the prompt would come back on every reconnect to the same server.
+    /// </remarks>
+    public string? AutoConnectPromptedServerId { get; set; }
+
     /// <summary>
     /// Gets or sets a manually entered server URL, remembered so it can be offered again.
     /// </summary>

docs/screenshots/reskin/phase3-narrow-light.png

@@ -59,7 +59,7 @@
     </Style>
 
     <Style Selector="StackPanel.transport">
-        <Setter Property="Margin" Value="16,8,16,12" />
+        <Setter Property="Margin" Value="0,16,0,0" />
     </Style>
 
     <Style Selector="Border.footer">
@@ -68,7 +68,8 @@
         <Setter Property="Background" Value="{DynamicResource TranslucentSurfaceBrush}" />
     </Style>
 
-    <Style Selector="Border.settingsOverlay">
+    <!-- The settings card and the auto-connect prompt: one card style, laid over the body. -->
+    <Style Selector="Border.settingsOverlay, Border.promptCard">
         <Setter Property="Margin" Value="12" />
         <Setter Property="Padding" Value="16" />
         <Setter Property="CornerRadius" Value="8" />
@@ -77,6 +78,19 @@
         <Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundBaseLowBrush}" />
     </Style>
 
+    <!--
+      The Welcome cards, on the same translucent surface as the footer, with the settings card's
+      hairline: with no backdrop behind Welcome the surface is the root's own colour, and it is
+      the border that makes a card read as one.
+    -->
+    <Style Selector="Border.card">
+        <Setter Property="Padding" Value="16" />
+        <Setter Property="CornerRadius" Value="8" />
+        <Setter Property="Background" Value="{DynamicResource TranslucentSurfaceBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundBaseLowBrush}" />
+    </Style>
+
     <Style Selector="Border.diagnostics">
         <Setter Property="Padding" Value="14" />
         <Setter Property="CornerRadius" Value="6" />
@@ -85,25 +99,46 @@
         <Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundBaseLowBrush}" />
     </Style>
 
-    <Style Selector="Border.artwork">
-        <Setter Property="Width" Value="180" />
-        <Setter Property="Height" Value="180" />
-        <Setter Property="CornerRadius" Value="8" />
+    <!--
+      The art tile. Two borders: the outer one carries the resting shadow (a BoxShadow, which the
+      spike measured as the cheap kind, set from the code-behind because it wants a Color and
+      the colour is a token) and must not clip, since a shadow lies outside the bounds; the inner
+      one clips the picture to the same radius and paints the placeholder behind it.
+    -->
+    <Style Selector="Border.artTile">
+        <Setter Property="CornerRadius" Value="12" />
+    </Style>
+
+    <Style Selector="Border.artClip">
+        <Setter Property="CornerRadius" Value="12" />
         <Setter Property="ClipToBounds" Value="True" />
         <Setter Property="Background" Value="{DynamicResource ArtPlaceholderBrush}" />
     </Style>
 
     <Style Selector="PathIcon.artworkPlaceholder">
-        <Setter Property="Width" Value="56" />
-        <Setter Property="Height" Value="56" />
+        <Setter Property="Width" Value="80" />
+        <Setter Property="Height" Value="80" />
         <Setter Property="Opacity" Value="0.35" />
         <Setter Property="HorizontalAlignment" Value="Center" />
         <Setter Property="VerticalAlignment" Value="Center" />
     </Style>
 
-    <Style Selector="StackPanel.trackInfo">
-        <Setter Property="Margin" Value="16,0,0,0" />
+    <!-- The progress row's bar: theme foreground on a low-opacity track, 4 px. -->
+    <Style Selector="ProgressBar.track">
+        <Setter Property="Height" Value="4" />
+        <Setter Property="MinHeight" Value="4" />
+        <Setter Property="CornerRadius" Value="2" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+        <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}" />
+    </Style>
+
+    <!-- The Welcome card's "broadcasting" dot; the code-behind pulses its opacity. -->
+    <Style Selector="Ellipse.broadcastDot">
+        <Setter Property="Width" Value="8" />
+        <Setter Property="Height" Value="8" />
         <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Fill" Value="{DynamicResource SystemControlForegroundAccentBrush}" />
     </Style>
 
     <!--
@@ -144,6 +179,12 @@
         <Setter Property="FontSize" Value="12" />
     </Style>
 
+    <!-- The album line under the artist: caption-sized, and quieter still. -->
+    <Style Selector="TextBlock.album">
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Opacity" Value="0.5" />
+    </Style>
+
     <Style Selector="TextBlock.warning">
         <Setter Property="FontSize" Value="12" />
         <Setter Property="Foreground" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
@@ -213,6 +254,18 @@
         <Setter Property="CornerRadius" Value="18" />
     </Style>
 
+    <!-- Same reason: shuffle and repeat are the transport's 40 px pair, either side of the 48s. -->
+    <Style Selector="Button.iconButton.small, ToggleButton.iconButton.small">
+        <Setter Property="Width" Value="40" />
+        <Setter Property="Height" Value="40" />
+        <Setter Property="CornerRadius" Value="20" />
+    </Style>
+
+    <Style Selector="Button.iconButton.small PathIcon, ToggleButton.iconButton.small PathIcon">
+        <Setter Property="Width" Value="21" />
+        <Setter Property="Height" Value="21" />
+    </Style>
+
     <Style Selector="Border.toolbar PathIcon, Border.footer PathIcon">
         <Setter Property="Width" Value="20" />
         <Setter Property="Height" Value="20" />

docs/screenshots/reskin/phase3-welcome-advertise.png

@@ -27,13 +27,19 @@
             <SolidColorBrush x:Key="ArtPlaceholderBrush" Color="{DynamicResource SystemListLowColor}" />
             <!-- The art glow until a palette has been extracted from the artwork. -->
             <SolidColorBrush x:Key="GlowDefaultBrush" Color="{DynamicResource SystemAccentColorDark1}" />
+            <!--
+              The art tile's resting shadow. A Fluent colour that already carries its alpha, because
+              a BoxShadow takes a Color, not a brush, and reads this one's .Color.
+            -->
+            <SolidColorBrush x:Key="ArtShadowBrush" Color="{DynamicResource SystemChromeBlackMediumLowColor}" />
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Dark">
             <SolidColorBrush x:Key="VeilBrush" Color="{DynamicResource SystemAltHighColor}" Opacity="0.75" />
             <SolidColorBrush x:Key="TranslucentSurfaceBrush" Color="{DynamicResource SystemAltHighColor}" Opacity="0.6" />
             <SolidColorBrush x:Key="ArtPlaceholderBrush" Color="{DynamicResource SystemListLowColor}" />
             <SolidColorBrush x:Key="GlowDefaultBrush" Color="{DynamicResource SystemAccentColorLight1}" />
+            <SolidColorBrush x:Key="ArtShadowBrush" Color="{DynamicResource SystemChromeBlackMediumLowColor}" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>