]> git.sesse.net Git - vlc/blobdiff - share/http/js/functions.js
Added mute button to http interface
[vlc] / share / http / js / functions.js
index 0e9b2bfd859316808fb85ca4246b8a1d1627e45f..c09222cbdd5bc587cc5a236159974caa6aefa4a7 100644 (file)
  * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
  *****************************************************************************/
 
-/* global variables */
+/**********************************************************************
+ * Global variables
+ *********************************************************************/
 
 var old_time = 0;
+var pl_cur_id;
+var albumart_id = -1;
+var req = null;
+
+/**********************************************************************
+ * Slider functions
+ *********************************************************************/
+var slider_mouse_down = 0;
+var slider_dx = 0;
+
+/* findPosX() from http://www.quirksmode.rg/js/indpos.html */
+function findPosX(obj)
+{
+    var curleft = 0;
+    if (obj.offsetParent)
+    {
+        while (obj.offsetParent)
+        {
+            curleft += obj.offsetLeft
+            obj = obj.offsetParent;
+        }
+    }
+    else if (obj.x)
+        curleft += obj.x;
+    return curleft;
+}
+
+function slider_seek( e, bar )
+{
+    seek(Math.floor(( e.clientX + document.body.scrollLeft - findPosX( bar )) / 4)+"%25");
+}
+function slider_down( e, point )
+{
+    slider_mouse_down = 1;
+    slider_dx = e.clientX - findPosX( point );
+}
+function slider_up( e, bar )
+{
+    slider_mouse_down = 0;
+    /* slider_seek( e, bar ); */
+}
+function slider_move( e, bar )
+{
+    if( slider_mouse_down == 1 )
+    {
+        var slider_position  = Math.floor( e.clientX - slider_dx + document.body.scrollLeft - findPosX( bar ));
+        document.getElementById( 'main_slider_point' ).style.left = slider_position+"px";
+        slider_seek( e, bar );
+    }
+}
 
 /**********************************************************************
  * Misc utils
@@ -58,7 +111,7 @@ function format_time( s )
 {
     var hours = Math.floor(s/3600);
     var minutes = Math.floor((s/60)%60);
-    var seconds = s%60;
+    var seconds = Math.floor(s%60);
     if( hours < 10 ) hours = "0"+hours;
     if( minutes < 10 ) minutes = "0"+minutes;
     if( seconds < 10 ) seconds = "0"+seconds;
@@ -79,12 +132,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;
             }
         }
@@ -96,12 +153,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 ) );
             }
         }
     }
@@ -138,6 +199,7 @@ function toggle_show_node( id )
 }
 
 function show( id ){ document.getElementById( id ).style.display = 'block'; }
+function showinline( id ){ document.getElementById( id ).style.display = 'inline'; }
 
 function hide( id ){ document.getElementById( id ).style.display = 'none'; }
 
@@ -145,6 +207,12 @@ function checked( id ){ return document.getElementById( id ).checked; }
 
 function value( id ){ return document.getElementById( id ).value; }
 
+function setclass( obj, value )
+{
+    obj.setAttribute( 'class', value ); /* Firefox */
+    obj.setAttribute( 'className', value ); /* IE */
+}
+
 function radio_value( name )
 {
     var radio = document.getElementsByName( name );
@@ -160,14 +228,25 @@ function radio_value( name )
 
 function check_and_replace_int( id, val )
 {
-    var objRegExp = /^\d\d*$/;
+    var objRegExp = /^\d+$/;
     if( value( id ) != ''
         && ( !objRegExp.test( value( id ) )
              || parseInt( value( id ) ) < 1 ) )
-        document.getElementById( id ).value = val;
+        return document.getElementById( id ).value = val;
+    return document.getElementById( id ).value;
 }
 
 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; }
 
@@ -176,6 +255,10 @@ function enable( id ){ document.getElementById( id ).disabled = false; }
 function button_over( element ){ element.style.border = "1px solid #000"; }
 
 function button_out( element ){ element.style.border = "1px solid #fff"; }
