fix #3658 Dane książki nachodzą na ramkę odtwarzacza

[wolnelektury.git] / src / catalogue / templates / catalogue / snippets / jplayer.html

diff --git a/src/catalogue/templates/catalogue/snippets/jplayer.html b/src/catalogue/templates/catalogue/snippets/jplayer.html
new file mode 100644 (file)
index 0000000..dd8ab83
--- /dev/null
+++ b/src/catalogue/templates/catalogue/snippets/jplayer.html
@@ -0,0 +1,59 @@
+{% 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>
+          </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>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+
+        <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>
+      </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>
+  </div>
+{% endif %}