Merge lp:~alexharrington/xibo/server-160-rc1-preview into lp:xibo/1.6

[Alex Harrington]

First pass HTML5 layout preview

[Dan Garner (dangarner)]

You'll need to add your preview page to the pages table and give it an appropriate page group. Have you tested a non-admin user?

review: Needs Fixing

[lp:~alexharrington/xibo/server-160-rc1-preview]

311. By Alex Harrington on 2014-02-12

[server] Add page security for the new preview page

Unmerged revisions

=== modified file 'server/install/database/66.sql'
--- server/install/database/66.sql	2014-01-20 17:50:31 +0000
+++ server/install/database/66.sql	2014-02-12 21:14:59 +0000
@@ -78,6 +78,7 @@
 (78, 'User', 'SetPassword', 'manual/single.php?p=users/users#Set_Password'),
 (79, 'DataSet', 'ImportCSV', 'manual/single.php?p=content/content_dataset#Import_CSV');
 
+<<<<<<< TREE
 INSERT INTO  `setting` (
 `settingid` ,
 `setting` ,
@@ -94,6 +95,17 @@
 NULL ,  'SETTING_LIBRARY_TIDY_ENABLED',  'Off',  'dropdown', NULL ,  'On|Off',  'general',  '0'
 );
 
+=======
+INSERT INTO `setting` VALUES (`settingid`,`setting`,`value`,`type`,`helptext`,`options`,`cat`,`userChange`)
+(NULL, 'SENDFILE_MODE', 'Off', 'dropdown', 'When a user downloads a file from the library or previews a layout, should we attempt to use Apache X-Sendfile, Nginx X-Accel, or PHP (Off) to return the file from the library?', 'Off|Apache|Nginx', 'general', '1');
+
+INSERT INTO `pages` (`name`, `pagegroupID`) VALUES
+('preview', 3);
+
+INSERT INTO `lkpagegroup` (`lkpagegroupID`, `pageID`, `groupID`) VALUES
+(63, 41, 1);
+
+>>>>>>> MERGE-SOURCE
 UPDATE `version` SET `app_ver` = '1.6.0-rc1', `XmdsVersion` = 3;
 UPDATE `setting` SET `value` = 0 WHERE `setting` = 'PHONE_HOME_DATE';
-UPDATE `version` SET `DBVersion` = '66';
\ No newline at end of file
+UPDATE `version` SET `DBVersion` = '66';

=== modified file 'server/install/master/data.sql'
--- server/install/master/data.sql	2014-01-20 17:50:31 +0000
+++ server/install/master/data.sql	2014-02-12 21:14:59 +0000
@@ -152,7 +152,8 @@
 (37, 'campaign', 3),
 (38, 'transition', 4),
 (39, 'timeline', 3),
-(40, 'sessions', 9);
+(40, 'sessions', 9),
+(41, 'preview', 3);
 
 INSERT INTO `menuitem` (`MenuItemID`, `MenuID`, `PageID`, `Args`, `Text`, `Class`, `Img`, `Sequence`, `External`) VALUES
 (1, 1, 2, NULL, 'Schedule', NULL, NULL, 1, 0),
@@ -251,9 +252,14 @@
 (63, 'GLOBAL_THEME_NAME', 'default', 'text', 'The Theme to apply to all pages by default', NULL, 'general', 1),
 (64, 'DEFAULT_LAT', '51.504', 'text', 'The Latitude to apply for any Geo aware Previews', NULL, 'general', 1),
 (65, 'DEFAULT_LONG', '-0.104', 'text', 'The Longitude to apply for any Geo aware Previews', NULL, 'general', 1),
+<<<<<<< TREE
 (66, 'SCHEDULE_WITH_VIEW_PERMISSION', 'No', 'dropdown', 'Should users with View permissions on displays be allowed to schedule to them?', 'Yes|No', 'permissions', '1'),
 (67, 'SETTING_IMPORT_ENABLED', 'Off', 'dropdown', NULL , 'On|Off', 'general', '0'), 
 (68, 'SETTING_LIBRARY_TIDY_ENABLED', 'Off', 'dropdown', NULL , 'On|Off', 'general', '0');
+=======
+(66, 'SCHEDULE_WITH_VIEW_PERMISSION', 'No', 'dropdown', 'Should users with View permissions on displays be allowed to schedule to them?', 'Yes|No', 'permissions', '1'),
+(69, 'SENDFILE_MODE', 'Off', 'dropdown', 'When a user downloads a file from the library or previews a layout, should we attempt to use Apache X-Sendfile, Nginx X-Accel, or PHP (Off) to return the file from the library?', 'Off|Apache|Nginx', 'general', '1');
+>>>>>>> MERGE-SOURCE
 
 INSERT INTO `usertype` (`usertypeid`, `usertype`) VALUES
 (1, 'Super Admin'),
@@ -303,7 +309,9 @@
 (38, 19, 1),
 (48, 5, 1),
 (51, 7, 1),
-(54, 24, 1);
+(54, 24, 1),
+(63, 41, 1);
+
 
 INSERT INTO `lktemplategroup` (`LkTemplateGroupID`, `TemplateID`, `GroupID`, `View`, `Edit`, `Del`) VALUES
 (1, 1, 2, 1, 0, 0),
@@ -330,4 +338,4 @@
 
 INSERT INTO `datasetcolumntype` (`DataSetColumnTypeID`, `DataSetColumnType`) VALUES
 (1, 'Value'),
-(2, 'Formula');
\ No newline at end of file
+(2, 'Formula');

=== modified file 'server/lib/modules/module.class.php'
--- server/lib/modules/module.class.php	2014-01-19 14:06:56 +0000
+++ server/lib/modules/module.class.php	2014-02-12 21:14:59 +0000
@@ -51,6 +51,7 @@
 	protected $deleteFromRegion;
     protected $showRegionOptions;
     protected $originalUserId;
+    protected $storedAs;
 
     // Track the error state
 	private $error;
@@ -223,7 +224,7 @@
                 $this->assignedMedia = false;
 
                 // Load what we know about this media into the object
-                $SQL = "SELECT duration, name, UserId FROM media WHERE mediaID = '$mediaid'";
+                $SQL = "SELECT duration, name, UserId, storedAs FROM media WHERE mediaID = '$mediaid'";
 
                 Debug::LogEntry('audit', $SQL, 'Module', 'SetMediaInformation');
 
@@ -239,6 +240,7 @@
                     $this->duration = $row[0];
                     $this->name = $row[1];
                     $this->originalUserId = $row[2];
+                    $this->storedAs = $row[3];
                 }
                 else
                 	return $this->SetError(__('Unable to find media record with the provided ID'));
@@ -1896,5 +1898,59 @@
         // Defaults: Stored media is valid, region specific is unknown
         return ($this->regionSpecific) ? 0 : 1;
     }
+    
+    /**
+	 * Return filebased media items to the browser for Download/Preview
+	 * @return 
+	 * @param $download Boolean
+	 */
+    public function ReturnFile($fileName = '') {
+        // Return the raw flash file with appropriate headers
+    	$library = Config::GetSetting("LIBRARY_LOCATION");
+
+        # If we weren't passed in a filename then use the default
+    	if ($fileName == '') {
+            $fileName = $library . $this->storedAs;
+        }
+        
+        $download = Kit::GetParam('download', _REQUEST, _BOOLEAN, False);
+
+        $size = filesize($fileName);
+        
+        if ($download) {
+            header('Content-Type: application/octet-stream');
+            header("Content-Transfer-Encoding: Binary"); 
+            header("Content-disposition: attachment; filename=\"" . basename($fileName) . "\"");
+        }
+        else {
+            $fi = new finfo( FILEINFO_MIME_TYPE );
+            $mime = $fi->file( $fileName );
+            header("Content-Type: {$mime}");
+        }
+
+        //Output a header
+        header('Pragma: public');
+        header('Cache-Control: max-age=86400');
+        header('Expires: '. gmdate('D, d M Y H:i:s \G\M\T', time() + 86400));
+        header('Content-Length: ' . $size);
+        
+        // Send via Apache X-Sendfile header?
+        if (Config::GetSetting('SENDFILE_MODE') == 'Apache') {
+            header("X-Sendfile: $fileName");
+            exit();
+        }
+        
+        // Send via Nginx X-Accel-Redirect?
+        if (Config::GetSetting('SENDFILE_MODE') == 'Nginx') {
+            header("X-Accel-Redirect: /download/" . $this->storedAs);
+            exit();
+        }
+        
+        // Return the file with PHP
+        // Disable any buffering to prevent OOM errors.
+        @ob_end_clean();
+        @ob_end_flush();
+        readfile($fileName);
+    }
 }
