klafyvel
/
live_share_youtube
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Js dans un fichier séparé

master
Klafyvel 6 years ago
parent
6976d3547c
commit
70025d0e64
6 changed files with 147 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 5
      live_share_youtube/settings.py
  3. 8
      live_share_youtube/urls.py
  4. 140
      player/templates/player/playlist.html
  5. 122
      static_files/js/playlist.js
  6. 1
      templates/base.html

1
.gitignore
View File

@ -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

5
live_share_youtube/settings.py
View File

@ -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 = "/"

8
live_share_youtube/urls.py
View File

@ -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),
]

140
player/templates/player/playlist.html
View File

@ -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>

122
static_files/js/playlist.js
View File

@ -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
})
}

1
templates/base.html
View File

@ -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' %}

Write Preview
Loading…
Cancel
Save