From 382761e3279a03b1de2d9b0422ba6a37bb20d078 Mon Sep 17 00:00:00 2001
From: balastegui <thomas.balastegui@gmail.com>
Date: Fri, 27 May 2016 15:25:50 +0200
Subject: [PATCH] function to play/stop audio and to change GlyphIcons

---
 telemeta/locale                         |  2 +-
 telemeta/pages                          |  2 +-
 telemeta/static/telemeta/js/playlist.js | 45 +++++++++++++++++++++----
 telemeta/templates/telemeta/lists.html  | 15 +++++----
 4 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/telemeta/locale b/telemeta/locale
index ea6605ad..c043261b 160000
--- a/telemeta/locale
+++ b/telemeta/locale
@@ -1 +1 @@
-Subproject commit ea6605ad78243d798d88f1ffc46c8f6bc507ce11
+Subproject commit c043261bbe26298e2bea3ddb028332c78c9a6107
diff --git a/telemeta/pages b/telemeta/pages
index 939124a0..c2a0f196 160000
--- 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 f7e2da09..3e4a0810 100644
--- 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 4cd58b06..7207d765 100644
--- 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 %}
-- 
2.39.5