Skip to content

V
vlc-gpu
Commit 3c2992fc authored by Elminster2031's avatar Elminster2031 Committed by Jean-Baptiste Kempf
Browse files
Options

New LUA Web Interface 

This patch removes the existing interface and replaces it with a cleaner more
user-friendly interface.

Screenshots are available here: http://www.archmageinc.com/vlcSigned-off-by: default avatarJean-Baptiste Kempf <jb@videolan.org>
parent 9e23147f
Show whitespace changes
Inline Side-by-side
Showing with 1188 additions and 61 deletions
share/lua/http/css/ui-lightness/jquery-ui-1.8.13.custom.css
View file @ 3c2992fc
......@@ -59,6 +59,7 @@
.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; }
......@@ -84,6 +85,8 @@
.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
----------------------------------*/
......
share/lua/http/dialogs/browse_window.html 0 → 100644
View file @ 3c2992fc
<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
share/lua/http/dialogs/create_stream.html 0 → 100644
View file @ 3c2992fc
<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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
<td colspan="2" valign="top">&nbsp;</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
share/lua/http/dialogs/mosaic_window.html 0 → 100644
View file @ 3c2992fc
<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
share/lua/http/dialogs/offset_window.html 0 → 100644
View file @ 3c2992fc
<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
share/lua/http/dialogs/stream_window.html 0 → 100644
View file @ 3c2992fc
<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
share/lua/http/index.html
View file @ 3c2992fc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
< 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.
< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<html>
<head>
<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>
<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>
</head>
<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'})}
);
<body onload="loop_refresh();">
$( "#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;
}
<noscript>
<hr/>
<p>
Warning: Your browser doesn't support JavaScript.
</p>
<hr/>
</noscript>
}
});
$( "#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;
}
<?vlc
current_page = "index"
}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>
dialogs("browse","main","input","sout","playlist","footer")
?>
<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>
</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"
</body>
dialogs("browse_window.html","stream_window.html","create_stream.html","offset_window.html","mosaic_window.html");
?>
</body>
</html>
\ No newline at end of file
share/lua/http/js/controlers.js
View file @ 3c2992fc
......@@ -135,6 +135,7 @@ function browse(dir){
$('#window_browse').dialog('close');
});
$('[selectable]').selectable();
},
error: function(jqXHR,status,error){
setTimeout('browse("'+dir+'")',1041);
......
share/lua/http/requests/playlist.xml
View file @ 3c2992fc
......@@ -24,7 +24,7 @@ vim:syntax=lua
< Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
]] ?>
<root>
<?vlc
--[[
function a(t,pre)
......@@ -42,11 +42,17 @@ function print_playlist(item)
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").. '">')
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
print('</node>')
end
else
local name, path = vlc.strings.convert_xml_special_chars(item.name or "", item.path or "")
local current_item = vlc.input.item()
......@@ -57,7 +63,7 @@ function print_playlist(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
......@@ -76,3 +82,4 @@ end
--a(p) --Uncomment to debug
print_playlist(p)
?>
</root>
\ No newline at end of file
share/lua/http/view.html 0 → 100644
View file @ 3c2992fc
<!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>&nbsp;</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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment