tabler/shared/ui/InlinePlayer.astro

---
// Renders nothing unless both id and embedId are provided.
import CaptureScript from '../components/CaptureScript.astro';
interface Props {
	id?: string;
	type?: string;
	embedId?: string | number;
}

const { id, type = 'youtube', embedId } = Astro.props;

const enabled = Boolean(id && embedId);
const playerId = `player-${id}`;
const playerSelector = `#player-${id}`;
---

{
	enabled && (
		<div id={playerId} data-plyr-provider={type} data-plyr-embed-id={embedId} />
	)
}
{
	enabled && (
		<CaptureScript>
			<!-- BEGIN PLAYER -->
			<script is:inline define:vars={{ playerId, playerSelector }}>
				window.tabler_player ??= {};

				function initPlayer() {
					window.Plyr && (window.tabler_player[playerId] = new Plyr(playerSelector));
				}

				document.readyState !== 'loading' ? initPlayer() : document.addEventListener('DOMContentLoaded', initPlayer, { once: true });
			</script>
			<!-- END PLAYER -->
		</CaptureScript>
	)
}