|
/*********************** |
|
SETUP |
|
************************/ |
|
|
|
/* VARIALBES |
|
************************/ |
|
var YT_apy_key = "AIzaSyAryVoK1lGJkNmGVMY1uk5YXor-svZ14cw"; |
|
var YT_playlistID = "UUO39ff9JbAyWNDz4HsE-cLw"; |
|
|
|
var googleapisURL = "https://www.googleapis.com/youtube/v3"; |
|
var YT_url_list = googleapisURL +"/playlistItems?part=contentDetails&playlistId="+ YT_playlistID +"&key="+ YT_apy_key +"&maxResults=50"; |
|
var YT_url_items = googleapisURL +"/videos?key="+ YT_apy_key +"&part=snippet,statistics&fields=items(id,snippet(title,publishedAt,thumbnails),statistics(viewCount))&id="; |
|
|
|
|
|
/* SETTINGS |
|
************************/ |
|
moment.locale('es-AR');//Date language |
|
|
|
|
|
/* FUNCTIONS |
|
************************/ |
|
|
|
/* GET PLAYLIST */ |
|
var get_YT_playlist = function(playlistID){ |
|
if( typeof playlistID == 'undefined' ){ |
|
return; |
|
}; |
|
var arrVideosID = []; |
|
$.get(YT_url_list, function(data) { |
|
$.each(data.items, function(key, item){ |
|
arrVideosID.push(item.contentDetails.videoId); |
|
}) |
|
get_YT_videoData(arrVideosID.join(',')); |
|
}) |
|
.fail(function() { |
|
alert("error"); |
|
}); |
|
} |
|
|
|
/* GET VIDEOS DATA */ |
|
var get_YT_videoData = function(videos_list) { |
|
var arrVideosID = []; |
|
$.get(YT_url_items + videos_list, function(data) { |
|
get_videosHTML(data.items, $('#videos') ); |
|
}) |
|
.fail(function() { |
|
alert("error"); |
|
}); |
|
} |
|
|
|
/* GET VIDEO ITEM HTML */ |
|
var get_videosHTML = function(data, target) { |
|
|
|
var tpl_videoHTML = $(target).find('.video-template').wrap('<div/>').parent().html(); |
|
$(target).find('.video-template').unwrap(); |
|
|
|
tpl_videoHTML = tpl_videoHTML.replace('video-template', ''); |
|
|
|
var output = ''; |
|
|
|
$.each(data, function(key, video) { |
|
var videoHTML = tpl_videoHTML; |
|
|
|
var video_ID = video.id; |
|
var video_thumb = video.snippet.thumbnails.default.url; |
|
if (!$.isEmptyObject(video.snippet.thumbnails.medium)) { |
|
video_thumb = video.snippet.thumbnails.medium.url; |
|
} |
|
|
|
var video_title = video.snippet.title; |
|
var video_published = moment(video.snippet.publishedAt, "YYYYMMDD").fromNow(); |
|
var video_viewCount = video.statistics.viewCount; |
|
|
|
videoHTML = videoHTML.replace(/\[\[VIDEOID\]\]/g, video_ID); |
|
videoHTML = videoHTML.replace(/\[\[THUMBURL\]\]/g, video_thumb); |
|
videoHTML = videoHTML.replace(/\[\[TITLE\]\]/g, video_title); |
|
videoHTML = videoHTML.replace(/\[\[SINCE\]\]/g, video_published); |
|
videoHTML = videoHTML.replace(/\[\[VIEWS\]\]/g, video_viewCount); |
|
|
|
output += videoHTML; |
|
}); |
|
|
|
$(target).find('.video-template').parent().append(output); |
|
$(target).find('.video-template').remove(); |
|
$(target).addClass('video-ready'); |
|
|
|
set_videosPopup(); |
|
} |
|
|
|
|
|
var set_videosPopup = function(){ |
|
$('#videos .video a').click(function(){ |
|
var videoURL = $(this).attr('href'); |
|
|
|
jQuery.magnificPopup.open({ |
|
items: { |
|
src: videoURL |
|
}, |
|
type: 'iframe', |
|
iframe: { |
|
markup: '<div class="mfp-iframe-scaler">'+ |
|
'<div class="mfp-close"></div>'+ |
|
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ |
|
'</div>', |
|
patterns: { |
|
youtube: { |
|
index: 'youtube.com/', |
|
id: 'v=', |
|
src: '//www.youtube.com/embed/%id%?autoplay=1' |
|
} |
|
}, |
|
srcAction: 'iframe_src', |
|
} |
|
}); |
|
}); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
var init = function(){ |
|
get_YT_playlist(YT_playlistID); |
|
} |
|
|
|
|
|
/* DOCUMENT READY |
|
*********************************/ |
|
$(document).ready(function() { |
|
init(); |
|
}) |