Changeset 1944

Timestamp:

08/09/11 08:13:37 (22 months ago)

Author:

jeroen

Message:

wrapped HTML5 version of related plugin

Location:

plugins/related

Files:

• assets/close.png (modified) (previous)
• assets/notset.png (added)
• assets/related.png (added)
• assets/replay.png (modified) (previous)
• assets/sheet.png (modified) (previous)
• build/build.xml (modified) (1 diff)
• doc/assets/related_dimensions.png (added)
• doc/assets/related_example.png (modified) (previous)
• doc/assets/related_iphone.png (deleted)
• doc/guide.html (modified) (4 diffs)
• related.js (modified) (1 diff)
• related.swf (modified) (previous)
• src/as/Related.as (modified) (12 diffs)
• src/as/RelatedThumb.as (modified) (8 diffs)
• src/js/related.js (modified) (2 diffs)
• src/js/related.thumb.js (added)
• test/assets/empty.xml (added)
• test/assets/malformed.xml (added)
• test/assets/screencasts.xml (modified) (1 diff)
• test/css.html (added)
• test/dimensions.html (modified) (5 diffs)
• test/errors.html (added)
• test/index.html (modified) (1 diff)
• test/options.html (modified) (3 diffs)
• test/recursion.html (deleted)

plugins/related/build/build.xml

@@ -2 +2 @@
 
     <target name="buildJS">
+        <concat destfile="../related.js">
+            <fileset dir="../src/js" includes="*.js" />
+        </concat>
         <java jar="yuicompressor.jar" fork="true">
-            <arg line="'../src/js/related.js'"/>
+            <arg line="'../related.js'"/>
             <arg line="-o '../related.js'"/>
         </java>

plugins/related/doc/guide.html

@@ -30 +30 @@
 <p><img alt="Related Example Player" src="assets/related_example.png" style="margin-left: 10px" /></p>
 
-<p>The list of related videos is loaded using an mRSS feed. The plugin automatically renders up t0 2 rows of up to 5 related videos, depending upon how many fit the screen. Buttons for re-playing the video and for closing the overlay are shown in the top corners.</p>
+<p>The list of related videos is loaded using an mRSS feed. The plugin automatically renders up to 2 rows of up to 5 related videos on the screen. Buttons for re-playing the video and for closing the overlay are shown in the top corners.</p>
 
 <p>The plugin works in both Flash and HTML5, including touch devices like the iPad/iPhone and Android.  When using a playlist, every entry can have its own related videos.</p>
@@ -41 +41 @@
 
 <dl>
-<dt><strong>related.file</strong> ( <em>undefined</em> )</dt>
+<dt><strong>file</strong> ( <em>undefined</em> )</dt>
 <dd>Location of the mRSS file with related videos, e.g. <strong>http://example.com/related.xml</strong>.</dd>
-<dt><strong>related.oncomplete</strong> ( <em>true</em> )</dt>
+<dt><strong>oncomplete</strong> ( <em>true</em> )</dt>
 <dd>Whether to display the related videos screen when the video is completed. When set <strong>false</strong>, the screen does not automatically pop up.</dd>
-<dt><strong>related.usedock</strong> ( <em>true</em> )</dt>
+<dt><strong>usedock</strong> ( <em>true</em> )</dt>
 <dd>Whether to add a button to the player to pop up the related videos screen manually. When set <strong>false</strong>, this button is omitted.</dd>
-<dt><strong>related.heading</strong> ( <em>Watch related videos</em> )</dt>
+<dt><strong>heading</strong> ( <em>Watch related videos</em> )</dt>
 <dd>Single line heading displayed above the grid with related videos. Generally contains a short call-to-action.</dd>
+<dt><strong>titles</strong> ( <em>true</em> )</dt>
+<dd>Whether to show the titles over the thumbs or not. When set <strong>false</strong>, only the thumbnail images are shown.</dd>
+
 </dl>
 
@@ -110 +113 @@
 
 
+<h2>Thumbnail dimensions</h2>
+
+<p>By default, the thumbnails in the related videos screen are 140px wide by 70px high. The plugin will automatically render as many thumbs as fit the screen, with a maximum of 5 columns and 2 rows. A 10px spacing is used in between the thumbs:</p>
+
+<p><img alt="Related Thumb Dimensions" src="assets/related_dimensions.png" style="margin-left: 10px" /></p>
+
+<p>These dimensions can be changed by setting a configuration option: <strong>dimensions</strong>. This option needs to be a comma-separated list of the <em>width</em>, <em>height</em>, <em>columns</em> and <em>rows</em>. for example:</p>
+
+<ul>
+    <li>Setting the dimensions option to <strong>"120,70,5,3"</strong> will render fairly small (120x70 pixels) thumbnails in up to 5 columns and 3 rows.</li>
+    <li>Setting the dimensions option to <strong>"200,120,2,1"</strong> will render up to two (one row, 2 columns) fairly large (200x120 pixels) thumbnails.</li>
+</ul>
+
+
+<h2>Device Support</h2>
+
+<p>On touch devices (iPhone, iPad, Android), the related plugin fully functions, with one exception: the Related dock button is not available when the video is playing. This because no custom controls can be shown when a video plays in fullscreen.</p>
+
+<p>Before and after playback, the player is displayed inline in the page and the related videos screen is available.</p>
+
+
 
 <h2>Playlist Support</h2>
@@ -164 +188 @@
 
 
-
-<h2>Device Support</h2>
-
-<p>On touch devices (iPhone, iPad, Android), the related plugin fully functions, with one exception: the Related dock button is not available when the video is playing. This because no custom controls can be shown when a video plays in fullscreen.</p>
-
-<p>Before and after playback, the player is displayed inline in the page and the related videos screen is available:</p>
-
-<p><img alt="Related on iPhone" src="assets/related_iphone.png" style="margin-left: 10px" /></p>
-
-
-
 <h2>Changelog</h2>
 

plugins/related/related.js

