Frutiger Aero: the theme now plays its soundtrack

Selecting Aero starts a random track from the Frutiger Aero playlist
(Bigblamboii's set on SoundCloud); every following track is drawn at random
too, so the set shuffles itself. The player is the credit bar from the mock:
a 44px glass circle with a note by default, expanding into pause + the
track's title + "SoundCloud - artist" (both reported by the widget).

- Only Aero ever touches SoundCloud: the embed and the widget API are created
  while the theme is on and the listener has not turned it off; light/dark
  request nothing (pinned by a suite check).
- The off choice persists (freezmo.aero-music.v1); re-selecting Aero in
  Settings is fresh consent (applyTheme clears it).
- Autoplay rides the theme-selection gesture; after a reload the circle comes
  up paused (browsers require a gesture) and one tap starts it.
- Volume 45; the iframe is 1px and inert, only the audio engine; the credit
  area collapses back to the circle without stopping the music.
- Geometry: clears the phone tab bar, lifts above the chat composer and the
  wizard bar, steps aside under immersive overlays and while the cookie
  notice shares the corner. 44px targets on phones.
- Cookie policy gained the third-party-embed paragraph it was owed.

tests/aero-music-test.mjs (16th suite, stubbed widget API, 21 checks). All
suites green, contrast scan clean. Version 0.7.0, SW v92.
This commit is contained in:
Martin Dvořák 2026-10-15 22:47:44 +00:00
commit a4c85ed77a
14 changed files with 570 additions and 4 deletions

View file

@ -420,6 +420,26 @@ export function ClockIcon({ className }: IconProps) {
);
}
/** Frutiger Aero's soundtrack player. */
export function MusicIcon({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M9.4 17.2V6.6l8-1.6v10.4" />
<circle cx="6.9" cy="17.6" r="2.5" />
<circle cx="14.9" cy="15.8" r="2.5" />
</Svg>
);
}
export function PauseIcon({ className }: IconProps) {
return (
<Svg className={className} filled>
<rect x="7.2" y="5.6" width="3.4" height="12.8" rx="1.4" />
<rect x="13.4" y="5.6" width="3.4" height="12.8" rx="1.4" />
</Svg>
);
}
/** "From your notes" — a page with a folded corner and text lines. */
export function NotesIcon({ className }: IconProps) {
return (