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.
function onPlayerReady(event) {
if(tracks.length > 0 && current_link < (tracks.length - 1)) {
current_link += 1
player.loadVideoById(tracks[current_link]);
event.target.playVideo();
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
player.loadVideoById(tracks[current_link]);
event.target.playVideo();
current_link += 1;
play();
}
}
function prev() {
if (current_link > 0) {
current_link -= 1
player.loadVideoById(tracks[current_link]);
event.target.playVideo();
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) {
onPlayerReady();
next();
}
}
function stopVideo() {
@ -124,16 +137,23 @@ function updateLinks(data) {
tracks = [];
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);
card.style.display = 'block';
card.id = 'link_' + data[i].fields.token;
card.getElementsByClassName('link_name')[0].innerHTML = data[i].fields.token;
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) {
onPlayerReady();
next();
}
}
function loadLinks() {
@ -150,10 +170,10 @@ function loadLinks() {
<h2>Pistes à venir</h2>
<div id="links">
{% 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="row container">
<div class="col-md-6">
<div class="col-md-6" >
<i class="far fa-play-circle"></i>
{{link.token}}
</div>
@ -172,7 +192,7 @@ function loadLinks() {
</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="row container">
<div class="col-md-6">