From 8ce01151b83453d8ccaa142178745e847b44cdb5 Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Fri, 22 Apr 2022 15:00:27 +0200 Subject: [PATCH 1/1] audio player fixes --- src/catalogue/static/player/2022_player.js | 59 +++++++++++++----- .../catalogue/snippets/2022_jplayer.html | 61 ++++--------------- .../catalogue/snippets/2022_jplayer_link.html | 31 +++++----- .../2022/styles/components/_player.scss | 6 ++ 4 files changed, 78 insertions(+), 79 deletions(-) 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 %} -
+
- +  
@@ -16,14 +16,13 @@
    -
  • 2×
    • -
  • 1.75×
    • -
  • 1.5×
    • -
  • 1.25×
    • -
  • 1×
    • -
  • 0.75×
    • -
  • 0.5×
    • -
  • 0.25×
    • +
  • 2×
    • +
  • 1.75×
    • +
  • 1.5×
    • +
  • 1.25×
    • +
  • 1×
    • +
  • 0.75×
    • +
  • 0.5×
@@ -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 %} @@ -73,12 +73,9 @@
@@ -97,39 +94,5 @@
- - - {% 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 %}
- +
+   +
- - ⏭ - -
-
- {{ book.title }} -
- - - -
+
+ + +
+ +
+
+ +
+
{{ book.pretty_title }}
+ +
+
+
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; + } } } -- 2.20.1