41:7a3b9afbfb82
Anton Shestakov <av6@dwimlabs.net>, Thu, 12 Jul 2018 12:55:55 +0800
index: credits, links

next change 46:7230a1ed6e8f
previous change 40:a83c7e621ae6

index.html

Permissions: -rw-r--r--

Other formats: Feeds:
<!DOCTYPE html>
<html style="background: #000; color: #828282;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="libs/uikit/2.27.5/css/uikit.min.css">
<link rel="stylesheet" href="libs/uikit/2.27.5/css/components/progress.min.css">
<link rel="stylesheet" href="player.css">
<script src="libs/jquery/3.3.1/jquery.min.js"></script>
<script src="libs/underscore/1.9.1/underscore-min.js"></script>
<script src="libs/backbone/1.3.3/backbone-min.js"></script>
<script src="libs/rivets/0.9.4/rivets.bundled.min.js"></script>
</head>
<body>
<div class="uk-container uk-container-center gme-player">
<div class="uk-grid uk-margin-top">
<div class="uk-width-medium-1-2">
<div class="uk-scrollable-box file-box">
<ul class="uk-nav uk-nav-side" data-files></ul>
</div>
<script>
var files = [
"nsf/Shovel_Knight_Music.nsfe",
];
for (var i = 0; i < files.length; i++) {
var path = files[i];
var fn = path.slice(path.lastIndexOf('/') + 1);
var $a = $('<a>').attr('href', '#' + path).text(fn);
$('[data-files]').append($('<li>').append($a));
}
</script>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel uk-hidden" data-front>
<h3 class="uk-panel-title" rv-text="player:track:song"></h3>
<p>
<span rv-text="player:track:author"></span>
<span rv-if="player:track:game">- <span rv-text="player:track:game"></span></span>
<span rv-if="player:track:system">(<span rv-text="player:track:system"></span>)</span>
</p>
<div class="uk-button-group">
<button class="uk-button" rv-on-click="front.fastBackward"><i class="uk-icon-fast-backward"></i></button>
<button class="uk-button" rv-class-uk-active="player:track:status | is 'playing'" rv-on-click="front.play"><i class="uk-icon-play"></i></button>
<button class="uk-button" rv-class-uk-active="player:track:status | is 'stopped'" rv-on-click="front.pause"><i class="uk-icon-pause"></i></button>
<button class="uk-button" rv-on-click="front.stop"><i class="uk-icon-stop"></i></button>
<button class="uk-button" rv-on-click="front.fastForward"><i class="uk-icon-fast-forward"></i></button>
</div>
<div class="uk-button-group">
<button class="uk-button" rv-class-uk-active="player:autoplay" rv-on-click="front.toggleAutoplay" title="Autoplay"><i class="uk-icon-long-arrow-right"></i></button>
<button class="uk-button" rv-class-uk-active="player:repeat" rv-on-click="front.toggleRepeat" title="Repeat"><i class="uk-icon-repeat"></i></button>
<button class="uk-button" rv-class-uk-active="player:random" rv-on-click="front.toggleRandom" title="Random"><i class="uk-icon-random"></i></button>
</div>
<table class="uk-text-nowrap uk-margin">
<tr>
<td><span class="uk-margin-small-right" rv-text="player:track:position | time"></span></td>
<td class="uk-width-1-1">
<div class="uk-progress uk-progress-mini uk-margin-remove">
<div class="uk-progress-bar" rv-width="player:track:position | percent player:track:play_length"></div>
</div>
</td>
<td><span class="uk-margin-small-left" rv-text="player:track:play_length | time"></span></td>
</tr>
</table>
</div>
</div>
</div>
<table class="uk-table uk-table-condensed">
<thead>
<tr>
<td></td>
<td>#</td>
<td>Title</td>
<td>Author</td>
<td>Game</td>
<td>System</td>
<td>Copyright</td>
<td>Dumper</td>
<td>Length</td>
</tr>
</thead>
<tbody data-tracks></tbody>
</table>
<pre data-debug></pre>
<footer class="uk-margin-large-top uk-margin-bottom">
gme-player.js © 2016-2018 av6
<div class="uk-float-right">
code:
<a href="https://bitbucket.org/av6/gme-player.js"><i class="uk-icon-code"></i></a>
or
<a href="https://hg.dwimlabs.net/gme-player.js/"><i class="uk-icon-code"></i></a>
</div>
</footer>
</div>
<script type="text/template" id="track-template">
<tr class="uk-visible-hover" rv-class-uk-active="track:status | is 'playing'">
<td><a class="uk-link-muted uk-invisible" rv-on-click="view.play"><i class="uk-icon-play"></i></a></td>
<td rv-text="track:id"></td>
<td rv-text="track:song"></td>
<td rv-text="track:author"></td>
<td rv-text="track:game"></td>
<td rv-text="track:system"></td>
<td rv-text="track:copyright"></td>
<td rv-text="track:dumper"></td>
<td rv-text="track:play_length | time"></td>
</tr>
</script>
<script src="libgme.Oz.js"></script>
<script src="ui.js"></script>
<script src="player.js"></script>
<script>
$(function() {
var player = window.player = new Player();
var storageKey = 'gme-player-settings';
var saveKeys = ['autoplay', 'repeat', 'random'];
var changeEvents = _(saveKeys).map(function(key) { return 'change:' + key; }).join(' ');
var settings = window.localStorage.getItem(storageKey);
if (settings) {
try {
settings = JSON.parse(settings);
} catch(e) {
window.localStorage.removeItem(storageKey);
settings = null;
}
}
if (settings) {
player.set(_(settings).pick(saveKeys));
}
player.on(changeEvents, function() {
settings = _(player.toJSON()).pick(saveKeys);
window.localStorage.setItem(storageKey, JSON.stringify(settings));
});
player.on('change:track', function() {
$('title').text(player.get('track').get('song'));
});
var front = window.front = new FrontView({
el: '[data-front]',
model: player
});
var trackList = window.trackList = new TrackListView({
el: '[data-tracks]',
collection: player.tracks
});
var Router = Backbone.Router.extend({
routes: {
'*url': 'load'
},
load: function(url) {
if (!url) { return; }
loadArrayBuffer(url, function(xhr) {
player.load(xhr.response);
front.$el.removeClass('uk-hidden');
$('[data-debug]').text(JSON.stringify(player.tracks.toJSON(), undefined, 4));
if (player.tracks.length > 0) {
player.startTrack(0);
if (player.get('autoplay')) {
player.play();
}
}
}, function(xhr) {
console.error('Loading ' + url + ' failed: ' + xhr.statusText);
});
}
});
var router = window.router = new Router();
Backbone.history.start();
});
</script>
</body>
</html>