Js dans un fichier séparé

.gitignore

@@ -13,6 +13,7 @@ media
 # If your build process includes running collectstatic, then you probably don't need or want to include staticfiles/
 # in your Git repository. Update and uncomment the following line accordingly.
 # <django-project-name>/staticfiles/
+static/
 
 ### Python ###
 # Byte-compiled / optimized / DLL files

live_share_youtube/settings.py

@@ -108,7 +108,10 @@ USE_TZ = True
 STATIC_URL = '/static/'
 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 MEDIA_URL = '/media/'
-MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media')
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'static_files'),
+]
 
 LOGIN_REDIRECT_URL = "/"
 LOGOUT_REDIRECT_URL = "/"

live_share_youtube/urls.py

@@ -15,8 +15,16 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path, include
+from django.conf import settings
+from django.contrib.staticfiles import views
+from django.urls import re_path
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('', include('player.urls')),
 ]
+
+if settings.DEBUG:
+    urlpatterns += [
+        re_path(r'^static/(?P<path>.*)$', views.serve),
+    ]

player/templates/player/playlist.html

@@ -1,9 +1,20 @@
 {% extends "base.html" %}
 {% load bootstrap4 %}
+{% load staticfiles %}
 
 {% block title %} - {{playlist.name}}{% endblock %}
 
+{% block js %}<script src="{% static "js/playlist.js" %}"></script>{% endblock %}
+
 {% block content %}
+	<script>
+	var tracks = [{% for link in playlist.link_set.all %}
+	"{{link.token}}",
+	{% endfor %}];
+    var add_url = "{% url 'player:add' playlist.get_token %}";
+	var get_url = "{% url 'player:list' playlist.get_token %}";
+    </script>
+
 	<div class="row">
 		<div class="col-md-3">
 			<h1>{{playlist.name}}</h1>
@@ -41,135 +52,6 @@
 				{% bootstrap_form form %}
 				<button class="btn btn-outline-primary"><i class="fa fa-plus"></i> Ajouter</button>
 			</form>
-    		<script>
-var tracks = [
-{% for link in playlist.link_set.all %}
-"{{link.token}}",
-{% endfor %}
-];
- // 2. This code loads the IFrame Player API code asynchronously.
-var tag = document.createElement('script');
-var current_link = -1;
-tag.src = "https://www.youtube.com/iframe_api";
-var firstScriptTag = document.getElementsByTagName('script')[0];
-firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-var last_sync = new Date().getTime();
-// 3. This function creates an <iframe> (and YouTube player)
-//    after the API code downloads.
-var player;
-function onYouTubeIframeAPIReady() {
-        player = new YT.Player('player', {
-          height: '390',
-          width: '640',
-          events: {
-            'onReady': onPlayerReady,
-            'onStateChange': onPlayerStateChange
-          }
-        });
-}
-
-// 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)) {
-      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;
-      play();
-	}
-}
-
-function prev() {
-	if (current_link > 0) {
-      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) {
-	next();
-  }
-}
-function stopVideo() {
-  player.stopVideo();
-}
-function addLink() {
-    var form = $('#add_link_form');
-	$.ajax({
-		type: "post",
-		url: "{% url 'player:add' playlist.get_token %}",
-		data: form.serialize(),
-		async: true,
-		success: loadLinks,
-	})
-	$('#id_url').val('');
-	return false;
-}
-function updateLinks(data) {
-	if (!data.updated) {
-		return;
-	}
-	last_sync = new Date().getTime();
-	var links = document.getElementById("links");
-	while (links.firstChild) {
-		    links.removeChild(links.firstChild);
-	}
-	var model = document.getElementById('link_template');
-    var rerun = (current_link >= tracks.length ) || current_link < 0;
-	tracks = [];
-	for (var i=0; i<data.tokens.length; i++)
-	{
-        var token = data.tokens[i];
-		tracks.push(token);
-		var card = model.cloneNode(true);
-		card.style.display = 'block';
-		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) {
-        next();
-    }
-}
-function loadLinks() {
-	$.ajax({
-		type: "get",
-		url: "{% url 'player:list' playlist.get_token %}",
-		async: true,
-		data: {last_sync: last_sync},
-		success: updateLinks
-	})
-}
-    		</script>
 		</div>
 		<div class="col-md-6" style="height:100%; overflow-y:scroll;">
 			<h2>Pistes à venir</h2>

static_files/js/playlist.js

@@ -0,0 +1,122 @@
+ // 2. This code loads the IFrame Player API code asynchronously.
+var tag = document.createElement('script');
+var current_link = -1;
+tag.src = "https://www.youtube.com/iframe_api";
+var firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+var last_sync = new Date().getTime();
+// 3. This function creates an <iframe> (and YouTube player)
+//    after the API code downloads.
+var player;
+function onYouTubeIframeAPIReady() {
+        player = new YT.Player('player', {
+          height: '390',
+          width: '640',
+          events: {
+            'onReady': onPlayerReady,
+            'onStateChange': onPlayerStateChange
+          }
+        });
+}
+
+// 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)) {
+      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;
+      play();
+	}
+}
+
+function prev() {
+	if (current_link > 0) {
+      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) {
+	next();
+  }
+}
+function stopVideo() {
+  player.stopVideo();
+}
+function addLink() {
+    var form = $('#add_link_form');
+	$.ajax({
+		type: "post",
+		url: add_url,
+		data: form.serialize(),
+		async: true,
+		success: loadLinks,
+	})
+	$('#id_url').val('');
+	return false;
+}
+function updateLinks(data) {
+	if (!data.updated) {
+		return;
+	}
+	last_sync = new Date().getTime();
+	var links = document.getElementById("links");
+	while (links.firstChild) {
+		    links.removeChild(links.firstChild);
+	}
+	var model = document.getElementById('link_template');
+    var rerun = (current_link >= tracks.length ) || current_link < 0;
+	tracks = [];
+	for (var i=0; i<data.tokens.length; i++)
+	{
+        var token = data.tokens[i];
+		tracks.push(token);
+		var card = model.cloneNode(true);
+		card.style.display = 'block';
+		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) {
+        next();
+    }
+}
+function loadLinks() {
+	$.ajax({
+		type: "get",
+		url: get_url,
+		async: true,
+		data: {last_sync: last_sync},
+		success: updateLinks
+	})
+}

templates/base.html

@@ -10,6 +10,7 @@
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    {% block js %}{% endblock %}
 </head>
 <body>
 	{% include 'navbar.html' %}