Implemented the new player.

[wolnelektury.git] / src / catalogue / templates / catalogue / snippets / 2022_jplayer.html

diff --git a/src/catalogue/templates/catalogue/snippets/2022_jplayer.html b/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
index 2f7caf6..d7c19a8 100644 (file)
--- a/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
+++ b/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
@@ -5,22 +5,72 @@
     <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">
-      <button class="c-player__btn jp-play">
-        <i class="icon icon-play"></i>
-      </button>
-      <button class="c-player__btn jp-pause">
-        <i class="icon icon-pause"></i>
-      </button>
-      <div class="c-player__timeline">
-        <div class="c-player__title">
+      <div class="c-player__btns">
+        <button class="play-prev"><i class="icon icon-prev"></i></button>
+        <button class="c-player__btn--md jp-play"><i class="icon icon-play"></i></button>
+        <button class="play-next"><i class="icon icon-next"></i></button>
+        <div class="c-select speed">
+          <ul>
+            <li>2×</li>
+            <li>1.75×</li>
+            <li>1.5×</li>
+            <li>1.25×</li>
+            <li class="is-active">1×</li>
+            <li>0.75×</li>
+            <li>0.5×</li>
+            <li>0.25×</li>
+          </ul>
         </div>
+      </div>
+
+      <div class="c-player__timeline">
         <div class="c-player__info"></div>
+        <div class="c-player__chapters">
+          <span>Rozdziały</span>
+          <ul class="jp-playlist">
+            {% for i in audiobooks.0 %}
+              <li
+                  data-mp3='{{ i.mp3.file.url }}'
+                  data-ogg='{{ i.ogg.file.url }}'
+                  data-media-id="{{ i.mp3.id }}"
+              >
+                {% with extra_info=i.mp3.get_extra_info_json %}
+                  <span class="title">
+                    {{ i.mp3.part_name }}
+                  </span>
+                  <span class="attribution">
+                    {% trans "Artist:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
+                    {% trans "director:" %}&nbsp;<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 %}
+          </ul>
+        </div>
         <span>
           <span class="jp-seek-bar">
             <span class="jp-play-bar"></span>
           </span>
         </span>
+
         <time class="c-player__length">
           <span class="jp-current-time"></span>
           <span>
@@ -31,6 +81,16 @@
           </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 class="c-media__caption">
       <div class="license"></div>