]> git.sesse.net Git - vlc/blobdiff - share/http/index.html
FSF address change.
[vlc] / share / http / index.html
index eb00d10917f92970d5f7dd729120b0bab4b0cd6f..31e27ec4d41264ef3da85dbf22ec1ec16298cce9 100644 (file)
-<?xml version="1.0" encoding="iso-8859-1" ?>
-<!-- $Id$-->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
-<!DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml10/DTD/xhtml10transitional.dtd">
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  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., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml">
 
- <head>
-    <title>VLC media player</title>
-    <link href="/style.css" title="Default" rel="stylesheet" type="text/css" />
-    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-    <!-- Work around. should be done in the code -->
-    <vlc id="if" param1="url_param"/>
-        <meta http-equiv="refresh" content="0;url=/" />
-    <vlc id="else" />
-        <meta http-equiv="Refresh" content="60;url=/">
-    <vlc id="end" />
-    
-    <vlc id="control" param1="stop,pause,previous,next,add,sout,play,delete,empty,seek,fullscreen,keep,volume,sort,move" />
-    <vlc id="set" param1="sout" param2="string" />
-<script type="text/javascript">
+<head>
 
-function changeMe(item)
-{
-  if (item.parentNode.lastChild.style.display=="none")
-  {
-    item.parentNode.lastChild.style.display="block";
-    item.alt="[-]";
-    item.src="cone_minus.png";
-  }
-  else
-  {
-    item.parentNode.lastChild.style.display="none";
-    item.alt="[+]";
-    item.src="cone_plus.png";
-  }
-}
-</script>
+  <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>
+  <!-- in case people had scripts that sent commands to the default
+       index.html page -->
+  <vlc id="control" param1="stop,pause,previous,next,add,sout,play,delete,empty,seek,fullscreen,keep,volume,sort,move" />
 
-    <!-- left menu -->
-    <div class="left">
-      <div class="sectitle">Playback control</div>
-      <div class="section-controls">
-        <p>
-          <form method="get" action="" style="display: inline">
-            <input type="submit" name="control" value="stop" />
-          </form>
-          <form method="get" action="" style="display: inline">
-            <input type="submit" name="control" value="pause" />
-          </form>
-        </p>
-        <p>
-          <form method="get" action="" style="display: inline">
-            <input type="submit" name="control" value="previous" />
-          </form>
-          <form method="get" action="" style="display: inline">
-            <input type="submit" name="control" value="next" />
-          </form>
-        </p>
-        <p>
-          <form method="get" action="" style="display: inline">
-            <input type="submit" name="seek_value" value="-1min"/><input type="hidden" name="control" value="seek"/>
-          </form>
-          <form method="get" action="" style="display: inline">
-            <input type="submit" name="seek_value" value="+1min"/><input type="hidden" name="control" value="seek"/>
-          </form>
-        </p>
-        <p>
-          <form method="get" action="">
-            <input type="text" name="seek_value" size="14"/><input type="hidden" name="control" value="seek"/>
-            <input type="submit" value="Seek" />
-          </form>
-        </p>
-        <p>
-          <span class="small">( Seek Textbox: for example "+12min 42sec", "01:13:43", "-12%" etc... )</span>
-        </p>
-      </div> <!-- End section -->
+</head>
 
-      <div class="sectitle">Misc controls</div>
-      <div class="section-controls">
-        <form method="get" action="">
-               <input type="hidden" name="control" value="volume" />
-          Vol: <input type="text" name="value" size="5"/>
-               <input type="submit" value="Set" /><br /> (0 - 1024)<br /><span class="small">(for exemple: "536", "-12", "+42", "36%")</span>
-        </form>
-        <br />
-        <form method="get" action="">
-          <input type="submit" name="control" value="fullscreen" />
-        </form>
-      </div>
+<body onload="loop_refresh();">
 
