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