[vlc-commits] Improve WebUI for mobiles

Konstantin Bogdanov git at videolan.org
Sat Dec 17 18:45:15 CET 2011


vlc | branch: master | Konstantin Bogdanov <var1able at var1able.ru> | Sat Dec 17 18:43:41 2011 +0100| [af04c6fac8c2c6eedfcb7cc54e4fd4171d9a7437] | committer: Jean-Baptiste Kempf

Improve WebUI for mobiles

Tested on iOS devices

Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=af04c6fac8c2c6eedfcb7cc54e4fd4171d9a7437
---

 share/lua/http/css/mobile.css |  179 +++++++++++++++++++++++++++++++++++++++++
 share/lua/http/mobile.html    |   87 ++++++++------------
 2 files changed, 213 insertions(+), 53 deletions(-)

diff --git a/share/lua/http/css/mobile.css b/share/lua/http/css/mobile.css
new file mode 100644
index 0000000..717fc50
--- /dev/null
+++ b/share/lua/http/css/mobile.css
@@ -0,0 +1,179 @@
+root { 
+    display: block;
+}
+#content{
+
+}
+body{
+	font: 11pt Helvetica, Arial, sans-serif;
+	background-color:#EEE;
+}
+
+#libraryTree{
+	height: 300px;
+	overflow:scroll;
+	white-space: nowrap;
+	text-align: left;
+}
+
+#mediaViewer{
+	min-height: 500px;
+}
+#meta {
+	position:relative;
+	width:100%;
+}
+#seekSlider{
+	width: 100%;
+}
+
+#volumeSlider{
+	width: 100%;
+	display: inline-block;
+}
+#currentVolume{
+	display: inline-block;
+}
+#mediaTitle{
+	text-align:center;
+	width:100%;
+	margin-top:5px;
+}
+#currentTime{
+	float: left;
+	text-align: left;
+}
+#totalTime{
+	float: right;
+	text-align: right;
+}
+#play_controls, #controls{
+	margin-top:30px;
+	width:95%;
+	margin-left:auto;
+	margin-right:auto;
+}
+
+#controlTable{
+	position:relative;
+	height: 150px;
+}
+
+#buttonszone li{
+	float: left;
+}
+
+#art{
+	top:0px;
+	width:150px;
+	height:150px;
+	margin:0 auto;
+	box-sizing:border-box;
+	-webkit-box-sizing:border-box;
+}
+
+.ui-slider-range{
+	background-color:#FFB200;
+	background:#FFB200 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
+}
+
+
+#buttons{
+	margin:0 auto; 
+	position: relative; 
+	width:265px;
+}
+.button48{
+	width: 48px;
+	height: 48px;
+	margin: 5px 0px 5px 15px;
+	background: none;
+	border: none;
+	display: inline-block;
+	cursor: pointer;
+	background-image: url("../images/buttons.png");
+	background-repeat: no-repeat;
+}
+
+.button{
+	cursor: pointer;
+	display: inline-block;
+}
+#buttonOpen{
+	background-position: 0px 0px;
+}
+#buttonStop{
+	background-position: -576px 0px;
+}
+.playing {
+	background-position: -336px 0px;
+}
+.paused {
+	background-position: -384px 0px;
+}
+#buttonPrev{
+	background-position: -144px 0px;
+}
+#buttonNext{
+	background-position: -288px 0px;
+}
+#buttonFull{
+	background-position: -192px 0px;
+}
+#buttonSout{
+	background-position: -624px 0px;
+}
+#buttonEQ{
+	background-position: -48px 0px;
+}
+#window_browse ol{
+	list-style-type: none;
+}
+#window_browse ol li{
+	list-style-type: none;
+	float: left;
+	padding: 5px;
+}
+.system_icon{
+	width:80px;
+	text-align:center;
+	vertical-align:top;
+	display: inline-block;
+	cursor: pointer;
+	padding: 2px;
+	border: 1px solid #823D0A;
+	margin: 2px;
+	height: 92px;
+	background-color: #E1E1E1;
+	overflow: hidden;
+}
+#window_create_stream table tr td{
+	font-size: 11px;
+}
+
+#window_equalizer div div{
+	text-align: center;
+	font-size: 11px;
+	padding: 0px;
+}
+.eqBand{
+	margin-bottom: 10px;
+	margin-top: 10px;
+	height: 400px;
+	font-size: 1.5em;
+}
+.footer{
+	margin-top: 30px;
+	text-align: center;
+	font-size: 11px;
+}
+
+div.centered{
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.hidden{
+	visibility: hidden;
+	display: none;
+}
diff --git a/share/lua/http/mobile.html b/share/lua/http/mobile.html
index c7d32de..9ad0b90 100644
--- a/share/lua/http/mobile.html
+++ b/share/lua/http/mobile.html
@@ -22,16 +22,19 @@
 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 <html>
 	<head>
-		<title><?vlc gettext("VLC media player - Web Interface") ?></title>
+		<title>VLC media player - Web Interface</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-		<meta name="viewport" content="width=device-width; user-scalable=no" />
+		<meta name="viewport" content="initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="default" />
 		<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
 		<script type="text/javascript" src="js/common.js"></script>
 		<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" />
+		<link type="text/css" href="css/mobile.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>
+		<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
 		<script type="text/javascript" src="js/ui.js"></script>
 		<script type="text/javascript" src="js/controlers.js"></script>
 		<script type="text/javascript">
@@ -62,60 +65,38 @@
 			})
 		</script>
 	</head>
