function to play/stop audio and to change GlyphIcons

diff --git a/telemeta/locale b/telemeta/locale
index ea6605ad78243d798d88f1ffc46c8f6bc507ce11..c043261bbe26298e2bea3ddb028332c78c9a6107 160000 (submodule)
--- a/telemeta/locale
+++ b/telemeta/locale
@@ -1 +1 @@
-Subproject commit ea6605ad78243d798d88f1ffc46c8f6bc507ce11
+Subproject commit c043261bbe26298e2bea3ddb028332c78c9a6107

diff --git a/telemeta/pages b/telemeta/pages
index 939124a09a6f231540105d2010b57a2cbd184670..c2a0f19625f44ab2c3050b7784382ac7eb6939b0 160000 (submodule)
--- a/telemeta/pages
+++ b/telemeta/pages
@@ -1 +1 @@
-Subproject commit 939124a09a6f231540105d2010b57a2cbd184670
+Subproject commit c2a0f19625f44ab2c3050b7784382ac7eb6939b0

diff --git a/telemeta/static/telemeta/js/playlist.js b/telemeta/static/telemeta/js/playlist.js
index f7e2da0924b75a9027083846c801c4300c3a0eba..3e4a0810b31dc625120b0304fd621a903514de6b 100644 (file)
--- a/telemeta/static/telemeta/js/playlist.js
+++ b/telemeta/static/telemeta/js/playlist.js
@@ -45,6 +45,8 @@ var playlistUtils = {
     id: '', // ID var: used to edit playlist
     title: '',
     description: '',
+    state: 'stop', // state var: to state play or pause glyphicon
+    playing: '', // playing var: used to know if an audio is already playing or not
 
     addPlaylist: function(name, id){
         this.playlists.push({
@@ -88,17 +90,46 @@ var playlistUtils = {
         this.id = ""; // init ID
     },
 
-    loadSong: function(resElem){
+    loadAudio: function(resElem){
         var audio = new Audio();
-       //For old browsers that do not support mp3 files 
-        audio.onerror = function(){
-             this.src = this.src.replace("mp3", "ogg");
-             this.play();
-       };
-       audio.src = resElem;
+        //For old browsers that do not support mp3 files
+        /*audio.onerror = function(){
+            this.src = this.src.replace("mp3", "ogg");
+            this.play();
+        };*/
+        audio.src = resElem;
         audio.play();
     },
 
+    stopAudio: function(resElem){
+        var audio = new Audio();
+        audio.src = resElem;
+        audio.pause();
+    },
+
+    changeGlyph: function(resElem){
+       if(this.playing === '' || this.playing === resElem){
+           if(this.state === 'stop'){
+               this.state = 'play';
+               document.getElementById(resElem).setAttribute("class", "glyphicon glyphicon-pause");
+               playlistUtils.loadAudio(resElem);
+           }
+           else if(this.state === 'play'){
+               this.state = 'stop';
+               document.getElementById(resElem).setAttribute("class", "glyphicon glyphicon-play");
+               playlistUtils.stopAudio(resElem);
+           }
+           this.playing = resElem;
+       }
+       else{
+           playlistUtils.stopAudio(this.playing);
+           this.state = 'stop';
+           document.getElementById(this.playing).setAttribute("class", "glyphicon glyphicon-play");
+           this.playing = '';
+           playlistUtils.changeGlyph(resElem);
+       }
+    },
+
     /**
      * 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 4cd58b06906726509e188148e9c055ddbc756676..7207d765356f9376c2d152666dc3f006dbdb5824 100644 (file)
--- a/telemeta/templates/telemeta/lists.html
+++ b/telemeta/templates/telemeta/lists.html
@@ -205,15 +205,18 @@
                     {% endif %}
                     {% endif %}
                 </td>
-                <td align="center" style="vertical-align:middle;">
+                <td style="vertical-align:middle">
                     {% if resource.element.file or resource.element.has_mediafile %}
-                        <a href="#" id="{% url 'telemeta-item-export' resource.element.public_id 'mp3' %}" 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>
+                        <span class="glyphicon glyphicon-ok" style="font-size: 1.3em;color: green;"><p style="opacity:0;font-size:0">d</p></span>
                     {% endif %}
                 </td>
-                <td style="vertical-align:middle">
-                <a href="#" onclick="if(confirm(gettrans('delete the resource from the playlist permanently?'))){playlistUtils.removeResource('{{resource.public_id}}');};return false;" class="component_icon button icon_cancel" style="padding: 4px 12px;"></a>
+                <td align="center" style="vertical-align:middle;">
+                    {% if resource.element.file or resource.element.has_mediafile %}
+                        <a href="#" id="{% url 'telemeta-item-export' resource.element.public_id 'mp3' %}" 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 %}
+                    <a href="#" onclick="if(confirm(gettrans('delete the resource from the playlist permanently?'))){playlistUtils.removeResource('{{resource.public_id}}');};return false;">
+                        <span class="glyphicon glyphicon-trash" style="font-size: 1.3em;color: black;"><p style="opacity:0;font-size:0">d</p></span>
+                    </a>
                 </td>
             </tr>
             {% endfor %}