azure-ai/AzureAi.Transcriber/Components/Pages/Home.razor

@page "/"
@inherits HomeBase
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<div id="file-selection">
    @if (string.IsNullOrWhiteSpace(SelectedFile))
    {
        <p>No file selected</p>
    }
    else
    {
        <p>@SelectedFile.Split("/").LastOrDefault()</p>
    }

    <h3>Available files</h3>
    
    <ul class="@(TranscribeInProgress ? "transcribing" : "")">
        @foreach (var file in Files)
        {
            <li class="@(SelectedFile == file ? "selected" : "")" @onclick="() => SelectFile(file)">
                @file.Split("/").LastOrDefault()
            </li>
        }
    </ul>

    <button @onclick="Transcribe" disabled="@TranscribeInProgress">
        @if (TranscribeInProgress)
        {
            <span>Transcribing...</span>
        }
        else
        {
            <span>Transcribe</span>
        }
    </button>
</div>

<div id="results">
    <h3>Transcription</h3>
    
    @if (string.IsNullOrWhiteSpace(Transcription))
    {
        <p>No transcription results</p>
    }
    else
    {
        <div id="transcription">@Transcription</div>
    }
</div>