add page for google IO videos
this is a scrappy page with inline styles and such as a first iteration.
plan is to clean this up and make it extensible later
Change-Id: I3351f6d79f42b807b84540e1c00092440d9b83d8
diff --git a/docs/html/channels/io2013.jd b/docs/html/channels/io2013.jd
new file mode 100644
index 0000000..f1ae585
--- /dev/null
+++ b/docs/html/channels/io2013.jd
@@ -0,0 +1,341 @@
+fullpage=true
+page.title=Google I/O 13
+@jd:body
+
+<style>
+
+#ioplayer-frame {
+ z-index:10;
+ width:703px;
+ height:396px;
+ margin:0;
+ position:relative;
+}
+
+#noplayer-message {
+ position:absolute;
+ top:50%;left:0;
+ width:100%;
+ z-index:-1;
+ text-align:center;
+ display:none;
+}
+
+h1 {
+ font-weight:100;
+ font-size:40px;
+ line-height:30px;
+ margin:30px 0 10px 0px;
+ color:#000;
+}
+
+h2 {
+ font-weight:100;
+ font-size:30px;
+ line-height:30px;
+ margin:12px 0 10px 0px;
+ color:#000;
+ float:left;
+ display:block;
+}
+
+.col-4 h2 {
+ margin-top:40px;
+}
+
+ul.videos {
+ list-style:none;
+ margin:0;
+ width:auto;
+}
+ul.videos li {
+ display:block;
+ float:left;
+ position:relative;
+ margin:0 2px 2px 0;
+ background-repeat:no-repeat !important;
+ background-size:320px auto;
+ background-position:10% 50%;
+}
+ul.videos li a {
+ color:#fff !important;
+ display:block;
+ margin:0;
+ padding:8px 12px;
+ width:209px;
+ height:134px;
+ box-shadow:inset 500px 500px 999px rgba(000, 000, 000, 0.2);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.8)), color-stop(1, transparent));
+ background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8), transparent);
+ background-image: -moz-linear-gradient(top, rgba(0,0,0,0.8), transparent);
+ background-image: -o-linear-gradient(top, rgba(0,0,0,0.8), transparent);
+ background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
+}
+ul.videos.featured li {
+ margin:0 0 2px;
+}
+ul.videos.featured li a {
+ margin:0;
+ height:115px;
+}
+ul.videos li a:hover {
+ box-shadow:inset 500px 500px 999px rgba(255,255,255, 0.6);
+}
+ul.videos li h4 {
+ text-shadow:1px 1px 0 rgba(0,0,0,0.8);
+ font-size:18px;
+ line-height:22px;
+ color:inherit;
+ margin:0;
+}
+
+ul.videos li .description-frame {
+ display:none;
+}
+ul.videos li a:hover .description-frame {
+ display:block;
+ position:absolute;
+ top:80px;
+ left:8px;
+ z-index:99;
+}
+ul.videos .description {
+ background:#fff;
+ width:200px;
+ padding:8px;
+ -webkit-border-radius:1px;
+ -moz-border-radius:1px;
+ border-radius:1px;
+ -moz-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
+ -webkit-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
+ box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
+ font-size:11px;
+ line-height:12px;
+ color:#000;
+ overflow:hidden;
+}
+ul.videos .arrow-up {
+ position:absolute;
+ left:15px;
+ top:-11px;
+ width:0;
+ height:0;
+ border-bottom:12px solid #fff;
+ border-left:12px solid transparent;
+ border-right:12px solid transparent;
+}
+ul.videos .arrow-down {
+ position:absolute;
+ left:15px;
+ bottom:-11px;
+ width:0;
+ height:0;
+ border-top:12px solid #fff;
+ border-left:12px solid transparent;
+ border-right:12px solid transparent;
+}
+
+ul.videos span.tag {
+ font-size:.9em;
+ font-weight:normal;
+ display: block;
+ position: absolute;
+ bottom: 0;
+ color: #fff;
+ left: 0;
+ padding: 4px;
+ border-top-right-radius:4px;
+ text-transform:uppercase;
+ text-shadow: none;
+}
+ul.videos span.tag.design {
+ background-color:rgba(51, 181, 229, .7);
+}
+ul.videos span.tag.develop {
+ background-color:rgba(255, 136, 0, .7);
+}
+ul.videos span.tag.distribute {
+ background-color:rgba(153, 204, 0, .7);
+}
+
+</style>
+
+
+
+
+
+
+
+<div class="wrap">
+
+ <div class="col-12" style="width:704px;margin:0">
+ <h1>Android @ Google I/O 13</h1>
+ <div id="ioplayer-frame">
+ <div id="noplayer-message">
+ <!-- busted flash player message -->
+ Your video is supposed to appear here.<br/>
+ Make sure you have the <a href="//get.adobe.com/flashplayer/" target="_blank">Flash® Player</a>.
+ </div>
+ <div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
+ </div>
+ </div>
+
+ <div class="col-4" style="margin:0;width:234px;padding:0 0 0 2px">
+ <h2 class="norule">Most Popular</h2>
+ <ul class="videos featured" id="playlist2">
+ </ul>
+ </div>
+</div>
+
+<div class="wrap">
+
+ <div style="position:absolute;width:940px;text-align:right">
+ <a href="//www.youtube.com/AndroidDevelopers" target="_blank">
+ More on YouTube
+ <img src="//www.youtube.com/favicon.ico" style="border:0;width:16px;height:16px;vertical-align:middle;margin:0 2px 3px 2px">
+ </a>
+ </div>
+ <div style="width:944px;overflow:hidden;padding:0 0 20px">
+ <h2 class="norule">All Videos</h2>
+ <ul class="videos" id="playlist1" style="clear:left">
+ <span id="videos-design"></span>
+ <span id="videos-develop"></span>
+ <span id="videos-distribute"></span>
+ </ul>
+ </div>
+
+</div>
+
+<br class="clearfix"/>
+
+
+
+
+
+
+
+
+
+
+
+<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
+<script type="text/javascript">
+
+/* Load a video into the player box.
+ * @param id The YouTube video ID
+ * @param title The video title to display in the player box (character escaped)
+ * @param autoplay Whether to automatically play the video
+ */
+function loadVideo(id, title, autoplay) {
+ var url = '//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1' + (autoplay?'&autoplay=1':'');
+ swfobject.embedSWF(url, 'player', '704', '397', '9.0.0', false, false, {allowfullscreen: 'true'});
+ $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
+ setTimeout(function(){$('#noplayer-message').show()}, 2000);
+ $("body").animate({ scrollTop: 0 }, "slow");
+}
+
+
+function buildPlaylistDesign(data) {
+ buildPlaylist(data, $('ul#playlist1 #videos-design'), "design");
+}
+
+function buildPlaylistDevelop(data) {
+ buildPlaylist(data, $('ul#playlist1 #videos-develop'), "develop");
+}
+
+function buildPlaylistDistribute(data) {
+ buildPlaylist(data, $('ul#playlist1 #videos-distribute'), "distribute");
+}
+
+function buildPlaylist2(data) {
+ buildPlaylist(data, $('ul#playlist2'));
+}
+
+function buildPlaylist(data, ul, tag) {
+
+ var MAX_DESC_LENGTH = 200; // the length at which we will trim the description
+ var feed = data.feed;
+ var entries = feed.entry || [];
+ var playlistId = feed.yt$playlistId.$t;
+
+ // Loop through each entry (each video) and add it to the '#DevelopersLive' list
+ for (var i = 0; i < entries.length; i++) {
+ var entry = entries[i];
+ var title = entry.title.$t;
+ var id = entry.media$group.yt$videoid.$t;
+ // get 180x320 thumbnail
+ var thumbs = entry.media$group.media$thumbnail;
+ var thumbUrl;
+ for (var j = 0; j < thumbs.length; j++) {
+ if (thumbs[j].yt$name == "hqdefault") {
+ thumbUrl = thumbs[j].url;
+ }
+ }
+
+ // chop out the google io title
+ title = title.substr(title.indexOf("-") + 1, title.length);
+
+ var fullDescription = entry.media$group.media$description.$t;
+ var playerUrl = entry.media$group.media$content[0].url;
+ var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
+ // further shorten description if there's a url (remove it)
+ var httpindex = shortDescription.indexOf("http://");
+ if (httpindex != -1) {
+ shortDescription = shortDescription.substring(0,httpindex);
+ }
+ shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
+
+ var a = $('<a href="#" id="' + id + '" '
+ + 'onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" >');
+ var pShortDescription = $('<div class="description-frame"><div class="arrow-up"></div>'
+ + '<div class="description">' + shortDescription + '</div></div>');
+ var h4Title = "<h4>" + title + "</h4>";
+ var li = $('<li style="background-image:url(\'' + thumbUrl +'\')">');
+
+ li.append(a);
+ a.append(h4Title).append(pShortDescription);
+
+ if (tag !== undefined) {
+ var $tag = $('<span class="tag ' + tag + '">' + tag + '</span>');
+ a.append($tag);
+ }
+
+ ul.append(li);
+
+
+ // put the first video in the player
+ if ((tag == "design") && (i == 0)) {
+ loadVideo(id, escape(title), false);
+ }
+ }
+}
+
+
+/* Request the playlist feeds from YouTube */
+function showDevelopersLivePlaylist() {
+ var playlistId = "PLWz5rJ2EKKc-qVhMuAprIFYFbCotdgJKq"; /* IO 13 - Design */
+ $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ + playlistId +
+ "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDesign&orderby=position");
+
+ playlistId = "PLWz5rJ2EKKc9rkwO9yBosRvkQBJd5utmR"; /* IO 13 - Develop */
+ $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ + playlistId +
+ "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDevelop&orderby=position");
+
+ playlistId = "PLWz5rJ2EKKc-1WjgQqL0B4OQtbLfhMlB2"; /* IO 13 - Distribute */
+ $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ + playlistId +
+ "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDistribute&orderby=position");
+
+
+ playlistId = "PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"; /* IO 13 - The Android Sessions */
+ $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ + playlistId +
+ "?v=2&alt=json-in-script&max-results=3&callback=buildPlaylist2&orderby=viewCount");
+}
+
+showDevelopersLivePlaylist();
+
+
+</script>
\ No newline at end of file