<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'}} player-control" {{action 'backward'}}>Précédent</i>
    {{#if player.playing}}
    <i title="Pause" class="fa fa-pause player-control" {{action 'toggle'}}>Pause</i>
    {{else}}
    <i title="Lecture" class="fa fa-play player-control" {{action 'toggle'}}>Lecture</i>
    {{/if}}
    <i title="Suivant" class="fa fa-forward{{if isLast ' disabled'}} player-control" {{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 player-control" {{action 'display' 'video'}}>Hide video</i>
    {{else}}
    <i title="Expand" class="fa fa-expand player-control" {{action 'display' 'video'}}>Show video</i>
    {{/if}}
  {{/if}}
  {{#if player.transcript}}
    <div class="controls-transcript player-control">
    <i title="Transcript" class="fa fa-text-height{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
    {{input type="checkbox" name="autoscroll" id="transcript-autoscroll" title="autoscroll" checked=player.autoscroll}}<label for="transcript-autoscroll" title="autoscroll"></label>
    </div>
  {{/if}}
  </div>
  <div class="meta">
    <p>
      {{ autoscroll-component text=item.title class='title' }}
      <div class="player-language-list">
          {{#each item.languages as |lang index|}}{{if index ", "}}{{doc-language url=lang class="language"}}{{/each}}
      </div>
    </p>
    <p>
      {{ autoscroll-component text=item.publishers_disp class='author' }}
      {{doc-created value=item.created class='date'}}
    </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>