I found a very good tutorial about Youtube API, the example is with AngularJS, but I needed to change, because the example list videos when you type something in the input form and I want to add more videos from the results when I click the button to load more.
So with my changes the code doesn’t work, I have the example in codepen, but it’s not compiling AngularJS variables:
http://codepen.io/Gisesonia/pen/OpGRzp
I didn’t understand exactly how to get nextPageToken.
<div class="text-center" ng-if="checkLength(youtubePlaylist)">
<input type="hidden" id="pageToken1" value="">
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="pageTokenNext1" ng-click="carregaMais(playlistId ,nextPageToken)" class="btn btn-default btn-carrega">Carregar mais videos...</button>
</div>
</div>
app.controller('ListaVideos', []);
var channelId = 'UC2pmfLm7iq6Ov1UwYrWYkZA';
var key = 'API Key';
var pageToken;
app.factory('youtubeService', ['$http', function ($http) {
function getPlaylistItems(id, pagina_selecionada) {
var opcoes = {
part: 'snippet',
playlistId: id,
key: key,
};
if (pageToken !== null){
opcoes.pageToken = pagina_selecionada;
}
console.log(opcoes)
return $http.get('https://www.googleapis.com/youtube/v3/playlistItems', {
params: opcoes
});
}
return {
getPlaylistItems: getPlaylistItems
}
console.log(opcoes)
}]);
//controller
app.controller('VideoPlayerController', ['$http','$scope','$uibModal','$sce','youtubeService', '$log', function ($http, $scope,$uibModal, $sce, youtubeService,$log) {
$scope.youtubePlaylist = [];
$scope.aceitaUrl = function(video) {
return $sce.trustAsResourceUrl(video);//cuida da parte de autorização Cross Origin
}
youtubeService.getPlaylistItems('PLhEguvmo7mSPjBv1XHxJn7A3zHLFTLSFT', 'CAUQAA')
.then(function (response) {
$scope.youtubePlaylist = response.data.items;
$scope.nextPageToken = response.data.nextPageToken;
console.log(response.data.nextPageToken);
console.log(response.data)
$.each($scope.youtubePlaylist, function(index, item) {
console.log(item.snippet.playlistId);
return $scope.playlistId =item.snippet.playlistId;
});
});
$scope.checkLength = function(data){
return (data.length >=1);
console.log(data);
};
$scope.divHtmlVar = '';
$scope.carregaMais = function( itemId, nextPage) {
$scope.nextPageToken = nextPage;
$scope.playlistId = itemId;
$scope.divHtmlVar = $scope.divHtmlVar + '<br/><i>'+nextPage+'</i>';
console.log($scope.nextPageToken)
//console.log(nextPage);
//console.log(id);
//console.log(youtubeService.getPlaylistItems( id, nextPage));
}
$scope.playVideo = function (videoId, videoTitle) {
var dialog = $uibModal.open({
templateUrl: 'modal.html',
controller: VideoYoutubeController,
scope:$scope.$new(true),
resolve: {
video: function () {
return {
url: 'https://www.youtube.com/embed/'+videoId,
title: videoTitle
}
}
},
size: 'md'
})
dialog.result.then(function (selectedItem) {
$uibModal.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
var VideoYoutubeController = function ($scope, $uibModalInstance, video) {
$scope.video = video;
$scope.trustSrc = function(video) {
return $sce.trustAsResourceUrl(video);//cuida da parte de autorização Cross Origin
}
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
};
VideoYoutubeController['$inject'] = ['$scope', '$uibModalInstance', 'video'];
}]);