[vlc-commits] Improve WebUI for mobiles
Konstantin Bogdanov
git at videolan.org
Tue Dec 20 00:23:43 CET 2011
vlc/vlc-1.2 | branch: master | Konstantin Bogdanov <var1able at var1able.ru> | Sat Dec 17 18:43:41 2011 +0100| [fbabb7a04e034083f49025df4b31f95207009c80] | committer: Jean-Baptiste Kempf
Improve WebUI for mobiles
Tested on iOS devices
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
(cherry picked from commit af04c6fac8c2c6eedfcb7cc54e4fd4171d9a7437)
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
> http://git.videolan.org/gitweb.cgi/vlc/vlc-1.2.git/?a=commit;h=fbabb7a04e034083f49025df4b31f95207009c80
---
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