Mux Video

This will be replaced by Mux Player when released.
<html>
    <head>
        <title>Mux Elements</title>
        <script type="module" src="https://unpkg.com/@mux-elements/mux-video@0.2"></script>
    </head>
<body>

<!-- URL segment_3 would be the Mux ID. -->
{exp:mux:get mux_id="{segment_3}"}

        {if audio_only}
            <mux-audio
                playback-id="{playback}"
                env-key="{env_key}"
                metadata-video-title="{mux_title}"
                metadata-viewer-user-id="{logged_in_member_id}"
                metadata-video-id="{mux_id}"
                stream-type="{if type=='asset'}vod{if:else}live{/if}"
                controls
                style="width:100%"
                playsinline
            ></mux-audio>
            <p>Audio-only</p>
         {if:else}
            <mux-video
                playback-id="{playback}"
                env-key="{env_key}"
                metadata-video-title="{mux_title}"
                metadata-viewer-user-id="{logged_in_member_id}"
                metadata-video-id="{mux_id}"
                stream-type="{if type=='asset'}vod{if:else}live{/if}"
                controls
                style="aspect-ratio:{aspect_ratio_css};width:100%"
                playsinline
                poster="{thumbnail_url}"
            ></mux-video>
        {/if}

        <aside>
            <p>Views: <span data-realtimeviews data-api="{real_time_views}">
                <span id="views">0</span> views, 
                <span id="viewers">0</span> vieiwers.
            </span></p>
        </aside>

{/exp:mux:get}

<script>
    // Show real-time views.
    (function () {
        const views = document.querySelectorAll('[data-realtimeviews]');
        if (views) {
            views.forEach( view => {
                const api = view.dataset.api;                
                if (!api) {
                    console.debug('No API link found for real-time views.');
                    return;
                }
                async function getRealTimeViews()
                {
                    let viewsdata = await fetch(api)
                        .then(response => response.json())
                        .then(data => data)
                        .catch(error => console.log(error));
                    view.querySelector('#views').innerHTML = viewsdata.data[0].views;
                    view.querySelector('#viewers').innerHTML = viewsdata.data[0].viewers;
                }
                getRealTimeViews();
                setInterval(getRealTimeViews, 5000);
            })
        }
    }());
</script>

</body>
</html>