-	<body id="mobile_layout">
-		<div id="main">
-			<table width="100%" cellpadding="0" cellspacing="0" style="height:100%" border="0">
-
-				<tr>
-					<td valign="top" height="130px">
-						<img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art" style="border:2px solid #000000;"/>
-					</td>
-					<td valign="top" width="125px"  class="ui-widget-content" rowspan="2">
-						<div id="buttonOpen" class="button48  ui-corner-all" title="<?vlc gettext("Open Media") ?>"></div>
-						<div id="buttonFull" class="button48  ui-corner-all" title="<?vlc gettext("Full Screen") ?>"></div>
-						<div id="buttonEQ" class="button48 ui-corner-all" title="<?vlc gettext("Equalizer") ?>"></div>
-						<div id="buttonSout" class="button48  ui-corner-all" title="<?vlc gettext("Easy Stream") ?>"></div
-					</td>
-				</tr>
-				<tr>
-					<td> </td>
-				</tr>
-				<tr>
-					<td colspan="2" valign="bottom" height="60px">
-						<div id="volumeSlider" title="Volume" style="width:98%; margin-left:10px; font-size:30px;"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
-					</td>
-				</tr>
-				<tr>
-					<td colspan="2" valign="bottom" height="20px">
-						<div id="mediaTitle" class="dynamic"></div>
-					</td>
-				</tr>
-				<tr>
-					<td id="controlButtons" colspan="2" valign="bottom" height="108px;" class="ui-widget-content">
-						<div align="center">
-							<div id="buttonPrev" class="button48  ui-corner-all" title="<?vlc gettext("Previous") ?>"></div>
-							<div id="buttonPlay" class="button48  ui-corner-all paused" title="<?vlc gettext("Play") ?>"></div>
-							<div id="buttonNext" class="button48  ui-corner-all" title="<?vlc gettext("Next") ?>"></div>
-							<div id="buttonStop" class="button48  ui-corner-all" title="<?vlc gettext("Stop") ?>"></div>
-						</div>
-						<div id="seekSlider" title="<?vlc gettext("Seek Time") ?>" style="width:98%; margin-left:10px;font-size:30px;"></div>
-						<table width="100%">
-							<tr>
-								<td>
-									<div id="currentTime" class="dynamic">00:00:00</div>
-								</td>
-								<td>
-									<div id="totalTime" class="dynamic">00:00:00</div>
-								</td>
-							</tr>
-						</table>
-					</td>
-				</tr>
-			</table>
+	<body>
+	<div id="content" class="centered">
+		<div id="art">
+			<img id="albumArt" src="/art" />
+		</div>
+		<div style="width:100%"><div id="mediaTitle" class="dynamic centered"></div></div>
+		<div id="play_controls">
+			<div id="buttons">
+				<div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
+				<div id="buttonPlay" class="button48  ui-corner-all paused" title="Play"></div>
+				<div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>
+				<div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
+			</div>
+			<div id="seekSlider" title="Seek Time" style="font-size:15px;"></div>
+			<div id="currentTime" class="dynamic">00:00:00</div>
+			<div id="totalTime" class="dynamic">00:00:00</div>
+		</div>
+		<div id="controls">
+			<div id="buttons">
+				<div id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></div>
+				<div id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></div>
+				<div id="buttonEQ" class="button48 ui-corner-all" title="Equalizer"></div>
+				<div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>
+			</div>
+			<div id="volumeSlider" title="Volume" style="font-size:15px;">
+				<img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/>
+			</div>
 		</div>
 		<?vlc
 
 	dialogs("stream_config_window.html");
 	?>
+	</div>
 	</body>
 </html>



More information about the vlc-commits mailing list