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