+function button_out_menu( element ){ element.style.border = "1px solid transparent"; }
+
+function show_menu( id ){ document.getElementById(id).style.display = 'block'; }
+function hide_menu( id ){ document.getElementById(id).style.display = 'none'; }
 
 /* toggle show help under the buttons */
 function toggle_btn_text()
@@ -190,6 +273,21 @@ function toggle_btn_text()
     }
 }
 
+function clear_children( elt )
+{   
+    if( elt )
+        while( elt.hasChildNodes() )
+            elt.removeChild( elt.firstChild );
+}
+function playlist_populated()
+{
+    if( document.getElementById( 'playtree' ) != null && document.getElementById( 'playtree' ).childElementCount > 0 )
+    {
+        return true;
+    }
+    return false;
+}
+
 /**********************************************************************
  * Interface actions
  *********************************************************************/
@@ -199,7 +297,7 @@ function in_play()
     var input = value('input_mrl');
     if( value('sout_mrl') != '' )
         input += ' '+value('sout_mrl');
-    var url = 'requests/status.xml?command=in_play&input='+escape( input );
+    var url = 'requests/status.xml?command=in_play&input='+encodeURIComponent( addslashes(escapebackslashes(input)) );
     loadXMLDoc( url, parse_status );
     setTimeout( 'update_playlist()', 1000 );
 }
@@ -208,7 +306,7 @@ function in_enqueue()
     var input = value('input_mrl');
     if( value('sout_mrl') != '' )
         input += ' '+value('sout_mrl');
-    var url = 'requests/status.xml?command=in_enqueue&input='+escape( input );
+    var url = 'requests/status.xml?command=in_enqueue&input='+encodeURIComponent( addslashes(escapebackslashes(input)) );
     loadXMLDoc( url, parse_status );
     setTimeout( 'update_playlist()', 1000 );
 }
