Aftonbladet Astro Widgets

Radio puff

Compact now-playing teaser for Radio Aftonbladet with a play button and a ticker for what's next.

@schibsted/ab-radio-puffv0.0.5

Preview

Light
JUST NU

Lyssna på Radio Aftonbladet

Alltid det senaste

Dark
JUST NU

Lyssna på Radio Aftonbladet

Alltid det senaste

Drag the bottom-right corner of a preview to test narrower widths.

Install

npm install @schibsted/ab-radio-puff

RadioPuff

Radio puff widget. The frontend is written in Svelte (src/RadioPuff.svelte) and wrapped in an Astro component (src/RadioPuff.astro) that hydrates it.

Usage

The now-playing data is read from S3, so you need to be logged in to AWS locally to get the real data:

aws sso login --profile default

The consuming Astro project needs the @astrojs/svelte integration.

---
import RadioPuff from '@schibsted/ab-radio-puff';
---

<RadioPuff
	title="Morgonshow med Hjertén och Letic"
	nextShow="Besök av Alex och Sigge i studion"
	track="Midnight Sun med Zara Larsson"
	next="Survivor med Destinys Child"
/>
Prop Description
title Program on air now, shown in the header.
nextShow Upcoming program, shown as “Snart: …” under the title.
track Currently playing track, shown in the ticker (no label).
next Upcoming track, shown in the ticker labelled “Nästa:”.

Fonts are loaded from the Aftonbladet CDN. Colours are defined in src/theme.css using the same --c-* names and values as cdn.aftonbladet.se/dark/variables.css, and the widget switches to dark mode when data-color-scheme="dark" is set on an ancestor element — the same attribute @schibsted/dark-mode’s initializeDarkMode() sets on document.documentElement in front-pages.