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">
   9       <button class="c-player__btn jp-play">
  10         <i class="icon icon-play"></i>
  11       </button>
  12       <button class="c-player__btn jp-pause">
  13         <i class="icon icon-pause"></i>
  14       </button>
  15       <div class="c-player__timeline">
  16         <div class="c-player__title">
  17         </div>
  18         <div class="c-player__info"></div>
  19         <span>
  20           <span class="jp-seek-bar">
  21             <span class="jp-play-bar"></span>
  22           </span>
  23         </span>
  24         <time class="c-player__length">
  25           <span class="jp-current-time"></span>
  26           <span>
  27             <span class="jp-duration"></span>
  28             {% if audiobooks.0|length > 1 %}
  29               / {{ audiobooks.2 }}
  30             {% endif %}
  31           </span>
  32         </time>
  33       </div>
  34     </div>
  35     <div class="c-media__caption">
  36       <div class="license"></div>
  37       <div class="project-logo"></div>
  38       <div class="content"></div>
  39     </div>
  40
  41     <ul class="jp-playlist" style="display: none;">
  42       {% for i in audiobooks.0 %}
  43         <li
  44             data-mp3='{{ i.mp3.file.url }}'
  45             data-ogg='{{ i.ogg.file.url }}'
  46             data-media-id="{{ i.mp3.id }}"
  47         >
  48           {% with extra_info=i.mp3.get_extra_info_json %}
  49             <span class="title">
  50               {{ i.mp3.part_name }}
  51             </span>
  52             <span class="attribution">
  53               {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
  54               {% trans "director:" %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
  55             </span>
  56             <span class="license">
  57               {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
  58             </span>
  59             <span class="project-icon">
  60               {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
  61             </span>
  62             <span class="project-description">
  63               {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
  64                 {% with fb=extra_info.funded_by %}
  65                   {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
  66                 {% endwith %}
  67               {% endif %}
  68             </span>
  69           {% endwith %}
  70         </li>
  71       {% endfor %}
  72     </ul>
  73
  74   </div>
  75 {% endwith %}