[vlc-devel] [PATCH] LUA HTTP UI - Adjustments
Elminster2031
elminster2031 at archmageinc.com
Tue Nov 15 19:10:59 CET 2011
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.
---
share/lua/http/css/main.css | 11 +--
share/lua/http/dialogs/offset_window.html | 4 +-
share/lua/http/index.html | 101 ++++++++++++++++------------
share/lua/http/js/common.js | 29 ++++++++
share/lua/http/js/controlers.js | 24 +++++--
5 files changed, 109 insertions(+), 60 deletions(-)
diff --git a/share/lua/http/css/main.css b/share/lua/http/css/main.css
index 191d37f..57c19d3 100644
--- a/share/lua/http/css/main.css
+++ b/share/lua/http/css/main.css
@@ -8,22 +8,19 @@ body{
width: 800px;
}
#controlContainer{
- float: left;
width: 800px;
}
#libraryContainer{
- width: 300px;
- float: left;
+ width: 800px;
}
#libraryTree{
- height: 477px;
+ height: 300px;
overflow:scroll;
white-space: nowrap;
text-align: left;
}
#viewContainer{
- width: 500px;
- float: left;
+ width: 800px;
}
#mediaViewer{
min-height: 500px;
@@ -42,7 +39,7 @@ body{
}
#currentVolume{
display: inline-block;
- margin-left: -70px;
+ margin-left: -110px;
}
#mediaTitle{
text-align: left;
diff --git a/share/lua/http/dialogs/offset_window.html b/share/lua/http/dialogs/offset_window.html
index a57b70c..bf66794 100644
--- a/share/lua/http/dialogs/offset_window.html
+++ b/share/lua/http/dialogs/offset_window.html
@@ -13,7 +13,7 @@
$( "#rateSlider" ).slider({
range: "min",
value: 1,
- min: 1,
+ min: 0.25,
max: 10,
step: 0.25,
stop: function( event, ui ) {
@@ -63,7 +63,7 @@
});
});
</script>
-<div id="window_offset" title="Offset Configuration">
+<div id="window_offset" title="Track Synchronisation">
<div>Playback Rate</div>
<div id="rateSlider" title="Playback Rate"></div>
<div id="currentRate" class="dynamic">1x</div>
diff --git a/share/lua/http/index.html b/share/lua/http/index.html
index 1330d56..df06a0e 100644
--- a/share/lua/http/index.html
+++ b/share/lua/http/index.html
@@ -56,16 +56,8 @@
$('#buttonPlayList').click(function(){
$('#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;
});
$('#buttonViewer').click(function(){
@@ -119,12 +111,30 @@
}
return false;
});
- $('#buttonPrev').click(function(){
- sendCommand({'command':'pl_previous'});
+ $('#buttonPrev').mousedown(function(){
+ intv = 1;
+ ccmd = 'prev';
+ setIntv();
+ return false;
+ });
+ $('#buttonPrev').mouseup(function(){
+ if(intv<=5){
+ sendCommand({'command':'pl_previous'});
+ }
+ intv = 0;
+ return false;
+ });
+ $('#buttonNext').mousedown(function(){
+ intv = 1;
+ ccmd = 'next';
+ setIntv();
return false;
});
- $('#buttonNext').click(function(){
- sendCommand({'command':'pl_next'});
+ $('#buttonNext').mouseup(function(){
+ if(intv<=5){
+ sendCommand({'command':'pl_next'});
+ }
+ intv = 0;
return false;
});
$('#buttonFull').click(function(){
@@ -206,6 +216,7 @@
}
}
});
+ $('#viewContainer').animate({height: 'toggle'});
});
</script>
</head>
@@ -214,42 +225,45 @@
<div align="center">
<div id="mainContainer" align="center">
<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">
<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>
+ <td id="controlButtons" width="380px">
<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="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="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 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>
- <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>
+ <div style="margin-left:20px;">
+ <div id="volumeSlider" title="Volume" style="width:200px"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
+ <div id="currentVolume" class="dynamic">50%</div>
+ </div>
</td>
- <td rowspan="3">
- <img id="albumArt" src="/art" width="141px" height="130px"/>
+ <td rowspan="3" valign="top" width="141px">
+ <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
</td>
</tr>
<tr>
- <td colspan="2">
+ <td colspan="3">
<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%">
+ <td id="seekContainer" valign="bottom" colspan="3">
+ <div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
+ <table width="100%">
<tr>
<td>
<div id="currentTime" class="dynamic">00:00:00</div>
@@ -264,14 +278,20 @@
</table>
</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 class="ui-widget-header">
- Library
+ <div class="ui-widget-header" style="text-align: left;">
+ <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> 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="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="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>
@@ -279,14 +299,9 @@
</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()) ?>
+ VLC <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
</div>
</div>
</div>
diff --git a/share/lua/http/js/common.js b/share/lua/http/js/common.js
index bfc24b1..f692ba7 100644
--- a/share/lua/http/js/common.js
+++ b/share/lua/http/js/common.js
@@ -1,3 +1,5 @@
+var intv = 0;
+var ccmd = "";
function format_time( s ){
var hours = Math.floor(s/3600);
var minutes = Math.floor((s/60)%60);
@@ -7,3 +9,30 @@ function format_time( s ){
seconds = seconds<10 ? "0"+seconds : 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;
+ }
+ }
+}
diff --git a/share/lua/http/js/controlers.js b/share/lua/http/js/controlers.js
index 0f1302e..6aa44d1 100644
--- a/share/lua/http/js/controlers.js
+++ b/share/lua/http/js/controlers.js
@@ -57,7 +57,7 @@ function updateStatus(){
currentArt = $('[name="artwork_url"]',data).text();
$('#albumArt').css({
'visibility':'visible',
- 'display':'none'
+ 'display':'block'
});
}else if($('[name="artwork_url"]',data).text()==""){
$('#albumArt').css({
@@ -88,13 +88,21 @@ function sendCommand(params){
}
});
}else{
- $.ajax({
- url: 'requests/status.xml',
- data: params,
- success:function(data,status,jqXHR){
- updatePlayList();
- }
- });
+ if(params.plreload===false){
+ $.ajax({
+ url: 'requests/status.xml',
+ data: params
+ });
+ }else{
+ $.ajax({
+ url: 'requests/status.xml',
+ data: params,
+ success:function(data,status,jqXHR){
+ updatePlayList();
+ }
+ });
+ }
+
}
}
--
1.7.3.4
More information about the vlc-devel
mailing list