@@ -217,11 +315,12 @@ function in_enqueue()
 function pl_play( id )
 {
     loadXMLDoc( 'requests/status.xml?command=pl_play&id='+id, parse_status );
+    pl_cur_id = id;
     setTimeout( 'update_playlist()', 1000 );
 }
 function pl_pause()
 {
-    loadXMLDoc( 'requests/status.xml?command=pl_pause', parse_status );
+    loadXMLDoc( 'requests/status.xml?command=pl_pause&id='+pl_cur_id, parse_status );
 }
 function pl_stop()
 {
@@ -241,23 +340,22 @@ function pl_previous()
 function pl_delete( id )
 {
     loadXMLDoc( 'requests/status.xml?command=pl_delete&id='+id, parse_status );
-    setTimeout( 'update_playlist()', 1000 );
+    setTimeout( 'update_playlist(true)', 1000 );
 }
 function pl_empty()
 {
     loadXMLDoc( 'requests/status.xml?command=pl_empty', parse_status );
-    setTimeout( 'update_playlist()', 1000 );
+    setTimeout( 'update_playlist(true)', 1000 );
 }
-function pl_sort()
+function pl_sort( sort, order )
 {
-    /* FIXME */
-    loadXMLDoc( 'requests/status.xml?command=pl_sort', parse_status );
-    setTimeout( 'update_playlist()', 1000 );
+    loadXMLDoc( 'requests/status.xml?command=pl_sort&id='+order+'&val='+sort, parse_status );
+    setTimeout( 'update_playlist(true)', 1000 );
 }
 function pl_shuffle()
 {
     loadXMLDoc( 'requests/status.xml?command=pl_random', parse_status );
-    setTimeout( 'update_playlist()', 1000 );
+    setTimeout( 'update_playlist(true)', 1000 );
 }
 function pl_loop()
 {
@@ -267,6 +365,10 @@ function pl_repeat()
 {
     loadXMLDoc( 'requests/status.xml?command=pl_repeat', parse_status );
 }
+function pl_sd( value )
+{
+    loadXMLDoc( 'requests/status.xml?command=pl_sd&val='+value, parse_status );
+}
 
 /* misc actions */
 function volume_down()
@@ -277,17 +379,44 @@ function volume_up()
 {
     loadXMLDoc( 'requests/status.xml?command=volume&val=%2B20', parse_status );
 }
+function volume_mute()
+{
+    loadXMLDoc( 'requests/status.xml?command=volume&val=0', parse_status );
+}
+function seek( pos )
+{
+    loadXMLDoc( 'requests/status.xml?command=seek&val='+pos, parse_status );
+}
 function fullscreen()
 {
     loadXMLDoc( 'requests/status.xml?command=fullscreen', parse_status );
 }
+function snapshot()
+{
+    loadXMLDoc( 'requests/status.xml?command=snapshot', parse_status );
+}
+function hotkey( str )
+{
+    /* Use hotkey name (without the "key-" part) as the argument to simulate a hotkey press */
+    loadXMLDoc( 'requests/status.xml?command=key&val='+str, parse_status );
+}
 function update_status()
 {
-    loadXMLDoc( 'requests/status.xml', parse_status );
+    if( req == null || req.readyState == 0 || req.readyState == 4 )
+    {
+        loadXMLDoc( 'requests/status.xml', parse_status );
+    }
 }
-function update_playlist()
+function update_playlist(force_refresh)
 {
-    loadXMLDoc( 'requests/playlist.xml', parse_playlist );
+    if( force_refresh || !playlist_populated() )
+    {
+        loadXMLDoc( 'requests/playlist.xml', parse_playlist );
+    }
+    else
+    {
+        loadXMLDoc( 'requests/status.xml', update_playlist_view );
+    }
 }
 
 /**********************************************************************
@@ -301,23 +430,121 @@ function parse_status()
         if( req.status == 200 )
         {
             var status = req.responseXML.documentElement;
-            var new_time = status.getElementsByTagName( 'time' )[0].firstChild.data;
+            var timetag = status.getElementsByTagName( 'time' );
+            if( timetag.length > 0 )
+            {
+                var new_time = timetag[0].firstChild.data;
+            }
+            else
+            {
+                new_time = old_time;
+            }
+            var lengthtag = status.getElementsByTagName( 'length' );
+            var length;
+            if( lengthtag.length > 0 )
+            {
+                length = lengthtag[0].firstChild.data;
+            }
+            else
+            {
+                length = 0;
+            }
+            var slider_position;
+            positiontag = status.getElementsByTagName( 'position' );
+            if( length < 100 && positiontag.length > 0 )
+            {
+                slider_position = ( positiontag[0].firstChild.data * 4 ) + "px";
+            }
+            else if( length > 0 )
+            {
+                /* this is more precise if length > 100 */
+                slider_position = Math.floor( ( new_time * 400 ) / length ) + "px";
+            }
+            else
+            {
+                slider_position = 0;
+            }
             if( old_time > new_time )
                 setTimeout('update_playlist()',50);
             old_time = new_time;
             set_text( 'time', format_time( new_time ) );
-            set_text( 'length', format_time( status.getElementsByTagName( 'length' )[0].firstChild.data ) );
+            set_text( 'length', format_time( length ) );
             if( status.getElementsByTagName( 'volume' ).length != 0 )
                 set_text( 'volume', Math.floor(status.getElementsByTagName( 'volume' )[0].firstChild.data/5.12)+'%' );
-            set_text( 'state', status.getElementsByTagName( 'state' )[0].firstChild.data );
-            if( status.getElementsByTagName( 'state' )[0].firstChild.data == "playing" )
+            var statetag = status.getElementsByTagName( 'state' );
+            if( statetag.length > 0 )
+            {
+               set_text( 'state', statetag[0].firstChild.data );
+            }
+            else
+            {
+                set_text( 'state', '(?)' );
+            }
+            if( slider_mouse_down == 0 )
+            {
+                document.getElementById( 'main_slider_point' ).style.left = slider_position;
+            }
+            var statustag = status.getElementsByTagName( 'state' );
+            if( statustag.length > 0 ? statustag[0].firstChild.data == "playing" : 0 )
             {
                 document.getElementById( 'btn_pause_img' ).setAttribute( 'src', 'images/pause.png' );
+                document.getElementById( 'btn_pause_img' ).setAttribute( 'alt', 'Pause' );
+                document.getElementById( 'btn_pause' ).setAttribute( 'title', 'Pause' );
             }
             else
             {
                 document.getElementById( 'btn_pause_img' ).setAttribute( 'src', 'images/play.png' );
+                document.getElementById( 'btn_pause_img' ).setAttribute( 'alt', 'Play' );
+                document.getElementById( 'btn_pause' ).setAttribute( 'title', 'Play' );
+            }
+
+            var randomtag = status.getElementsByTagName( 'random' );
+            if( randomtag.length > 0 ? randomtag[0].firstChild.data == "1" : 0)
+                setclass( document.getElementById( 'btn_shuffle'), 'on' );
+            else
+                setclass( document.getElementById( 'btn_shuffle'), 'off' );
+               
+            var looptag = status.getElementsByTagName( 'loop' );
+            if( looptag.length > 0 ? looptag[0].firstChild.data == "1" : 0)
+                setclass( document.getElementById( 'btn_loop'), 'on' );
+            else
+                setclass( document.getElementById( 'btn_loop'), 'off' );
+
+            var repeattag = status.getElementsByTagName( 'repeat' );
+            if( repeattag.length > 0 ? repeattag[0].firstChild.data == "1" : 0 )
+                setclass( document.getElementById( 'btn_repeat'), 'on' );
+            else
+                setclass( document.getElementById( 'btn_repeat'), 'off' );
+
+            var tree = document.createElement( "ul" );
+            var categories = status.getElementsByTagName( 'category' );
+            var i;
+            for( i = 0; i < categories.length; i++ )
+            {
+                var item = document.createElement( "li" );
+                item.appendChild( document.createTextNode( categories[i].getAttribute( 'name' ) ) );
+                var subtree = document.createElement( "dl" );
+                var infos = categories[i].getElementsByTagName( 'info' );
+                var j;
+                for( j = 0; j < infos.length; j++ )
+                {
+                    var subitem = document.createElement( "dt" );
+                    subitem.appendChild( document.createTextNode( infos[j].getAttribute( 'name' ) ) );
+                    subtree.appendChild( subitem );
+                    if( infos[j].hasChildNodes() )
+                    {
+                        var subitem = document.createElement( "dd" );
+                        subitem.appendChild( document.createTextNode( infos[j].firstChild.data ) );
+                        subtree.appendChild( subitem );
+                    }
+                }
+                item.appendChild( subtree );
+                tree.appendChild( item );
             }
+            var infotree = document.getElementById('infotree' );
+            clear_children( infotree );
+            infotree.appendChild( tree );
+            
         }
         else
         {
@@ -336,8 +563,13 @@ function parse_playlist()
             var answer = req.responseXML.documentElement;
             var playtree = document.getElementById( 'playtree' );
             var pos = document.createElement( "div" );
+            pos.style.height = document.body.clientHeight - 100 + "px";
+            pos.style.overflow = "auto";
             var pos_top = pos;
             var elt = answer.firstChild;
+            
+            pl_cur_id = 0;  /* changed to the current id is there actually
+                             * is a current id */
             while( elt )
             {
                 if( elt.nodeName == "node" )
@@ -345,44 +577,67 @@ function parse_playlist()
                     if( pos.hasChildNodes() )
                         pos.appendChild( document.createElement( "br" ) );
                     var nda = document.createElement( 'a' );
-                    pos.appendChild( nda );
                     nda.setAttribute( 'href', 'javascript:toggle_show_node(\''+elt.getAttribute( 'id' )+'\');' );
                     var ndai = document.createElement( 'img' );
-                    nda.appendChild( ndai );
                     ndai.setAttribute( 'src', 'images/minus.png' );
                     ndai.setAttribute( 'alt', '[-]' );
                     ndai.setAttribute( 'id', 'pl_img_'+elt.getAttribute( 'id' ) );
+                    nda.appendChild( ndai );
+                    pos.appendChild( nda );
                     pos.appendChild( document.createTextNode( ' ' + elt.getAttribute( 'name' ) ) );
+
+                    if( elt.getAttribute( 'ro' ) == 'rw' )
+                    {
+                        pos.appendChild( document.createTextNode( ' ' ) );
+                        var del = document.createElement( "a" );
+                        del.setAttribute( 'href', 'javascript:pl_delete('+elt.getAttribute( 'id' )+')' );
+                            var delimg = document.createElement( "img" );
+                            delimg.setAttribute( 'src', 'images/delete_small.png' );
+                            delimg.setAttribute( 'alt', '(delete)' );
+                        del.appendChild( delimg );
+                        pos.appendChild( del );
+                    }
+
                     var nd = document.createElement( "div" );
-                    pos.appendChild( nd );
-                    nd.setAttribute( 'class', 'pl_node' );
+                    setclass( nd, 'pl_node' );
                     nd.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
+                    pos.appendChild( nd );
                 }
                 else if( elt.nodeName == "leaf" )
                 {
                     if( pos.hasChildNodes() )
                     pos.appendChild( document.createElement( "br" ) );
                     var pl = document.createElement( "a" );
-                    pos.appendChild( pl );
-                    pl.setAttribute( 'class', 'pl_leaf' );
+                    setclass( pl, '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;' );
-                        document.getElementById( 'nowplaying' ).textContent
-                            = elt.getAttribute( 'name' );
+                        pl.style.fontWeight = 'bold';
+                        var nowplaying = document.getElementById( 'nowplaying' );
+                        clear_children( nowplaying );
+                        nowplaying.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
+                        pl.appendChild( document.createTextNode( '' ));
+                        pl_cur_id = elt.getAttribute( 'id' );
                     }
                     pl.setAttribute( 'title', elt.getAttribute( 'uri' ));
                     pl.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
-                    pos.appendChild( document.createTextNode( ' ' ) );
-                    var del = document.createElement( "a" );
-                    pos.appendChild( del );
-                    del.setAttribute( 'href', 'javascript:pl_delete('+elt.getAttribute( 'id' )+')' );
-                    del.appendChild( document.createElement( "img" ) );
-                    del = del.lastChild;
-                    del.setAttribute( 'src', 'images/delete_small.png' );
-                    del.setAttribute( 'alt', '(delete)' );
+                    var duration = elt.getAttribute( 'duration' );
+                    if( duration > 0 )
+                        pl.appendChild( document.createTextNode( " (" + format_time( elt.getAttribute( 'duration' ) / 1000000 ) + ")" ) );
+                    pos.appendChild( pl );
+
+                    if( elt.getAttribute( 'ro' ) == 'rw' )
+                    {
+                        pos.appendChild( document.createTextNode( ' ' ) );
+                        var del = document.createElement( "a" );
+                        del.setAttribute( 'href', 'javascript:pl_delete('+elt.getAttribute( 'id' )+')' );
+                            var delimg = document.createElement( "img" );
+                            delimg.setAttribute( 'src', 'images/delete_small.png' );
+                            delimg.setAttribute( 'alt', '(delete)' );
+                        del.appendChild( delimg );
+                        pos.appendChild( del );
+                    }
                 }
                 if( elt.firstChild )
                 {
@@ -396,12 +651,18 @@ function parse_playlist()
                 }
                 else
                 {
+                    while( ! elt.parentNode.nextSibling )
+                    {
+                        elt = elt.parentNode;
+                        if( ! elt.parentNode ) break;
+                        pos = pos.parentNode;
+                    }
+                    if( ! elt.parentNode ) break;
                     elt = elt.parentNode.nextSibling;
                     pos = pos.parentNode;
                 }
             }
