more media player fixes
This commit is contained in:
parent
5ecdd26902
commit
6aaa49d386
|
@ -16,4 +16,4 @@ li button.right.prettybutton{font-size:1em;}
|
||||||
img.remove{float:right;}
|
img.remove{float:right;}
|
||||||
#searchresults input.play, #searchresults input.add{float:right; height:16px; width:16px;}
|
#searchresults input.play, #searchresults input.add{float:right; height:16px; width:16px;}
|
||||||
#collection tr.collapsed td.album, #collection tr.collapsed td.title{color:#ddd}
|
#collection tr.collapsed td.album, #collection tr.collapsed td.title{color:#ddd}
|
||||||
a.expander{float:right;display:block}
|
a.expander{float:right;display:block}
|
||||||
|
|
|
@ -1,27 +1,25 @@
|
||||||
#controls ul.jp-controls{list-style-type:none;padding:0;}
|
#controls ul.jp-controls{list-style-type:none;padding:0;}
|
||||||
#controls ul.jp-controls li{display:inline;}
|
#controls ul.jp-controls li{display:inline;}
|
||||||
#controls ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px;}
|
#controls ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px;}
|
||||||
a.jp-play,a.jp-pause{width:40px;height:40px;z-index:1;top:20px;left:48px;}
|
a.jp-play,a.jp-pause{width:40px;height:40px;z-index:1;top:0;left:48px;}
|
||||||
a.jp-play{background:url("../img/jplayer.blue.monday.png") 0 0 no-repeat;}
|
a.jp-play{background:url("../img/jplayer.blue.monday.png") 0 0 no-repeat;}
|
||||||
a.jp-play:hover{background:url("../img/jplayer.blue.monday.png") -41px 0 no-repeat;}
|
a.jp-play:hover{background:url("../img/jplayer.blue.monday.png") -41px 0 no-repeat;}
|
||||||
a.jp-pause{background:url("../img/jplayer.blue.monday.png") 0 -42px no-repeat;display:none;}
|
a.jp-pause{background:url("../img/jplayer.blue.monday.png") 0 -42px no-repeat;display:none;}
|
||||||
a.jp-pause:hover{background:url("../img/jplayer.blue.monday.png") -41px -42px no-repeat;}
|
a.jp-pause:hover{background:url("../img/jplayer.blue.monday.png") -41px -42px no-repeat;}
|
||||||
a.jp-stop{top:26px;left:126px;background:url("../img/jplayer.blue.monday.png") 0 -83px no-repeat;width:28px;height:28px;z-index:1;}
|
a.jp-previous{left:20px;top:.5em;background:url("../img/jplayer.blue.monday.png") 0 -112px no-repeat;width:28px;height:28px;}
|
||||||
a.jp-stop:hover{background:url("../img/jplayer.blue.monday.png") -29px -83px no-repeat;}
|
|
||||||
a.jp-previous{left:20px;top:26px;background:url("../img/jplayer.blue.monday.png") 0 -112px no-repeat;width:28px;height:28px;}
|
|
||||||
a.jp-previous:hover{background:url("../img/jplayer.blue.monday.png") -29px -112px no-repeat;}
|
a.jp-previous:hover{background:url("../img/jplayer.blue.monday.png") -29px -112px no-repeat;}
|
||||||
a.jp-next{left:88px;top:26px;background:url("../img/jplayer.blue.monday.png") 0 -141px no-repeat;width:28px;height:28px;}
|
a.jp-next{left:88px;top:.5em;background:url("../img/jplayer.blue.monday.png") 0 -141px no-repeat;width:28px;height:28px;}
|
||||||
a.jp-next:hover{background:url("../img/jplayer.blue.monday.png") -29px -141px no-repeat;}
|
a.jp-next:hover{background:url("../img/jplayer.blue.monday.png") -29px -141px no-repeat;}
|
||||||
div.jp-progress{position:absolute;overflow:hidden;background-color:#293b51;top:32px;left:164px;width:122px;height:15px;}
|
div.jp-progress{position:absolute;overflow:hidden;background-color:#293b51;top:1em;left:164px;width:122px;height:15px;}
|
||||||
div.jp-seek-bar{background:url("../img/jplayer.blue.monday.png") 0 -202px repeat-x;width:0;height:100%;cursor:pointer;}
|
div.jp-seek-bar{background:url("../img/jplayer.blue.monday.png") 0 -202px repeat-x;width:0;height:100%;cursor:pointer;}
|
||||||
div.jp-play-bar{background:url("../img/jplayer.blue.monday.png") 0 -218px repeat-x;width:0;height:100%;}
|
div.jp-play-bar{background:url("../img/jplayer.blue.monday.png") 0 -218px repeat-x;width:0;height:100%;}
|
||||||
div.jp-seeking-bg{background:url("../img/pbar-ani.gif");}
|
div.jp-seeking-bg{background:url("../img/pbar-ani.gif");}
|
||||||
a.jp-mute,a.jp-unmute{height:15px;width:18px;top:32px;left:296px;}
|
a.jp-mute,a.jp-unmute{height:15px;width:18px;top:1em;left:296px;}
|
||||||
a.jp-mute{background:url("../img/jplayer.blue.monday.png") 0 -186px no-repeat;}
|
a.jp-mute{background:url("../img/jplayer.blue.monday.png") 0 -186px no-repeat;}
|
||||||
a.jp-mute:hover{background:url("../img/jplayer.blue.monday.png") -19px -170px no-repeat;}
|
a.jp-mute:hover{background:url("../img/jplayer.blue.monday.png") -19px -170px no-repeat;}
|
||||||
a.jp-unmute{background:url("../img/jplayer.blue.monday.png") 0 -170px no-repeat;display:none;}
|
a.jp-unmute{background:url("../img/jplayer.blue.monday.png") 0 -170px no-repeat;display:none;}
|
||||||
a.jp-unmute:hover{background:url("../img/jplayer.blue.monday.png") -19px -186px no-repeat;}
|
a.jp-unmute:hover{background:url("../img/jplayer.blue.monday.png") -19px -186px no-repeat;}
|
||||||
div.jp-volume-bar{position:absolute;overflow:hidden;background:url("../img/jplayer.blue.monday.png") 0 -250px repeat-x;width:46px;height:5px;cursor:pointer;top:37px;left:324px;}
|
div.jp-volume-bar{position:absolute;overflow:hidden;background:url("../img/jplayer.blue.monday.png") 0 -250px repeat-x;width:46px;height:5px;cursor:pointer;top:1.3em;left:324px;}
|
||||||
div.jp-volume-bar-value{background:url("../img/jplayer.blue.monday.png") 0 -256px repeat-x;width:0;height:5px;}
|
div.jp-volume-bar-value{background:url("../img/jplayer.blue.monday.png") 0 -256px repeat-x;width:0;height:5px;}
|
||||||
div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique;top:45px;left:164px;width:122px;}
|
div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique;top:1em;left:164px;width:122px;}
|
||||||
div.jp-duration{text-align:right;}
|
div.jp-duration{text-align:right;}
|
||||||
|
|
|
@ -42,17 +42,9 @@ OC_Util::addScript('media','jquery.jplayer.min');
|
||||||
OC_Util::addStyle('media','player');
|
OC_Util::addStyle('media','player');
|
||||||
OC_Util::addStyle('media','music');
|
OC_Util::addStyle('media','music');
|
||||||
|
|
||||||
OC_App::setActiveNavigationEntry( 'media_playlist' );
|
OC_App::setActiveNavigationEntry( 'media_index' );
|
||||||
|
|
||||||
$tmpl = new OC_Template( 'media', 'music', 'user' );
|
$tmpl = new OC_Template( 'media', 'music', 'user' );
|
||||||
|
|
||||||
$player = new OC_Template( 'media', 'player');
|
|
||||||
$playlist = new OC_Template( 'media', 'playlist');
|
|
||||||
$collection= new OC_Template( 'media', 'collection');
|
|
||||||
|
|
||||||
$tmpl->assign('player',$player->fetchPage());
|
|
||||||
$tmpl->assign('playlist',$playlist->fetchPage());
|
|
||||||
$tmpl->assign('collection',$collection->fetchPage());
|
|
||||||
$tmpl->printPage();
|
$tmpl->printPage();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|
|
@ -17,15 +17,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="jp-current-time"></div>
|
<div class="jp-current-time"></div>
|
||||||
<div class="jp-duration"></div>
|
<div class="jp-duration"></div>
|
||||||
<div class='player' id='jp-player'></div>
|
<div class="player" id="jp-player"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="leftcontent">
|
<div id="leftcontent">
|
||||||
<table id='playlist'>
|
<table id="playlist">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class='name'><input id='selectAll' type='checkbox'>Name</th>
|
<th class="name"><input id="selectAll" type="checkbox">Name</th>
|
||||||
<th class='artist'>Artist</th>
|
<th class="artist">Artist</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -36,35 +36,35 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr class='template'>
|
<tr class="template">
|
||||||
<td class='name'>
|
<td class="name">
|
||||||
<input type='checkbox'>
|
<input type="checkbox">
|
||||||
<span></span>
|
<span></span>
|
||||||
</td>
|
</td>
|
||||||
<td class='artist'></td>
|
<td class="artist"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="rightcontent">
|
<div id="rightcontent">
|
||||||
<div id='scan'>
|
<div id="scan">
|
||||||
<p id='scancount' style='display:none'><span class='songCount'>0</span> Songs scanned</p>
|
<p id="scancount" style="display:none"><span class="songCount">0</span> Songs scanned</p>
|
||||||
<div id="scanprogressbar"></div>
|
<div id="scanprogressbar"></div>
|
||||||
<input type='button' class='start' value='Recan Collection'></input>
|
<input type="button" class="start" value="Rescan Collection"></input>
|
||||||
<input type='button' class='stop' style='display:none' value='Pause'></input>
|
<input type="button" class="stop" style="display:none" value="Pause"></input>
|
||||||
</div>
|
</div>
|
||||||
<table id='collection'>
|
<table id="collection">
|
||||||
<thead>
|
<thead>
|
||||||
<th>Artist</th>
|
<th>Artist</th>
|
||||||
<th>Album</th>
|
<th>Album</th>
|
||||||
<th>Title</th>
|
<th>Title</th>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class='template'>
|
<tr class="template">
|
||||||
<td class='artist'><a/></td>
|
<td class="artist"><a/></td>
|
||||||
<td class='album'><a/></td>
|
<td class="album"><a/></td>
|
||||||
<td class='title'><a/></td>
|
<td class="title"><a/></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -3,8 +3,7 @@ body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana
|
||||||
|
|
||||||
|
|
||||||
/* HEADERS */
|
/* HEADERS */
|
||||||
#body-user #header, #body-settings #header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; box-shadow:0 0 10px #000, inset 0 -2px 10px #222; }
|
#body-user #header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; box-shadow:0 0 10px #000, inset 0 -2px 10px #222; }
|
||||||
#body-settings #header { background:#313131; }
|
|
||||||
#body-login #header { margin:-2em auto 0; text-align:center; height:10em;
|
#body-login #header { margin:-2em auto 0; text-align:center; height:10em;
|
||||||
-moz-box-shadow:0 0 1em #000; -webkit-box-shadow:0 0 1em #000; box-shadow:0 0 1em #000;
|
-moz-box-shadow:0 0 1em #000; -webkit-box-shadow:0 0 1em #000; box-shadow:0 0 1em #000;
|
||||||
background: #1d2d44; /* Old browsers */
|
background: #1d2d44; /* Old browsers */
|
||||||
|
@ -54,7 +53,12 @@ border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f2f2f2; col
|
||||||
legend { padding:.2em; font-size:1.2em; }
|
legend { padding:.2em; font-size:1.2em; }
|
||||||
.template{display:none;}
|
.template{display:none;}
|
||||||
|
|
||||||
#controls { width:100%; height:3em; margin:0; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:2; }
|
/* CONTENT ------------------------------------------------------------------ */
|
||||||
|
#controls { width:100%; top:3.5em; height:3em; margin:0; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:2; }
|
||||||
|
#content { margin:3.5em 0 0 12.5em; }
|
||||||
|
#body-settings #content { padding:1em; }
|
||||||
|
#leftcontent { position:absolute; top:6.5em; width:50em; }
|
||||||
|
#rightcontent { position:absolute; top:6.5em; left:32em; }
|
||||||
|
|
||||||
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
||||||
#body-login { background-color:#ddd; }
|
#body-login { background-color:#ddd; }
|
||||||
|
@ -87,10 +91,6 @@ legend { padding:.2em; font-size:1.2em; }
|
||||||
#navigation .subentry.active { background-color:#bbb; border-top:1px solid #888; border-bottom:1px solid #bbb; }
|
#navigation .subentry.active { background-color:#bbb; border-top:1px solid #888; border-bottom:1px solid #bbb; }
|
||||||
#navigation .subentry a { padding-left:3.1em; font-size:1em; }
|
#navigation .subentry a { padding-left:3.1em; font-size:1em; }
|
||||||
|
|
||||||
/* CONTENT ------------------------------------------------------------------ */
|
|
||||||
#content { margin:3.5em 0 0 12.5em; }
|
|
||||||
#body-settings #content { padding:1em; }
|
|
||||||
|
|
||||||
/* USER SETTINGS ------------------------------------------------------------ */
|
/* USER SETTINGS ------------------------------------------------------------ */
|
||||||
#quota_indicator { margin:0 4em 1em 0; padding:0; border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
|
#quota_indicator { margin:0 4em 1em 0; padding:0; border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
|
||||||
#quota_indicator div { background-color:#76A9EA; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
|
#quota_indicator div { background-color:#76A9EA; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
|
||||||
|
|
Loading…
Reference in New Issue