New http interface

Things that still need to be done :
 * check - and fix - compatibility with non-firefox browsers (it
   doesn't work in IE yet)
 * bind actions to the playlist sort/delete actions
 * fix the subtitle options stuff
 * add a "browse" dialog (i'm not sure if the is a good idea ...
   should be password protected)
 * VLM interface

Comments are welcome :)

share/http/functions.js

+/*****************************************************************************
+ * functions.js: VLC media player web interface
+ *****************************************************************************
+ * Copyright (C) 2005 the VideoLAN team
+ * $Id: $
+ *
+ * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+ *****************************************************************************/
+
+function loadXMLDoc( url, callback )
+{
+  // branch for native XMLHttpRequest object
+  if ( window.XMLHttpRequest )
+  {
+    req = new XMLHttpRequest();
+    req.onreadystatechange = callback;
+    req.open( "GET", url, true );
+    req.send( null );
+  // branch for IE/Windows ActiveX version
+  }
+  else if ( window.ActiveXObject )
+  {
+    req = new ActiveXObject( "Microsoft.XMLHTTP" );
+    if ( req )
+    {
+      req.onreadystatechange = callback;
+      req.open( "GET", url, true );
+      req.send();
+    }
+  }
+}
+
+function format_time( s )
+{
+    hours = Math.floor(s/3600);
+    minutes = Math.floor((s/60)%60);
+    seconds = s%60;
+    if( hours < 10 ) hours = "0"+hours;
+    if( minutes < 10 ) minutes = "0"+minutes;
+    if( seconds < 10 ) seconds = "0"+seconds;
+    return hours+":"+minutes+":"+seconds;
+}
+
+
+function in_play()
+{
+    input = value('input_mrl');
+    if( value('sout_mrl') != '' )
+        input += ' '+value('sout_mrl');
+    url = 'requests/status.xml?command=in_play&input='+escape(input);
+    loadXMLDoc( url, parse_status );
+}
+function in_enqueue()
+{
+    input = value('input_mrl');
+    if( value('sout_mrl') != '' )
+        input += ' '+value('sout_mrl');
+    url = 'requests/status.xml?command=in_enqueue&input='+escape(input);
+    loadXMLDoc( url, parse_status );
+}
+function pl_play( id )
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_play&id='+id, parse_status );
+}
+function pl_pause()
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_pause', parse_status );
+}
+function pl_stop()
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_stop', parse_status );
+}
+function pl_next()
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_next', parse_status );
+}
+function pl_previous()
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_previous', parse_status );
+}
+function pl_delete( id )
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_delete&id='+id, parse_status );
+}
+function pl_empty()
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_empty', parse_status );
+}
+function volume_down()
+{
+    loadXMLDoc( 'requests/status.xml?command=volume&val=-20', parse_status );
+}
+function volume_up()
+{
+    loadXMLDoc( 'requests/status.xml?command=volume&val=%2B20', parse_status );
+}
+function fullscreen()
+{
+    loadXMLDoc( 'requests/status.xml?command=fullscreen', parse_status );
+}
+function update_status()
+{
+    loadXMLDoc( 'requests/status.xml', parse_status );
+}
+function update_playlist()
+{
+    loadXMLDoc( 'requests/playlist.xml', parse_playlist );
+}
+
+function parse_status()
+{
+    if( req.readyState == 4 )
+    {
+        if( req.status == 200 )
+        {
+            status = req.responseXML.documentElement;
+            document.getElementById( 'time' ).textContent = format_time( status.getElementsByTagName( 'time' )[0].firstChild.data );
+            document.getElementById( 'length' ).textContent = format_time( status.getElementsByTagName( 'length' )[0].firstChild.data );
+            if( status.getElementsByTagName( 'volume' ).length != 0 )
+            document.getElementById( 'volume' ).textContent = Math.floor(status.getElementsByTagName( 'volume' )[0].firstChild.data/5.12)+"%";
+            document.getElementById( 'state' ).textContent = status.getElementsByTagName( 'state' )[0].firstChild.data;
+            if( status.getElementsByTagName( 'state' )[0].firstChild.data == "playing" )
+            {
+                document.getElementById( 'btn_pause_img' ).setAttribute( 'src', 'images/pause.png' );
+            }
+            else
+            {
+                document.getElementById( 'btn_pause_img' ).setAttribute( 'src', 'images/play.png' );
+            }
+        }
+        else
+        {
+            /*alert( 'Error! HTTP server replied: ' + req.status );*/
+        }
+    }
+}
+
+function parse_playlist()
+{
+    if( req.readyState == 4 )
+    {
+        if( req.status == 200 )
+        {
+            answer = req.responseXML.documentElement;
+            playtree = document.getElementById( 'playtree' );
+            pos = playtree;
+            while( playtree.hasChildNodes() )
+                playtree.removeChild( playtree.firstChild );
+            elt = answer.firstChild;
+            while( elt )
+            {
+                if( elt.nodeName == "node" )
+                {
+                    pos.appendChild( document.createElement( "div" ) );
+                    pos.lastChild.setAttribute( 'class', 'pl_node' );
+                    pos.lastChild.setAttribute( 'onclick', 'pl_play('+elt.getAttribute( 'id' )+');' );
+                    pos.lastChild.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
+                    pos.lastChild.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
+                }
+                else if( elt.nodeName == "leaf" )
+                {
+                    pos.appendChild( document.createElement( "a" ) );
+                    pl = pos.lastChild;
+                    pl.setAttribute( 'class', 'pl_leaf' );
+                    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;' );
+                    pl.setAttribute( 'title', elt.getAttribute( 'uri' ));
+                    pl.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
+                }
+                if( elt.firstChild )
+                {
+                    elt = elt.firstChild;
+                    pos = pos.lastChild;
+                }
+                else if( elt.nextSibling )
+                {
+                    elt = elt.nextSibling;
+                    pos = pos;
+                }
+                else
+                {
+                    elt = elt.parentNode.nextSibling;
+                    pos = pos.parentNode;
+                }
+            }
+        }
+        else
+        {
+            /*alert( 'Error! HTTP server replied: ' + req.status );*/
+        }
+    }
+}
+
+function set_css( item, element, value )
+{
+    for( j = 0; j<document.styleSheets.length; j++ )
+    {
+        cssRules = document.styleSheets[j].cssRules;
+        for( i = 0; i<cssRules.length; i++)
+        {
+            if( cssRules[i].selectorText == item )
+            {
+                cssRules[i].style.setProperty( element, value, null );
+                return;
+            }
+        }
+    }
+}
+
+function get_css( item, element )
+{
+    for( j = 0; j<document.styleSheets.length; j++ )
+    {
+        cssRules = document.styleSheets[j].cssRules;
+        for( i = 0; i<cssRules.length; i++)
+        {
+            if( cssRules[i].selectorText == item )
+            {
+                return cssRules[i].style.getPropertyValue( element );
+            }
+        }
+    }
+}
+
+function toggle_btn_text()
+{
+    if( get_css( '.btn_text', 'display' ) == 'none' )
+    {
+        set_css( '.btn_text', 'display', 'block' );
+    }
+    else
+    {
+        set_css( '.btn_text', 'display', 'none' );
+    }
+}
+
+function toggle_show_sout_helper()
+{
+    element = document.getElementById( "sout_helper" );
+        if( element.style.display == 'block' )
+    {
+        element.style.display = 'none';
+        document.getElementById( "sout_helper_toggle" ).value = 'Full sout interface';
+    }
+    else
+    {
+        element.style.display = 'block';
+        document.getElementById( "sout_helper_toggle" ).value = 'Hide sout interface';
+    }
+}
+
+function toggle_show( id )
+{
+    element = document.getElementById( id );
+    if( element.style.display == 'block' || element.style.display == '' )
+    {
+        element.style.display = 'none';
+    }
+    else
+    {
+        element.style.display = 'block';
+    }
+}
+
+function show( id )
+{
+    document.getElementById( id ).style.display = 'block';
+}
+function hide( id )
+{
+    document.getElementById( id ).style.display = 'none';
+}
+
+function hide_input( )
+{
+    document.getElementById( 'input_file' ).style.display = 'none';
+    document.getElementById( 'input_disc' ).style.display = 'none';
+    document.getElementById( 'input_network' ).style.display = 'none';
+}
+
+function checked( id )
+{
+    return document.getElementById( id ).checked;
+}
+function value( id )
+{
+    return document.getElementById( id ).value;
+}
+function radio_value( name )
+{
+    radio = document.getElementsByName( name );
+    for( i = 0; i<radio.length; i++ )
+    {
+        if( radio[i].checked )
+        {
+            return radio[i].value;
+        }
+    }
+    return "";
+}
+function disable( id )
+{/* FIXME */
+    return document.getElementById( id ).value;
+}
+
+function check_and_replace_int( id, val )
+{
+    var objRegExp = /^\d\d*$/;
+    if( value( id ) != ''
+        && ( !objRegExp.test( value( id ) )
+             || parseInt( value( id ) ) < 1 ) )
+        document.getElementById( id ).value = val;
+
+}
+
+function disable( id )
+{
+    document.getElementById( id ).disabled = true;
+}
+
+function enable( id )
+{
+    document.getElementById( id ).disabled = false;
+}
+
+function button_over( element )
+{
+    element.style.border = "1px solid black";
+}
+
+function button_out( element )
+{
+    element.style.border = "1px none black";
+}
+
+/* update the input MRL using data from the input file helper */
+/* FIXME ... subs support */
+function update_input_file()
+{
+    mrl = document.getElementById( 'input_mrl' );
+
+    mrl.value = value( 'input_file_filename' );
+}
+
+/* update the input MRL using data from the input disc helper */
+function update_input_disc()
+{
+    mrl = document.getElementById( 'input_mrl' );
+    type = radio_value( "input_disc_type" );
+    device = value( "input_disc_dev" );
+
+    check_and_replace_int( 'input_disc_title', 0 );
+    check_and_replace_int( 'input_disc_chapter', 0 );
+    check_and_replace_int( 'input_disc_subtrack', '' );
+    check_and_replace_int( 'input_disc_audiotrack', 0 );
+
+    title = value( 'input_disc_title' );
+    chapter = value( 'input_disc_chapter' );
+    subs = value( 'input_disc_subtrack' );
+    audio = value( 'input_disc_audiotrack' );
+
+    mrl.value = "";
+
+    if( type == "dvd" )
+    {
+        mrl.value += "dvd://";
+    }
+    else if( type == "dvdsimple" )
+    {
+        mrl.value += "dvdsimple://";
+    }
+    else if( type == "vcd" )
+    {
+        mrl.value += "vcd://";
+    }
+    else if( type == "cdda" )
+    {
+        mrl.value += "cdda://";
+    }
+
+    mrl.value += device;
+
+    if( title )
+    {
+        mrl.value += "@"+title;
+        if( chapter && type != "cdda" )
+            mrl.value += ":"+chapter;
+    }
+
+    if( type != "cdda" )
+    {
+        if( subs != '' )
+            mrl.value += " :sub-track="+subs;
+        if( audio != '' )
+            mrl.value += " :audio-track="+audio;
+    }
+
+}
+
+/* update the input MRL using data from the input network helper */
+function update_input_net()
+{
+    mrl = document.getElementById( 'input_mrl' );
+    type = radio_value( "input_net_type" );
+    
+    check_and_replace_int( 'input_net_udp_port', 1234 );
+    check_and_replace_int( 'input_net_udpmcast_port', 1234 );
+
+    mrl.value = "";
+
+    if( type == "udp" )
+    {
+        mrl.value += "udp://";
+        if( checked( 'input_net_udp_forceipv6' ) )
+            mrl.value += "[::]";
+        if( value( 'input_net_udp_port' ) )
+            mrl.value += ":"+value( 'input_net_udp_port' );
+    }
+    else if( type == "udpmcast" )
+    {
+        mrl.value += "udp://@"+value( 'input_net_udpmcast_address');
+        if( value( 'input_net_udpmcast_port' ) )
+            mrl.value += ":"+value( 'input_net_udpmcast_port' );
+    }
+    else if( type == "http" )
+    {
+        url = value( 'input_net_http_url' );
+        if( url.substring(0,7) != "http://"
+            && url.substring(0,8) != "https://"
+            && url.substring(0,6) != "ftp://"
+            && url.substring(0,6) != "mms://"
+            && url.substring(0,7) != "mmsh://" )
+            mrl.value += "http://";
+        mrl.value += url;
+    }
+    else if( type == "rtsp" )
+    {
+        url = value( 'input_net_rtsp_url' );
+        if( url.substring(0,7) != "rtsp://" )
+            mrl.value += "rtsp://";
+        mrl.value += url;
+    }
+
+    if( checked( "input_net_timeshift" ) )
+        mrl.value += " :access-filter=timeshift";
+}
+
+/* update the sout MRL using data from the sout_helper */
+function update_sout()
+{
+    mrl = document.getElementById( 'sout_mrl' );
+    mrl.value = "";
+
+    check_and_replace_int( 'sout_http_port', 8080 );
+    check_and_replace_int( 'sout_mmsh_port', 8080 );
+    check_and_replace_int( 'sout_rtp_port', 1234 );
+    check_and_replace_int( 'sout_udp_port', 1234 );
+    check_and_replace_int( 'sout_ttl', 1 );
+
+    if( checked( 'sout_soverlay' ) )
+    {
+        disable( 'sout_scodec' );
+        disable( 'sout_sub' );
+    }
+    else
+    {
+        enable( 'sout_scodec' );
+        enable( 'sout_sub' );
+    }
+
+    transcode =  checked( 'sout_vcodec_s' ) || checked( 'sout_acodec_s' )
+                 || checked( 'sout_sub' ) || checked( 'sout_soverlay' );
+
+    if( transcode )
+    {
+        mrl.value += ":sout=#transcode{";
+        alot = false; /* alot == at least one transcode */
+        if( checked( 'sout_vcodec_s' ) )
+        {
+            mrl.value += "vcodec="+value( 'sout_vcodec' )+",vb="+value( 'sout_vb' )+",scale="+value( 'sout_scale' );
+            alot = true;
+        }
+        if( checked( 'sout_acodec_s' ) )
+        {
+            if( alot ) mrl.value += ",";
+            mrl.value += "acodec="+value( 'sout_acodec' )+",ab="+value( 'sout_ab' );
+            if( value( 'sout_channels' ) )
+                mrl.value += ",channels="+value( 'sout_channels' );
+            alot = true;
+        }
+        if( checked( 'sout_soverlay' ) )
+        {
+            if( alot ) mrl.value += ",";
+            mrl.value += "soverlay";
+            alot = true;
+        }
+        else if( checked( 'sout_sub' ) )
+        {
+            if( alot ) mrl.value += ",";
+            mrl.value += "scodec="+value( 'sout_scodec' );
+            alot = true;
+        }
+        mrl.value += "}";
+    }
+
+    output = checked( 'sout_display' ) + checked( 'sout_file' )
+             + checked( 'sout_http' ) + checked( 'sout_mmsh' )
+             + checked( 'sout_rtp' )  + checked( 'sout_udp' );
+
+    if( output )
+    {
+        if( transcode )
+            mrl.value += ":";
+        else
+            mrl.value += ":sout=#";
+        aloo = false; /* aloo == at least one output */
+        mux = radio_value( 'sout_mux' );
+        ttl = parseInt( value( 'sout_ttl' ) );
+        if( output > 1 ) mrl.value += "duplicate{";
+        if( checked( 'sout_display' ) )
+        {
+            if( output > 1 ) mrl.value += "dst="
+            mrl.value += "display";
+            aloo = true;
+        }
+        if( checked( 'sout_file' ) )
+        {
+            if( aloo ) mrl.value += ",";
+            if( output > 1 ) mrl.value += "dst="
+            mrl.value += "std{access=file,mux="+mux+",dst="+value( 'sout_file_filename' )+"}";
+            aloo = true;
+        }
+        if( checked( 'sout_http' ) )
+        {
+            if( aloo ) mrl.value += ",";
+            if( output > 1 ) mrl.value += "dst="
+            mrl.value += "std{access=http,mux="+mux+",dst="+value( 'sout_http_addr' );
+            if( value( 'sout_http_port' ) )
+                mrl.value += ":"+value( 'sout_http_port' );
+            mrl.value += "}";
+            aloo = true;
+        }
+        if( checked( 'sout_mmsh' ) )
+        {
+            if( aloo ) mrl.value += ",";
+            if( output > 1 ) mrl.value += "dst="
+            mrl.value += "std{access=mmsh,mux="+mux+",dst="+value( 'sout_mmsh_addr' );
+            if( value( 'sout_mmsh_port' ) )
+                mrl.value += ":"+value( 'sout_mmsh_port' );
+            mrl.value += "}";
+            aloo = true;
+        }
+        if( checked( 'sout_rtp' ) )
+        {
+            if( aloo ) mrl.value += ",";
+            if( output > 1 ) mrl.value += "dst="
+            mrl.value += "std{access=rtp";
+            if( ttl ) mrl.value += "{ttl="+ttl+"}";
+            mrl.value += ",mux="+mux+",dst="+value( 'sout_rtp_addr' );
+            if( value( 'sout_rtp_port' ) )
+                mrl.value += ":"+value( 'sout_rtp_port' );
+            if( checked( 'sout_sap' ) )
+            {
+                mrl.value += ",sap";
+                if( value( 'sout_sap_group' ) != '' )
+                {
+                    mrl.value += ",group=\""+value( 'sout_sap_group' )+"\"";
+                }
+                mrl.value += ",name=\""+value( 'sout_sap_name' )+"\"";
+            }
+            mrl.value += "}";
+            aloo = true;
+        }
+        if( checked( 'sout_udp' ) )
+        {
+            if( aloo ) mrl.value += ",";
+            if( output > 1 ) mrl.value += "dst="
+            mrl.value += "std{access=udp";
+            if( ttl ) mrl.value += "{ttl="+ttl+"}";
+            mrl.value += ",mux="+mux+",dst="+value( 'sout_udp_addr' );
+            if( value('sout_udp_port' ) )
+                mrl.value += ":"+value( 'sout_udp_port' );
+            if( checked( 'sout_sap' ) )
+            {
+                mrl.value += ",sap";
+                if( value( 'sout_sap_group' ) != '' )
+                {
+                    mrl.value += ",group=\""+value( 'sout_sap_group' )+"\"";
+                }
+                mrl.value += ",name=\""+value( 'sout_sap_name' )+"\"";
+            }
+            mrl.value += "}";
+            aloo = true;
+        }
+        if( output > 1 ) mrl.value += "}";
+    }
+
+    if( ( transcode || output ) && checked( 'sout_all' ) )
+        mrl.value += " :sout-all";
+}
+
+/* reset sout mrl value */
+function reset_sout()
+{
+    document.getElementById('sout_mrl').value = value('sout_old_mrl');
+}
+
+function save_sout()
+{
+    document.getElementById('sout_old_mrl').value = value('sout_mrl');
+}
+
+function loop_refresh_status()
+{
+    setTimeout( 'loop_refresh_status()', 1000 );
+    update_status();
+}
+function loop_refresh_playlist()
+{
+    setTimeout( 'loop_refresh_playlist()', 3000 );
+    update_playlist();
+}
+function loop_refresh()
+{
+    setTimeout('loop_refresh_status()',0);
+    setTimeout('loop_refresh_playlist()',0);
+}

