]> git.sesse.net Git - vlc/blobdiff - share/http/index.html
HTTP interface patch by Christophe Mutricy (and no fixes by me)
[vlc] / share / http / index.html
index fb68163ecf6043df321f3d08c7e83c055aea28f9..192d8842cdf1a4328c7b4c051e9adc6cf7e760cb 100644 (file)
 <!DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml10/DTD/xhtml10transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+
  <head>
-    <title>VLC Media Player</title>
-    <link href="/style.css" title="Default" rel="stylesheet" />
+    <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" />
+    <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">
+
+function changeMe(item)
+{
+  if (item.parentNode.parentNode.lastChild.style.display=="none")
+  {
+    item.parentNode.parentNode.lastChild.style.display="block";
+    item.alt="[-]";
+    item.src="cone_minus.png";
+  }
+  else
+  {
+    item.parentNode.parentNode.lastChild.style.display="none";
+    item.alt="[+]";
+    item.src="cone_plus.png";
+  }
+}
+</script>
+
+</head>
 
-    <vlc id="if" param1="url_param"/>
-        <meta http-equiv="refresh" content="0;URL=/" />
-    <vlc id="end" />
 
-    <vlc id="control" param1="stop,pause,previous,next,add,sout,play,delete,empty,seek,fullscreen,keep,volume,sort" />
-    <vlc id="set" param1="sout" param2="string" />
- </head>
  <body>
-    <h2>
-     <a href="http://www.videolan.org">VLC Media Player <vlc id="value" param1="version" /></a> (http interface)</h2>
-    <div class="sectitle">Control VLC</div>
-    <div class="section">
-     <table class="add">
-      <tr>
-       <td nowrap="1">Current State: <vlc id="value" param1="stream_state" /></td>
-       <td align="right"><a href="info.html">Information</a> <a href="admin/">Administration</a></td>
-      </tr>
-      <tr>
-       <form method="get" action="">
-        <td nowrap="1">
-         <input type="submit" name="control" value="stop" />
-         <input type="submit" name="control" value="pause" />
-         <input type="submit" name="control" value="previous" />
-         <input type="submit" name="control" value="next" />
-         <input type="submit" name="control" value="fullscreen" />
-        </td>
-       </form>
-       <form>
-        <td align="right" nowrap="1">
-         Current Volume: <vlc id="value" param1="volume" /> <input type="text" name="value" size="5"><input type="hidden" name="control" value="volume"><input type="submit" name="Set" value="Set">
-        </td>
-       </form>
-      </tr>
-      <tr>
-       <td colspan="2">
-        <table>
-         <tr>
-          <form>
-           <td><input type="submit" name="seek_value" value="-1min"><input type="hidden" name="control" value="seek"></td>
-          </form>
-          <form>
-           <td><input type="text" name="seek_value" size="14"><input type="hidden" name="control" value="seek"></td>
+    <!-- left menu -->
+    <div class="left">
+      <div class="sectitle">Playback control</div>
+      <div class="section-controls">
+        <form method="get" action="">
+          <p>
+            <input type="submit" name="control" value="stop" />
+            <input type="submit" name="control" value="pause" />
+            <br />
+            <input type="submit" name="control" value="previous" />
+            <input type="submit" name="control" value="next" />
+          </p>
+            <input type="submit" name="seek_value" value="-1min"/><input type="hidden" name="control" value="seek"/>
+            <input type="submit" name="seek_value" value="+1min"/><input type="hidden" name="control" value="seek"/>
+            <br />
+            <input type="text" name="seek_value" size="14"/><input type="hidden" name="control" value="seek"/>
           </form>
