Remember audiobook position in localStorage.

diff --git a/src/catalogue/static/player/player.js b/src/catalogue/static/player/player.js
index a41d2c0..d804463 100644 (file)
--- a/src/catalogue/static/player/player.js
+++ b/src/catalogue/static/player/player.js
@@ -13,7 +13,7 @@
 
             ready: function() {
                 var player = $(this);
 
             ready: function() {
                 var player = $(this);

-                var setMedia = function(elem) {
+                var setMedia = function(elem, time=0) {

                     var li = $(elem).parent();
                     var media = {}
 
                     var li = $(elem).parent();
                     var media = {}
 


@@ -21,7 +21,9 @@
                     media['oga'] = li.attr('data-ogg');
 
                     $(".title", $root).html(li.html());
                     media['oga'] = li.attr('data-ogg');
 
                     $(".title", $root).html(li.html());

-                    return player.jPlayer("setMedia", media);
+                    $root.attr('data-media-id', li.attr('data-media-id'));
+                    player.jPlayer("setMedia", media);
+                    player.jPlayer("pause", time);

                 };
 
                 $('.play-next', $root).click(function() {
                 };
 
                 $('.play-next', $root).click(function() {


@@ -41,8 +43,29 @@
                     $number.text(next)
                 });
 
                     $number.text(next)
                 });
 

-                setMedia($('.play', $root).first());
+                var initialElem = $('.play', $root).first();
+                var initialTime = 0;
+                if (Modernizr.localstorage) {
+                    audiobooks = JSON.parse(localStorage["audiobook-history"]);
+                    last = audiobooks[$root.attr("data-book-id")]
+                    if (last) {
+                        initialElem = $('[data-media-id="' + last[1] + '"] .play', $root).first();
+                        initialTime = last[2];
+                    }
+                }
+                setMedia(initialElem, initialTime);
+            },

 
 

+            timeupdate: function(event) {
+                if (Modernizr.localstorage) {
+                    try {
+                        audiobooks = JSON.parse(localStorage["audiobook-history"]);
+                    } catch {
+                        audiobooks = {};
+                    }
+                    audiobooks[$root.attr("data-book-id")] = [Date.now(), $root.attr("data-media-id"), event.jPlayer.status.currentTime];
+                    localStorage["audiobook-history"] = JSON.stringify(audiobooks);
+                }

             }
         });
       });
             }
         });
       });

diff --git a/src/catalogue/templates/catalogue/snippets/jplayer.html b/src/catalogue/templates/catalogue/snippets/jplayer.html
index 50e0242..96d3591 100644 (file)
--- a/src/catalogue/templates/catalogue/snippets/jplayer.html
+++ b/src/catalogue/templates/catalogue/snippets/jplayer.html
@@ -1,6 +1,6 @@
 {% load i18n catalogue_tags %}
 {% if audiobooks %}{% if book|status:request.user != 'closed' %}
 {% load i18n catalogue_tags %}
 {% if audiobooks %}{% if book|status:request.user != 'closed' %}

-  <div class="jp-type-playlist">
+  <div class="jp-type-playlist" data-book-id="{{ book.pk }}">

     <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
          data-supplied="oga,mp3"></div>
     <div id="jp_container_{{ book.pk }}" class="jp-audio">
     <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
          data-supplied="oga,mp3"></div>
     <div id="jp_container_{{ book.pk }}" class="jp-audio">


@@ -29,7 +29,7 @@
         <div class="jp-playlist">
           <ul>
             {% for i in audiobooks %}
         <div class="jp-playlist">
           <ul>
             {% for i in audiobooks %}

-              <li data-mp3='{{ i.mp3.file.url }}' data-ogg='{{ i.ogg.file.url }}'>
+              <li data-mp3='{{ i.mp3.file.url }}' data-ogg='{{ i.ogg.file.url }}' data-media-id="{{ i.mp3.id }}">

                 <div class='play'>{{ i.mp3.name }}
                   <div class='extra-info'>
                   {% with extra_info=i.mp3.get_extra_info_json %}
                 <div class='play'>{{ i.mp3.name }}
                   <div class='extra-info'>
                   {% with extra_info=i.mp3.get_extra_info_json %}