Changeset 1940

Timestamp:

08/06/11 13:15:03 (22 months ago)

Author:

jeroen

Message:

wrapped up tests and Flash version of related plugin

Location:

plugins/related

Files:

• assets/close.png (added)
• assets/glow.png (modified) (previous)
• assets/replay.png (added)
• assets/sheet.png (modified) (previous)
• doc/assets/related_example.png (modified) (previous)
• doc/guide.html (modified) (1 diff)
• related.swf (modified) (previous)
• src/as/Related.as (modified) (11 diffs)
• src/as/RelatedThumb.as (modified) (5 diffs)
• test/assets/blender.xml (modified) (1 diff)
• test/assets/heineken.xml (modified) (1 diff)
• test/assets/screencasts.xml (modified) (1 diff)
• test/dimensions.html (modified) (1 diff)
• test/modes.html (modified) (1 diff)
• test/options.html (modified) (1 diff)
• test/playlist.html (modified) (1 diff)

plugins/related/doc/guide.html

@@ -28 +28 @@
 <p>The Related plugin for the JW Player presents a screen with related videos to your viewers. This screen is shown when a video is completed or when a viewer presses the <em>related</em> button. Upon clicking a related video, the viewer is redirected to the page with that video, improving user engagement and advertising opportunities.</p>
 
-<p><img alt="Related Example Player" src="assets/related_example.png" style="margin-left: 60px" /></p>
+<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 as many related videos as fit the screen. Navigation buttons for displaying even more related videos are not shown.</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 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>

plugins/related/src/as/Related.as

@@ -12 +12 @@
     import flash.net.*;
     import flash.text.*;
+    import flash.utils.setTimeout;
 
 
@@ -23 +24 @@
         [Embed(source="../../assets/sheet.png")]
         private const BackSheet:Class;
+        [Embed(source="../../assets/replay.png")]
+        private const ReplayButton:Class;
+        [Embed(source="../../assets/close.png")]
+        private const CloseButton:Class;
 
 
@@ -47 +52 @@
         /** Reference to the player. **/
         private var _player:IPlayer;
+        /** Reference to the replay button. **/
+        private var _replay:Sprite;
+        /** Reference to the close button. **/
+        private var _close:Sprite;
 
 
@@ -55 +64 @@
         /** Display the related items on complete. **/
         private function _completeHandler(evt:MediaEvent):void { 
-            if(_config.oncomplete !== false) { show(); }
+            if(_config.oncomplete !== false) {
+                setTimeout(show,50);
+            }
         };
 
@@ -78 +89 @@
         public function hide():void {
             _back.visible = false;
+            _replay.visible = false;
+            _close.visible = false;
             _grid.visible = false;
             _heading.visible = false;
             // Only 5.7+...
-            try { (_player.controls.display as Object).show(); } catch (error:Error) {}
+            try {
+                (_player.controls.display as Object).show();
+                (_player.controls.dock as Object).show();
+            } catch (error:Error) {}
         };
 
@@ -108 +124 @@
             // Add the background sheet.
             _back = new Sprite();
-            _back.visible = false;
             _back.buttonMode = true;
             _back.addChild(new BackSheet());
             _back.addEventListener(MouseEvent.CLICK,_backHandler);
             addChild(_back);
+            // Add the replay and close buttons.
+            _replay = new Sprite();
+            _replay.buttonMode = true;
+            _replay.addChild(new ReplayButton());
+            _replay.addEventListener(MouseEvent.CLICK,_replayHandler);
+            addChild(_replay);
+            _close = new Sprite();
+            _close.buttonMode = true;
+            _close.addChild(new CloseButton());
+            _close.addEventListener(MouseEvent.CLICK,_backHandler);
+            addChild(_close);
             // Add the text heading.
             _heading = new TextField();
             _heading.height = 30;
-            _heading.defaultTextFormat = new TextFormat('Arial', 16, 0xFFFFFF, true);
+            _heading.defaultTextFormat = new TextFormat('Arial', 16, 0xFFFFFF);
             _heading.autoSize = 'center';
             _heading.multiline = false;
             _heading.selectable = false;