-          <form>
-           <td><input type="submit" name="seek_value" value="+1min"><input type="hidden" name="control" value="seek"></td>
-          </form>
-           <td>
-            ( Seek Textbox: for example "+12min 42sec", "01:13:43", "-12%" etc... )
-           </td>
-         </tr>
-        </table>
-       </td>
-      </tr>
-     </table>
-    </div>
-    <div class="sectitle">Add</div>
-    <div class="section">
-     <form method="get" action="" enctype="text/plain" >
-      <table class="add">
-       <tr>
-        <td>Add a MRL (Media Resource Locator) to the playlist</td>
-        <td><input type="text" name="mrl" size="40" /><input type="submit" name="control" value="add" /></td>
-       </tr>
-       <tr>
-        <td>Stream Output:</td>
-        <td><input type="text" name="sout" size="40" value="<vlc id="get" param1="sout" param2="string" />" /><input type="submit" name="control" value="sout" /></td>
-       </tr>
-      </table>
-     </form>
+        <br />
+          <span class="small">( Seek Textbox: for example "+12min 42sec", "01:13:43", "-12%" etc... )</span>
+      </div> <!-- End section -->
+
+      <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>
+
+      <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 class="section"><a href="/admin/">Administration Page</a></div>
+
     </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">VLC Playlist</div>
-     <div class="section"> 
-      <tr>
-       <td>
-        <form>
-         <input type="submit" name="control" value="sort" /> by
-         <select name="type">
-          <option value="title">title
-          <option value="group">group
-          <option value="author">author
-         </select> with
-         <select name="order">
-          <option value="0">normal order
-          <option value="1">reverse order
-         </select>
+      <div class="sectitle">Add</div>
+      <div class="section">
+        <form method="get" action="" enctype="text/plain" >
+          <table class="add">
+            <tr>
+              <td>Add a MRL (Media Resource Locator) to the playlist</td>
+              <td><input type="text" name="mrl" size="40" /><input type="submit" name="control" value="add" /></td>
+            </tr>
+            <tr>
+              <td>Stream Output:</td>
+              <td><input type="text" name="sout" size="40" value="<vlc id="get" param1="sout" param2="string" />" /><input type="submit" name="control" value="sout" /></td>
+            </tr>
+          </table>
         </form>
-       </td>
-      </tr>
-      <form method="get" action="">
-      <table>
-       <vlc id="foreach" param1="pl" param2="playlist" />
-        <tr class="<vlc id="if" param1="2 pl.index % 0 =" />ligne1<vlc id="else" />ligne2<vlc id="end" />">
-         <td>
-          <input type=checkbox name="item" value="<vlc id="value" param1="pl.index" />">
-          <vlc id="if" param1="pl.current" />
-               <b>
+      </div>
+
+      <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>
+                   <form method="get" action="">
+                   <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="value" param1="pl.name" /> (<vlc id="value" param1="pl.i_children" /> item<vlc id="if" param1="pl.i_children 1 >" />s<vlc id="end" />)
+                   <vlc id="end"/>
+                     <input type="hidden" name="item" value="<vlc id="value" param1="pl.index" />" />
+                     <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>
+
+                   <vlc id="if" param1="pl.i_children 0 !=" />
+                       <ul>
+                   <vlc id="else" />
+                       </li>
+                   <vlc id="end" />
+
+               <vlc id="end" />
+
+               <vlc id="rpn" param1="last_depth pl.depth value store" />
+
            <vlc id="end" />
-           <a href="?control=play&item=<vlc id="value" param1="pl.index" />"><vlc id="value" param1="pl.index" /> - <vlc id="value" param1="pl.name" /></a>
-          <vlc id="if" param1="pl.current" />
-               </b>
-          <vlc id="end" />
-         </td>
-        </tr>
-       <vlc id="end" />
-      </table>
-      <td><input type="submit" name="control" value="delete" /></td>
-      <td><input type="submit" name="control" value="keep" /></td>
-     </form>
+     <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" />
+
+         </ul>
+         <input type="submit" name="control" value="delete" />
+         <input type="submit" name="control" value="empty" />
+         <input type="submit" name="control" value="keep" />
+       </form>
+      </div>
     </div>
-    <hr/>
-    <p> <vlc id="value" param1="copyright" /> </p>
+    <!-- end main content -->
+    
+    <p style="text-align:center;font-size:1.2em;"> <vlc id="value" param1="copyright" /> </p>
+
+    <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>