Skip to content

Fix youtube by upgrading to use google API v3. #206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix youtube by upgrading to use google API v3. #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions example-youtube.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="The jQuery Lifestream plug-in enables you to show a stream of your online activity. On this page you can check out an example">
<meta name="keywords" content="jQuery, googleplus, plugin, lifestream, jquery-lifestream, twitter, delicious, github, stackoverflow, flickr, lastfm, youtube">

<title>jQuery Lifestream example (youtube)</title>

<style type="text/css">
body {
margin: 1.0em;
background-color: #fff;
font-family: Helvetica, Arial, FreeSans, sans-serif;
color: #000000;
}
h1 { font-size: 3.8em; color: #3908bc; margin-bottom: 3px; }
h1 .small { font-size: 0.4em; }
h1 a { text-decoration: none }
h2 { font-size: 1.5em; color: #3908bc; clear: both;}
h3 { text-align: center; color: #3908bc; }
a { color: #3908bc; }
ul li { list-style-type: none;}

#lifestream {
background: #333;
border-radius: 7px;
color: #d4d4d4;
width: 450px;
font-size:11px;
}
#lifestream a {
color: #f6dd97;
text-decoration: none;
}
#lifestream a:hover {
color: #fff5d8;
text-decoration: underline;
}
#lifestream ul {
padding: 10px;
}
#lifestream li {
padding: 5px 3px 5px 25px;
background-repeat: no-repeat;
background-position: left center;
white-space: pre-wrap;
}
#lifestream li:hover {
color: #e9e9e9;
}
#lifestream .timeago {
opacity: .5;
}
</style>
<link href="css/lifestream.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://github.com/christianvuerings/jquery-lifestream">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
</a>
<h1>jQuery Lifestream Example (youtube)</h1>
<p>Find more information about this plug-in on the <a href="http://github.com/christianvuerings/jquery-lifestream">project page</a>.</p>
<p>Go ahead and <a href="http://christianvuerings.github.com/jquery-lifestream/me/">create your own lifestream</a>.</p>

<h2>Lifestream - formatted with CSS</h2>
<div id="lifestream">&nbsp;</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"><\/script>');</script>
<script src="jquery.lifestream.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.1.0/jquery.timeago.min.js" type="text/javascript" charset="utf-8"></script>
<script>
(function(){
var count = 0,
list = [
{
service: 'youtube',
user: 'foobarbecue',
// playlist: 'UUVeahPBre3Q1vC19I5WYP-Q',
api_key: ''
}
];

Date.prototype.toISO8601 = function(date) {
var pad = function (amount, width) {
var padding = "";
while (padding.length < width - 1 && amount < Math.pow(10, width - padding.length - 1))
padding += "0";
return padding + amount.toString();
}
date = date ? date : new Date();
var offset = date.getTimezoneOffset();
return pad(date.getFullYear(), 4)
+ "-" + pad(date.getMonth() + 1, 2)
+ "-" + pad(date.getDate(), 2)
+ "T" + pad(date.getHours(), 2)
+ ":" + pad(date.getMinutes(), 2)
+ ":" + pad(date.getUTCSeconds(), 2)
+ (offset > 0 ? "-" : "+")
+ pad(Math.floor(Math.abs(offset) / 60), 2)
+ ":" + pad(Math.abs(offset) % 60, 2);
};

$("#lifestream").lifestream({
limit: 400,
list: list,
feedloaded: function(){
count++;
// Check if all the feeds have been loaded
if( count === list.length + 1 ){
$("#lifestream li").each(function(){
var element = $(this),
date = new Date(element.data("time"));
element.append(' <abbr class="timeago" title="' + date.toISO8601(date) + '">' + date + "</abbr>");
})
$("#lifestream .timeago").timeago();
}
}
});
})();
</script>

<script>
var _gaq=[["_setAccount","UA-190225-11"],["_trackPageview"],["_trackPageLoadTime"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>

</body>
</html>
2 changes: 1 addition & 1 deletion src/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
// user has been filled in
if ( $.fn.lifestream.feeds[config.service] &&
$.isFunction( $.fn.lifestream.feeds[config.service] ) &&
config.user) {
(config.user || config.playlist)) {

// You'll be able to get the global settings by using
// config._settings in your feed
Expand Down
46 changes: 36 additions & 10 deletions src/services/youtube.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,57 @@

var template = $.extend({},
{
"uploaded": 'uploaded <a href="https://www.youtube.com/watch?v=${id}">${title}</a>'
"uploaded": 'uploaded <a href="https://www.youtube.com/watch?v=${resourceId.videoId}">${title}</a>'
},
config.template);

var parseYoutube = function(response) {
var output = [];

if(!response.videos) {return output;}
if(!response.items) {return output;}

for (var i=0; i<response.videos.length;i++){
var video = response.videos[i];
for (var i=0; i<response.items.length;i++){
var video = response.items[i];

output.push({
"date": new Date(video.datePublished),
"date": new Date(video.publishedAt),
"config": config,
"html": $.tmpl(template.uploaded, video)
"html": $.tmpl(template.uploaded, video.snippet)
});
}
callback(output);
};
var videos_request_params = {
part: "snippet",
key: config.api_key
};

var fetchAndParseYoutube = function(){
$.ajax({
"url": "https://www.googleapis.com/youtube/v3/playlistItems",
"data": videos_request_params,
"cache": false
}).success(parseYoutube);
}

$.ajax({
"url": "https://youtuby-1.herokuapp.com/" + config.user,
"cache": false
}).success(parseYoutube);
//If the playlist id was given in the config, get the videos from that
if (config.hasOwnProperty("playlist")){
videos_request_params['playlistId'] = config['playlist'];
fetchAndParseYoutube();
}

//If the playlist id wasn't specified, request the uploads playlist id for the specified user and use that
else {
$.ajax({"url":"https://www.googleapis.com/youtube/v3/channels",
"data":{
forUsername:config.user,
part:"contentDetails",
key:config.api_key
}}).success(function(channels_resp){
videos_request_params['playlistId'] = channels_resp.items[0].contentDetails.relatedPlaylists.uploads;
fetchAndParseYoutube();
})
};

// Expose the template.
// We use this to check which templates are available
Expand Down