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.6

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:”.
assetId SVP asset id of the live stream, sent with the play/pause events. Defaults to 396373.

Events

The puff does not play audio itself. The play button dispatches radio-puff:play and radio-puff:pause on document, with event.detail set to { assetId, provider, vendor, title, isLive }. The host page is expected to listen and drive its own player.

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.