source: testing/index.html @ 744

Revision 744, 12.2 KB checked in by jeroen, 3 years ago (diff)

also made players settable in querystring
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        $(document).ready(function() {
10                $.extend({
11                        /** Insert a new example in the page. **/
12                        insert: function(evt) {
13                                if(evt) { evt.preventDefault(); }
14                                var obj = settings.examples[$('#examples').val()];
15                                var arr = [];
16                                if(obj['plugins']) {
17                                        arr = obj['plugins'].split(',');
18                                }
19                                $('#plugins').val(arr);
20                                $.fieldsets();
21                                $.fillout("flashvarsform");
22                        },
23                        /** Fill out the flashvars with example data. **/
24                        fillout: function(set) {
25                                var obj = settings.examples[$('#examples').val()];
26                                var arr = $("#"+set).find('input');
27                                for(var i=0; i<arr.length; i++) {
28                                        var nam = $(arr[i]).attr('name');
29                                        if($_GET[nam]) {
30                                                $(arr[i]).val($_GET[nam]);
31                                        } else if(obj[nam] == null) {
32                                                $(arr[i]).val('');
33                                        } else {
34                                                $(arr[i]).val(obj[nam]);
35                                        }
36                                }
37                                $("#flashvarsform").submit();
38                        },
39                        /** Set the tab functions. **/
40                        tabs: function(itm) {
41                                $('li').click(function() {
42                                        $('li').removeClass('active');
43                                        $(this).addClass('active');
44                                        var itm = $(this).text().toLowerCase();
45                                        $.tab($.trim(itm));
46                                });
47                                if(itm) { $.tab(itm); }
48                        },
49                        /** Flip to a tab. **/
50                        tab: function(itm) {
51                                var arr = $("#flashvarsform").find('fieldset');
52                                for(var i=0; i<arr.length; i++) {
53                                        if($(arr[i]).attr('id') == itm) {
54                                                $(arr[i]).css('display','block');
55                                        } else {
56                                                $(arr[i]).css('display','none');
57                                        }
58                                }
59                        },
60                        /** Check for inserting of fieldsets. **/
61                        fieldsets: function(evt) {
62                                $("#fieldsettabs > .plugin").remove();
63                                $("#fieldsetspan").empty();
64                                var str = $("#plugins").val();
65                                if(str != null) {
66                                        arr = str.toString().split(',');
67                                        for (var i=0; i<arr.length; i++) {
68                                                var swf = settings.plugins[arr[i]].swf;
69                                                var xml = settings.plugins[arr[i]].xml;
70                                                $.fieldset(xml,arr[i]);
71                                        }
72                                }
73                        },
74                        /** Insert a specific plugin fieldset. **/
75                        fieldset: function(url,nam) {
76                                $.get(url,{},function(xml) {
77                                        var arr = $('flashvars',xml).find('flashvar');
78                                        if(arr.length > 0) {
79                                                var tit = nam.substr(0,1).toUpperCase()+nam.substr(1);
80                                                $("#fieldsettabs").append('<li class="plugin">'+tit+'</li>');
81                                                $.tabs();
82                                                var set = '<fieldset id="'+nam+'">';
83                                                for (var i=0; i<arr.length; i++) {
84                                                        var val = $('name',arr[i]).text();
85                                                        set +='<label>'+nam+'.'+val+'</label><input type="text" name="'+nam+'.'+val+'" />';
86                                                }
87                                                set += '</fieldset>';
88                                                $('#fieldsetspan').append(set);
89                                                $.fillout(nam);
90                                        }
91                                });
92                        },
93                        /** Reload the flashvars into the player. **/
94                        reload: function(evt) {
95                                evt.preventDefault();
96                                var vrs = {};
97                                var arr = $("#flashvarsform").find('input');
98                                for(var i=0; i<arr.length; i++) {
99                                        if($(arr[i]).val()) {
100                                                vrs[$(arr[i]).attr('name')] = $(arr[i]).val();
101                                        }
102                                }
103                                if($("#skins").val() != 'none') {
104                                        vrs['skin'] = settings.skins[$("#skins").val()];
105                                }
106                                if($("#plugins").val() != null) {
107                                        var plg = '';
108                                        var arr = $("#plugins").val();
109                                        for(var i=0; i<arr.length; i++) {
110                                                plg += settings.plugins[arr[i]].swf+',';
111                                        }
112                                        vrs['plugins'] = plg.substr(0,plg.length-1);
113                                }
114                                $('#preview').css('height',vrs['height']);
115                                $('#preview').html('<div id="container"></div>');
116                                swfobject.embedSWF(
117                                        settings.players[$('#players').val()],
118                                        'container',
119                                        vrs['width'],
120                                        vrs['height'],
121                                        '9.0.0',
122                                        null,
123                                        vrs,
124                                        {allowfullscreen:'true',allowscriptaccess:'always'},
125                                        {id:'player',name:'player'}
126                                );
127                        },
128                        /** Get a variable from the player. **/
129                        getVariable: function(evt) {
130                                evt.preventDefault();
131                                switch($('#vartype').val().toString()) {
132                                        case 'config':
133                                                var obj = player.getConfig();
134                                                break;
135                                        case 'playlist':
136                                                var obj = player.getPlaylist();
137                                                break;
138                                        case 'plugin.config':
139                                                var obj = player.getPluginConfig($('#configplugin').val());
140                                                break;
141                                }
142                                $.alert(obj);
143                        },
144                        /** Send an event to the player. **/
145                        sendEvent: function(evt) {
146                                evt.preventDefault();
147                                var typ = $('#sendevent').val();
148                                var dat = $('#sendeventdata').val();
149                                if(typ == 'LOAD' && dat.indexOf(':') > 0) {
150                                        var arr = new Array();
151                                        var ply = dat.split(';');
152                                        for(var i=0; i<ply.length; i++) {
153                                                var obj = new Object();
154                                                var itm = ply[i].split(',');
155                                                for(var j=0; j<itm.length; j++) {
156                                                        obj[itm[j].split(':')[0]] = itm[j].split(':')[1];
157                                                }
158                                                arr.push(obj);
159                                        }
160                                        if(arr.length > 1) {
161                                                dat = arr;
162                                        } else { 
163                                                dat = obj;
164                                        }
165                                }
166                                player.sendEvent(typ,dat);
167                        },
168                        /** Set a listener to the player. **/
169                        setListener: function(evt) {
170                                evt.preventDefault();
171                                var arr = $('#eventtype').val().toString().split(': ');
172                                var sel = $('#addremove').val().toString();
173                                var fcn = '$.alert';
174                                if(arr.length == 2 && sel == 'add') {
175                                        if(arr[0] == 'Model') {
176                                                player.addModelListener(arr[1],fcn);
177                                        } else { 
178                                                player.addControllerListener(arr[1],fcn);
179                                        }
180                                } else if(arr.length == 2 && sel == 'remove') {
181                                        if(arr[0] == 'Model') { 
182                                                player.removeModelListener(arr[1],fcn);
183                                        } else {
184                                                player.removeControllerListener(arr[1],fcn);
185                                        }
186                                }
187                        },
188                        /** Alert responses from the player. **/
189                        alert: function(obj) {
190                                var txt = '';
191                                for (itm in obj) {
192                                        if(typeof(obj[itm]) == 'object') {
193                                                txt += itm+':\n';
194                                                for (ent in obj[itm]) {
195                                                        txt += '  '+ent+': '+obj[itm][ent]+'\n';
196                                                }
197                                        } else {
198                                                txt += itm+': '+obj[itm]+'\n';
199                                        }
200                                }
201                                alert(txt);
202                        }
203                });
204                /** Attach handlers to all buttons and select fields. **/
205                $("#examples").change(function(evt) { $.insert(evt); });
206                $("#players").change(function(evt) { $.reload(evt); });
207                $("#skins").change(function(evt) { $.reload(evt); });
208                $("#plugins").change(function(evt) { $.fieldsets(evt); });
209                $("#examplesform").submit(function(evt) { $.insert(evt); });
210                $("#flashvarsform").submit(function(evt) { $.reload(evt); });
211                $("#variablesform").submit(function(evt) { $.getVariable(evt); });
212                $("#sendeventform").submit(function(evt) { $.sendEvent(evt); });
213                $("#listenersform").submit(function(evt) { $.setListener(evt); });
214                /** Load all settings into the player. **/
215                for (dct in settings) {
216                        for (itm in settings[dct]) {
217                                if(dct == 'examples') {
218                                        var tit = (settings[dct][itm]['title']) ? itm+". "+settings[dct][itm]['title'] : '';
219                                        $("#"+dct).append("<option value='"+itm+"'>"+tit+"</option>");
220                                } else {       
221                                        $("#"+dct).append("<option>"+itm+"</option>");
222                                }
223                        }
224                }
225                /** Load the example **/
226                var $_GET = {};
227                window.top.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g,function () {
228                        $_GET[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]);
229                });
230                $('#examples').val($_GET['example']);
231                $('#players').val($_GET['player']);
232                $.tabs('sources');
233                $.insert();
234        });
235        </script>
236
237</head>
238<body>
239
240
241<form id="examplesform">
242        <fieldset>
243                <label>Example setup</label>
244                <select name="examples" id="examples"></select>
245        </fieldset>
246        <button type="submit" id="examplesbutton">Insert example</button>
247</form>
248
249
250
251
252<div id="javascript">
253        <form id="variablesform">
254                <fieldset>
255                        <label>Variable</label>
256                        <select type="text" id="vartype">
257                                <option>config</option>
258                                <option>playlist</option>
259                                <option>plugin.config</option>
260                        </select>
261                        <label>Plugin</label>
262                        <input type="text" id="configplugin" />
263                </fieldset>
264                <button type="submit" id="variablesbutton">Get variable</button>
265        </form>
266        <form id="sendeventform">
267                <fieldset>
268                        <label>Event</label>
269                        <select type="text" id="sendevent">
270                                <option>ITEM</option>
271                                <option>LINK</option>
272                                <option>LOAD</option>
273                                <option>MUTE</option>
274                                <option>NEXT</option>
275                                <option>PLAY</option>
276                                <option>PREV</option>
277                                <option>REDRAW</option>
278                                <option>SEEK</option>
279                                <option>STOP</option>
280                                <option>VOLUME</option>
281                        </select>
282                        <label>Data</label>
283                        <input type="text" id="sendeventdata" />
284                </fieldset>
285                <button type="submit" id="sendeventbutton">Send event</button>
286        </form>
287        <form id="listenersform">
288                <fieldset>
289                        <label>Type</label>
290                        <select type="text" id="addremove">
291                                <option>add</option>
292                                <option>remove</option>
293                        </select>
294                        <label>Event</label>
295                        <select type="text" id="eventtype">
296                                <option>Controller: ERROR</option>
297                                <option>Controller: ITEM</option>
298                                <option>Controller: MUTE</option>
299                                <option>Controller: PLAY</option>
300                                <option>Controller: PLAYLIST</option>
301                                <option>Controller: RESIZE</option>
302                                <option>Controller: SEEK</option>
303                                <option>Controller: STOP</option>
304                                <option>Controller: VOLUME</option>
305                                <option></option>
306                                <option>Model: BUFFER</option>
307                                <option>Model: ERROR</option>
308                                <option>Model: LOADED</option>
309                                <option>Model: META</option>
310                                <option>Model: STATE</option>
311                                <option>Model: TIME</option>
312                        </select>
313                </fieldset>
314                <button type="submit" id="listenersbutton">Set listener</button>
315        </form>
316</div>
317
318
319
320
321<div id="preview">
322<p>Testing is simple: choose an example, change the flashvars and see if it works.<br/>
323You can also download this testing page as part of the <a href="http://developer.longtailvideo.com/trac/changeset/HEAD/trunk/sdk?old_path=/&format=zip">plugin development SDK</a>.</p>
324</div>
325
326<script type="text/javascript">
327        var player;
328        function playerReady(obj) {
329                player = document.getElementById(obj['id']);
330                //$('#javascript').css('display','block');
331        };
332</script>
333
334
335
336
337
338<form id="flashvarsform">
339        <ul id="fieldsettabs">
340                <li class="active">Sources</li>
341                <li>Properties</li>
342                <li>Layout</li>
343                <li>Colors</li>
344                <li>Behaviour</li>
345        </ul>
346        <fieldset></fieldset>
347        <fieldset id="sources">
348                <label>player</label>
349                <select id="players"></select>
350                <label>skin</label>
351                <select id="skins"></select>
352                <label>plugins</label>
353                <select multiple="multiple" id="plugins"></select>
354        </fieldset>
355        <fieldset id="properties">
356                <label>author</label>
357                <input type="text" name="author" />
358                <label>description</label>
359                <input type="text" name="description" />
360                <label>duration</label>
361                <input type="text" name="duration" />
362                <label>file</label>
363                <input type="text" name="file" />
364                <label>image</label>
365                <input type="text" name="image" />
366                <label>link</label>
367                <input type="text" name="link" />
368                <label>start</label>
369                <input type="text" name="start" />
370                <label>streamer</label>
371                <input type="text" name="streamer" />
372                <label>title</label>
373                <input type="text" name="title" />
374                <label>type</label>
375                <input type="text" name="type" />
376        </fieldset>
377        <fieldset id="colors">
378                <label>backcolor</label>
379                <input type="text" name="backcolor" />
380                <label>frontcolor</label>
381                <input type="text" name="frontcolor" />
382                <label>lightcolor</label>
383                <input type="text" name="lightcolor" />
384                <label>screencolor</label>
385                <input type="text" name="screencolor" />
386        </fieldset>
387        <fieldset id="layout">
388                <label>controlbar</label>
389                <input type="text" name="controlbar" />
390                <label>height</label>
391                <input type="text" name="height" value="260" />
392                <label>logo</label>
393                <input type="text" name="logo" />
394                <label>playlist</label>
395                <input type="text" name="playlist" />
396                <label>playlistsize</label>
397                <input type="text" name="playlistsize" />
398                <label>width</label>
399                <input type="text" name="width" value="400" />
400        </fieldset>
401        <fieldset id="behaviour">
402                <label>autostart</label>
403                <input type="text" name="autostart" />
404                <label>bufferlength</label>
405                <input type="text" name="bufferlength" />
406                <label>dock</label>
407                <input type="text" name="dock" />
408                <label>item</label>
409                <input type="text" name="item" />
410                <label>linktarget</label>
411                <input type="text" name="linktarget" />
412                <label>mute</label>
413                <input type="text" name="mute" />
414                <label>repeat</label>
415                <input type="text" name="repeat" />
416                <label>shuffle</label>
417                <input type="text" name="shuffle" />
418                <label>smoothing</label>
419                <input type="text" name="smoothing" />
420                <label>stretching</label>
421                <input type="text" name="stretching" />
422                <label>volume</label>
423                <input type="text" name="volume" />
424        </fieldset>
425        <span id="fieldsetspan"></span>
426        <button type="submit" id="flashvarsbutton">Reload player</button>
427</form>
428
429
430
431</body>
432</html>
Note: See TracBrowser for help on using the repository browser.