<div id="audio" class="{{if (if-or player.transcript player.model.video) ' extra'}}{{if (if-and player.transcript player.model.video) ' multiple'}}">

  <div class="controls">

    <i title="Précédent" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Précédent</i>

    {{#if player.playing}}

    <i title="Pause" class="fa fa-pause" {{action 'toggle'}}>Pause</i>

    {{else}}

    <i title="Lecture" class="fa fa-play" {{action 'toggle'}}>Lecture</i>

    {{/if}}

    <i title="Suivant" class="fa fa-forward{{if isLast ' disabled'}}" {{action 'forward'}}>Suivant</i>

  </div>

  <div class="progress">

    <span class="head">{{to-minutes head}}</span>

    <span class="bar" onclick={{action 'setTime'}}><span class="value"></span></span>

    <span class="remaining">- {{to-minutes remaining}}</span>

  </div>

  <div class="controls extra">

  {{#if player.model.video}}

    {{#if player.videoscreen}}

    <i title="Compress" class="fa fa-compress" {{action 'display' 'video'}}>Hide video</i>

    {{else}}

    <i title="Expand" class="fa fa-expand" {{action 'display' 'video'}}>Show video</i>

    {{/if}}

  {{/if}}

  {{#if player.transcript}}

    <i title="Transcript" class="fa fa-text-height{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>

  {{/if}}

  </div>

  <div class="meta">

    <p>

      <div class="player-language-list">

          {{#each item.languages as |lang index|}}{{if index ", "}}{{doc-language url=lang class="language"}}{{/each}}

      </div>

    </p>

    <p>

      <span class="date">{{short-date item.issued}}</span>

    </p>

  </div>

</div>

<div id="video">

  <video id="popcorn-audio">

    {{#each player.model.media as |medium|}}

    <source src="{{ medium.url }}" type="{{ medium.format }}">

    {{/each}}

  Your browser does not support the audio element.

  </video>

</div>