Skip to content

V
vlc-2-2
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
Expand all 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
This diff is collapsed.
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
This diff is collapsed.
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