* add browse dialog for file input (this needs some authentification ... but

   i don't really know how i should handle it)
 * add now playing info

share/http/functions.js

@@ -2,7 +2,7 @@
  * functions.js: VLC media player web interface
  *****************************************************************************
  * Copyright (C) 2005 the VideoLAN team
- * $Id: $
+ * $Id$
  *
  * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
  *
@@ -63,6 +63,7 @@ function in_play()
         input += ' '+value('sout_mrl');
     url = 'requests/status.xml?command=in_play&input='+escape(input);
     loadXMLDoc( url, parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function in_enqueue()
 {
@@ -71,10 +72,12 @@ function in_enqueue()
         input += ' '+value('sout_mrl');
     url = 'requests/status.xml?command=in_enqueue&input='+escape(input);
     loadXMLDoc( url, parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function pl_play( id )
 {
     loadXMLDoc( 'requests/status.xml?command=pl_play&id='+id, parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function pl_pause()
 {
@@ -83,22 +86,27 @@ function pl_pause()
 function pl_stop()
 {
     loadXMLDoc( 'requests/status.xml?command=pl_stop', parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function pl_next()
 {
     loadXMLDoc( 'requests/status.xml?command=pl_next', parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function pl_previous()
 {
     loadXMLDoc( 'requests/status.xml?command=pl_previous', parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function pl_delete( id )
 {
     loadXMLDoc( 'requests/status.xml?command=pl_delete&id='+id, parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function pl_empty()
 {
     loadXMLDoc( 'requests/status.xml?command=pl_empty', parse_status );
+    setTimeout( 'update_playlist()', 1000 );
 }
 function volume_down()
 {
@@ -157,9 +165,9 @@ function parse_playlist()
         {
             answer = req.responseXML.documentElement;
             playtree = document.getElementById( 'playtree' );
-            pos = playtree;
-            while( playtree.hasChildNodes() )
-                playtree.removeChild( playtree.firstChild );
+            /* pos = playtree; */
+            pos = document.createElement( "div" );
+            pos_top = pos;
             elt = answer.firstChild;
             while( elt )
             {
@@ -179,7 +187,11 @@ function parse_playlist()
                     pl.setAttribute( 'href', 'javascript:pl_play('+elt.getAttribute( 'id' )+');' );
                     pl.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
                     if( elt.getAttribute( 'current' ) == 'current' )
+                    {
                         pl.setAttribute( 'style', 'font-weight: bold;' );
+                        document.getElementById( 'nowplaying' ).textContent
+                            = elt.getAttribute( 'name' );
+                    }
                     pl.setAttribute( 'title', elt.getAttribute( 'uri' ));
                     pl.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
                 }
@@ -199,6 +211,9 @@ function parse_playlist()
                     pos = pos.parentNode;
                 }
             }
+            while( playtree.hasChildNodes() )
+                playtree.removeChild( playtree.firstChild );
+            playtree.appendChild( pos_top );
         }
         else
         {
@@ -633,7 +648,7 @@ function loop_refresh_status()
 }
 function loop_refresh_playlist()
 {
-    setTimeout( 'loop_refresh_playlist()', 3000 );
+ /*   setTimeout( 'loop_refresh_playlist()', 10000 ); */
     update_playlist();
 }
 function loop_refresh()
@@ -641,3 +656,59 @@ function loop_refresh()
     setTimeout('loop_refresh_status()',0);
     setTimeout('loop_refresh_playlist()',0);
 }
+
+function browse( dest )
+{
+    document.getElementById( 'browse_dest' ).value = dest;
+    browse_dir( document.getElementById( 'browse_lastdir' ).value );
+    show( 'browse' );
+}
+function browse_dir( dir )
+{
+    document.getElementById( 'browse_lastdir' ).value = dir;
+    loadXMLDoc( 'requests/browse.xml?dir='+dir, parse_browse_dir );
+}
+function browse_path( p )
+{
+    document.getElementById( document.getElementById( 'browse_dest' ).value ).value = p;
+    hide( 'browse' );
+    document.getElementById( document.getElementById( 'browse_dest' ).value ).focus();
+}
+function parse_browse_dir( )
+{
+    if( req.readyState == 4 )
+    {
+        if( req.status == 200 )
+        {
+            answer = req.responseXML.documentElement;
+            browser = document.getElementById( 'browser' );
+            pos = document.createElement( "div" );
+            elt = answer.firstChild;
+            while( elt )
+            {
+                if( elt.nodeName == "element" )
+                {
+                    pos.appendChild( document.createElement( "a" ) );
+                    pos.lastChild.setAttribute( 'class', 'browser' );
+                    if( elt.getAttribute( 'type' ) == 'directory' )
+                    {
+                        pos.lastChild.setAttribute( 'href', 'javascript:browse_dir(\''+elt.getAttribute( 'path' )+'\');');
+                    }
+                    else
+                    {
+                        pos.lastChild.setAttribute( 'href', 'javascript:browse_path(\''+elt.getAttribute( 'path' )+'\');' );
+                    }
+                    pos.lastChild.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
+                }
+                elt = elt.nextSibling;
+            }
+            while( browser.hasChildNodes() )
+                browser.removeChild( browser.firstChild );
+            browser.appendChild( pos );
+        }
+        else
+        {
+            /*alert( 'Error! HTTP server replied: ' + req.status );*/
+        }
+    }
+}

share/http/index.html

@@ -2,7 +2,7 @@
 <  index.html: VLC media player web interface
 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
 <  Copyright (C) 2005 the VideoLAN team
-<  $Id: $
+<  $Id$
 < 
 <  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
 < 
@@ -40,6 +40,22 @@
 
 <body onload="loop_refresh();">
 
+<div id="browse" style="display: none;">
+  <div class="title">
+    Browse
+  </div>
+  <div id="browser">
+    <a href="javascript:browse_dir('~');">Lets browse !</a>
+  </div>
+  <div class="controls">
+    <button id="btn_browse_close" onclick="hide('browse');">
+      Close
+    </button>
+    <input type="hidden" id="browse_lastdir" value="~" />
+    <input type="hidden" id="browse_dest" value="" />
+  </div>
+</div>
+
 <div id="main">
   <div class="title">
     VLC media player
@@ -105,6 +121,8 @@
     Time : <span id="time">(?)</span>/<span id="length">(?)</span>
     -
     Volume : <span id="volume">(?)</span>
+    <br/>
+    <span id="nowplaying">(?)</span>
   </div>
 </div>
 
@@ -136,7 +154,8 @@
       Open File
       <hr/>
       <label for="input_file_filename">File name</label>
-      <input type="text" id="input_file_filename" size="60" />
+      <input type="text" id="input_file_filename" size="60" onchange="update_input_file();" onfocus="update_input_file();"/>
+      <input type="button" id="input_file_browse" value="Browse" onclick="browse( 'input_file_filename' );" />
       <hr/>
       <input type="checkbox" id="input_sub_options" />
       <label for="input_sub_options">Subtitle options *TODO/FIXME/FIXHTTPD*</label>

share/http/requests/status.xml

@@ -3,7 +3,7 @@
 <  status.xml: VLC media player web interface
 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
 <  Copyright (C) 2005 the VideoLAN team
-<  $Id: $
+<  $Id$
 < 
 <  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
 < 
@@ -67,8 +67,7 @@
   <vlc id="end" />
   <vlc id="if" param1="command value 'volume' strcmp 0 =" />
     <vlc id="rpn" param1="val value vlc_volume_set" />
-    <!-- volume set <vlc id="value" param1="val" />-->
-  <vlc id="end" />
+  <vlc id="end"/>
 
 <vlc id="end" />
 <root>

share/http/style.css

@@ -2,7 +2,7 @@
  * style.css: VLC media player web interface
  *****************************************************************************
  * Copyright (C) 2005 the VideoLAN team
- * $Id: $
+ * $Id$
  *
  * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
  *
@@ -72,7 +72,7 @@ div#sout_helper hr, div#input_helper hr {
 }
 
 div.title {
-	width: 600px/*576px*/; /* see overflow:hidden several lines 
+	width: 100%/*576px*/; /* see overflow:hidden several lines 
                                 * before for explanation */
 	background: #000 url('images/vlc16x16.png') no-repeat top left;
 	padding-left: 24px;
@@ -85,6 +85,7 @@ div.title button {
 	background-color: #000;
 	color: #fff;
 }
+
 div.controls {
 	width: 100%;
 	padding: 3px 5px;
@@ -108,7 +109,7 @@ div.pl_node, a.pl_leaf {
 div.pl_node {
 	font-style: italic;
 }
-a.pl_leaf {
+a.pl_leaf, a.browser {
 	font-style: normal;
 	color: #00f;
 	text-decoration: underline;
@@ -117,3 +118,20 @@ a.pl_leaf {
 a.pl_leaf:hover {
 	background-color: #ffd;
 }
+
+div#browse {
+	background-color: #fff;
+	width: 70%;
+	overflow: hidden;
+	border: solid #888 1px;
+	margin: 10px auto; /* Center on page - Firefox */
+	position: absolute;
+	left: 15%;
+	z-index: 1;
+}
+div#browse div.title {
+	background-color: #008;
+}
+div#browser {
+	padding: 20px;
+}