-?>
\ No newline at end of file
+?>

=== modified file 'server/lib/pages/content.class.php'
--- server/lib/pages/content.class.php	2014-02-08 14:55:15 +0000
+++ server/lib/pages/content.class.php	2014-02-12 21:14:59 +0000
@@ -147,6 +147,13 @@
                         'text' => __('Permissions')
                     );
             }
+            
+            // Download
+            $row['buttons'][] = array(
+                    'id' => 'content_button_download',
+                    'url' => 'index.php?p=module&mod=' . $row['mediatype'] . '&q=Exec&method=GetResource&download=1&mediaid=' . $row['mediaid'],
+                    'text' => __('Download')
+                );
 
             // Add to the collection
 			$rows[] = $row;

=== modified file 'server/lib/pages/layout.class.php'
--- server/lib/pages/layout.class.php	2014-02-08 14:55:15 +0000
+++ server/lib/pages/layout.class.php	2014-02-12 21:14:59 +0000
@@ -136,6 +136,7 @@
    				Theme::Set('layout_form_edit_background_url', 'index.php?p=layout&q=BackgroundForm&modify=true&layoutid=' . $this->layoutid);
    				Theme::Set('layout_form_savetemplate_url', 'index.php?p=template&q=TemplateForm&layoutid=' . $this->layoutid);
    				Theme::Set('layout_form_addregion_url', 'index.php?p=timeline&q=AddRegion&layoutid=' . $this->layoutid);
+                Theme::Set('layout_form_preview_url', 'index.php?p=preview&q=render&ajax=true&layoutid=' . $this->layoutid);
 				Theme::Set('layout', $this->layout);
 
 				Kit::ClassLoader('campaign');
@@ -398,6 +399,12 @@
     				'text' => __('Schedule Now')
     			);
 
+            $row['buttons'][] = array(
+    				'id' => 'layout_button_preview',
+    				'url' => 'index.php?p=preview&q=render&ajax=true&layoutid=' . $layout['layoutid'],
+    				'text' => __('Preview Layout')
+    			);
+
     		// Only proceed if we have edit permissions
     		if ($layout['edit']) {
 
@@ -545,7 +552,7 @@
             $bgImageInfo = explode('.', $backgroundImage);
             $bgImageId = $bgImageInfo[0];
 
-            $thumbBgImage = "index.php?p=module&q=GetImage&id=$bgImageId&width=80&height=80&dynamic";
+            $thumbBgImage = "index.php?p=module&mod=image&q=Exec&method=GetResource&mediaid=$bgImageId&width=80&height=80&dynamic";
 		}
 		else
 		{
@@ -685,7 +692,7 @@
             $bgImageInfo = explode('.', $bgImage);
             $bgImageId = $bgImageInfo[0];
 
-            $background_css = "url('index.php?p=module&q=GetImage&id=$bgImageId&width=$width&height=$height&dynamic&proportional=0') top center no-repeat; background-color:$bgColor";
+            $background_css = "url('index.php?p=module&mod=image&q=Exec&method=GetResource&mediaid=$bgImageId&width=$width&height=$height&dynamic&proportional=0') top center no-repeat; background-color:$bgColor";
 		}
 		
 		$width 	= $width . "px";

=== modified file 'server/lib/pages/module.class.php'
--- server/lib/pages/module.class.php	2014-01-18 09:47:41 +0000
+++ server/lib/pages/module.class.php	2014-02-12 21:14:59 +0000
@@ -271,82 +271,5 @@
             $response->Respond();
         }
     }
-
-    /**
-     * Returns an image stream to the browser - for the mediafile specified.
-     * @return 
-     */
-    function GetImage()
-    {
-        $db =& $this->db;
-
-        $mediaID = Kit::GetParam('id', _GET, _INT, 0);
-        $proportional = Kit::GetParam('proportional', _GET, _BOOL, true);
-        $thumb = Kit::GetParam('thumb', _GET, _BOOL, false);
-        $dynamic = isset($_REQUEST['dynamic']);
-
-        if ($mediaID == 0)
-            die ('No media ID provided');
-
-        // Get the file URI
-        $SQL = sprintf("SELECT StoredAs FROM media WHERE MediaID = %d", $mediaID);
-
-        if (!$file = $db->GetSingleValue($SQL, 'StoredAs', _STRING))
-            die ('No media found for that media ID');
-
-        //File upload directory.. get this from the settings object
-        $library = Config::GetSetting("LIBRARY_LOCATION");
-        $fileName = $library . $file;
-
-        // If we are a thumb request then output the cached thumbnail
-        if ($thumb)
-            $fileName = $library . 'tn_' . $file;
-
-        // If the thumbnail doesnt exist then create one
-        if (!file_exists($fileName))
-        {
-            Debug::LogEntry('audit', 'File doesnt exist, creating a thumbnail for ' . $fileName);
-
-            if (!$info = getimagesize($library . $file))
-                die($library . $file . ' is not an image');
-
-            ResizeImage($library . $file, $fileName, 80, 80, $proportional, 'file');
-        }
-        
-        // Get the info for this new temporary file
-        if (!$info = getimagesize($fileName))
-        {
-            echo $fileName . ' is not an image';
-            exit;
-        }
-
-        if ($dynamic && $info[2])
-        {
-            $width  = Kit::GetParam('width', _GET, _INT);
-            $height = Kit::GetParam('height', _GET, _INT);
-
-            // dynamically create an image of the correct size - used for previews
-            ResizeImage($fileName, '', $width, $height, $proportional, 'browser');
-
-            exit;
-        }
-
-        if (!$image = file_get_contents($fileName))
-        {
-            //not sure
-            Debug::LogEntry('audit', "Cant find: $uid", 'module', 'GetImage');
-
-            $fileName = 'theme/default/img/forms/filenotfound.png';
-            $image  = file_get_contents($fileName);
-        }
-
-        $size = getimagesize($fileName);
-
-        //Output the image header
-        header("Content-type: {$size['mime']}");
-
-        echo $image;
-        exit;
-    }
 }
-?>
\ No newline at end of file
+?>

