From a58f3365edfcbbe7bfb96b3707130df3cc808429 Mon Sep 17 00:00:00 2001
From: Klafyvel <klafyvel@gmail.com>
Date: Sun, 25 Mar 2018 19:24:19 +0200
Subject: [PATCH] boutons next/prev

---
 player/templates/player/playlist.html | 32 ++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/player/templates/player/playlist.html b/player/templates/player/playlist.html
index d0b7957..cc6fafa 100644
--- a/player/templates/player/playlist.html
+++ b/player/templates/player/playlist.html
@@ -19,7 +19,21 @@
 	</div>
 	<div class="row" style="height:100%">
 		<div class="col-md-6">
-			<h2>Lecture</h2>
+			<div class="row">
+				<div class="col-md-10">
+					<h2>Lecture</h2>
+				</div>
+				<div class="col-md-2">
+					<div class="btn-group">
+						<a class="btn btn-outline-dark" role="button" onclick="prev();">
+							<i class="fas fa-step-backward"></i>
+						</a>
+						<a class="btn btn-outline-dark" role="button" onclick="next();">
+							<i class="fas fa-step-forward"></i>
+						</a>
+					</div>
+				</div>
+			</div>
 			<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
 			<div id="player" style="max-width:100%"></div>
 			<form onSubmit="return addLink();" class="form" id="add_link_form">
@@ -64,6 +78,22 @@ function onPlayerReady(event) {
   setInterval(loadLinks, 5000);
 }
 
+function next() {
+	if (current_link < (tracks.length -1)) {
+      current_link += 1
+      player.loadVideoById(tracks[current_link]);
+      event.target.playVideo();
+	}
+}
+
+function prev() {
+	if (current_link > 0) {
+      current_link -= 1
+      player.loadVideoById(tracks[current_link]);
+      event.target.playVideo();
+	}
+}
+
 function onPlayerStateChange(event) {
   if (event.data == YT.PlayerState.ENDED) {
 	onPlayerReady();