-      <div class="sectitle">Status</div>
-      <div class="section">
-        State: <vlc id="value" param1="stream_state" /><br />
-        Length: <span id="length"><vlc id="value" param1="stream_length" /> s
-                </span><br />
-        Time: <span id="time"><vlc id="value" param1="stream_time" /> s</span><br />
-        Volume: <span id="volume"><vlc id="value" param1="volume" /></span>
-        <br /><a href="info.html">Information</a>  
-      </div>
+<div id="browse" style="display: none;">
+  <div class="title">
+    Browse
+  </div>
+  <div id="browser">
+    <a href="javascript:browse_dir(document.getElementById( 'browse_lastdir' ).value);">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 class="section"><a href="/admin/">Administration Page</a></div>
+<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>
+    <br/>
+    <span id="nowplaying">(?)</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" 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>
+      <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>
-    <!-- end left -->
-
-    <!-- main content -->
-    <div class ="right">
-      <h2 class="title"><a href="http://www.videolan.org/">VLC media player
-        <vlc id="value" param1="version" /></a> (http interface)
-      </h2>
-
-      <div class="sectitle">Add</div>
-      <div class="section">
-        <table class="add">
-          <tr>
-           <form method="get" action="?" enctype="text/plain" >
-              <td>Add a MRL (Media Resource Locator) to the playlist</td>
-              <td>
-               <input type="hidden" name="control" value="add" />
-              <input type="text" name="mrl" size="40" />
-              <input type="submit" value="Add" />
-             </td>
-             </form> 
-          </tr>
-         <tr>
-            <form method="get" action="" enctype="text/plain" >
-              <td>Stream Output:</td>
-              <td>
-              <input type="text" name="sout" size="40" value="<vlc id="get" param1="sout" param2="string" />" />
-              <input type="submit"  value="Sout" />
-             </td>
-             </form>
-           </tr>
-          </table>
-      </div>
-<!-- Playlist -->
-      <div class="section">
-       <form method="get" action="">
-         <ul id="playlist">
-           <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" />
-                         </ul></li>
-                     <vlc id="end" />
-                 <vlc id="end" />
-
-               <vlc id="if" param1="pl.type value 'Node' strcmp" />
-                 <vlc id="rpn" param1="1 +" />
-                 <li>
-                   <input type="checkbox" name="item" value="<vlc id="value" param1="pl.index" />"/>
-                   <vlc id="if" param1="pl.current" />
-                     <strong>
-                   <vlc id="end" />
-                   <a href="?control=play&amp;item=<vlc id="value" param1="pl.index" />">
-                   <vlc id="value" param1="pl.name" /><vlc id="if" param1="pl.uri value pl.name value strcmp"/>  (<vlc id="value" param1="pl.uri" />)<vlc id="end"/></a>
-                   <vlc id="if" param1="pl.current" />
-                     </strong>
-                   <vlc id="end" />
-                 </li>
-               <vlc id="else" />
-                 <li>
-                   <vlc id="if" param1="first_item value 0 ="/>
-                   <img alt="Cone" src="cone_plus.png" />
-                     Playlist
-                     <vlc id="rpn" param1="first_item 1 store" />
-                   <vlc id="else"/>
-                   <img alt="[-]" src="cone_minus.png" onclick='changeMe(this)'/>
-                   <vlc id="if" param1="pl.depth value 0 >"/>
-                     <input type="checkbox" name="item" value="<vlc id="value" param1="pl.index" />"/>
-                    <a href="?control=play&amp;item=<vlc id="value" param1="pl.index" />">
-                   <vlc id="end"/>
-                  <vlc id="value" param1="pl.name" />
-                   <vlc id="if" param1="pl.depth value 0 >"/>
-                     </a>
-                   <vlc id="end"/>
-                  (<vlc id="value" param1="pl.i_children" />
-                   item<vlc id="if" param1="pl.i_children 1 >" />s<vlc id="end" />)
-                   <vlc id="end"/>
-
-                   <vlc id="if" param1="pl.i_children 0 !=" />
-                       <ul>
-                   <vlc id="else" />
-                       </li>
-                   <vlc id="end" />
-
-               <vlc id="end" />
+    <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>
 
-               <vlc id="rpn" param1="last_depth pl.depth value store" />
+<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>
 
-           <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" />
-         </ul></li>
-     <vlc id="end" />
+<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" onclick="pl_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" onclick="pl_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" onclick="pl_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" onclick="pl_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>
 
-         </ul>
-         <input type="submit" name="control" value="delete" />
-         <input type="submit" name="control" value="empty" />
-         <input type="submit" name="control" value="keep" />
-                     <input type="submit" name="control" value="sort" /> by
-                     <select name="type">
-                       <option value="title">title</option>
-                       <option value="shuffle">shuffle</option>
-                     </select> with
-                     <select name="order">
-                       <option value="0">normal order</option>
-                       <option value="1">reverse order</option>
-                     </select>
-        
-       </form>
-      </div>
-    </div>
-    <!-- end main content -->
-    
-    <p style="text-align:center;font-size:1.2em;"> <vlc id="value" param1="copyright" /> </p>
+<div id="footer">
+  <vlc id="value" param1="copyright" />
+</div>
 
-    <script type="text/javascript">
-      got_time = <vlc id="value" param1="stream_time" />;
-      hours = Math.floor(got_time/ 3600);
-      minutes = Math.floor((got_time/60) % 60);
-      seconds = got_time % 60;
-      if ( hours < 10 ) hours = "0" + hours;
-      if ( minutes < 10 ) minutes = "0" + minutes;
-      if ( seconds < 10 ) seconds = "0" + seconds;
-      document.getElementById('time').innerHTML = hours+":"+minutes+":"+seconds;
-      got_length = <vlc id="value" param1="stream_length" />;
-      hours = Math.floor(got_length/ 3600);
-      minutes = Math.floor((got_length/60) % 60);
-      seconds = got_length % 60;
-      if ( hours < 10 ) hours = "0" + hours;
-      if ( minutes < 10 ) minutes = "0" + minutes;
-      if ( seconds < 10 ) seconds = "0" + seconds;
-      document.getElementById('length').innerHTML = hours+":"+minutes+":"+seconds;
-      got_volume = <vlc id="value" param1="volume" />;
-      document.getElementById( 'volume').innerHTML = Math.ceil(got_volume * 100/1024) + " %";
-    </script>
 </body>
+
 </html>