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: Jean-Baptiste Kempf <jb@videolan.org>

diff --git a/share/lua/http/css/main.css b/share/lua/http/css/main.css
index 191d37f00316b12126b568d630bf3333aefdb89b..57c19d3554784b8800b7f3ee161b11432635074a 100644 (file)
--- 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 a57b70cf85c8c555615e65de9d7d793df43a14d1..bf6679491b27282b66583ca4b62bd56e7a7d2855 100644 (file)
--- 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 1330d566e84f06efd9d43005a2d7359f0ae6174d..df06a0e10db9c813444d0b3f9cd753d58c328c7a 100644 (file)
--- 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 bfc24b1c5f4917b315482d8d9c95a5b5253b1d57..f692ba71289ef024532a67bddbf895a9f10a8836 100644 (file)
--- 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 0f1302e3b15f5dec36129bef29ade6b980797e52..6aa44d135c04c237e083934fafb696ec2e5b349c 100644 (file)
--- 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();
+                               }
+                       });
+               }
+               
        }
        
 }