Fix Marquee desync bug; add time/temp footer with progress bar at full width

README.md

@@ -1,10 +1,10 @@
 # subwave-nowplaying
 
 Tronbyt/Tidbyt app showing the current track on a [SUB/WAVE](https://github.com/perminder-klair/subwave)
-internet radio station: album art, track title, artist, the current show
+internet radio station: album art, track title/artist (scrolling), a thin
-and host, and a progress bar for the track pinned to the bottom, with
+separator, the current show and host, and a full-width footer with
-title/artist/show scrolling if they don't fit. Color scheme (cyan
+time/temperature and a track progress bar pinned to the bottom edge. Color
-title/artist, gray label, white show name, magenta host/progress bar) is
+scheme (cyan title/artist, white show name, magenta host/progress bar) is
 loosely modeled on SUB/WAVE's own web now-playing display.
 
 Not tied to any specific station — set your own station's base URL in the
@@ -27,9 +27,23 @@ app's config when adding it to a device.
   instead of stale track info.
 - If a track has no `subsonic_id`, or the cover fetch fails, falls back to a
   full-width layout with no art rather than a broken image.
-- Shows a "-- Show --" label, the current show name
+- Shows the current show name (`context.activeShow.name`) and host name
-  (`context.activeShow.name`), and host name (`dj.name`) below the artist,
+  (`dj.name`) below the artist, separated by a thin divider line.
-  and a track progress bar pinned to the very bottom.
+- Shows the local time and temperature (`context.clock`/`context.weather`)
+  and the track progress bar as a full-width (64px) footer overlaid on the
+  bottom of the layout — not confined to the 32px-wide text column, which
+  gives roughly 2x the character budget for the time/temp line (at the cost
+  of covering the bottom ~9px of the album art with a translucent bar).
+
+**Why show/host/time-temp are plain Text, not Marquee:** pixlet's Marquee
+runs its own internal scroll-cycle animation regardless of whether the text
+actually needs to scroll, and combining multiple Marquees with very
+different cycle lengths in one Root desyncs them — confirmed via an
+isolated repro where a short Marquee'd line intermittently collapsed to a
+single character on frames where the long title/artist marquees were
+mid-cycle. Only title/artist (which actually benefit from scrolling for
+long names) use Marquee; the shorter supplementary fields use plain
+Text/Row and just clip if too wide, which is an acceptable tradeoff.
 
 **Progress bar caveat:** the now-playing API reports track `duration` but
 not elapsed/remaining time, so the app tracks playback position itself —

subwave_nowplaying.star

@@ -1,7 +1,7 @@
 """
 Applet: SUB/WAVE Now Playing
 Summary: Shows what's playing on a SUB/WAVE station
-Description: Configure with your SUB/WAVE (github.com/perminder-klair/subwave) station's base URL to display the current track, artist, show, host, album art, and a progress bar.
+Description: Configure with your SUB/WAVE (github.com/perminder-klair/subwave) station's base URL to display the current track, artist, show, host, album art, time/temp, and a progress bar.
 Author: poprhythm
 """
 
@@ -17,9 +17,10 @@ COVER_TTL = 300
 
 COLOR_TITLE = "#22d3ee"  # cyan
 COLOR_ARTIST = "#22d3ee"  # cyan
-COLOR_LABEL = "#888888"  # muted gray, for the "-- Show --" label
+COLOR_SEPARATOR = "#444444"  # thin divider between artist and show/host
 COLOR_SHOW = "#e0e0e0"  # near-white
 COLOR_HOST = "#ec4899"  # magenta/pink
+COLOR_META = "#888888"  # muted gray, for the time/temp footer
 COLOR_BAR_FILLED = "#c026d3"  # magenta/purple
 COLOR_BAR_EMPTY = "#333333"
 
@@ -45,32 +46,27 @@ def main(config):
         render.Marquee(width = 32, child = render.Text(now["title"], color = COLOR_TITLE)),
         render.Marquee(width = 32, child = render.Text(now["artist"], color = COLOR_ARTIST)),
     ]
