Player: a sleep timer, and AirPlay in the app (#429)

The sleep timer pauses after 5 minutes to an hour, fading out over the
last ten seconds. In the iOS app the phone's player keeps the time:
with the screen locked the web view is frozen, and a timer in the page
would not fire until the app was opened again. A browser plays on in a
background tab, so there the page keeps it.

The app says at ready what it does itself ({t:"host", can}), so a page
deployed ahead of the app falls back to its own timer and shows no
AirPlay button an older app would ignore. This deploy order problem
came up with #425.

AirPlay opens AVRoutePickerView by pressing its button from code; there
is no API to present it. On iOS 27 the picker opens on the button's
primary action, not touch-up, so that is what is sent, with touch-up
for versions that have nothing on it. The simulator has no AirPlay
devices and never showed the picker, so this is unverified until it
runs on a phone.

On a phone the player's one line left the title two letters wide once
the two controls were added, so the title takes the top line and the
controls flank play below it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-11-08 16:54:08 -05:00
parent ecc248307e
commit 2e031763fa
13 changed files with 193 additions and 6 deletions

View File

@@ -1383,10 +1383,19 @@ body:has(#player.on) #status{padding-bottom:3px}
.acts .btn{padding:7px 10px;font-size:12.5px}
.toolbar{gap:8px}
#list{padding:0 12px 10px}
#player{grid-template-columns:1fr auto;grid-template-areas:"now right" "mid mid";gap:2px 8px}
/* The title has the top line to itself, and the controls flank play: with the sleep timer and
AirPlay beside the speed (#429), one line for all of them left the title two letters wide. */
#player{grid-template-columns:auto auto 1fr auto auto;gap:4px 8px;
grid-template-areas:"now now now now close" "sleep rate btns route dead" "seek seek seek seek seek"}
#pright,#pmid{display:contents}
#pnow{grid-area:now;width:auto}
#pright{grid-area:right}
#pmid{grid-area:mid}
#pbtns{grid-area:btns}
#seekrow{grid-area:seek}
#sleep{grid-area:sleep}
#rate{grid-area:rate}
#proute{grid-area:route}
#pdead{grid-area:dead}
#pclose{grid-area:close}
#pnow .art{width:38px;height:38px}
#pnow .txt small,#pright #vol{display:none}
.wrap.plain{padding:14px}