bbc-sounds.ts

// Name: BBC Sounds Player
// Description: Stream a radio station from BBC Sounds
// Author: Josh Davenport-Smith
// Twitter: @jdprts

import "@johnlindquist/kit";
import { WidgetAPI } from "@johnlindquist/kit/types/pro";

const PLAYER_WIDTH = 180;
const PLAYER_HEIGHT = 195;

const getStyles = () => `
:root {
    --player-width: ${PLAYER_WIDTH}px;
    --player-height: ${PLAYER_HEIGHT}px;
    --header-offset: 25px;
    --footer-offset: 25px;
    --scale: 2.2;
}
 
#player {
    width: var(--player-width);
    height: var(--player-height);
    overflow: hidden;
    position: relative;
}
 
iframe {
    position: absolute;
    left: 0;
    width: calc(var(--player-width) * var(--scale));
    height: calc((var(--player-height) * var(--scale)) + (var(--header-offset) * var(--scale)) + (var(--footer-offset) * var(--scale)));
    top: calc(var(--header-offset) * -1);
    transform: scale(calc(1 / var(--scale)));
    transform-origin: 0 0;
}
`;

const getScripts = (station: string) => `
(() => {
    const playerContainer = document.getElementById('player');
    const url = 'https://www.bbc.co.uk/sounds/player/bbc_${station}';
    const iframe = document.createElement('iframe');
    iframe.setAttribute('src', url);
    iframe.setAttribute('enablejsapi', true);
    playerContainer.appendChild(iframe);
})();
`;

const station = await arg('Select station', [
    {
        name: '6 Music',
        value: '6music',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_6music/colour_default.svg',
    },
    {
        name: 'Radio 1',
        value: 'radio_one',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_one/colour_default.svg',
    },
    {
        name: 'Radio 2',
        value: 'radio_two',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_two/colour_default.svg',
    },
    {
        name: 'Radio 3',
        value: 'radio_three',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_three/colour_default.svg',
    },
    {
        name: 'Radio 4',
        value: 'radio_fourfm',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_four/colour_default.svg',
    },
    {
        name: 'Radio Five Live',
        value: 'radio_five_live',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_radio_five_live/colour_default.svg',
    },
    {
        name: 'World Service',
        value: 'world_service',
        img: 'https://sounds.files.bbci.co.uk/3.1.5/networks/bbc_world_service/colour_default.svg',
    },
])

const w: WidgetAPI = await widget(
    `
<div id="player"></div>
<style type="text/css">${getStyles()}</style>
<script type="text/javascript">${getScripts(station)}</script>
    `,
    { alwaysOnTop: true }
);


w.setSize(PLAYER_WIDTH, PLAYER_HEIGHT);

w.onClick(event => event.targetId === "x" && w.close());

w.onResized(() => w.setSize(PLAYER_WIDTH, PLAYER_HEIGHT));