share/http/index.html

+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  index.html: VLC media player web interface
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005 the VideoLAN team
+<  $Id: $
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+
+  <title>VLC media player - Web Interface</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+  <link href="style.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript" src="functions.js"></script>
+
+</head>
+
+<body onload="loop_refresh();">
+
+<div id="main">
+  <div class="title">
+    VLC media player
+    <button id="btn_toggle_text" onclick="toggle_btn_text();">
+      <img src="images/help.png" alt="Help" />
+      Help
+    </button>
+  </div>
+  <div class="controls">
+    <button id="btn_open" onclick="toggle_show('input');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/eject.png" alt="Open" />
+      <span class="btn_text">Open</span>
+    </button>
+    &nbsp;
+    <button id="btn_stop" onclick="pl_stop();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/stop.png" alt="Stop" />
+      <span class="btn_text">Stop</span>
+    </button>
+    <!--<button id="btn_play" onclick="alert('FIXME');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/play.png" alt="Play" />
+      <span class="btn_text">Play</span>
+    </button>-->
+    <button id="btn_pause" onclick="pl_pause();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/pause.png" alt="Pause" id="btn_pause_img" />
+      <span class="btn_text">Pause</span>
+    </button>
+    &nbsp;
+    <button id="btn_previous" onclick="pl_previous();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/prev.png" alt="Previous" />
+      <span class="btn_text">Previous</span>
+    </button>
+    <button id="btn_next" onclick="pl_next();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/next.png" alt="Next" />
+      <span class="btn_text">Next</span>
+    </button>
+    &nbsp;
+    <button id="btn_sout" onclick="toggle_show('sout');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/sout.png" alt="Stream Output" />
+      <span class="btn_text">Stream Output</span>
+    </button>
+    <button id="btn_playlist" onclick="toggle_show('playlist');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/playlist.png" alt="Playlist" />
+      <span class="btn_text">Playlist</span>
+    </button>
+    &nbsp;
+    <button id="btn_fullscreen" onclick="fullscreen();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/fullscreen.png" alt="Fullscreen" />
+      <span class="btn_text">Fullscreen</span>
+    </button>
+    &nbsp;
+    <button id="btn_volume_down" onclick="volume_down();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/volume_down.png" alt="Decrease Volume" />
+      <span class="btn_text">Decrease Volume</span>
+    </button>
+    <button id="btn_volume_up" onclick="volume_up();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/volume_up.png" alt="Increase Volume" />
+      <span class="btn_text">Increase Volume</span>
+    </button>
+  </div>
+  <div id="status">
+    <span id="state">(?)</span>
+    -
+    Time : <span id="time">(?)</span>/<span id="length">(?)</span>
+    -
+    Volume : <span id="volume">(?)</span>
+  </div>
+</div>
+
+<div id="input" style="display: none">
+  <div class="title">
+    Input
+  </div>
+  <div class="controls">
+    <label for="input_mrl">Input (MRL)</label>
+    <input type="text" name="input_mrl" id="input_mrl" size="60" onkeypress="if( event.keyCode == 13 ) in_play();"/>
+    <input type="button" value="Play" onclick="in_play();" />
+    <input type="button" value="Enqueue" onclick="in_enqueue();" />
+    <br/>
+    <!--<button id="btn_inhide" onclick="hide_input();">
+      Hide
+    </button>-->
+    <button id="btn_file" onclick="hide_input();show('input_file');update_input_file();">
+      File
+    </button>
+    <button id="btn_disc" onclick="hide_input();show('input_disc');update_input_disc();">
+      Disc
+    </button>
+    <button id="btn_network" onclick="hide_input();show('input_network');update_input_net();">
+      Network
+    </button>
+  </div>
+  <div id="input_helper">
+    <div id="input_file" style="display: block">
+      Open File
+      <hr/>
+      <label for="input_file_filename">File name</label>
+      <input type="text" id="input_file_filename" size="60" />
+      <hr/>
+      <input type="checkbox" id="input_sub_options" />
+      <label for="input_sub_options">Subtitle options *TODO/FIXME/FIXHTTPD*</label>
+      <br/>
+      <label for="input_sub_file">Subtitles file</label>
+      <input type="text" id="input_sub_file" size="60" />
+      <br/><!-- TODO -->
+      <label for="input_sub_enc">Subtitles encoding</label>
+      <select id="input_sub_enc">
+        <option></option>
+      </select>
+      <br/>
+      <label for="input_sub_size">Font size</label>
+      <select id="input_sub_size">
+        <option></option>
+      </select>
+      <label for="input_sub_justification">Justification</label>
+      <select id="input_sub_justification">
+        <option></option>
+      </select>
+      <br/>
+      <label for="input_sub_fps">Frames per second</label>
+      <input type="text" id="input_sub_fps" />
+      <label for="input_sub_delay">Delay</label>
+      <input type="text" id="input_sub_delay" />
+    </div>
+    <div id="input_disc" style="display: none">
+      Open Disc
+      <hr/>
+      Disc type :
+      <input type="radio" name="input_disc_type" id="input_disc_dvdmenu" value="dvd" onchange="update_input_disc();" />
+      <label for="input_disc_dvdmenu">DVD (menus)</label>
+      <input type="radio" name="input_disc_type" id="input_disc_dvd" value="dvdsimple" onchange="update_input_disc();" />
+      <label for="input_disc_dvd">DVD</label>
+      <input type="radio" name="input_disc_type" id="input_disc_vcd" value="vcd" onchange="update_input_disc();" />
+      <label for="input_disc_vcd">VCD</label>
+      <input type="radio" name="input_disc_type" id="input_disc_cdda" value="cdda" onchange="update_input_disc();" />
+      <label for="input_disc_cdda">Audio CD</label>
+      <hr/>
+      <table>
+        <tr>
+          <td>
+            <label for="input_disc_dev">Device name</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_dev" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_title">Title</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_title" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_chapter">Chapter</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_chapter" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_subtrack">Subtitles track</label>
+          </td>
+          <td>
+             <input type="text" id="input_disc_subtrack" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_audiotrack">Audio track</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_audiotrack" onchange="update_input_disc();" />
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div id="input_network" style="display: none">
+      Open Network
+      <hr/>
+      <table>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_udp" value="udp" onchange="update_input_net();" />
+            <label for="input_net_udp">UDP/RTP</label>
+          </td>
+          <td>
+            <label for="input_net_udp_port">Port</label>
+            <input type="text" id="input_net_udp_port" size="6" onchange="update_input_net();" />
+            <input type="checkbox" id="input_net_udp_forceipv6" onchange="update_input_net();" />
+            <label for="input_net_udp_forceipv6">Force IPv6</label>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_udpmcast" value="udpmcast" onchange="update_input_net();" />
+            <label for="input_net_udpmcast">UDP/RTP Multicast</label>
+          </td>
+          <td>
+            <label for="input_net_udpmcast_address">Address</label>
+            <input type="text" id="input_net_udpmcast_address" onchange="update_input_net();" />
+            <label for="input_net_udpmcast_port">Port</label>
+            <input type="text" id="input_net_udpmcast_port" size="6" onchange="update_input_net();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_http" value="http" onchange="update_input_net();" />
+            <label for="input_net_http">HTTP/HTTPS/FTP/MMS</label>
+          </td>
+          <td>
+            <label for="input_net_http_url">URL</label>
+            <input type="text" id="input_net_http_url" onchange="update_input_net();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_rtsp" value="rtsp" onchange="update_input_net();" />
+            <label for="input_net_rtsp">RTSP</label>
+          </td>
+          <td>
+            <label for="input_net_rtsp_url">URL</label>
+            <input type="text" id="input_net_rtsp_url" value="rtsp://" onchange="update_input_net();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="input_net_timeshift" onchange="update_input_net();" />
+            <label for="input_net_timeshift">Allow timeshifting</label>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+
+<div id="sout" style="display: none">
+  <div class="title">
+    Stream Output
+  </div>
+  <div class="controls">
+    <label for="sout_mrl">Destination (MRL)</label>
+    <input type="text" name="sout_mrl" id="sout_mrl" size="60" />
+    <br/>
+    <input type="submit" value="Save" onclick="save_sout();" />
+    <input type="button" value="Cancel" onclick="reset_sout();"/>
+    <input type="hidden" id="sout_old_mrl" value="" /> <!-- FIXME -->
+    <input type="button" id="sout_helper_toggle" onclick="toggle_show_sout_helper()" value="Full sout interface" />
+  </div>
+  <div id="sout_helper" style="display: none;" >
+    Stream Output Helper
+    <hr/>
+    <div id="sout_method">
+      <table>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_display" onchange="update_sout()"/>
+            <label for="sout_display">Display</label>
+          </td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_file" onchange="update_sout()"/>
+            <label for="sout_file">File</label>
+          </td>
+          <td>
+            <label for="sout_file_filename">File name</label>
+            <input type="text" id="sout_file_filename" onchange="update_sout()"/>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_http" onchange="update_sout()"/>
+            <label for="sout_http">HTTP</label>
+          </td>
+          <td>
+            <label for="sout_http_addr">Address</label>
+            <input type="text" id="sout_http_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_http_port">Port</label>
+            <input type="text" id="sout_http_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_mmsh" onchange="update_sout()"/>
+            <label for="sout_mmsh">MMSH</label>
+          </td>
+          <td>
+            <label for="sout_mmsh_addr">Address</label>
+            <input type="text" id="sout_mmsh_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_mmsh_port">Port</label>
+            <input type="text" id="sout_mmsh_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_rtp" onchange="update_sout()"/>
+            <label for="sout_rtp">RTP</label>
+          </td>
+          <td>
+            <label for="sout_rtp_addr">Address</label>
+            <input type="text" id="sout_rtp_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_rtp_port">Port</label>
+            <input type="text" id="sout_rtp_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_udp" onchange="update_sout()"/>
+            <label for="sout_udp">UDP</label>
+          </td>
+          <td>
+            <label for="sout_udp_addr">Address</label>
+            <input type="text" id="sout_udp_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_udp_port">Port</label>
+            <input type="text" id="sout_udp_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <hr/>
+    <div id="sout_muxh">
+      <input type="radio" name="sout_mux" id="sout_mux_default" value="" onchange="update_sout()" />
+      <label for="sout_mux_default">Default</label>
+      <input type="radio" name="sout_mux" id="sout_mux_ts" value="ts" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MPEG TS</label>
+      <input type="radio" name="sout_mux" id="sout_mux_ps" value="ps" onchange="update_sout()"/>
+      <label for="sout_mux_ps">MPEG PS</label>
+      <input type="radio" name="sout_mux" id="sout_mux_mpeg1" value="mpeg1" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MPEG 1</label>
+      <input type="radio" name="sout_mux" id="sout_mux_ogg" value="ogg" onchange="update_sout()"/>
+      <label for="sout_mux_ts">OGG</label>
+      <br/>
+      <input type="radio" name="sout_mux" id="sout_mux_asf" value="asf" onchange="update_sout()"/>
+      <label for="sout_mux_ts">ASF</label>
+      <input type="radio" name="sout_mux" id="sout_mux_mp4" value="mp4" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MP4</label>
+      <input type="radio" name="sout_mux" id="sout_mux_mov" value="mov" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MOV</label>
+      <input type="radio" name="sout_mux" id="sout_mux_wav" value="wav" onchange="update_sout()"/>
+      <label for="sout_mux_ts">WAV</label>
+      <input type="radio" name="sout_mux" id="sout_mux_raw" value="raw" onchange="update_sout()"/>
+      <label for="sout_mux_ts">Raw</label>
+    </div>
+    <hr/>
+    <div id="sout_transcode">
+      <table>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_vcodec_s" onchange="update_sout()"/>
+            <label for="sout_vcodec_s">Video Codec</label>
+          </td>
+          <td>
+            <select id="sout_vcodec" onchange="update_sout()">
+              <option value="mp1v">mp1v</option>
+              <option value="mp2v">mp2v</option>
+              <option value="mp4v">mp4v</option>
+              <option value="DIV1">DIV1</option>
+              <option value="DIV2">DIV2</option>
+              <option value="DIV3">DIV3</option>
+              <option value="H263">H263</option>
+              <option value="H264">H264</option>
+              <option value="WMV1">WMV1</option>
+              <option value="WMV2">WMV2</option>
+              <option value="MJPG">MJPG</option>
+              <option value="theo">theo</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_vb">Bitrate (kb/s)</label>
+            <select id="sout_vb" onchange="update_sout()">
+              <option value="4096">4096</option>
+              <option value="3072">3072</option>
+              <option value="2048">2048</option>
+              <option value="1024">1024</option>
+              <option value="768">768</option>
+              <option value="512">512</option>
+              <option value="384">384</option>
+              <option value="256">256</option>
+              <option value="192">192</option>
+              <option value="128">128</option>
+              <option value="96">96</option>
+              <option value="64">64</option>
+              <option value="32">32</option>
+              <option value="16">16</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_scale">Scale</label>
+            <select id="sout_scale" onchange="update_sout()">
+              <option value="0.25">0.25</option>
+              <option value="0.5">0.5</option>
+              <option value="0.75">0.75</option>
+              <option value="1" selected="selected">1</option>
+              <option value="1.25">1.25</option>
+              <option value="1.5">1.5</option>
+              <option value="1.75">1.75</option>
+              <option value="2">2</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_acodec_s" onchange="update_sout()"/>
+            <label for="sout_acodec_s">Audio Codec</label>
+          </td>
+          <td>
+            <select id="sout_acodec" onchange="update_sout()">
+              <option value="mpga">mpga</option>
+              <option value="mp2a">mp2a</option>
+              <option value="mp3">mp3</option>
+              <option value="mp4a">mp4a</option>
+              <option value="a42">a52</option>
+              <option value="vorb">vorb</option>
+              <option value="flac">flac</option>
+              <option value="spx">spx</option>
+              <option value="s16l">s16l</option>
+              <option value="fl32">fl32</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_ab">Bitrate (kb/s)</label>
+            <select id="sout_ab" onchange="update_sout()">
+              <option value="512">512</option>
+              <option value="384">384</option>
+              <option value="256">256</option>
+              <option value="192">192</option>
+              <option value="128">128</option>
+              <option value="96">96</option>
+              <option value="64">64</option>
+              <option value="32">32</option>
+              <option value="16">16</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_channels">Channels</label>
+            <select id="sout_channels" onchange="update_sout()">
+              <option value="">default</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="4">4</option>
+              <option value="6">6</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_sub" onchange="update_sout()"/>
+            <label for="sout_sub">Subtitles Codec</label>
+          </td>
+          <td>
+            <select id="sout_scodec" onchange="update_sout()">
+              <option value="dvbs">dvbs</option>
+            </select>
+          </td>
+          <td colspan="2">
+            <input type="checkbox" id="sout_soverlay" onchange="update_sout()"/>
+            <label for="sout_soverlay">Subtitles overlay</label>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <hr/>
+    <div id="sout_misc">
+      <input type="checkbox" id="sout_sap" onchange="update_sout()"/>
+      <label for="sout_sap">SAP announce</label>
+      <br/>
+      <label for="sout_sap_group">Group name</label>
+      <input type="text" id="sout_sap_group" onchange="update_sout()"/>
+      <label for="sout_sap_name">Channel name</label>
+      <input type="text" id="sout_sap_name" onchange="update_sout()"/>
+      <hr/>
+      <input type="checkbox" id="sout_all" onchange="update_sout()"/>
+      <label for="sout_all">Select all elementary streams</label>
+      <hr/>
+      <label for="sout_ttl">Time-To-Live (TTL)</label>
+      <input type="text" id="sout_ttl" onchange="update_sout()"/>
+    </div>
+  </div>
+</div>
+
+<div id="playlist">
+  <div class="title">
+    Playlist
+  </div>
+  <div class="controls">
+    <button id="btn_delete" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/delete.png" alt="Delete" />
+      <span class="btn_text">Delete</span>
+    </button>
+    <button id="btn_empty" onclick="pl_empty();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/empty.png" alt="Empty" />
+      <span class="btn_text">Empty</span>
+    </button>
+    &nbsp;
+    <button id="btn_sort" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/sort.png" alt="Sort" />
+      <span class="btn_text">Sort</span>
+    </button>
+    &nbsp;
+    <button id="btn_shuffle" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/shuffle.png" alt="Shuffle" />
+      <span class="btn_text">Shuffle</span>
+    </button>
+    <button id="btn_loop" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/loop.png" alt="Loop" />
+      <span class="btn_text">Loop</span>
+    </button>
+    <button id="btn_repeat" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/repeat.png" alt="Repeat" />
+      <span class="btn_text">Repeat</span>
+    </button>
+  </div>
+  <div id="playtree">
+    (?)
+  </div>
+</div>
+
+<div id="footer">
+  <vlc id="value" param1="copyright" />
+</div>
+
+</body>
+
+</html>

share/http/requests/playlist.xml

+<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  playlist.xml: VLC media player web interface
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005 the VideoLAN team
+<  $Id: $
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+<vlc id="rpn" param1="first_item 0 store" />
+<vlc id="rpn" param1="last_depth 0 store" />
+<vlc id="foreach" param1="pl" param2="playlist" />
+  <vlc id="if" param1="pl.depth value last_depth value <" />
+    <vlc id="rpn" param1="pl.depth value ':' last_depth value 1 - ':' 1 strcat strcat strcat strcat" />
+    <vlc id="foreach" param1="the_final_countdown" param2="integer" />
+      </node>
+    <vlc id="end" />
+  <vlc id="end" />
+  <vlc id="if" param1="pl.type value 'Node' strcmp" />
+    <vlc id="rpn" param1="1 +" />
+    <leaf id="<vlc id="value" param1="pl.index" />" <vlc id="if" param1="pl.current" /> current="current" <vlc id="end" /> uri="<vlc id="value" param1="pl.uri" />" name="<vlc id="value" param1="pl.name" />" />
+  <vlc id="else" />
+    <node id="<vlc id="value" param1="pl.index" />" name="<vlc id="value" param1="pl.name" />" >
+    <vlc id="if" param1="first_item value 0 ="/>
+      <vlc id="rpn" param1="first_item 1 store" />
+    <vlc id="end"/>
+    <vlc id="if" param1="pl.i_children 0 !=" />
+      
+    <vlc id="else" />
+      </node>
+    <vlc id="end" />
+  <vlc id="end" />
+  <vlc id="rpn" param1="last_depth pl.depth value store" />
+<vlc id="end" />
+<vlc id="rpn" param1="0 ':' last_depth value 1 - ':' 1 strcat strcat strcat strcat" />
+<vlc id="foreach" param1="the_final_countdown" param2="integer" />
+  </node>
+<vlc id="end" />

share/http/requests/status.xml

+<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  status.xml: VLC media player web interface
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005 the VideoLAN team
+<  $Id: $
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+<vlc id="if" param1="url_param 1 =" />
+  <vlc id="rpn" param1="input 'input' url_extract store" />
+  <vlc id="rpn" param1="command 'command' url_extract store" />
+  <vlc id="rpn" param1="id 'id' url_extract store" />
+  <vlc id="rpn" param1="val 'val' url_extract store" />
+
+  <!-- input commands -->
+  <vlc id="if" param1="command value 'in_play' strcmp 0 =" />
+    <vlc id="rpn" param1="input value dup playlist_add vlc_play" />
+  <vlc id="end" />
+  <vlc id="if" param1="command value 'in_enqueue' strcmp 0 =" />
+    <vlc id="rpn" param1="input value dup playlist_add" />
+  <vlc id="end" />
+
+  <!-- playlist commands -->
+  <vlc id="if" param1="command value 'pl_play' strcmp 0 =" />
+    <vlc id="rpn" param1="id value vlc_play" />
+  <vlc id="end" />
+  <vlc id="if" param1="command value 'pl_pause' strcmp 0 =" />
+    <vlc id="rpn" param1="vlc_pause" />
+  <vlc id="end" />
+  <vlc id="if" param1="command value 'pl_stop' strcmp 0 =" />
+    <vlc id="rpn" param1="vlc_stop" />
+  <vlc id="end" />
+  <vlc id="if" param1="command value 'pl_next' strcmp 0 =" />
+    <vlc id="rpn" param1="vlc_next" />
+  <vlc id="end" />
+  <vlc id="if" param1="command value 'pl_previous' strcmp 0 =" />
+    <!-- FIXME -->
+    <vlc id="rpn" param1="vlc_previous" />
+    <vlc id="rpn" param1="vlc_previous" />
+  <vlc id="end" />
+  <vlc id="if" param1="command value 'pl_delete' strcmp 0 =" />
+    <vlc id="rpn" param1="id value playlist_delete" />
+  <vlc id="end" />
+  <vlc id="if" param1="command value 'pl_empty' strcmp 0 =" />
+    <vlc id="rpn" param1="playlist_empty" />
+  <vlc id="end" />
+
+  <!-- misc commands -->
+  <vlc id="if" param1="command value 'fullscreen' strcmp 0 =" />
+    <vlc id="rpn" param1="'fullscreen' 'VLC_OBJECT_VOUT' vlc_var_get ! 'fullscreen' 'VLC_OBJECT_VOUT' vlc_var_set" />
+  <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" />
+<root>
+  <volume><vlc id="value" param1="volume" /></volume>
+  <length><vlc id="value" param1="stream_length" /></length>
+  <time><vlc id="value" param1="stream_time" /></time>
+  <state><vlc id="value" param1="stream_state" /></state>
+  <position><vlc id="value" param1="stream_position" /></position>
+</root>

share/http/style.css

+/*****************************************************************************
+ * style.css: VLC media player web interface
+ *****************************************************************************
+ * Copyright (C) 2005 the VideoLAN team
+ * $Id: $
+ *
+ * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+ *****************************************************************************/
+
+body {
+	background-color: #eee;
+	font-family: Arial, sans-serif;
+	font-size: 12pt;
+	text-align: center; /* Center on page - IE */
+}
+
+div {
+	padding: 0px;
+	margin: 0px;
+	text-align: left;
+}
+
+div#main, div#playlist, div#input, div#sout, div#footer {
+	width: 600px;
+	background: #fff;
+	border: solid #000 1px;
+	margin: 10px auto; /* Center on page - Firefox */
+	padding: 0px;
+	overflow: hidden; /* so that the title bar doesn't overflow on
+                           * firefox but still takes all the div's width
+                           * in IE */
+}
+
+div#footer {
+	font-size: 8pt;
+	text-align: center;
+}
+
+.btn_text {
+	display: none;
+}
+
+form {
+	display: inline;
+}
+
+input {
+	border: solid #000 1px;
+	background-color: #fff;
+}
+
+div#sout_helper, div#input_helper {
+	margin: 10px;
+	border: solid #ccc 2px;
+}
+div#sout_helper hr, div#input_helper hr {
+	border: solid #ccc 1px;
+}
+
+div.title {
+	width: 600px/*576px*/; /* see overflow:hidden several lines 
+                                * before for explanation */
+	background: #000 url('images/vlc16x16.png') no-repeat top left;
+	padding-left: 24px;
+	color: #fff;
+	font-weight: bold;
+}
+div.title button {
+	border: 1px none #000;
+	padding: 0px;
+	background-color: #000;
+	color: #fff;
+}
+div.controls {
+	width: 100%;
+	padding: 3px 5px;
+}
+div.controls button {
+	border: 1px none #000;
+	padding: 0px;
+	background-color: #fff;
+}
+
+ul#list, ul#list ul {
+	list-style-type: none;
+	padding-top: 0px;
+	margin-top: 0px;
+	padding-left: 1em;
+}
+
+div.pl_node, a.pl_leaf {
+	padding-left: 20px;
+}
+div.pl_node {
+	font-style: italic;
+}
+a.pl_leaf {
+	font-style: normal;
+	color: #00f;
+	text-decoration: underline;
+	display: block;
+}
+a.pl_leaf:hover {
+	background-color: #ffd;
+}