/*
* -------------------
* PH Video Page JS
* Author: Jack Lyons
* -------------------
*/
(function($, window, document) {
jQuery(document).ready(function($) {
var innerWrapper = $('.inner-main-wrapper'),
resultsWrapper = $('#results'),
togglePlaylists = $('#toggle-video-playlists'),
featureVideoId = $('.youtube-player').data('id'),
searchForm = $('#search-form'),
q; // query
/* ----------------------
* YT Video Constructor
* ---------------------- */
var VideoConstructor = (function () {
return {
speedUpYouTubeLoad: function (el) {
var div, n, v = document.getElementsByClassName(el);
// Iterate over videos and create thumbnail
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = this.addThumb(v[n].dataset.id);
div.onclick = this.addIframe;
v[n].appendChild(div);
}
},
addThumb: function (id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
},
addIframe: function () {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
},
init: function(el) {
return this.speedUpYouTubeLoad(el);
}
}; /* -- end return {} -- */
})(); /* ------ end VideoConstructor ---- */
/* --------------
* Ajax Requests
* -------------- */
var AjaxRequests = (function () {
var options = {
part: 'snippet, id',
maxResults: 9,
type: 'video',
key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg'
};
var commentsOptions = {
part: 'snippet',
videoId: featureVideoId,
key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg'
}
return {
searchChannel: function() {
q = $('#query').val(); // Get Form Input
Templates.createHTMLWrapper(q);
AjaxRequests.channelRequest("https://www.googleapis.com/youtube/v3/search",
$.extend({}, options, {
q: q,
channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ'
})
);
},
returnPlaylistVideos: function(e) {
var playlistId = e.currentTarget.dataset.channelId,
playlistTitle = e.target.innerText;
Templates.createHTMLWrapper(playlistTitle);
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",
$.extend({}, options, {
q: playlistTitle,
playlistId: playlistId,
}),
function(data) {
q = playlistTitle;
Templates.appendYouTubeData(data, playlistTitle, function(item) {
return item.snippet.resourceId.videoId; // Append HTML from different endpoint
});
});
},
getFeatureVideoComments: function() {
$.get("https://www.googleapis.com/youtube/v3/commentThreads", commentsOptions,
function(data) {
Templates.appendFeatureComments(data);
})
},
getNextPageItems: function() {
var token = $('#next-button').data('token'),
q = $('#next-button').data('query');
$('#buttons').html('');
AjaxRequests.channelRequest("https://www.googleapis.com/youtube/v3/search",
$.extend({}, options, {
q: q,
channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ',
pageToken: token
})
);
},
channelRequest: function(url, args) {
$.get(url, args, function(data) {
Templates.appendYouTubeData(data, q, function(item) {
return item.id.videoId;
});
});
}
}; /* -- end return {} -- */
})(); /* ------ AjaxRequests ---- */
/* -----------------
* Return ajax data
* ----------------- */
var Templates = (function () {
var visible = false;
return {
appendYouTubeData: function (data, query, videoId) {
Templates.appendEachVideo(data, videoId); // Iterate over each video & append HTML
Templates.appendNextButton(data);
VideoConstructor.init("youtube-player");
},
appendFeatureComments: function(data) {
// only append comments once
if (!visible) {
$.each(data.items, function(i, comment) {
var comment = comment.snippet.topLevelComment.snippet.textDisplay;
$('.comment-item').append('<p>' + comment + '</p>');
console.log(comment);
})
}
visible = true;
// slide comments down and up
$('.comment-item')
.slideToggle()
.show();
// toggle up and down arrows
$('.js-reveal-comments').find(".fa-angle-up, .fa-angle-down").toggle();
},
appendEachVideo: function (videos, videoId) {
$.each(videos.items, function(i, item) {
var output = Templates.getOutput(item, videoId(item));
$('#results').append(output);
});
},
appendNextButton: function(data) {
var nextPageToken = data.nextPageToken,
nextButton = Templates.getButtons(nextPageToken),
buttonsDiv = $('#buttons');
if (nextPageToken === undefined) {
$(buttonsDiv).html('<h2 class="grey-color text-lead in-b pad-r-sm">NO MORE VIDEOS</h2>');
} else {
$(buttonsDiv).html(nextButton);
$('#next-button').on('click', AjaxRequests.getNextPageItems);
}
},
createHTMLWrapper: function (title) {
$(innerWrapper)
.html('')
.append(
'<div class="text-center"><h2>Results for: ' + title + '</h2></div>' +
'<div id="results" class="row flex-wrap video-row w-95 m-auto"></div>' +
'<div id="buttons" class="text-center"></div>'
);
},
getOutput: function(item, videoId) {
var title = item.snippet.title;
var output =
'<div class="video-row__item">' +
'<div class="embed-container">' +
'<div class="youtube-player" data-id="' + videoId + '"></div>' +
'</div>' +
'<div class="list-right">' +
'<h4 class="text-bold"><a class="no-link-style black-color" href="https://www.youtube.com/embed/' + videoId + '">' + title + '</a></h4>' +
'</div>';
return output;
},
getButtons: function (nextPageToken) {
var btnOutput =
'<div class="button-container text-center">' +
'<a id="next-button" class="no-link-style grey-color"' +
'data-query="' + q + '" data-token="' + nextPageToken + '">' +
'<h2 class="text-lead in-b pad-r-sm">VIEW MORE VIDEOS</h2>' +
'<i class="fa fa-2x fa-angle-down p-0" aria-hidden="true"></i>' +
'</a>' +
'</div>';
return btnOutput;
}
}; /* -- end return {} -- */
})(); /* ------ Templates ---- */
/* ------------
* Run on init
* ------------ */
$('.video-list').on('click', 'li', AjaxRequests.returnPlaylistVideos);
$('.js-reveal-comments').on('click', AjaxRequests.getFeatureVideoComments);
$(searchForm).submit(function(e) {
e.preventDefault();
$(innerWrapper).html('');
AjaxRequests.searchChannel();
});
$(togglePlaylists).on('click', function() {
$('.video-list').toggle();
});
VideoConstructor.init("youtube-player");
}); // end $(document).ready()
}(window.jQuery, window, document));
!
