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 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')});
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'})}
53 $('#buttonPlayList').click(function(){
54 $('#libraryContainer').animate({
59 $('#buttonViewer').click(function(){
60 $('#viewContainer').animate({
65 $('#buttonEqualizer').click(function(){
67 $('#window_equalizer').dialog('open');
70 $('#buttonOffsets').click(function(){
71 $('#window_offset').dialog('open');
74 $('#buttonBatch').click(function(){
75 $('#window_batch').dialog('open');
78 $('#buttonOpen').click(function(){
79 browse_target = 'default';
81 $('#window_browse').dialog('open');
84 $('#buttonPrev').mousedown(function(){
90 $('#buttonPrev').mouseup(function(){
92 sendCommand({'command':'pl_previous'});
97 $('#buttonNext').mousedown(function(){
103 $('#buttonNext').mouseup(function(){
105 sendCommand({'command':'pl_next'});
110 $('#buttonPlEmpty').click(function(){
111 sendCommand({'command':'pl_empty'})
114 $('#buttonLoop').click(function(){
115 sendCommand({'command':'pl_loop'});
118 $('#buttonRepeat').click(function(){
119 sendCommand({'command':'pl_repeat'});
122 $('#buttonShuffle').click(function(){
123 sendCommand({'command':'pl_random'});
126 $('#buttonRefresh').click(updatePlayList);
127 $('#buttonPlPlay').click(function(){
129 'command': 'pl_play',
130 'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
134 $('#buttonPlAdd').click(function(){
135 $('.jstree-clicked','#libraryTree').each(function(){
136 if($(this).parents().first().attr('uri')){
138 'command':'in_enqueue',
139 'input' : $(this).parents().first().attr('uri')
143 $('#libraryTree').jstree('deselect_all');
144 setTimeout(updatePlayList,1000);
147 $('#buttonStreams, #buttonStreams2').click(function(){
149 $('#window_streams').dialog('open');
151 $('#buttonSout').click(function(){
152 if(current_que=='main'){
153 $('#windowStreamConfirm').dialog('open');
155 $('#player').empty();
156 current_que = 'main';
157 sendVLMCmd('del Current');
162 $('#windowStreamConfirm').dialog({
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));
170 if($('#viewContainer').css('display')=='none'){
171 $('#buttonViewer').click();
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';
179 $(this).dialog('close');
182 $(this).dialog('close');
186 $('#viewContainer').animate({height: 'toggle'});
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() */
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
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>
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>
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>
227 <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
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>
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>
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
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>
258 <div id="libraryTree" class="ui-widget-content"></div>
262 VLC <?vlc print(vlc.misc.version() .. " - Lua Web Interface - " .. vlc.misc.copyright()) ?>
266 <div id="windowStreamConfirm" title="Confirm Stream Settings">
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>
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>.
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.
282 To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.
285 Are you sure you wish to create the stream?
289 current_page = "index"
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");