first mediaplayer styling

This commit is contained in:
Jan-Christoph Borchardt 2011-08-08 21:40:39 +02:00
parent e153fb79bb
commit 3b34cba4ae
10 changed files with 79 additions and 166 deletions

View File

@ -1,8 +1,6 @@
#jp-interface{position:fixed;z-index:100;width:25em;left:201px;top:-20px;height:60px;border-bottom:none;}
#jp-interface div.player{height:0px}
#jp-interface ul.jp-controls{list-style-type:none;padding:0;}
#jp-interface ul.jp-controls li{display:inline;}
#jp-interface ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px;}
#controls ul.jp-controls{list-style-type:none;padding:0;}
#controls ul.jp-controls li{display:inline;}
#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{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;}

View File

@ -1,65 +0,0 @@
$(document).ready(function() {
$("button.scan").click(function(event){
event.preventDefault();
var parent=$(this).parent().parent();
var path=parent.children('input').val();
scan(path);
});
$("button.rescan").live('click', function(event) {
event.preventDefault();
var parent=$(this).parent().parent();
var path=parent.contents().filter(function(){ return(this.nodeType == 3); }).text();
path=path.trim();
scan(path);
});
$("button.delete").live('click', function(event) {
event.preventDefault();
var parent=$(this).parent().parent();
var path=parent.contents().filter(function(){ return(this.nodeType == 3); }).text();
path=path.trim();
var data="action=delete&path="+path;
$.ajax({
type: 'POST',
url: 'ajax/api.php',
cache: false,
data: data,
success: function(){
parent.remove();
}
});
});
$( "#scanpath" ).autocomplete({
source: "../../files/ajax/autocomplete.php?dironly=true",
minLength: 1
});
$('#autoupdate').change(function(){
$.ajax({
url: 'ajax/autoupdate.php',
data: "autoupdate="+$(this).attr('checked')
});
})
});
function scan(path){
var data="action=scan&path="+path;
$.ajax({
type: 'POST',
url: 'ajax/api.php',
cache: false,
data: data,
success: function(songCount){
var found=false;
$('#folderlist').children('li').each(function(){
var otherPath=$(this).contents().filter(function(){ return(this.nodeType == 3); }).text();
otherPath=otherPath.trim();
if(otherPath==path){
found=true;
$(this).children("span").html(songCount+" songs <button class='rescan prettybutton'>Rescan</button></span>");
}
})
if(!found){
$('#folderlist').children().last().before("<li>"+path+"<span class='right'>"+songCount+" songs <button class='rescan prettybutton'>Rescan</button></span></li>");
}
}
});
}

View File

@ -1,20 +0,0 @@
<div id='scan'>
<p id='scancount' style='display:none'><span class='songCount'>0</span> Songs scanned</p>
<div id="scanprogressbar"></div>
<input type='button' class='start' value='Recan Collection'></input>
<input type='button' class='stop' style='display:none' value='Pause'></input>
</div>
<table id='collection'>
<thead>
<th>Artist</th>
<th>Album</th>
<th>Title</th>
</thead>
<tbody>
<tr class='template'>
<td class='artist'><a/></td>
<td class='album'><a/></td>
<td class='title'><a/></td>
</tr>
</tbody>
</table>

View File

@ -1,3 +1,71 @@
<?php echo $_['player'];?>
<?php echo $_['playlist'];?>
<?php echo $_['collection'];?>
<div id="controls">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="#" class="jp-next" tabindex="1">next</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class='player' id='jp-player'></div>
</div>
<div id="leftcontent">
<table id='playlist'>
<thead>
<tr>
<th class='name'><input id='selectAll' type='checkbox'>Name</th>
<th class='artist'>Artist</th>
</tr>
</thead>
<tbody>
<tr>
<td>
The playlist is empty
</td>
</tr>
</tbody>
<tfoot>
<tr class='template'>
<td class='name'>
<input type='checkbox'>
<span></span>
</td>
<td class='artist'></td>
</tr>
</tfoot>
</table>
</div>
<div id="rightcontent">
<div id='scan'>
<p id='scancount' style='display:none'><span class='songCount'>0</span> Songs scanned</p>
<div id="scanprogressbar"></div>
<input type='button' class='start' value='Recan Collection'></input>
<input type='button' class='stop' style='display:none' value='Pause'></input>
</div>
<table id='collection'>
<thead>
<th>Artist</th>
<th>Album</th>
<th>Title</th>
</thead>
<tbody>
<tr class='template'>
<td class='artist'><a/></td>
<td class='album'><a/></td>
<td class='title'><a/></td>
</tr>
</tbody>
</table>
</div>

