-{% load i18n %}
-{% if audiobooks %}
- <div class="jp-type-playlist">
- <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
- data-supplied="{% if have_oggs %}oga,{% endif %}mp3"></div>
- <div id="jp_container_{{ book.pk }}" class="jp-audio">
- <div class="jp-type-single">
- <span class="title"></span>
- <div class="jp-gui jp-interface">
- <ul class="jp-controls">
- <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
- <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
- <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
- <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
+{% load i18n l10n catalogue_tags %}
+
+{% with audiobooks=book.get_audiobooks %}
+ <div class="c-media__player" id="jp_container_{{ book.pk }}" data-book-slug="{{ book.slug }}">
+ <div class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
+ data-supplied="oga,mp3"></div>
+
+ <div class="c-player__head">
+ <span> </span>
+ </div>
+
+ <div class="c-player">
+ <div class="c-player__btns">
+ <button class="play-prev" data-s-ord="2"><i class="icon icon-prev"></i></button>
+ <button class="c-player__btn--md jp-play" data-s-ord="3"><i class="icon icon-play"></i></button>
+ <button class="play-next" data-s-ord="4"><i class="icon icon-next"></i></button>
+ <div class="c-select speed" data-s-ord="1">
+ <ul>
+ <li data-speed="2">2×</li>
+ <li data-speed="1.75">1.75×</li>
+ <li data-speed="1.5">1.5×</li>
+ <li data-speed="1.25">1.25×</li>
+ <li data-speed="1" class="is-active">1×</li>
+ <li data-speed="0.75">0.75×</li>
+ <li data-speed="0.5">0.5×</li>
</ul>
- <div class="jp-progress">
- <div class="jp-seek-bar">
- <div class="jp-play-bar"></div>
- </div>
- </div>
- <div class="jp-volume-bar">
- <div class="jp-volume-bar-value"></div>
- </div>
- <div class="jp-time-holder">
- <div class="jp-current-time"></div>
- <div class="jp-duration"></div>
- </div>
</div>
- <div class="jp-playlist">
- <ul>
- {% for i in audiobooks %}
- <li data-mp3='{{ i.mp3.file.url }}' data-ogg='{{ i.ogg.file.url }}'>
- <div class='play'>{{ i.mp3.name }}
- <div class='extra-info'>
- {% trans "Artist" %}: <span class='artist'>{{ i.mp3.extra_info.artist_name }}</span>,
- {% trans "Director" %}: <span class='director'>{{ i.mp3.extra_info.director_name }}</span>
- </div>
- </div>
+ </div>
+
+ <div class="c-player__timeline">
+ <div class="c-player__chapters">
+ {% if audiobooks.0|length > 1 %}
+ <span>
+ <span class="only-l">{% trans "Rozdziały" %}</span>
+ <span class="only-s">{% trans "Roz." context "rozdziały" %}</span>
+ </span>
+ {% endif %}
+ <ul class="jp-playlist">
+ {% localize off %}
+ {% for i in audiobooks.0 %}
+ <li
+ data-mp3='{{ i.mp3.file.url }}'
+ data-ogg='{{ i.ogg.file.url }}'
+ data-media-id="{{ i.mp3.id }}"
+ data-duration="{{ i.mp3.duration }}"
+ >
+ {% with extra_info=i.mp3.get_extra_info_json %}
+ <span class="title">
+ {{ i.mp3.part_name }}
+ </span>
+ <span class="attribution">
+ {% trans "Czyta:" %} <span class='artist'>{{ extra_info.artist_name }}</span>,
+ {% trans "reż." %} <span class='director'>{{ extra_info.director_name }}</span>
+ </span>
+ <span class="license">
+ {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
+ </span>
+ <span class="project-icon">
+ {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
+ </span>
+ <span class="project-description">
+ {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
+ {% with fb=extra_info.funded_by %}
+ {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
+ {% endwith %}
+ {% endif %}
+ </span>
+ {% endwith %}
</li>
{% endfor %}
+ {% endlocalize %}
</ul>
</div>
+ <div class="c-player__info"></div>
+ <span>
+ <span class="jp-seek-bar">
+ <span class="jp-play-bar"></span>
+ </span>
+ </span>
- <div class="jp-no-solution">
- <span>Update Required</span>
- To play the media you will need to either update your browser to a recent version or update your
- <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
- </div>
+ <time class="c-player__length">
+ <span class="jp-current-time"></span>
+ <span class="time-left">
+ </span>
+ <span class="total-time-left">?</span>
+ </time>
+ </div>
+
+ <div class="c-player__volume">
+ <i class="icon icon-volume jp-mute"></i>
+ <span class="jp-volume-bar">
+ <span class="jp-volume-bar-value">
+ </span>
+ </span>
</div>
+
+
</div>
- <div>
- {% if audiobooks|length > 1 %}
- <a class="play-prev">« {% trans "previous" %}</a>
- {% trans "Part" %} <span class="number">1</span> / {{ audiobooks|length }}
- <a class="play-next">{% trans "next" %} »</a>
- {% endif %}
+ <div class="c-media__caption">
+ <div class="license"></div>
+ <div class="project-logo"></div>
+ <div class="content"></div>
</div>
</div>
-{% endif %}
+{% endwith %}
fnp / wolnelektury.git / blobdiff