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

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