|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>DAAPr</title>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
<!--meta href="/"-->
|
|
|
|
|
|
<style type="text/css">
|
|
|
@import "/resources/css/normalize.css";
|
|
|
|
|
|
@import "/resources/vendors/bootstrap/2.1.1/css/bootstrap.min.css";
|
|
|
|
|
|
@import "/resources/css/datatables.css";
|
|
|
@import "/resources/css/app.css";
|
|
|
@import "/resources/css/player.css";
|
|
|
</style>
|
|
|
|
|
|
<script data-main="resources/js/main" src="resources/vendors/require/require.min.js">/**/</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="ui-layout-north" id="wrapperPlayer">
|
|
|
<div class="daaprControlsWrap">
|
|
|
<a id="buttonPrev" class="disabled"></a>
|
|
|
<a id="buttonPlay" class="disabled"></a>
|
|
|
<a id="buttonNext" class="disabled"></a>
|
|
|
<div id="volumeWrapper">
|
|
|
<a id="buttonVolDown" class="disabled"></a>
|
|
|
<input type="range" id="buttonVolume" minx="0" max="1" step="0.05" value="0" disabled />
|
|
|
<a id="buttonVolUp" class="disabled"></a>
|
|
|
</div>
|
|
|
<div class="clearfix"></div>
|
|
|
</div>
|
|
|
<form action="#" class="form-search controls" id="wrapperSearchWidget">
|
|
|
<div class="input-prepend">
|
|
|
<button type="submit" tabindex="-1" class="btn"><i class="icon-search"></i></button>
|
|
|
<input type="text" tabindex="1" class="span3 search-query">
|
|
|
</div>
|
|
|
</form>
|
|
|
<div id="daaprPlayerViewport">
|
|
|
<h1>DAAPr<sup>3</sup></h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui-layout-west">
|
|
|
<div id="wrapperSideBar">
|
|
|
<ul>
|
|
|
<li>
|
|
|
<span>
|
|
|
<i class="icon-home"></i> <span>Servers</span>
|
|
|
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-plus-sign"></i></a>
|
|
|
</span>
|
|
|
<ul>
|
|
|
<li>
|
|
|
<span>
|
|
|
<i class="icon-folder-close"></i> <span>Bigthug</span>
|
|
|
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
|
|
|
</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<span>
|
|
|
<i class="icon-folder-close"></i> <span>WebDevTest</span>
|
|
|
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
|
|
|
</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<span>
|
|
|
<i class="icon-folder-close"></i> <span>ReallyLongNameWithNoBreaks</span>
|
|
|
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
|
|
|
</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<span>
|
|
|
<i class="icon-folder-close"></i> <span>Really Long Name Breaks</span>
|
|
|
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
|
|
|
</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li class="droppable"><span><i class="icon-list"></i> Playlist</span></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui-layout-center" class="loading">
|
|
|
<div class="ui-layout-north row-fluid span12" id="wrapperBrowser">
|
|
|
<div class="third">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableGenres"></table>
|
|
|
</div>
|
|
|
<div class="third">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableArtists"></table>
|
|
|
</div>
|
|
|
<div class="third">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableAlbums"></table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ui-layout-center" id="wrapperList">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableList"></table>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui-layout-south row-fluid" id="wrapperFooter">
|
|
|
<div id="wrapperFooterLeft" class="span4">
|
|
|
<button class="btn btn-mini btn-inverse" type="button" data-toggle="side-bar"><i class="icon-chevron-left icon-white"></i></button>
|
|
|
<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-random icon-white"></i></button>
|
|
|
<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-retweet icon-white"></i></button>
|
|
|
</div>
|
|
|
<div id="wrapperFooterCenter" class="span4">
|
|
|
<span class="list-count">0</span> items
|
|
|
</div>
|
|
|
<div id="wrapperFooterRight" class="span4">
|
|
|
<!-- <div class="btn-group">
|
|
|
<button class="btn btn-inverse btn-mini"><i class="icon-download-alt icon-white"></i>Download</button>
|
|
|
<button class="btn btn-inverse btn-mini dropdown-toggle" data-toggle="dropdown">
|
|
|
<span class="caret"></span>
|
|
|
</button>
|
|
|
<ul class="dropdown-menu pull-up" role="menu" aria-labelledby="dLabel">
|
|
|
<li><a tabindex="-1" href="#">Action</a></li>
|
|
|
<li><a tabindex="-1" href="#">Another action</a></li>
|
|
|
<li><a tabindex="-1" href="#">Something else here</a></li>
|
|
|
<li class="divider"></li>
|
|
|
<li><a tabindex="-1" href="#">Separated link</a></li>
|
|
|
</ul>
|
|
|
</div> -->
|
|
|
<button class="btn btn-mini btn btn-inverse" type="button" data-target="modalAboutDaapr"><i class="icon-question-sign icon-white"></i></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<ul id="listItemContextMenu" class="context-menu dropdown-menu">
|
|
|
<li><a href="javascript:void(0);" data-target="listItemDetails"><i class="icon-info-sign"></i> Details...</a></li>
|
|
|
<li><a href="javascript:void(0);" data-target="permalink"><i class="icon-bookmark"></i> Direct link</a></li>
|
|
|
<li><a href="javascript:void(0);" data-target="download"><i class="icon-download-alt"></i> Download</a></li>
|
|
|
</ul>
|
|
|
|
|
|
<ul id="listColumnsContextMenu" class="context-menu dropdown-menu">
|
|
|
<li><a href="javascript:void(0);">Title</a></li>
|
|
|
<li><a href="javascript:void(0);">Artist</a></li>
|
|
|
<li><a href="javascript:void(0);">Album</a></li>
|
|
|
<li><a href="javascript:void(0);">Track</a></li>
|
|
|
<li><a href="javascript:void(0);">Disc</a></li>
|
|
|
<li><a href="javascript:void(0);">Year</a></li>
|
|
|
<li><a href="javascript:void(0);">Time</a></li>
|
|
|
<li><a href="javascript:void(0);">Genre</a></li>
|
|
|
</ul>
|
|
|
|
|
|
<script type="text/html" id="_tmplModalNewServer">
|
|
|
<div id="listItemDetails" data-closable="true">
|
|
|
<div class="overlay"></div>
|
|
|
<div class="modal" style="width: auto;margin-left: auto;margin-right: auto;" data-show="true" tabindex="-1" role="dialog" aria-labelledby="listItemDetailsLabel" aria-hidden="true">
|
|
|
<div class="modal-body" style="padding: 10px 10px 0 10px;">
|
|
|
<form>
|
|
|
<fieldset>
|
|
|
<legend>Add Server</legend>
|
|
|
<label>Address</label>
|
|
|
<input type="text" placeholder="daap://domain.tld">
|
|
|
</fieldset>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-mini" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Cancel</button>
|
|
|
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i> Add & Connect</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script type="text/html" id="_tmplModalServerLogin">
|
|
|
<div id="modalServerLogin">
|
|
|
<div class="overlay"></div>
|
|
|
<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
<div class="modal-body" style="font-size: 1.2em">
|
|
|
<form>
|
|
|
<fieldset>
|
|
|
<legend>{{dmap_itemname}} login</legend>
|
|
|
<p>
|
|
|
<input type="text" class="input-large" placeholder="Login">
|
|
|
</p>
|
|
|
<p>
|
|
|
<input type="password" class="input-large" placeholder="Password">
|
|
|
</p>
|
|
|
<!--label class="checkbox">
|
|
|
<input type="checkbox"> Remember me
|
|
|
</label-->
|
|
|
</fieldset>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-mini" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Cancel</button>
|
|
|
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i> Login</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script type="text/html" id="_tmplModalServerLoading">
|
|
|
<div id="modalServerLoading">
|
|
|
<div class="overlay"></div>
|
|
|
<div class="modal">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<!-- Underscore Templates -->
|
|
|
<script type="text/html" id="_tmplPlayerView">
|
|
|
<div class="daaprPlayerTitleIndicator">{{dmap_itemname}}</div>
|
|
|
<div class="daaprPlayerInfoIndicator">{{daap_songartist}}</div>
|
|
|
<div class="daaprProgressWrap">
|
|
|
<span id="daaprProgressTimeElapsed">0:00</span>
|
|
|
<progress min="0" max="1" value="0" id="daaprPlayerProgress"></progress>
|
|
|
<span id="daaprProgressTimeRemain">-0:00</span>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script type="text/html" id="_tmplModalAboutDaapr">
|
|
|
<div id="modalAboutDaapr" data-closable="true">
|
|
|
<div class="overlay"></div>
|
|
|
<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
<div class="modal-header">
|
|
|
<h3 id="myModalLabel">About DAAPr<sup>3</sup></h3>
|
|
|
</div>
|
|
|
<div class="modal-body" style="font-size: 1.2em">
|
|
|
<p>
|
|
|
<b>DAAPr</b>, in its cubic iteration, is a web client for the
|
|
|
<a href="http://en.wikipedia.org/wiki/Digital_Audio_Access_Protocol" title="Digital Audio Access Protocol">DAAP</a> media sharing protocol.
|
|
|
It is 100% client side javascript built using <a href="http://backbonejs.org" title="Backbone.js">Backbone.js</a>,
|
|
|
<a href="http://jquery.com">jQuery</a> and <a href="http://twitter.github.com/bootstrap/" title="Twitter Bootstrap">Bootstrap</a>.
|
|
|
</p>
|
|
|
<p>
|
|
|
<a href="https://matth.lalonde.me/contact/">Feedback</a> is appreciated.
|
|
|
</p>
|
|
|
<p>
|
|
|
This software is <a href="http://en.wikipedia.org/wiki/Copyleft">Copyleft</a> 2012 <a href="https://matth.lalonde.me">Matthieu Lalonde</a> under <a href="http://www.gnu.org/copyleft/lesser.html">LGPL</a>, no guarantees whatsoever.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script type="text/html" id="_tmplModalFatal">
|
|
|
<div id="modalFatal">
|
|
|
<div class="overlay"></div>
|
|
|
<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
<div class="modal-header alert alert-error">
|
|
|
<h3 id="myModalLabel">A fatal error has occured</h3>
|
|
|
</div>
|
|
|
<div class="modal-body" style="font-size: 1.2em">
|
|
|
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-refresh"></i> Reload</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
<script type="text/html" id="_tmplListItemDetails">
|
|
|
<div id="listItemDetails" data-closable="true">
|
|
|
<div class="overlay"></div>
|
|
|
<div class="modal hide fade" data-show="true" tabindex="-1" role="dialog" aria-labelledby="listItemDetailsLabel" aria-hidden="true">
|
|
|
<div class="modal-header">
|
|
|
<!--button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button-->
|
|
|
<h4 id="myModalLabel">Song Details</h4>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<table class="table table-striped table-hover table-condensed">
|
|
|
<%
|
|
|
_.each(items, function(item) {
|
|
|
print("<tr>\n");
|
|
|
print(" <td>\n");
|
|
|
print(" " + item.title + ":\n");
|
|
|
print(" </td>\n");
|
|
|
print(" <td>\n");
|
|
|
print(" " + item.data + "\n");
|
|
|
print(" </td>\n");
|
|
|
print("</tr>\n");
|
|
|
|
|
|
});
|
|
|
%>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-mini" data-target="download" aria-hidden="true" data-loading-text="Downloading..."><i class="icon-download-alt"></i> Download</button>
|
|
|
<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
