Fix de la sélection au click

player/templates/player/playlist.html

@@ -57,7 +57,7 @@
 			<h2>Pistes à venir</h2>
 			<div id="links">
 			{% for link in playlist.link_set.all %}
-			<div class="card bg-secondary text-white" onclick="setCurrentFromToken('{{link.token}}');" id="{{link.token}}">
+			<div class="card bg-secondary text-white" onclick="setCurrent(parseInt(this.id));" id="{{ forloop.counter0 }}">
 				<div class="card-body">
 					<div class="row container">
                         <div class="col-md-6" >
@@ -79,7 +79,7 @@
 			</div>
 		</div>
 	</div>
-	<div style="display:none;" class="card bg-secondary text-white" id="link_template">
+	<div style="display:none;" onclick="setCurrent(parseInt(this.id));" class="card bg-secondary text-white" id="link_template">
 				<div class="card-body">
 					<div class="row container">
 					<div class="col-md-6">

static_files/js/playlist.js

@@ -30,8 +30,8 @@ function onPlayerReady(event) {
 function play() {
       player.loadVideoById(tracks[current_link]);
       player.playVideo();
-      document.getElementById(tracks[current_link]).classList.add('bg-success');
-      document.getElementById(tracks[current_link]).classList.remove('bg-secondary');
+      document.getElementById(current_link).classList.add('bg-success');
+      document.getElementById(current_link).classList.remove('bg-secondary');
 }
 function next() {
 	if (current_link < (tracks.length -1)) {
@@ -49,13 +49,15 @@ function prev() {
 
 function setCurrent(c) {
     if(c > 0 && c < tracks.length) {
+		document.getElementById(current_link).classList.remove('bg-success');
+		document.getElementById(current_link).classList.add('bg-secondary');
         current_link = c;
         play();
     }
 }
 
 function setCurrentFromToken(token) {
-    setCurrent(tracks.indexOf(token));
+    setCurrent(tracks.lastIndexOf(token));
 }
 
 function onPlayerStateChange(event) {
@@ -96,8 +98,7 @@ function updateLinks(data) {
 		tracks.push(token);
 		var card = model.cloneNode(true);
 		card.style.display = 'block';
-		card.id = token;
-        card.onclick = function(){setCurrent(this.id);};
+		card.id = i.toString();
 		card.getElementsByClassName('link_name')[0].innerHTML = token;
         if (i==current_link) {
             card.classList.add('bg-success');