index.html 13.5 KB
Newer Older
François Cartegnie's avatar
François Cartegnie committed
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Brandon Brooks's avatar
Brandon Brooks committed
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
<  index.html: VLC media player web interface - VLM
< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
<  Copyright (C) 2005-2006 the VideoLAN team
<  $Id$
<
<  Authors: Brandon Brooks <bwbrooks -at- archmageinc -dot- com>
<
<  This program is free software; you can redistribute it and/or modify
<  it under the terms of the GNU General Public License as published by
<  the Free Software Foundation; either version 2 of the License, or
<  (at your option) any later version.
<
<  This program is distributed in the hope that it will be useful,
<  but WITHOUT ANY WARRANTY; without even the implied warranty of
<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
<  GNU General Public License for more details.
<
<  You should have received a copy of the GNU General Public License
<  along with this program; if not, write to the Free Software
<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
elminster2031's avatar
elminster2031 committed
24
25
<html>
	<head>
26
		<title><?vlc gettext("VLC media player - Web Interface") ?></title>
elminster2031's avatar
elminster2031 committed
27
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Brandon Brooks's avatar
Brandon Brooks committed
28
29
30
		<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript">
31
		//<![CDATA[
Brandon Brooks's avatar
Brandon Brooks committed
32
33
34
			if(isMobile()){
				window.location='mobile.html';
			}
35
		//]]>
Brandon Brooks's avatar
Brandon Brooks committed
36
		</script>
elminster2031's avatar
elminster2031 committed
37
38
39
40
41
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
		<link type="text/css" href="css/main.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.jstree.js"></script>
Brandon Brooks's avatar
Brandon Brooks committed
42
		<script type="text/javascript" src="js/ui.js"></script>
elminster2031's avatar
elminster2031 committed
43
44
		<script type="text/javascript" src="js/controlers.js"></script>
		<script type="text/javascript">
45
		//<![CDATA[
Brandon Brooks's avatar
Brandon Brooks committed
46
			var pollStatus	=	true;
