live_share_youtube/static_files/js/playlist.js

123 lines
3.1 KiB
JavaScript
Raw Normal View History

2018-03-28 15:21:59 +00:00
// 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);
2018-03-28 22:16:11 +00:00
$("#links").height($('#player').height());
2018-03-28 15:21:59 +00:00
}
function play() {
player.loadVideoById(tracks[current_link]);
player.playVideo();
}
function next() {
2018-03-28 17:13:06 +00:00
setCurrent(current_link + 1);
2018-03-28 15:21:59 +00:00
}
function prev() {
2018-03-28 17:13:06 +00:00
setCurrent(current_link - 1);
2018-03-28 15:21:59 +00:00
}
function setCurrent(c) {
2018-03-28 17:13:06 +00:00
if(c >= 0 && c < tracks.length) {
if(current_link >= 0 && current_link < tracks.length){
document.getElementById(current_link).classList.remove('bg-success');
document.getElementById(current_link).classList.add('bg-secondary');
}
2018-03-28 15:21:59 +00:00
current_link = c;
play();
2018-03-28 17:13:06 +00:00
document.getElementById(current_link).classList.add('bg-success');
document.getElementById(current_link).classList.remove('bg-secondary');
2018-03-28 15:21:59 +00:00
}
}
function setCurrentFromToken(token) {
2018-03-28 15:54:07 +00:00
setCurrent(tracks.lastIndexOf(token));
2018-03-28 15:21:59 +00:00
}
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 = [];
2018-03-28 21:01:47 +00:00
for (var i=0; i<data.videos.length; i++)
2018-03-28 15:21:59 +00:00
{
2018-03-28 21:01:47 +00:00
var token = data.videos[i].token;
var title = data.videos[i].title;
console.debug(title);
2018-03-28 15:21:59 +00:00
tracks.push(token);
var card = model.cloneNode(true);
card.style.display = 'block';
2018-03-28 15:54:07 +00:00
card.id = i.toString();
2018-03-28 21:01:47 +00:00
card.getElementsByClassName('link_name')[0].innerHTML = title;
2018-03-28 15:21:59 +00:00
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
})
}