View File

@ -1,21 +0,0 @@
<div id="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="#" class="jp-next" tabindex="1">next</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class='player' id='jp-player'></div>
</div>

View File

@ -1,24 +0,0 @@
<table id='playlist'>
<thead>
<tr>
<th class='name'><input id='selectAll' type='checkbox'>Name</th>
<th class='artist'>Artist</th>
</tr>
</thead>
<tbody>
<tr>
<td>
The playlist is empty
</td>
</tr>
</tbody>
<tfoot>
<tr class='template'>
<td class='name'>
<input type='checkbox'>
<span></span>
</td>
<td class='artist'></td>
</tr>
</tfoot>
</table>

View File

@ -1,23 +0,0 @@
<form id="quota">
<fieldset>
<legend>Music Directories</legend>
<ul id='folderlist'>
<?php foreach($_['folders'] as $folder):?>
<li>
<?php echo $folder['name'];?>
<span class='right'>
<?php echo $folder['songs'];?> songs
<button class='rescan prettybutton'>Rescan</button>
<button class='delete prettybutton'>Delete</button>
</span>
</li>
<?php endforeach; ?>
<li>
<input placeholder='path' id='scanpath'/>
<span class='right'><button class='scan prettybutton'>Scan</button></span>
</li>
</ul>
<label for="autoupdate" title='Automaticaly scan new files in above directories'>Auto Update</label>
<input type='checkbox' <?php if($_['autoupdate']){echo 'checked="checked"';};?> id='autoupdate' title='Automaticaly scan new files in above directories'>
</fieldset>
</form>

View File

@ -1,5 +1,5 @@
* { margin:0; padding:0; border:0; outline:0; cursor:default; }
body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; }
body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; margin-bottom:2em; }
/* HEADERS */
@ -54,7 +54,7 @@ border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f2f2f2; col
legend { padding:.2em; font-size:1.2em; }
.template{display:none;}
div.controls { width:100%; height:3em; margin:0; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:2; }
#controls { width:100%; height:3em; margin:0; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:2; }
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
#body-login { background-color:#ddd; }

View File

@ -20,14 +20,14 @@
<legend><?php echo $l->t( 'Create an <strong>admin account</strong>' ); ?></legend>
<input type="text" name="adminlogin" id="adminlogin" value="<?php print OC_Helper::init_var('adminlogin'); ?>" placeholder="<?php echo $l->t( 'Username' ); ?>" autofocus /></p>
<input type="password" name="adminpass" id="adminpass" value="<?php print OC_Helper::init_var('adminpass'); ?>" placeholder="<?php echo $l->t( 'Password' ); ?>" /></p>
</fieldset>
</fieldset>
<a id='showAdvanced'><strong><?php echo $l->t( 'Advanced' ); ?> ▾</strong></a>
<fieldset id='datadirField'>
<legend><?php echo $l->t( 'Set data folder' ); ?></legend>
<input type="text" name="directory" id="directory" value="<?php print OC_Helper::init_var('directory', $_['directory']); ?>" placeholder="<?php echo $l->t( 'Data folder' ); ?>" /></p>
</fieldset>
</fieldset>
<fieldset id='databaseField'>
<legend><?php echo $l->t( 'Configure the database' ); ?></legend>

View File

@ -1,4 +1,4 @@
<div class="controls">
<div id="controls">
<span class="nav">
<?php echo($_['breadcrumb']); ?>
</span>