Commit 44d2ec74 authored by Gautam Chitnis's avatar Gautam Chitnis

Lua (Http): Redesigned Web UI

This commit starts the integration of Web UI redesign frontend and backend.
For now, the Player UI looks a bit troubled and a few functionalities are not working.
Playlist is statically generated and player is set to stream a static http stream from youtube.
Play/Pause/Volume Adjust actions reflect the same effect on the Main Interface.
parent c5687cc9
*.luac *.luac
css/
.sass-cache/
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
root {
display: block;
}
body{
}
#mainContainer{
text-align: center;
width: 800px;
}
#controlContainer{
width: 800px;
}
#libraryContainer{
width: 800px;
margin-top: 2px;
}
#libraryTree{
height: 300px;
overflow: auto;
white-space: nowrap;
text-align: left;
}
#viewContainer{
width: 800px;
}
#mediaViewer{
min-height: 500px;
background-color:#222;
}
#player{
top:0px;
height: 500px;
width: 500px;
background-color:#222;
}
#seekSlider{
width: 98%;
margin-left:5px;
}
#volumeSlider{
width: 100px;
display: inline-block;
}
#currentVolume{
display: inline-block;
}
#mediaTitle{
position: absolute;
top: 0px;
left: 10px;
width: 600px;
text-align: center;
padding: 5px;
overflow: auto;
}
#currentTime{
margin-top:-40px;
float: left;
text-align: left;
}
#totalTime{
margin-top:-40px;
float: right;
text-align: right;
}
#controlTable{
position:relative;
height: 150px;
}
#controlButtons{
position: absolute;
top: 80px;
left: 10px;
padding: 0;
margin: 0;
text-align: left;
}
.buttonszone{
position:absolute;
width: 20px;
margin-left:-20px;
vertical-align:top;
padding:0px;
font-size:0px;
line-height:0px;
}
#buttonszone1 {
top: 200px;
}
#buttonszone2 {
top: 20px;
}
.buttonszone li{
float:left;
clear:left;
font-size:0px;
}
.buttonszone li span{
float:left
}
.buttonszone_active {
margin-top: 0px;
width: 120px;
margin-left:-122px;
font-size:10px;
line-height:16px;
}
.buttonszone_active li {
width:120px;
}
#volumesliderzone{
position: absolute;
top: 105px;
left: 410px;
width: 210px;
}
#volumeSlider{
width: 208px;
}
#libraryTree ul li a {
border:none;
}
#artszone{
position: absolute;
top: 0px;
right: 10px;
width: 150px;
height: 150px;
vertical-align: top;
}
#seekContainer{
position:absolute;
left: 5px;
top: 55px;
width: 79%;
vertical-align: bottom;
}
.button48{
width: 48px;
height: 48px;
margin: 5px 0px 5px 2px;
background: none;
border: none;
display: inline-block;
list-style: none;
float:left;
cursor: pointer;
background-image: url("../images/buttons.png");
background-repeat: no-repeat;
}
.button48:hover{
filter: alpha(opacity:0.5);
-ms-filter: "alpha(opacity=50)";
-khtml-opacity: 0.50;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
opacity: 0.5;
}
.button{
cursor: pointer;
display: inline-block;
}
#buttonOpen{
background-position: 0px 0px;
}
#buttonStop{
background-position: -576px 0px;
}
.playing {
background-position: -336px 0px;
}
.paused {
background-position: -384px 0px;
}
#buttonPrev{
background-position: -144px 0px;
}
#buttonNext{
background-position: -288px 0px;
}
#buttonFull{
background-position: -192px 0px;
}
#buttonSout{
background-position: -624px 0px;
}
#buttonEQ{
background-position: -48px 0px;
}
#window_browse ol{
list-style-type: none;
}
#window_browse ol li{
list-style-type: none;
float: left;
padding: 5px;
}
.system_icon{
width:80px;
text-align:center;
vertical-align:top;
display: inline-block;
cursor: pointer;
padding: 2px;
border: 1px solid #823D0A;
margin: 2px;
height: 92px;
background-color: #E1E1E1;
overflow: hidden;
}
#window_create_stream table tr td{
font-size: 11px;
}
#window_equalizer div div{
text-align: center;
font-size: 11px;
padding: 0px;
}
#window_equalizer {
height:80px !important ;
}
.eqBand{
margin-bottom: 10px;
margin-top: 10px;
height: 400px;
font-size: 1.5em;
}
.footer{
margin-top: 30px;
text-align: center;
font-size: 11px;
}
div.centered{
margin-left: auto;
margin-right: auto;
}
.hidden{
visibility: hidden;
display: none;
}
root {
display: block;
}
#content{
}
body{
font: 11pt Helvetica, Arial, sans-serif;
background-color:#EEE;
}
#libraryTree{
height: 300px;
overflow:scroll;
white-space: nowrap;
text-align: left;
}
#mediaViewer{
min-height: 500px;
}
#meta {
position:relative;
width:100%;
}
#seekSlider{
width: 100%;
}
#volumeSlider{
width: 100%;
display: inline-block;
}
#currentVolume{
display: inline-block;
}
#mediaTitle{
text-align:center;
width:100%;
margin-top:5px;
}
#currentTime{
float: left;
text-align: left;
}
#totalTime{
float: right;
text-align: right;
}
#play_controls, #controls{
margin-top:30px;
width:95%;
margin-left:auto;
margin-right:auto;
}
#controlTable{
position:relative;
height: 150px;
}
#buttonszone li{
float: left;
}
#art{
top:0px;
width:150px;
height:150px;
margin:0 auto;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.ui-slider-range{
background-color:#FFB200;
background:#FFB200 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
}
#buttons{
margin:0 auto;
position: relative;
width:265px;
}
.button48{
width: 48px;
height: 48px;
margin: 5px 0px 5px 15px;
background: none;
border: none;
display: inline-block;
cursor: pointer;
background-image: url("../images/buttons.png");
background-repeat: no-repeat;
}
.button{
cursor: pointer;
display: inline-block;
}
#buttonOpen{
background-position: 0px 0px;
}
#buttonStop{
background-position: -576px 0px;
}
#buttonRewd{
background-position: -528px 0px;
}
#buttonFwrd{
background-position: -96px 0px;
}
.playing {
background-position: -336px 0px;
}
.paused {
background-position: -384px 0px;
}
#buttonPrev{
background-position: -144px 0px;
}
#buttonNext{
background-position: -288px 0px;
}
#buttonFull{
background-position: -192px 0px;
}
#buttonSout{
background-position: -624px 0px;
}
#buttonEQ{
background-position: -48px 0px;
}
#window_browse ol{
list-style-type: none;
}
#window_browse ol li{
list-style-type: none;
float: left;
padding: 5px;
}
.system_icon{
width:80px;
text-align:center;
vertical-align:top;
display: inline-block;
cursor: pointer;
padding: 2px;
border: 1px solid #823D0A;
margin: 2px;
height: 92px;
background-color: #E1E1E1;
overflow: hidden;
}
#window_create_stream table tr td{
font-size: 11px;
}
#window_equalizer div div{
text-align: center;
font-size: 11px;
padding: 0px;
}
.eqBand{
margin-bottom: 10px;
margin-top: 10px;
height: 400px;
font-size: 1.5em;
}
.footer{
margin-top: 30px;
text-align: center;
font-size: 11px;
}
div.centered{
margin-left: auto;
margin-right: auto;
}
.hidden{
visibility: hidden;
display: none;
}
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#window_batch').dialog({
autoOpen: false,
width: 600,
modal: true,
buttons:{
"<?vlc gettext("Send") ?>":function(){
var cmds = $('#batchCommand').val().split("\n");
for(var i=0;i<cmds.length;i++){
cmds[i] = cmds[i].replace(/^#.*$/,'\n');
}
cmds = cmds.join(";").replace(/\n/g,';').replace(/;+/g,';').replace(/^;/,'');
sendVLMCmd(cmds);
$(this).dialog('close');
},
"<?vlc gettext("Cancel") ?>":function(){
$(this).dialog('close');
}
}
});
})
//]]>
</script>
<div id="window_batch" title="<?vlc gettext("VLM Batch Commands") ?>">
<textarea id="batchCommand" cols="50" rows="16">
<?vlc gettext("#paste your VLM commands here") ?>
<?vlc gettext("#separate commands with a new line or a semi-colon") ?>
</textarea>
</div>
<script type="text/javascript">
//<![CDATA[
var browse_target = 'default';
$(function(){
$('#window_browse').dialog({
autoOpen: false,
width: 600,
height: 650,
modal: true,
resizable: false,
buttons: {
"<?vlc gettext("Open") ?>":function(){
$('li.ui-selected','#browse_elements').each(function(){
$(this).dblclick();
});
},
"<?vlc gettext("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));
setTimeout(function(){updatePlayList(true);},1000);
break;
}
});
$(this).dialog("close");
},
"<?vlc gettext("Cancel") ?>" : function(){
$(this).dialog("close")
}
}
});
});
//]]>
</script>
<div id="window_browse" title="<?vlc gettext("Media Browser") ?>">
<div style="height:500px;overflow: auto;">
<ol id='browse_elements' selectable="selectable">
<li><?vlc gettext("Play List") ?></li>
</ol>
</div>
</div>
This diff is collapsed.
<script type="text/javascript">
//<![CDATA[
var bands = new Array('60Hz','170Hz','310Hz','600Hz','1kHz','3kHz','6kHz','12kHz','14kHz','16kHz');
$(function(){
$('#window_equalizer').dialog({
autoOpen: false,
height: 650,
width: 500,
resizable: false,
buttons:{
"<?vlc gettext("Reset") ?>":function(){
$('.eqBand').each(function(){
$(this).slider('value',0);
sendEQCmd({
command:'equalizer',
val: 0,
band: $(this).attr('id').substr(2)
})
});
},
"<?vlc gettext("Close") ?>":function(){
$(this).dialog("close");
}
}
});
$('#preamp').slider({
min: -20,
max: 20,
step: 0.1,
range: "min",
animate: true,
stop: function(event,ui){
$('#preamp_txt').empty().append(ui.value+'dB');
sendEQCmd({
command:'preamp',
val: ui.value
})
},
slide: function(event,ui){
$('#preamp_txt').empty().append(ui.value+'dB');
}
});
});
//]]>
</script>
<div id="window_equalizer" title="<?vlc gettext("Graphical Equalizer") ?>">
<div style="margin: 5px 5px 5px 5px;">
<div><?vlc gettext("Preamp:") ?> <span id="preamp_txt">0dB</span></div>
</div>
<div style="margin: 5px 5px 10px 5px;">
<div id="preamp" style="font-size: 18px;"></div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#window_error').dialog({
autoOpen: false,
width:400,
modal: true,
buttons:{
"<?vlc gettext("Close") ?>":function(){
$('#error_container').empty();
$(this).dialog('close');
}
}
});
})
</script>
<div id="window_error" title="<?vlc gettext("Error!") ?>">
<div class="ui-state-error"><div class="ui-icon ui-icon-alert"></div></div>
<div id="error_container" class="ui-state-error"></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#window_mosaic').dialog({
autoOpen: false,
width: 800,
maxWidth: 1000,
minWidth: 800,
minHeight: 500,
modal: true,
buttons: {
"<?vlc gettext("Create") ?>": function() {
$(this).dialog("close");
},
"<?vlc gettext("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"><?vlc gettext("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="<?vlc gettext("Create Mosaic") ?>">
<table id="mosaic_options">
<tr>
<td style="text-align:right"><?vlc gettext("Rows") ?></td>
<td>
<input type="text" name="mosaic_rows" id="mosaic_rows" size="3" value="2"/>
</td>
<td style="text-align:right"><?vlc gettext("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"><?vlc gettext("Row border") ?></td>