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-2014 VLC authors and VideoLAN
   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., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
  23 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  24 <html>
  25         <head>
  26                 <title><?vlc gettext("VLC media player - Web Interface") ?></title>
  27                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  28                 <meta name="referrer" content="no-referrer" />
  29                 <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
  30                 <script type="text/javascript" src="js/common.js"></script>
  31                 <script type="text/javascript">
  32                 //<![CDATA[
  33                         if(isMobile()){
  34                                 window.location='mobile.html';
  35                         }
  36                 //]]>
  37                 </script>
  38                 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
  39                 <link type="text/css" href="css/main.css" rel="stylesheet" />
  40                 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  41                 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  42                 <script type="text/javascript" src="js/jquery.jstree.js"></script>
  43                 <script type="text/javascript" src="js/ui.js"></script>
  44                 <script type="text/javascript" src="js/controllers.js"></script>
  45                 <script type="text/javascript">
  46                 //<![CDATA[
  47                         var pollStatus  =       true;
  48                         $(function(){
  49                                 $('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
  50                                 $('#buttonPlayList').click(function(){
  51                                         $('#libraryContainer').animate({
  52                                                 height: 'toggle'
  53                                         });
  54                                         $('#buttonszone1').animate({
  55                                                 width: '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                                         updatePlayList(true);
 113                                         return false;
 114                                 });
 115                                 $('#buttonLoop').click(function(){
 116                                         sendCommand({'command':'pl_loop'});
 117                                         return false;
 118                                 });
 119                                 $('#buttonRepeat').click(function(){
 120                                         sendCommand({'command':'pl_repeat'});
 121                                         return false;
 122                                 });
 123                                 $('#buttonShuffle').click(function(){
 124                                         sendCommand({'command':'pl_random'});
 125                                         return false;
 126                                 })
 127                                 $('#buttonRefresh').click(function(){
 128                                     updatePlayList(true);
 129                                     return false;
 130                                 });
 131                                 $('#buttonPlPlay').click(function(){
 132                                         sendCommand({
 133                                                 'command': 'pl_play',
 134                                                 'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
 135                                         })
 136                                         return false;
 137                                 });
 138                                 $('#buttonPlAdd').click(function(){
 139                                         $('.jstree-clicked','#libraryTree').each(function(){
 140                                                 if($(this).parents().first().attr('uri')){
 141                                                         sendCommand({
 142                                                                 'command':'in_enqueue',
 143                                                                 'input' : $(this).parents().first().attr('uri')
 144                                                         });
 145                                                 };
 146                                         });
 147                                         $('#libraryTree').jstree('deselect_all');
 148                                         setTimeout(function(){updatePlayList(true);},1000);
 149                                         return false;
 150                                 });
 151                                 $('#buttonStreams, #buttonStreams2').click(function(){
 152                                         updateStreams();
 153                                         $('#window_streams').dialog('open');
 154                                 });
 155                                 $('#buttonSout').click(function(){
 156                                         if(current_que=='main'){
 157                                                 $('#windowStreamConfirm').dialog('open');
 158                                         }else{
 159                                                 $('#player').empty();
 160                                                 current_que             =       'main';
 161                                                 sendVLMCmd('del Current');
 162                                                 updateStatus();
 163                                         }
 164                                         return false;
 165                                 });
 166                                 $('#qrCodeConfirm').dialog({
 167                                         autoOpen: false,
 168                                         width:600,
 169                                         modal: true,
 170                                         buttons:{
 171                                                 "<?vlc gettext("Yes") ?>":function(){
 172                                                         $(this).dialog('close');
 173                                                         var urlimg = $('#mobileintflink').prop('href');
 174                                                         var codeimg = $('<img width="350" height="350" alt="qrcode"/>');
 175                                                         codeimg.attr('src', 'https://chart.apis.google.com/chart?cht=qr&chs=350x350&chld=L&choe=UTF-8&chl=' + encodeURIComponent(urlimg));
 176                                                         codeimg.dialog({width: 350, height: 350, title: "<?vlc gettext("QR Code") ?>"});
 177                                                 },
 178                                                 "<?vlc gettext("No") ?>":function(){
 179                                                         $(this).dialog('close');
 180                                                         window.location = $('#mobileintflink').attr('href');
 181                                                 }
 182                                         }
 183                                 });
 184                                 $('#windowStreamConfirm').dialog({
 185                                         autoOpen: false,
 186                                         width:600,
 187                                         modal: true,
 188                                         buttons:{
 189                                                 "<?vlc gettext("Yes") ?>":function(){
 190                                                         var file                        =       $('[current="current"]','#libraryTree').length>0 ? $('[current="current"]','#libraryTree').first().attr('uri') : ($('.jstree-clicked','#libraryTree').length>0 ? $('.jstree-clicked','#libraryTree').first().parents().first().attr('uri') : ($('#plid_'+current_playlist_id).attr('uri') ? $('#plid_'+current_playlist_id).attr('uri') : false));
 191                                                         if(file){
 192                                                                 if($('#viewContainer').css('display')=='none'){
 193                                                                         $('#buttonViewer').click();
 194                                                                 }
 195                                                                 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=avformat{{mux=flv}},dst=0.0.0.0:'+$('#stream_port').val()+'/'+$('#stream_file').val()+'}';
 196                                                                 sendVLMCmd('del Current;'+defaultStream+';control Current play');
 197                                                                 $('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
 198                                                                 current_que                     =       'stream';
 199                                                                 updateStreams();
 200                                                         }
 201                                                         $(this).dialog('close');
 202                                                 },
 203                                                 "<?vlc gettext("No") ?>":function(){
 204                                                         $(this).dialog('close');
 205                                                 }
 206                                         }
 207                                 });
 208                                 $('#viewContainer').animate({height: 'toggle'});
 209                         });
 210                         /* delay script loading so we won't block if we have no net access */
 211                         $.getScript('https://releases.flowplayer.org/js/flowplayer-3.2.6.min.js', function(data, textStatus){
 212                                 $('#player').empty();
 213                                 flowplayer("player", "https://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
 214                                 /* .getScript only handles success() */
 215                          });
 216                 //]]>
 217                 </script>
 218         </head>
 219         <body id="regular_layout">
 220                         <div class="centered">
 221                         <div id="mainContainer" class="centered">
 222                         <div id="controlContainer" class="ui-widget">
 223                                 <div id="controlTable" class="ui-widget-content">
 224                                         <ul id="controlButtons">
 225                                                 <li id="buttonPrev" class="button48  ui-corner-all" title="<?vlc gettext("Previous") ?>"></li>
 226                                                 <li id="buttonPlay" class="button48  ui-corner-all paused" title="<?vlc gettext("Play") ?>"></li>
 227                                                 <li id="buttonNext" class="button48  ui-corner-all" title="<?vlc gettext("Next") ?>"></li>
 228                                                 <li id="buttonOpen" class="button48  ui-corner-all" title="<?vlc gettext("Open Media") ?>"></li>
 229                                                 <li id="buttonStop" class="button48  ui-corner-all" title="<?vlc gettext("Stop") ?>"></li>
 230                                                 <li id="buttonFull" class="button48  ui-corner-all" title="<?vlc gettext("Full Screen") ?>"></li>
 231                                                 <li id="buttonSout" class="button48  ui-corner-all" title="<?vlc gettext("Easy Stream") ?>"></li>
 232                                         </ul>
 233                                         <ul id="buttonszone2" class="buttonszone">
 234                                                 <li id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Hide / Show Library") ?>"><span class="ui-icon ui-icon-note"></span><?vlc gettext("Hide / Show Library") ?></li>
 235                                                 <li id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Hide / Show Viewer") ?>"><span class="ui-icon ui-icon-video"></span><?vlc gettext("Hide / Show Viewer") ?></li>
 236                                                 <li id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Manage Streams") ?>"><span class="ui-icon ui-icon-script"></span><?vlc gettext("Manage Streams") ?></li>
 237                                                 <li id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Track Synchronisation") ?>"><span class="ui-icon ui-icon-transfer-e-w"></span><?vlc gettext("Track Synchronisation") ?></li>
 238                                                 <li id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Equalizer") ?>"><span class="ui-icon ui-icon-signal"></span><?vlc gettext("Equalizer") ?></li>
 239                                                 <li id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("VLM Batch Commands") ?>"><span class="ui-icon ui-icon-suitcase"></span><?vlc gettext("VLM Batch Commands") ?></li>
 240                                         </ul>
 241                                         <div id="volumesliderzone">
 242                                                 <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
 243                                                 <div id="currentVolume" class="dynamic">50%</div>
 244                                         </div>
 245                                         <div id="artszone">
 246                                                 <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
 247                                         </div>
 248                                         <div id="mediaTitle" class="dynamic"></div>
 249                                         <div id="seekContainer">
 250                                                 <div id="seekSlider" title="<?vlc gettext("Seek Time") ?>"></div>
 251                                                 <div id="currentTime" class="dynamic">00:00:00</div>
 252                                                 <div id="totalTime" class="dynamic">00:00:00</div>
 253                                         </div>
 254                                 </div>
 255                         </div>
 256                         <div id="libraryContainer" class="ui-widget">
 257                                 <ul id="buttonszone1" align="left" class="buttonszone ui-widget-content" style="overflow:hidden; white-space: nowrap;">
 258                                         <li id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Shuffle") ?>"><span class="ui-icon ui-icon-shuffle"></span><?vlc gettext("Shuffle") ?></li>
 259                                         <li id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Loop") ?>"><span class="ui-icon ui-icon-refresh"></span><?vlc gettext("Loop") ?></li>
 260                                         <li id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Repeat") ?>"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span><?vlc gettext("Repeat") ?></li>
 261                                         <li id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Empty Playlist") ?>"><span class="ui-icon ui-icon-trash"></span><?vlc gettext("Empty Playlist") ?></li>
 262                                         <li id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Queue Selected") ?>"><span class="ui-icon ui-icon-plus"></span><?vlc gettext("Queue Selected") ?></li>
 263                                         <li id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Play Selected") ?>"><span class="ui-icon ui-icon-play"></span><?vlc gettext("Play Selected") ?></li>
 264                                         <li id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Refresh List") ?>"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span><?vlc gettext("Refresh List") ?></li>
 265                                 </ul>
 266                                 <div id="libraryTree" class="ui-widget-content"></div>
 267                         </div>
 268                         <div id="viewContainer" class="ui-widget">
 269                                 <div id="mediaViewer" class="ui-widget-content">
 270                                         <div href="http://localhost:8081/stream.flv" style="display:block; width:100%" id="player">
 271                                                 <p><?vlc gettext("Loading flowplayer...") ?><br/><?vlc gettext("If nothing appears, check your internet connection.") ?></p>
 272                                         </div>
 273                                 </div>
 274                         </div>
 275                         <div class="footer">
 276                                 VLC <?vlc print(vlc.misc.version() .. ' - Lua Web Interface - <a id="mobileintflink" href="mobile.html">Mobile Interface</a> - ' .. vlc.misc.copyright()) ?>
 277                         </div>
 278                 </div>
 279                 </div>
 280                 <div id="qrCodeConfirm" title="<?vlc gettext("Generate QR Code") ?>">
 281                         <p>
 282                                 <?vlc gettext("VLC can display a QR code linking to the mobile version of the web interface; the web address of the web interface of your VLC media player instance will be transmitted over the internet to the Google Image Charts web service to generate this QR code.") ?>
 283                         </p>
 284                         <p>
 285                                 <?vlc gettext("Do you want to go ahead with this?") ?>
 286                         </p>
 287                 </div>
 288                 <div id="windowStreamConfirm" title="<?vlc gettext("Confirm Stream Settings") ?>">
 289                         <p>
 290                                 <?vlc gettext("By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.") ?>
 291                                 <?vlc gettext("The stream will be created using default settings, for more advanced configuration, or to modify the default settings, select the button to the right: <i>Manage Streams</i>") ?>
 292                                 <span id="buttonStreams2" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Manage Streams") ?>"><span class="ui-icon ui-icon-script"></span></span>
 293                         </p>
 294                         <p>
 295                                 <?vlc gettext("Once the stream is created, the <i>Media Viewer</i> window will display the stream.") ?>
 296                                 <?vlc gettext("Volume will be controlled by the player, and not the <i>Main Controls</i>.") ?>
 297                         </p>
 298                         <p>
 299                                 <?vlc gettext("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.") ?>
 300                         </p>
 301                         <p>
 302                                 <?vlc gettext("To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.") ?>
 303                         </p>
 304                         <p>
 305                                 <?vlc gettext("Are you sure you wish to create the stream?") ?>
 306                         </p>
 307                 </div>
 308                 <?vlc
 309                 current_page = "index"
 310
 311                 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");
 312                 ?>
 313         </body>
 314 </html>