You are here

audioplayer--jplayer.html.twig in AudioField 8

Circle theme implementation for jPlayer 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.

File

templates/audioplayer--jplayer.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Circle theme implementation for jPlayer audio player.
  5. *
  6. * Available variables:
  7. * - plugin_id: the name of the plugin being used for templating.
  8. * - plugin_theme: the name of the specific plugin theme, if it exists.
  9. * - files: array of render info for each file.
  10. * - settings: array of settings for thie player.
  11. *
  12. * @ingroup themeable
  13. */
  14. #}
  15. <div class="audiofield">
  16. {% for file in files %}
  17. <div class="audiofield-player">
  18. <div id="jquery_jplayer_{{ file.id }}" class="cp-jplayer"></div>
  19. <div class="cp-circle-frame">
  20. <div id="cp_container_{{ file.id }}" class="cp-container">
  21. <div class="cp-buffer-holder">
  22. <div class="cp-buffer-1"></div>
  23. <div class="cp-buffer-2"></div>
  24. </div>
  25. <div class="cp-progress-holder">
  26. <div class="cp-progress-1"></div>
  27. <div class="cp-progress-2"></div>
  28. </div>
  29. <div class="cp-circle-control"></div>
  30. <ul class="cp-controls">
  31. <li><a class="cp-play" tabindex="1">play</a></li>
  32. <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
  33. </ul>
  34. </div>
  35. <label for="cp_container_{{ file.id }}">{{ file.description }}</label>
  36. </div>
  37. </div>
  38. {% endfor %}
  39. </div>