first mediaplayer styling
This commit is contained in:
parent
e153fb79bb
commit
3b34cba4ae
|
@ -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;}
|
||||
|
|
|
@ -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>");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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; }
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="controls">
|
||||
<div id="controls">
|
||||
<span class="nav">
|
||||
<?php echo($_['breadcrumb']); ?>
|
||||
</span>
|
||||
|
|
Loading…
Reference in New Issue