A bunch of hacks to fix bugs on IE.

I really don't like the Sort menu and Services discovery menu code. If
someone has a better idea feal free to change it.

share/http/dialogs/input

@@ -57,7 +57,7 @@ This dialog needs the following dialogs to be fully functional: browse
       Network
     </button>
   </div>
-  <div id="input" class="helper" >
+  <div id="input_helper" class="helper" >
     <div id="input_file" style="display: block">
       Open File
       <hr/>

share/http/dialogs/mosaic

@@ -93,7 +93,7 @@ sout.
     <label for="mosaic_output">Output:</label> <input type="text" id="mosaic_output" value="" size="60" onvlur="mosaic_code_update();" /> <input type="button" value="Edit" onclick="vlm_output_edit( 'mosaic_output' );" /><br/>
     <div id="mosaic_feedback"></div>
   </div>
-  <div  id="mosaic_list" class="popup" style="display: none; background: url('images/white.png') repeat;">[<a href="javascript:hide('mosaic_list');">hide</a>] - Select a stream:<br/><div id="mosaic_list_content"></div></div>
+  <div  id="mosaic_list" class="popup">[<a href="javascript:hide('mosaic_list');">hide</a>] - Select a stream:<br/><div id="mosaic_list_content"></div></div>
   <div class="controls">
     Click on each of the cells to assign inputs. (<a href="javascript:document.getElementById('mosaic_list').value='';show('mosaic_list');">Show input list</a>)
   </div>

share/http/dialogs/playlist

@@ -51,7 +51,7 @@ This dialog needs the following dialogs to be fully functional: <none>
       <img src="images/repeat.png" alt="Repeat" />
       <span class="btn_text">Repeat</span>
     </button>
-    <button id="btn_sort" onmouseover="show_menu('menu_sort');" onmouseout="hide_menu('menu_sort');" title="Sort" >
+    <div id="btn_sort" class="menubtn" style="margin-left: 5px" onmouseover="show_menu('menu_sort');" onmouseout="hide_menu('menu_sort');" title="Sort" >
       <img src="images/sort.png" alt="Sort" />
       <span class="btn_text">Sort</span>
       <div id="menu_sort" class="menu" >
@@ -64,8 +64,8 @@ This dialog needs the following dialogs to be fully functional: <none>
         <button onclick="pl_sort(0,0);hide_menu('menu_sort');" onmouseover="button_over(this);" onmouseout="button_out_menu(this);" title="Sort by Id ascending" >Id</button><br/>
         <button onclick="pl_sort(0,1);hide_menu('menu_sort');" onmouseover="button_over(this);" onmouseout="button_out_menu(this);" title="Sort by Id descending" >Id reverse</button><br/>
       </div>
-    </button>
-    <button id="btn_sd" onmouseover="show_menu('menu_sd');" onmouseout="hide_menu('menu_sd');" title="Services Discovery" >
+    </div>
+    <div id="btn_sd" class="menubtn" style="margin-left: 30px" onmouseover="show_menu('menu_sd');" onmouseout="hide_menu('menu_sd');" title="Services Discovery" >
       <img src="images/sd.png" alt="Services Discovery" />
       <span class="btn_text">Services Discovery</span>
       <div id="menu_sd" class="menu" >
@@ -74,7 +74,7 @@ This dialog needs the following dialogs to be fully functional: <none>
         <button onclick="pl_sd('<vlc id="value" param1="sd" />');hide_menu('menu_sd');" onmouseover="button_over(this);" onmouseout="button_out_menu(this);" title="Toggle <vlc id="value" param1="sd.name" />" ><vlc id="value" param1="sd.name" /></button><br/>
         <vlc id="end" />
       </div>
-    </button>
+    </div>
   </div>
   <div id="playtree">
     (?)

share/http/dialogs/sout

@@ -45,7 +45,7 @@ Note that the sout chain is used and sent to VLC by the input dialog
       <br/>
       <input type="button" value="Save" onclick="save_sout();" />
     <vlc id="end" />
-    <input type="button" value="Cancel" onclick="reset_sout();"/>
+    <input type="button" value="Reset" 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="Hide sout interface" />
   </div>

share/http/iehacks.css

+/*****************************************************************************
+ * iehacks.css: VLC media player web interface
+ *****************************************************************************
+ * Copyright (C) 2006 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.
+ *****************************************************************************/
+
+div.menu {
+	margin-left: -30px;
+	margin-top: 15px;
+	background: #fff;
+}
+
+div#mosaic_list {
+	background: #fff;
+}

share/http/index.html

@@ -30,6 +30,9 @@
   <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" />
