Skip to content
Permalink
Browse files

Feeds: Added a way to manually specify a list of videos

Also significantly optimize the YouTube feeds by only using one lightbox for the whole feed, on demand
  • Loading branch information...
LaurentGoderre committed May 26, 2015
1 parent 397fe76 commit bcf464b52db034935dd536028f0c142ab0e11eaa
Showing with 91 additions and 32 deletions.
  1. +6 −4 src/plugins/feeds/feeds-en.hbs
  2. +69 −28 src/plugins/feeds/feeds.js
  3. +16 −0 src/plugins/multimedia/multimedia-youtube-en.hbs
@@ -120,10 +120,12 @@
<h4 class="wb-inv">YouTube</h4>
<ul class="feeds-cont list-inline">
<li>
<a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;alt=json">Parks Canada Youtube</a>
</li>
<li>
<a href="https://www.youtube.com/user/fisheriescanada?feature=results_main" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UC5D1a5R8bbrTXEJrjmRX7gA/uploads?v=2&amp;alt=json">Department of Fisheries and Oceans’ YouTube</a>
<a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-youtube='{"playlist":[
{"id":"ZwgEH-Szk0k", "title": "Learn to Set up a Tent"},
{"id":"w5gpKajD8E0", "title": "Camping with Wildlife"},
{"id":"_E_9te0nq3A", "title": "Learn to Start a Campfire"},
{"id":"WrtZjBTkQbw", "title": "Planning your trip"}
]}'>Parks Canada Youtube</a>
</li>
</ul>
<div class="clearfix"></div>
@@ -83,24 +83,11 @@ var componentName = "wb-feeds",
* @return {string} HTML string for creating a photowall effect
*/
youtube: function( data ) {
var seed = wb.getId(),
mediaGroup = data.media$group,
title = mediaGroup.media$title.$t,
thumbnail = mediaGroup.media$thumbnail[ 1 ].url,
description = mediaGroup.media$description.$t,
videoid = mediaGroup.yt$videoid.$t;
var title = data.title,
videoId = data.id;

// Due to CORS we cannot default to simple ajax pulls of the image. We have to inline the content box
return "<li class='col-md-4 col-sm-6' ><a class='wb-lbx' href='#" + seed + "'><img src='" + thumbnail + "' alt='" + title + "' title='" + title + "' class='img-responsive' /></a>" +
"<section id='" + seed + "' class='mfp-hide modal-dialog modal-content overlay-def'>" +
"<header class='modal-header'><h2 class='modal-title'>" + title + "</h2></header>" +
"<div class='modal-body'>" +
"<figure class='wb-mltmd'><video title='" + title + "'>" +
"<source type='video/youtube' src='http://www.youtube.com/watch?v=" + videoid + "' />" +
"</video><figcaption><p>" + description + "</p>" +
"</figcaption></figure>" +
"</div></section>" +
"</li>";
return "<li class='col-md-4 col-sm-6 feed-youtube' data-youtube='{\"videoId\":\"" + videoId + "\", \"title\":\"" + title + "\"}'><a href='javascript:;'><img src='http://img.youtube.com/vi/" + videoId + "/mqdefault.jpg' alt='" + title + "' title='" + title + "' class='img-responsive' /></a></li>";
},
/**
* [pinterest template]
@@ -190,7 +177,7 @@ var componentName = "wb-feeds",
// returns DOM object = proceed with init
// returns undefined = do not proceed with init (e.g., already initialized)
var elm = wb.init( event, componentName, selector ),
fetch, url, $content, limit, feeds, fType, last, i, callback, fElem, fIcon;
fetch, url, $content, limit, feeds, fType, last, i, callback, fElem, fIcon, youtubeData;

if ( elm ) {
$content = $( elm ).find( ".feeds-cont" );
@@ -219,15 +206,27 @@ var componentName = "wb-feeds",
fType = "flickr";
callback = "jsoncallback";
$content.data( componentName + "-postProcess", [ ".wb-lbx" ] );
} else {
fType = "youtube";
$content.data( componentName + "-postProcess", [ ".wb-lbx", ".wb-mltmd" ] );
}

// We need a Gallery so lets add another plugin
// #TODO: Lightbox review for more abstraction we should not have to add a wb.add() for overlaying
fetch.url = fElem.attr( "data-ajax" );
fetch.jsonp = callback;
} else if ( fElem.attr( "data-youtube" ) ) {
youtubeData = wb.getData( fElem, "youtube" );

$content.data( componentName + "-postProcess", [ ".wb-lbx", ".wb-mltmd" ] );

if ( youtubeData.playlist ) {
fElem.trigger( {
type: "data-ready.wb-feeds",
feedsData: youtubeData.playlist
}, {
feedType: "youtube",
_content: $content
} );
}

} else {
url = jsonRequest( fElem.attr( "href" ), limit );
fetch.url = url;
@@ -318,9 +317,13 @@ var componentName = "wb-feeds",
hasVisibilityHandler = "vis-handler",
i, sorted, sortedEntry, $tabs;

sorted = entries.sort( function( a, b ) {
return compare( b.publishedDate, a.publishedDate );
} );
if ( feedtype !== "youtube" ) {
sorted = entries.sort( function( a, b ) {
return compare( b.publishedDate, a.publishedDate );
} );
} else {
sorted = entries;
}

for ( i = 0; i !== cap; i += 1 ) {
sortedEntry = sorted[ i ];
@@ -393,14 +396,20 @@ var componentName = "wb-feeds",
$elm.trigger( "wb-feed-ready" + selector );
};

$document.on( "ajax-fetched.wb", selector + " " + feedLinkSelector, function( event, context ) {
var response = event.fetch.response,
eventTarget = event.target,
data;
$document.on( "ajax-fetched.wb data-ready.wb-feeds", selector + " " + feedLinkSelector, function( event, context ) {
var eventTarget = event.target,
data, response;

// Filter out any events triggered by descendants
if ( event.currentTarget === eventTarget ) {
data = ( response.responseData ) ? response.responseData.feed.entries : response.items || response.feed.entry;
switch ( event.type ) {
case "ajax-fetched":
response = event.fetch.response;
data = ( response.responseData ) ? response.responseData.feed.entries : response.items || response.feed.entry;
break;
default:
data = event.feedsData;
}

// Identify that initialization has completed
// if there are no entries left to process
@@ -410,6 +419,38 @@ $document.on( "ajax-fetched.wb", selector + " " + feedLinkSelector, function( ev
}
} );

$document.on( "click", selector + " .feed-youtube", function( event ) {
var youTubeOverlaySelector = "#wb-feeds-youtube-lbx",
$youTubeOverlay = $( youTubeOverlaySelector ),
youtubeData = wb.getData( event.currentTarget, "youtube" ),
videoUrl = "http://www.youtube.com/watch?v=" + youtubeData.videoId,
videoSource = "<figure class='wb-mltmd'><video title='" + youtubeData.title + "'>" +
"<source type='video/youtube' src='" + videoUrl + "' />" +
"</video><figcaption><p>" + youtubeData.title + "</p>" +
"</figcaption></figure>";

if ( $youTubeOverlay.length === 0 ) {
$youTubeOverlay = $( "<section id='wb-feeds-youtube-lbx' class='mfp-hide modal-dialog modal-content overlay-def'>" +
"<header class='modal-header'><h2 class='modal-title'>" + youtubeData.title + "</h2></header>" +
"<div class='modal-body'>" +
videoSource +
"</div></section>" ).insertAfter( "main" );
} else {

//Modify lightbox
$youTubeOverlay.find( ".modal-title" ).text( youtubeData.title );
$youTubeOverlay.find( ".modal-body" ).empty().append( videoSource );
}

//Temporary fix until lightbox auto initialize the multimedia player
$youTubeOverlay.find( ".wb-mltmd" ).trigger( "wb-init.wb-mltmd" );

$( document ).trigger( "open.wb-lbx", [ {
src: youTubeOverlaySelector,
type: "inline"
} ] );
} );

// Bind the init event to the plugin
$document.on( "timerpoke.wb " + initEvent, selector, init );

@@ -31,6 +31,22 @@
<p>Suspect (<a href="http://healthycanadians.gc.ca/video/suspect-eng.php#trans">Transcript</a>)</p>
</figcaption>
</figure>
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "http://www.youtube.com/watch?v=9znKJqnFuuY"}'>
<video title="Suspect">
<source type="video/youtube" src="http://www.youtube.com/watch?v=9znKJqnFuuY" />
</video>
<figcaption>
<p>Suspect (<a href="http://healthycanadians.gc.ca/video/suspect-eng.php#trans">Transcript</a>)</p>
</figcaption>
</figure>
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "http://www.youtube.com/watch?v=9znKJqnFuuY"}'>
<video title="Suspect">
<source type="video/youtube" src="http://www.youtube.com/watch?v=9znKJqnFuuY" />
</video>
<figcaption>
<p>Suspect (<a href="http://healthycanadians.gc.ca/video/suspect-eng.php#trans">Transcript</a>)</p>
</figcaption>
</figure>

<details class="mrgn-tp-md">
<summary>View code</summary>

0 comments on commit bcf464b

Please sign in to comment.
You can’t perform that action at this time.