ersatztv/ErsatzTV/Shared/ChannelPreviewDialog.razor

@inject IJSRuntime JsRuntime

<div>
    <MudDialog>
        <DialogContent>
            <media-controller style="width: 800px; height: calc(800px * 9/16)">
                <video id="video" slot="media"></video>
                <media-control-bar>
                    <media-mute-button></media-mute-button>
                    <media-volume-range></media-volume-range>
                    <media-fullscreen-button></media-fullscreen-button>
                </media-control-bar>
            </media-controller>
        </DialogContent>
        <DialogActions>
            <MudButton Color="Color.Primary" OnClick="Close">Close</MudButton>
        </DialogActions>
    </MudDialog>
</div>

@code {

    [CascadingParameter]
    MudDialogInstance MudDialog { get; set; }

    [Parameter]
    public string StreamUri { get; set; }

    protected override Task OnParametersSetAsync() => Task.CompletedTask;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            await JsRuntime.InvokeVoidAsync("previewChannel", StreamUri);
        }
        catch (Exception)
        {
            // ignored
        }

        await base.OnAfterRenderAsync(true);
    }

    private void Close()
    {
        try
        {
            JsRuntime.InvokeVoidAsync("stopPreview");
        }
        catch (Exception)
        {
            // ignored
        }

        MudDialog.Close(DialogResult.Ok(true));
    }

}