6c941d74b0be236cc053df5e473752c647cdb5c0
[wolnelektury.git] / src / catalogue / templates / catalogue / snippets / 2022_jplayer.html
1 {% load i18n l10n catalogue_tags %}
2
3 {% with audiobooks=book.get_audiobooks %}
4   <div class="c-media__player" id="jp_container_{{ book.pk }}" data-book-slug="{{ book.slug }}">
5     <div class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
6          data-supplied="oga,mp3"></div>
7
8     <div class="c-player__head">
9       <span>&nbsp;</span>
10     </div>
11
12     <div class="c-player">
13       <div class="c-player__btns">
14         <button class="play-prev" data-s-ord="2"><i class="icon icon-prev"></i></button>
15         <button class="c-player__btn--md jp-play" data-s-ord="3"><i class="icon icon-play"></i></button>
16         <button class="play-next" data-s-ord="4"><i class="icon icon-next"></i></button>
17         <div class="c-select speed" data-s-ord="1">
18           <ul>
19             <li data-speed="2">2×</li>
20             <li data-speed="1.75">1.75×</li>
21             <li data-speed="1.5">1.5×</li>
22             <li data-speed="1.25">1.25×</li>
23             <li data-speed="1" class="is-active">1×</li>
24             <li data-speed="0.75">0.75×</li>
25             <li data-speed="0.5">0.5×</li>
26           </ul>
27         </div>
28       </div>
29
30       <div class="c-player__timeline">
31         <div class="c-player__chapters">
32           {% if audiobooks.0|length > 1 %}
33             <span>
34               <span class="only-l">Rozdziały</span>
35               <span class="only-s">Roz.</span>
36             </span>
37           {% endif %}
38           <ul class="jp-playlist">
39             {% localize off %}
40             {% for i in audiobooks.0 %}
41               <li
42                   data-mp3='{{ i.mp3.file.url }}'
43                   data-ogg='{{ i.ogg.file.url }}'
44                   data-media-id="{{ i.mp3.id }}"
45                   data-duration="{{ i.mp3.duration }}"
46               >
47                 {% with extra_info=i.mp3.get_extra_info_json %}
48                   <span class="title">
49                     {{ i.mp3.part_name }}
50                   </span>
51                   <span class="attribution">
52                     {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
53                     {% trans "director:" %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
54                   </span>
55                   <span class="license">
56                     {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
57                   </span>
58                   <span class="project-icon">
59                     {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
60                   </span>
61                   <span class="project-description">
62                     {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
63                       {% with fb=extra_info.funded_by %}
64                         {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
65                       {% endwith %}
66                     {% endif %}
67                   </span>
68                 {% endwith %}
69               </li>
70             {% endfor %}
71             {% endlocalize %}
72           </ul>
73         </div>
74         <div class="c-player__info"></div>
75         <span>
76           <span class="jp-seek-bar">
77             <span class="jp-play-bar"></span>
78           </span>
79         </span>
80
81         <time class="c-player__length">
82           <span class="jp-current-time"></span>
83           <span class="time-left">
84           </span>
85           <span class="total-time-left">?</span>
86         </time>
87       </div>
88
89       <div class="c-player__volume">
90         <i class="icon icon-volume jp-mute"></i>
91         <span class="jp-volume-bar">
92           <span class="jp-volume-bar-value">
93           </span>
94         </span>
95       </div>
96
97
98     </div>
99     <div class="c-media__caption">
100       <div class="license"></div>
101       <div class="project-logo"></div>
102       <div class="content"></div>
103     </div>
104   </div>
105 {% endwith %}