Prelimiary version of playlist loaded via JavaScript

23 · Feb 5, 2010 · d1a444a · d1a444a
1 parent c672642
commit d1a444a
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 0 deletions.
diff --git a/Playlist/README.markdown b/Playlist/README.markdown
@@ -0,0 +1,49 @@
+<h2>Video Carousel</h2>
+
+This code was originally implemented for <a href="http://www.syngforhaiti.dk">syngforhaiti.dk</a>, a Danish video site raising money of the victim of the Haiti earthquake in January 2010. The site displays a video element and a photo element -- both importing content via <a href="http://community.23video.com/help/Developer_JS">the Visualplatform JavaScript/JSON API</a> and displaying thumbnails as they are imported. (<a href="/23/DeveloperExamples/blob/master/VideoCarousel/screenshot-carousel.png">See screenshot</a>)
+
+With regard to 23 Video and Visualplatform, this example demonstrates how to...
+<ul>
+<li>Retrieve data from different video sites using the JSON API, using the callback method.</li>
+<li>Parsing the data and using it to build DOM/HTML in the client browser.</li>
+<li>Generating an embed code for 23 Video from a video's unique ID.</li>
+</ul>
+
+
+<h2>Code: Displaying carousel and opening videos in a lightbox</h2>
+    <link rel="stylesheet" type="text/css" href="videocarousel.css" />
+
+    <div id="videoBadge"></div>
+    <div style="clear:left"></div>
+      
+    <script>
+      var videobadge = {
+        containerName:'videoBadge',
+        domain:'www.syngforhaiti.dk',
+        size:300,
+        player_id:'',
+        player_width:'640',
+        player_height:'360',
+        params:[]
+      };
+    </script>
+    <script src="videocarousel.js"></script>
+
+You can limit the imported items by modifying the <tt>params</tt> property. For example, to limit to everything tagged "music" in the channel with id "12345":
+    params:['tag', 'music', 'album_id', '12345']
+
+<h2>Code: Displaying carousel and open up the 23 Video page on click</h2>
+    <link rel="stylesheet" type="text/css" href="videocarousel.css" />
+
+    <div id="videoBadge"></div>
+    <div style="clear:left"></div>
+      
+    <script>
+      var videobadge = {
+        containerName:'videoBadge',
+        domain:'www.syngforhaiti.dk',
+        size:300,
+        onclick:function(o){location.href='http://www.syngforhaiti.dk' + this.one;}
+      };
+    </script>
+    <script src="videocarousel.js"></script>
diff --git a/Playlist/playlist.css b/Playlist/playlist.css
@@ -0,0 +1,25 @@
+/* Carousel */
+.carousel-container {position:relative; width:800px;}
+.carousel-main, .carousel-left, .carousel-right {position:absolute; top:0; height:200px; }
+.carousel-main {left:40px; width:720px; background-color:black; position:relative;}
+.carousel-view {position:absolute; width:700px; height:200px; left:20px;}
+.carousel-left, .carousel-right {opacity:.8; cursor:pointer; width:40px; background-position:center 10px; background-repeat:no-repeat;}
+.carousel-left {left:0; background-image:url('scroll-left.png');}
+.carousel-right {right:0; background-image:url('scroll-right.png');}
+* html .carousel-left {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scroll-left.png', sizingMethod='crop');}
+* html .carousel-right {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scroll-right.png', sizingMethod='crop');}
+.carousel-left-hover, .carousel-right-hover {opacity:1;}
+.carousel-disabled {display:none;}
+
+/* Thumbnail styling */
+.video-item {position:relative; margin:20px 15px 0 0; width:160px; height:180px; overflow:hidden; float:left; font-size:11px; color:#999; line-height:15px; cursor:pointer;}
+.video-item-image {height:90px; overflow:hidden;}
+.video-item-image img {width:160px; height:90px;}
+.video-item-meta {}
+.video-item-title {padding-top:5px; line-height:20px; height:20px; overflow:hidden; font-size:11px; text-transform:uppercase; color:white;}
+.video-item-play {position:absolute; top:5px; left:6px; background:url('play-icon.png') top left no-repeat; width:12px; height:12px;}
+* html .video-item-play {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='play-icon.png', sizingMethod='crop');}
+.hover .video-item-play {background-image:url('play-icon-hover.png');}
+* html .hover .video-item-play {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='play-icon-hover.png', sizingMethod='crop');}
+.video-item-play * {display:none;}
+
diff --git a/Playlist/playlist.html b/Playlist/playlist.html
@@ -0,0 +1,36 @@
+<html>
+  <head>
+    <title>23 Developer Example: Playlist</title>
+    <link rel="stylesheet" type="text/css" href="../lib/base.css" />
+    <link rel="stylesheet" type="text/css" href="playlist.css" />
+  </head>
+  <body>
+    <div id="frame">
+
+      <div id="playlist" class="playlist">
+        <div class="playlist-tabs">
+          <a class="playlist-tab" onclick="$$('.playlist-new').each(Element.show); $$('.playlist-popular').each(Element.hide);">Nyeste</a>
+          <a class="playlist-tab" onclick="$$('.playlist-popular').each(Element.show); $$('.playlist-new').each(Element.hide);">Popul&aelig;re</a>
+        </div>
+        <div id="playlistContent" class="playlist-content">
+      </div>
+
+      <div id="embedContainer"></div>
+
+      <script>
+        var playlistConfig = {
+          playlistContainer:'playlistContent',
+          embedContainer:'embedContainer',
+          domain:'midspar.23video.com',
+          size:20,
+          truncate_title:30,
+          player_id:'',
+          player_width:'640',
+          player_height:'360',
+          params:[]
+        };
+      </script>
+      <script src="playlist.js"></script> 
+    </div>
+  </body>
+</html>
diff --git a/Playlist/playlist.js b/Playlist/playlist.js
@@ -0,0 +1,81 @@
+// Get a generic embed code for video on the domain
+// ie. 
+//   getEmbed('photo_id', 789, 'token', '456asd5as67d')
+// or
+//   getEmbed('tag', 'screencasts')
+function getEmbed(config, x) {
+  var flashvars = [];
+  for(var i=1; i<arguments.length; i+=2) {
+    flashvars.push(encodeURIComponent(arguments[i]) + '=' + encodeURIComponent(arguments[i+1]));
+  }
+  var swf = (config.player_id.length>0 ? config.player_id + '.swf' : 'v.swf');
+  return('<object width="'+config.player_width+'" height="'+config.player_height+'" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" style="width:'+config.player_width+'px; height:'+config.player_height+'px;"><param name="movie" value="http://' + config.domain + '/' + swf + '"></param><param name="FlashVars" value="'+flashvars.join('&')+'"></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://' + config.domain + '/' + swf + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'+config.player_width+'" height="'+config.player_height+'" FlashVars="'+flashvars.join('&')+'"></embed></object>');
+}
+
+// Formats secs as mins:secs
+function formatTime(secs) {
+  var min = Math.floor(secs/60.0);
+  var sec = Math.floor(secs%60);
+  var sec_padding = (sec<10 ? '0' : '');
+  return min+':'+sec_padding+sec;
+}
+
+
+// Build content in the container by looping through the json object
+function buildVideoPlaylist(o, className, config) {
+    config = config || playlistConfig;
+    var playlistContainer = document.getElementById(playlistConfig.playlistContainer);
+    var embedContainer = document.getElementById(playlistConfig.embedContainer);
+
+    var group = new Element('div', {'className':className});
+    playlistContainer.appendChild(group);
+
+    for(var i=0; i<o.photos.length; i++) {
+        var video = o.photos[i];
+
+        // The item itself
+        var item = new Element('a', {className:'playlist-item', href:'#', rel:video.photo_id});
+        item.observe('click', function(e){
+            embedContainer.innerHTML = getEmbed(config, 'photo_id', this.getAttribute('rel'));
+            Event.stop(e);
+          });
+        group.appendChild(item);
+
+        // Thumbnail
+        var thumb = new Element('div', {'className': 'playlist-thumb'});
+        var thumb_image = new Element('img', {src:'http://' + config.domain + video.quad50_download});
+        thumb.appendChild(thumb_image);
+        item.appendChild(thumb);
+
+        // Title
+        var title = document.createElement('div', {'className': 'playlist-title'});
+        if (video.content_text.length>config.truncate_title) {
+            title.innerHTML = video.content_text.substring(0,config.truncate_title) + '...';
+        } else {
+            title.innerHTML = video.content_text;
+        }
+        item.appendChild(title);
+    }
+}
+function buildVideoPlaylistNew(o, config) {
+    config = config || playlistConfig;
+    buildVideoPlaylist(o, 'playlist-new', config);
+}
+function buildVideoPlaylistPopular(o, config) {
+    config = config || playlistConfig;
+    buildVideoPlaylist(o, 'playlist-popular', config);
+}
+
+function loadVideoPlaylist() {
+    // Load the data for the playlist
+    var args = [];
+    playlistConfig.params = playlistConfig.params||[];
+    for(var i=0; i<playlistConfig.params.length; i+=2) {
+        args.push(encodeURIComponent(playlistConfig.params[i]) + '=' + encodeURIComponent(playlistConfig.params[i+1]));
+    }
+
+    document.write(unescape("%3Cscript src='http://"+playlistConfig.domain+"/resources/um/script/protoculous/prototype.js' type='text/javascript'%3E%3C/script%3E"));
+    document.write(unescape("%3Cscript src='http://"+playlistConfig.domain+"/js/photos?orderby=uploaded&order=desc&"+args.join('&')+"&size="+playlistConfig.size+"&callback=buildVideoPlaylistNew' type='text/javascript'%3E%3C/script%3E"));
+    document.write(unescape("%3Cscript src='http://"+playlistConfig.domain+"/js/photos?orderby=views&order=desc&"+args.join('&')+"&size="+playlistConfig.size+"&callback=buildVideoPlaylistPopular' type='text/javascript'%3E%3C/script%3E"));
+}
+if(typeof(playlistConfig)!='undefined'&&playlistConfig.playlistContainer) loadVideoPlaylist();