return (
    <>
        <p class="mb-6 text-center font-mono text-xl">Watch</p>
        <ul>
            <For each={broadcasts()} fallback={<li>No live broadcasts</li>}>
                {(broadcast) => {
                    return (
                        <li class="mb-4">
                            <a>{broadcast}</a>
                        </li>
                    )
                }}
            </For>
        </ul>
    </>
)

return (
    <>
        <p class="mb-6 text-center font-mono text-xl">Watch</p>
        <ul>
            <For each={broadcasts()} fallback={<li>No live broadcasts</li>}>
                {(broadcast) => {
                    return (
                        <li class="mb-4">
                            <a>{broadcast}</a>
                        </li>
                    )
                }}
            </For>
        </ul>
    </>
)

const [broadcasts, setBroadcasts] = createSignal<Array<string>>([])

createEffect(async () => {
    for await (const broadcasts of props.player.broadcasts()) {
        console.log("got broadcasts", broadcasts)
            setBroadcasts(broadcasts)
    }
})

const [broadcasts, setBroadcasts] = createSignal<Array<string>>([])

createEffect(async () => {
    for await (const broadcasts of props.player.broadcasts()) {
        console.log("got broadcasts", broadcasts)
            setBroadcasts(broadcasts)
    }
})