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

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2 <!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
   3 <  index.html: VLC media player web interface - VLM
   4 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
   5 <  Copyright (C) 2005-2006 the VideoLAN team
   6 <  $Id$
   7 <
   8 <  Authors: Brandon Brooks <bwbrooks -at- archmageinc -dot- com>
   9 <
  10 <  This program is free software; you can redistribute it and/or modify
  11 <  it under the terms of the GNU General Public License as published by
  12 <  the Free Software Foundation; either version 2 of the License, or
  13 <  (at your option) any later version.
  14 <
  15 <  This program is distributed in the hope that it will be useful,
  16 <  but WITHOUT ANY WARRANTY; without even the implied warranty of
  17 <  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  18 <  GNU General Public License for more details.
  19 <
  20 <  You should have received a copy of the GNU General Public License
  21 <  along with this program; if not, write to the Free Software
  22 <  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
  23 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  24 <html>
  25         <head>
  26                 <title>VLC media player - Web Interface</title>
  27                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  28                 <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
  29                 <script type="text/javascript" src="js/common.js"></script>
  30                 <script type="text/javascript">
  31                         if(isMobile()){
  32                                 window.location='mobile.html';
  33                         }
  34                 </script>
  35                 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
  36                 <link type="text/css" href="css/main.css" rel="stylesheet" />
  37                 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  38                 <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
  39                 <script type="text/javascript" src="js/jquery.jstree.js"></script>
  40                 <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
  41                 <script type="text/javascript" src="js/ui.js"></script>
  42                 <script type="text/javascript" src="js/controlers.js"></script>
  43                 <script type="text/javascript">
  44                         var pollStatus  =       true;
  45                         $(function(){
  46                                 $('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
  47                                 $('.button48').hover(
  48                                         function(){$(this).css({'filter':'alpha(opacity=50)','-moz-opacity':'0.5','-khtml-opacity': '0.5'})},
  49                                         function(){$(this).css({'filter':'alpha(opacity=100)','-moz-opacity':'1','-khtml-opacity': '1'})}
  50                                 );
  51                                 $('#buttonPlayList').click(function(){
  52                                         $('#libraryContainer').animate({
  53                                                 height: 'toggle'
  54                                         });
  55                                         return false;
  56                                 });
  57                                 $('#buttonViewer').click(function(){
  58                                         $('#viewContainer').animate({
  59                                                 height: 'toggle'
  60                                         })
  61                                         return false;
  62                                 });
  63                                 $('#buttonEqualizer').click(function(){
  64                                         updateEQ();
  65                                         $('#window_equalizer').dialog('open');
  66                                         return false;
  67                                 })
  68                                 $('#buttonOffsets').click(function(){
  69                                         $('#window_offset').dialog('open');
  70                                         return false;
  71                                 });
  72                                 $('#buttonBatch').click(function(){
  73                                         $('#window_batch').dialog('open');
  74                                         return false;
  75                                 });
  76                                 $('#buttonOpen').click(function(){
  77                                         browse_target   =       'default';
  78                                         browse();
  79                                         $('#window_browse').dialog('open');
  80                                         return false;
  81                                 });
  82                                 $('#buttonPrev').mousedown(function(){
  83                                         intv    =       1;
  84                                         ccmd    =       'prev';
  85                                         setIntv();
  86                                         return false;
  87                                 });
  88                                 $('#buttonPrev').mouseup(function(){
  89                                         if(intv<=5){
  90                                                 sendCommand({'command':'pl_previous'});
  91                                         }
  92                                         intv    =       0;
  93                                         return false;
  94                                 });
  95                                 $('#buttonNext').mousedown(function(){
  96                                         intv    =       1;
  97                                         ccmd    =       'next';
  98                                         setIntv();
  99                                         return false;
 100                                 });
 101                                 $('#buttonNext').mouseup(function(){
 102                                         if(intv<=5){
 103                                                 sendCommand({'command':'pl_next'});
 104                                         }
 105                                         intv    =       0;
 106                                         return false;
 107                                 });
 108                                 $('#buttonPlEmpty').click(function(){
 109                                         sendCommand({'command':'pl_empty'})
 110                                         return false;
 111                                 });
 112                                 $('#buttonLoop').click(function(){
 113                                         sendCommand({'command':'pl_loop'});
 114                                         return false;
 115                                 });
 116                                 $('#buttonRepeat').click(function(){
 117                                         sendCommand({'command':'pl_repeat'});
 118                                         return false;
 119                                 });
 120                                 $('#buttonShuffle').click(function(){
 121                                         sendCommand({'command':'pl_random'});
 122                                         return false;
 123                                 })
 124                                 $('#buttonRefresh').click(updatePlayList);
 125                                 $('#buttonPlPlay').click(function(){
 126                                         sendCommand({
 127                                                 'command': 'pl_play',
 128                                                 'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
 129                                         })
 130                                         return false;
 131                                 });
 132                                 $('#buttonPlAdd').click(function(){
 133                                         $('.jstree-clicked','#libraryTree').each(function(){
 134                                                 if($(this).parents().first().attr('uri')){
 135                                                         sendCommand({
 136                                                                 'command':'in_enqueue',
 137                                                                 'input' : $(this).parents().first().attr('uri')
 138                                                         });
 139                                                 };
 140                                         });
 141                                         $('#libraryTree').jstree('deselect_all');
 142                                         setTimeout(updatePlayList,1000);
 143                                         return false;
 144                                 });
 145                                 $('#buttonStreams, #buttonStreams2').click(function(){
 146                                         updateStreams();
 147                                         $('#window_streams').dialog('open');
 148                                 });
 149                                 $('#buttonSout').click(function(){
 150                                         if(current_que=='main'){
 151                                                 $('#windowStreamConfirm').dialog('open');
 152                                         }else{
 153                                                 $('#player').empty();
 154                                                 current_que             =       'main';
 155                                                 sendVLMCmd('del Current');
 156                                                 updateStatus();
 157                                         }
 158                                         return false;
 159                                 });
 160                                 $('#windowStreamConfirm').dialog({
 161                                         autoOpen: false,
 162                                         width:600,
 163                                         modal: true,
 164                                         buttons:{
 165                                                 "Yes":function(){
 166                                                         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));
 167                                                         if(file){
 168                                                                 if($('#viewContainer').css('display')=='none'){
 169                                                                         $('#buttonViewer').click();
 170                                                                 }
 171                                                                 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()+'}';
 172                                                                 sendVLMCmd('del Current;'+defaultStream+';control Current play');
 173                                                                 $('#player').empty();
 174                                                                 $('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
 175                                                                 flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
 176                                                                 current_que                     =       'stream';
 177                                                                 updateStreams();
 178                                                         }
 179                                                         $(this).dialog('close');
 180                                                 },
 181                                                 "No":function(){
 182                                                         $(this).dialog('close');
 183                                                 }
 184                                         }
 185                                 });
 186                                 $('#viewContainer').animate({height: 'toggle'});
 187                         });
 188                 </script>
 189         </head>
 190         <body>
 191                         <div class="centered">
 192                         <div id="mainContainer" class="centered">
 193                         <div id="controlContainer" class="ui-widget">
 194                                 <div class="ui-widget-header" style="text-align: left;">
 195                                         <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls
 196                                 </div>
 197                                 <table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content">
 198                                         <tr>
 199                                                 <td id="controlButtons">
 200                                                         <div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
 201                                                         <div id="buttonPlay" class="button48  ui-corner-all" title="Play"></div>
 202                                                         <div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
 203                                                         <div id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></div>
 204                                                         <div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>
 205                                                         <div id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></div>
 206                                                         <div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>
 207                                                 </td>
 208                                                 <td id="buttonszone">
 209                                                         <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>
 210                                                         <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>
 211                                                         <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>
 212                                                         <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>
 213                                                         <div id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="Equalizer" style="float: left;"><span class="ui-icon ui-icon-signal"></span></div>
 214                                                         <div id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="VLM Batch Commands" style="float: left;"><span class="ui-icon ui-icon-suitcase"></span></div>
 215                                                 </td>
 216                                                 <td>
 217                                                         <div id="volumesliderzone">
 218                                                                 <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
 219                                                                 <div id="currentVolume" class="dynamic">50%</div>
 220                                                         </div>
 221                                                 </td>
 222                                                 <td id="artszone" rowspan="3">
 223                                                         <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
 224                                                 </td>
 225                                         </tr>
 226                                         <tr>
 227                                                 <td colspan="3">
 228                                                         <div id="mediaTitle" class="dynamic"></div>
 229                                                 </td>
 230                                         </tr>
 231                                         <tr>
 232                                                 <td id="seekContainer" colspan="3">
 233                                                         <div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
 234                                                         <table width="100%">
 235                                                                 <tr>
 236                                                                         <td>
 237                                                                                 <div id="currentTime" class="dynamic">00:00:00</div>
 238                                                                         </td>
 239                                                                         <td>
 240                                                                                 <div id="totalTime" class="dynamic">00:00:00</div>
 241                                                                         </td>
 242                                                                 </tr>
 243                                                         </table>
 244                                                 </td>
 245                                         </tr>
 246
 247                                 </table>
 248                         </div>
 249                         <div id="viewContainer" class="ui-widget">
 250                                 <div class="ui-widget-header" style="text-align: left;"><img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Viewer</div>
 251                                 <div id="mediaViewer" class="ui-widget-content">
 252                                         <div href="http://localhost:8081/stream.flv" style="display:block; width:100%" id="player"></div>
 253                                 </div>
 254                         </div>
 255                         <div id="libraryContainer" class="ui-widget">
 256                                 <div class="ui-widget-header" style="text-align: left;">
 257                                         <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Library
 258                                 </div>
 259                                 <div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
 260                                         <div id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="Shuffle"><span class="ui-icon ui-icon-shuffle"></span></div>
 261                                         <div id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="Loop"><span class="ui-icon ui-icon-refresh"></span></div>
 262                                         <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>
 263                                         <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>
 264                                         <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>
 265                                         <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>
 266                                         <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>
 267                                 </div>
 268                                 <div id="libraryTree" class="ui-widget-content"></div>
 269                         </div>
 270
 271                         <div class="footer">
 272                                 VLC <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
 273                         </div>
 274                 </div>
 275                 </div>
 276                 <div id="windowStreamConfirm" title="Confirm Stream Settings">
 277                         <p>
 278                                 By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.
 279                                 The stream will be created using default settings, for more advanced configuration, or to modify the default settings,
 280                                 select the <i>Manage Streams</i>
 281                                 <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>
 282                                 button to the right.
 283                         </p>
 284                         <p>
 285                                 Once the stream is created, the <i>Media Viewer</i> window will display the stream.
 286                                 Volume will be controlled by the player, and not the <i>Main Controls</i>.
 287                         </p>
 288                         <p>
 289                                 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.
 290                         </p>
 291                         <p>
 292                                 To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.
 293                         </p>
 294                         <p>
 295                                 Are you sure you wish to create the stream?
 296                         </p>
 297                 </div>
 298                 <?vlc
 299                 current_page = "index"
 300
 301                 dialogs("browse_window.html","stream_window.html","create_stream.html","offset_window.html","mosaic_window.html","equalizer_window.html","batch_window.html","error_window.html");
 302                 ?>
 303         </body>
 304 </html>