source: trunk/js/test/index.php @ 1192

Revision 1192, 14.2 KB checked in by zach, 3 years ago (diff)

fixing testing page problems

Line 
1<html>
2<head>
3<title>JW Player Testing</title>
4<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>
343</head>
344<body>
345
346<?php
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  }
377?>
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>
490</body>
491</html>
Note: See TracBrowser for help on using the repository browser.