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

affiche la lecture actuelle

Browse source
This commit is contained in:
Klafyvel 2018-03-25 20:23:32 +02:00
parent a58f3365ed
commit 808e779237
1 changed files with 37 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
player/templates/player/playlist.html
View file

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