git.sesse.net Git - vlc/blob - share/lua/http/index.html

   1 <html>
   2
   3         <head>
   4                 <title>VLC media player - Web Interface</title>
   5                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   6                 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
   7                 <link type="text/css" href="css/main.css" rel="stylesheet" />
   8                 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
   9                 <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
  10                 <script type="text/javascript" src="js/jquery.jstree.js"></script>
  11                 <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
  12                 <script type="text/javascript" src="js/common.js"></script>
  13                 <script type="text/javascript" src="js/controlers.js"></script>
  14
  15                 <script type="text/javascript">
  16                         $(function(){
  17                                 $('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
  18                                 $('.button48').hover(
  19                                         function(){$(this).css({'filter':'alpha(opacity=50)','-moz-opacity':'0.5','-khtml-opacity': '0.5'})},
  20                                         function(){$(this).css({'filter':'alpha(opacity=100)','-moz-opacity':'1','-khtml-opacity': '1'})}
  21                                 );
  22
  23                                 $( "#seekSlider" ).slider({
  24                                         range: "min",
  25                                         value: 0,
  26                                         min: 0,
  27                                         max: 100,
  28                                         stop: function( event, ui ) {
  29                                                 $( "#currentTime" ).empty();
  30                                                 $( "#currentTime" ).append( format_time(Math.round((ui.value/100)*$('#seekSlider').attr('totalLength'))) );
  31                                                 switch(current_que){
  32                                                         case 'main':
  33                                                                 sendCommand({'command':'seek','val':Math.round((ui.value/100)*$('#seekSlider').attr('totalLength'))});
  34                                                                 break;
  35                                                         case 'stream':
  36                                                                 sendVLMCmd('control Current seek '+ui.value);
  37                                                                 break;
  38                                                 }
  39
  40                                         }
  41                                 });
  42                                 $( "#volumeSlider" ).slider({
  43                                         range: "min",
  44                                         value: 50,
  45                                         min: 0,
  46                                         max: 100,
  47                                         stop: function( event, ui ) {
  48                                                 $( "#currentVolume" ).empty();
  49                                                 $( "#currentVolume" ).append( ui.value+"%" );
  50                                                 sendCommand({
  51                                                         'command':'volume',
  52                                                         'val':Math.round(ui.value*5.12)
  53                                                 })
  54                                         }
  55                                 });
  56
  57                                 $('#buttonPlayList').click(function(){
  58                                         $('#libraryContainer').animate({
  59                                                 height: 'toggle'
  60                                         });
  61                                         return false;
  62                                 });
  63                                 $('#buttonViewer').click(function(){
  64                                         $('#viewContainer').animate({
  65                                                 height: 'toggle'
  66                                         })
  67                                         return false;
  68                                 });
  69                                 $('#buttonOffsets').click(function(){
  70                                         $('#window_offset').dialog('open');
  71                                 })
  72                                 $('#buttonOpen').click(function(){
  73                                         browse_target   =       'default';
  74                                         browse();
  75                                         $('#window_browse').dialog('open');
  76                                 });
  77                                 $('#buttonStop').click(function(){
  78                                         switch(current_que){
  79                                                 case 'main':
  80                                                         sendCommand({'command' : 'pl_stop'})
  81                                                         break;
  82                                                 case 'stream':
  83                                                         sendVLMCmd('control Current stop');
  84                                                         break;
  85                                         }
  86
  87                                         return false;
  88                                 });
  89                                 $('#buttonPlay').click(function(){
  90                                         if($(this).attr('state')=='stopped'){
  91                                                 switch(current_que){
  92                                                         case 'main':
  93                                                                 var id  =       $('.jstree-clicked','#libraryTree').length>0 ?  $('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5) : current_id;
  94                                                                 sendCommand({'command':'pl_play','id':id});
  95                                                                 break;
  96                                                         case 'stream':
  97                                                                 sendVLMCmd('control Current play');
  98                                                                 flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
  99                                                                 break;
 100                                                 }
 101
 102                                         }else{
 103                                                 switch(current_que){
 104                                                         case 'main':
 105                                                                 sendCommand({'command':'pl_pause'});
 106                                                                 break;
 107                                                         case 'stream':
 108                                                                 sendVLMCmd('control Current pause');
 109                                                                 break;
 110                                                 }
 111                                         }
 112                                         return false;
 113                                 });
 114                                 $('#buttonPrev').mousedown(function(){
 115                                         intv    =       1;
 116                                         ccmd    =       'prev';
 117                                         setIntv();
 118                                         return false;
 119                                 });
 120                                 $('#buttonPrev').mouseup(function(){
 121                                         if(intv<=5){
 122                                                 sendCommand({'command':'pl_previous'});
 123                                         }
 124                                         intv    =       0;
 125                                         return false;
 126                                 });
 127                                 $('#buttonNext').mousedown(function(){
 128                                         intv    =       1;
 129                                         ccmd    =       'next';
 130                                         setIntv();
 131                                         return false;
 132                                 });
 133                                 $('#buttonNext').mouseup(function(){
 134                                         if(intv<=5){
 135                                                 sendCommand({'command':'pl_next'});
 136                                         }
 137                                         intv    =       0;
 138                                         return false;
 139                                 });
 140                                 $('#buttonFull').click(function(){
 141                                         sendCommand({'command':'fullscreen'});
 142                                         return false;
 143                                 });
 144                                 $('#buttonPlEmpty').click(function(){
 145                                         sendCommand({'command':'pl_empty'})
 146                                         return false;
 147                                 });
 148                                 $('#buttonLoop').click(function(){
 149                                         sendCommand({'command':'pl_loop'});
 150                                         return false;
 151                                 });
 152                                 $('#buttonRepeat').click(function(){
 153                                         sendCommand({'command':'pl_repeat'});
 154                                         return false;
 155                                 });
 156                                 $('#buttonShuffle').click(function(){
 157                                         sendCommand({'command':'pl_random'});
 158                                         return false;
 159                                 })
 160                                 $('#buttonRefresh').click(updatePlayList);
 161                                 $('#buttonPlPlay').click(function(){
 162                                         sendCommand({
 163                                                 'command': 'pl_play',
 164                                                 'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
 165                                         })
 166                                         return false;
 167                                 });
 168                                 $('#buttonPlAdd').click(function(){
 169                                         $('.jstree-clicked','#libraryTree').each(function(){
 170                                                 if($(this).parents().first().attr('uri')){
 171                                                         sendCommand({
 172                                                                 'command':'in_enqueue',
 173                                                                 'input' : $(this).parents().first().attr('uri')
 174                                                         });
 175                                                 };
 176                                         });
 177                                         $('#libraryTree').jstree('deselect_all');
 178                                         setTimeout(updatePlayList,1000);
 179                                         return false;
 180                                 });
 181                                 $('#buttonStreams, #buttonStreams2').click(function(){
 182                                         $('#window_streams').dialog('open');
 183                                 });
 184                                 $('#buttonSout').click(function(){
 185                                         if(current_que=='main'){
 186                                                 $('#windowStreamConfirm').dialog('open');
 187                                         }else{
 188                                                 $('#player').empty();
 189                                                 current_que             =       'main';
 190                                                 sendVLMCmd('del Current');
 191                                                 updateStatus();
 192                                         }
 193                                         return false;
 194                                 });
 195                                 $('#windowStreamConfirm').dialog({
 196                                         autoOpen: false,
 197                                         width:600,
 198                                         position: ['left','top'],
 199                                         modal: true,
 200                                         buttons:{
 201                                                 "Yes":function(){
 202                                                         var file                        =       $('[current="current"]','#libraryTree').length>0 ? decodeURIComponent($('[current="current"]','#libraryTree').first().attr('uri').substr(7)) : ($('.jstree-clicked','#libraryTree').length>0 ? decodeURIComponent($('.jstree-clicked','#libraryTree').first().parents().first().attr('uri').substr(7)) : ($('#plid_'+current_id).attr('uri') ? decodeURIComponent($('#plid_'+current_id).attr('uri').substr(7)) : false));
 203                                                         if(file){
 204                                                                 var defaultStream       =       'new Current broadcast enabled input "'+file+'" output #transcode{vcodec=FLV1,vb=4096,fps=25,scale=1,acodec=mp3,ab=512,samplerate=44100,channels=2}:std{access='+$('#stream_protocol').val()+',mux=ffmpeg{{mux=flv}},dst=0.0.0.0:'+$('#stream_port').val()+'/'+$('#stream_file').val()+'}';
 205                                                                 sendVLMCmd('del Current;'+defaultStream+';control Current play');
 206                                                                 $('#player').empty();
 207                                                                 $('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
 208                                                                 flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
 209                                                                 current_que                     =       'stream';
 210                                                                 updateStreams();
 211                                                         }
 212                                                         $(this).dialog('close');
 213                                                 },
 214                                                 "No":function(){
 215                                                         $(this).dialog('close');
 216                                                 }
 217                                         }
 218                                 });
 219                                 $('#viewContainer').animate({height: 'toggle'});
 220                         });
 221                 </script>
 222         </head>
 223
 224         <body>
 225                 <div align="center">
 226                 <div id="mainContainer" align="center">
 227                         <div id="controlContainer" class="ui-widget">
 228                                 <div class="ui-widget-header" style="text-align: left;">
 229                                         <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls
 230                                 </div>
 231                                 <table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content">
 232                                         <tr>
 233                                                 <td id="controlButtons" width="380px">
 234                                                         <div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
 235                                                         <div id="buttonPlay" class="button48  ui-corner-all" title="Play"></div>
 236                                                         <div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
 237                                                         <div id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></div>
 238                                                         <div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>
 239                                                         <div id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></div>
 240                                                         <div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>
 241                                                 </td>
 242                                                 <td valign="top" width="42px">
 243                                                         <div id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Library" style="float: left;"><span class="ui-icon ui-icon-note"></span></div>
 244                                                         <div id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Viewer" style="float: left;"><span class="ui-icon ui-icon-video"></span></div>
 245                                                         <div id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams" style="float: left;"><span class="ui-icon ui-icon-script"></span></div>
 246                                                         <div id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="Track Synchronisation" style="float: left;"><span class="ui-icon ui-icon-transfer-e-w"></span></div>
 247                                                 </td>
 248                                                 <td>
 249                                                         <div style="margin-left:20px;">
 250                                                                 <div id="volumeSlider" title="Volume" style="width:200px"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
 251                                                                 <div id="currentVolume" class="dynamic">50%</div>
 252                                                         </div>
 253                                                 </td>
 254                                                 <td rowspan="3" valign="top" width="141px">
 255                                                         <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
 256                                                 </td>
 257                                         </tr>
 258                                         <tr>
 259                                                 <td colspan="3">
 260                                                         <div id="mediaTitle" class="dynamic"></div>
 261                                                 </td>
 262                                         </tr>
 263                                         <tr>
 264                                                 <td id="seekContainer" valign="bottom" colspan="3">
 265                                                         <div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
 266                                                         <table width="100%">
 267                                                                 <tr>
 268                                                                         <td>
 269                                                                                 <div id="currentTime" class="dynamic">00:00:00</div>
 270                                                                         </td>
 271                                                                         <td>
 272                                                                                 <div id="totalTime" class="dynamic">00:00:00</div>
 273                                                                         </td>
 274                                                                 </tr>
 275                                                         </table>
 276                                                 </td>
 277                                         </tr>
 278
 279                                 </table>
 280                         </div>
 281                         <div id="viewContainer" class="ui-widget">
 282                                 <div class="ui-widget-header" style="text-align: left;"><img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Viewer</div>
 283                                 <div id="mediaViewer" class="ui-widget-content">
 284                                         <div href="http://localhost:8081/stream.flv" style="display:block; width:100%" id="player"></div>
 285                                 </div>
 286                         </div>
 287                         <div id="libraryContainer" class="ui-widget">
 288                                 <div class="ui-widget-header" style="text-align: left;">
 289                                         <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Library
 290                                 </div>
 291                                 <div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
 292                                         <div id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="Shuffle"><span class="ui-icon ui-icon-shuffle"></span></div>
 293                                         <div id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="Loop"><span class="ui-icon ui-icon-refresh"></span></div>
 294                                         <div id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="Repeat"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></div>
 295                                         <div id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="Empty Playlist"><span class="ui-icon ui-icon-trash"></span></div>
 296                                         <div id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="Queue Selected"><span class="ui-icon ui-icon-plus"></span></div>
 297                                         <div id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="Play Selected"><span class="ui-icon ui-icon-play"></span></div>
 298                                         <div id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="Refresh List"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></div>
 299                                 </div>
 300                                 <div id="libraryTree" class="ui-widget-content"></div>
 301                         </div>
 302
 303                         <div class="footer">
 304                                 VLC <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
 305                         </div>
 306                 </div>
 307                 </div>
 308                 <div id="windowStreamConfirm" title="Confirm Stream Settings">
 309                         <p>
 310                                 By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.
 311                                 The stream will be created using default settings, for more advanced configuration, or to modify the default settings,
 312                                 select the <i>Manage Streams</i>
 313                                 <span id="buttonStreams2" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams"><span class="ui-icon ui-icon-script"></span></span>
 314                                 button to the right.
 315                         </p>
 316                         <p>
 317                                 Once the stream is created, the <i>Media Viewer</i> window will display the stream.
 318                                 Volume will be controlled by the player, and not the <i>Main Controls</i>.
 319                         </p>
 320                         <p>
 321                                 The current playing item will be streamed. If there is no currently playing item, the first selected item from the <i>Library</i> will be the subject of the stream.
 322                         </p>
 323                         <p>
 324                                 To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.
 325                         </p>
 326                         <p>
 327                                 Are you sure you wish to create the stream?
 328                         </p>
 329                 </div>
 330                 <?vlc
 331                 current_page = "index"
 332
 333                 dialogs("browse_window.html","stream_window.html","create_stream.html","offset_window.html","mosaic_window.html");
 334                 ?>
 335
 336         </body>
 337 </html>