@page "/example"
@using Howler.Blazor.Components

<!-- Inject services -->
@inject IHowl Howl
@inject IHowlGlobal HowlGlobal

<div>
    <button class="btn btn-primary oi oi-media-play" @onclick="Play"></button>
    <button class="btn btn-primary oi oi-media-stop" @onclick="Stop"></button>
    <button class="btn btn-primary oi oi-media-pause" @onclick="Pause"></button>
    <pre>TotalTime : @TotalTime</pre>
    <pre>State : @State</pre>
    <pre>Supported Codes : @SupportedCodes</pre>
</div>

@code {
    protected TimeSpan TotalTime;
    protected string State = "-";
    protected string SupportedCodes;

    protected override async Task OnInitializedAsync()
    {
        // Display all supported codecs
        var codecs = await HowlGlobal.GetCodecs();
        SupportedCodes = string.Join(", ", codecs);

        // Register callbacks
        Howl.OnPlay += e =>
        {
            State = "Playing";
            TotalTime = e.TotalTime;

            StateHasChanged();
        };

        Howl.OnStop += e =>
        {
            State = "Stopped";

            StateHasChanged();
        };

        Howl.OnPause += e =>
        {
            State = "Paused";

            StateHasChanged();
        };
    }

    protected async Task Play()
    {
        await Howl.Play("https://www.healingfrequenciesmusic.com/wp-content/uploads/2015/03/Love-Abounds-Sample.mp3?_=1");
    }

    protected async Task Stop()
    {
        await Howl.Stop();
    }

    protected async Task Pause()
    {
        await Howl.Pause();
    }
}