<div class='container'>

    <h5>Player</h5>
    <p class='text-small text-info'>Play your channels in a local media player. This is mostly meant for testing purposes and to show what endpoints are available. </p>


    <div class="form-group row">
        <label for="channel" class="col-form-label col-sm-2">Channel:</label>

        <div class="col">
            <div ng-show='loading'>
                <div class='loader'></div>
            </div>
            <input ng-show='! loading && channelOptions.length == 1' readonly class='form-control-plaintext'
                id="endpoint"
                value = "No channels found."
            >
            </input>
            <select
                id="channel"
                ng-show='! loading && channelOptions.length != 1'
                class="custom-select"
                ng-model="channel"
                ng-options="o.id as o.description for o in channelOptions"
            >
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label for="endpoint" class="col-form-label col-sm-2">Endpoint:</label>

        <div class="col">
            <select
                id="endpoint"
                class="custom-select"
                ng-model="selectedEndpoint"
                ng-options="o.id as o.description for o in endpointOptions"
                aria-describedby="endpointHelp"
            >
            </select>
            <small id="endpointHelp" class="form-text text-muted">
                <span ng-show="selectedEndpoint == 'video' ">
                    The /video endpoint is the one used by IPTV player or Plex to play the channel&apos;s content. It creates a single mpegts stream for the channel out of all of the videos scheduled for it. For this reason, it needs the videos to be formatted to the same codec and resolution (normalized). Use this endpoint to debug issues with Plex/IPTV players or when the other endpoints don&apos;t work correctly in your player.
                </span>
                <span ng-show="selectedEndpoint == 'm3u8' ">
                    The /m3u8 endpoint (misnomer) sends the channel as a playlist of videos, which allows <i>some</i> players to play the channel in sequence without the need for a single stream. Since there is no need for a single stream, it requires less normalization work .
                </span>
                <span ng-show="selectedEndpoint == 'radio' ">
                    The /radio endpoint plays only the audio of the channel, effectively turning it into a radio station. If you only need the audio, this endpoint is much more efficient as it will not need to extract or transcode video at all.
                </span>

            </small>
        </div>
    </div>

    <div class="form-group row">
        <label for="endpoint" class="col-form-label col-sm-2">URL to play:</label>

        <div class="col">
            <input readonly class='form-control-plaintext'
                id="endpoint"
                style="font-family: monospace"
                value = "{{ endpoint() }}"
            >
            </input>
        </div>
    </div>


    <div class='form-group row' ng-show="! buttonDisabled()" >
        <div class='col-sm-2'>
            <a
                role="button"
                ng-href='{{ endpointButtonHref() }}'
                style="width:99%"
                title="Attempt to play in local media player" class='btn btn-primary player-button'
            >
                <span class='fa fa-play'> Play</span>
            </a>
        </div>
    </div>

     
</div>