+  <!--[if IE ]>
+  <link href="iehacks.css" rel="stylesheet" type="text/css" />
+  <![endif]-->
   <script type="text/javascript" src="js/functions.js"></script>
 
   <!-- in case people had scripts that sent commands to the default
@@ -42,8 +45,10 @@
 
 <noscript>
   <hr/>
+  <p>
   Warning: Your browser doesn't support javascript.
   You should use the <a href="old/">old http interface</a>.
+  </p>
   <hr/>
 </noscript>
 

share/http/js/functions.js

@@ -130,12 +130,16 @@ function set_css( item, element, value )
 {
     for( var j = 0; j < document.styleSheets.length; j++ )
     {
-        cssRules = document.styleSheets[j].cssRules;
+        var cssRules = document.styleSheets[j].cssRules;
+        if( !cssRules ) cssRules = document.styleSheets[j].rules;
         for( var i = 0; i < cssRules.length; i++)
         {
             if( cssRules[i].selectorText == item )
             {
-                cssRules[i].style.setProperty( element, value, null );
+                if( cssRules[i].style.setProperty )
+                    cssRules[i].style.setProperty( element, value, null );
+                else
+                    cssRules[i].style.setAttribute( toCamelCase( element ), value );
                 return;
             }
         }
@@ -147,12 +151,16 @@ function get_css( item, element )
 {
     for( var j = 0; j < document.styleSheets.length; j++ )
     {
-        cssRules = document.styleSheets[j].cssRules;
+        var cssRules = document.styleSheets[j].cssRules;
+        if( !cssRules ) cssRules = document.styleSheets[j].rules;
         for( var i = 0; i < cssRules.length; i++)
         {
             if( cssRules[i].selectorText == item )
             {
-                return cssRules[i].style.getPropertyValue( element );
+                if( cssRules[i].style.getPropertyValue )
+                    return cssRules[i].style.getPropertyValue( element );
+                else
+                    return cssRules[i].style.getAttribute( toCamelCase( element ) );
             }
         }
     }
@@ -222,6 +230,15 @@ function check_and_replace_int( id, val )
 function addslashes( str ){ return str.replace(/\'/g, '\\\''); }
 function escapebackslashes( str ){ return str.replace(/\\[^']/g, '\\\\'); }
 
+function toCamelCase( str )
+{
+    str = str.split( '-' );
+    var cml = str[0];
+    for( var i=1; i<str.length; i++)
+        cml += str[i].charAt(0).toUpperCase()+str[i].substring(1);
+    return cml;
+}
+
 function disable( id ){ document.getElementById( id ).disabled = true; }
 
 function enable( id ){ document.getElementById( id ).disabled = false; }
@@ -441,15 +458,20 @@ function parse_status()
                 document.getElementById( 'btn_pause' ).setAttribute( 'title', 'Play' );
             }
 
-            if( status.getElementsByTagName( 'random' )[0].firstChild.data == "1" )
+            var randomtag = status.getElementsByTagName( 'random' );
+            if( randomtag.length > 0 ? randomtag[0].firstChild.data == "1" : 0)
                 document.getElementById( 'btn_shuffle').setAttribute( 'class', 'on' );
             else
                 document.getElementById( 'btn_shuffle').setAttribute( 'class', 'off' );
-            if( status.getElementsByTagName( 'loop' )[0].firstChild.data == "1" )
+               
+            var looptag = status.getElementsByTagName( 'loop' );
+            if( looptag.length > 0 ? looptag[0].firstChild.data == "1" : 0)
                 document.getElementById( 'btn_loop').setAttribute( 'class', 'on' );
             else
                 document.getElementById( 'btn_loop').setAttribute( 'class', 'off' );
-            if( status.getElementsByTagName( 'repeat' )[0].firstChild.data == "1" )
+
+            var repeattag = status.getElementsByTagName( 'repeat' );
+            if( repeattag.length > 0 ? repeattag[0].firstChild.data == "1" : 0 )
                 document.getElementById( 'btn_repeat').setAttribute( 'class', 'on' );
             else
                 document.getElementById( 'btn_repeat').setAttribute( 'class', 'off' );

share/http/style.css

@@ -165,6 +165,8 @@ div#browser {
 div#mosaic_list {
 	width: 50%;
 	left: 25%;
+	background: url('images/white.png') repeat;
+	display: none;
 }
 
 .mosaic_bg {
@@ -219,11 +221,20 @@ div.controls button.off {
 	background-color: #fff;
 }
 
+div.menubtn {
+	display: inline;
+	position: absolute;
+	margin-top: 2px;
+	font-size: 0.70em;
+}
+
 div.menu {
 	position: absolute;
 	border: 1px solid #ccc;
 	padding: 5px;
+	margin-top: -5px;
 	background: url('images/white.png') repeat;
+	z-index: 2;
 	display: none;
 }