=== added file 'server/lib/pages/preview.class.php'
--- server/lib/pages/preview.class.php	1970-01-01 00:00:00 +0000
+++ server/lib/pages/preview.class.php	2014-02-12 21:14:59 +0000
@@ -0,0 +1,125 @@
+<?php
+/*
+ * Xibo - Digital Signage - http://www.xibo.org.uk
+ * Copyright (C) 2014 Alex Harrington
+ *
+ * This file is part of Xibo.
+ *
+ * Xibo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version. 
+ *
+ * Xibo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
+ */
+defined('XIBO') or die("Sorry, you are not allowed to directly access this page.<br /> Please press the back button in your browser.");
+
+class previewDAO 
+{
+    private $db;
+    private $user;
+    private $auth;
+	private $has_permissions = true;
+	
+	private $layoutid;
+	private $layout;
+	private $retired;
+	private $description;
+	private $tags;
+	
+	private $xml;
+
+    function __construct(database $db, user $user) 
+    {
+        $this->db   =& $db;
+        $this->user =& $user;
+        $this->layoutid = Kit::GetParam('layoutid', _REQUEST, _INT);
+
+        // Include the layout data class
+        include_once("lib/data/layout.data.class.php");
+
+        //if we have modify selected then we need to get some info
+        if ($this->layoutid != '')
+        {
+            // get the permissions
+            Debug::LogEntry('audit', 'Loading permissions for layoutid ' . $this->layoutid);
+
+            $this->auth = $user->LayoutAuth($this->layoutid, true);
+
+            if (!$this->auth->view)
+                trigger_error(__("You do not have permissions to view this layout"), E_USER_ERROR);
+
+            $sql  = " SELECT layout, description, userid, retired, tags, xml FROM layout ";
+            $sql .= sprintf(" WHERE layoutID = %d ", $this->layoutid);
+
+            if (!$results = $db->query($sql))
+            {
+                trigger_error($db->error());
+                trigger_error(__("Cannot retrieve the Information relating to this layout. The layout may be corrupt."), E_USER_ERROR);
+            }
+
+            if ($db->num_rows($results) == 0)
+                $this->has_permissions = false;
+
+            while($aRow = $db->get_row($results))
+            {
+                $this->layout = Kit::ValidateParam($aRow[0], _STRING);
+                $this->description 	= Kit::ValidateParam($aRow[1], _STRING);
+                $this->retired = Kit::ValidateParam($aRow[3], _INT);
+                $this->tags = Kit::ValidateParam($aRow[4], _STRING);
+                $this->xml = $aRow[5];
+            }
+        }
+    }
+	
+    function displayPage() 
+    {
+        return false;
+    }
+
+    function render()
+    {
+        // Render a specific layout in the previewer
+        // layoutid must be provided
+        $output = <<<EOT
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+                    <title>Preview for Layout $this->layoutid</title> 
+                    <link rel="stylesheet" type="text/css" href="modules/preview/html-preview.css" />
+                    <script type="text/JavaScript" src="theme/default/libraries/jquery/jquery-1.9.1.js"></script>
+                    <script type="text/JavaScript" src="modules/preview/html5Preloader.js"></script>
+                    <script type="text/JavaScript" src="modules/preview/html-preview.js"></script>
+                </head>
+                <body onload="dsInit($this->layoutid)">
+                    <div id="player">
+                        <div id="info"></div>
+                        <div id="log"></div>
+                        <div id="screen">
+                            <div id="splash">
+                                <div id="loader"></div>
+                                <div id="loaderCaption"><p>Loading layout...</p></div>
+                            </div>
+                            <div id="end"><a href="javascript:history.go(0)" style="text-decoration: none; color: #ffffff">Play again?</a></div>
+                        </div>
+                        
+                    </div>
+                </body>
+            </html>
+EOT;
+        print $output;
+    }
+
+    function getXlf()
+    {
+        print $this->xml;
+    }
+}
+?>

=== modified file 'server/modules/flash.module.php'
--- server/modules/flash.module.php	2014-01-18 09:47:41 +0000
+++ server/modules/flash.module.php	2014-02-12 21:14:59 +0000
@@ -113,5 +113,16 @@
         // Client dependant
         return 2;
     }
+    
+    /**
+     * Get Resource
+     */
+    public function GetResource($displayId = 0)
+    {
+    	$this->ReturnFile();
+        
+        exit();
+    }
+
 }
-?>
\ No newline at end of file
+?>

=== modified file 'server/modules/image.module.php'
--- server/modules/image.module.php	2014-01-18 09:47:41 +0000
+++ server/modules/image.module.php	2014-02-12 21:14:59 +0000
@@ -115,7 +115,7 @@
             return parent::Preview ($width, $height);
         
         // Show the image - scaled to the aspect ratio of this region (get from GET)
-        return sprintf('<div style="text-align:center;"><img src="index.php?p=module&q=GetImage&id=%d&width=%d&height=%d&dynamic" /></div>', $this->mediaid, $width, $height);
+        return sprintf('<div style="text-align:center;"><img src="index.php?p=module&mod=image&q=Exec&method=GetResource&mediaid=%d&width=%d&height=%d&dynamic=true" /></div>', $this->mediaid, $width, $height);
     }
 
     public function HoverPreview()
@@ -123,10 +123,71 @@
         // Default Hover window contains a thumbnail, media type and duration
         $output = parent::HoverPreview();
         $output .= '<div class="hoverPreview">';
-        $output .= '    <img src="index.php?p=module&q=GetImage&id=' . $this->mediaid . '&width=200&height=200&dynamic=true" alt="Hover Preview">';
+        $output .= '    <img src="index.php?p=module&mod=image&q=Exec&method=GetResource&mediaid=' . $this->mediaid . '&width=200&height=200&dynamic=true" alt="Hover Preview">';
         $output .= '</div>';
 
         return $output;
     }
+    
+    /**
+     * Get Resource
+     */
+    public function GetResource($displayId = 0)
+    {
+        $proportional = Kit::GetParam('proportional', _GET, _BOOL, true);
+        $thumb = Kit::GetParam('thumb', _GET, _BOOL, false);
+        $dynamic = isset($_REQUEST['dynamic']);
+        $file = $this->storedAs;
+
+        //File upload directory.. get this from the settings object
+        $library = Config::GetSetting("LIBRARY_LOCATION");
+        $fileName = $library . $file;
+
+        // If we are a thumb request then output the cached thumbnail
+        if ($thumb)
+            $fileName = $library . 'tn_' . $file;
+
+        // If the thumbnail doesnt exist then create one
+        if (!file_exists($fileName))
+        {
+            Debug::LogEntry('audit', 'File doesnt exist, creating a thumbnail for ' . $fileName);
+
+            if (!$info = getimagesize($library . $file))
+                die($library . $file . ' is not an image');
+
+            ResizeImage($library . $file, $fileName, 80, 80, $proportional, 'file');
+        }
+        
+        // Get the info for this new temporary file
+        if (!$info = getimagesize($fileName))
+        {
+            echo $fileName . ' is not an image';
+            exit;
+        }
+
+        if ($dynamic && $info[2])
+        {
+            $width  = Kit::GetParam('width', _GET, _INT);
+            $height = Kit::GetParam('height', _GET, _INT);
+
+            // dynamically create an image of the correct size - used for previews
+            ResizeImage($fileName, '', $width, $height, $proportional, 'browser');
+
+            exit;
+        }
+
+        if (!file_exists($fileName))
+        {
+            //not sure
+            Debug::LogEntry('audit', "Cant find: $uid", 'module', 'GetResource');
+
+            $fileName = 'theme/default/img/forms/filenotfound.png';
+        }
+        
+    	$this->ReturnFile($fileName);
+        
+        exit();
+    	
+    }
 }
-?>
\ No newline at end of file
+?>

=== added file 'server/modules/preview/html-preview.css'
--- server/modules/preview/html-preview.css	1970-01-01 00:00:00 +0000
+++ server/modules/preview/html-preview.css	2014-02-12 21:14:59 +0000
@@ -0,0 +1,92 @@
+/* Make the player fill the screen */
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    /* cursor: none; */
+}
+
+div {
+    margin: 0;
+    padding: 0;
+}
+
+/* Make the screen div fill the player */
+div#player {
+    height: 100%;
+    z-index: 1;
+    background-color: #000000;
+}
+
+div#screen {
+    height: 100%;
+    z-index: 1;
+}
+
+/* Style the Splash Screen */
+div#splash {
+    height: 100%;
+    background:#000000 url('../../theme/default/img/xibologo.png') no-repeat center center;
+    background-size: 50%;
+}
+
+div#loader {
+    height: 19px;
+    width: 220px;
+    position: relative;
+    margin:0 auto;
+    top: 80%;
+    background:#000000 url('loader.gif') no-repeat center center;
+    background-size: 100%;
+}
+
+div#loaderCaption p {
+    position: absolute;
+    font-family: sans-serif;
+    color: #ffffff;
+    text-align:center;
+    top: 85%;
+    width: 100%;
+}
+
+div#log {
+    height: 20px;
+    background:#ffffff;
+    position:absolute;
+    bottom:0;
+    width:100%;
+    font-family: sans-serif;
+    opacity:0.4;
+    z-index: 100;
+}
+
+div#info {
+    position: absolute;
+    height: 400px;
+    width: 500px;
+    background:#ffffff;
+    font-family: sans-serif;
+    opacity:0.6;
+    margin:0 auto;
+    z-index: 100;
+}
+
+div#end {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background:#000000;
+    font-family: sans-serif;
+    color:#ffffff;
+    font-size: 300%;
+    margin:0 auto;
+    z-index: 100;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 400px;
+}
+
+video {
+    width: 100%;
+    height: 100%;
+}

