src/catalogue/static/player/player.js

   1 (function($) {
   2     $(function() {
   3
   4       $(".jp-jplayer").each(function() {
   5         var $self = $(this);
   6         var $root = $self.parent();
   7         var $number = $('.number', $root);
   8         $self.jPlayer({
   9             swfPath: "/static/jplayer/",
  10             solution: "html,flash",
  11             supplied: $self.attr('data-supplied'),
  12             cssSelectorAncestor: "#" + $self.attr("data-player"),
  13
  14             ready: function() {
  15                 var player = $(this);
  16                 var setMedia = function(elem, time=0) {
  17                     var li = $(elem).parent();
  18                     var media = {}
  19
  20                     media['mp3'] = li.attr('data-mp3');
  21                     media['oga'] = li.attr('data-ogg');
  22                     media['id'] = li.attr('data-media-id');
  23
  24                     $(".title", $root).html(li.html());
  25                     player.jPlayer("setMedia", media);
  26                     player.jPlayer("pause", time);
  27                     return player;
  28                 };
  29
  30                 $('.play-next', $root).click(function() {
  31                     var next = parseInt($number.text()) + 1;
  32                     var p = $('.play:eq(' + next + ')', $root);
  33                     if (p.length) {
  34                         setMedia(p).jPlayer("play");
  35                         $number.text(next)
  36                     }
  37                 });
  38                 $('.play-prev', $root).click(function() {
  39                     var next = parseInt($number.text()) - 1;
  40                     if (next < 1)
  41                         return;
  42                     var p = $('.play:eq(' + next + ')', $root);
  43                     setMedia(p).jPlayer("play");
  44                     $number.text(next)
  45                 });
  46
  47                 var initialElem = $('.play', $root).first();
  48                 var initialTime = 0;
  49                 if (Modernizr.localstorage) {
  50                     try {
  51                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
  52                     } catch {
  53                         audiobooks = {};
  54                     }
  55                     last = audiobooks[$root.attr("data-book-slug")]
  56                     // Fallback for book id;
  57                     if (!last) {
  58                         last = audiobooks[$root.attr("data-book-id")]
  59                     }
  60
  61                     if (last) {
  62                         initialElem = $('[data-media-id="' + last[1] + '"] .play', $root).first();
  63                         initialTime = last[2];
  64                     }
  65                 }
  66                 setMedia(initialElem, initialTime);
  67             },
  68
  69             timeupdate: function(event) {
  70                 if (event.jPlayer.status.currentTime && Modernizr.localstorage) {
  71                     try {
  72                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
  73                     } catch {
  74                         audiobooks = {};
  75                     }
  76                     t = event.jPlayer.status.currentTime;
  77                     if (t && event.jPlayer.status.duration - t > 10) {
  78                         audiobooks[$root.attr("data-book-slug")] = [
  79                             Date.now(),
  80                             event.jPlayer.status.media.id,
  81                             event.jPlayer.status.currentTime
  82                         ];
  83                     } else {
  84                         delete audiobooks[$root.attr("data-book-slug")];
  85                     }
  86                     // Remove old book id, if present.
  87                     delete audiobooks[$root.attr("data-book-id")];
  88                     localStorage["audiobook-history"] = JSON.stringify(audiobooks);
  89                 }
  90             }
  91         });
  92       });
  93
  94
  95
  96     });
  97 })(jQuery)