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
8 < Authors: Brandon Brooks <bwbrooks -at- archmageinc -dot- com>
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.
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.
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 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
26 <title><?vlc gettext("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">
33 window.location='mobile.html';
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">
46 var pollStatus = true;
48 $('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
49 $('#buttonPlayList').click(function(){
50 $('#libraryContainer').animate({
55 $('#buttonViewer').click(function(){
56 $('#viewContainer').animate({
61 $('#buttonEqualizer').click(function(){
63 $('#window_equalizer').dialog('open');
66 $('#buttonOffsets').click(function(){
67 $('#window_offset').dialog('open');
70 $('#buttonBatch').click(function(){
71 $('#window_batch').dialog('open');
74 $('#buttonOpen').click(function(){
75 browse_target = 'default';
77 $('#window_browse').dialog('open');
80 $('#buttonPrev').mousedown(function(){
86 $('#buttonPrev').mouseup(function(){
88 sendCommand({'command':'pl_previous'});
93 $('#buttonNext').mousedown(function(){
99 $('#buttonNext').mouseup(function(){
101 sendCommand({'command':'pl_next'});
106 $('#buttonPlEmpty').click(function(){
107 sendCommand({'command':'pl_empty'})
110 $('#buttonLoop').click(function(){
111 sendCommand({'command':'pl_loop'});
114 $('#buttonRepeat').click(function(){
115 sendCommand({'command':'pl_repeat'});
118 $('#buttonShuffle').click(function(){
119 sendCommand({'command':'pl_random'});
122 $('#buttonRefresh').click(updatePlayList);
123 $('#buttonPlPlay').click(function(){
125 'command': 'pl_play',
126 'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
130 $('#buttonPlAdd').click(function(){
131 $('.jstree-clicked','#libraryTree').each(function(){
132 if($(this).parents().first().attr('uri')){
134 'command':'in_enqueue',
135 'input' : $(this).parents().first().attr('uri')
139 $('#libraryTree').jstree('deselect_all');
140 setTimeout(updatePlayList,1000);
143 $('#buttonStreams, #buttonStreams2').click(function(){
145 $('#window_streams').dialog('open');
147 $('#buttonSout').click(function(){
148 if(current_que=='main'){
149 $('#windowStreamConfirm').dialog('open');
151 $('#player').empty();
152 current_que = 'main';
153 sendVLMCmd('del Current');
158 $('#windowStreamConfirm').dialog({
163 "<?vlc gettext("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));
166 if($('#viewContainer').css('display')=='none'){
167 $('#buttonViewer').click();
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';
175 $(this).dialog('close');
177 "<?vlc gettext("No") ?>":function(){
178 $(this).dialog('close');
182 $('#viewContainer').animate({height: 'toggle'});
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() */
193 <body id="regular_layout">
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"/><?vlc gettext("Controls") ?>
200 <div id="controlTable" class="ui-widget-content">
201 <ul id="controlButtons">
202 <li id="buttonPrev" class="button48 ui-corner-all" title="<?vlc gettext("Previous") ?>"></li>
203 <li id="buttonPlay" class="button48 ui-corner-all paused" title="<?vlc gettext("Play") ?>"></li>
204 <li id="buttonNext" class="button48 ui-corner-all" title="<?vlc gettext("Next") ?>"></li>
205 <li id="buttonOpen" class="button48 ui-corner-all" title="<?vlc gettext("Open Media") ?>"></li>
206 <li id="buttonStop" class="button48 ui-corner-all" title="<?vlc gettext("Stop") ?>"></li>
207 <li id="buttonFull" class="button48 ui-corner-all" title="<?vlc gettext("Full Screen") ?>"></li>
208 <li id="buttonSout" class="button48 ui-corner-all" title="<?vlc gettext("Easy Stream") ?>"></li>
210 <ul id="buttonszone">
211 <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></li>
212 <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></li>
213 <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></li>
214 <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></li>
215 <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></li>
216 <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></li>
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>
223 <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
225 <div id="mediaTitle" class="dynamic"></div>
226 <div id="seekContainer">
227 <div id="seekSlider" title="<?vlc gettext("Seek Time") ?>"></div>
228 <div id="currentTime" class="dynamic">00:00:00</div>
229 <div id="totalTime" class="dynamic">00:00:00</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"/><?vlc gettext("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><?vlc gettext("Loading flowplayer...") ?><br/><?vlc gettext("If nothing appears, check your internet connection.") ?></p>
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"/><?vlc gettext("Library") ?>
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="<?vlc gettext("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="<?vlc gettext("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="<?vlc gettext("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="<?vlc gettext("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="<?vlc gettext("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="<?vlc gettext("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="<?vlc gettext("Refresh List") ?>"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></div>
254 <div id="libraryTree" class="ui-widget-content"></div>
258 VLC <?vlc print(vlc.misc.version() .. ' - Lua Web Interface - <a id="mobileintflink" href="/mobile.html">Mobile Interface</a> - ' .. vlc.misc.copyright()) ?>
262 <div id="windowStreamConfirm" title="Confirm Stream Settings">
264 <?vlc gettext("By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.") ?>
265 <?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>") ?>
266 <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>
269 <?vlc gettext("Once the stream is created, the <i>Media Viewer</i> window will display the stream.") ?>
270 <?vlc gettext("Volume will be controlled by the player, and not the <i>Main Controls</i>.") ?>
273 <?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.") ?>
276 <?vlc gettext("To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.") ?>
279 <?vlc gettext("Are you sure you wish to create the stream ?") ?>
283 current_page = "index"
285 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");