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 }}" 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"><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 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__info"></div>
  32         <div class="c-player__chapters">
  33           {% if audiobooks.0|length > 1 %}
  34             <span>Rozdziały</span>
  35           {% endif %}
  36           <ul class="jp-playlist">
  37             {% for i in audiobooks.0 %}
  38               <li
  39                   data-mp3='{{ i.mp3.file.url }}'
  40                   data-ogg='{{ i.ogg.file.url }}'
  41                   data-media-id="{{ i.mp3.id }}"
  42                   data-duration="{{ i.mp3.duration }}"
  43               >
  44                 {% with extra_info=i.mp3.get_extra_info_json %}
  45                   <span class="title">
  46                     {{ i.mp3.part_name }}
  47                   </span>
  48                   <span class="attribution">
  49                     {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
  50                     {% trans "director:" %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
  51                   </span>
  52                   <span class="license">
  53                     {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
  54                   </span>
  55                   <span class="project-icon">
  56                     {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
  57                   </span>
  58                   <span class="project-description">
  59                     {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
  60                       {% with fb=extra_info.funded_by %}
  61                         {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
  62                       {% endwith %}
  63                     {% endif %}
  64                   </span>
  65                 {% endwith %}
  66               </li>
  67             {% endfor %}
  68           </ul>
  69         </div>
  70         <span>
  71           <span class="jp-seek-bar">
  72             <span class="jp-play-bar"></span>
  73           </span>
  74         </span>
  75
  76         <time class="c-player__length">
  77           <span class="jp-current-time"></span>
  78           <span class="time-left">
  79           </span>
  80           <span class="total-time-left">?</span>
  81         </time>
  82       </div>
  83
  84       <div class="c-player__volume">
  85         <i class="icon icon-volume jp-mute"></i>
  86         <span class="jp-volume-bar">
  87           <span class="jp-volume-bar-value">
  88           </span>
  89         </span>
  90       </div>
  91
  92
  93     </div>
  94     <div class="c-media__caption">
  95       <div class="license"></div>
  96       <div class="project-logo"></div>
  97       <div class="content"></div>
  98     </div>
  99   </div>
 100 {% endwith %}