@@ -1 @@
-(function(a){var b=function(e,d,c){this.resize=function(g,f){}};a().registerPlugin("related",b,"./related.swf")})(jwplayer);
+(function(a){var b=function(e,t,w){var l;var g;var i;var q;var v;var u;var s;var j={cursor:"pointer",position:"absolute",left:"0px",top:"0px",margin:"0px",padding:"0px",display:"block",width:"50px",height:"50px"};var n={backgroundImage:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAGQCAYAAACJccGfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJlJREFUeNrskksKwDAIRFV6/+v1Nv0sQymkBD+jVchGdOY5hIlop6GEHrXd75hOnNqNIA5Y0cQaPisLGiZgQbbzFdhrS0/ksUUhhb02aKW0Rh6w0i55OCqRdmLd6Mb4C7nzKJkYCqkPh4nLv0QXNIJsg9BRVkpz+Nj6oKOQ+qSuYZuH9HVCcka4qCEgiYnLtWze+Garfu0lwAArHE4YPfyZuAAAAABJRU5ErkJggg==)",backgroundRepeat:"no-repeat",backgroundSize:"100% 100%",opacity:0,webkitTransition:"opacity 150ms linear",MozTransition:"opacity 150ms linear",msTransition:"opacity 150ms linear",transition:"opacity 150ms linear",cursor:"pointer",visibility:"hidden"};var o={position:"absolute",border:"none",color:"#FFF",display:"block",font:"16px/24px Arial,sans-serif",overflow:"hidden",width:"240px",margin:"0 0 0 0",textAlign:"center",textTransform:"none",textShadow:"#000 1px 1px 0",padding:"0 0 0 0"};var z="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAArlJREFUeNrsWe1xozAQhZv8hw7sDkQH5CpwOnA6oATSQdIB7sC5CshVgFMBuQqcq0BZzT3N7SiAFiw7nol2ZkcyWi16Wn28xUkSJUqUKN9CtNYlaUPa68/So01BvXanjiddAGBFxY70lvRA+kz64piZtnvSNX6/oc+Q3R1pgbb7NE3/XCIKG9IjaWciIrTrUd94otv57EKC0FgKmdCuQr1FOQUmQx99NjBmOWG2Gqkd6RaD2rIBHrE0p3w0ErulQMyMdlI7FgkOorbREfjpJHZzQSgMoBTaNQMgKrYHtO+Uwp7xvnMukEYYjYYdq2MgSskSZVFpQgIxp04ttPOB6Oz9IfBXS+zmABGFmA18CkRnDwHhhatDgchmAuk8IOzSunogEhB2w68uBmTB0qo9IDp7DF80Igs3+xSI6is3+9zj1wdCf9XxWwovxJJR89FIzLwQVRJSZlIU7bBfC2IvoR44YMJTlIWkUTsgGikZPCtpXEjjWxaJ5ipo/AmJ1VGSMIVIrG5m5cVp+oteVNi0lepjqa6xeUeqWyDVLcj+3ZPqFhdJdQdoe6iPD2USJUqUKFFOSMLUGfyqKSZxDiClgBCaG79aQFi998yPmcRROQNfeSJUOlEyN3g+YJONTEwWerZ7psrSbJ498ogwrtWirFmOYZMvhf7Wz4ZNWM8+gPfBbn6e5FD5aJcHZrRnM2uBVGxgG/a8ZsA75lPZfAf+a+b/GHRpEZl7ZcvjCR8GODHkYojkLQDsRlyaPgf4OTAflkCad/5FWxIMCBMz+LsUYoBQ8duxeYHdQ/LvD58xPzn3w58zuzw4jWez/YAvNWvU145NDuqeAwyn72tsYuNnR/Wn5P+/Wz8RQeu/GIj2aTm783uLTbp31vkj3xdoN/U9s2nxLMOead2sk/WvsWdUEiVKlChRrlE+BBgA99ZhJqocsJoAAAAASUVORK5CYII=";var A="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAytJREFUeNrsWC2T2zAQdToBAQUGBYaGgYGBBgUGBwwPHAg8UFB4P+VgQMGBgoMGBQcLAw0NCgwKDAoMOpPuJk/TrWpL68S5Xue0Mxp/PUt6q11pd6MoSJAgQf4nmZ36436/T+myosbX2PrcUqupfcXz2oebzWbNsxIhAjyZAhPjwStMRoohGYsJ7wZwS2oJvj0SofbiRIjEEiR4sJIGrRW4d9R+YpKVY3VzEB/EueTNSBLXWIGth4TB8SosqP2gdoNvf2vz2NcW/1wP4c4mIsxpR4OyxjofDqbCWv5M7RvMpwCmj0zHfePfQdy5K3IwEwzkxcF3+P5R+MsnmE7htPXjGK0PN5oIaSbBZEolrsFKSBIlnPrg4MC6pAQunXJFeOtshnzCwr3FxG0SZge7h8+sPatSQyGrKYmkcEINbuEg8YCVmuO7TyolTk0k7tn/h3A+EhGcX+PItRI3bvtVytJDohzrxP+KSOohwedLJ7bqF0vki4dEa+KvU0ORc4i0Sqdj3HsPCT7srnCvWd12SiK1OAN8uLmHRC6wGn+rpyTCE0gUh9MOE75xkOD77yK8d6UIiQ83iggOp1po04dj03rqIVHB0WtX7kEkFsDXY3IUrbPz+RDTIIUCxxr/YJHYgYQ5a1ySK3HjiWCH4Y5XTAZac+FanPJXIipYuRIn7hOKWp2SYF06sYqFuV00sXqdqW5P2O4tKiiLDztFdB0kSJAgQV6J8KGpiMtUkQS19eQZIh+Cdk0KMVJqxV/xUOFgAG/I26lCgpjNK3MlgQ067JCbHOIhEVM1eP+AE3qD/zJ6frKiARPeM5lDDZmuHM5k/B4h0BaKyPBfPcnJz0R4UmK5zURvjRah5Vtxv+npJzMmh35irNBHs0JsStRygc8mWxErPZUF7MRoCpr1lUI5cGSl3CHYbGA+rP07eh+NSIVPJtInHWuSK+nQaOfDR8eyqTGbHNkkl2TvRYb47OUg1moB8yqiP0uri57aVQ6cId0hnV3AjFL4l9ypYg05LZFGaLvDsykwNNBuE/2u2DdwaLsIXeL/TDxHlnNXYoOo8D6NggQJEiTIS5RfAgwAwPzrJ/KrwvYAAAAASUVORK5CYII=";var B=function(){if(q){e.pause(true);w.style.visibility="visible";w.style.opacity=1;try{e.getPlugin("display").hide();e.getPlugin("dock").hide()}catch(C){}}};function y(C){if(t.oncomplete!==false){setTimeout(B,50)}}function k(C){if(C==q){console.log("RELATED: Failed to load "+C)}else{console.log("RELATED: "+C)}q=undefined;u.innerHTML="";d();if(t.usedock!==false){e.getPlugin("dock").setButton("related",B,A)}}function d(C){setTimeout(r,200);w.style.opacity=0;try{e.getPlugin("display").show();e.getPlugin("dock").show()}catch(D){}}function r(){w.style.visibility="hidden"}function p(D){q=undefined;u.innerHTML="";d();var C=e.getPlaylist()[D.index];if(C["related.file"]){q=C["related.file"]}else{if(t.file){q=t.file}}if(q){if(t.usedock!==false){e.getPlugin("dock").setButton("related",B,z)}a.utils.ajax(q,f,k)}else{k("No related videos file found")}}function f(D){var J=[];var K=[];try{J=a.utils.parsers.rssparser.parse(D.responseXML.firstChild)}catch(I){k("This feed is not valid XML and/or RSS.");return}for(var H=0;H<J.length;H++){if(J[H].image&&J[H].link&&J[H].title){var G={link:J[H].link,image:J[H].image};if(t.titles!==false){G.title=J[H].title}K.push(G)}}if(K.length){var E=0;var L=0;for(var F=0;F<K.length;F++){var C=a.related.thumb(i[0],i[1],K[F].image,K[F].link,K[F].title);u.appendChild(C);m(C,{left:((i[0]+10)*E)+"px",top:((i[1]+10)*L)+"px"});i[6]=Math.max(i[6],i[0]*(E+1)+10*E);i[7]=Math.max(i[7],i[1]*(L+1)+10*L);if(E==i[2]-1||(i[0]+10)*(E+2)>i[4]){if(L==i[3]-1||(i[1]+10)*(L+2)>i[5]-40){break}else{L++;E=0}}else{E++}}c(i[4],i[5])}else{k("RSS feed has 0 entries that contain title,link and image.")}}function h(){if(e.getRenderingMode()=="flash"){return}e.onPlaylistItem(p);e.onComplete(y);m(w,n);w.onclick=d;s=document.createElement("div");m(s,j);m(s,{background:"transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABKhJREFUeNrsWF1IY1cQvtGsVruSoCiKoqH+FVFvQClBxITimw/aLir4orCgxRfz5pOkqa9K1lSs+tCksKKomAgSlJImBRHqi0YRKihJ4y8oXuuu/z/TmXDvchH3p5uke6X3gyFzT85Jzndm5szMZRgZMmTIkCFDhoz/FwBAjfIM5bvHSkCJwgaDwd84jgOLxQI4vPSYCChQMq+vr394jUAdTk9Pwel0QklJCcTHx3/zGEh8jvLt1dXVKjwAsszY2Ngrq9X67FEQWVtbO4e34O7uDjY2NmBkZKRX8q6VmZkJZrMZDg4O3sYH1tfXoauryy51L2uOi4sDnU4Xio2TkxNwuVwwODgINzc3ISKXl5ehsZycnJeR+tPYKBDx3d7eBra3tw2zs7OfraysMKgzAwMDDF4CTFVVFRMbG8skJCQwaLXSxcVFNa6ZC/dPlVGyyi8o3uPjY83U1JRCqVQSCcDnL30+348syz5Rq9WMVquluVopxMRTlHKUr1G+QlG9Z36G2+3+ldzr4uICJicnKb94IrGXmDDXF+OG3Pjp3tra+qO9vf34PRu7zsrK+pMUhUIRcrFIIVwi15g3TklJSkpiCgoKSFW/Y74KA72CFIwj5uzsTDJEuL29vU2BSHl5OZOXl0c+zz7gVvEYJyXZ2dmhmDg/P2d2d3clkzeejo6O/oSnG7pW8YQBgxuQjI9OXzTvCYoBb689IZesrq5CZWVlxGIkbNTU1Jimp6ffJDt0NcDsDg6H43d8bEJ5jvIz5pBdYc7R0RH09vYSCekQSU9P/6Kpqekl5gv4EJDV6LZKS0sTKmJWMqk8MTHRgDkBMAG+kwRZor+/H5KTkwVr2KRYmthUKhU0NjbCzMwMbG5uwv7+PmBAh+JheHgYKioqAK9cgYRfHEdSgop3FfhAYRkZMmSIk6ceJWo5I+a/JOP1eg3RSoAx/+JEWRQLvUdAWeLHLHyK8KPU8mPNKCZ+jGB54LeaRd/TZw5vMZNoTq34OZIWoarWiE2RNzc3V9PZ2cnRGJbjLzAZajiOox6cyGiwgfoeC0hvfn5+AGGsr6+/T8bY1tbmxbUBbIc1VqvV29DQQC2AEdtfYfMtPT09VGCaIu7jHo9HyAF0gp7Dw0M/jZFOlqquriZrmfgXchw/z4SAvr6+Dn49zVW1trZyc3NzDrIIfU8bRt3W0dFBC2gdpKamkhs2R6vV9aL8RUp3d7dmeXmZVPJ9hvSJiQkDWoQe7cI8wvz8fF1paSmTkpJClg2YzWbv+Pi4lvoSEV4YjcYW7O+dWBU4saevw7G6aAe702AwMDs7O0bcoNFut1MvUqfT6ZZbWloYvV5/TL5PLrKwsOB801IWF5O7BIqKigxDQ0OBjIwMjfAduppPo9EsY6epRbcSDuPvaLmWh39WYVPlEF4k4ulSHPiDwaAFS3jw+0OxzOEa8nH/PdfyCIFOv2Gz2UCIBboI6K0kX4vVRusG1d+7PlV8BSvERLMQE6g7+M1wIj8Xr/eIikebUAnTepfLJaz7pIlPIGL6iLVkYa6srMz2yUt8igt+Ix9DhC0sLFwSbjwpVCQ5YWyElQoJGTJkSBD/CDAA0ma8tkQpWYgAAAAASUVORK5CYII=)"});s.onclick=x;w.appendChild(s);g=document.createElement("div");m(g,j);m(g,{background:"transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0xJREFUeNrsVz1IW1EUjtKtQyh0yRQr2kFCIlHB7cUMBhpCXKKY5UVBnfwZWgUppFvHOEUkg84ucXBxeg1ChiKmUCQ0EV+K1Q4BnyKImujtOem95fp8pvTHeIX7weHlnXNeON+955x7rs0mISEhISEhISEh0UgQQoIgOyBvfuPnBvkM8lZEEiHCYWpqioA6buHnrVQqVeY3MzODfglhiFxfX1eICX19fRikypF4fnV1VTX7oQnELgSR9fX198QC/f39p2D2wM+nZ2dnJbN9aGiIEVFE2RRlcHCQwIrfIjMxMVG+vLz8aNZHIhFGQigimBqK1+vNn5yckHo4Pz8n4McI5EQicYNQR0fHzt7eniWJ3d1d4na7eRJ2m8Cw+/3+L1ZEVFV9NCSwOz07PDwsWhEBPenu7r7RzUQl8bJarX6tVyMXFxckEAgUhN0RiNEP58mNtgUtl8RiMbK/v3+L0MjIiC4cGYjrlTlQbMVdXV21mnA6neTo6OguMuIAVv67Ocienh5W2Bis4nK5vlmlmlDnyNLS0ms+uPHxcRaggSc7dfOEQqFT3m92dla8AxGCJNvb23xwKGGTnxoMBkmhUCDz8/O8n1C1kuACs5x+KeImv4RNQkLiUd3ZNZAHaaPN//sPfT7fh4c4E5r/YfXjIAY91xJ17CjTnD5Bv9FBwlRnp7tJ6NPTqBTCO7gOc9Rya2uroes66e3txQA1RVHI5OTktNlOdQoI3kMSeC+Zm5vDUz8MujQckEhWQ30+n89x08C9EolvbGyk6QzlpKJDMDoSWV1d1Xg7+gOIgkbYoVwuhys/3dbWhsEjQTzp9a2tLYPtDOjTfxLTk78lk81mB+DxDgTvHs6mpqYX7e3tGry3mO3sm0wm40P74uJiaXh4eKFYLJbgu07QLYyNjbWwMqPPgUbUyBrcMWywwLX8xndN036NI5ubm7wddysGxNZGR0cxuBWHw9GZTCYXjo+PMfhP+D00iRrRaDS6kkqlShyhe08v1TB+1vrBwcEy3sGBDKZPbZLFdKJ2A1IG7TpNLVbUBqQgNgl08pTL5RxrApFIBPVaI7ueSsd0fvDTuPYbp3aDGyDt1IeN+Ozu7uH0ekOKXUJCQkJCguKHAAMAvduPUQLB93IAAAAASUVORK5CYII=)"});g.onclick=d;w.appendChild(g);v=document.createElement("div");if(t.heading){v.innerHTML=t.heading}else{v.innerHTML="Watch related videos"}m(v,o);w.appendChild(v);u=document.createElement("div");w.appendChild(u);m(u,{position:"absolute"})}e.onReady(h);this.resize=function(E,C){if(e.getRenderingMode()=="flash"){return}if(!i){i=[140,80,5,2,E,C,0,0];if(t.dimensions){var F=t.dimensions.split(",");for(var D=0;D<4;D++){i[D]=Number(F[D])}}}c(E,C)};function c(D,C){m(w,{height:C+"px",width:D+"px"});m(g,{left:(D-50)+"px"});m(u,{left:Math.round(D/2-i[6]/2)+"px",top:Math.round(C/2-i[7]/2)+"px"});m(v,{left:Math.round(D/2-i[6]/2)+"px",width:i[6]+"px",top:Math.round(C/2-i[7]/2-30)+"px"})}function x(C){e.seek(0)}function m(C,D){for(var E in D){C.style[E]=D[E]}}};a().registerPlugin("related",b,"./related.swf")})(jwplayer);(function(a){if(a.related){return}a.related={};a.related.thumb=function(e,g,j,i,p){var b;var d={border:"1px solid #000",webkitBoxShadow:"0 0 4px #000",MozBoxShadow:"0 0 4px #000",msBoxShadow:"0 0 4px #000",boxShadow:"0 0 4px #000",backgroundColor:"#000",backgroundSize:"cover",position:"absolute",textDecoration:"none",display:"block",margin:"0 0 0 0",padding:"0 0 0 0"};var l;var o={psition:"absolute",left:"0px",top:"0px",border:"none",margin:"0 0 0 0",padding:"0 0 0 0"};var n;var k={backgroundColor:"rgba(0,0,0,0.8)",left:"0px",position:"absolute",border:"none",color:"#FFF",display:"block",font:"12px/26px Arial,sans-serif",overflow:"hidden",margin:"0 0 0 0",textAlign:"center",textDecoration:"none",textTransform:"none",padding:"0 0 0 0",height:"26px"};function f(q){c(b,{border:"1px solid #FFF",webkitBoxShadow:"0 0 4px #FFF",MozBoxShadow:"0 0 4px #FFF",msBoxShadow:"0 0 4px #FFF",boxShadow:"0 0 4px #FFF"})}function m(q){c(b,{border:"1px solid #000",webkitBoxShadow:"0 0 4px #000",MozBoxShadow:"0 0 4px #000",msBoxShadow:"0 0 4px #000",boxShadow:"0 0 4px #000"})}function h(){b=document.createElement("a");b.setAttribute("href",i);b.setAttribute("target","_top");b.onmouseout=m;b.onmouseover=f;c(b,d);c(b,{backgroundImage:"url("+j+")",width:(e-2)+"px",height:(g-2)+"px"});l=document.createElement("img");l.setAttribute("src","data:image/png;base64,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");c(l,o);c(l,{width:e-2+"px",height:g-20+"px"});b.appendChild(l);if(p){n=document.createElement("div");n.innerHTML=p;c(n,k);c(n,{top:(g-28)+"px",width:(e-2)+"px"});b.appendChild(n)}return b}function c(q,r){for(var s in r){q.style[s]=r[s]}}return h()}})(jwplayer);

plugins/related/src/as/Related.as

@@ -36 +36 @@
         /** The plugin configuration options.**/
         private var _config:Object;
-        /** Number of columns and rows in the grid. **/
+        /** Clip with all graphics. **/
+        private var _container:MovieClip;
+        /** Default dimensions for the grid. **/
         private var _dimensions:Array;
         /** Link to the mRSS file with related videos. **/
@@ -63 +65 @@
 
         /** Display the related items on complete. **/
-        private function _completeHandler(evt:MediaEvent):void { 
+        private function _completeHandler(evt:MediaEvent):void {
             if(_config.oncomplete !== false) {
                 setTimeout(show,50);
@@ -88 +90 @@
         /** Hide the list with related videos. **/
         public function hide():void {
-            _back.visible = false;
-            _replay.visible = false;
-            _close.visible = false;
-            _grid.visible = false;
-            _heading.visible = false;
+            _back.alpha = 1;
+            new Animations(_container).fade(0,0.2);
             // Only 5.7+...
             try {
@@ -122 +121 @@
                 _button = _player.controls.dock.addButton(_icon, "related", _dockHandler);
             }
-            // Add the background sheet.
+            // Add the background.
+            _container = new MovieClip();
+            _container.alpha = 0;
+            _container.visible = false;
+            addChild(_container);
             _back = new Sprite();
             _back.buttonMode = true;
             _back.addChild(new BackSheet());
             _back.addEventListener(MouseEvent.CLICK,_backHandler);
-            addChild(_back);
+            _container.addChild(_back);
             // Add the replay and close buttons.
             _replay = new Sprite();
@@ -133 +136 @@
             _replay.addChild(new ReplayButton());
             _replay.addEventListener(MouseEvent.CLICK,_replayHandler);
-            addChild(_replay);
+            _container.addChild(_replay);
             _close = new Sprite();
             _close.buttonMode = true;
             _close.addChild(new CloseButton());
             _close.addEventListener(MouseEvent.CLICK,_backHandler);
-            addChild(_close);
+            _container.addChild(_close);
             // Add the text heading.
             _heading = new TextField();
@@ -147 +150 @@
             _heading.selectable = false;
             _heading.filters = new Array(new DropShadowFilter(1,45,0,1,1,1,1));
-            if(_config.heading) {
+            if(_config.heading !== undefined) {
                 _heading.htmlText = _config.heading;
             } else {
                 _heading.htmlText = "Watch related videos";
             }
-            addChild(_heading);
+            _container.addChild(_heading);
             // Add the grid for thumbs
             _grid = new Sprite();
-            addChild(_grid);
+            _container.addChild(_grid);
         };
 
@@ -190 +193 @@
         /** Loader has loaded the mRSS feed. **/
         private function _loaderHandler(evt:Event):void {
-            var xml:XML = XML(evt.target.data);
-            var rss:Array = _parser.parse(xml);
+            try {
+                var xml:XML = XML(evt.target.data);
+                var rss:Array = _parser.parse(xml);
+            } catch (error:Error) { 
+                _errorHandler(new ErrorEvent(ErrorEvent.ERROR,false,false,"This feed is not valid XML and/or RSS."));
+                return;
+            }
             var related:Array = new Array();
             for (var i:Number = 0; i < rss.length; i++) {
-                if(rss[i].image && rss[i].link) {
-                    related.push(rss[i]);
+                if(rss[i].image && rss[i].link && rss[i].title) {
+                    var entry:Object = {
+                        image: rss[i].image,
+                        link: rss[i].link
+                    }
+                    if(_config.titles !== false) { 
+                        entry.title = rss[i].title
+                    }
+                    related.push(entry);
                 }
             }
@@ -212 +227 @@
                     thumb.y = (_dimensions[1]+10) * row;
                     _grid.addChild(thumb);
-                    if(col == _dimensions[2]-1) {
-                        if(row == _dimensions[3]-1) {
+                    if(col == _dimensions[2]-1 || 
+                        (_dimensions[0]+10)*(col+2) > _dimensions[4]) {
+                        if(row == _dimensions[3]-1 || 
+                            (_dimensions[1]+10)*(row+2) > _dimensions[5]-40) {
                             break;
                         } else {
@@ -223 +240 @@
                     }
                 }
-                resize(_back.width,_back.height);
+                resize(_dimensions[4],_dimensions[5]);
             } else {
                 _errorHandler(new ErrorEvent(ErrorEvent.ERROR,false,false,
@@ -232 +249 @@
 
         /** The replay button was clicked. **/
-        private function _replayHandler(evt:MouseEvent):void { 
+        private function _replayHandler(evt:MouseEvent):void {
             hide();
             _player.seek(0);
@@ -245 +262 @@
             _close.x = width - 50;
             _grid.x = Math.round(width/2 - _grid.width/2);
-            _grid.y = Math.round(height/2 - _grid.height/2) + 10;
+            _grid.y = Math.round(height/2 - _grid.height/2) + 15;
             _heading.y = _grid.y - 30;
             _heading.x = Math.round(width/2 - _heading.width/2);
-            // Determinie thumb grid dimensions on first resize.
-            if(!_dimensions) {
-                if (width >= 600) {
-                    _dimensions = new Array(
-                        160,
-                        90,
-                        Math.min(Math.floor(width/170),5),
-                        Math.min(Math.floor((height-40)/100),2)
-                    );
-                } else {
-                    _dimensions = new Array(
-                        120,
-                        70,
-                        Math.min(Math.floor(width/130),5),
-                        Math.min(Math.floor((height-40)/80),2)
-                    );
+            // Store thumb dimensions on first resize.
+            _dimensions = [140,80,5,2,width,height];
+            if(_config.dimensions) {
+                var dim:Array = _config.dimensions.split(',');
+                for(var i:Number=0; i<dim.length; i++) { 
+                    _dimensions[i] = Number(dim[i]);
                 }
             }
@@ -272 +279 @@
         public function show():void {
             if(_file) {
-                _back.visible = true;
-                _replay.visible = true;
-                _close.visible = true;
-                _grid.visible = true;
-                _heading.visible = true;
+                new Animations(_container).fade(1,0.2);
                 _player.pause();
                 // Only 5.7+...

plugins/related/src/as/RelatedThumb.as

@@ -29 +29 @@
         /** Graphic over the image. **/
         private var _glow:DisplayObject;
+        /** Height of the thumb. **/
+        private var _height:Number;
         /** Overlay between the image and text. **/
         private var _overlay:Sprite;
@@ -35 +37 @@
         /** TextField formatting. **/
         private var _format:TextFormat;
+        /** Width of the thumb. **/
+        private var _width:Number;
 
 
         /** Constructor. **/
         public function RelatedThumb(width:Number,height:Number,image:String,link:String,title:String=null) {
+            _width = width;
+            _height = height;
             _link = link;
             _back = new Sprite();
             _back.graphics.beginFill(0,1);
             _back.graphics.drawRect(0,0,width,height);
-            _back.filters = new Array(new DropShadowFilter(1));
+            _back.filters = new Array(new DropShadowFilter(0));
             addChild(_back);
             _loader = new Loader();
@@ -51 +57 @@
             _mask = new Sprite();
             _mask.graphics.beginFill(0,1);
-            _mask.graphics.drawRect(0,0,width,height);
+            _mask.graphics.drawRect(1,1,width-2,height-2);
             addChild(_mask);
             _loader.mask = _mask;
             _glow = new GlowSheet();
-            _glow.width = width;
+            _glow.x = 1;
+            _glow.y = 1;
+            _glow.width = width-2;
             _glow.scaleY = _glow.scaleX;
             addChild(_glow);
@@ -61 +69 @@
                 _overlay = new Sprite();
                 _overlay.graphics.beginFill(0,0.8);
-                _overlay.graphics.drawRect(0,height-26,width,26);
+                _overlay.graphics.drawRect(1,height-27,width-2,26);
                 addChild(_overlay);
                 _field = new TextField();
@@ -67 +75 @@
                 _field.width = width-10;
                 _field.x = 5;
-                _field.y = height-21;
+                _field.y = height-22;
                 _format = new TextFormat('Arial', 12, 0xFFFFFF);
                 _format.align = 'center';
@@ -94 +102 @@
                 Bitmap(_loader.content).smoothing = true;
             } catch(e:Error) {}
-            Stretcher.stretch(_loader,_back.width,_back.height,Stretcher.FILL);
+            Stretcher.stretch(_loader,_width,_height,Stretcher.FILL);
         };
 
@@ -100 +108 @@
         /** Redirect on thumb click. **/
         private function _outHandler(event:MouseEvent):void {
-            _back.filters = new Array(new DropShadowFilter(1));
+            _back.graphics.clear();
+            _back.graphics.beginFill(0,1);
+            _back.graphics.drawRect(0,0,_width,_height);
+            _back.filters = new Array(new DropShadowFilter(0));
         };
 
@@ -106 +117 @@
         /** Redirect on thumb click. **/
         private function _overHandler(event:MouseEvent):void {
-            _back.filters = new Array(new DropShadowFilter(0,45,0xFFFFFF,1,5,5,1.5));
+            _back.graphics.clear();
+            _back.graphics.beginFill(0xFFFFFF,1);
+            _back.graphics.drawRect(0,0,_width,_height);
+            _back.filters = new Array(new DropShadowFilter(0,45,0xFFFFFF));
         };
 

plugins/related/src/js/related.js

@@ -2 +2 @@
 
 
-    /** This plugin displays a screen with related videos.**/
-    var template = function(_player, _options, _div) {
+    /**
+    * Displays a grid with related videos on screen.
+    **/
+    var related = function(_player, _options, _div) {
+
+
+        /** Reference to the container with elements. **/
+        var _container;
+        /** Reference to the close button. **/
+        var _close;
+        /** Array with thumb dimensions. **/
+        var _dimensions;
+        /** mRSS feed that contains the related videos. **/
+        var _file;
+        /** Reference to the heading text. **/
+        var _heading;
+        /** Reference to the grid with thumbs. **/
+        var _grid;
+        /** Reference to the replay button. **/
+        var _replay;
+
+
+        /** Styling for close and replay buttons. **/
+        var _buttonStyle = {
+            cursor: 'pointer',
+            position: 'absolute',
+            left: '0px',
+            top: '0px',
+            margin: '0px',
+            padding: '0px',
+            display: 'block',
+            width: '50px',
+            height: '50px'
+        };
+        /** Styling for enclosing DIV. **/
+        var _divStyle = {
+            backgroundImage: 'url(../assets/sheet.png)',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 100%',
+            opacity: 0,
+            webkitTransition: 'opacity 150ms linear',
+            MozTransition: 'opacity 150ms linear',
+            msTransition: 'opacity 150ms linear',
+            transition: 'opacity 150ms linear',
+            cursor: 'pointer',
+            visibility: 'hidden'
+        };
+        /** styling for heading. **/
+        var _headingStyle = {
+            position: 'absolute',
+            border: 'none',
+            color: '#FFF',
+            display: 'block',
+            font: '16px/24px Arial,sans-serif',
+            overflow: 'hidden',
+            width: '240px',
+            margin: '0 0 0 0',
+            textAlign: 'center',
+            textTransform: 'none',
+            textShadow: '#000 1px 1px 0',
+            padding: '0 0 0 0'
+        };
+
+
+        /** Dock icon for related items found. **/
+        var ICON_RELATED = '../assets/related.png';
+        /** Dock icon for no related items. **/
+        var ICON_NOT_SET = '../assets/notset.png';
+
+
+
+        /** Display the related videos menu. **/
+        var show = function() {
+            if(_file) {
+                _player.pause(true);
+                _div.style.visibility = 'visible';
+                _div.style.opacity = 1;
+                try { 
+                    _player.getPlugin("display").hide();
+                    _player.getPlugin("dock").hide();
+                } catch (e) { /* Only 5.7+ */ }
+            }
+        };
+
+
+        /** Display the related items on complete. **/
+        function _complete(event) {
+            if(_options.oncomplete !== false) {
+                setTimeout(show,50);
+            }
+        };
+
+
+        /** Clean up dock when loading error occured. **/
+        function _error(message) {
+            if(message == _file) {
+                console.log("RELATED: Failed to load "+message);
+            } else { 
+                console.log("RELATED: "+message);
+            }
+            _file = undefined;
+            _grid.innerHTML = '';
+            _hide();
+            if(_options.usedock !== false) {
+                _player.getPlugin("dock").setButton('related',show,ICON_NOT_SET);
+            }
+        };
+
+
+        /** Hide the related videos menu. **/
+        function _hide(event) {
+            setTimeout(_hideWrap,200);
+            _div.style.opacity = 0;
+            try { 
+                _player.getPlugin("display").show();
+                _player.getPlugin("dock").show();
+            } catch (e) { /* Only 5.7+ */ }
+        };
+
+
+        /** Set invisibility after transition is done. **/
+        function _hideWrap() {
+            _div.style.visibility = 'hidden';
+        };
+
+
+        /** Grab related videos from playlist item **/
+        function _item(event) {
+            // Reset old data
+            _file = undefined;
+            _grid.innerHTML = '';
+            _hide();
+            // Check for new feed
+            var item = _player.getPlaylist()[event.index];
+            if(item['related.file']) {
+                _file = item['related.file'];
+            } else if (_options['file']) {
+                _file = _options['file'];
+            }
+            // Load the feed and set the dock icon
+            if(_file) {
+                if(_options.usedock !== false) {
+                    _player.getPlugin("dock").setButton('related',show,ICON_RELATED);
+                }
+                jwplayer.utils.ajax(_file, _loaded, _error);
+            } else {
+                _error("No related videos file found");
+            }
+        };
+
+
+        /** Create thumbs when RSS feed is loaded. **/
+        function _loaded(event) {
+            var rss = [];
+            var related = [];
+            try {
+                rss = jwplayer.utils.parsers.rssparser.parse(event.responseXML.firstChild);
+            } catch (e) {
+                _error("This feed is not valid XML and/or RSS.");
+                return;
+            }
+            for (var i=0; i < rss.length; i++) {
+                if(rss[i].image && rss[i].link && rss[i].title) {
+                    var obj = { link: rss[i].link, image: rss[i].image };
+                    if(_options.titles !== false) { 
+                        obj.title = rss[i].title;
+                    }
+                    related.push(obj);
+                }
+            }
+            // Render the thumbnails.
+            if(related.length) {
+                var col = 0;
+                var row = 0;
+                for(var j = 0; j < related.length; j++) {
+                    // Append new thumb to grid.
+                    var thumb = jwplayer.related.thumb(
+                        _dimensions[0],
+                        _dimensions[1],
+                        related[j].image,
+                        related[j].link,
+                        related[j].title
+                    );
+                    _grid.appendChild(thumb);
+                    _style(thumb,{
+                        left: ((_dimensions[0]+10) * col)+'px',
+                        top: ((_dimensions[1]+10) * row)+'px'
+                    });
+                    // Store the new grid width and height
+                    _dimensions[6] = Math.max(_dimensions[6],_dimensions[0]*(col+1)+10*col)
+                    _dimensions[7] = Math.max(_dimensions[7],_dimensions[1]*(row+1)+10*row)
+                    // Calculate column/row wrapping.
+                    if(col == _dimensions[2]-1 || 
+                        (_dimensions[0]+10)*(col+2) > _dimensions[4]) {
+                        if(row == _dimensions[3]-1 || 
+                            (_dimensions[1]+10)*(row+2) > _dimensions[5]-40) {
+                            break;
+                        } else {
+                            row++;
+                            col = 0;
+                        }
+                    } else {
+                        col++;
+                    }
+                }
+                _reposition(_dimensions[4],_dimensions[5]);
+            } else {
+                _error("RSS feed has 0 entries that contain title,link and image.");
+            }
+        };
+
+
+        /** Set dock buttons when player is ready. **/
+        function _setup() {
+            if(_player.getRenderingMode() == 'flash') { return; }
+            _player.onPlaylistItem(_item);
+            _player.onComplete(_complete);
+            _style(_div,_divStyle);
+            _div.onclick = _hide;
+            _replay = document.createElement("div");
+            _style(_replay,_buttonStyle);
+            _style(_replay,{background:'transparent url(../assets/replay.png)'});
+            _replay.onclick = _seek;
+            _div.appendChild(_replay);
+            _close = document.createElement("div");
+            _style(_close,_buttonStyle);
+            _style(_close,{background:'transparent url(../assets/close.png)'});
+            _close.onclick = _hide;
+            _div.appendChild(_close);
+            _heading = document.createElement("div");
+            if(_options.heading) { 
+                _heading.innerHTML = _options.heading;
+            } else {
+                _heading.innerHTML = "Watch related videos";
+            }
+            _style(_heading,_headingStyle);
+            _div.appendChild(_heading);
+            _grid = document.createElement("div");
+            _div.appendChild(_grid);
+            _style(_grid,{position:'absolute'});
+        };
+        _player.onReady(_setup);
+
+
+        /** Store thumb dimensions on first resize. **/
+        this.resize = function(width,height) {
+            if(_player.getRenderingMode() == 'flash') { return; }
+            if(!_dimensions) {
+                _dimensions = [140,80,5,2,width,height,0,0];
+                if(_options.dimensions) {
+                    var dim = _options.dimensions.split(',');
+                    for(var i=0; i<4; i++) {
+                        _dimensions[i] = Number(dim[i]);
+                    }
+                }
+            }
+            _reposition(width,height);
+        };
 
 
         /** Reposition elements upon a resize. **/
-        this.resize = function(width,height) {};
+        function _reposition(width,height) {
+            _style(_div,{
+                height: height+'px',
+                width: width+'px'
+            });
+            _style(_close,{left: (width-50)+'px'});
+            _style(_grid,{
+                left: Math.round(width/2 - _dimensions[6]/2)+'px',
+                top: Math.round(height/2 - _dimensions[7]/2)+'px'
+            });
+            _style(_heading,{
+                left: Math.round(width/2 - _dimensions[6]/2)+'px',
+                width: _dimensions[6]+'px',
+                top: Math.round(height/2 - _dimensions[7]/2 - 30)+'px'
+            });
+        };
+
+
+        /** Replay the current video. **/
+        function _seek(event) {
+            _player.seek(0);
+        };
+
+
+        /** Apply CSS styles to elements. **/
+        function _style(element,styles) {
+            for(var property in styles) {
+              element.style[property] = styles[property];
+            }
+         };
 
 
@@ -14 +299 @@
 
     /** Register the plugin with JW Player. **/
-    jwplayer().registerPlugin('related', template,'./related.swf');
+    jwplayer().registerPlugin('related', related,'./related.swf');
 
 

plugins/related/test/assets/screencasts.xml

@@ -2 +2 @@
         <channel>
                 <item>
+                    <title>Uploading videos</title>
                         <link>http://content.bitsontherun.com/previews/sFLjZ5Ne-izMKc5WX</link>
                         <media:thumbnail url="http://content.bitsontherun.com/thumbs/sFLjZ5Ne-320.jpg" />
                 </item>
                 <item>
+                    <title>Creating playlists</title>
                         <link>http://content.bitsontherun.com/previews/WhmFbPBE-izMKc5WX</link>
                         <media:thumbnail url="http://content.bitsontherun.com/thumbs/WhmFbPBE-320.jpg" />
                 </item>
                 <item>
+                    <title>Building players</title>
                         <link>http://content.bitsontherun.com/previews/f3oBo7sS-izMKc5WX</link>
                         <media:thumbnail url="http://content.bitsontherun.com/thumbs/f3oBo7sS-320.jpg" />
                 </item>
                 <item>
+                    <title>Video Analytics</title>
                         <link>http://content.bitsontherun.com/previews/erpBm96r-izMKc5WX</link>
                         <media:thumbnail url="http://content.bitsontherun.com/thumbs/erpBm96r-320.jpg" />
                 </item>
                 <item>
+                    <title>Reseller overview</title>
                         <link>http://content.bitsontherun.com/previews/yDtLAunz-izMKc5WX</link>
                         <media:thumbnail url="http://content.bitsontherun.com/thumbs/yDtLAunz-320.jpg" />

plugins/related/test/dimensions.html

@@ -8 +8 @@
     body,td { padding: 50px; font: 13px/20px Arial; background: #EEE; }
     td { padding: 0 20px 0 0; border-collapse: collapse; }
-    #player, p, ul, table { margin-top: 20px; display: block; }
+    #player, p, ul, table, form { margin-top: 20px; display: block; }
     #player { -webkit-box-shadow: 0 0 5px #999; }
+    input { width: 30px; margin: 0 40px 0 10px; }
 </style>
 
@@ -21 +22 @@
 <script type="text/javascript">
 function reload(width,height,feed) {
+    var dimensions = document.getElementById("dimWidth").value + 
+        "," + document.getElementById("dimHeight").value +
+        "," + document.getElementById("dimCols").value +
+        "," + document.getElementById("dimRows").value;
     jwplayer("player").setup({
         file: 'http://content.bitsontherun.com/videos/nPripu9l-327.mp4',
@@ -28 +33 @@
         plugins: {
             '../related.js': {
+                dimensions: dimensions,
                 file: feed,
                 usedock: true
@@ -36 +42 @@
 };
 </script>
+
+
+
+<form>
+    <label>Width:</label><input type="text" id="dimWidth" value="140" />
+    <label>Height:</label><input type="text" id="dimHeight" value="80" />
+    <label>Cols:</label><input type="text" id="dimCols" value="5" />
+    <label>Rows:</label><input type="text" id="dimRows" value="2" />
+</form>
 
 
@@ -58 +73 @@
     </tr>
     <tr>
-        <td>960x540:</td>
-        <td><a href="javascript:reload(960,540,'assets/blender.xml');">3 videos</a></td>
-        <td><a href="javascript:reload(960,540,'assets/screencasts.xml');">5 videos</a></td>
-        <td><a href="javascript:reload(960,540,'assets/heineken.xml');">15 videos</a></td>
+        <td>800x450:</td>
+        <td><a href="javascript:reload(800,450,'assets/blender.xml');">3 videos</a></td>
+        <td><a href="javascript:reload(800,450,'assets/screencasts.xml');">5 videos</a></td>
+        <td><a href="javascript:reload(800,450,'assets/heineken.xml');">15 videos</a></td>
     </tr>
 </table>
-
 
 <p>

plugins/related/test/index.html

@@ -20 +20 @@
 <ul>
     <li><a href="playlist.html">Playlist support</a></li>
-    <li><a href="dimensions.html">Various Dimensions</a></li>
+    <li><a href="dimensions.html">Various dimensions</a></li>
+    <li><a href="errors.html">Error handling</a></li>
 </ul>
 <ul>
     <li><a href="compatibility.html">Backward compatibility</a></li>
+    <li><a href="css.html">CSS Styling</a></li>
 </ul>
 

plugins/related/test/options.html

@@ -19 +19 @@
 
 <script type="text/javascript">
-function reload(oncomplete,usedock,heading) {
+function reload(oncomplete,usedock,titles,heading) {
     jwplayer("player").setup({
         file: 'http://content.bitsontherun.com/videos/nPripu9l-327.mp4',
@@ -29 +29 @@
                 file: 'assets/blender.xml',
                 oncomplete: oncomplete,
+                titles: titles,
                 usedock: usedock,
                 heading: heading
@@ -40 +41 @@
 
 <ul>
-    <li><a href="javascript:reload(true,true,'Watch related videos');">Both enabled</a></li>
-    <li><a href="javascript:reload(true,false,'Watch some additional related videos');">Only oncomplete, long heading</a></li>
-    <li><a href="javascript:reload(false,true,'لوحة الÙ
+    <li><a href="javascript:reload(true,true,true,'Watch related videos');">Oncomplete + dock enabled</a></li>
+    <li><a href="javascript:reload(true,false,true,'Watch some additional related videos');">Only oncomplete, long heading</a></li>
+    <li><a href="javascript:reload(false,true,true,'لوحة الÙ
 فاتيح العرؚية');">Only the dock, arab heading</a></li>
+    <li><a href="javascript:reload(false,true,false,'لوحة الÙ
+فاتيح العرؚية');">Only the dock, no thumb titles</a></li>
 </ul>