Skip to content

V
vlc
Commit af04c6fa authored by Konstantin Bogdanov's avatar Konstantin Bogdanov Committed by Jean-Baptiste Kempf
Browse files
Options

Improve WebUI for mobiles 

Tested on iOS devices
Signed-off-by: default avatarJean-Baptiste Kempf <jb@videolan.org>
parent e29e617f
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 53 deletions
share/lua/http/css/mobile.css 0 → 100644
View file @ af04c6fa
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;
}
share/lua/http/mobile.html
View file @ af04c6fa
......@@ -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>&nbsp;</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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment