Mosaic wizard: audio stuff was missing
[vlc.git] / share / http / js / mosaic.js
index ed135a8..5b9c3e3 100644 (file)
@@ -41,13 +41,18 @@ var mosaic_delay    = 0;
 var cell_width  = 0;
 var cell_height = 0;
 
-var streams = Object;
-var cells   = Object;
+var streams = Object();
+var cells   = Object();
 
 function mosaic_init()
 {
-    document.getElementById( 'sout_extra' ).value = ",sfilter=mosaic";
+    document.getElementById( 'sout_transcode_extra' ).value = ",sfilter=mosaic}:bridge-in{offset=100";
     mosaic_size_change();
+
+    /* Force usage of transcode in sout */
+    document.getElementById( 'sout_vcodec_s' ).checked = 'checked';
+    disable( 'sout_vcodec_s' );
+    update_sout();
 }
 
 function mosaic_size_change()
@@ -71,7 +76,6 @@ function mosaic_size_change()
     
     var mlayout = document.getElementById( "mosaic_layout" );
 
-    /* TODO: keep 'common' cells when resizing */
     while( mlayout.hasChildNodes() )
         mlayout.removeChild( mlayout.firstChild );
 
@@ -81,7 +85,7 @@ function mosaic_size_change()
     {
         var mdt = document.createElement( 'div' );
         mdt.setAttribute( 'id',    'mosaic_dt'  );
-        mdt.setAttribute( 'class', 'mosaic_tbl' );
+        setclass( mdt, 'mosaic_tbl' );
         
         mdt.style.width  = mosaic_width   + "px";
         mdt.style.height = mosaic_height  + "px";
@@ -97,32 +101,29 @@ function mosaic_size_change()
         mtable.style.borderSpacing = mosaic_hborder + "px " +
                                      mosaic_vborder + "px";
 
+        var mtbody = document.createElement( 'tbody' );
+
         for( y = 0; y < mosaic_rows; y++ )
         {
             var mrow = document.createElement( 'tr' );
             for( x = 0; x < mosaic_cols; x++ )
             {
                 var mcell = document.createElement( 'td' );
-                mcell.setAttribute( 'class', 'mosaic_itm' );
+                setclass( mcell, 'mosaic_itm' );
                 mcell.style.width  = cell_width  + "px";
                 mcell.style.height = cell_height + "px";
                 
-                var melt = document.createElement( 'input' );
-                melt.setAttribute( 'type', 'button' );
                 var id = x+'_'+y;
+                var melt = create_button( cells[id] ? cells[id] : '?', 'mosaic_elt_choose(\"'+id+'\");' );
                 melt.setAttribute( 'id', id );
-                melt.setAttribute( 'onclick', 'mosaic_elt_choose(\''+id+'\');' );
-                if( cells[id] )
-                    melt.setAttribute( 'value', cells[id] );
-                else
-                    melt.setAttribute( 'value', '?' );
                 melt.setAttribute( 'title', 'Click to choose stream' );
                 
                 mcell.appendChild( melt );
                 mrow.appendChild( mcell );
             }
-            mtable.appendChild( mrow );
+            mtbody.appendChild( mrow );
         }
+        mtable.appendChild( mtbody );
         mdt.appendChild( mtable );
         mlayout.appendChild( mdt );
     }
@@ -134,6 +135,8 @@ function mosaic_add_input()
     streams[ addunderscores( value('mosaic_input_name') ) ] =
         value('mosaic_input');
 
+    mosaic_feedback( addunderscores( value('mosaic_input_name') ) + " ( " + value('mosaic_input') + " ) added to input list.", true );
+
     var mlist = document.getElementById( "mosaic_list_content" );
     while( mlist.hasChildNodes() )
         mlist.removeChild( mlist.firstChild );
@@ -146,12 +149,12 @@ function mosaic_add_input()
         minput.setAttribute( 'href', 'javascript:mosaic_elt_select(\''+name+'\');');
         minput.setAttribute( 'id', name );
         minput.setAttribute( 'value', mrl );
-        minput.setAttribute( 'title', mrl );
         
         var minputtxt = document.createTextNode( name );
 
         minput.appendChild( minputtxt );
         mlist.appendChild( minput );
+        mlist.appendChild( document.createTextNode( " ( "+mrl+" )" ) );
         mlist.appendChild( document.createElement( 'br' ) );
     }
 }
@@ -159,9 +162,13 @@ function mosaic_add_input()
 function mosaic_elt_select( id )
 {
     hide( 'mosaic_list' );
-    document.getElementById( document.getElementById( 'mosaic_list' ).value ).value = id;
-    cells[ document.getElementById( 'mosaic_list' ).value ] = id;
-    mosaic_code_update();
+    var ml = document.getElementById( 'mosaic_list' ).value;
+    if( ml )
+    {
+        document.getElementById( ml ).value = id;
+        cells[ ml ] = id;
+        mosaic_code_update();
+    }
 }
 
 function mosaic_elt_choose( id )
@@ -179,12 +186,12 @@ function mosaic_code_update()
 "## HTTP interface mosaic wizard ##\n"+
 "##################################\n"+
 "\n"+
-"# Comment the following line if you don't want to reset you VLM configuration\n"+
+"# Comment the following line if you don't want to reset your VLM configuration\n"+
 "del all\n"+
 "\n"+
 "# Background options\n"+
 "new   bg broadcast enabled\n"+
-"setup bg input     " + value( 'mosaic_bg_input' ) + "\n";
+"setup bg input     " + sanitize_input( value( 'mosaic_bg_input' ) ) + "\n";
     if( value( 'mosaic_output' ) )
     {
         code.value +=
@@ -194,7 +201,8 @@ function mosaic_code_update()
     if(! o.test( value( 'mosaic_output' ) ) )
     {
         code.value +=
-"setup bg option    sub-filter=mosaic\n";
+"setup bg option    sub-filter=mosaic\n"+
+"setup bg output    #bridge-in{offset=100}:display\n";
     }
     code.value+=
 "\n"+
@@ -240,8 +248,8 @@ function mosaic_code_update()
                 var s = cells[id];
                 code.value +=
 "new   " + s + " broadcast enabled\n"+
-"setup " + s + " input     " + streams[s] + "\n"+
-"setup " + s + " output #duplicate{dst=mosaic-bridge{id=" + s + ",width="+cell_width+",height="+cell_height+"},select=video,dst=bridge-out,select=audio}\n"+
+"setup " + s + " input     " + sanitize_input( streams[s] ) + "\n"+
+"setup " + s + " output #duplicate{dst=mosaic-bridge{id=" + s + ",width="+cell_width+",height="+cell_height+"},select=video,dst=bridge-out{id="+(y*mosaic_cols+x)+"},select=audio}\n"+
 "\n";
             }
         }
@@ -305,4 +313,21 @@ function mosaic_stop()
         }
     }
     mosaic_batch( cmd );
-}   
+}
+
+function mosaic_feedback( msg, ok )
+{
+    var f = document.getElementById( "mosaic_feedback" );
+    while( f.hasChildNodes() )
+        f.removeChild( f.firstChild );
+
+    f.style.fontWeight = "bold";
+    if( ok )
+        f.style.color = "#0f0";
+    else
+        f.style.color = "#f00";
+
+    var t = document.createTextNode( ( ok ? "Info: " : "Error: " ) + msg );
+    f.appendChild( t );
+
+}