src/catalogue/templates/catalogue/snippets/jplayer.html

   1 {% load i18n catalogue_tags %}
   2 {% if audiobooks %}{% if book|status:request.user != 'closed' %}
   3   <div class="jp-type-playlist" data-book-id="{{ book.pk }}" data-book-slug="{{ book.slug }}">
   4     <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
   5          data-supplied="oga,mp3"></div>
   6     <div id="jp_container_{{ book.pk }}" class="jp-audio">
   7       <div class="jp-type-single">
   8         <span class="title"></span>
   9         <div class="jp-gui jp-interface">
  10           <ul class="jp-controls">
  11             <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
  12             <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
  13             <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
  14             <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
  15           </ul>
  16           <div class="jp-progress">
  17             <div class="jp-seek-bar">
  18               <div class="jp-play-bar"></div>
  19             </div>
  20           </div>
  21           <div class="jp-volume-bar">
  22             <div class="jp-volume-bar-value"></div>
  23           </div>
  24           <div class="jp-time-holder">
  25             <div class="jp-current-time"></div>
  26             <div class="jp-duration"></div>
  27           </div>
  28         </div>
  29         <div class="jp-playlist">
  30           <ul>
  31             {% for i in audiobooks %}
  32               <li data-mp3='{{ i.mp3.file.url }}' data-ogg='{{ i.ogg.file.url }}' data-media-id="{{ i.mp3.id }}">
  33                 <div class='play'>{{ i.mp3.name }}
  34                   <div class='extra-info'>
  35                   {% with extra_info=i.mp3.get_extra_info_json %}
  36                     {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
  37                     {% trans "director:" %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
  38                     {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
  39                     {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
  40                     <p>
  41                      {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
  42                       {% with fb=extra_info.funded_by %}
  43                         {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
  44                       {% endwith %}
  45                      {% endif %}
  46                     </p>
  47                   {% endwith %}
  48                   </div>
  49                 </div>
  50               </li>
  51             {% endfor %}
  52           </ul>
  53         </div>
  54
  55         <div class="jp-no-solution">
  56           <span>Update Required</span>
  57           To play the media you will need to either update your browser to a recent version or update your
  58           <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
  59         </div>
  60       </div>
  61     </div>
  62     <div>
  63       {% if audiobooks|length > 1 %}
  64         <a class="play-prev">« {% trans "previous" %}</a>
  65         {% trans "Part" %} <span class="number">1</span> / {{ audiobooks|length }}
  66         <a class="play-next">{% trans "next" %} »</a>
  67       {% endif %}
  68     </div>
  69   </div>
  70 {% endif %}{% endif %}