-            _heading.filters = new Array(new DropShadowFilter(2,45,0,1,1,1,1));
+            _heading.filters = new Array(new DropShadowFilter(1,45,0,1,1,1,1));
             if(_config.heading) {
                 _heading.htmlText = _config.heading;
@@ -130 +156 @@
             _grid = new Sprite();
             addChild(_grid);
-            // Hide the graphics on startup.
-            hide();
         };
 
@@ -139 +163 @@
             // Reset old data
             _file = undefined;
+            while(_grid.numChildren > 0) {
+                _grid.removeChildAt(0);
+            }
+            hide();
             // Check for new file
             if(_player.playlist.currentItem['related.file']) {
@@ -166 +194 @@
             var related:Array = new Array();
             for (var i:Number = 0; i < rss.length; i++) {
-                if(rss[i].title && rss[i].image && rss[i].link) { 
+                if(rss[i].image && rss[i].link) {
                     related.push(rss[i]);
                 }
             }
             if(related.length) {
-                Logger.log("Found "+related.length+" related videos",id);
-                for(var j:Number = 0; j < related.length; j++) { 
-                    var thumb:RelatedThumb = new RelatedThumb(related[j].image,related[j].link,related[j].title);
-                    thumb.x = 130*j;
+                var col:Number = 0;
+                var row:Number = 0;
+                for(var j:Number = 0; j < related.length; j++) {
+                    var thumb:RelatedThumb = new RelatedThumb(
+                        _dimensions[0],
+                        _dimensions[1],
+                        related[j].image,
+                        related[j].link,
+                        related[j].title
+                    );
+                    thumb.x = (_dimensions[0]+10) * col;
+                    thumb.y = (_dimensions[1]+10) * row;
                     _grid.addChild(thumb);
-                    resize(_back.width,_back.height);
-                }
+                    if(col == _dimensions[2]-1) {
+                        if(row == _dimensions[3]-1) {
+                            break;
+                        } else {
+                            row++;
+                            col = 0;
+                        }
+                    } else {
+                        col++;
+                    }
+                }
+                resize(_back.width,_back.height);
             } else {
                 _errorHandler(new ErrorEvent(ErrorEvent.ERROR,false,false,
@@ -185 +231 @@
 
 
+        /** The replay button was clicked. **/
+        private function _replayHandler(evt:MouseEvent):void { 
+            hide();
+            _player.seek(0);
+        };
+
+
         /** Reposition the screens when the player resizes itself **/
         public function resize(width:Number, height:Number):void {
+            // Do regular resize stuff
             _back.width = width;
             _back.height = height;
+            _close.x = width - 50;
             _grid.x = Math.round(width/2 - _grid.width/2);
             _grid.y = Math.round(height/2 - _grid.height/2) + 10;
             _heading.y = _grid.y - 30;
             _heading.x = Math.round(width/2 - _heading.width/2);
-            _dimensions = new Array(
-                Math.floor(width/130),
-                Math.floor((height-30)/90)
-            );
+            // 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)
+                    );
+                }
+            }
         };
 
@@ -204 +273 @@
             if(_file) {
                 _back.visible = true;
+                _replay.visible = true;
+                _close.visible = true;
                 _grid.visible = true;
                 _heading.visible = true;
+                _player.pause();
                 // Only 5.7+...
-                try { (_player.controls.display as Object).hide(); } catch (error:Error) {}
+                try {
+                    (_player.controls.display as Object).hide();
+                    (_player.controls.dock as Object).hide();
+                } catch (error:Error) {}
             }
         };

plugins/related/src/as/RelatedThumb.as

@@ -1 +1 @@
 package {
 
+    import com.longtailvideo.jwplayer.utils.Stretcher;
 
     import flash.display.*;
@@ -24 +25 @@
         /** Container that imports the preview thumbnail **/
         private var _loader:Loader;
+        /** Mask for the loader. **/
+        private var _mask:Sprite;
         /** Graphic over the image. **/
         private var _glow:DisplayObject;
@@ -35 +38 @@
 
         /** Constructor. **/
-        public function RelatedThumb(image:String,link:String,title:String) {
+        public function RelatedThumb(width:Number,height:Number,image:String,link:String,title:String=null) {
             _link = link;
             _back = new Sprite();
             _back.graphics.beginFill(0,1);
-            _back.graphics.drawRect(0,0,120,80);
+            _back.graphics.drawRect(0,0,width,height);
             _back.filters = new Array(new DropShadowFilter(1));
             addChild(_back);
@@ -46 +49 @@
             _loader.load(new URLRequest(image));
             addChild(_loader);
-            _overlay = new Sprite();
+            _mask = new Sprite();
+            _mask.graphics.beginFill(0,1);
+            _mask.graphics.drawRect(0,0,width,height);
+            addChild(_mask);
+            _loader.mask = _mask;
             _glow = new GlowSheet();
+            _glow.width = width;
+            _glow.scaleY = _glow.scaleX;
             addChild(_glow);
-            _overlay.graphics.beginFill(0,0.7);
-            _overlay.graphics.drawRect(0,56,120,24);
-            addChild(_overlay);
-            _field = new TextField();
-            _field.height = 20;
-            _field.width = 110;
-            _field.x = 5;
-            _field.y = 60;
-            _format = new TextFormat('Arial', 12, 0xFFFFFF);
-            _format.align = 'center';
-            _field.defaultTextFormat = _format;
-            _field.selectable = false;
-            _field.text = title;
-            addChild(_field);
+            if(title) {
+                _overlay = new Sprite();
+                _overlay.graphics.beginFill(0,0.8);
+                _overlay.graphics.drawRect(0,height-26,width,26);
+                addChild(_overlay);
+                _field = new TextField();
+                _field.height = 20;
+                _field.width = width-10;
+                _field.x = 5;
+                _field.y = height-21;
+                _format = new TextFormat('Arial', 12, 0xFFFFFF);
+                _format.align = 'center';
+                _field.defaultTextFormat = _format;
+                _field.selectable = false;
+                _field.text = title;
+                addChild(_field);
+            }
             buttonMode = true;
             mouseChildren = false;
             addEventListener(MouseEvent.CLICK,_clickHandler);
+            addEventListener(MouseEvent.MOUSE_OUT,_outHandler);
+            addEventListener(MouseEvent.MOUSE_OVER,_overHandler);
         };
 
@@ -76 +90 @@
 
         /** Fade the image when loaded. **/
-        private function _loaderHandler(event:Event):void { 
-            _loader.width = 120;
-            _loader.height = 80;
+        private function _loaderHandler(event:Event):void {
+            try {
+                Bitmap(_loader.content).smoothing = true;
+            } catch(e:Error) {}
+            Stretcher.stretch(_loader,_back.width,_back.height,Stretcher.FILL);
+        };
+
+
+        /** Redirect on thumb click. **/
+        private function _outHandler(event:MouseEvent):void {
+            _back.filters = new Array(new DropShadowFilter(1));
+        };
+
+
+        /** Redirect on thumb click. **/
+        private function _overHandler(event:MouseEvent):void {
+            _back.filters = new Array(new DropShadowFilter(0,45,0xFFFFFF,1,5,5,1.5));
         };
 

plugins/related/test/assets/blender.xml

@@ -4 +4 @@
                         <title>Big Buck Bunny</title>
                         <link>http://content.bitsontherun.com/previews/ntPYsD4L-ALJ3XQCI</link>
-                        <media:thumbnail url="http://content.bitsontherun.com/thumbs/ntPYsD4L-120.jpg" />
+                        <media:thumbnail url="http://content.bitsontherun.com/thumbs/ntPYsD4L-320.jpg" />
                 </item>
                 <item>
                         <title>Elephants Dream</title>
                         <link>http://content.bitsontherun.com/previews/LJSVMnCF-ALJ3XQCI</link>
-                        <media:thumbnail url="http://content.bitsontherun.com/thumbs/LJSVMnCF-120.jpg" />
+                        <media:thumbnail url="http://content.bitsontherun.com/thumbs/LJSVMnCF-320.jpg" />
                 </item>
                 <item>
                         <title>Sintel</title>
                         <link>http://content.bitsontherun.com/previews/r3ABWwdO-ALJ3XQCI</link>
-                        <media:thumbnail url="http://content.bitsontherun.com/thumbs/r3ABWwdO-120.jpg" />
+                        <media:thumbnail url="http://content.bitsontherun.com/thumbs/r3ABWwdO-320.jpg" />
                 </item>
         </channel>

plugins/related/test/assets/heineken.xml

@@ -2 +2 @@
 <channel>
     <item>
-        <title>NEW Heineken Commercial - verry funny</title>
-        <link>http://www.youtube.com/watch?v=S1ZZreXEqSY&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/S1ZZreXEqSY/1.jpg" height="90" width="120" time="00:00:08"/>
-    </item>
-    <item>
-        <title>Heineken Open Design Invite</title>
-        <link>http://www.youtube.com/watch?v=_SDJ-gghGXA&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/_SDJ-gghGXA/1.jpg" height="90" width="120" time="00:00:25.250"/>
-    </item>
-    <item>
-        <title>CyHi The Prynce Performs at Heineken's Red Access Tour in Miami</title>
-        <link>http://www.youtube.com/watch?v=sbprnV2Pqts&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/sbprnV2Pqts/1.jpg" height="90" width="120" time="00:01:27"/>
-    </item>
-    <item>
-        <title>Heineken The Entrance</title>
-        <link>http://www.youtube.com/watch?v=TLgetLmlggA&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/TLgetLmlggA/1.jpg" height="90" width="120" time="00:00:23"/>
-    </item>
-    <item>
-        <title>Heineken Commercial 2011 - The Asteroids Galaxy Tour</title>
-        <link>http://www.youtube.com/watch?v=On6U-kQGBcA&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/On6U-kQGBcA/2.jpg" height="90" width="120" time="00:01:32.500"/>
-    </item>
-    <item>
         <title>One Million Heineken Hugs</title>
         <link>http://www.youtube.com/watch?v=smO1onPkA3Q&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/smO1onPkA3Q/2.jpg" height="90" width="120" time="00:00:40"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/smO1onPkA3Q/0.jpg" height="90" width="120" time="00:00:40"/>
     </item>
     <item>
         <title>Heineken commercial</title>
         <link>http://www.youtube.com/watch?v=3M8Dp7wGBe4&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/3M8Dp7wGBe4/2.jpg" height="90" width="120" time="00:00:45"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/3M8Dp7wGBe4/0.jpg" height="90" width="120" time="00:00:45"/>
     </item>
     <item>
         <title>Heineken The Date</title>
         <link>http://www.youtube.com/watch?v=57zo8O5pDXc&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/57zo8O5pDXc/2.jpg" height="90" width="120" time="00:00:46"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/57zo8O5pDXc/0.jpg" height="90" width="120" time="00:00:46"/>
     </item>
     <item>
-        <title>Heineken Light The Handlebar Moustache (HD)</title>
         <link>http://www.youtube.com/watch?v=XFdBK4gdYcA&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/XFdBK4gdYcA/2.jpg" height="90" width="120" time="00:00:30.500"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/XFdBK4gdYcA/0.jpg" height="90" width="120" time="00:00:30.500"/>
     </item>
     <item>
         <title>Heineken - Men With Talent</title>
-        <link>http://www.youtube.com/watch?v=58-9Ae9cvDI&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/58-9Ae9cvDI/2.jpg" height="90" width="120" time="00:00:21"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/58-9Ae9cvDI/0.jpg" height="90" width="120" time="00:00:21"/>
     </item>
     <item>
         <title>Elvis and Heineken</title>
         <link>http://www.youtube.com/watch?v=miHVWNekujA&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/miHVWNekujA/2.jpg" height="90" width="120" time="00:00:31"/>
     </item>
     <item>
         <title>Heineken Cup Final 2011 highlights - Leinster vs Northampton Saints</title>
         <link>http://www.youtube.com/watch?v=meJd5gGjdGc&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/meJd5gGjdGc/2.jpg" height="90" width="120" time="00:03:28.500"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/meJd5gGjdGc/0.jpg" height="90" width="120" time="00:03:28.500"/>
     </item>
     <item>
         <title>Heineken | The Entrance</title>
         <link>http://www.youtube.com/watch?v=i4m5Wkywew0&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/i4m5Wkywew0/2.jpg" height="90" width="120" time="00:00:24"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/i4m5Wkywew0/0.jpg" height="90" width="120" time="00:00:24"/>
     </item>
     <item>
         <title>Heineken - Global Rugby World Cup 2011</title>
         <link>http://www.youtube.com/watch?v=LfomUcl75ho&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/LfomUcl75ho/2.jpg" height="90" width="120" time="00:00:30.500"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/LfomUcl75ho/0.jpg" height="90" width="120" time="00:00:30.500"/>
     </item>
     <item>
         <title>Heineken USA - No Hype</title>
         <link>http://www.youtube.com/watch?v=yIMTTDJv3SU&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/yIMTTDJv3SU/2.jpg" height="90" width="120" time="00:00:08"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/yIMTTDJv3SU/0.jpg" height="90" width="120" time="00:00:08"/>
     </item>
     <item>
         <title>Heineken - Brief Encounter</title>
         <link>http://www.youtube.com/watch?v=P_pkeB7PbbQ&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/P_pkeB7PbbQ/2.jpg" height="90" width="120" time="00:00:30"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/P_pkeB7PbbQ/0.jpg" height="90" width="120" time="00:00:30"/>
     </item>
     <item>
         <title>Leinster v. Northampton Heineken Cup Final 2011</title>
         <link>http://www.youtube.com/watch?v=QyqfqW3L4wE&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/QyqfqW3L4wE/2.jpg" height="90" width="120" time="00:02:46.500"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/QyqfqW3L4wE/0.jpg" height="90" width="120" time="00:02:46.500"/>
     </item>
     <item>
         <title>Heineken April 1st</title>
         <link>http://www.youtube.com/watch?v=_Pnphme2bKc&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/_Pnphme2bKc/2.jpg" height="90" width="120" time="00:00:46"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/_Pnphme2bKc/0.jpg" height="90" width="120" time="00:00:46"/>
     </item>
     <item>
         <title>Heineken Star Player BuzzmaniaTV.mp4</title>
         <link>http://www.youtube.com/watch?v=XP5yySEZub8&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/XP5yySEZub8/2.jpg" height="90" width="120" time="00:01:07.500"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/XP5yySEZub8/0.jpg" height="90" width="120" time="00:01:07.500"/>
     </item>
     <item>
         <title>KANYE WEST Heineken Red Star All Access show "ALL OF THE LIGHTS"</title>
         <link>http://www.youtube.com/watch?v=ieGO4TPlWbY&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/ieGO4TPlWbY/2.jpg" height="90" width="120" time="00:02:29"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/ieGO4TPlWbY/0.jpg" height="90" width="120" time="00:02:29"/>
     </item>
     <item>
         <title>Funny Heineken Commercial</title>
         <link>http://www.youtube.com/watch?v=neoUi4poCXI&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/neoUi4poCXI/2.jpg" height="90" width="120" time="00:00:30"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/neoUi4poCXI/0.jpg" height="90" width="120" time="00:00:30"/>
     </item>
     <item>
         <title>Heineken Italy Activation Milan AC Real Madrid</title>
         <link>http://www.youtube.com/watch?v=M_URyWFBOy4&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/M_URyWFBOy4/2.jpg" height="90" width="120" time="00:02:33"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/M_URyWFBOy4/0.jpg" height="90" width="120" time="00:02:33"/>
     </item>
     <item>
         <title>The Entrance for Heineken Beer by Wieden &amp; Kennedy Amsterdam.mp4</title>
         <link>http://www.youtube.com/watch?v=ozWu3lzE8d0&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/ozWu3lzE8d0/2.jpg" height="90" width="120" time="00:01:26"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/ozWu3lzE8d0/0.jpg" height="90" width="120" time="00:01:26"/>
     </item>
     <item>
         <title>Northampton Saints vs Perpignan - Heineken Cup semi final - 2011</title>
         <link>http://www.youtube.com/watch?v=Olqz6eIUL_Y&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/Olqz6eIUL_Y/2.jpg" height="90" width="120" time="00:02:47.500"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/Olqz6eIUL_Y/0.jpg" height="90" width="120" time="00:02:47.500"/>
     </item>
     <item>
         <title>Heineken Open Design Explorations</title>
         <link>http://www.youtube.com/watch?v=zsszRzTPft4&amp;feature=youtube_gdata</link>
-        <media:thumbnail url="http://i.ytimg.com/vi/zsszRzTPft4/2.jpg" height="90" width="120" time="00:00:50.500"/>
+        <media:thumbnail url="http://i.ytimg.com/vi/zsszRzTPft4/0.jpg" height="90" width="120" time="00:00:50.500"/>
     </item>
 </channel>

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-120.jpg" />
+                        <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-120.jpg" />
+                        <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-120.jpg" />
+                        <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-120.jpg" />
+                        <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-120.jpg" />
+                        <media:thumbnail url="http://content.bitsontherun.com/thumbs/yDtLAunz-320.jpg" />
                 </item>
         </channel>

plugins/related/test/dimensions.html

@@ -1 +1 @@
 <html>
-        <head>
-                <script src="/trunk/fl5/js/bin-debug/jwplayer.js" type="text/javascript"></script>
-        </head>
-        <body>
-                <a href="index.html">Back to index</a>
-                <div id="player"></div>
-                <script type="text/javascript">
-                jwplayer('player').setup({
-                        levels: [
-                                { file: 'http://playertest.longtailvideo.com/bunny.mp4' },
-                                { file: 'http://playertest.longtailvideo.com/bunny.ogv' }
-                        ],
-                        plugins: {
-                                '../bin-debug/related.js': {
-                                        useicons: true,
-                                        redirect: true,
-                                        file: "./assets/recs.xml"
-                                }
-                        },
-                        'modes': [
-                                {type: 'html5'},
-                                {type: 'flash', src: './assets/player.swf'}
-                        ]
-                });
-                </script>
-        </body>
+<head>
+
+<meta charset="UTF-8">
+<script type="text/javascript" src="assets/jwplayer.min.js"></script>
+<title>Various dimensions</title>
+<style>
+    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 { -webkit-box-shadow: 0 0 5px #999; }
+</style>
+
+</head>
+<body>
+
+<h2>Various dimensions</h2>
+
+<div id="player"></div>
+
+<script type="text/javascript">
+function reload(width,height,feed) {
+    jwplayer("player").setup({
+        file: 'http://content.bitsontherun.com/videos/nPripu9l-327.mp4',
+        flashplayer: 'assets/player.swf',
+        height: height,
+        image:'http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg',
+        plugins: {
+            '../related.js': {
+                file: feed,
+                usedock: true
+            }
+        },
+        width: width
+    });
+};
+</script>
+
+
+<table>
+    <tr>
+        <td>320x240:</td>
+        <td><a href="javascript:reload(320,180,'assets/blender.xml');">3 videos</a></td>
+        <td><a href="javascript:reload(320,180,'assets/screencasts.xml');">5 videos</a></td>
+        <td><a href="javascript:reload(320,180,'assets/heineken.xml');">15 videos</a></td>
+    </tr>
+    <tr>
+        <td>480x270:</td>
+        <td><a href="javascript:reload(480,270,'assets/blender.xml');">3 videos</a></td>
+        <td><a href="javascript:reload(480,270,'assets/screencasts.xml');">5 videos</a></td>
+        <td><a href="javascript:reload(480,270,'assets/heineken.xml');">15 videos</a></td>
+    </tr>
+    <tr>
+        <td>640x360:</td>
+        <td><a href="javascript:reload(640,360,'assets/blender.xml');">3 videos</a></td>
+        <td><a href="javascript:reload(640,360,'assets/screencasts.xml');">5 videos</a></td>
+        <td><a href="javascript:reload(640,360,'assets/heineken.xml');">15 videos</a></td>
+    </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>
+    </tr>
+</table>
+
+
+<p>
+    The related videos overlay should look good in various dimensions.<br />
+    The larger the screen, the mover videos will fit.<br/>
+    There is a maximum of 3 rows and 5 columns.
+</p>
+
+
+</body>
 </html>

plugins/related/test/modes.html

@@ -1 +1 @@
 <html>
-        <head>
-                <script src="./assets/jwplayer.js" type="text/javascript"></script>
-        </head>
-        <body>
-                <a href="index.html">Back to index</a>
-                <div id="player"></div>
-                <script type="text/javascript">
-                jwplayer('player').setup({
-                        levels: [
-                                { file: 'http://playertest.longtailvideo.com/bunny.mp4' },
-                                { file: 'http://playertest.longtailvideo.com/bunny.ogv' }
-                        ],
-                        plugins: {
-                                '../bin-debug/related.js': {
-                                        useicons: true,
-                                        file: "./assets/recs.xml"
-                                }
-                        },
-                        'modes': [
-                                {type: 'html5'},
-                                {type: 'flash', src: './assets/player.swf'}
-                        ]
-                });
-                </script>
-        </body>
+<head>
+
+<meta charset="UTF-8">
+<script type="text/javascript" src="assets/jwplayer.min.js"></script>
+<title>Rendering Modes</title>
+<style>
+    body { padding: 50px; font: 13px/20px Arial; background: #EEE; }
+    form,p, ul { margin-top: 20px; }
+    #player { -webkit-box-shadow: 0 0 5px #999; background: #000; color:#FFF; }
+</style>
+
+</head>
+<body>
+
+<h2>Rendering Modes</h2>
+
+<div id="player"></div>
+<script type="text/javascript">
+
+
+function loadPlayer(html5) {
+    var options = {
+        file: 'http://content.bitsontherun.com/videos/3XnJSIm4-364765.mp4',
+        image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-720.jpg',
+        height: 300,
+        plugins: {
+            '../related.js': {
+                file: 'assets/blender.xml'
+            }
+        },
+        width: 640,
+        stretching: 'fill'
+    };
+    if(html5) {
+        options.modes = [{type: 'html5'},{type:'flash',src:'assets/player.swf'}];
+    } else { 
+        options.modes = [{type:'flash',src:'assets/player.swf'},{type: 'html5'}];
+    }
+    jwplayer("player").setup(options);
+};
+</script>
+
+
+<ul>
+    <li><a href="javascript:loadPlayer(true)">HTML5 first</a></li>
+    <li><a href="javascript:loadPlayer(false)">Flash first</a></li>
+</ul>
+
+<p>
+    Check if the plugin works correctly in both rendering modes.<br/>
+    Check the IE 7/8/9, Firefox 3.5/5, Safari and Chrome browsers.<br/>
+    In HTML5 mode, the HD/SD video should not restart when toggling.
+</p>
+<p>
+    Also check the iPhone, iPad and Android devices.<br/>
+    On these, two buttons should show up instead of the dock.
+</p>
+
+
+</body>
 </html>

plugins/related/test/options.html

@@ -40 +40 @@
 
 <ul>
-    <li><a href="javascript:reload(true,true,'Watch related videos');">Default options</a></li>
-    <li><a href="javascript:reload(false,true,'Watch some additional related videos');">Oncomplete disabled, long heading</a></li>
-    <li><a href="javascript:reload(true,false,'لوحة الÙ
-فاتيح العرؚية');">Usedock disabled, arab heading</a></li>
+    <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,'لوحة الÙ
+فاتيح العرؚية');">Only the dock, arab heading</a></li>
 </ul>
 

plugins/related/test/playlist.html

@@ -24 +24 @@
         'playlist.size': 240,
         plugins: { '../related.js': {} },
+        stretching: 'fill',
         width: 880
     };