+    # Note: show/host is plain Text/Row, not Marquee. Pixlet's Marquee runs
+    # its own internal scroll-cycle animation regardless of whether the text
+    # actually needs to scroll, and combining multiple Marquees with very
+    # different cycle lengths in one Root desyncs them -- confirmed via an
+    # isolated repro where a short Marquee'd line intermittently collapsed to
+    # a single character on frames where the long title/artist marquees were
+    # mid-cycle. Plain Text just clips if too wide, an acceptable tradeoff
+    # for this short field.
     if now["show"]:
-        top_lines.append(render.Text("-- Show --", font = "tom-thumb", color = COLOR_LABEL))
+        top_lines.append(render.Box(width = 32, height = 1, color = COLOR_SEPARATOR))
         show_host_row = [render.Text(now["show"], font = "tom-thumb", color = COLOR_SHOW)]
         if now["host"]:
             show_host_row.append(render.Text(" " + now["host"], font = "tom-thumb", color = COLOR_HOST))
-        top_lines.append(render.Marquee(width = 32, child = render.Row(children = show_host_row)))
+        top_lines.append(render.Row(children = show_host_row))
 
-    children = [render.Column(children = top_lines)]
+    text_column = render.Column(children = top_lines)
-    if progress != None:
-        children.append(_progress_bar(progress["fraction"], width = 32))
-
-    text_column = render.Box(
-        width = 32,
-        height = 32,
-        child = render.Column(
-            main_align = "space_between",
-            cross_align = "start",
-            expanded = True,
-            children = children,
-        ),
-    )
 
     if art:
-        content = render.Row(children = [render.Image(src = art, width = 32, height = 32), text_column])
+        base = render.Row(children = [render.Image(src = art, width = 32, height = 32), text_column])
     else:
-        content = render.Column(
+        base = render.Column(
             main_align = "center",
             cross_align = "center",
             expanded = True,
@@ -80,7 +76,44 @@ def main(config):
             ],
         )
 
-    return render.Root(child = content)
+    # Time/temp and the progress bar are rendered as a full-width (64px)
+    # footer overlaid on top of the base layout via Stack, rather than
+    # squeezed into the 32px-wide text column -- gives roughly 2x the
+    # character budget for the time/temp line, at the cost of covering the
+    # bottom ~9px of the album art with a translucent bar.
+    footer_children = []
+    if now["time_temp"]:
+        footer_children.append(
+            render.Box(
+                width = 64,
+                height = 7,
+                color = "#000000cc",
+                child = render.Row(
+                    expanded = True,
+                    main_align = "center",
+                    cross_align = "center",
+                    children = [render.Text(now["time_temp"], font = "tom-thumb", color = COLOR_META)],
+                ),
+            ),
+        )
+    if progress != None:
+        footer_children.append(_progress_bar(progress["fraction"], width = 64))
+
+    if not footer_children:
+        return render.Root(child = base)
+
+    footer = render.Box(
+        width = 64,
+        height = 32,
+        child = render.Column(
+            main_align = "end",
+            cross_align = "start",
+            expanded = True,
+            children = [render.Column(children = footer_children)],
+        ),
+    )
+
+    return render.Root(child = render.Stack(children = [base, footer]))
 
 def _message_screen(lines):
     return render.Column(
@@ -108,7 +141,8 @@ def _fetch_now_playing(station_url):
     data = rep.json()
     np = data.get("nowPlaying", {})
     dj = data.get("dj", {})
-    active_show = data.get("context", {}).get("activeShow", {})
+    context = data.get("context", {})
+    active_show = context.get("activeShow", {})
 
     return {
         "title": np.get("title", "Unknown title"),
@@ -118,9 +152,23 @@ def _fetch_now_playing(station_url):
         "station": dj.get("station", "SUB/WAVE"),
         "show": active_show.get("name", ""),
         "host": dj.get("name", ""),
+        "time_temp": _format_time_temp(context.get("clock", {}), context.get("weather", {})),
         "online": bool(data.get("streamOnline", False)),
     }
 
+def _format_time_temp(clock, weather):
+    parts = []
+    display_time = clock.get("display", "")
+    if display_time:
+        parts.append(display_time)
+
+    temp = weather.get("temp", None)
+    unit = weather.get("tempUnit", "")
+    if temp != None:
+        parts.append("%d°%s" % (int(temp), unit))
+
+    return " · ".join(parts)
+
 def _fetch_cover(station_url, subsonic_id):
     if not subsonic_id:
         return None