Improve loading resource for playlist player

Use resource element public_id instead of resource public_id
Add wait image when loading resource
Load file path with ajax

diff --git a/telemeta/static/telemeta/js/playlist.js b/telemeta/static/telemeta/js/playlist.js
index d64b70276b7d32ef193d2902f05cecb70c9206bc..f4220307f556d877119a7654519d405c0cee0c64 100644 (file)
--- a/telemeta/static/telemeta/js/playlist.js
+++ b/telemeta/static/telemeta/js/playlist.js
@@ -101,8 +101,23 @@ var playlistUtils = {
     },
 
     changeGlyph: function(resElem){
+        //wait image element
+        var waitImg = "<img id='wait' src='"+static_url+"telemeta/images/wait.gif' style='width: 15px;'/>";
+        //load filepath when the elment id is the public_id of resource element.
+       if(resElem.indexOf("/")==-1){
+           $('#'+resElem).removeClass().append(waitImg);
+           json_sync([resElem, "mp3"], "telemeta.get_item_export_url", function (data) {
+               $('#'+resElem).attr('id', data.result);
+               resElem = data.result;
+               console.log(data.result);
+           });
+       }
        if(this.playing === '' || this.playing === resElem){
            if(this.state === 'stop'){
+               //if wait image is not displayed
+               if($('#wait').length==0){
+                   $('[id="'+resElem+'"]').append(waitImg);
+               }
                this.state = 'play';
                document.getElementById(resElem).setAttribute("class", "glyphicon glyphicon-pause");
                playlistUtils.loadAudio(resElem);
@@ -229,6 +244,11 @@ var playlistUtils = {
         }
 
     }
-
-
 }
+
+$(function () {
+    //event in order to remove wait image when audio is playing
+    playlistUtils.audio.onplay = function () {
+        $('#wait').remove();
+    }
+})

diff --git a/telemeta/templates/telemeta/lists.html b/telemeta/templates/telemeta/lists.html
index 2d85087a62c005b01c62a142b54f3fe15481c310..a3596de6cb031161e31020a868554f7554e29044 100644 (file)
--- a/telemeta/templates/telemeta/lists.html
+++ b/telemeta/templates/telemeta/lists.html
@@ -9,6 +9,7 @@
 {% endblock %}
 
 {% block extra_javascript %}
+<script> var static_url = {{ STATIC_URL }}</script>
 <script src="{{ STATIC_URL }}telemeta/js/popupdiv.js" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}telemeta/js/playlist.js" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}tablesorter/jquery.tablesorter.min.js" type="text/javascript"></script>
@@ -175,7 +176,7 @@
             <tr {% if not forloop.counter0|divisibleby:"2" %}class="odd"{% endif %}>
                 <td align="center" style="vertical-align:middle;">
                     {% if resource.element.file %}
-                    <a href="#" id="{{ resource.public_id }}" onclick="playlistUtils.changeGlyph(this.id)" class="glyphicon glyphicon-play" style="font-size: 1.3em;text-decoration: none"><p style="opacity:0;font-size:0">d</p></a>
+                    <a href="#" id="{{ resource.element.public_id }}" onclick="playlistUtils.changeGlyph(this.id)" class="glyphicon glyphicon-play" style="font-size: 1.3em;text-decoration: none"><p style="opacity:0;font-size:0">d</p></a>
                     {% endif %}
                 </td>
                 <td style="max-width:200px">