=== added file 'server/modules/preview/html-preview.js'
--- server/modules/preview/html-preview.js	1970-01-01 00:00:00 +0000
+++ server/modules/preview/html-preview.js	2014-02-12 21:14:59 +0000
@@ -0,0 +1,499 @@
+/*
+ * Xibo - Digital Signage - http://www.xibo.org.uk
+ * Copyright (C) 2014 Alex Harrington
+ *
+ * This file is part of Xibo.
+ *
+ * Xibo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version. 
+ *
+ * Xibo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* Int: Current logging level */
+var LOG_LEVEL;
+
+/* String: Client Version */
+var VERSION = "1.6.0";
+
+/* Int: Counter to ensure unique IDs */
+var ID_COUNTER = 0;
+
+var PRELOAD;
+
+function dsInit(layoutid) {
+    LOG_LEVEL = 10;
+
+    /* Hide the info and log divs */
+    $("#log").css("display", "none");
+    $("#info").css("display", "none");
+    $("#end").css("display", "none");
+
+    /* Setup a keypress handler for local commands */
+    document.onkeypress = keyHandler;
+
+    playLog(0, "info", "Xibo HTML Preview v" + VERSION + " Starting Up", true);
+    
+    PRELOAD = html5Preloader();
+    runningLayout = new layout(layoutid);
+}
+
+/* Generate a unique ID for region DIVs, media nodes etc */
+function nextId() {
+    if (ID_COUNTER > 500) {
+        ID_COUNTER = 0;
+    }
+    
+    ID_COUNTER = ID_COUNTER + 1;
+    return ID_COUNTER;
+}
+
+/* OnScreen Log */
+function playLog(logLevel, logClass, logMessage, logToScreen) {
+    if (logLevel <= LOG_LEVEL)
+    {
+        var msg = timestamp() + " " + logClass.toUpperCase() + ": " + logMessage;
+        console.log(msg);
+        
+        if (logToScreen) {
+            document.getElementById("log").innerHTML = msg;
+        }
+    }
+}
+
+/* Timestamp Function for Logs */
+function timestamp() {
+    var str = "";
+
+    var currentTime = new Date()
+    var day = currentTime.getDate()
+    var month = currentTime.getMonth() + 1
+    var year = currentTime.getFullYear()
+    var hours = currentTime.getHours()
+    var minutes = currentTime.getMinutes()
+    var seconds = currentTime.getSeconds()
+
+    if (minutes < 10) {
+        minutes = "0" + minutes
+    }
+    if (seconds < 10) {
+        seconds = "0" + seconds
+    }
+    str += day + "/" + month + "/" + year + " ";
+    str += hours + ":" + minutes + ":" + seconds;
+    return str;
+}
+
+/* Function to handle key presses */
+function keyHandler(event) {
+    var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
+    var letter = String.fromCharCode(chCode);
+
+    if (letter == 'l') {
+        if ($("#log").css("display") == 'none') {
+            $("#log").css("display", "block");
+        }
+        else {
+            $("#log").css("display", "none");
+        }
+    }
+    else if (letter == 'i') {
+        if ($("#info").css("display") == 'none') {
+            /* Position the info div */
+            sw = $("#screen").width();
+            sh = $("#screen").height();
+            
+            x = Math.round((sw - 500) / 2);
+            y = Math.round((sh - 400) / 2);
+            
+            if (x > 0) {
+                $("#info").css("left", x);
+            }
+            
+            if (y > 0) {
+                $("#info").css("top", y);
+            }
+            
+            /* Make info div visible */
+            $("#info").css("display", "block");
+        }
+        else {
+            $("#info").css("display", "none");
+        }
+    }
+}
+
+function layout(id) {
+    /* Layout Object */
+    /* Parses a layout and when run runs it in containerName */
+    
+    var self = this;
+    
+    self.parseXlf = function(data) {
+        playLog(10, "debug", "Parsing Layout " + self.id, false);
+        self.containerName = "L" + self.id + "-" + nextId();
+        
+        /* Create a hidden div to show the layout in */
+        $("#screen").append('<div id="' + self.containerName + '"></div>');
+        $("#" + self.containerName).css("display", "none");
+        $("#" + self.containerName).css("outline", "red solid thin");
+        
+        /* Calculate the screen size */
+        self.sw = $("#screen").width();
+        self.sh = $("#screen").height();
+        playLog(7, "debug", "Screen is (" + self.sw + "x" + self.sh + ") pixels");
+        
+        /* Find the Layout node in the XLF */
+        self.layoutNode = data;
+        
+        /* Get Layout Size */
+        self.xw = $(self.layoutNode).filter(":first").attr('width');
+        self.xh = $(self.layoutNode).filter(":first").attr('height');
+        playLog(7, "debug", "Layout is (" + self.xw + "x" + self.xh + ") pixels");
+        
+        /* Calculate Scale Factor */
+        self.scaleFactor = Math.min((self.sw/self.xw), (self.sh/self.xh));
+        self.sWidth = Math.round(self.xw * self.scaleFactor);
+        self.sHeight = Math.round(self.xh * self.scaleFactor);
+        self.offsetX = Math.abs(self.sw - self.sWidth) / 2;
+        self.offsetY = Math.abs(self.sh - self.sHeight) / 2;
+        playLog(7, "debug", "Scale Factor is " + self.scaleFactor);
+        playLog(7, "debug", "Render will be (" + self.sWidth + "x" + self.sHeight + ") pixels");
+        playLog(7, "debug", "Offset will be (" + self.offsetX + "," + self.offsetY + ") pixels");
+        
+        /* Scale the Layout Container */
+        $("#" + self.containerName).css("width", self.sWidth + "px");
+        $("#" + self.containerName).css("height", self.sHeight + "px");
+        $("#" + self.containerName).css("position", "absolute");
+        $("#" + self.containerName).css("left", self.offsetX + "px");
+        $("#" + self.containerName).css("top", self.offsetY + "px");
+        
+        /* Set the layout background */
+        self.bgColour = $(self.layoutNode).filter(":first").attr('bgcolor');
+        self.bgImage = $(self.layoutNode).filter(":first").attr('background');
+        
+        $("#" + self.containerName).css("background-color", self.bgColour);
+        
+        if (!(self.bgImage == "" || self.bgImage == undefined)) {
+            /* Extract the image ID from the filename */
+            self.bgId = self.bgImage.substring(0, self.bgImage.indexOf('.'));
+            
+            PRELOAD.addFiles("index.php?p=module&mod=image&q=Exec&method=GetResource&mediaid=" + self.bgId + "&width=" + self.sWidth + "&height=" + self.sHeight + "&dynamic&proportional=0");
+            $("#" + self.containerName).css("background", "url('index.php?p=module&mod=image&q=Exec&method=GetResource&mediaid=" + self.bgId + "&width=" + self.sWidth + "&height=" + self.sHeight + "&dynamic&proportional=0')");
+            $("#" + self.containerName).css("background-repeat", "no-repeat");
+            $("#" + self.containerName).css("background-size", self.sWidth + "px " + self.sHeight + "px");
+            $("#" + self.containerName).css("background-position", "0px 0px");
+        }
+        
+        $(self.layoutNode).find("region").each(function() { playLog(4, "debug", "Creating region " + $(this).attr('id'), false);
+                                                 self.regionObjects.push(new region(self, $(this).attr('id'), this));
+                                               });
+        playLog(4, "debug", "Layout " + self.id + " has " + self.regionObjects.length + " regions");
+        self.ready = true;
+        PRELOAD.on('finish', self.run);
+    }
+
+    self.run = function() {
+        playLog(4, "debug", "Running Layout ID " + self.id, false);
+        if (self.ready) {
+            $("#" + self.containerName).css("display", "block");
+            $("#splash").css("display", "none");
+            for (var i = 0; i < self.regionObjects.length; i++) {
+                playLog(4, "debug", "Running region " + self.regionObjects[i].id, false);
+                self.regionObjects[i].run();
+            }
+        }
+        else {
+            playLog(4, "error", "Attempted to run Layout ID " + self.id + " before it was ready.", false);
+        }
+    }
+    
+    self.end = function() {
+        /* Ask the layout to gracefully stop running now */
+        for (var i = 0; i < self.regionObjects.length; i++) {
+            self.regionObjects[i].end();
+        }
+    }
+    
+    self.destroy = function() {
+        /* Forcibly remove the layout and destroy this object
+           Layout Object may not be reused after this */
+    }
+
+    self.regionExpired = function() {
+        /* One of the regions on the layout expired
+           Check if all the regions have expired, and if they did
+           end the layout */
+        playLog(5, "debug", "A region expired. Checking if all regions have expired.", false);
+        
+        self.allExpired = true;
+        
+        for (var i = 0; i < self.regionObjects.length; i++) {
+            playLog(4, "debug", "Region " + self.regionObjects[i].id + ": " + self.regionObjects[i].complete, false);
+            if (! self.regionObjects[i].complete) {
+                self.allExpired = false;
+            }
+        }
+        
+        if (self.allExpired) {
+            playLog(4, "debug", "All regions have expired", false);
+            self.end();
+        }
+    }
+    
+    self.regionEnded = function() {
+        /* One of the regions completed it's exit transition
+           Check al the regions have completed exit transitions.
+           If they did, bring on the next layout */
+           
+        playLog(5, "debug", "A region ended. Checking if all regions have ended.", false);
+        
+        self.allEnded = true;
+        
+        for (var i = 0; i < self.regionObjects.length; i++) {
+            playLog(4, "debug", "Region " + self.regionObjects[i].id + ": " + self.regionObjects[i].ended, false);
+            if (! self.regionObjects[i].ended) {
+                self.allEnded = false;
+            }
+        }
+        
+        if (self.allEnded) {
+            playLog(4, "debug", "All regions have ended", false);
+            $("#end").css("display", "block");
+            $("#" + self.containerName).remove();
+        }
+
+    }
+    
+    self.ready = false;
+    self.id = id;
+    self.regionObjects = new Array();
+    
+    playLog(3, "debug", "Loading Layout " + self.id , true);
+    
+    $.get('index.php', {p: 'preview', q: 'getXlf', layoutid: self.id, ajax: 'true'}, self.parseXlf);
+}
+
+function region(parent, id, xml) {
+    var self = this;
+    self.layout = parent;
+    self.id = id;
+    self.xml = xml;
+    self.mediaObjects = new Array();
+    self.currentMedia = -1;
+    self.complete = false;
+    self.containerName = "R-" + self.id + "-" + nextId();
+    self.ending = false;
+    self.ended = false;
+    self.oneMedia = false;
+    self.oldMedia = undefined;
+    self.curMedia = undefined;
+    
+    self.finished = function() {
+        self.complete = true;
+        self.layout.regionExpired()
+    }
+    
+    self.exitTransition = function() {
+        /* TODO: Actually implement region exit transitions */
+        $("#" + self.containerName).css("display", "none");
+        self.exitTransitionComplete();
+    }
+    
+    self.end = function() {
+        self.ending = true;
+        /* The Layout has finished running */
+        /* Do any region exit transition then clean up */
+        self.exitTransition();
+    }
+    
+    self.exitTransitionComplete = function() {
+        self.ended = true;
+        self.layout.regionEnded();
+    }
+    
+    self.transitionNodes = function(oldMedia, newMedia) {
+        /* TODO: Actually support the transition */
+        
+        if (oldMedia == newMedia) {
+            return;
+        }
+        
+        newMedia.run();
+        
+        if (oldMedia) {
+            $("#" + oldMedia.containerName).css("display", "none");
+        }
+        
+        $("#" + newMedia.containerName).css("display", "block");
+    }
+    
+    self.nextMedia = function() {
+        /* The current media has finished running */
+        /* Show the next item */
+        
+        if (self.ended) {
+            return;
+        }
+        
+        if (self.curMedia) {
+            playLog(8, "debug", "nextMedia -> Old: " + self.curMedia.id);
+            self.oldMedia = self.curMedia;
+        }
+        else {
+            self.oldMedia = undefined;
+        }
+        
+        self.currentMedia = self.currentMedia + 1;
+
+        if (self.currentMedia >= self.mediaObjects.length) {
+            self.finished();
+            self.currentMedia = 0;
+        }
+        
+        playLog(8, "debug", "nextMedia -> Next up is media " + (self.currentMedia + 1) + " of " + self.mediaObjects.length);
+        
+        self.curMedia = self.mediaObjects[self.currentMedia];
+        
+        playLog(8, "debug", "nextMedia -> New: " + self.curMedia.id);
+        
+        /* Do the transition */
+        self.transitionNodes(self.oldMedia, self.curMedia);
+    }
+    
+    self.run = function() {
+        self.nextMedia();
+    }
+    
+    self.sWidth = $(xml).attr("width") * self.layout.scaleFactor;
+    self.sHeight = $(xml).attr("height") * self.layout.scaleFactor;
+    self.offsetX = $(xml).attr("left") * self.layout.scaleFactor;
+    self.offsetY = $(xml).attr("top") * self.layout.scaleFactor;
+    
+    $("#" + self.layout.containerName).append('<div id="' + self.containerName + '"></div>');
+    
+    /* Scale the Layout Container */
+    $("#" + self.containerName).css("width", self.sWidth + "px");
+    $("#" + self.containerName).css("height", self.sHeight + "px");
+    $("#" + self.containerName).css("position", "absolute");
+    $("#" + self.containerName).css("left", self.offsetX + "px");
+    $("#" + self.containerName).css("top", self.offsetY + "px");
+
+    playLog(4, "debug", "Created region " + self.id, false);
+    playLog(7, "debug", "Render will be (" + self.sWidth + "x" + self.sHeight + ") pixels");
+    playLog(7, "debug", "Offset will be (" + self.offsetX + "," + self.offsetY + ") pixels");
+    
+    $(self.xml).find("media").each(function() { playLog(5, "debug", "Creating media " + $(this).attr('id'), false);
+                                                self.mediaObjects.push(new media(self, $(this).attr('id'), this));
+                                              });
+    
+    playLog(4, "debug", "Region " + self.id + " has " + self.mediaObjects.length + " media items");
+}
+
+function media(parent, id, xml) {
+    var self = this;
+    self.region = parent
+    self.xml = xml
+    self.id = id
+    self.containerName = "M-" + self.id + "-" + nextId();
+    
+    self.run = function() {
+        playLog(5, "debug", "Running media " + self.id + " for " + self.duration + " seconds")
+        
+        if (($(self.xml).attr('type') == "video")) {
+            $("#" + self.containerName + "-vid").get(0).play();
+        }
+        
+        if (self.duration == 0) {
+            if (($(self.xml).attr('type') == "video")) {
+                $("#" + self.containerName + "-vid").bind("ended", self.region.nextMedia);
+            }
+            else {
+                self.duration = 10;
+                setTimeout(self.region.nextMedia, self.duration * 1000);
+            }
+        }
+        else {
+            setTimeout(self.region.nextMedia, self.duration * 1000);
+        }
+    }
+    
+    self.divWidth = self.region.sWidth;
+    self.divHeight = self.region.sHeight;
+    
+    /* Build Media Options */
+    self.duration = $(self.xml).attr('duration');
+    self.lkid = $(self.xml).attr('lkid');
+    self.options = new Array();
+    
+    $(self.xml).find('options').children().each(function() { playLog(9, "debug", "Option " + this.nodeName.toLowerCase() + " -> " + $(this).text(), false);
+                                                             self.options[this.nodeName.toLowerCase()] = $(this).text();
+                                                });
+    
+    $("#" + self.region.containerName).append('<div id="' + self.containerName + '"></div>');
+
+    /* Scale the Content Container */
+    $("#" + self.containerName).css("display", "none");
+    $("#" + self.containerName).css("width", self.divWidth + "px");
+    $("#" + self.containerName).css("height", self.divHeight + "px");
+    $("#" + self.containerName).css("position", "absolute");
+    /* $("#" + self.containerName).css("left", self.offsetX + "px");
+    $("#" + self.containerName).css("top", self.offsetY + "px"); */
+    
+    if ($(self.xml).attr('type') == "image") {
+        var tmpUrl = "index.php?p=module&mod=image&q=Exec&method=GetResource&layoutid=" + self.region.layout.id + "&regionid=" + self.region.id + "&mediaid=" + self.id + "&lkid=" + self.lkid;
+        PRELOAD.addFiles(tmpUrl);
+        $("#" + self.containerName).css("background-image", "url('" + tmpUrl + "')");
+    }
+    else if (($(self.xml).attr('type') == "text")) {
+        $("#" + self.containerName).append('<iframe scrolling="no" id="innerIframe" src="index.php?p=module&mod=text&q=Exec&method=GetResource&raw=true&preview=true&layoutid=' + self.region.layout.id + '&regionid=' + self.region.id + '&mediaid=' + self.id + '&lkid=&width=' + self.divWidth + '&height=' + self.divHeight + '" width="' + self.divWidth + 'px" height="' + self.divHeight + 'px" style="border:0;"></iframe>');
+    }
+    else if (($(self.xml).attr('type') == "ticker")) {
+        $("#" + self.containerName).append('<iframe scrolling="no" id="innerIframe" src="index.php?p=module&mod=ticker&q=Exec&method=GetResource&raw=true&preview=true&layoutid=' + self.region.layout.id + '&regionid=' + self.region.id + '&mediaid=' + self.id + '&lkid=&width=' + self.divWidth + '&height=' + self.divHeight + '" width="' + self.divWidth + 'px" height="' + self.divHeight + 'px" style="border:0;"></iframe>');
+        /* Check if the ticker duration is based on the number of items in the feed */
+        if (self.options['durationisperitem'] == '1') {
+            var regex =  new RegExp("<!-- NUMITEMS=(.*?) -->"); 
+            jQuery.ajax({
+                url: 'index.php?p=module&mod=ticker&q=Exec&method=GetResource&raw=true&preview=true&layoutid=' + self.region.layout.id + '&regionid=' + self.region.id + '&mediaid=' + self.id + '&lkid=&width=' + self.divWidth + '&height=' + self.divHeight,
+                success: function(html) {
+                  res = regex.exec(html);
+                  if (res != null) {
+                    /* The ticker is duration per item, so multiply the duration
+                       by the number of items from the feed */
+                    self.duration = parseInt(self.duration) * parseInt(res[1]);
+                  }
+                },
+                async:false
+            });
+        }
+    }
+    else if (($(self.xml).attr('type') == "video")) {
+        var tmpUrl = "index.php?p=module&mod=video&q=Exec&method=GetResource&layoutid=" + self.region.layout.id + "&regionid=" + self.region.id + "&mediaid=" + self.id + "&lkid=" + self.lkid;
+        PRELOAD.addFiles(tmpUrl);
+        $("#" + self.containerName).append('<video id="' + self.containerName + '-vid" preload="auto"><source src="' + tmpUrl + '"></video>');
+    }
+    else if (($(self.xml).attr('type') == "flash")) {
+        var tmpUrl = "index.php?p=module&mod=flash&q=Exec&method=GetResource&layoutid=" + self.region.layout.id + "&regionid=" + self.region.id + "&mediaid=" + self.id + "&lkid=" + self.lkid;
+        var embedCode = '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="Yourfilename" ALIGN="">';
+        embedCode = embedCode + '<PARAM NAME=movie VALUE="' + tmpUrl + '"> <PARAM NAME=quality VALUE=high> <param name="wmode" value="transparent"> <EMBED src="' + tmpUrl + '" quality="high" wmode="transparent" WIDTH="100%" HEIGHT="100%" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>';
+        PRELOAD.addFiles(tmpUrl);
+        $("#" + self.containerName).append(embedCode);
+    }
+    else {
+        $("#" + self.containerName).css("outline", "red solid thin");
+    }
+    $("#" + self.containerName).css("background-size", "contain");
+    $("#" + self.containerName).css("background-repeat", "no-repeat");
+    $("#" + self.containerName).css("background-position", "center");
+    
+    playLog(5, "debug", "Created media " + self.id)
+}
+