-            while( playtree.hasChildNodes() )
-                playtree.removeChild( playtree.firstChild );
+            clear_children( playtree );
             playtree.appendChild( pos_top );
         }
         else
@@ -419,6 +680,7 @@ function parse_browse_dir( )
         if( req.status == 200 )
         {
             var answer = req.responseXML.documentElement;
+            if( !answer ) return;
             var browser = document.getElementById( 'browser' );
             var pos = document.createElement( "div" );
             var elt = answer.firstChild;
@@ -426,31 +688,32 @@ function parse_browse_dir( )
             {
                 if( elt.nodeName == "element" )
                 {
-                    pos.appendChild( document.createElement( "a" ) );
-                    pos.lastChild.setAttribute( 'class', 'browser' );
+                    var item = document.createElement( "a" );
+                    setclass( item, 'browser' );
                     if( elt.getAttribute( 'type' ) == 'directory' )
                     {
-                        pos.lastChild.setAttribute( 'href', 'javascript:browse_dir(\''+addslashes(elt.getAttribute( 'path' ))+'\');');
+                        item.setAttribute( 'href', 'javascript:browse_dir(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');');
                     }
                     else
                     {
-                        pos.lastChild.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(elt.getAttribute( 'path' ))+'\');' );
+                        item.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');' );
                     }
-                    pos.lastChild.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
+                    item.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
+                    pos.appendChild( item );
                     if( elt.getAttribute( 'type' ) == 'directory' )
                     {
                         pos.appendChild( document.createTextNode( ' ' ) );
-                        pos.appendChild( document.createElement( "a" ) );
-                        pos.lastChild.setAttribute( 'class', 'browser' );
-                        pos.lastChild.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(elt.getAttribute( 'path' ))+'\');');
-                        pos.lastChild.appendChild( document.createTextNode( '(select)' ) );
+                        var item = document.createElement( "a" );
+                        setclass( item, 'browser' );
+                        item.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');');
+                        item.appendChild( document.createTextNode( '(select)' ) );
+                        pos.appendChild( item );
                     }
                     pos.appendChild( document.createElement( "br" ) );
                 }
                 elt = elt.nextSibling;
             }
