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                 };
  28
  29                 $('.play-next', $root).click(function() {
  30                     var next = parseInt($number.text()) + 1;
  31                     var p = $('.play:eq(' + next + ')', $root);
  32                     if (p.length) {
  33                         setMedia(p).jPlayer("play");
  34                         $number.text(next)
  35                     }
  36                 });
  37                 $('.play-prev', $root).click(function() {
  38                     var next = parseInt($number.text()) - 1;
  39                     if (next < 1)
  40                         return;
  41                     var p = $('.play:eq(' + next + ')', $root);
  42                     setMedia(p).jPlayer("play");
  43                     $number.text(next)
  44                 });
  45
  46                 var initialElem = $('.play', $root).first();
  47                 var initialTime = 0;
  48                 if (Modernizr.localstorage) {
  49                     try {
  50                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
  51                     } catch {
  52                         audiobooks = {};
  53                     }
  54                     last = audiobooks[$root.attr("data-book-slug")]
  55                     // Fallback for book id;
  56                     if (!last) {
  57                         last = audiobooks[$root.attr("data-book-id")]
  58                     }
  59
  60                     if (last) {
  61                         initialElem = $('[data-media-id="' + last[1] + '"] .play', $root).first();
  62                         initialTime = last[2];
  63                     }
  64                 }
  65                 setMedia(initialElem, initialTime);
  66             },
  67
  68             timeupdate: function(event) {
  69                 if (event.jPlayer.status.currentTime && Modernizr.localstorage) {
  70                     try {
  71                         audiobooks = JSON.parse(localStorage["audiobook-history"]);
  72                     } catch {
  73                         audiobooks = {};
  74                     }
  75                     t = event.jPlayer.status.currentTime;
  76                     if (t && event.jPlayer.status.duration - t > 10) {
  77                         audiobooks[$root.attr("data-book-slug")] = [
  78                             Date.now(),
  79                             event.jPlayer.status.media.id,
  80                             event.jPlayer.status.currentTime
  81                         ];
  82                     } else {
  83                         delete audiobooks[$root.attr("data-book-slug")];
  84                     }
  85                     // Remove old book id, if present.
  86                     delete audiobooks[$root.attr("data-book-id")];
  87                     localStorage["audiobook-history"] = JSON.stringify(audiobooks);
  88                 }
  89             }
  90         });
  91       });
  92
  93
  94
  95     });
  96 })(jQuery)