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

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