html/channels/io2013.jd

fullpage=true
page.title=Google I/O 13
@jd:body
<div id="butterbar-wrapper" >
  <div id="butterbar" >
    <div id="butterbar-message">
<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/1EHLPGqhbxj2HungHRRN4_0K9TGpc-Izy-u46vBDgS8Q/viewform">
      Take the Android Developer Survey</a>
    </div>
  </div>
</div>

<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%;
  z-index:1; /* IE: the description is 2 */
}
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);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
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:#fff;
  margin:0;
  height:100%; /* IE: to fill clickable area */
}

ul.videos li .description-frame {
  display:none;
  z-index:2; /* IE: the li is 1 */
}
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);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33b5e5', endColorstr='#cc33b5e5',GradientType=0 ); /* IE6-9 */
}
ul.videos span.tag.develop {
  background-color:rgba(255, 136, 0, .7);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccff8800', endColorstr='#ccff8800',GradientType=0 ); /* IE6-9 */
}
ul.videos span.tag.distribute {
  background-color:rgba(153, 204, 0, .7);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc99cc00', endColorstr='#cc99cc00',GradientType=0 ); /* IE6-9 */
}

</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&reg; 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'});
  $('body,html').animate({ scrollTop: 0 }, "slow");
  setTimeout(function(){$('#noplayer-message').show()}, 2000);
}


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>