';
if(enableTitle){
html +=`
`;
}
if(enableDesc){
html +=`
${truncateText(
description,
descriptionLength
)}
`;
}
html +="
Invalid handle or API key.
'
);
}});
}else{
proceedWithPlaylist(playlistId);
}
function proceedWithPlaylist(playlistId){
if(playlistId.startsWith("UC")){
playlistId="UU" + playlistId.substring(2);
}
if(!playlistId||!config.apiKey){
$wrapper.html('Please provide both YouTube playlist ID/URL and API key.
'
);
return;
}
let allVideos=[];
let shownCount=config.videosPerPage.lg||9;
let activeVideo=null;
let playingId=null;
function updateResponsiveCounts(){
const width=$(window).width();
if(width < 600){
shownCount=Math.max(shownCount, config.videosPerPage.sm||3);
}else if(width < 900){
shownCount=Math.max(shownCount, config.videosPerPage.md||6);
}else{
shownCount=Math.max(shownCount, config.videosPerPage.lg||9);
}}
function renderPlaylistLayout(videos){
if(!videos.length){
$container.html("No videos found in this playlist.
");
return;
}
if(!activeVideo){
activeVideo=videos[0];
}
let html='';
const playerWrapper=`
${getYoutubeTextContent(
config.showVideoTitle,
activeVideo.title,
config.videoTitleLength,
config.showDescription,
activeVideo.description,
config.videoDescriptionLength,
activeVideo.videoId
)}
`;
html +=playerWrapper;
html +="
No videos found in this playlist.
");
return;
}
const displayedVideos=videos.slice(0, count);
let html="";
displayedVideos.forEach(function (video){
const isPlaying=playingId===video.videoId;
html +=``;
html +=`
`;
if(isPlaying){
html +=generatePlayerIframe(video.videoId, config);
}else{
const getSvgIcon=$(".ultp-ytg-play__icon").html();
html +=`
${getSvgIcon}
`;
}
html +=`
`;
html +=`
`;
html +=getYoutubeTextContent(
config.showVideoTitle,
video.title,
config.videoTitleLength,
config.showDescription,
video.description,
config.videoDescriptionLength,
video.videoId
);
html +=`
Failed to fetch videos. Please try again.
'
);
}, 3000);
});
}
$block.on("click", ".ultp-ytg-playlist-item", function (){
const videoId=$(this).data("video-id");
if(!videoId) return;
activeVideo=allVideos.find(function (v){
return v.videoId===videoId;
});
if(activeVideo){
renderPlaylistLayout(allVideos);
}});
$block.on("click", ".ultp-ytg-play__icon", function (){
const $img=$(this).siblings("img[data-video-id]");
const videoId=$img.data("video-id");
if(!videoId) return;
const $item=$(this).closest(".ultp-ytg-item");
const $videoDiv=$item.find(".ultp-ytg-video");
$videoDiv.html('