src/catalogue/static/player/2022_player.js

   1 (function($) {
   2     $(function() {
   3
   4         $.jPlayer.timeFormat.showHour = true;
   5
   6         $(".jp-jplayer").each(function() {
   7             console.log('starting player')
   8             var $self = $(this);
   9             var $root = $self.parent();
  10             var $currentMedia = null
  11             var currentDuration = 0;
  12             var speed = 1;
  13             var totalDurationLeft = 0;
  14             var lastUpdate = 0;
  15
  16         $self.jPlayer({
  17             swfPath: "/static/js/contrib/jplayer/",
  18             solution: "html,flash",
  19             supplied: 'oga,mp3',
  20             cssSelectorAncestor: "#" + $self.attr("data-player"),
  21             useStateClassSkin: true,
  22
  23             ready: function() {
  24                 var player = $(this);
  25                 console.log(1);
  26
  27                 var setMedia = function(elem, time=0) {
  28                     console.log('setMedia', elem, time);
  29                     var media = {}
  30
  31                     media['mp3'] = elem.attr('data-mp3');
  32                     media['oga'] = elem.attr('data-ogg');
  33                     media['id'] = elem.attr('data-media-id');
  34
  35                     $(".c-player__head", $root).html(
  36                         $(".attribution", elem).html())
  37                     ;
  38                     $(".c-player__info", $root).html(
  39                         $(".title", elem).html()
  40                     );
  41                     $(".c-media__caption .content", $root).html($(".project-description", elem).html());
  42                     $(".c-media__caption .license", $root).html($(".license", elem).html());
  43                     $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html());
  44
  45                     player.jPlayer("setMedia", media);
  46                     $("audio")[0].playbackRate = speed;
  47                     player.jPlayer("pause", time);
  48
  49                     $currentMedia = elem;
  50                     $(".play-prev", $root).prop("disabled", !elem.prev().length);
  51                     $(".play-next", $root).prop("disabled", !elem.next().length);
  52
  53                     let du = elem.data('duration');
  54                     currentDuration = du;
  55                     elem.nextAll().each(function() {
  56                         du += $(this).data('duration');
  57                     });
  58                     totalDurationLeft = du;
  59
  60                     return player;
  61                 };
  62
  63                 let selectItem = $('.c-select li');
  64                 selectItem.on('click', function() {
  65                     let speedStr = $(this).data('speed');
  66                     speed = parseFloat(speedStr);
  67                     $("audio")[0].playbackRate = speed;
  68                     localStorage['audiobook-speed'] = speedStr;
  69                 });
  70
  71                 $('.play-next', $root).click(function() {
  72                     let p = $currentMedia.next();
  73                     if (p.length) {
  74                         setMedia(p).jPlayer("play");
  75                     }
  76                 });
  77                 $('.play-prev', $root).click(function() {
  78                     let p = $currentMedia.prev();
  79                     if (p.length) {
  80                         setMedia(p).jPlayer("play");
  81                     }
  82                 });
  83
  84                 $('.jp-playlist li', $root).click(function() {
  85                     setMedia($(this)).jPlayer("play");
  86                     $('.c-player__chapters').removeClass('is-active');
  87                 });
  88
  89                 var initialElem = $('.jp-playlist li', $root).first();
  90                 var initialTime = 0;
  91                 if (true || Modernizr.localstorage) {
  92                     try {
  93                         let speedStr = localStorage['audiobook-speed'];
  94                         if (speedStr) {
  95                             speed = parseFloat(speedStr);
  96                             $(".speed .is-active").removeClass("is-active");
  97                             $(".speed [data-speed='" + speedStr + "']").addClass("is-active");
  98                         }
  99                     } catch {}
 100
 101                     try {
 102                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
 103                     } catch {
 104                         audiobooks = {};
 105                     }
 106                     last = audiobooks[$root.attr("data-book-slug")]
 107                     // Fallback for book id;
 108                     if (!last) {
 109                         last = audiobooks[$root.attr("data-book-id")]
 110                     }
 111
 112                     if (last) {
 113                         initialElem = $('[data-media-id="' + last[1] + '"]', $root).first();
 114                         initialTime = last[2];
 115                     }
 116                 }
 117                 setMedia(initialElem, initialTime);
 118             },
 119
 120             timeupdate: function(event) {
 121                 t = event.jPlayer.status.currentTime;
 122                 ttl = (totalDurationLeft - t) / speed;
 123                 ttl = $.jPlayer.convertTime(ttl);
 124                 $(".total-time-left").text('Czas do końca: ' + ttl);
 125
 126                 $(".time-left").text('– ' + $.jPlayer.convertTime(
 127                     currentDuration - t,
 128                 ));
 129
 130
 131                 if (Math.abs(t - lastUpdate) > 3) {
 132                     try {
 133                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
 134                     } catch {
 135                         audiobooks = {};
 136                     }
 137                     if (t && event.jPlayer.status.duration - t > 10) {
 138                         console.log('writer');
 139                         audiobooks[$root.attr("data-book-slug")] = [
 140                             Date.now(),
 141                             event.jPlayer.status.media.id,
 142                             event.jPlayer.status.currentTime
 143                         ];
 144                     } else {
 145                         delete audiobooks[$root.attr("data-book-slug")];
 146                     }
 147                     // Remove old book id, if present.
 148                     delete audiobooks[$root.attr("data-book-id")];
 149                     localStorage["audiobook-history"] = JSON.stringify(audiobooks);
 150                     lastUpdate = t;
 151                 }
 152             }
 153         });
 154       });
 155
 156
 157
 158     });
 159 })(jQuery)