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

   1 {% load i18n catalogue_tags %}
   2
   3 <div class="c-media__player" id="jp_container_{{ book.pk }}">
   4   <div class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
   5        data-supplied="oga,mp3"></div>
   6
   7   <div class="c-player">
   8     <button class="c-player__btn jp-play">
   9       <i class="icon icon-play"></i>
  10     </button>
  11     <button class="c-player__btn jp-pause">
  12       <i class="icon icon-play"></i>
  13     </button>
  14     <div class="c-player__timeline">
  15       <div class="c-player__title">
  16       </div>
  17       <div class="c-player__info"></div>
  18       <span>
  19         <span class="jp-seek-bar">
  20           <span class="jp-play-bar"></span>
  21         </span>
  22       </span>
  23       <time class="c-player__length">
  24         <span class="jp-current-time"></span>
  25         <span>
  26           <span class="jp-duration"></span>
  27         </span>
  28       </time>
  29     </div>
  30   </div>
  31   <div class="c-media__caption">
  32     <div class="license"></div>
  33     <div class="project-logo"></div>
  34     <div class="content"></div>
  35   </div>
  36
  37   <ul class="jp-playlist" style="display: none;">
  38     {% for i in book.get_audiobooks.0 %}
  39       <li
  40           data-mp3='{{ i.mp3.file.url }}'
  41           data-ogg='{{ i.ogg.file.url }}'
  42           data-media-id="{{ i.mp3.id }}"
  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
  70 </div>