Vimeo Video Library Web Content Structure and Template

structure.xml

<?xml version="1.0"?>

<root>
  <dynamic-element name="video-library-link" type="link_to_layout" index-type="" repeatable="false"/>
	<dynamic-element name="display-user-info" type="boolean" index-type="" repeatable="false">
		<meta-data>
			<entry name="displayAsTooltip"><![CDATA[false]]></entry>
			<entry name="required"><![CDATA[false]]></entry>
			<entry name="instructions"><![CDATA[]]></entry>
			<entry name="label"><![CDATA[Display Video Account User Info]]></entry>
			<entry name="predefinedValue"><![CDATA[]]></entry>
		</meta-data>
	</dynamic-element>
	<dynamic-element name="num-visible" type="text" index-type="" repeatable="false">
		<meta-data>
			<entry name="displayAsTooltip"><![CDATA[false]]></entry>
			<entry name="required"><![CDATA[false]]></entry>
			<entry name="instructions"><![CDATA[]]></entry>
			<entry name="label"><![CDATA[Max # of Videos Visible]]></entry>
			<entry name="predefinedValue"><![CDATA[2]]></entry>
		</meta-data>
	</dynamic-element>
	<dynamic-element name="display" type="text" index-type="" repeatable="false">
		<meta-data>
			<entry name="displayAsTooltip"><![CDATA[false]]></entry>
			<entry name="required"><![CDATA[true]]></entry>
			<entry name="instructions"><![CDATA[if Filter Videos is valid then this field is ignored]]></entry>
			<entry name="label"><![CDATA[Max # of Videos]]></entry>
			<entry name="predefinedValue"><![CDATA[2]]></entry>
		</meta-data>
	</dynamic-element>
	<dynamic-element name="section-title" type="text" index-type="" repeatable="false">
		<meta-data>
			<entry name="displayAsTooltip"><![CDATA[false]]></entry>
			<entry name="required"><![CDATA[false]]></entry>
			<entry name="instructions"><![CDATA[]]></entry>
			<entry name="label"><![CDATA[Section Title]]></entry>
			<entry name="predefinedValue"><![CDATA[]]></entry>
		</meta-data>
	</dynamic-element>
	<dynamic-element name="video-type" type="list" index-type="" repeatable="false">
		<meta-data>
			<entry name="displayAsTooltip"><![CDATA[true]]></entry>
			<entry name="required"><![CDATA[false]]></entry>
			<entry name="instructions"><![CDATA[]]></entry>
			<entry name="label"><![CDATA[ListField]]></entry>
			<entry name="predefinedValue"><![CDATA[]]></entry>
		</meta-data>
		<dynamic-element name="vimeo" type="vimeo" index-type="" repeatable="false"/>
		<dynamic-element name="youtube" type="youtube" index-type="" repeatable="false"/>
	</dynamic-element>
	<dynamic-element name="include-video" type="text" index-type="" repeatable="false"/>
	<dynamic-element name="username" type="text" index-type="" repeatable="false">
		<meta-data>
			<entry name="displayAsTooltip"><![CDATA[true]]></entry>
			<entry name="required"><![CDATA[false]]></entry>
			<entry name="instructions"><![CDATA[]]></entry>
			<entry name="label"><![CDATA[Video Account Username]]></entry>
			<entry name="predefinedValue"><![CDATA[]]></entry>
		</meta-data>
	</dynamic-element>
</root>

template.vm

#set ($namespace = "p_p_id_" + $request.theme-display.portlet-display.id + "_")
#set ($list = $namespace + "video-list")


#set ($friendlyURL = $request.get('attributes').get('CURRENT_COMPLETE_URL'))
#set ($videoid = $httpUtil.getParameter($friendlyURL, 'v'))
#set($baseurl = $request.get('CURRENT_COMPLETE_URL'))

#if($video-type.data != '')
  #set($video-type = $video-type.data)
#else
	#set($video-type = 'vimeo')
#end

#if($username.data != '')
	#set($username = $username.data)
#else
	#set($username = 'worldimpact')
#end


<h3><a href="$video-library-link.friendlyUrl">$section-title.data</a></h3>

<div id="$list" class="home-page-video">
	<div class="stats"></div>
	<div class="bio"></div>
	<div class="videos"></div>
</div>

<script type="text/javascript">
	AUI().use('jsonp', 'jsonp-url', 'querystring-parse','aui-loading-mask',function(A) {
			var container = A.one('#$list');
			var vlist = A.one('#$list div.videos');
			
			var toggleMask = A.one('#toggleMask');
			var wrapperNode = A.one('#test');
			
			container.plug(A.LoadingMask).loadingmask.show();
			
			var userName = '$username';
				videoType = '$video-type';
				displayUserInfo = '$display-user-info.data';
				includeVideos = '$include-video.data';
			
			function checkVideo(videoId, data){
				selectedVideos = data.split(',');
				for (var i = 0; i < selectedVideos.length; i++){
					if(videoId == selectedVideos[i]){
						//console.log('video is selected');
						return true;
					}
				}
			}
			
			if(videoType == 'vimeo'){
				var userInfoCallback = 'userInfo';
				var videosCallback = 'showThumbs';
		
				var userInfoUrl = 'http://vimeo.com/api/v2/' + userName + '/info.json';
				var videosUrl = 'http://vimeo.com/api/v2/' + userName + '/videos.json';
				
				function showThumbs(videos){
					//console.log(videos);
					var thumbs = A.one('#$list .videos');
						selectedVideoCount = 0;
					thumbs.html('');
					
					for (var i = 0; i < videos.length; i++) {
						var thumb = A.Node.create('<img>');
						thumb.attr('src', videos[i].thumbnail_medium);
						thumb.attr('alt', videos[i].title);
						thumb.attr('title', videos[i].title);
						videoId = videos[i].id;
						
						if(checkVideo(videoId, includeVideos)){
							selectedVideoCount = selectedVideoCount + 1
						}
					
						if(includeVideos == '' || checkVideo(videoId, includeVideos)){
							var h5 = A.Node.create('<h5>');
							h5.html(videos[i].title);
				
							var a = A.Node.create('<a>');
							a.attr('href', 'http://vimeo.com/' + videos[i].id);
							a.attr('alt', videos[i].title);
							a.attr('title', videos[i].title);
							
							if(!includeVideos && $display.data == i) break;
							
							if(includeVideos == " "){
								if($display.data <= i){
									a.addClass('aui-helper-hidden');
								}
							}else {
								//console.log(selectedVideoCount);
							}
				
							thumb.appendTo(a);
							h5.appendTo(a);

							var li = A.Node.create('<li>');
							a.appendTo(thumbs);
						}
					}
					
					var videolinks = A.all('#$list .videos a');
					
					videolinks.each(function(node, index){
						if(index >= $num-visible.data){
							//console.log(node);
							node.addClass('aui-helper-hidden');
						}
					});
					
					container.plug(A.LoadingMask).loadingmask.hide();
				}
				vimeovideo = new A.JSONPRequest(videosUrl, showThumbs);
				vimeovideo.send();
				
				function userInfo(info){
					var stats = A.one('#$list .stats');
					var portrait = info.portrait_small;
					var img = A.Node.create('<img>');
					img.attr('id', 'portrait');
					img.attr('src', portrait);
					img.attr('alt', info.display_name);
					img.appendTo(stats);
			
					var	h2 = A.Node.create('<h2>');
					A.Node.create(info.display_name + "'s Videos").appendTo(h2);
					h2.appendTo(stats);
					A.one('#$list .bio').html(info.bio);
				}
				userinfo = new A.JSONPRequest(userInfoUrl, userInfo);
				if(displayUserInfo == 'true'){
					userinfo.send();
				}
			}
		
			if(videoType == 'youtube'){
			
				var videosCallback = 'displayYoutube';
					userCallback = 'youtubeUserInfo';

				var youtubeUrl = 'http://gdata.youtube.com/feeds/users/'+ userName +'/uploads?alt=json-in-script&format=5&callback='+ videosCallback +'';
				var youtubeUserUrl = 'http://gdata.youtube.com/feeds/api/users/'+ userName +'?v=2&alt=json-in-script&format=5&callback='+ userCallback +'';
			
				youtubeVideo = new A.JSONPRequest(youtubeUrl, displayYoutube);
				function displayYoutube(data){
					var thumbs = A.one('#$list .videos');
						bio = A.one('#$list .bio');
						feed = data.feed;
						entries = feed.entry || [];
				
					thumbs.html('');
					
					for (var i = 0; i < entries.length; i++) {
					    var entry = entries[i];
							//console.log(entry);
							url = entry.link[0].href;
							thumbimage = entry.media$group.media$thumbnail[0].url;
							title = entry.media$group.media$title.$t;
							videoId = A.QueryString.parse(url.split('?')[1]).v;

								//console.log(videoId);
						if(includeVideos == '' || checkVideo(videoId, includeVideos)){
							var img = A.Node.create('<img>');
								img.attr('alt', title);
								img.attr('title', title);
								img.attr('src', thumbimage);
							
							var link = A.Node.create('<a>');
								link.attr('href',url);
								link.attr('alt',title);
								link.attr('title',title);
								img.appendTo(link);
							var h5 = A.Node.create('<h5>');
								h5.html(title);
								h5.appendTo(link);
							if($display.data <= i && includeVideos == " "){
								img.addClass('aui-helper-hidden');
							}
							link.appendTo(thumbs);
						}
				
					}
				}
				youtubeVideo.send();
			
				youtubeUInfo = new A.JSONPRequest(youtubeUserUrl, youtubeUserInfo);
				function youtubeUserInfo(userdata){
					var feed = userdata.entry;
						author = feed.author[0].name.$t;
						userprofileurl = feed.link[0].href;
						website = feed.link[1].href;
						thumbnail = feed.media$thumbnail.url;
					
						//console.log('feed',feed);
						//console.log('feed',author);
						stats = A.one('#$list .stats');
						bio = A.one('#$list .bio');
						A.Node.create('<h3>').html(author).appendTo(bio);
					
						var userPage = A.Node.create('<a>');
							userPage.attr('href', userprofileurl);
							userPage.html('User Profile Link');
							userPage.appendTo(bio);
					
						var link = A.Node.create('<a>');
							link.attr('href', website);
							link.html('website');
							link.appendTo(bio);
						
						var thumb = A.Node.create('<img>');
							thumb.attr('src', thumbnail);
							thumb.appendTo(bio);
						
						//console.log(userdata);
				}
				//console.log('displayUser Info:',displayUserInfo);
				if(displayUserInfo == 'true'){
					youtubeUInfo.send();
				}
			}
	});
	AUI().ready('aui-image-viewer', 'aui-media-viewer-plugin','event', function(A) {
		var mediaViewer = new A.ImageViewer({
			caption: 'AlloyUI - MediaViewer mixed demo',
			delay: 0,
			links: '#$list .videos a',
			infoTemplate: 'Video {current} of {total}',
			plugins: [
				{	
					cfg: {
						providers: '$video-type'
					},
					fn: A.MediaViewerPlugin
				}
			],
			preloadNeighborImages: true
		});
		mediaViewer.render();
	
	});
</script>