affiche la lecture actuelle

player/templates/player/playlist.html

@@ -71,32 +71,45 @@ function onYouTubeIframeAPIReady() {
 // 4. The API will call this function when the video player is ready.
 function onPlayerReady(event) {
   if(tracks.length > 0 && current_link < (tracks.length - 1)) {
-      current_link += 1
-      player.loadVideoById(tracks[current_link]);
-      event.target.playVideo();
+      next();
   }
   setInterval(loadLinks, 5000);
 }
 
+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');
+}
 function next() {
 	if (current_link < (tracks.length -1)) {
-      current_link += 1
-      player.loadVideoById(tracks[current_link]);
-      event.target.playVideo();
+      current_link += 1;
+      play();
 	}
 }
 
 function prev() {
 	if (current_link > 0) {
-      current_link -= 1
-      player.loadVideoById(tracks[current_link]);
-      event.target.playVideo();
+      current_link -= 1;
+      play();
 	}
 }
 
+function setCurrent(c) {
+    if(c > 0 && c < tracks.length) {
+        current_link = c;
+        play();
+    }
+}
+
+function setCurrentFromToken(token) {
+    setCurrent(tracks.indexOf(token));
+}
+
 function onPlayerStateChange(event) {
   if (event.data == YT.PlayerState.ENDED) {
-	onPlayerReady();
+	next();
   }
 }
 function stopVideo() {
@@ -124,16 +137,23 @@ function updateLinks(data) {
 	tracks = [];
 	for (var i=0; i<data.length; i++)
 	{
-		tracks.push(data[i].fields.token);
+        var token = data[i].fields.token;
+		tracks.push(token);
 		var card = model.cloneNode(true);
 		card.style.display = 'block';
-		card.id = 'link_' + data[i].fields.token;
-		card.getElementsByClassName('link_name')[0].innerHTML = data[i].fields.token;
+		card.id = token;
+        card.onclick = function(){setCurrent(this.id);};
+		card.getElementsByClassName('link_name')[0].innerHTML = token;
+        if (i==current_link) {
+            card.classList.add('bg-success');
+            card.classList.remove('bg-secondary');
+        }
 		links.appendChild(card);
+
 		links.append(document.createElement('br'));
 	}
     if (rerun) {
-        onPlayerReady();
+        next();
     }
 }
 function loadLinks() {
@@ -150,10 +170,10 @@ function loadLinks() {
 			<h2>Pistes à venir</h2>
 			<div id="links">
 			{% for link in playlist.link_set.all %}
-			<div class="card bg-secondary text-white" href="{{l.get_absolute_url}}" id="link_{{link.token}}">
+			<div class="card bg-secondary text-white" onclick="setCurrentFromToken('{{link.token}}');" id="{{link.token}}">
 				<div class="card-body">
 					<div class="row container">
-					<div class="col-md-6">
+                        <div class="col-md-6" >
 						<i class="far fa-play-circle"></i>
 						{{link.token}}
 					</div>
@@ -172,7 +192,7 @@ function loadLinks() {
 			</div>
 		</div>
 	</div>
-	<div style="display:none;" class="card bg-secondary text-white" href="{{l.get_absolute_url}}" id="link_template">
+	<div style="display:none;" class="card bg-secondary text-white" id="link_template">
 				<div class="card-body">
 					<div class="row container">
 					<div class="col-md-6">