elminster2031's avatar
elminster2031 committed
47
48
49
50
			$(function(){
				$('.button').hover(function(){$(this).addClass('ui-state-hover')},function(){$(this).removeClass('ui-state-hover')});
				$('#buttonPlayList').click(function(){
					$('#libraryContainer').animate({
elminster2031's avatar
elminster2031 committed
51
						height: 'toggle'
elminster2031's avatar
elminster2031 committed
52
53
54
55
56
57
58
59
60
					});
					return false;
				});
				$('#buttonViewer').click(function(){
					$('#viewContainer').animate({
						height: 'toggle'
					})
					return false;
				});
Brandon Brooks's avatar
Brandon Brooks committed
61
62
63
64
65
				$('#buttonEqualizer').click(function(){
					updateEQ();
					$('#window_equalizer').dialog('open');
					return false;
				})
elminster2031's avatar
elminster2031 committed
66
67
				$('#buttonOffsets').click(function(){
					$('#window_offset').dialog('open');
Brandon Brooks's avatar
Brandon Brooks committed
68
69
70
71
72
73
					return false;
				});
				$('#buttonBatch').click(function(){
					$('#window_batch').dialog('open');
					return false;
				});
elminster2031's avatar
elminster2031 committed
74
75
76
77
78
79
				$('#buttonOpen').click(function(){
					browse_target	=	'default';
					browse();
					$('#window_browse').dialog('open');
					return false;
				});
elminster2031's avatar
elminster2031 committed
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
				$('#buttonPrev').mousedown(function(){
					intv	=	1;
					ccmd	=	'prev';
					setIntv();
					return false;
				});
				$('#buttonPrev').mouseup(function(){
					if(intv<=5){
						sendCommand({'command':'pl_previous'});
					}
					intv	=	0;
					return false;
				});
				$('#buttonNext').mousedown(function(){
					intv	=	1;
					ccmd	=	'next';
					setIntv();
elminster2031's avatar
elminster2031 committed
97
98
					return false;
				});
elminster2031's avatar
elminster2031 committed
99
100
101
102
103
				$('#buttonNext').mouseup(function(){
					if(intv<=5){
						sendCommand({'command':'pl_next'});
					}
					intv	=	0;
elminster2031's avatar
elminster2031 committed
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
					return false;
				});
				$('#buttonPlEmpty').click(function(){
					sendCommand({'command':'pl_empty'})
					return false;
				});
				$('#buttonLoop').click(function(){
					sendCommand({'command':'pl_loop'});
					return false;
				});
				$('#buttonRepeat').click(function(){
					sendCommand({'command':'pl_repeat'});
					return false;
				});
				$('#buttonShuffle').click(function(){
					sendCommand({'command':'pl_random'});
					return false;
				})
				$('#buttonRefresh').click(updatePlayList);
				$('#buttonPlPlay').click(function(){
					sendCommand({
						'command': 'pl_play',
						'id':$('.jstree-clicked','#libraryTree').first().parents().first().attr('id').substr(5)
					})
					return false;
				});
				$('#buttonPlAdd').click(function(){
					$('.jstree-clicked','#libraryTree').each(function(){
						if($(this).parents().first().attr('uri')){
							sendCommand({
								'command':'in_enqueue',
								'input' : $(this).parents().first().attr('uri')
							});
						};
					});
					$('#libraryTree').jstree('deselect_all');
					setTimeout(updatePlayList,1000);
					return false;
				});
				$('#buttonStreams, #buttonStreams2').click(function(){
Brandon Brooks's avatar
Brandon Brooks committed
144
					updateStreams();
elminster2031's avatar
elminster2031 committed
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
					$('#window_streams').dialog('open');
				});
				$('#buttonSout').click(function(){
					if(current_que=='main'){
						$('#windowStreamConfirm').dialog('open');
					}else{
						$('#player').empty();
						current_que		=	'main';
						sendVLMCmd('del Current');
						updateStatus();
					}
					return false;
				});
				$('#windowStreamConfirm').dialog({
					autoOpen: false,
					width:600,
					modal: true,
					buttons:{
163
						"<?vlc gettext("Yes") ?>":function(){
elminster2031's avatar
elminster2031 committed
164
165
							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));
							if(file){
Brandon Brooks's avatar
Brandon Brooks committed
166
167
168
								if($('#viewContainer').css('display')=='none'){
									$('#buttonViewer').click();
								}
elminster2031's avatar
elminster2031 committed
169
170
171
172
173
174
175
176
								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()+'}';
								sendVLMCmd('del Current;'+defaultStream+';control Current play');
								$('#player').attr('href',$('#stream_protocol').val()+'://'+$('#stream_host').val()+':'+$('#stream_port').val()+'/'+$('#stream_file').val());
								current_que			=	'stream';
								updateStreams();
							}
							$(this).dialog('close');
						},
177
						"<?vlc gettext("No") ?>":function(){
elminster2031's avatar
elminster2031 committed
178
179
180
181
							$(this).dialog('close');
						}
					}
				});
elminster2031's avatar
elminster2031 committed
182
				$('#viewContainer').animate({height: 'toggle'});
elminster2031's avatar
elminster2031 committed
183
			});
184
185
186
187
188
189
			/* delay script loading so we won't block if we have no net access */
			$.getScript('http://static.flowplayer.org/js/flowplayer-3.2.6.min.js', function(data, textStatus){
				$('#player').empty();
				flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
				/* .getScript only handles success() */
			 });
190
		//]]>
elminster2031's avatar
elminster2031 committed
191
192
		</script>
	</head>
193
	<body id="regular_layout">
194
195
			<div class="centered">
			<div id="mainContainer" class="centered">
elminster2031's avatar
elminster2031 committed
196
			<div id="controlContainer" class="ui-widget">
elminster2031's avatar
elminster2031 committed
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") ?>
elminster2031's avatar
elminster2031 committed
199
				</div>
200
201
				<div id="controlTable" class="ui-widget-content">
					<ul id="controlButtons">
