<?php
/** @var App\Entity\Station $station */

$this->layout('minimal', [
    'page_class' => 'embed station-'.$station->getShortName(),
    'title' => $this->e($station->getName()),
    'hide_footer' => true
]);

/** @var \App\Assets $assets */
$assets
    ->load('vue')
    ->load('radio');
?>

<div class="stations nowplaying">
    <?=$this->fetch('frontend/public/player_component', ['stream_url' => $stream_url, 'autoplay' => $autoplay]) ?>

    <div id="radio-embedded-controls">
        <div class="progress jp-volume-bar" style="height: 15px;" title="<?=__('Volume') ?>"><div class="jp-volume-bar-value progress-bar" role="progressbar"></div></div>
    </div>
</div>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function() {
    function loadNowPlaying() {
        $.getJSON('<?=$router->named('api:nowplaying:index', ['station' => $station->getId()]) ?>', function(row) {
            nowPlaying.np = row;

            if ('mediaSession' in navigator) {
                navigator.mediaSession.metadata = new MediaMetadata({
                    title: row.now_playing.song.title,
                    artist: row.now_playing.song.artist,
                    artwork: [
                        { src: row.now_playing.song.art }
                    ]
                });
            }

            setTimeout(loadNowPlaying, 15000);
        });
    }

    loadNowPlaying();
});
</script>
