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                 //<![CDATA[
  32                         if(isMobile()){
  33                                 window.location='mobile.html';
  34                         }
  35                 //]]>
  36                 </script>
  37                 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
  38                 <link type="text/css" href="css/main.css" rel="stylesheet" />
  39                 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  40                 <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
  41                 <script type="text/javascript" src="js/jquery.jstree.js"></script>
  42                 <script type="text/javascript" src="js/ui.js"></script>
  43                 <script type="text/javascript" src="js/controlers.js"></script>
  44                 <script type="text/javascript">
  45                 //<![CDATA[
  46                         var pollStatus  =       true;
  47                         $(function(){
  48                                 $('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
  49                                 $('#buttonPlayList').click(function(){
  50                                         $('#libraryContainer').animate({
  51                                                 height: 'toggle'
  52                                         });
  53                                         return false;
  54                                 });
  55                                 $('#buttonViewer').click(function(){
  56                                         $('#viewContainer').animate({
  57                                                 height: 'toggle'
  58                                         })
  59                                         return false;
  60                                 });
  61                                 $('#buttonEqualizer').click(function(){
  62                                         updateEQ();
  63                                         $('#window_equalizer').dialog('open');
  64                                         return false;
  65                                 })
  66                                 $('#buttonOffsets').click(function(){
  67                                         $('#window_offset').dialog('open');
  68                                         return false;
  69                                 });
  70                                 $('#buttonBatch').click(function(){
  71                                         $('#window_batch').dialog('open');
  72                                         return false;
  73                                 });
  74                                 $('#buttonOpen').click(function(){
  75                                         browse_target   =       'default';
  76                                         browse();
  77                                         $('#window_browse').dialog('open');
  78                                         return false;
  79                                 });
  80                                 $('#buttonPrev').mousedown(function(){
  81                                         intv    =       1;
  82                                         ccmd    =       'prev';
  83                                         setIntv();
  84                                         return false;
  85                                 });
  86                                 $('#buttonPrev').mouseup(function(){
  87                                         if(intv<=5){
  88                                                 sendCommand({'command':'pl_previous'});
  89                                         }
  90                                         intv    =       0;
  91                                         return false;
  92                                 });
  93                                 $('#buttonNext').mousedown(function(){
  94                                         intv    =       1;
  95                                         ccmd    =       'next';
  96                                         setIntv();
  97                                         return false;
  98                                 });
  99                                 $('#buttonNext').mouseup(function(){
 100                                         if(intv<=5){
 101                                                 sendCommand({'command':'pl_next'});
 102                                         }
 103                                         intv    =       0;
 104                                         return false;
 105                                 });
 106                                 $('#buttonPlEmpty').click(function(){
 107                                         sendCommand({'command':'pl_empty'})
 108                                         return false;
 109                                 });
 110                                 $('#buttonLoop').click(function(){
 111                                         sendCommand({'command':'pl_loop'});
 112                                         return false;
 113                                 });
 114                                 $('#buttonRepeat').click(function(){
 115                                         sendCommand({'command':'pl_repeat'});
 116                                         return false;
 117                                 });
 118                                 $('#buttonShuffle').click(function(){
 119                                         sendCommand({'command':'pl_random'});
 120                                         return false;
 121                                 })
 122                                 $('#buttonRefresh').click(updatePlayList);
 123                                 $('#buttonPlPlay').click(function(){
 124                                         sendCommand({
 125                                                 'command': 'pl_play',
 126                                                 'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
 127                                         })
 128                                         return false;
 129                                 });
 130                                 $('#buttonPlAdd').click(function(){
 131                                         $('.jstree-clicked','#libraryTree').each(function(){
 132                                                 if($(this).parents().first().attr('uri')){
 133                                                         sendCommand({
 134                                                                 'command':'in_enqueue',
 135                                                                 'input' : $(this).parents().first().attr('uri')
 136                                                         });
 137                                                 };
 138                                         });
 139                                         $('#libraryTree').jstree('deselect_all');
 140                                         setTimeout(updatePlayList,1000);
 141                                         return false;
 142                                 });
 143                                 $('#buttonStreams, #buttonStreams2').click(function(){
 144                                         updateStreams();
 145                                         $('#window_streams').dialog('open');
 146                                 });
 147                                 $('#buttonSout').click(function(){
 148                                         if(current_que=='main'){
 149                                                 $('#windowStreamConfirm').dialog('open');
 150                                         }else{
 151                                                 $('#player').empty();
 152                                                 current_que             =       'main';
 153                                                 sendVLMCmd('del Current');
 154                                                 updateStatus();
 155                                         }
 156                                         return false;
 157                                 });
 158                                 $('#windowStreamConfirm').dialog({
 159                                         autoOpen: false,
 160                                         width:600,
 161                                         modal: true,
 162                                         buttons:{
 163                                                 "Yes":function(){
 164                                                         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));
 165                                                         if(file){
 166                                                                 if($('#viewContainer').css('display')=='none'){
 167                                                                         $('#buttonViewer').click();
 168                                                                 }
 169                                                                 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()+'}';
 170                                                                 sendVLMCmd('del Current;'+defaultStream+';control Current play');
 171                                                                 $('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
 172                                                                 current_que                     =       'stream';
 173                                                                 updateStreams();
 174                                                         }
 175                                                         $(this).dialog('close');
 176                                                 },
 177                                                 "No":function(){
 178                                                         $(this).dialog('close');
 179                                                 }
 180                                         }
 181                                 });
 182                                 $('#viewContainer').animate({height: 'toggle'});
 183                         });
 184                         /* delay script loading so we won't block if we have no net access */
 185                         $.getScript('http://static.flowplayer.org/js/flowplayer-3.2.6.min.js', function(data, textStatus){
 186                                 $('#player').empty();
 187                                 flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
 188                                 /* .getScript only handles success() */
 189                          });
 190                 //]]>
 191                 </script>
 192         </head>
 193         <body>
 194                         <div class="centered">
 195                         <div id="mainContainer" class="centered">
 196                         <div id="controlContainer" class="ui-widget">
 197                                 <div class="ui-widget-header" style="text-align: left;">
 198                                         <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls
 199                                 </div>
 200                                 <div id="controlTable" class="ui-widget-content">
 201                                         <ul id="controlButtons">
 202                                                 <li id="buttonPrev" class="button48  ui-corner-all" title="Previous"></li>
 203                                                 <li id="buttonPlay" class="button48  ui-corner-all paused" title="Play"></li>
 204                                                 <li id="buttonNext" class="button48  ui-corner-all" title="Next"></li>
 205                                                 <li id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></li>
 206                                                 <li id="buttonStop" class="button48  ui-corner-all" title="Stop"></li>
 207                                                 <li id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></li>
 208                                                 <li id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></li>
 209                                         </ul>
 210                                         <ul id="buttonszone">
 211                                                 <li id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Library"><span class="ui-icon ui-icon-note"></span></li>
 212                                                 <li id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Viewer"><span class="ui-icon ui-icon-video"></span></li>
 213                                                 <li id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams"><span class="ui-icon ui-icon-script"></span></li>
 214                                                 <li id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="Track Synchronisation"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
 215                                                 <li id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="Equalizer"><span class="ui-icon ui-icon-signal"></span></li>
 216                                                 <li id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="VLM Batch Commands"><span class="ui-icon ui-icon-suitcase"></span></li>
 217                                         </ul>
 218                                         <div id="volumesliderzone">
 219                                                 <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
 220                                                 <div id="currentVolume" class="dynamic">50%</div>
 221                                         </div>
 222                                         <div id="artszone">
 223                                                 <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
 224                                         </div>
 225                                         <div id="mediaTitle" class="dynamic"></div>
 226                                         <div id="seekContainer">
 227                                                 <div id="seekSlider" title="Seek Time"></div>
 228                                                 <div id="currentTime" class="dynamic">00:00:00</div>
 229                                                 <div id="totalTime" class="dynamic">00:00:00</div>
 230                                         </div>
 231                                 </div>
 232                         </div>
 233                         <div id="viewContainer" class="ui-widget">
 234                                 <div class="ui-widget-header" style="text-align: left;"><img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Viewer</div>
 235                                 <div id="mediaViewer" class="ui-widget-content">
 236                                         <div href="http://localhost:8081/stream.flv" style="display:block; width:100%" id="player">
 237                                                 <p>Loading flowplayer...<br/>If nothing appears, check your internet connection.</p>
 238                                         </div>
 239                                 </div>
 240                         </div>
 241                         <div id="libraryContainer" class="ui-widget">
 242                                 <div class="ui-widget-header" style="text-align: left;">
 243                                         <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Library
 244                                 </div>
 245                                 <div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
 246                                         <div id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="Shuffle"><span class="ui-icon ui-icon-shuffle"></span></div>
 247                                         <div id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="Loop"><span class="ui-icon ui-icon-refresh"></span></div>
 248                                         <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>
 249                                         <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>
 250                                         <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>
 251                                         <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>
 252                                         <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>
 253                                 </div>
 254                                 <div id="libraryTree" class="ui-widget-content"></div>
 255                         </div>
 256
 257                         <div class="footer">
 258                                 VLC <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
 259                         </div>
 260                 </div>
 261                 </div>
 262                 <div id="windowStreamConfirm" title="Confirm Stream Settings">
 263                         <p>
 264                                 By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.
 265                                 The stream will be created using default settings, for more advanced configuration, or to modify the default settings,
 266                                 select the <i>Manage Streams</i>
 267                                 <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>
 268                                 button to the right.
 269                         </p>
 270                         <p>
 271                                 Once the stream is created, the <i>Media Viewer</i> window will display the stream.
 272                                 Volume will be controlled by the player, and not the <i>Main Controls</i>.
 273                         </p>
 274                         <p>
 275                                 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.
 276                         </p>
 277                         <p>
 278                                 To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.
 279                         </p>
 280                         <p>
 281                                 Are you sure you wish to create the stream?
 282                         </p>
 283                 </div>
 284                 <?vlc
 285                 current_page = "index"
 286
 287                 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");
 288                 ?>
 289         </body>
 290 </html>