Ignore:
Timestamp:
07/29/10 13:30:11 (3 years ago)
Author:
zach
Message:

fixing testing page problems

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/js/test/index.php

    r1191 r1192  
    11<html> 
    22<head> 
     3<title>JW Player Testing</title> 
    34<link rel="stylesheet" href="files/style.css" type="text/css"> 
     5<script type="text/javascript" src="files/jquery.js"></script> 
     6<script type="text/javascript" src="files/swfobject.js"></script> 
     7<script type="text/javascript" src="settings.js"></script> 
     8<script type="text/javascript"> 
     9 
     10 
     11 
     12 
     13        /** 
     14        * Initialization section. Parses settings.js and the browser querystring. 
     15        * This section is only executed on page (re)load. 
     16        **/ 
     17 
     18        /** The complete list with all current flashvars. **/ 
     19        var variables = {width:500,height:260}; 
     20        /** When jQuery is loaded, we initialize everything. **/ 
     21        $().ready(function() { loadSettings(); }); 
     22        /** Load the settings and querystring. **/ 
     23        function loadSettings() { 
     24                // load the settings. 
     25                for (itm in settings['examples']) { $("#examples").append("<option>"+itm+"</option>"); } 
     26                for (itm in settings['players']) { $("#players").append("<option>"+itm+"</option>"); } 
     27                for (itm in settings['skins']) { $("#skins").append("<option>"+itm+"</option>"); } 
     28                for (itm in settings['plugins']) { $("#plugins").append("<option>"+itm+"</option>"); } 
     29                // When an example is selected, we reload the entire page. 
     30                $("#examples").change(function(evt) { 
     31                        evt.preventDefault(); 
     32                        var obj = settings.examples[$('#examples').val()]; 
     33                        window.top.location.href = window.top.location.pathname+'?'+$.param(obj); 
     34                 }); 
     35                // get the options from the querystring. 
     36                window.top.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g,function () { 
     37                        variables[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); 
     38                }); 
     39                // set the value and handler on player, skin and plugins. 
     40                if(variables['player']) { $('#players').val(variables['player']); } 
     41                $("#players").change(function(evt) { reloadFieldsets(evt); }); 
     42                if(variables['skin']) {  
     43                        if(!settings['skins'][variables['skin']]) {  
     44                                $("#skins").prepend("<option>"+variables['skin']+"</option>"); 
     45                        } 
     46                        $('#skins').val(variables['skin']);  
     47                } 
     48                $("#skins").change(function(evt) { insertPlayer(evt); }); 
     49                if(variables['plugins']) {  
     50                        var arr = variables['plugins'].split(','); 
     51                        for(var i =0; i<arr.length; i++) {  
     52                                if(!settings['plugins'][arr[i]]) {  
     53                                        $("#plugins").append("<option>"+arr[i]+"</option>"); 
     54                                } 
     55                        } 
     56                        $('#plugins').val(arr);  
     57                } 
     58                $("#plugins").change(function(evt) { reloadFieldsets(evt); }); 
     59                // set the handler on the flashvars and load the whole bunch. 
     60                $("#flashvarsform").submit(function(evt) {                      if(evt) { evt.preventDefault(); } location.href = location.href.split("?")[0] + "?"+$.param(getVariables()['variables'])  }); 
     61                $('#javascript').css('display','block'); 
     62                $("#variablesform").submit(function(evt) { getVariable(evt); }); 
     63                $("#sendeventform").submit(function(evt) { sendEvent(evt); }); 
     64                $("#listenersform").submit(function(evt) { setListener(evt); }); 
     65                reloadFieldsets(); 
     66        }; 
     67 
     68 
     69 
     70 
     71        /** 
     72        * Fieldset insertion section. Loads the player/plugins XML files to print the appropriate fieldsets. 
     73        * This section is executed every time the player/plugins selection changes. 
     74        **/ 
     75 
     76        /** The number of XML files that still need to be parsed. **/ 
     77        var parsing; 
     78        /** All variables that are inserted in an XML-defined field. **/ 
     79        var prefilled; 
     80        /** Check for inserting of fieldsets. **/ 
     81        function reloadFieldsets(evt) { 
     82                if(evt) { evt.preventDefault(); } 
     83                $("#flashvarsform > .removable").remove(); 
     84                $("#fieldsettabs > .removable").remove(); 
     85                $("#custom > .removable").remove(); 
     86                parsing = 1; 
     87                prefilled = {plugins:'',player:'',skin:''}; 
     88                var swf = settings.players[$("#players").val()]; 
     89                var xml = swf.substr(0,swf.length-4) + '.xml'; 
     90                parsePlayerXML(xml); 
     91                var str = $("#plugins").val(); 
     92                if(str != null) { 
     93                        arr = str.toString().split(','); 
     94                        for (var i=0; i<arr.length; i++) { 
     95                                swf = settings['plugins'][arr[i]]; 
     96                                if(swf && swf.substr(-4) == '.swf') {  
     97                                        parsing++; 
     98                                        xml = swf.substr(0,swf.length-4) + '.xml'; 
     99                                        parsePluginXML(xml,arr[i]); 
     100                                } 
     101                        } 
     102                } 
     103        }; 
     104        /** Insert a specific plugin fieldset. **/ 
     105        function parsePlayerXML(url) { 
     106                $.get(url,{},function(xml) { 
     107                        var arr = $('player',xml).find('flashvars'); 
     108                        for (var i=0; i<arr.length; i++) { 
     109                                var nam = $(arr[i]).attr('section').toLowerCase(); 
     110                                insertFieldset(arr[i],nam); 
     111                        } 
     112                        parsing--; 
     113                        if(parsing == 0) { setCustomTabbing(); } 
     114                }); 
     115        }; 
     116        /** Insert a specific plugin fieldset. **/ 
     117        function parsePluginXML(url,nam) { 
     118                $.get(url,{},function(xml) { 
     119                        var arr = $('flashvars',xml).find('flashvar'); 
     120                        if(arr.length > 0) { 
     121                                insertFieldset(xml,nam,true); 
     122                        } 
     123                        parsing--; 
     124                        if(parsing == 0) { setCustomTabbing(); } 
     125                }); 
     126        }; 
     127        /** Insert a specific plugin fieldset. **/ 
     128        function insertFieldset(xml,nam,plg) { 
     129                var tit = nam.substr(0,1).toUpperCase()+nam.substr(1); 
     130                var set = '<fieldset id="'+nam+'" class="removable">'; 
     131                var arr = $(xml).find('flashvar'); 
     132                $("#customli").before('<li class="removable">'+tit+'</li>'); 
     133                for (var i=0; i<arr.length; i++) { 
     134                        var val = $('name',arr[i]).text(); 
     135                        if(plg) { val = nam+'.'+val; } 
     136                        set +='<label>'+val+'</label><input type="text" name="'+val+'" '; 
     137                        if(variables[val]) { 
     138                                set += 'value="'+variables[val]+'" '; 
     139                                prefilled[val] = variables[val]; 
     140                        } 
     141                        set += "/>"; 
     142                } 
     143                set += '</fieldset>'; 
     144                $('#custom').before(set); 
     145        }; 
     146        /** Set the custom fields and the tabbing functionality. **/ 
     147        function setCustomTabbing() { 
     148                for(var itm in variables) {  
     149                        if(prefilled[itm] == undefined) { 
     150                                var elm = '<label class="removable">'+itm+'</label>' 
     151                                elm += '<input type="text" name="'+itm+'" value="'+variables[itm]+'" class="removable"/>'; 
     152                                $("#custom").append(elm); 
     153                        } 
     154                } 
     155                $('li').click(function() { 
     156                        $('li').removeClass('active'); 
     157                        $(this).addClass('active'); 
     158                        var itm = $(this).text().toLowerCase(); 
     159                        doTab($.trim(itm)); 
     160                }); 
     161                doTab('sources'); 
     162                insertPlayer(); 
     163        }; 
     164        /** Flip to a tab. **/ 
     165        function doTab(itm) { 
     166                var arr = $("#flashvarsform").find('fieldset'); 
     167                for(var i=0; i<arr.length; i++) { 
     168                        if($(arr[i]).attr('id') == itm) { 
     169                                $(arr[i]).css('display','block'); 
     170                        } else { 
     171                                $(arr[i]).css('display','none'); 
     172                        } 
     173                } 
     174        }; 
     175 
     176 
     177 
     178   function getVariables(){ 
     179                var vrs = {}; 
     180                variables = {} 
     181                variables['player'] = $('#players').val(); 
     182                var skn = $("#skins").val(); 
     183                if(skn != ' ') { 
     184                        variables['skin'] = skn; 
     185                        if(settings['skins'][skn]) {  
     186                                skn = settings['skins'][skn];  
     187                        } 
     188                        vrs['skin'] =skn; 
     189                } 
     190                if($("#plugins").val() != null) { 
     191                        var plg = []; 
     192                        var arr = $("#plugins").val(); 
     193                        for(var i=0; i<arr.length; i++) { 
     194                                if(settings['plugins'][arr[i]]) {  
     195                                        plg.push(settings['plugins'][arr[i]]); 
     196                                } else {  
     197                                        plg.push(arr[i]); 
     198                                } 
     199                        } 
     200                        vrs['plugins'] = plg.join(','); 
     201                        variables['plugins'] = arr.join(','); 
     202                } 
     203                var arr = $("#flashvarsform").find('input'); 
     204                for(var i=0; i<arr.length; i++) { 
     205                        if($(arr[i]).val()) { 
     206                                vrs[$(arr[i]).attr('name')] = $(arr[i]).val(); 
     207                                variables[$(arr[i]).attr('name')] = $(arr[i]).val(); 
     208                        } 
     209                } 
     210                variables['htmlblock'] = $('#htmlblock').val(); 
     211                variables['scripts'] = $('#scripts').val(); 
     212                return {'vrs':vrs,'variables':variables}; 
     213   } 
     214    
     215    
     216   function swfobjectembed(){ 
     217                var temp = getVariables(); 
     218                var vrs = temp['vrs']; 
     219                var variables = temp['variables']; 
     220                $('#preview').css('height',vrs['height']); 
     221                $('#preview').html('<div id="container"></div>'); 
     222                swfobject.embedSWF( 
     223                        settings.players[$('#players').val()], 
     224                        'container', 
     225                        vrs['width'], 
     226                        vrs['height'], 
     227                        '9.0.0', 
     228                        null, 
     229                        vrs, 
     230                        {allowfullscreen:'true',allowscriptaccess:'always'}, 
     231                        {id:'player',name:'player'} 
     232                ); 
     233                var lnk = 'http://developer.longtailvideo.com/trac/testing/'; 
     234                $("#permalink").val(lnk+'?'+$.param(variables)); 
     235   } 
     236 
     237 
     238        /** 
     239        * Player insertion section. Gathers variables from all fields and prints the player on the page. 
     240        * This section is executed every time the flashvars form is submitted. 
     241        **/ 
     242 
     243        /** Print the player on the page. **/ 
     244        function insertPlayer(evt) { 
     245        if(evt) { evt.preventDefault(); } 
     246        eval(settings['script'][$("#scripts").val()]+"();"); 
     247        }; 
     248 
     249 
     250 
     251 
     252        /** 
     253        * Player API section. Contains functions for getting a player reference and executing API calls. 
     254        * This section is executed when a user starts interacting with the player API. 
     255        **/ 
     256 
     257        /** Reference to the player **/ 
     258        var player; 
     259        /** When the player is ready and the API forms can be shown, display them. **/ 
     260        function playerReady(obj) { 
     261                player = document.getElementById(obj['id']); 
     262        }; 
     263        /** Get a variable from the player. **/ 
     264        function getVariable(evt) { 
     265                evt.preventDefault(); 
     266                switch($('#vartype').val().toString()) { 
     267                        case 'config': 
     268                                var obj = player.getConfig(); 
     269                                break; 
     270                        case 'playlist': 
     271                                var obj = player.getPlaylist(); 
     272                                break; 
     273                        case 'plugin.config': 
     274                                var obj = player.getPluginConfig($('#configplugin').val()); 
     275                                break; 
     276                } 
     277                alertValue(obj); 
     278        }; 
     279        /** Send an event to the player. **/ 
     280        function sendEvent(evt) { 
     281                evt.preventDefault(); 
     282                var typ = $('#sendevent').val(); 
     283                var dat = $('#sendeventdata').val(); 
     284                if(typ == 'LOAD' && dat.indexOf('{') > 0) { 
     285                        var arr = new Array(); 
     286                        var ply = dat.split(';'); 
     287                        for(var i=0; i<ply.length; i++) { 
     288                                var obj = new Object(); 
     289                                var itm = ply[i].split(','); 
     290                                for(var j=0; j<itm.length; j++) { 
     291                                        obj[itm[j].split(':')[0]] = itm[j].split(':')[1]; 
     292                                } 
     293                                arr.push(obj); 
     294                        } 
     295                        if(arr.length > 1) { 
     296                                dat = arr; 
     297                        } else {  
     298                                dat = obj; 
     299                        } 
     300                } 
     301                player.sendEvent(typ,dat); 
     302        }; 
     303        /** Set a listener to the player. **/ 
     304        function setListener(evt) { 
     305                evt.preventDefault(); 
     306                var arr = $('#eventtype').val().toString().split(': '); 
     307                var sel = $('#addremove').val().toString(); 
     308                var fcn = 'alertValue'; 
     309                if(arr.length == 2 && sel == 'add') { 
     310                        if(arr[0] == 'Model') { 
     311                                player.addModelListener(arr[1],fcn); 
     312                        } else {  
     313                                player.addControllerListener(arr[1],fcn); 
     314                        } 
     315                } else if(arr.length == 2 && sel == 'remove') { 
     316                        if(arr[0] == 'Model') {  
     317                                player.removeModelListener(arr[1],fcn); 
     318                        } else { 
     319                                player.removeControllerListener(arr[1],fcn); 
     320                        } 
     321                } 
     322        }; 
     323        /** Alert responses from the player. **/ 
     324        function alertValue(obj) { 
     325                var txt = ''; 
     326                for (itm in obj) { 
     327                        if(typeof(obj[itm]) == 'object') { 
     328                                txt += itm+':\n'; 
     329                                for (ent in obj[itm]) { 
     330                                        txt += '  '+ent+': '+obj[itm][ent]+'\n'; 
     331                                } 
     332                        } else { 
     333                                txt += itm+': '+obj[itm]+'\n'; 
     334                        } 
     335                } 
     336                alert(txt); 
     337        }; 
     338 
     339 
     340 
     341 
     342</script> 
    4343</head> 
    5344<body> 
     345 
    6346<?php 
    7 $temp = file_get_contents('settings.js'); 
    8 echo $temp; 
     347  $selectedScript = 'none'; 
     348  if (isset($_GET['scripts'])){ 
     349        $selectedScript = $_GET['scripts']; 
     350  } 
     351  $selectedHTML = 'default'; 
     352  if (isset($_GET['htmlblock'])){ 
     353        $selectedHTML = $_GET['htmlblock']; 
     354  } 
     355  $settingsJSON = file_get_contents('settings.js'); 
     356  $settingsJSON = str_replace("var settings = {","{", $settingsJSON); 
     357  $settingsJSON = preg_replace("/\/\*\*(.+?)\*\*\//", "",$settingsJSON); 
     358  $settings = json_decode($settingsJSON); 
     359  $html = $settings->html; 
     360  $htmlblockselectoroptions = ""; 
     361  foreach ($html as $htmlblockid => $htmlblock){ 
     362        if ($htmlblockid == $selectedHTML){ 
     363                $htmlblockselectoroptions = $htmlblockselectoroptions."<option selected>".$htmlblockid."</option>"; 
     364        } else { 
     365            $htmlblockselectoroptions = $htmlblockselectoroptions."<option>".$htmlblockid."</option>"; 
     366        } 
     367  } 
     368  $scripts = $settings->script; 
     369  $scriptselectoroptions = ""; 
     370  foreach ($scripts as $scriptid => $script){ 
     371        if($scriptid == $selectedScript) { 
     372                $scriptselectoroptions = $scriptselectoroptions."<option selected>".$scriptid."</option>"; 
     373        } else { 
     374                $scriptselectoroptions = $scriptselectoroptions."<option>".$scriptid."</option>"; 
     375        } 
     376  } 
    9377?> 
     378 
     379<form id="examplesform"> 
     380        <fieldset> 
     381                <label>Load an example setup</label> 
     382                <select name="examples" id="examples"></select> 
     383                <label>Permalink of this setup</label> 
     384                <input name="permalink" id="permalink"/> 
     385        </fieldset> 
     386</form> 
     387 
     388 
     389 
     390<div id="javascript"> 
     391        <form id="variablesform"> 
     392                <fieldset> 
     393                        <label>Variable</label> 
     394                        <select type="text" id="vartype"> 
     395                                <option>config</option> 
     396                                <option>playlist</option> 
     397                                <option>plugin.config</option> 
     398                        </select> 
     399                        <label>Plugin</label> 
     400                        <input type="text" id="configplugin" /> 
     401                </fieldset> 
     402                <button type="submit" id="variablesbutton">Get variable</button> 
     403        </form> 
     404        <form id="sendeventform"> 
     405                <fieldset> 
     406                        <label>Event</label> 
     407                        <select type="text" id="sendevent"> 
     408                                <option>ITEM</option> 
     409                                <option>LINK</option> 
     410                                <option>LOAD</option> 
     411                                <option>MUTE</option> 
     412                                <option>NEXT</option> 
     413                                <option>PLAY</option> 
     414                                <option>PREV</option> 
     415                                <option>REDRAW</option> 
     416                                <option>SEEK</option> 
     417                                <option>STOP</option> 
     418                                <option>VOLUME</option> 
     419                        </select> 
     420                        <label>Data</label> 
     421                        <input type="text" id="sendeventdata" /> 
     422                </fieldset> 
     423                <button type="submit" id="sendeventbutton">Send event</button> 
     424        </form> 
     425        <form id="listenersform"> 
     426                <fieldset> 
     427                        <label>Type</label> 
     428                        <select type="text" id="addremove"> 
     429                                <option>add</option> 
     430                                <option>remove</option> 
     431                        </select> 
     432                        <label>Event</label> 
     433                        <select type="text" id="eventtype"> 
     434                                <option>Controller: ERROR</option> 
     435                                <option>Controller: ITEM</option> 
     436                                <option>Controller: MUTE</option> 
     437                                <option>Controller: PLAY</option> 
     438                                <option>Controller: PLAYLIST</option> 
     439                                <option>Controller: RESIZE</option> 
     440                                <option>Controller: SEEK</option> 
     441                                <option>Controller: STOP</option> 
     442                                <option>Controller: VOLUME</option> 
     443                                <option></option> 
     444                                <option>Model: BUFFER</option> 
     445                                <option>Model: ERROR</option> 
     446                                <option>Model: LOADED</option> 
     447                                <option>Model: META</option> 
     448                                <option>Model: STATE</option> 
     449                                <option>Model: TIME</option> 
     450                        </select> 
     451                </fieldset> 
     452                <button type="submit" id="listenersbutton">Set listener</button> 
     453        </form> 
     454</div> 
     455 
     456 
     457 
     458<?php 
     459  echo $html->$selectedHTML; 
     460?> 
     461 
     462 
     463 
     464<form id="flashvarsform"> 
     465        <ul id="fieldsettabs"> 
     466                <li class="active">Sources</li> 
     467                <li id="customli">Custom</li> 
     468        </ul> 
     469        <fieldset></fieldset> 
     470        <fieldset id="sources"> 
     471    <label>html block</label> 
     472    <select id="htmlblock"><?=$htmlblockselectoroptions?></select> 
     473    <label>scripts</label> 
     474    <select id="scripts"><?=$scriptselectoroptions?></select> 
     475    <label>player</label> 
     476    <select id="players"></select> 
     477                <label>skin</label> 
     478                <select id="skins"></select> 
     479                <label>plugins</label> 
     480                <select multiple="multiple" id="plugins"></select> 
     481        </fieldset> 
     482        <fieldset id="custom"> 
     483                <p> 
     484                        This fieldset contains variables not claimed by the player or plugin.  
     485                        They can be entered in the browser querystring to show up here. 
     486                </p> 
     487        </fieldset> 
     488        <button type="submit">Reload player</button> 
     489</form> 
    10490</body> 
    11491</html> 
Note: See TracChangeset for help on using the changeset viewer.