.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
+
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+.ui-selecting { background: #FECA40; }
+.ui-selected { background: #F39814; color: white; }
/* Icons
----------------------------------*/
* http://docs.jquery.com/UI/Progressbar#theming
*/
.ui-progressbar { height:2em; text-align: left; }
-.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
\ No newline at end of file
+.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
--- /dev/null
+<script language="javascript" type="text/javascript">
+ var video_types = new Array('avi','mp4','wmv','mov','swf','vob','mkv','mpg');
+ var audio_types = new Array('mp3','wav');
+ var browse_target = 'default';
+ function createElementLi(name,type,dir,ext){
+ var icon = type=="dir" && name=='..' ? 'Back-48.png' : (type=='dir' ? "Folder-48.png" : ($.inArray(ext,video_types)!=-1 ? "Video-48.png" : ($.inArray(ext,audio_types)!=-1 ? "Audio-48.png" : "Other-48.png")));
+ var open = type=="dir" ? "opendir='"+dir+"'" : (type=="file" ? "openfile='"+dir+"'" : "opendev='"+dir+"'");
+ var str = "<li class='system_icon ui-widget-content' "+open+" ><img src='images/"+icon+"' width='48px' height='48px' title='"+name+"' alt='"+name+"' style='border: none;background:none;'/><div style='font-size:10px;border:none;background:none;'>"+name+"</div></li>";
+ return str;
+ }
+ $(function(){
+ $('#window_browse').dialog({
+ autoOpen: false,
+ width: 600,
+ height: 650,
+ modal: true,
+ position: ['left','top'],
+ resizable: false,
+ buttons: {
+ "Open":function(){
+ $('li.ui-selected','#browse_elements').each(function(){
+ $(this).dblclick();
+ });
+ },
+ "Enqueue": function() {
+ $('li.ui-selected','#browse_elements').each(function(){
+ var path = this.getAttribute('opendir') ? this.getAttribute('opendir') : this.getAttribute('openfile');
+ switch(browse_target){
+ default:
+ sendCommand('command=in_enqueue&input='+encodeURI(path));
+ break;
+ }
+ });
+ $(this).dialog("close");
+ },
+ "Cancel" : function(){
+ $(this).dialog("close")
+ }
+ }
+ });
+ });
+</script>
+
+<div id="window_browse" title="Media Browser">
+ <div style="height:500px;overflow: scroll;">
+ <ol id='browse_elements' selectable="selectable">
+ <li>Play List</li>
+ </ol>
+ </div>
+</div>
\ No newline at end of file
--- /dev/null
+<script language="javascript" type="text/javascript">
+ $(function(){
+ $('#stream_out_method').change(function(){
+ $('#output_options').empty();
+ switch($(this).val()){
+ case 'file':
+ var options = $('#file_options').clone();
+ break;
+ case 'http':
+ var options = $('#net_options').clone();
+ break;
+ case 'mmsh':
+ case 'rtp':
+ case 'udp':
+ var options = $('#net_options').clone();
+ $('#stream_out_file_',options).val('');
+ break;
+ }
+ $('[id]',options).each(function(){
+ $(this).attr('id',$(this).attr('id').substr(0,$(this).attr('id').length-1));
+ $(this).attr('name',$(this).attr('name').substr(0,$(this).attr('name').length-1));
+ });
+ $(options).css({
+ 'visibility':'visible',
+ 'display':'block'
+ })
+ $(options).appendTo('#output_options');
+ });
+ $('#stream_out_mux').change(function(){
+ if($(this).val()=='ffmpeg'){
+ $('#stream_out_mux_opts').val('{mux=flv}');
+ }else{
+ $('#stream_out_mux_opts').val('');
+ }
+ });
+ $('#window_create_stream').dialog({
+ autoOpen: false,
+ width:800,
+ modal: true,
+ position: ['left','top'],
+ buttons:{
+ "Create":function(){
+ var e = false;
+ $('input',$(this)).removeClass('ui-state-error');
+ $('#stream_error_container').css({
+ 'visibility':'hidden',
+ 'display':'none'
+ });
+ if(!$('#stream_name').val()){
+ $('#stream_name').addClass('ui-state-error');
+ e = true;
+ }
+ if(!$('#stream_input').val()){
+ $('#stream_input').addClass('ui-state-error');
+ e = true;
+ }
+
+ if($('#stream_out_method').val()!='file' && !$('#stream_out_port').val()){
+ $('#stream_out_port').addClass('ui-state-error');
+ e = true;
+ }
+ if($('#stream_out_method').val()!='file' && !$('#stream_out_dest').val()){
+ $('#stream_out_dest').addClass('ui-state-error');
+ e = true;
+ }
+
+ if($('#stream_out_method').val()=='file' && !$('#stream_out_filename').val()){
+ $('#stream_out_filename').addClass('ui-state-error');
+ e = true;
+ }
+ if(e){
+ $('#stream_error_message').empty();
+ $('#stream_error_message').append('One or more fields require attention.');
+ $('#stream_error_container').css({
+ 'visibility':'visible',
+ 'display':'block'
+ })
+ }else{
+ sendVLMCmd(buildStreamCode());
+ $(this).dialog('close');
+ }
+ },
+ "Cancel":function(){
+ $(this).dialog('close');
+ }
+ }
+ });
+ $('#button_input').click(function(){
+ browse_target = '#stream_input';
+ browse();
+ $('#window_browse').dialog('open');
+ });
+ $('#button_in_screen').click(function(){
+ $('#stream_input').val('screen://');
+ });
+ });
+ function buildStreamCode(){
+ var name = $('#stream_name').val().replace(' ','_');
+ var infile = $('#stream_input').val();
+
+ var vcodec = $('#stream_vcodec').val();
+ var vb = $('#stream_vb').val();
+ var fps = $('#stream_fps').val();
+ var scale = $('#stream_scale').val();
+ var dlace = $('#stream_deinterlace').is(':checked');
+
+ var acodec = $('#stream_acodec').val();
+ var ab = $('#stream_ab').val();
+ var srate = $('#stream_samplerate').val();
+ var channels = $('#stream_channels').val();
+
+ var scodec = $('#stream_scodec').val() && !$('#stream_soverlay').checked ? ','+$('#stream_scodec').val() : '';
+ var soverlay = $('#stream_soverlay').is(':checked') ? ',soverlay' : '';
+
+ var outmethod = $('#stream_out_method').val();
+ var mux = $('#stream_out_mux').val();
+ var muxoptions = $('#stream_out_mux_opts').val() ? '{'+$('#stream_out_mux_opts').val()+'}' : '';
+
+ if(outmethod=='file'){
+ var filename = $('#stream_out_filename').val();
+ }else{
+ var outport = $('#stream_out_port').val();
+ var outdest = $('#stream_out_dest').val();
+ var outfile = $('#stream_out_file').val();
+ }
+ var dest = outmethod=='file' ? filename : (outfile ? outdest+':'+outport+'/'+outfile : outdest+':'+outport);
+ var inCode = 'new '+name+' broadcast enabled input "'+infile+'" ';
+ var transCode = 'output #transcode{vcodec='+vcodec+',vb='+vb+',fps='+fps+',scale='+scale+',acodec='+acodec+',ab='+ab+',samplerate='+srate+',channels='+channels+scodec+soverlay+'}';
+ var outCode = ':std{access='+outmethod+',mux='+mux+muxoptions+',dst='+dest+'}';
+
+ return inCode+transCode+outCode;
+ }
+</script>
+<div id="window_create_stream" title="Create Stream">
+ <table width="100%">
+ <tr>
+ <td style="text-align:right" valign="top">
+ <h5>Stream Name</h5>
+ </td>
+ <td colspan="5" valign="top">
+ <input type="text" name="stream_name" id="stream_name" value=""/>
+ </td>
+ </tr>
+ <tr>
+ <th colspan="2" valign="top">
+ <h5>Video</h5>
+ </th>
+ <th colspan="2" valign="top">
+ <h5>Audio</h5>
+ </th>
+ <th colspan="2" valign="top">
+ <h5>Subtitles</h5>
+ </th>
+ <th colspan="2" valign="top">
+ <h5>Output</h5>
+ </th>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Video Codec</td>
+ <td valign="top">
+ <select name="stream_vcodec" id="stream_vcodec">
+ <option value="FLV1">FLV1</option>
+ <option value="mp1v">mp1v</option>
+ <option value="mp2v">mp2v</option>
+ <option value="mp4v">mp4v</option>
+ <option value="DIV1">DIV1</option>
+ <option value="DIV2">DIV2</option>
+ <option value="DIV3">DIV3</option>
+ <option value="H263">H263</option>
+ <option value="H264">H264</option>
+ <option value="WMV1">WMV1</option>
+ <option value="WMV2">WMV2</option>
+ <option value="MJPG">MJPG</option>
+ <option value="theo">theo</option>
+ </select>
+ </td>
+ <td style="text-align:right" valign="top">Audio Codec</td>
+ <td valign="top">
+ <select name="stream_acodec" id="stream_acodec">
+ <option value="mp3">mp3</option>
+ <option value="mpga">mpga</option>
+ <option value="mp2a">mp2a</option>
+ <option value="mp4a">mp4a</option>
+ <option value="a52">a52</option>
+ <option value="vorb">vorb</option>
+ <option value="flac">flac</option>
+ <option value="spx">spx</option>
+ <option value="s16l">s16l</option>
+ <option value="fl32">fl32</option>
+ </select>
+ </td>
+ <td style="text-align:right" valign="top">Subtitle Codec</td>
+ <td valign="top">
+ <select name="stream_scodec" id="stream_scodec">
+ <option value="">none</option>
+ <option value="dvbs">dvbs</option>
+ </select>
+ </td>
+ <td style="text-align:right" valign="top">Output Method</td>
+ <td valign="top">
+ <select name="stream_out_method" id="stream_out_method">
+ <option value="http">HTTP</option>
+ <option value="file">File</option>
+ <option value="mmsh">MMSH</option>
+ <option value="rtp">RTP</option>
+ <option value="udp">UDP</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Video Bit Rate</td>
+ <td valign="top">
+ <select name="stream_vb" id="stream_vb">
+ <option value="4096">4096</option>
+ <option value="3072">3072</option>
+ <option value="2048">2048</option>
+ <option value="1024">1024</option>
+ <option value="768">768</option>
+ <option value="512">512</option>
+ <option value="384">384</option>
+ <option value="256">256</option>
+ <option value="192">192</option>
+ <option value="128">128</option>
+ <option value="96">96</option>
+ <option value="64">64</option>
+ <option value="32">32</option>
+ <option value="16">16</option>
+ </select>
+ </td>
+ <td style="text-align:right" valign="top">Audio Bit Rate</td>
+ <td valign="top">
+ <select name="stream_ab" id="stream_ab">
+ <option value="512">512</option>
+ <option value="384">384</option>
+ <option value="256">256</option>
+ <option value="192">192</option>
+ <option value="128">128</option>
+ <option value="96">96</option>
+ <option value="64">64</option>
+ <option value="32">32</option>
+ <option value="16">16</option>
+ </select>
+ </td>
+ <td style="text-align:right" valign="top">Overlay</td>
+ <td valign="top">
+ <input type="checkbox" name="stream_soverlay" id="stream_soverlay" value="1" />
+ </td>
+ <td style="text-align:right" valign="top">Multiplexer</td>
+ <td valign="top">
+ <select name="stream_out_mux" id="stream_out_mux">
+ <option value="ts">MPEG TS</option>
+ <option value="ps">MPEG PS</option>
+ <option value="mpeg1">MPEG 1</option>
+ <option value="ogg">OGG</option>
+ <option value="asf">ASF</option>
+ <option value="mp4">MP4</option>
+ <option value="mov">MOV</option>
+ <option value="wav">WAV</option>
+ <option value="raw">Raw</option>
+ <option value="ffmpeg" selected="selected">FFMPEG</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Video FPS</td>
+ <td valign="top">
+ <select name="stream_fps" id="stream_fps">
+ <option value="300">300</option>
+ <option value="120">120</option>
+ <option value="100">100</option>
+ <option value="72">72</option>
+ <option value="60">60</option>
+ <option value="50">50</option>
+ <option value="48">48</option>
+ <option value="30">30</option>
+ <option value="25" selected="selected">25</option>
+ <option value="24">24</option>
+ </select>
+ </td>
+ <td style="text-align:right" valign="top">Audio Sample Rate</td>
+ <td valign="top">
+ <select name="stream_samplerate" id="stream_samplerate">
+ <option value="192000">192 KHz</option>
+ <option value="96000">96 KHz</option>
+ <option value="50000">50 KHz</option>
+ <option value="48000">48 KHz</option>
+ <option value="44100" selected="selected">44 KHz</option>
+ <option value="32000">32 KHz</option>
+ <option value="22050">22 KHz</option>
+ <option value="16000">16 KHz</option>
+ <option value="11025">11 KHz</option>
+ <option value="8000">8 KHz</option>
+ </select>
+ </td>
+ <td colspan="2" valign="top"> </td>
+ <td style="text-align:right" valign="top">MUX Options</td>
+ <td valign="top">
+ <input type="text" name="stream_out_mux_opts" id="stream_out_mux_opts" value="{mux=flv}" />
+ </td>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Video Scale</td>
+ <td valign="top">
+ <select name="stream_scale" id="stream_scale">
+ <option value="0.25">25%</option>
+ <option value="0.5">50%</option>
+ <option value="0.75">75%</option>
+ <option selected="selected" value="1">100%</option>
+ <option value="1.25">125%</option>
+ <option value="1.5">150%</option>
+ <option value="1.75">175%</option>
+ <option value="2">200%</option>
+ </select>
+ </td>
+ <td style="text-align:right" valign="top">Audio Channels</td>
+ <td valign="top">
+ <select name="stream_channels" id="stream_channels" >
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="4">4</option>
+ <option value="6">6</option>
+ </select>
+ </td>
+ <td colspan="2" valign="top"> </td>
+ <td colspan="2" rowspan="2" valign="top">
+ <div id="output_options">
+ <table>
+ <tr>
+ <td style="text-align:right" valign="top">Output Port</td>
+ <td valign="top"><input type="text" name="stream_out_port" id="stream_out_port" value="8081" /></td>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Output Destination</td>
+ <td><input type="text" name="stream_out_dest" id="stream_out_dest" value="0.0.0.0" /></td>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Output File</td>
+ <td valign="top"><input type="text" name="stream_out_file" id="stream_out_file" value="stream.flv" /></td>
+ </tr>
+ </table>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td valign="top" style="text-align:right">Deinterlace</td>
+ <td valign="top">
+ <input type="checkbox" name="stream_deinterlace" id="stream_deinterlace" value="1" />
+ </td>
+ <td colspan="2" valign="top"> </td>
+ <td colspan="2" valign="top"> </td>
+ </tr>
+ <tr>
+ <td style="text-align:right" colspan="2" valign="top">
+ Input Media
+ </td>
+ <td colspan="6" valign="top">
+ <input type="text" name="stream_input" id="stream_input" value="" size="50" />
+ <div id="button_input" class="button icon ui-widget ui-state-default" title="Media File" opendialog="window_browse"><span class="ui-icon ui-icon-eject"></span></div>
+ <div id="button_in_screen" class="button icon ui-widget ui-state-default" title="Capture Screen" ><span class="ui-icon ui-icon-contact"></span></div>
+ </td>
+ </tr>
+ </table>
+ <div class="ui-widget" id="stream_error_container" style="display:none;visibility: hidden;">
+ <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
+ <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
+ <strong>Error:</strong> <span id="stream_error_message">Sample ui-state-error style.</span></p>
+ </div>
+ </div>
+</div>
+<div id="net_options" style="display:none;visibility: hidden;">
+ <table>
+ <tr>
+ <td style="text-align:right" valign="top">Output Port</td>
+ <td valign="top"><input type="text" name="stream_out_port_" id="stream_out_port_" value="8081" /></td>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Output Destination</td>
+ <td valign="top"><input type="text" name="stream_out_dest_" id="stream_out_dest_" value="0.0.0.0" /></td>
+ </tr>
+ <tr>
+ <td style="text-align:right" valign="top">Output File</td>
+ <td valign="top"><input type="text" name="stream_out_file_" id="stream_out_file_" value="stream.flv" /></td>
+ </tr>
+ </table>
+</div>
+<div id="file_options" style="display:none;visibility: hidden;">
+ <table>
+ <tr>
+ <td style="text-align:right" valign="top">File Name</td>
+ <td valign="top"><input type="text" name="stream_out_filename_" id="stream_out_filename_"/></td>
+ </tr>
+ </table>
+</div>
\ No newline at end of file
--- /dev/null
+<script language="javascript" type="text/javascript">
+ $(function(){
+ $('#window_mosaic').dialog({
+ autoOpen: false,
+ width: 800,
+ maxWidth: 1000,
+ minWidth: 800,
+ minHeight: 500,
+ modal: true,
+ position: ['left','top'],
+ buttons: {
+ "Create": function() {
+ $(this).dialog("close");
+ },
+ "Cancel" : function(){
+ $(this).dialog("close")
+ }
+ }
+ });
+ $('#mosaic_bg').resizable({
+ maxWidth: 780,
+ ghost: true
+ });
+ $('#mosaic_tiles').draggable({
+ maxWidth: 780,
+ handle: 'h3',
+ containment: [13,98,99999999,99999999],
+ drag:function(event,ui){
+ var xoff = ui.offset.left - $('#mosaic_bg').offset().left;
+ var yoff = ui.offset.top - $('#mosaic_bg').offset().top-17;
+ $('#mosaic_xoff').val(xoff);
+ $('#mosaic_yoff').val(yoff);
+ }
+ });
+ $('input','#mosaic_options').change(setMosaic);
+ setMosaic();
+ });
+ function setMosaic(){
+ var rows = Number($('#mosaic_rows').val());
+ var cols = Number($('#mosaic_cols').val());
+ var n = 0;
+ $('#mosaic_tiles').empty()
+ $('#mosaic_tiles').append('<tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>');
+ for(var i=0;i<rows;i++){
+ $('#mosaic_tiles').append('<tr>');
+ for(var j=0;j<cols;j++){
+ $('tr:last','#mosaic_tiles').append('<td class="mosaic">');
+ $('td:last','#mosaic_tiles').append('<div id="mosaic_open__'+n+'" class="button icon ui-widget ui-state-default" title="Open Media" style="margin-top:49%"><span class="ui-icon ui-icon-eject"></span></div>');
+ n++;
+ }
+ }
+ $('.mosaic').resizable({
+ alsoResize: '.mosaic',
+ resize:function(event,ui){
+ $('#mosaic_width').val(ui.size.width);
+ $('#mosaic_height').val(ui.size.height);
+ $('[id^=mosaic_open]').css({
+ 'margin-top': Number($('#mosaic_height').val()/2)
+ });
+ }
+ });
+ $('.mosaic').css({
+ 'background': '#33FF33',
+ 'width': Number($('#mosaic_width').val()),
+ 'height':Number($('#mosaic_height').val()),
+ 'text-align': 'center',
+ 'float' : 'left',
+ 'border' : '1px solid #990000',
+ 'margin-left': Number($('#mosaic_rbord').val()),
+ 'margin-right': Number($('#mosaic_rbord').val()),
+ 'margin-top': Number($('#mosaic_cbord').val()),
+ 'margin-bottom': Number($('#mosaic_cbord').val())
+ });
+ $('[id^=mosaic_open_]').each(function(){
+ $(this).css({
+ 'margin-top': Number($('#mosaic_height').val()/2)
+ });
+ $(this).click(function(){
+ browse_target = '#'+$(this).attr('id');
+ get_dir();
+ $('#window_browse').dialog('open');
+ });
+ });
+
+ $('.button').hover(
+ function() { $(this).addClass('ui-state-hover'); },
+ function() { $(this).removeClass('ui-state-hover'); }
+ );
+ }
+</script>
+
+<div id="window_mosaic" title="Create Mosaic">
+ <table id="mosaic_options">
+ <tr>
+ <td style="text-align:right">Rows:</td>
+ <td>
+ <input type="text" name="mosaic_rows" id="mosaic_rows" size="3" value="2"/>
+ </td>
+ <td style="text-align:right">x offset</td>
+ <td>
+ <input type="text" name="mosaic_xoff" id="mosaic_xoff" size="3" value="0" disabled="disabled"/>
+ </td>
+ <td style="text-align:right">row border</td>
+ <td>
+ <input type="text" name="mosaic_rbord" id="mosaic_rbord" size="3" value="5"/>
+ </td>
+ <td style="text-align:right">width</td>
+ <td>
+ <input type="text" name="mosaic_width" id="mosaic_width" size="3" value="100" disabled="disabled"/>
+ </td>
+ </tr>
+ <tr>
+ <td style="text-align:right">Columns:</td>
+ <td>
+ <input type="text" name="mosaic_cols" id="mosaic_cols" size="3" value="2"/>
+ </td>
+ <td style="text-align:right">y offset</td>
+ <td>
+ <input type="text" name="mosaic_yoff" id="mosaic_yoff" size="3" value="0" disabled="disabled"/>
+ </td>
+ <td style="text-align:right">column border</td>
+ <td>
+ <input type="text" name="mosaic_cbord" id="mosaic_cbord" size="3" value="5"/>
+ </td>
+ <td style="text-align:right">height</td>
+ <td>
+ <input type="text" name="mosaic_height" id="mosaic_height" size="3" value="100" disabled="disabled"/>
+ </td>
+ </tr>
+ </table>
+ <div id="mosaic_bg" class="ui-widget-content" style="background: #3333FF;width:400px; height:300px;text-align: center; vertical-align: middle;">
+ <h3 style="margin:0px;font-weight:normal" class="ui-widget-header">Background</h3>
+ <table id="mosaic_tiles" class="ui-widget-content" cellpadding="0" cellspacing="0">
+ <tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>
+ <tr>
+ <td class="mosaic"></td>
+ <td class="mosaic"></td>
+ </tr>
+ <tr>
+ <td class="mosaic"></td>
+ <td class="mosaic"></td>
+ </tr>
+ </table>
+ </div>
+</div>
\ No newline at end of file
--- /dev/null
+<script language="javascript" type="text/javascript">
+ $(function(){
+ $('#window_offset').dialog({
+ autoOpen: false,
+ minWidth: 400,
+ position: ['left','top'],
+ buttons:{
+ "Close":function(){
+ $(this).dialog("close");
+ }
+ }
+ });
+ $( "#rateSlider" ).slider({
+ range: "min",
+ value: 1,
+ min: 1,
+ max: 10,
+ step: 0.25,
+ stop: function( event, ui ) {
+ sendCommand({
+ 'command':'rate',
+ 'val':(ui.value)
+ })
+ },
+ slide: function(event,ui){
+ $('#currentRate').empty();
+ $('#currentRate').append(ui.value+'x');
+ }
+ });
+ $( "#audioSlider" ).slider({
+ range: "min",
+ value: 0,
+ min: -10,
+ max: 10,
+ step: 0.25,
+ stop: function( event, ui ) {
+ sendCommand({
+ 'command':'audiodelay',
+ 'val':(ui.value)
+ })
+ },
+ slide: function(event,ui){
+ $('#currentAudioDelay').empty();
+ $('#currentAudioDelay').append(ui.value+'s');
+ }
+ });
+ $( "#subtitleSlider" ).slider({
+ range: "min",
+ value: 0,
+ min: -10,
+ max: 10,
+ step: 0.25,
+ stop: function( event, ui ) {
+ sendCommand({
+ 'command':'subdelay',
+ 'val':(ui.value)
+ })
+ },
+ slide: function(event,ui){
+ $('#currentSubtitleDelay').empty();
+ $('#currentSubtitleDelay').append(ui.value+'s');
+ }
+ });
+ });
+</script>
+<div id="window_offset" title="Offset Configuration">
+ <div>Playback Rate</div>
+ <div id="rateSlider" title="Playback Rate"></div>
+ <div id="currentRate" class="dynamic">1x</div>
+ <br/>
+ <div>Audio Delay</div>
+ <div id="audioSlider" title="Audio Delay"></div>
+ <div id="currentAudioDelay" class="dynamic">0s</div>
+ <br/>
+ <div>Subtitle Delay</div>
+ <div id="subtitleSlider" title="Subtitle Delay"></div>
+ <div id="currentSubtitleDelay" class="dynamic">0s</div>
+</div>
\ No newline at end of file
--- /dev/null
+<script language="javascript" type="text/javascript">
+ var stream_server = window.location.hostname;
+ function configureStreamWindow(stream_protocol,stream_server,stream_port,stream_file){
+ $('#stream_protocol').val(stream_protocol);
+ $('#stream_host').val(stream_server);
+ $('#stream_port').val(stream_port);
+ $('#stream_file').val(stream_file);
+ }
+ $(function(){
+ $('#window_streams').dialog({
+ autoOpen: false,
+ minWidth: 600,
+ minHeight: 430,
+ position: ['left','top'],
+ buttons:{
+ "Close":function(){
+ $(this).dialog("close");
+ }
+ }
+ });
+ $('#window_stream_config').dialog({
+ autoOpen: false,
+ width:400,
+ position: ['left','top'],
+ modal: true,
+ buttons:{
+ "Okay":function(){
+ $(this).dialog('close');
+ }
+ }
+ });
+ $('#button_create_stream').click(function(){
+ $('#window_create_stream').dialog('open');
+ return false;
+ });
+ $('#button_clear_streams').click(function(){
+ sendVLMCmd('del all');
+ return false;
+ });
+ $('#button_config_streams').click(function(){
+ $('#window_stream_config').dialog('open');
+ return false;
+ });
+ $('#button_create_mosaic').click(function(){
+ $('#window_mosaic').dialog('open');
+ return false;
+ })
+ $('#stream_host').val(stream_server);
+ });
+</script>
+<div id="stream_status_" style="visibility:hidden;display:none;">
+ <h3><a href="#" id="stream_title_"></a></h3>
+ <div>
+ <div id="button_stream_stop_" class="button icon ui-widget ui-state-default" title="Stop"><span class="ui-icon ui-icon-stop"></span></div>
+ <div id="button_stream_play_" class="button icon ui-widget ui-state-default" title="Play"><span class="ui-icon ui-icon-play"></span></div>
+ <div id="button_stream_loop_" class="button icon ui-widget ui-state-default" title="Loop"><span class="ui-icon ui-icon-refresh"></span></div>
+ <div id="button_stream_delete_" class="button icon ui-widget ui-state-default" title="Remove Stream"><span class="ui-icon ui-icon-trash"></span></div>
+ <div>Title: <span id="stream_file_"></span></div>
+ <div style="width: 260px; margin: 5px 0px 10px 0px;">
+ <div id="stream_pos_"></div>
+ Time: <span id="stream_current_time_">00:00:00</span> / <span id="stream_total_time_">00:00:00</span>
+ </div>
+ </div>
+</div>
+<div id="window_streams" title="Manage Streams">
+ <div id="button_create_stream" class="button icon ui-widget ui-state-default" title="Create New Stream" opendialog="window_create_stream"><span class="ui-icon ui-icon-plus"></span></div>
+ <div id="button_create_mosaic" class="button icon ui-widget ui-state-default" title="Create Mosaic" opendialog="window_create_mosaiac"><span class="ui-icon ui-icon-calculator"></span></div>
+ <div id="button_clear_streams" class="button icon ui-widget ui-state-default" title="Delete All Streams"><span class="ui-icon ui-icon-trash"></span></div>
+ <div id="button_config_streams" class="button icon ui-widget ui-state-default" title="Configure Stream Defaults"><span class="ui-icon ui-icon-wrench"></span></div>
+ <div id="stream_info">
+
+ </div>
+
+</div>
+<div id="window_stream_config" title="Stream Input Configuration">
+ <table>
+ <tr>
+ <td>Protocol</td>
+ <td><input type="text" name="stream_protocol" id="stream_protocol" value="http" /></td>
+ </tr>
+ <tr>
+ <td>Host</td>
+ <td><input type="text" name="stream_host" id="stream_host" value="" /></td>
+ </tr>
+ <tr>
+ <td>Port</td>
+ <td><input type="text" name="stream_port" id="stream_port" value="8081" /></td>
+ </tr>
+ <tr>
+ <td>File</td>
+ <td><input type="text" name="stream_file" id="stream_file" value="stream.flv" /></td>
+ </tr>
+ </table>
+</div>
\ No newline at end of file
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
-<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
-< index.html: VLC media player web interface
-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
-< Copyright (C) 2005-2006 the VideoLAN team
-< $Id$
-<
-< Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
-<
-< This program is free software; you can redistribute it and/or modify
-< it under the terms of the GNU General Public License as published by
-< the Free Software Foundation; either version 2 of the License, or
-< (at your option) any later version.
-<
-< This program 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 General Public License for more details.
-<
-< You should have received a copy of the GNU General Public License
-< along with this program; if not, write to the Free Software
-< Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+ <head>
+ <title>VLC media player - Web Interface</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
+ <link type="text/css" href="css/main.css" rel="stylesheet" />
+ <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
+ <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
+ <script type="text/javascript" src="js/jquery.jstree.js"></script>
+ <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
+ <script type="text/javascript" src="js/common.js"></script>
+ <script type="text/javascript" src="js/controlers.js"></script>
+
+ <script type="text/javascript">
+ $(function(){
+ $('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
+ $('.button48').hover(
+ function(){$(this).css({'filter':'alpha(opacity=50)','-moz-opacity':'0.5','-khtml-opacity': '0.5'})},
+ function(){$(this).css({'filter':'alpha(opacity=100)','-moz-opacity':'1','-khtml-opacity': '1'})}
+ );
-<html xmlns="http://www.w3.org/1999/xhtml">
+ $( "#seekSlider" ).slider({
+ range: "min",
+ value: 0,
+ min: 0,
+ max: 100,
+ stop: function( event, ui ) {
+ $( "#currentTime" ).empty();
+ $( "#currentTime" ).append( format_time(Math.round((ui.value/100)*$('#seekSlider').attr('totalLength'))) );
+ switch(current_que){
+ case 'main':
+ sendCommand({'command':'seek','val':Math.round((ui.value/100)*$('#seekSlider').attr('totalLength'))});
+ break;
+ case 'stream':
+ sendVLMCmd('control Current seek '+ui.value);
+ break;
+ }
+
+ }
+ });
+ $( "#volumeSlider" ).slider({
+ range: "min",
+ value: 50,
+ min: 0,
+ max: 100,
+ stop: function( event, ui ) {
+ $( "#currentVolume" ).empty();
+ $( "#currentVolume" ).append( ui.value+"%" );
+ sendCommand({
+ 'command':'volume',
+ 'val':Math.round(ui.value*5.12)
+ })
+ }
+ });
+
+ $('#buttonPlayList').click(function(){
+ $('#libraryContainer').animate({
+ width: 'toggle'
+ });
+ var nw = $('#libraryContainer').css('width')=='300px' ? '800' : '500';
+ var spd = $('#libraryContainer').css('width')=='300px' ? 'slow' : 'fast';
+ $('#viewContainer').animate({
+ width: nw
+ },spd)
+ $('#player').animate({
+ width: nw
+ },spd)
+ return false;
+ });
+ $('#buttonViewer').click(function(){
+ $('#viewContainer').animate({
+ height: 'toggle'
+ })
+ return false;
+ });
+ $('#buttonOffsets').click(function(){
+ $('#window_offset').dialog('open');
+ })
+ $('#buttonOpen').click(function(){
+ browse_target = 'default';
+ browse();
+ $('#window_browse').dialog('open');
+ });
+ $('#buttonStop').click(function(){
+ switch(current_que){
+ case 'main':
+ sendCommand({'command' : 'pl_stop'})
+ break;
+ case 'stream':
+ sendVLMCmd('control Current stop');
+ break;
+ }
+
+ return false;
+ });
+ $('#buttonPlay').click(function(){
+ if($(this).attr('state')=='stopped'){
+ switch(current_que){
+ case 'main':
+ var id = $('.jstree-clicked','#libraryTree').length>0 ? $('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5) : current_id;
+ sendCommand({'command':'pl_play','id':id});
+ break;
+ case 'stream':
+ sendVLMCmd('control Current play');
+ flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
+ break;
+ }
+
+ }else{
+ switch(current_que){
+ case 'main':
+ sendCommand({'command':'pl_pause'});
+ break;
+ case 'stream':
+ sendVLMCmd('control Current pause');
+ break;
+ }
+ }
+ return false;
+ });
+ $('#buttonPrev').click(function(){
+ sendCommand({'command':'pl_previous'});
+ return false;
+ });
+ $('#buttonNext').click(function(){
+ sendCommand({'command':'pl_next'});
+ return false;
+ });
+ $('#buttonFull').click(function(){
+ sendCommand({'command':'fullscreen'});
+ return false;
+ });
+ $('#buttonPlEmpty').click(function(){
+ sendCommand({'command':'pl_empty'})
+ return false;
+ });
+ $('#buttonLoop').click(function(){
+ sendCommand({'command':'pl_loop'});
+ return false;
+ });
+ $('#buttonRepeat').click(function(){
+ sendCommand({'command':'pl_repeat'});
+ return false;
+ });
+ $('#buttonShuffle').click(function(){
+ sendCommand({'command':'pl_random'});
+ return false;
+ })
+ $('#buttonRefresh').click(updatePlayList);
+ $('#buttonPlPlay').click(function(){
+ sendCommand({
+ 'command': 'pl_play',
+ 'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
+ })
+ return false;
+ });
+ $('#buttonPlAdd').click(function(){
+ $('.jstree-clicked','#libraryTree').each(function(){
+ if($(this).parents().first().attr('uri')){
+ sendCommand({
+ 'command':'in_enqueue',
+ 'input' : $(this).parents().first().attr('uri')
+ });
+ };
+ });
+ $('#libraryTree').jstree('deselect_all');
+ setTimeout(updatePlayList,1000);
+ return false;
+ });
+ $('#buttonStreams, #buttonStreams2').click(function(){
+ $('#window_streams').dialog('open');
+ });
+ $('#buttonSout').click(function(){
+ if(current_que=='main'){
+ $('#windowStreamConfirm').dialog('open');
+ }else{
+ $('#player').empty();
+ current_que = 'main';
+ sendVLMCmd('del Current');
+ updateStatus();
+ }
+ return false;
+ });
+ $('#windowStreamConfirm').dialog({
+ autoOpen: false,
+ width:600,
+ position: ['left','top'],
+ modal: true,
+ buttons:{
+ "Yes":function(){
+ var file = $('[current="current"]','#libraryTree').length>0 ? decodeURIComponent($('[current="current"]','#libraryTree').first().attr('uri').substr(7)) : ($('.jstree-clicked','#libraryTree').length>0 ? decodeURIComponent($('.jstree-clicked','#libraryTree').first().parents().first().attr('uri').substr(7)) : ($('#plid_'+current_id).attr('uri') ? decodeURIComponent($('#plid_'+current_id).attr('uri').substr(7)) : false));
+ if(file){
+ var defaultStream = 'new Current broadcast enabled input "'+file+'" output #transcode{vcodec=FLV1,vb=4096,fps=25,scale=1,acodec=mp3,ab=512,samplerate=44100,channels=2}:std{access='+$('#stream_protocol').val()+',mux=ffmpeg{{mux=flv}},dst=0.0.0.0:'+$('#stream_port').val()+'/'+$('#stream_file').val()+'}';
+ sendVLMCmd('del Current;'+defaultStream+';control Current play');
+ $('#player').empty();
+ $('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
+ flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
+ current_que = 'stream';
+ updateStreams();
+ }
+ $(this).dialog('close');
+ },
+ "No":function(){
+ $(this).dialog('close');
+ }
+ }
+ });
+ });
+ </script>
+ </head>
-<head>
+ <body>
+ <div align="center">
+ <div id="mainContainer" align="center">
+ <div id="controlContainer" class="ui-widget">
+ <table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content">
+ <tr>
+ <td colspan="3" class="ui-widget-header">Main Controls</td>
+ </tr>
+ <tr>
+ <td id="controlButtons">
+ <div id="buttonOpen" class="button48 ui-corner-all" title="Open Media"></div>
+ <div id="buttonStop" class="button48 ui-corner-all" title="Stop"></div>
+ <div id="buttonPlay" class="button48 ui-corner-all" title="Play"></div>
+ <div id="buttonPrev" class="button48 ui-corner-all" title="Previous"></div>
+ <div id="buttonNext" class="button48 ui-corner-all" title="Next"></div>
+ <div id="buttonFull" class="button48 ui-corner-all" title="Full Screen"></div>
+ <div id="buttonSout" class="button48 ui-corner-all" title="Easy Stream"></div>
+ <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle"/></div>
+ <div id="currentVolume" class="dynamic">50%</div>
+ </td>
+
+ <td>
+ <div id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Library"><span class="ui-icon ui-icon-note"></span></div>
+ <div id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Viewer"><span class="ui-icon ui-icon-video"></span></div>
+ <div id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams"><span class="ui-icon ui-icon-script"></span></div>
+ <div id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="Configure Offsets"><span class="ui-icon ui-icon-transfer-e-w"></span></div>
+ </td>
+ <td rowspan="3">
+ <img id="albumArt" src="/art" width="141px" height="130px"/>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <div id="mediaTitle" class="dynamic"></div>
+ </td>
+ </tr>
+ <tr>
+ <td id="seekContainer" valign="bottom" colspan="2">
+ <div id="seekSlider" title="Seek Time"></div>
+ <table width="90%">
+ <tr>
+ <td>
+ <div id="currentTime" class="dynamic">00:00:00</div>
+ </td>
+ <td>
+ <div id="totalTime" class="dynamic">00:00:00</div>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
- <title>VLC media player - Web Interface</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link href="style.css" rel="stylesheet" type="text/css" />
- <!--[if IE ]>
- <link href="iehacks.css" rel="stylesheet" type="text/css" />
- <![endif]-->
- <script type="text/javascript" src="js/functions.js"></script>
+ </table>
+ </div>
+ <div id="libraryContainer" class="ui-widget">
+ <div class="ui-widget-header">
+ Library
+ </div>
+ <div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
+ <div id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="Shuffle"><span class="ui-icon ui-icon-shuffle"></span></div>
+ <div id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="Loop"><span class="ui-icon ui-icon-refresh"></span></div>
+ <div id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="Repeat"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></div>
+ <div id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="Empty Playlist"><span class="ui-icon ui-icon-trash"></span></div>
+ <div id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="Queue Selected"><span class="ui-icon ui-icon-plus"></span></div>
+ <div id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="Play Selected"><span class="ui-icon ui-icon-play"></span></div>
+ <div id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="Refresh List"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></div>
+ </div>
+ <div id="libraryTree" class="ui-widget-content"></div>
+ </div>
+ <div id="viewContainer" class="ui-widget">
+ <div class="ui-widget-header">Media Viewer</div>
+ <div id="mediaViewer" class="ui-widget-content">
+ <div href="http://localhost:8081/stream.flv" style="display:block;" id="player"></div>
+ </div>
+ </div>
+ <div class="footer">
+ <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
+ </div>
+ </div>
+ </div>
+ <div id="windowStreamConfirm" title="Confirm Stream Settings">
+ <p>
+ By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.
+ The stream will be created using default settings, for more advanced configuration, or to modify the default settings,
+ select the <i>Manage Streams</i>
+ <span id="buttonStreams2" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams"><span class="ui-icon ui-icon-script"></span></span>
+ button to the right.
+ </p>
+ <p>
+ Once the stream is created, the <i>Media Viewer</i> window will display the stream.
+ Volume will be controlled by the player, and not the <i>Main Controls</i>.
+ </p>
+ <p>
+ The current playing item will be streamed. If there is no currently playing item, the first selected item from the <i>Library</i> will be the subject of the stream.
+ </p>
+ <p>
+ To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.
+ </p>
+ <p>
+ Are you sure you wish to create the stream?
+ </p>
+ </div>
+ <?vlc
+ current_page = "index"
-</head>
-
-<body onload="loop_refresh();">
-
-<noscript>
- <hr/>
- <p>
- Warning: Your browser doesn't support JavaScript.
- </p>
- <hr/>
-</noscript>
-
-<?vlc
-current_page = "index"
-
-dialogs("browse","main","input","sout","playlist","footer")
-?>
-
-</body>
-
-</html>
+ dialogs("browse_window.html","stream_window.html","create_stream.html","offset_window.html","mosaic_window.html");
+ ?>
+
+ </body>
+</html>
\ No newline at end of file
$('#window_browse').dialog('close');
});
$('[selectable]').selectable();
+
},
error: function(jqXHR,status,error){
setTimeout('browse("'+dir+'")',1041);
< Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
]] ?>
-
+<root>
<?vlc
--[[
function a(t,pre)
if item.flags.disabled then return end
if(item.children) then
local name = vlc.strings.convert_xml_special_chars(item.name or "")
- print('<node id="' ..tostring(item.id).. '" name="' ..tostring(name).. '" ro="' ..(item.flags.ro and "ro" or "rw").. '">')
- for _, child in ipairs(item.children) do
- print_playlist(child)
- end
- print('</node>')
+ if(name ~= "Undefined") then
+ print('<item id="plid_' ..tostring(item.id).. '" name="' ..tostring(name).. '" ro="' ..(item.flags.ro and "ro" or "rw").. '"><content><name>' ..name.. '</name></content>')
+ for _, child in ipairs(item.children) do
+ print_playlist(child)
+ end
+ print('</item>')
+ else
+ for _, child in ipairs(item.children) do
+ print_playlist(child)
+ end
+ end
else
local name, path = vlc.strings.convert_xml_special_chars(item.name or "", item.path or "")
local current_item = vlc.input.item()
current = 'current="current"'
end
end
- print('<leaf id="' ..tostring(item.id).. '" uri="' ..tostring(path).. '" name="' ..name.. '" ro="' ..(item.flags.ro and "ro" or "rw").. '" duration ="' ..math.floor(item.duration).. '" ' ..current.. ' />')
+ print('<item id="plid_' ..tostring(item.id).. '" uri="' ..tostring(path).. '" name="' ..name.. '" ro="' ..(item.flags.ro and "ro" or "rw").. '" duration ="' ..math.floor(item.duration).. '" ' ..current.. ' ><content><name>' ..name.. '</name></content></item>')
end
end
--a(p) --Uncomment to debug
print_playlist(p)
?>
+</root>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+ <title>VLC media player - Flash Viewer</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
+ <link type="text/css" href="css/main.css" rel="stylesheet" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
+ <script language="javascript" type="text/javascript">
+ var stream_server = window.location.hostname;
+ $(function(){
+ $('#window_stream').resizable({
+ minHeight: 300,
+ minWidth: 400,
+ resize:function(event,ui){
+ $('#player').css({
+ 'width':ui.size.width-80,
+ 'height':ui.size.height-100
+ })
+ }
+ });
+ $('#window_stream_config').dialog({
+ autoOpen: false,
+ width:400,
+ position: ['left','top'],
+ modal: true,
+ buttons:{
+ "Okay":function(){
+ $('#player').empty();
+ $('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
+ flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
+ $(this).dialog('close');
+ },
+ "Cancel":function(){
+ $(this).dialog('close');
+ }
+ }
+ });
+ $('#button_stream_config').click(function(){
+ $('#window_stream_config').dialog('open');
+ });
+ $('#stream_host').val(stream_server);
+ $('#player').empty();
+ $('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
+ flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
+ });
+ </script>
+ <style>
+ #window_stream { width: 800px; height: 600px; padding: 0.5em; }
+ #window_stream h3 { text-align: left; margin: 0; font-weight: normal; font-size: 12px }
+ </style>
+</head>
+
+<body>
+ <div id="window_stream" class="ui-widget-content">
+ <h3 class="ui-widget-header">Streaming Output</h3>
+ <div class="ui-widget-content">
+ <div id="button_stream_config" class="button icon ui-widget ui-state-default" title="Configure" opendialog="window_stream_config"><span class="ui-icon ui-icon-wrench"></span></div>
+ <div align="center">
+ <div href="http://localhost:8081/stream.flv" style="display:block;width:720px;height:500px" id="player"></div>
+ </div>
+ <div> </div>
+ </div>
+ <div class="footer">
+ <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
+ </div>
+ </div>
+ <div id="window_stream_config" title="Stream Input Configuration">
+ <table>
+ <tr>
+ <td>Protocol</td>
+ <td><input type="text" name="stream_protocol" id="stream_protocol" value="http" /></td>
+ </tr>
+ <tr>
+ <td>Host</td>
+ <td><input type="text" name="stream_host" id="stream_host" value="" /></td>
+ </tr>
+ <tr>
+ <td>Port</td>
+ <td><input type="text" name="stream_port" id="stream_port" value="8081" /></td>
+ </tr>
+ <tr>
+ <td>File</td>
+ <td><input type="text" name="stream_file" id="stream_file" value="stream.flv" /></td>
+ </tr>
+ </table>
+ </div>
+</body>
+</html>
\ No newline at end of file
projects / vlc / commitdiff