update

diff --git a/telemeta/static/telemeta/js/playlist.js b/telemeta/static/telemeta/js/playlist.js
index 9cd2562d31397e4e3ecda8646115b1b438904940..df538e4e1c5d37372bf49651fcbbc61d8e47a60a 100644 (file)
--- a/telemeta/static/telemeta/js/playlist.js
+++ b/telemeta/static/telemeta/js/playlist.js
@@ -90,6 +90,26 @@ var playlistUtils = {
         this.id = ""; // init ID
     },
 
+    loadSong: function(id){
+        alert(id);
+        var player = $('#player').val();
+        var sourceOgg = $('#player').val();
+        var sourceMp3 = $('#player').val();
+        for (var i=0; i<this.playlists.length; i++){
+            if (this.playlists[i].id == id){
+                // for resource in playlist.resources
+                // if ID of the item then
+                /*
+                sourceOgg.src = this.playlists[i].sound;
+                sourceMp3.src = this.playlists[i].sound;
+                */
+            }
+        }
+        player.load(); //just start buffering (preload)
+        //player.play() doesn't work -> TODO: find another way
+        //player.play(); //start playing
+    },
+
     /**
      * Returns an uniqid by creating the current local time in millisecond + a random number. Used for markers and some json calls
      * Copied from Timeside.utils.uniqid (Timeside might NOT ALWAYS be loaded, see home.html when user is authenitcated)

diff --git a/telemeta/templates/telemeta/lists.html b/telemeta/templates/telemeta/lists.html
index 39167a09340d1310b5838eb69c906caf43a0b136..a8f7dcfb36e097810e31918e73c5b65181f6ac96 100644 (file)
--- a/telemeta/templates/telemeta/lists.html
+++ b/telemeta/templates/telemeta/lists.html
@@ -143,7 +143,10 @@
     <div>
         <table class="listing" style="width:100%;margin-top: 1em;">
             <tr>
-                <td style="border-bottom:1px solid #6A0307;color:#6A0307;font-size: 100%">{{ playlist.playlist.title }}</td>
+                <td style="border-bottom:1px solid #6A0307;color:#6A0307;font-size: 100%">
+                    {{ playlist.playlist.title }}
+                    <!-- Location for the button to listen the whole playlist -->
+                </td>
                 <td style="width:86ex; padding-right: 0; border-bottom:1px solid #6A0307; text-align:right">
                     <a href="#" id="{{playlist.playlist.public_id}}" onclick="playlistUtils.editVar(this.id)" class="component_icon button icon_edit" data-toggle="modal" data-target="#edit">{% trans "Edit" %}</a>
                     <a href="{% url "telemeta-playlist-csv-export" playlist.playlist.public_id 'collections' %}" class="component_icon button icon_csv">CSV Collections</a>
@@ -204,9 +207,17 @@
                 </td>
                 <td align="center" style="vertical-align:middle;">
                     {% if resource.element.file or resource.element.has_mediafile %}
-                        <!--<a class="playButton" href="javascript:">-->
+                        <!-- Coding: the simple player -->
+                        <!-- TODO: find the way to pass item's ID when clicked -->
+                        <!-- Problème with player, have to do it without but have to define "player"
+                        <audio id="player" controls="controls">
+                            <source id="sourceOgg" src="" type="audio/ogg" />
+                            <source id="sourceMp3" src="" type="audio/mp3" />
+                            Your browser does not support the audio element.
+                        </audio>-->
+                        <a id="{{playlist.playlist.public_id}}" onclick="playlistUtils.loadSong(this.id)">
                             <span class="glyphicon glyphicon-volume-up" style="font-size: 1.3em;"><p style="opacity:0;font-size:0">d</p></span>
-                        <!--</a>-->
+                        </a>
                     {% endif %}
                 </td>
                 <td style="vertical-align:middle">