-            while( browser.hasChildNodes() )
-                browser.removeChild( browser.firstChild );
+            clear_children( browser );
             browser.appendChild( pos );
         }
         else
@@ -460,6 +723,65 @@ function parse_browse_dir( )
     }
 }
 
+/* updates playlist to display active entry */
+function update_playlist_view ()
+{
+    if( req.readyState == 4 ) {
+        if( req.status == 200 ) {
+            var status = req.responseXML.documentElement;
+            var title = status.getElementsByTagName( 'title' );
+            if( title.length > 0 ) {
+                title = title[0].firstChild.data;
+
+                //update now-playing..
+                var nowplaying = document.getElementById( 'nowplaying' );
+                clear_children( nowplaying );
+                nowplaying.appendChild( document.createTextNode( title ) );
+
+                //update playlist..
+                var playtree = document.getElementById( 'playtree' );
+                if( playtree.hasChildNodes() )
+                {
+                    var root = playtree.firstChild;  //root div
+                    if( root.hasChildNodes() )
+                    {
+                        for( var i = 0; i < root.childNodes.length - 1; i++ )
+                        {
+                            if ( root.childNodes[i].className == "pl_node" && root.childNodes[i].hasChildNodes() )
+                            {
+                                var node = root.childNodes[i];  //pl_node
+                                if( node.className == "pl_node" && node.hasChildNodes() )
+                                {
+                                    for( var j = 0; j < node.childNodes.length - 1; j++ )
+                                    {
+                                        if( node.childNodes[j].className == "pl_leaf" )
+                                        {
+                                            var leaf = node.childNodes[j];  //pl_leaf
+                                            var pl_title = leaf.textContent.substring( 0, leaf.textContent.length - leaf.text.length )
+                                            //if( leaf.style.fontWeight == "bold" && pl_title.substring(0, 2) == "* " )  //handle leaf currently identified as playing..
+                                            //{
+                                            //    pl_title = pl_title.substring(2);
+                                            //}
+                                            if( pl_title == title )
+                                            {
+                                                leaf.style.fontWeight = "bold";
+                                            }
+                                            else
+                                            {
+                                                leaf.style.fontWeight = "";
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 /**********************************************************************
  * Input dialog functions
  *********************************************************************/
@@ -468,6 +790,7 @@ function hide_input( )
     document.getElementById( 'input_file' ).style.display = 'none';
     document.getElementById( 'input_disc' ).style.display = 'none';
     document.getElementById( 'input_network' ).style.display = 'none';
+    document.getElementById( 'input_fake' ).style.display = 'none';
 }
 
 /* update the input MRL using data from the input file helper */
@@ -482,19 +805,14 @@ function update_input_file()
 /* update the input MRL using data from the input disc helper */
 function update_input_disc()
 {
-    var mrl = document.getElementById( 'input_mrl' );
-    var type = radio_value( "input_disc_type" );
-    var device = value( "input_disc_dev" );
+    var mrl     = document.getElementById( 'input_mrl' );
+    var type    = radio_value( "input_disc_type" );
+    var 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 );
-
-    var title = value( 'input_disc_title' );
-    var chapter = value( 'input_disc_chapter' );
-    var subs = value( 'input_disc_subtrack' );
-    var audio = value( 'input_disc_audiotrack' );
+    var title   = check_and_replace_int( 'input_disc_title', 0 );
+    var chapter = check_and_replace_int( 'input_disc_chapter', 0 );
+    var subs    = check_and_replace_int( 'input_disc_subtrack', '' );
+    var audio   = check_and_replace_int( 'input_disc_audiotrack', 0 );
 
     mrl.value = "";
 
@@ -582,6 +900,22 @@ function update_input_net()
         mrl.value += " :access-filter=timeshift";
 }
 
+/* update the input MRL using data from the input fake helper */
+function update_input_fake()
+{
+    var mrl = document.getElementById( 'input_mrl' );
+
+    mrl.value = "fake://";
+    mrl.value += " :fake-file=" + value( "input_fake_filename" );
+
+    if( value( "input_fake_width" ) )
+        mrl.value += " :fake-width=" + value( "input_fake_width" );
+    if( value( "input_fake_height" ) )
+        mrl.value += " :fake-height=" + value( "input_fake_height" );
+    if( value( "input_fake_ar" ) )
+        mrl.value += " :fake-ar=" + value( "input_fake_ar" );
+}
+
 /**********************************************************************
  * Sout dialog functions
  *********************************************************************/
@@ -656,6 +990,8 @@ function update_sout()
             mrl.value += "scodec="+value( 'sout_scodec' );
             alot = true;
         }
+        mrl.value += value( 'sout_transcode_extra' );
+            
         mrl.value += "}";
     }
 
@@ -774,13 +1110,14 @@ function save_sout()
 function browse( dest )
 {
     document.getElementById( 'browse_dest' ).value = dest;
+    document.getElementById( 'browse_lastdir' ).value;
     browse_dir( document.getElementById( 'browse_lastdir' ).value );
     show( 'browse' );
 }
 function browse_dir( dir )
 {
     document.getElementById( 'browse_lastdir' ).value = dir;
-    loadXMLDoc( 'requests/browse.xml?dir='+dir, parse_browse_dir );
+    loadXMLDoc( 'requests/browse.xml?dir='+encodeURIComponent(dir), parse_browse_dir );
 }
 function browse_path( p )
 {
@@ -788,7 +1125,16 @@ function browse_path( p )
     hide( 'browse' );
     document.getElementById( value( 'browse_dest' ) ).focus();
 }
-
+function refresh_albumart( force )
+{
+    if( albumart_id != pl_cur_id || force )
+    {
+        var now = new Date();
+        var albumart = document.getElementById( 'albumart' );
+        albumart.src = '/art?timestamp=' + now.getTime();
+        albumart_id = pl_cur_id;
+    }
+}
 /**********************************************************************
  * Periodically update stuff in the interface
  *********************************************************************/
@@ -802,9 +1148,15 @@ function loop_refresh_playlist()
     /* setTimeout( 'loop_refresh_playlist()', 10000 ); */
     update_playlist();
 }
+function loop_refresh_albumart()
+{
+    setTimeout( 'loop_refresh_albumart()', 1000 );
+    refresh_albumart( false );
+}
 function loop_refresh()
 {
     setTimeout( 'loop_refresh_status()', 1 );
     setTimeout( 'loop_refresh_playlist()', 1 );
+    setTimeout( 'loop_refresh_albumart()', 1 );
 }