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                     _paq.push(['trackEvent', 'audiobook', 'speed', speedStr]);
  68                 });
  69
  70                 $('.jp-play', $root).click(function() {
  71                     _paq.push(['trackEvent', 'audiobook', 'play']);
  72                 });
  73                 $('.jp-seek-bar', $root).click(function() {
  74                     _paq.push(['trackEvent', 'audiobook', 'seek']);
  75                 });
  76                 $('.jp-mute', $root).click(function() {
  77                     _paq.push(['trackEvent', 'audiobook', 'mute']);
  78                 });
  79                 $('.jp-volume-bar', $root).click(function() {
  80                     _paq.push(['trackEvent', 'audiobook', 'volume']);
  81                 });
  82
  83                 $('.play-next', $root).click(function() {
  84                     let p = $currentMedia.next();
  85                     if (p.length) {
  86                         setMedia(p).jPlayer("play");
  87                         _paq.push(['trackEvent', 'audiobook', 'next']);
  88                     }
  89                 });
  90                 $('.play-prev', $root).click(function() {
  91                     let p = $currentMedia.prev();
  92                     if (p.length) {
  93                         setMedia(p).jPlayer("play");
  94                         _paq.push(['trackEvent', 'audiobook', 'prev']);
  95                     } else {
  96                         // If in first part, restart it.
  97                         setMedia($currentMedia).jPlayer("play");
  98                         _paq.push(['trackEvent', 'audiobook', 'rewind']);
  99                     }
 100                 });
 101
 102                 $('.jp-playlist li', $root).click(function() {
 103                     setMedia($(this)).jPlayer("play");
 104                     $('.c-player__chapters').removeClass('is-active');
 105                     _paq.push(['trackEvent', 'audiobook', 'chapter']);
 106                 });
 107
 108                 var initialElem = $('.jp-playlist li', $root).first();
 109                 var initialTime = 0;
 110                 if (true || Modernizr.localstorage) {
 111                     try {
 112                         let speedStr = localStorage['audiobook-speed'];
 113                         if (speedStr) {
 114                             speed = parseFloat(speedStr);
 115                             $(".speed .is-active").removeClass("is-active");
 116                             $(".speed [data-speed='" + speedStr + "']").addClass("is-active");
 117                         }
 118                     } catch {}
 119
 120                     try {
 121                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
 122                     } catch {
 123                         audiobooks = {};
 124                     }
 125                     last = audiobooks[$root.attr("data-book-slug")]
 126                     // Fallback for book id;
 127                     if (!last) {
 128                         last = audiobooks[$root.attr("data-book-id")]
 129                     }
 130
 131                     if (last) {
 132                         initialElem = $('[data-media-id="' + last[1] + '"]', $root).first();
 133                         initialTime = last[2];
 134                     }
 135                 }
 136                 setMedia(initialElem, initialTime);
 137             },
 138
 139             timeupdate: function(event) {
 140                 t = event.jPlayer.status.currentTime;
 141                 ttl = (totalDurationLeft - t) / speed;
 142                 ttl = $.jPlayer.convertTime(ttl);
 143                 $(".total-time-left").text('Czas do końca: ' + ttl);
 144
 145                 $(".time-left").text('– ' + $.jPlayer.convertTime(
 146                     currentDuration - t,
 147                 ));
 148
 149
 150                 if (Math.abs(t - lastUpdate) > 3) {
 151                     try {
 152                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
 153                     } catch {
 154                         audiobooks = {};
 155                     }
 156                     if (t && event.jPlayer.status.duration - t > 10) {
 157                         audiobooks[$root.attr("data-book-slug")] = [
 158                             Date.now(),
 159                             event.jPlayer.status.media.id,
 160                             event.jPlayer.status.currentTime
 161                         ];
 162                     } else {
 163                         delete audiobooks[$root.attr("data-book-slug")];
 164                     }
 165                     // Remove old book id, if present.
 166                     delete audiobooks[$root.attr("data-book-id")];
 167                     localStorage["audiobook-history"] = JSON.stringify(audiobooks);
 168                     lastUpdate = t;
 169                 }
 170             },
 171
 172
 173             ended: function(event) {
 174                 let p = $currentMedia.next();
 175                 if (p.length) {
 176                     setMedia(p).jPlayer("play");
 177                 }
 178             }
 179         });
 180       });
 181
 182
 183
 184     });
 185 })(jQuery)