1
0
mirror of https://github.com/balkian/go5ears.git synced 2024-11-21 21:02:29 +00:00
go5ears/public/index.html
J.Fernando Sánchez 208a398d3b User friendly downloads for files and Playlist
The name is still missing in Firefox because it doesn't use the
"download" attribute. However it won't open a new window for playlist or
file downloads.
2013-01-25 11:50:07 +01:00

88 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' media='screen' href="css/main.css" />
<link type="text/css" href="css/ui-darkness/jquery-ui-1.10.0.custom.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type='text/javascript' src='js/knockout-2.1.0.js'></script>
<script type='text/javascript' src='js/FileSaver.min.js'></script>
<script type='text/javascript' src='https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js'></script>
<script type='text/javascript' src='js/app.js'></script>
<title>Go5Ears, listen in html5!</title>
</head>
<body>
<div id="spider"><div><img id="spiderlogo" src="img/spider.png"/></div>BETA</div>
<img src="img/skull.png" id="skull"/>
<div id="headerPage">
<audio id="audio" controls="controls" preload="auto" tabindex="0" type="audio/mpeg">No funciona el tag html5</audio>
<div class="controls">
<ul>
<li data-bind="click: playPrevious"><img class="control-button" src="img/left.png"></li>
<li data-bind="click: stop"><img class="control-button" src="img/stop.png"></li>
<li data-bind="click: resume, visible: (! isPlaying())"><img class="control-button" src="img/play.png"></li>
<li data-bind="click: pause,visible: isPlaying"><img class="control-button" src="img/pause.png"></li>
<li data-bind="click: playNext"><img class="control-button" src="img/right.png"></li>
</ul>
<ul>
<li><input type="checkbox" data-bind="checked: shuffle" /> Shuffle</li>
<li><input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll</li>
<li><input type="checkbox" data-bind="checked: repeat" /> RepeatOne</li>
</ul>
<ul>
<li><button id="clearPlaylist">Clear!</button></li>
<li><button id="savePlaylist">Save</button></li>
<li><input class="hidden" type="file" id="file" name="file"/><button id="fileSelector">Load</button></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<a href="#" tabindex="0">Listen</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 14px; display: block; overflow: auto; padding-top: 11px; padding-bottom: 11px; " role="tabpanel">
<ul id="playlist" class="sortable" data-bind="sortable: playlist">
<li class="ui-state-default" data-bind="sortableItem: { item: $data, parentList: playlist }">
<div class="list-controls">
<span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
<span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
<span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
<!-- <span class="ui-icon ui-icon-arrowthickstop-1-s" data-bind="click: downloadSong"></span> -->
<a class="ui-icon ui-icon-arrowthickstop-1-s" data-bind="attr: {href:downloadURL, download:downloadName}"></a>
</div>
<span class="list-name" data-bind="text: formattedName()">
Name - Title
</span>
<span class="deletesong ui-icon ui-icon-trash" data-bind="click: $root.removeSong">Remove</span>
</li>
</ul>
</div> <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<a href="#" tabindex="-1">Search</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 14px; display: block; overflow: auto; padding-top: 11px; padding-bottom: 11px; " role="tabpanel">
<form method="POST" action="#" data-bind="submit: getResults">
Search GoEar: <input type="search" name="goearsearch" data-bind="value: queryString">
</form>
<ul id="searchResults" class="sortable" data-bind="foreach: results">
<li class="ui-state-default">
<div class="list-controls">
<span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
<span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
<span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
<!-- <span class="ui-icon ui-icon-arrowthickstop-1-s" data-bind="click: downloadSong"></span> -->
<a class="ui-icon ui-icon-arrowthickstop-1-s" data-bind="attr: {href:downloadURL, download:downloadName}"></a>
</div>
<div class="list-name" data-bind="text: formattedName()">
Name - Title
</div>
</li>
</ul>
<button data-bind="click: searchMore, visible: currentPage() > 0 && hasMoreSearch()">Show more</button>
</div>
</div>
</div>
</body>
</html>