Skip to content

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

LUA HTTP UI - Adjustments 

This patch makes some minor adjustments to the UI operation.

1) Add VLC Icons
2) Re-arrange Viewer / Library windows
3) Re-define some button names
4) Change some icons to improve clairity
5) Long press on Prev / Next buttons now seek back / forward

More to come later, including EQ, VLM UI, Maybe Mosaic.
Signed-off-by: default avatarJean-Baptiste Kempf <jb@videolan.org>
parent 4e3ae106
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 60 deletions
share/lua/http/css/main.css
View file @ b8f3efe9
...@@ -8,22 +8,19 @@ body{ ...@@ -8,22 +8,19 @@ body{
width: 800px; width: 800px;
} }
#controlContainer{ #controlContainer{
float: left;
width: 800px; width: 800px;
} }
#libraryContainer{ #libraryContainer{
width: 300px; width: 800px;
float: left;
} }
#libraryTree{ #libraryTree{
height: 477px; height: 300px;
overflow:scroll; overflow:scroll;
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
} }
#viewContainer{ #viewContainer{
width: 500px; width: 800px;
float: left;
} }
#mediaViewer{ #mediaViewer{
min-height: 500px; min-height: 500px;
...@@ -42,7 +39,7 @@ body{ ...@@ -42,7 +39,7 @@ body{
} }
#currentVolume{ #currentVolume{
display: inline-block; display: inline-block;
margin-left: -70px; margin-left: -110px;
} }
#mediaTitle{ #mediaTitle{
text-align: left; text-align: left;
......
share/lua/http/dialogs/offset_window.html
View file @ b8f3efe9
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
$( "#rateSlider" ).slider({ $( "#rateSlider" ).slider({
range: "min", range: "min",
value: 1, value: 1,
min: 1, min: 0.25,
max: 10, max: 10,
step: 0.25, step: 0.25,
stop: function( event, ui ) { stop: function( event, ui ) {
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
}); });
}); });
</script> </script>
<div id="window_offset" title="Offset Configuration"> <div id="window_offset" title="Track Synchronisation">
<div>Playback Rate</div> <div>Playback Rate</div>
<div id="rateSlider" title="Playback Rate"></div> <div id="rateSlider" title="Playback Rate"></div>
<div id="currentRate" class="dynamic">1x</div> <div id="currentRate" class="dynamic">1x</div>
......
share/lua/http/index.html
View file @ b8f3efe9
...@@ -56,16 +56,8 @@ ...@@ -56,16 +56,8 @@
$('#buttonPlayList').click(function(){ $('#buttonPlayList').click(function(){
$('#libraryContainer').animate({ $('#libraryContainer').animate({
width: 'toggle' height: '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; return false;
}); });
$('#buttonViewer').click(function(){ $('#buttonViewer').click(function(){
...@@ -119,12 +111,30 @@ ...@@ -119,12 +111,30 @@
} }
return false; return false;
}); });
$('#buttonPrev').click(function(){ $('#buttonPrev').mousedown(function(){
intv = 1;
ccmd = 'prev';
setIntv();
return false;
});
$('#buttonPrev').mouseup(function(){
if(intv<=5){
sendCommand({'command':'pl_previous'}); sendCommand({'command':'pl_previous'});
}
intv = 0;
return false;
});
$('#buttonNext').mousedown(function(){
intv = 1;
ccmd = 'next';
setIntv();
return false; return false;
}); });
$('#buttonNext').click(function(){ $('#buttonNext').mouseup(function(){
if(intv<=5){
sendCommand({'command':'pl_next'}); sendCommand({'command':'pl_next'});
}
intv = 0;
return false; return false;
}); });
$('#buttonFull').click(function(){ $('#buttonFull').click(function(){
...@@ -206,6 +216,7 @@ ...@@ -206,6 +216,7 @@
} }
} }
}); });
$('#viewContainer').animate({height: 'toggle'});
}); });
</script> </script>
</head> </head>
...@@ -214,42 +225,45 @@ ...@@ -214,42 +225,45 @@
<div align="center"> <div align="center">
<div id="mainContainer" align="center"> <div id="mainContainer" align="center">
<div id="controlContainer" class="ui-widget"> <div id="controlContainer" class="ui-widget">
<div class="ui-widget-header" style="text-align: left;">
<img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls
</div>
<table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content"> <table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content">
<tr> <tr>
<td colspan="3" class="ui-widget-header">Main Controls</td> <td id="controlButtons" width="380px">
</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="buttonPrev" class="button48 ui-corner-all" title="Previous"></div>
<div id="buttonPlay" class="button48 ui-corner-all" title="Play"></div>
<div id="buttonNext" class="button48 ui-corner-all" title="Next"></div> <div id="buttonNext" class="button48 ui-corner-all" title="Next"></div>
<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="buttonFull" class="button48 ui-corner-all" title="Full Screen"></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="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>
<td valign="top" width="42px">
<div id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Library" style="float: left;"><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" style="float: left;"><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" style="float: left;"><span class="ui-icon ui-icon-script"></span></div>
<div id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="Track Synchronisation" style="float: left;"><span class="ui-icon ui-icon-transfer-e-w"></span></div>
</td>
<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 style="margin-left:20px;">
<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="volumeSlider" title="Volume" style="width:200px"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></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="currentVolume" class="dynamic">50%</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> </div>
</td> </td>
<td rowspan="3"> <td rowspan="3" valign="top" width="141px">
<img id="albumArt" src="/art" width="141px" height="130px"/> <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <td colspan="3">
<div id="mediaTitle" class="dynamic"></div> <div id="mediaTitle" class="dynamic"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td id="seekContainer" valign="bottom" colspan="2"> <td id="seekContainer" valign="bottom" colspan="3">
<div id="seekSlider" title="Seek Time"></div> <div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
<table width="90%"> <table width="100%">
<tr> <tr>
<td> <td>
<div id="currentTime" class="dynamic">00:00:00</div> <div id="currentTime" class="dynamic">00:00:00</div>
...@@ -264,14 +278,20 @@ ...@@ -264,14 +278,20 @@
</table> </table>
</div> </div>
<div id="viewContainer" class="ui-widget">
<div class="ui-widget-header" style="text-align: left;"><img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Viewer</div>
<div id="mediaViewer" class="ui-widget-content">
<div href="http://localhost:8081/stream.flv" style="display:block; width:100%" id="player"></div>
</div>
</div>
<div id="libraryContainer" class="ui-widget"> <div id="libraryContainer" class="ui-widget">
<div class="ui-widget-header"> <div class="ui-widget-header" style="text-align: left;">
Library <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Library
</div> </div>
<div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;"> <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="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="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="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="Repeat"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></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="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="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="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="Play Selected"><span class="ui-icon ui-icon-play"></span></div>
...@@ -279,14 +299,9 @@ ...@@ -279,14 +299,9 @@
</div> </div>
<div id="libraryTree" class="ui-widget-content"></div> <div id="libraryTree" class="ui-widget-content"></div>
</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"> <div class="footer">
<?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?> VLC <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
</div> </div>
</div> </div>
</div> </div>
......
share/lua/http/js/common.js
View file @ b8f3efe9
var intv = 0;
var ccmd = "";
function format_time( s ){ function format_time( s ){
var hours = Math.floor(s/3600); var hours = Math.floor(s/3600);
var minutes = Math.floor((s/60)%60); var minutes = Math.floor((s/60)%60);
...@@ -7,3 +9,30 @@ function format_time( s ){ ...@@ -7,3 +9,30 @@ function format_time( s ){
seconds = seconds<10 ? "0"+seconds : seconds; seconds = seconds<10 ? "0"+seconds : seconds;
return hours+":"+minutes+":"+seconds; return hours+":"+minutes+":"+seconds;
} }
function setIntv(){
if(intv>0){
intv++;
setTimeout(setIntv,500);
}else{
intv=0
}
if(intv>5){
var nt = 0;
switch(ccmd){
case 'prev':
nt = Math.max(0,$('#seekSlider').slider('value')-10);
break;
case 'next':
nt = Math.max(0,$('#seekSlider').slider('value')+10);
break;
}
switch(current_que){
case 'main':
sendCommand({'command':'seek','val':Math.round((nt/100)*$('#seekSlider').attr('totalLength')),plreload:false});
break;
case 'stream':
sendVLMCmd('control Current seek '+nt);
break;
}
}
}
share/lua/http/js/controlers.js
View file @ b8f3efe9
...@@ -57,7 +57,7 @@ function updateStatus(){ ...@@ -57,7 +57,7 @@ function updateStatus(){
currentArt = $('[name="artwork_url"]',data).text(); currentArt = $('[name="artwork_url"]',data).text();
$('#albumArt').css({ $('#albumArt').css({
'visibility':'visible', 'visibility':'visible',
'display':'none' 'display':'block'
}); });
}else if($('[name="artwork_url"]',data).text()==""){ }else if($('[name="artwork_url"]',data).text()==""){
$('#albumArt').css({ $('#albumArt').css({
...@@ -87,6 +87,12 @@ function sendCommand(params){ ...@@ -87,6 +87,12 @@ function sendCommand(params){
updatePlayList(); updatePlayList();
} }
}); });
}else{
if(params.plreload===false){
$.ajax({
url: 'requests/status.xml',
data: params
});
}else{ }else{
$.ajax({ $.ajax({
url: 'requests/status.xml', url: 'requests/status.xml',
...@@ -97,6 +103,8 @@ function sendCommand(params){ ...@@ -97,6 +103,8 @@ function sendCommand(params){
}); });
} }
}
} }
function browse(dir){ function browse(dir){
dir = dir==undefined ? '~' : dir; dir = dir==undefined ? '~' : dir;
......
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