=== added file 'server/modules/preview/html5Preloader.js'
--- server/modules/preview/html5Preloader.js	1970-01-01 00:00:00 +0000
+++ server/modules/preview/html5Preloader.js	2014-02-12 21:14:59 +0000
@@ -0,0 +1,448 @@
+var html5Preloader = (function () {
+
+var	XHR = typeof XMLHttpRequest === 'undefined' ? function () { // IE FIX
+		try {
+			return new ActiveXObject("Msxml2.XMLHTTP.6.0");
+		} catch (err1) {}
+		try {
+			return new ActiveXObject("Msxml2.XMLHTTP.3.0");
+		} catch (err2) {}
+
+		return null;
+	} : XMLHttpRequest,
+	AudioElement = typeof Audio !== 'undefined' ? // IE FIX
+		function(){
+			return new Audio();
+		} :
+		function(){
+			return document.createElement('audio');
+		},
+	VideoElement = typeof Video !== 'undefined' ? // IE FIX
+		function () {
+			return new Video();
+		} :
+		function () {
+			return document.createElement('video');
+		},
+	ImageElement = function () {
+		return new Image();
+	},
+	codecs = { // Chart from jPlayer
+		oga: { // OGG
+			codec: 'audio/ogg; codecs="vorbis"',
+			media: 'audio'
+		},
+		wav: { // PCM
+			codec: 'audio/wav; codecs="1"',
+			media: 'audio'
+		},
+		webma: { // WEBM
+			codec: 'audio/webm; codecs="vorbis"',
+			media: 'audio'
+		},
+		mp3: {
+			codec: 'audio/mpeg; codecs="mp3"',
+			media: 'audio'
+		},
+		m4a: { // AAC / MP4
+			codec: 'audio/mp4; codecs="mp4a.40.2"',
+			media: 'audio'
+		},
+		ogv: { // OGG
+			codec: 'video/ogg; codecs="theora, vorbis"',
+			media: 'video'
+		},
+		webmv: { // WEBM
+			codec: 'video/webm; codecs="vorbis, vp8"',
+			media: 'video'
+		},
+		m4v: { // H.264 / MP4
+			codec: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+			media: 'video'
+		}
+	},
+	support = {
+		imageTypes: ['jpg', 'png', 'jpeg', 'tiff', 'gif']
+	},
+	ID_PREFIX = 'FILE@';
+/* :) may fail sometimes, but these are the most common cases */
+codecs.ogg = codecs.oga;
+codecs.mp4 = codecs.m4v;
+codecs.webm = codecs.webmv;
+
+function isIn (needle, haystack) {
+	for (var i=0; i<haystack.length; i++) {
+		if (haystack[i] === needle) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+function map (arr, callback) {
+	if (arr.map) {
+		return arr.map(callback);
+	}
+
+	var	r = [],
+		i;
+	for (i=0; i<arr.length; i++) {
+		r.push(callback(arr[i]));
+	}
+
+	return r;
+}
+
+function bind (func, self) {
+	return func.bind ? func.bind(self) : function () {
+		return func.apply(self, arguments);
+	};
+}
+
+function delay (callback) {
+	var args = [].slice.call(arguments, 1);
+	setTimeout(function () {
+		callback.apply(this, args);
+	}, 0);
+}
+
+function EventEmitter () {
+	var k;
+	for (k in EventEmitter.prototype) {
+		if (EventEmitter.prototype.hasOwnProperty(k)) {
+			this[k] = EventEmitter.prototype[k];
+		}
+	}
+	this._listeners = {};
+};
+
+EventEmitter.prototype = {
+	_listeners: null,
+
+	emit: function (name, args) {
+		args = args || [];
+		if (this._listeners[name]) {
+			for (var i=0; i<this._listeners[name].length; i++) {
+				this._listeners[name][i].apply(this, args);
+			}
+		}
+		return this;
+	},
+
+	on: function (name, listener) {
+		this._listeners[name] = this._listeners[name] || [];
+		this._listeners[name].push(listener);
+		return this;
+	},
+
+	off: function (name, listener) {
+		if (this._listeners[name]) {
+			if (!listener) {
+				delete this._listeners[name];
+				return this;
+			}
+			for (var i=0; i<this._listeners[name].length; i++) {
+				if (this._listeners[name][i] === listener) {
+					this._listeners[name].splice(i--, 1);
+				}
+			}
+			this._listeners[name].length || delete this._listeners[name];
+		}
+		return this;
+	},
+
+	once: function (name, listener) {
+		function ev () {
+			this.off(ev);
+			return listener.apply(this, arguments);
+		}
+
+		return this.on(name, ev);
+	}
+};
+
+function loadFile (file, callback, timeout) {
+	if (!(this instanceof loadFile)) {
+		return new loadFile(file, callback, timeout);
+	}
+
+	var	self		= this,
+		alternates	= [],
+		a, b, c, t;
+
+	if (typeof file === 'string') {
+		a = file.split('*:');
+		b = a[ a[1] ? 1 : 0 ].split('||');
+		self.id = a[1] ? a[0] : b[0];
+		self.alternates = alternates;
+
+		for (a=0; a<b.length; a++) {
+			c = b[a].split('.');
+			c = c[c.length - 1].toLowerCase();
+
+			t = codecs[c] ? codecs[c].media : isIn(c, support.imageTypes) ? 'image' : 'document';
+
+			if (codecs[c] && !codecs[c].supported) {
+				continue;
+			}
+
+			alternates.push({
+				type: t,
+				path: b[a]
+			});
+		}
+
+		alternates.length || alternates.push({
+			type: t,
+			path: b[a-1]
+		});
+	} else {
+		delay(callback, TypeError('Invalid path'), self);
+		return;
+	}
+
+	function loadNext() {
+		var file = alternates.shift(),
+			_timeoutTimer = null;
+
+		if (!file) {
+			delay(callback, {e: Error('No viable alternatives')}, null);
+			return;
+		}
+
+		if (typeof timeout === 'number') {
+			_timeoutTimer = setTimeout(function() {
+				delay(callback, {e: Error('Load event not fired within ' + timeout + 'ms')}, self);
+			}, timeout);
+		}
+
+		new loadFile[file.type](
+				file.path,
+				function (e, f) {
+
+					_timeoutTimer && clearTimeout(_timeoutTimer);
+
+					self.dom = f && f.dom;
+
+					if (e && self.alternates.length) {
+						return loadNext();
+					}
+
+					callback(e, self);
+				});
+	}
+
+	loadNext();
+}
+
+function MediaFile (construct) {
+	return function (filename, callback) {
+		var	self = this,
+			file = construct();
+
+		function onready () {
+			file.onload = file.onerror = null;
+			file.removeEventListener && file.removeEventListener('canplaythrough', onready, true);
+
+			callback(null, self);
+		}
+
+		file.addEventListener && file.addEventListener('canplaythrough', onready, true);
+		file.onload = onready;
+		file.onerror = function (e) {
+			callback(e, self);
+		};
+
+		self.dom = file;
+		file.src = filename;
+
+		file.load && file.load();
+	};
+}
+
+loadFile.audio = MediaFile(AudioElement);
+loadFile.video = MediaFile(VideoElement);
+loadFile.image = MediaFile(ImageElement);
+
+loadFile.document = function (file, callback) {
+	var	self		= this,
+		parsedUrl	= /(\[(!)?(.+)?\])?$/.exec(file),
+		mimeType	= parsedUrl[3],
+		xhr		= self.dom = new XHR();
+
+	if (!xhr) {
+		delay(callback, Error('No XHR!'), self);
+		return;
+	}
+
+	file		= file.substr(0, file.length - parsedUrl[0].length);
+	file		+= parsedUrl[2] ? (file.indexOf('?') === -1 ? '?' : '&') + 'fobarz=' + (+new Date) : '';
+
+	mimeType && xhr.overrideMimeType(mimeType === '@' ? 'text/plain; charset=x-user-defined' : mimeType);
+
+	xhr.onreadystatechange = function () {
+		if (xhr.readyState !== 4) return;
+
+		try {
+			self.dom = xhr.responseXML && xhr.responseXML.documentElement ?
+				xhr.responseXML :
+				String(xhr.responseText || '') ;
+
+			xhr.status === 200 ?
+				callback(null, self) :
+				callback({e: Error('Request failed: ' + xhr.status)}, self) ;
+		} catch (e) {
+			callback({e: e}, self);
+		}
+	};
+
+	xhr.onerror = function (e) {
+		callback(e, self);
+	};
+
+	xhr.open('GET', file, true);
+	xhr.send();
+};
+
+(function () {
+	var 	dummyAudio = AudioElement(),
+		dummyVideo = VideoElement(),
+		i;
+
+	support.audio = !!dummyAudio.canPlayType;
+	support.video = !!dummyVideo.canPlayType;
+
+	support.audioTypes = [];
+	support.videoTypes = [];
+
+	for (i in codecs) {
+		if (codecs.hasOwnProperty(i)) {
+			if (codecs[i].media === 'video') {
+				(codecs[i].supported = support.video &&
+					dummyVideo.canPlayType(codecs[i].codec)) &&
+					support.videoTypes.push(i);
+			} else if (codecs[i].media === 'audio') {
+				(codecs[i].supported = support.audio &&
+					dummyAudio.canPlayType(codecs[i].codec)) &&
+					support.audioTypes.push(i);
+			}
+		}
+	}
+}());
+
+if (!support.audio) {
+	loadFile.audio = function (a, callback) {
+		delay(callback, Error('<AUDIO> not supported.'), a);
+	};
+}
+if (!support.video) {
+	loadFile.video = function (a, callback) {
+		delay(callback, Error('<VIDEO> not supported.'), a);
+	};
+}
+
+function html5Preloader () {
+	var	self = this,
+		args = arguments;
+
+	if (!(self instanceof html5Preloader)) {
+		self = new html5Preloader();
+		args.length && self.loadFiles.apply(self, args);
+		return self;
+	}
+
+	self.files = [];
+
+	html5Preloader.EventEmitter.call(self);
+
+	self.loadCallback = bind(self.loadCallback, self);
+
+	args.length && self.loadFiles.apply(self, args);
+}
+
+html5Preloader.prototype = {
+	active: false,
+	files: null,
+	filesLoading: 0,
+	filesLoaded: 0,
+	filesLoadedMap: {},
+	timeout: null,
+
+	loadCallback: function (e, f) {
+
+		if (!this.filesLoadedMap[f.id]) {
+			this.filesLoaded++;
+			this.filesLoadedMap[f.id] = f;
+		}
+
+		this.emit(e ? 'error' : 'fileloaded', e ? [e, f] : [f]);
+
+		if (this.filesLoading - this.filesLoaded === 0) {
+			this.active = false;
+			this.emit('finish');
+			this.filesLoading = 0;
+			this.filesLoaded = 0;
+		}
+	},
+
+	getFile: function (id) {
+		return	typeof id === 'undefined' ? map(this.files, function (f) {
+				return f.dom;
+			}) :
+			typeof id === 'number' ? this.files[id].dom :
+			typeof id === 'string' ? this.files[ID_PREFIX + id].dom :
+			null;
+	},
+
+	removeFile: function (id) {
+		var f, i;
+		switch (typeof id) {
+		case 'undefined':
+			this.files = [];
+			break;
+		case 'number':
+			f = this.files[id];
+			this.files[ID_PREFIX + f.id] && delete this.files[ID_PREFIX + f.id];
+			this.files.splice(id, 1);
+			break;
+		case 'string':
+			f = this.files[ID_PREFIX + id];
+			f && delete this.files[ID_PREFIX + id];
+
+			for (i=0; i<this.files.length; i++) {
+				this.files[i] === f && this.files.splice(i--, 1);
+			}
+		}
+	},
+
+	loadFiles: function () {
+		var	files	= [].slice.call(arguments),
+			i, f;
+
+		for (i=0; i<files.length; i++) {
+			f = html5Preloader.loadFile(files[i], this.loadCallback, this.timeout);
+			this.files.push(f);
+			this.files[ID_PREFIX + f.id] = f;
+			this.filesLoading++;
+		}
+
+		this.active = this.active || !!this.filesLoading;
+	},
+
+	addFiles: function (list) {
+		return this.loadFiles.apply(this, list instanceof Array ? list : arguments);
+	},
+
+	getProgress: function () {
+		return this.filesLoading ? this.filesLoaded / this.filesLoading : 1.0;
+	}
+};
+
+html5Preloader.support = support;
+html5Preloader.loadFile = loadFile;
+html5Preloader.EventEmitter = EventEmitter;
+
+return html5Preloader;
+
+}());

=== added file 'server/modules/preview/loader.gif'
Binary files server/modules/preview/loader.gif	1970-01-01 00:00:00 +0000 and server/modules/preview/loader.gif	2014-02-12 21:14:59 +0000 differ
=== modified file 'server/modules/video.module.php'
--- server/modules/video.module.php	2014-01-18 09:47:41 +0000
+++ server/modules/video.module.php	2014-02-12 21:14:59 +0000
@@ -108,5 +108,16 @@
     {
         return $this->EditLibraryMedia();
     }
+    
+    /**
+     * Get Resource
+     */
+    public function GetResource($displayId = 0)
+    {
+    	$this->ReturnFile();
+        
+        exit();
+    	
+    }
 }
-?>
\ No newline at end of file
+?>

=== modified file 'server/theme/default/html/layout_designer.php'
--- server/theme/default/html/layout_designer.php	2014-01-18 09:47:41 +0000
+++ server/theme/default/html/layout_designer.php	2014-02-12 21:14:59 +0000
@@ -45,6 +45,7 @@
 				<li><a class="XiboFormButton" href="<?php echo Theme::Get('layout_form_edit_background_url'); ?>" title="<?php echo Theme::Translate('Background'); ?>"><span><?php echo Theme::Translate('Background'); ?></span></a></li>
 				<li><a class="XiboFormButton" href="<?php echo Theme::Get('layout_form_edit_url'); ?>" title="<?php echo Theme::Translate('Edit the Layout Properties'); ?>"><span><?php echo Theme::Translate('Properties'); ?></span></a></li>
 				<li class="divider"></li>
+                <li><a href="<?php echo Theme::Get('layout_form_preview_url'); ?>" title="<?php echo Theme::Translate('Preview Layout'); ?>" target="_blank"><span><?php echo Theme::Translate('Preview Layout'); ?></span></a></li>
 				<li><a class="XiboFormButton" href="<?php echo Theme::Get('layout_form_schedulenow_url'); ?>" title="<?php echo Theme::Translate('Schedule Now'); ?>"><span><?php echo Theme::Translate('Schedule Now'); ?></span></a></li>
 				<li><a class="XiboFormButton" href="<?php echo Theme::Get('layout_form_savetemplate_url'); ?>" title="<?php echo Theme::Translate('Save Template'); ?>"><span><?php echo Theme::Translate('Save Template'); ?></span></a></li>
 			</ul>
@@ -85,4 +86,4 @@
             <div class="XiboData"></div>
         </div>
 	</div>
-</div>
\ No newline at end of file
+</div>

=== modified file 'server/theme/default/html/layout_page_grid.php'
--- server/theme/default/html/layout_page_grid.php	2014-02-08 14:55:15 +0000
+++ server/theme/default/html/layout_page_grid.php	2014-02-12 21:14:59 +0000
@@ -59,7 +59,7 @@
     				</button>
     				<ul class="dropdown-menu">
 						<?php foreach($row['buttons'] as $button) { ?>
-						<li class="<?php echo (($button['id'] == 'layout_button_design') ? 'XiboRedirectButton' : 'XiboFormButton'); ?>" href="<?php echo $button['url']; ?>"><a tabindex="-1" href="#"><?php echo $button['text']; ?></a></li>
+						<li class="<?php echo ((($button['id'] == 'layout_button_design') or ($button['id'] == 'layout_button_preview')) ? 'XiboRedirectButton' : 'XiboFormButton'); ?>" href="<?php echo $button['url']; ?>" <?php echo (($button['id'] == 'layout_button_preview') ? ' target="_blank"' : ''); ?> ><a tabindex="-1" href="#"><?php echo $button['text']; ?></a></li>
 						<?php } ?>
     				</ul>
   				</div>
@@ -67,4 +67,4 @@
 		</tr>
 		<?php } ?>
 	</tbody>
