src/catalogue/templates/catalogue/snippets/2022_jplayer.html

   1 {% load i18n catalogue_tags %}
   2
   3 {% with audiobooks=book.get_audiobooks %}
   4   <div class="c-media__player" id="jp_container_{{ book.pk }}">
   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></span>
  10     </div>
  11
  12     <div class="c-player">
  13       <div class="c-player__btns">
  14         <button class="play-prev"><i class="icon icon-prev"></i></button>
  15         <button class="c-player__btn--md jp-play"><i class="icon icon-play"></i></button>
  16         <button class="play-next"><i class="icon icon-next"></i></button>
  17         <div class="c-select speed">
  18           <ul>
  19             <li>2×</li>
  20             <li>1.75×</li>
  21             <li>1.5×</li>
  22             <li>1.25×</li>
  23             <li class="is-active">1×</li>
  24             <li>0.75×</li>
  25             <li>0.5×</li>
  26             <li>0.25×</li>
  27           </ul>
  28         </div>
  29       </div>
  30
  31       <div class="c-player__timeline">
  32         <div class="c-player__info"></div>
  33         <div class="c-player__chapters">
  34           <span>Rozdziały</span>
  35           <ul class="jp-playlist">
  36             {% for i in audiobooks.0 %}
  37               <li
  38                   data-mp3='{{ i.mp3.file.url }}'
  39                   data-ogg='{{ i.ogg.file.url }}'
  40                   data-media-id="{{ i.mp3.id }}"
  41               >
  42                 {% with extra_info=i.mp3.get_extra_info_json %}
  43                   <span class="title">
  44                     {{ i.mp3.part_name }}
  45                   </span>
  46                   <span class="attribution">
  47                     {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
  48                     {% trans "director:" %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
  49                   </span>
  50                   <span class="license">
  51                     {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
  52                   </span>
  53                   <span class="project-icon">
  54                     {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
  55                   </span>
  56                   <span class="project-description">
  57                     {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
  58                       {% with fb=extra_info.funded_by %}
  59                         {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
  60                       {% endwith %}
  61                     {% endif %}
  62                   </span>
  63                 {% endwith %}
  64               </li>
  65             {% endfor %}
  66           </ul>
  67         </div>
  68         <span>
  69           <span class="jp-seek-bar">
  70             <span class="jp-play-bar"></span>
  71           </span>
  72         </span>
  73
  74         <time class="c-player__length">
  75           <span class="jp-current-time"></span>
  76           <span>
  77             <span class="jp-duration"></span>
  78             {% if audiobooks.0|length > 1 %}
  79               / {{ audiobooks.2 }}
  80             {% endif %}
  81           </span>
  82         </time>
  83       </div>
  84
  85       <div class="c-player__volume">
  86         <i class="icon icon-volume jp-mute"></i>
  87         <span class="jp-volume-bar">
  88           <span class="jp-volume-bar-value">
  89           </span>
  90         </span>
  91       </div>
  92
  93
  94     </div>
  95     <div class="c-media__caption">
  96       <div class="license"></div>
  97       <div class="project-logo"></div>
  98       <div class="content"></div>
  99     </div>
 100
 101     <ul class="jp-playlist" style="display: none;">
 102       {% for i in audiobooks.0 %}
 103         <li
 104             data-mp3='{{ i.mp3.file.url }}'
 105             data-ogg='{{ i.ogg.file.url }}'
 106             data-media-id="{{ i.mp3.id }}"
 107         >
 108           {% with extra_info=i.mp3.get_extra_info_json %}
 109             <span class="title">
 110               {{ i.mp3.part_name }}
 111             </span>
 112             <span class="attribution">
 113               {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
 114               {% trans "director:" %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
 115             </span>
 116             <span class="license">
 117               {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
 118             </span>
 119             <span class="project-icon">
 120               {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
 121             </span>
 122             <span class="project-description">
 123               {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
 124                 {% with fb=extra_info.funded_by %}
 125                   {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
 126                 {% endwith %}
 127               {% endif %}
 128             </span>
 129           {% endwith %}
 130         </li>
 131       {% endfor %}
 132     </ul>
 133
 134   </div>
 135 {% endwith %}