Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 896f61d9 authored by Scott Main's avatar Scott Main
Browse files

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
parent 27ab718e

docs/html/channels/io2013.jd

0 → 100644
+341 −0
Original line number Diff line number Diff line 
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&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'});

  $("#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