-</table>
\ No newline at end of file
+</table>

=== modified file 'server/theme/default/html/library_page_grid.php'
--- server/theme/default/html/library_page_grid.php	2014-02-08 14:55:15 +0000
+++ server/theme/default/html/library_page_grid.php	2014-02-12 21:14:59 +0000
@@ -68,8 +68,18 @@
       					<span class="icon-tasks"></span>
     				</button>
     				<ul class="dropdown-menu">
-						<?php foreach($row['buttons'] as $button) { ?>
-						<li class="XiboFormButton" href="<?php echo $button['url']; ?>"><a tabindex="-1" href="#"><?php echo $button['text']; ?></a></li>
+						<?php foreach($row['buttons'] as $button) {
+						    if ($button['id'] == 'content_button_download') {
+						    ?>
+						    <li><a tabindex="-1" href="<?php echo $button['url']; ?>"><?php echo $button['text']; ?></a></li>
+						    <?php
+						    }
+						    else {
+						    ?>
+						    <li class="XiboFormButton" href="<?php echo $button['url']; ?>"><a tabindex="-1" href="#"><?php echo $button['text']; ?></a></li>
+						    <?php
+						    } ?>
+						
 						<?php } ?>
     				</ul>
     			</div>
@@ -77,4 +87,4 @@
 		</tr>
 		<?php } ?>
 	</tbody>
-</table>
\ No newline at end of file
+</table>

=== modified file 'server/theme/default/js/xibo-layout-designer.js'
--- server/theme/default/js/xibo-layout-designer.js	2014-01-18 09:47:41 +0000
+++ server/theme/default/js/xibo-layout-designer.js	2014-02-12 21:14:59 +0000
@@ -310,5 +310,5 @@
 	//Want to attach an onchange event to the drop down for the bg-image
 	var id = $('#bg_image').val();
 
-	$('#bg_image_image').attr("src", "index.php?p=module&q=GetImage&id=" + id + "&width=80&height=80&dynamic");
-}
\ No newline at end of file
+	$('#bg_image_image').attr("src", "index.php?p=module&mod=image&q=Exec&method=GetResource&mediaid=" + id + "&width=80&height=80&dynamic");
+}