202
203
204
205
206
207
208
						<li id="buttonPrev" class="button48  ui-corner-all" title="<?vlc gettext("Previous") ?>"></li>
						<li id="buttonPlay" class="button48  ui-corner-all paused" title="<?vlc gettext("Play") ?>"></li>
						<li id="buttonNext" class="button48  ui-corner-all" title="<?vlc gettext("Next") ?>"></li>
						<li id="buttonOpen" class="button48  ui-corner-all" title="<?vlc gettext("Open Media") ?>"></li>
						<li id="buttonStop" class="button48  ui-corner-all" title="<?vlc gettext("Stop") ?>"></li>
						<li id="buttonFull" class="button48  ui-corner-all" title="<?vlc gettext("Full Screen") ?>"></li>
						<li id="buttonSout" class="button48  ui-corner-all" title="<?vlc gettext("Easy Stream") ?>"></li>
209
210
					</ul>
					<ul id="buttonszone">
211
212
213
214
215
216
						<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>
						<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>
						<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>
						<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>
						<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>
						<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>
217
218
219
220
221
222
223
224
225
226
					</ul>
					<div id="volumesliderzone">
						<div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
						<div id="currentVolume" class="dynamic">50%</div>
					</div>
					<div id="artszone">
						<img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
					</div>
					<div id="mediaTitle" class="dynamic"></div>
					<div id="seekContainer">
227
						<div id="seekSlider" title="<?vlc gettext("Seek Time") ?>"></div>
228
229
230
231
						<div id="currentTime" class="dynamic">00:00:00</div>
						<div id="totalTime" class="dynamic">00:00:00</div>
					</div>
				</div>
elminster2031's avatar
elminster2031 committed
232
			</div>
elminster2031's avatar
elminster2031 committed
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>
elminster2031's avatar
elminster2031 committed
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>
238
					</div>
elminster2031's avatar
elminster2031 committed
239
240
				</div>
			</div>
elminster2031's avatar
elminster2031 committed
241
			<div id="libraryContainer" class="ui-widget">
elminster2031's avatar
elminster2031 committed
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") ?>
elminster2031's avatar
elminster2031 committed
244
245
				</div>
				<div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
246
247
248
249
250
251
252
					<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>
					<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>
					<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>
					<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>
					<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>
					<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>
					<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>
elminster2031's avatar
elminster2031 committed
253
254
255
				</div>
				<div id="libraryTree" class="ui-widget-content"></div>
			</div>
elminster2031's avatar
elminster2031 committed
256
			
elminster2031's avatar
elminster2031 committed
257
			<div class="footer">
258
				VLC <?vlc print(vlc.misc.version() .. ' - Lua Web Interface - <a id="mobileintflink" href="/mobile.html">Mobile Interface</a> - ' .. vlc.misc.copyright()) ?>
elminster2031's avatar
elminster2031 committed
259
260
261
262
263
			</div>
		</div>
		</div>
		<div id="windowStreamConfirm" title="Confirm Stream Settings">
			<p>
264
265
266
				<?vlc gettext("By creating a stream, the <i>Main Controls</i> will operate the stream instead of the main interface.") ?>
				<?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>") ?>
				<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>
elminster2031's avatar
elminster2031 committed
267
268
			</p>
			<p>
269
270
				<?vlc gettext("Once the stream is created, the <i>Media Viewer</i> window will display the stream.") ?>
				<?vlc gettext("Volume will be controlled by the player, and not the <i>Main Controls</i>.") ?>
elminster2031's avatar
elminster2031 committed
271
272
			</p>
			<p>
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.") ?>
elminster2031's avatar
elminster2031 committed
274
275
			</p>
			<p>
276
				<?vlc gettext("To stop the stream and resume normal controls, click the <i>Open Stream</i> button again.") ?>
elminster2031's avatar
elminster2031 committed
277
278
			</p>
			<p>
279
				<?vlc gettext("Are you sure you wish to create the stream ?") ?>
elminster2031's avatar
elminster2031 committed
280
281
282
283
			</p>
		</div>
		<?vlc
		current_page = "index"
284

Brandon Brooks's avatar
Brandon Brooks committed
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");
elminster2031's avatar
elminster2031 committed
286
287
		?>
	</body>
François Cartegnie's avatar
François Cartegnie committed
288
</html>