Skip to content

Instantly share code, notes, and snippets.

@cho45
Last active Dec 14, 2015
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html, body {
width: 100%;
height: 100%;
}
.hover {
background: #000;
}
#playlist {
list-style: none;
margin: 0;
padding: 10px 0;
}
#playlist li {
border-width: 1px;
border-style: solid;
border-color: #ccc;
margin: -1px 0 0 0;
padding: 1em;
background: #efefef;
}
</style>
</head>
<body>
<div id="player"></div>
<ol id="playlist">
<script type="application/x-template" id="item">
<li>
<%= name %>
</li>
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="micro-template.js"></script>
<script src="script.js"></script>
</body>
</html>
/**
* https://github.com/cho45/micro-template.js
* (c) cho45 http://cho45.github.com/mit-license
*/
function template (id, data) {
var me = arguments.callee;
if (!me.cache[id]) me.cache[id] = (function () {
var name = id, string = /^[\w\-]+$/.test(id) ? me.get(id): (name = 'template(string)', id); // no warnings
var line = 1, body = (
"try { " +
(me.variable ? "var " + me.variable + " = this.stash;" : "with (this.stash) { ") +
"this.ret += '" +
string.
replace(/<%/g, '\x11').replace(/%>/g, '\x13'). // if you want other tag, just edit this line
replace(/'(?![^\x11\x13]+?\x13)/g, '\\x27').
replace(/^\s*|\s*$/g, '').
replace(/\n/g, function () { return "';\nthis.line = " + (++line) + "; this.ret += '\\n" }).
replace(/\x11=raw(.+?)\x13/g, "' + ($1) + '").
replace(/\x11=(.+?)\x13/g, "' + this.escapeHTML($1) + '").
replace(/\x11(.+?)\x13/g, "'; $1; this.ret += '") +
"'; " + (me.variable ? "" : "}") + "return this.ret;" +
"} catch (e) { throw 'TemplateError: ' + e + ' (on " + name + "' + ' line ' + this.line + ')'; } " +
"//@ sourceURL=" + name + "\n" // source map
).replace(/this\.ret \+= '';/g, '');
var func = new Function(body);
var map = { '&' : '&amp;', '<' : '&lt;', '>' : '&gt;', '\x22' : '&x22;', '\x27' : '&x27;' };
var escapeHTML = function (string) { return (''+string).replace(/[&<>\'\"]/g, function (_) { return map[_] }) };
return function (stash) { return func.call(me.context = { escapeHTML: escapeHTML, line: 1, ret : '', stash: stash }) };
})();
return data ? me.cache[id](data) : me.cache[id];
}
template.cache = {};
template.get = function (id) { return document.getElementById(id).innerHTML };
/**
* Extended template function:
* requires: basic template() function
* provides:
* include(id)
* wrapper(id, function () {})
*/
function extended (id, data) {
var fun = function (data) {
data.include = function (name) {
template.context.ret += template(name, template.context.stash);
};
data.wrapper = function (name, fun) {
var current = template.context.ret;
template.context.ret = '';
fun.apply(template.context);
var content = template.context.ret;
var orig_content = template.context.stash.content;
template.context.stash.content = content;
template.context.ret = current + template(name, template.context.stash);
template.context.stash.content = orig_content;
};
return template(id, data);
};
return data ? fun(data) : fun;
}
template.get = function (id) {
var fun = extended.get;
return fun ? fun(id) : document.getElementById(id).innerHTML;
};
this.template = template;
this.extended = extended;
var queue = [];
var audio;
var list = $('#playlist');
function appendQueue (file) {
if (!audio) {
audio = document.createElement('audio');
audio.controls = true;
audio.autobuffer = true;
audio.addEventListener('ended', function () {
console.log('next queue');
list.find('li:first').remove();
audio.src = queue.pop();
audio.play();
});
document.getElementById('player').appendChild(audio);
}
var uri = window.webkitURL.createObjectURL(file);
queue.push(uri);
list.append(template('item', {
name : file.name
}));
if (audio.paused) {
audio.src = queue.pop();
audio.play();
}
}
document.body.ondragover = function () { this.className = 'hover'; return false; };
document.body.ondragend = function () { this.className = ''; return false; };
document.body.ondrop = function (e) {
e.preventDefault();
this.className = '';
console.log(e.dataTransfer.files);
for (var i = 0, it; (it = e.dataTransfer.files[i]); i++) {
try {
appendQueue(it);
} catch (e) { alert(e) }
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment