klafyvel/live_share_youtube
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Js dans un fichier séparé

Browse source
This commit is contained in:
Klafyvel 2018-03-28 17:21:59 +02:00
parent 6976d3547c
commit 70025d0e64
6 changed files with 147 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
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 Normal file
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' %}