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