e1339adc2e1f46fbc98098b9a841c59b37bf657e
[wolnelektury.git] / src / catalogue / templates / catalogue / snippets / jplayer.html
1 {% load i18n %}
2 {% if audiobooks %}
3   <div class="jp-type-playlist">
4     <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
5          data-supplied="{% if have_oggs %}oga,{% endif %}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 }}'>
33                 <div class='play'>{{ i.mp3.name }}
34                   <div class='extra-info'>
35                     {% trans "Artist:" %} <span class='artist'>{{ i.mp3.extra_info.artist_name }}</span>,
36                     {% trans "director:" %} <span class='director'>{{ i.mp3.extra_info.director_name }}</span>
37                   </div>
38                 </div>
39               </li>
40             {% endfor %}
41           </ul>
42         </div>
43
44         <div class="jp-no-solution">
45           <span>Update Required</span>
46           To play the media you will need to either update your browser to a recent version or update your
47           <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
48         </div>
49       </div>
50     </div>
51     <div>
52       {% if audiobooks|length > 1 %}
53         <a class="play-prev">« {% trans "previous" %}</a>
54         {% trans "Part" %} <span class="number">1</span> / {{ audiobooks|length }}
55         <a class="play-next">{% trans "next" %} »</a>
56       {% endif %}
57     </div>
58   </div>
59 {% endif %}