From: Radek Czajka <rczajka@rczajka.pl>
Date: Fri, 22 Apr 2022 13:00:27 +0000 (+0200)
Subject: audio player fixes
X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/8ce01151b83453d8ccaa142178745e847b44cdb5?ds=inline

audio player fixes
---

diff --git a/src/catalogue/static/player/2022_player.js b/src/catalogue/static/player/2022_player.js
index 180e2ab29..f6dc06965 100644
--- a/src/catalogue/static/player/2022_player.js
+++ b/src/catalogue/static/player/2022_player.js
@@ -1,11 +1,17 @@
 (function($) {
     $(function() {
 
+        $.jPlayer.timeFormat.showHour = true;
+
         $(".jp-jplayer").each(function() {
             console.log('starting player')
-      	var $self = $(this);
-        var $root = $self.parent();
-        var $currentMedia = null
+            var $self = $(this);
+            var $root = $self.parent();
+            var $currentMedia = null
+            var currentDuration = 0;
+            var speed = 1;
+            var totalDurationLeft = 0;
+            var lastUpdate = 0;
 
         $self.jPlayer({
             swfPath: "/static/js/contrib/jplayer/",
@@ -37,24 +43,31 @@
                     $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html());
                     
                     player.jPlayer("setMedia", media);
+                    $("audio")[0].playbackRate = speed;
                     player.jPlayer("pause", time);
 
                     $currentMedia = elem;
                     $(".play-prev", $root).prop("disabled", !elem.prev().length);
                     $(".play-next", $root).prop("disabled", !elem.next().length);
 
+                    let du = elem.data('duration');
+                    currentDuration = du;
+                    elem.nextAll().each(function() {
+                        du += $(this).data('duration');
+                    });
+                    totalDurationLeft = du;
+
                     return player;
                 };
 
                 let selectItem = $('.c-select li');
                 selectItem.on('click', function() {
-                    let speed = parseFloat(this.innerHTML);
-                    console.log(speed);
-                    console.log($('audio'));
+                    let speedStr = $(this).data('speed');
+                    speed = parseFloat(speedStr);
                     $("audio")[0].playbackRate = speed;
+                    localStorage['audiobook-speed'] = speedStr;
                 });
                 
-                
                 $('.play-next', $root).click(function() {
                     let p = $currentMedia.next();
                     if (p.length) {
@@ -69,15 +82,22 @@
                 });
 
                 $('.jp-playlist li', $root).click(function() {
-                    console.log(this);
-                    setMedia($(this));
+                    setMedia($(this)).jPlayer("play");
+                    $('.c-player__chapters').removeClass('is-active');
                 });
 
-                console.log(1);
-
                 var initialElem = $('.jp-playlist li', $root).first();
                 var initialTime = 0;
                 if (true || Modernizr.localstorage) {
+                    try {
+                        let speedStr = localStorage['audiobook-speed'];
+                        if (speedStr) {
+                            speed = parseFloat(speedStr);
+                            $(".speed .is-active").removeClass("is-active");
+                            $(".speed [data-speed='" + speedStr + "']").addClass("is-active");
+                        }
+                    } catch {}
+
                     try {
                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
                     } catch {
@@ -90,26 +110,32 @@
                     }
 
                     if (last) {
-                        initialElem = $('[data-media-id="' + last[1] + '"] .play', $root).first();
+                        initialElem = $('[data-media-id="' + last[1] + '"]', $root).first();
                         initialTime = last[2];
-                        $number.text($(".jp-playlist .play", $root).index(initialElem) + 1);
                     }
                 }
                 setMedia(initialElem, initialTime);
             },
 
             timeupdate: function(event) {
-                //event.jPlayer.status.currentTime
+                t = event.jPlayer.status.currentTime;
+                ttl = (totalDurationLeft - t) / speed;
+                ttl = $.jPlayer.convertTime(ttl);
+                $(".total-time-left").text('Czas do końca: ' + ttl);
+
+                $(".time-left").text('– ' + $.jPlayer.convertTime(
+                    currentDuration - t,
+                ));
                 
                 
-                if (true || (event.jPlayer.status.currentTime && Modernizr.localstorage)) {
+                if (Math.abs(t - lastUpdate) > 3) {
                     try {
                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
                     } catch {
                         audiobooks = {};
                     }
-                    t = event.jPlayer.status.currentTime;
                     if (t && event.jPlayer.status.duration - t > 10) {
+                        console.log('writer');
                         audiobooks[$root.attr("data-book-slug")] = [
                             Date.now(),
                             event.jPlayer.status.media.id,
@@ -121,6 +147,7 @@
                     // Remove old book id, if present.
                     delete audiobooks[$root.attr("data-book-id")];
                     localStorage["audiobook-history"] = JSON.stringify(audiobooks);
+                    lastUpdate = t;
                 }
             }
         });
diff --git a/src/catalogue/templates/catalogue/snippets/2022_jplayer.html b/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
index d7c19a85c..d710a01b1 100644
--- a/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
+++ b/src/catalogue/templates/catalogue/snippets/2022_jplayer.html
@@ -1,12 +1,12 @@
 {% load i18n catalogue_tags %}
 
 {% with audiobooks=book.get_audiobooks %}
-  <div class="c-media__player" id="jp_container_{{ book.pk }}">
+  <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>
+      <span>&nbsp;</span>
     </div>
 
     <div class="c-player">
@@ -16,14 +16,13 @@
         <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>
+            <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>
       </div>
@@ -38,6 +37,7 @@
                   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">
@@ -73,12 +73,9 @@
 
         <time class="c-player__length">
           <span class="jp-current-time"></span>
-          <span>
-            <span class="jp-duration"></span>
-            {% if audiobooks.0|length > 1 %}
-              / {{ audiobooks.2 }}
-            {% endif %}
+          <span class="time-left">
           </span>
+          <span class="total-time-left">?</span>
         </time>
       </div>
 
@@ -97,39 +94,5 @@
       <div class="project-logo"></div>
       <div class="content"></div>
     </div>
-
-    <ul class="jp-playlist" style="display: none;">
-      {% 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>
 {% endwith %}
diff --git a/src/catalogue/templates/catalogue/snippets/2022_jplayer_link.html b/src/catalogue/templates/catalogue/snippets/2022_jplayer_link.html
index b49175a30..7bbddcdda 100644
--- a/src/catalogue/templates/catalogue/snippets/2022_jplayer_link.html
+++ b/src/catalogue/templates/catalogue/snippets/2022_jplayer_link.html
@@ -1,21 +1,24 @@
 {% load i18n catalogue_tags %}
 
 <div class="c-media__player" id="jp_container_{{ book.pk }}">
-  <div class="jp-jplayer"></div>
+  <div class="c-player__head">
+    <span>&nbsp;</span>
+  </div>
 
   <div class="c-player">
-    <a class="c-player__btn" href="{{ book.get_absolute_url }}">
-      <i class="icon icon-next">⏭</i>
-    </a>
-      <div class="c-player__timeline">
-        <div class="c-player__title">
-          {{ book.title }}
-        </div>
-        <span>
-          <span class="jp-seek-bar">
-            <span class="jp-play-bar"></span>
-          </span>
-        </span>
-      </div>
+    <div class="c-player__btns">
+      <button disabled class="play-prev"><i class="icon icon-prev"></i></button>
+      <button disabled class="c-player__btn--md"><i class="icon icon-play"></i></button>
+      <form action='{{ book.get_absolute_url }}'>
+        <button class="play-next"><i class="icon icon-next"></i></button>
+      </form>
+    </div>
+
+    <div class="c-player__timeline">
+      <div class="c-player__info">{{ book.pretty_title }}</div>
     </div>
+
+  </div>
+  <div class="c-media__caption">
   </div>
+</div>
diff --git a/src/wolnelektury/static/2022/styles/components/_player.scss b/src/wolnelektury/static/2022/styles/components/_player.scss
index 8fda601ba..6adafd73c 100644
--- a/src/wolnelektury/static/2022/styles/components/_player.scss
+++ b/src/wolnelektury/static/2022/styles/components/_player.scss
@@ -242,6 +242,7 @@
       list-style-type: decimal;
       margin: 5px 0;
       color: white;
+      cursor: pointer;
 
       span {
           display: none;
@@ -299,5 +300,10 @@
 
     &:nth-child(1) { left: 0; }
     &:nth-child(2) { right: 0; }
+    &:nth-child(3) {
+        left: 0;
+        right: 0;
+        text-align: center;
+    }
   }
 }