]> git.sesse.net Git - vlc/blobdiff - share/http/js/functions.js
Added mute button to http interface
[vlc] / share / http / js / functions.js
index cc99f016b49c37284c808c3bf4129d9b704aa1cb..c09222cbdd5bc587cc5a236159974caa6aefa4a7 100644 (file)
@@ -27,6 +27,8 @@
 
 var old_time = 0;
 var pl_cur_id;
+var albumart_id = -1;
+var req = null;
 
 /**********************************************************************
  * Slider functions
@@ -130,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;
             }
         }
@@ -147,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 ) );
             }
         }
     }
@@ -189,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'; }
 
@@ -196,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 );
@@ -211,15 +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 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; }
 
@@ -228,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()
@@ -248,6 +279,14 @@ function clear_children( 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
@@ -258,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 );
 }
@@ -267,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 );
 }
@@ -301,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()
 {
@@ -327,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()
@@ -337,6 +379,10 @@ 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 );
@@ -345,13 +391,32 @@ 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 );
+    }
 }
 
 /**********************************************************************
@@ -433,18 +498,23 @@ function parse_status()
                 document.getElementById( 'btn_pause' ).setAttribute( 'title', 'Play' );
             }
 
-           if( status.getElementsByTagName( 'random' )[0].firstChild.data == "1" )
-               document.getElementById( 'btn_shuffle').setAttribute( 'class', 'on' );
-           else
-               document.getElementById( 'btn_shuffle').setAttribute( 'class', 'off' );
-           if( status.getElementsByTagName( 'loop' )[0].firstChild.data == "1" )
-               document.getElementById( 'btn_loop').setAttribute( 'class', 'on' );
-           else
-               document.getElementById( 'btn_loop').setAttribute( 'class', 'off' );
-           if( status.getElementsByTagName( 'repeat' )[0].firstChild.data == "1" )
-               document.getElementById( 'btn_repeat').setAttribute( 'class', 'on' );
-           else
-               document.getElementById( 'btn_repeat').setAttribute( 'class', 'off' );
+            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' );
@@ -493,6 +563,8 @@ 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;
             
@@ -513,8 +585,21 @@ function parse_playlist()
                     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" );
-                    nd.setAttribute( 'class', 'pl_node' );
+                    setclass( nd, 'pl_node' );
                     nd.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
                     pos.appendChild( nd );
                 }
@@ -523,30 +608,36 @@ function parse_playlist()
                     if( pos.hasChildNodes() )
                     pos.appendChild( document.createElement( "br" ) );
                     var pl = document.createElement( "a" );
-                    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;' );
+                        pl.style.fontWeight = 'bold';
                         var nowplaying = document.getElementById( 'nowplaying' );
                         clear_children( nowplaying );
                         nowplaying.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
-                        pl.appendChild( document.createTextNode( '* '));
+                        pl.appendChild( document.createTextNode( '));
                         pl_cur_id = elt.getAttribute( 'id' );
                     }
                     pl.setAttribute( 'title', elt.getAttribute( 'uri' ));
                     pl.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
+                    var duration = elt.getAttribute( 'duration' );
+                    if( duration > 0 )
+                        pl.appendChild( document.createTextNode( " (" + format_time( elt.getAttribute( 'duration' ) / 1000000 ) + ")" ) );
                     pos.appendChild( pl );
-                    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.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 )
                 {
@@ -564,6 +655,7 @@ function parse_playlist()
                     {
                         elt = elt.parentNode;
                         if( ! elt.parentNode ) break;
+                        pos = pos.parentNode;
                     }
                     if( ! elt.parentNode ) break;
                     elt = elt.parentNode.nextSibling;
@@ -597,14 +689,14 @@ function parse_browse_dir( )
                 if( elt.nodeName == "element" )
                 {
                     var item = document.createElement( "a" );
-                    item.setAttribute( 'class', 'browser' );
+                    setclass( item, 'browser' );
                     if( elt.getAttribute( 'type' ) == 'directory' )
                     {
-                        item.setAttribute( 'href', 'javascript:browse_dir(\''+escapebackslashes(addslashes(elt.getAttribute( 'path' )))+'\');');
+                        item.setAttribute( 'href', 'javascript:browse_dir(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');');
                     }
                     else
                     {
-                        item.setAttribute( 'href', 'javascript:browse_path(\''+escapebackslashes(addslashes(elt.getAttribute( 'path' )))+'\');' );
+                        item.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');' );
                     }
                     item.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
                     pos.appendChild( item );
@@ -612,8 +704,8 @@ function parse_browse_dir( )
                     {
                         pos.appendChild( document.createTextNode( ' ' ) );
                         var item = document.createElement( "a" );
-                        item.setAttribute( 'class', 'browser' );
-                        item.setAttribute( 'href', 'javascript:browse_path(\''+escapebackslashes(addslashes(elt.getAttribute( 'path' )))+'\');');
+                        setclass( item, 'browser' );
+                        item.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');');
                         item.appendChild( document.createTextNode( '(select)' ) );
                         pos.appendChild( item );
                     }
@@ -631,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
  *********************************************************************/
@@ -639,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 */
@@ -653,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 = "";
 
@@ -753,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
  *********************************************************************/
@@ -827,6 +990,8 @@ function update_sout()
             mrl.value += "scodec="+value( 'sout_scodec' );
             alot = true;
         }
+        mrl.value += value( 'sout_transcode_extra' );
+            
         mrl.value += "}";
     }
 
@@ -952,7 +1117,7 @@ function browse( dest )
 function browse_dir( dir )
 {
     document.getElementById( 'browse_lastdir' ).value = dir;
-    loadXMLDoc( 'requests/browse.xml?dir='+escape(dir), parse_browse_dir );
+    loadXMLDoc( 'requests/browse.xml?dir='+encodeURIComponent(dir), parse_browse_dir );
 }
 function browse_path( p )
 {
@@ -960,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
  *********************************************************************/
@@ -974,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 );
 }