audiofield-8.x-1.x-dev/templates/audioplayer--soundmanager--barui.html.twig

{#
/**
 * @file
 * Bar UI theme implementation for SoundManager audio player.
 *
 * Available variables:
 * - plugin_id: the name of the plugin being used for templating.
 * - plugin_theme: the name of the specific plugin theme, if it exists.
 * - files: array of render info for each file.
 * - settings: array of settings for thie player.
 *
 * @ingroup themeable
 */
#}
<div class="audiofield">
  <div class="sm2-bar-ui {% if settings.count > 1 %} playlist-open {% endif %}">
    <div class="bd sm2-main-controls">
      <div class="sm2-inline-texture"></div>
      <div class="sm2-inline-gradient"></div>
      <div class="sm2-inline-element sm2-button-element">
        <div class="sm2-button-bd">
          <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / pause</a>
        </div>
      </div>
      <div class="sm2-inline-element sm2-inline-status">
        <div class="sm2-playlist">
          <div class="sm2-playlist-target"><noscript><p>JavaScript is required.</p></noscript></div>
        </div>
        <div class="sm2-progress">
          <div class="sm2-row">
            <div class="sm2-inline-time">0:00</div>
            <div class="sm2-progress-bd">
              <div class="sm2-progress-track">
                <div class="sm2-progress-bar"></div>
                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
              </div>
            </div>
            <div class="sm2-inline-duration">0:00</div>
          </div>
        </div>
      </div>
      <div class="sm2-inline-element sm2-button-element sm2-volume">
        <div class="sm2-button-bd">
          <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
          <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
        </div>
      </div>
      <div class="sm2-inline-element sm2-button-element sm2-menu">
        <div class="sm2-button-bd">
          <a href="#menu" class="sm2-inline-button sm2-icon-menu">menu</a>
        </div>
      </div>
    </div>
    <div class="bd sm2-playlist-drawer sm2-element">
      <div class="sm2-playlist-wrapper">
        <ul class="sm2-playlist-bd">
          {% for file in files %}
            <li>
              <a href="{{ file.url }}">{{ file.description }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
      <div class="sm2-extra-controls">
        <div class="bd">
          <div class="sm2-inline-element sm2-button-element">
            <a href="#prev" title="Previous" class="sm2-inline-button previous">&lt; previous</a>
          </div>
          <div class="sm2-inline-element sm2-button-element">
            <a href="#next" title="Next" class="sm2-inline-button next">&gt; next</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>