@@ -73,6 +74,39 @@
Download
+
diff --git a/public/index.js b/public/index.js
index a119a57..3685078 100644
--- a/public/index.js
+++ b/public/index.js
@@ -4,15 +4,17 @@
var clear = document.getElementById('search-clear')
var audio = document.getElementById('player')
var playing = document.getElementById('playing')
+ var optdrop = document.getElementById('options-drop')
+ var optmenu = document.getElementById('options')
var menu = document.getElementById('menu')
var tableHead = ' \
- | # | \
- Track | \
- Artist | \
- Album | \
- Year | \
+ # | \
+ Track | \
+ Artist | \
+ Album | \
+ Year | \
Duration | \
'
var nowPlaying = 0
@@ -35,6 +37,14 @@
var playlist = null
var pSel = document.getElementById('playlist-select')
+ // Options
+ var options = {
+ autoplay: true,
+ trackids: true,
+ sortby: 'id',
+ sortdir: 'asc',
+ }
+
window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
@@ -81,6 +91,16 @@
return time
}
+ function elementsToArray (elms) {
+ let array = []
+ for (let i in elms) {
+ let el = elms[i]
+ if (!(el instanceof Element)) continue
+ array.push(el)
+ }
+ return array
+ }
+
function httpGet (url, callback) {
return new Promise(function (resolve, reject) {
var xmlHttp = new XMLHttpRequest()
@@ -237,7 +257,7 @@
let trTag = document.createElement('tr')
trTag.className = 'track'
trTag.setAttribute('data-id', track.id)
- trTag.innerHTML += '' + track.id + ' | '
+ trTag.innerHTML += '' + (options.trackids ? track.id : (track.track || ' ')) + ' | '
trTag.innerHTML += '' + title + ' | '
trTag.innerHTML += '' + (track.artist || '') + ' | '
trTag.innerHTML += '' + (track.album || '') + ' | '
@@ -246,6 +266,32 @@
return trTag
}
+ function handleHeads () {
+ if (playlist === 0) return
+ let els = elementsToArray(document.querySelectorAll('th'))
+ let sortarr = document.createElement('span')
+ sortarr.className = 'order' + (options.sortdir === 'desc' ? ' dn' : '')
+ for (let i in els) {
+ let head = els[i]
+ let sortattr = head.getAttribute('data-sort-by')
+ if (!sortattr || sortattr === '') continue
+ if (sortattr === options.sortby) {
+ head.appendChild(sortarr)
+ }
+
+ head.addEventListener('click', function (e) {
+ if (options.sortby !== sortattr) {
+ options.sortdir = 'asc'
+ options.sortby = sortattr
+ return showTracks(pageNum)
+ }
+
+ options.sortdir = (options.sortdir === 'asc' ? 'desc' : 'asc')
+ showTracks(pageNum)
+ })
+ }
+ }
+
function constructList (tracks) {
table.innerHTML = tableHead
@@ -264,6 +310,8 @@
table.appendChild(tag)
}
+
+ handleHeads()
}
function recursionQueueList (index) {
@@ -320,7 +368,7 @@
}
if (query.trim() === '') {
- return httpGet('/api/tracks?page=' + page).then(function (data) {
+ return httpGet('/api/tracks?page=' + page + '&sort=' + options.sortby + '&sortdir=' + options.sortdir).then(function (data) {
pageNum = page
pages = data.pageCount
constructList(data.tracks)
@@ -335,7 +383,7 @@
clear.style.display = 'block'
}
- httpGet('/api/tracks/search?q=' + query + '&page=' + page).then(function (data) {
+ httpGet('/api/tracks/search?q=' + query + '&page=' + page + '&sort=' + options.sortby + '&sortdir=' + options.sortdir).then(function (data) {
pageNum = page
pages = data.pageCount
constructList(data.tracks)
@@ -372,17 +420,27 @@
}
+ var ignoreFirst = false
+ function toggleOptions () {
+ if (optdrop.className.indexOf('active') !== -1) {
+ optdrop.className = 'sidebar background'
+ } else {
+ optdrop.className = 'sidebar background active'
+ ignoreFirst = true
+ }
+ }
+
function handleSelect () {
let btn = pSel.querySelector('.dropdown-button')
- let btns = pSel.querySelectorAll('.dropdown-content div')
+ let btns = elementsToArray(pSel.querySelectorAll('.dropdown-content div'))
for (let i in btns) {
let btni = btns[i]
- if (!(btni instanceof Element)) continue
let cnt = btni.getAttribute('data-value')
btni.addEventListener('click', function (e) {
- btn.innerHTML = btni.innerHTML
+ let last = btn.innerHTML
+ let set = btni.innerHTML
switch (cnt) {
case 'all':
playlist = null
@@ -390,19 +448,72 @@
case 'queue':
playlist = 0
break
+ case 'options':
+ toggleOptions()
+ set = last
+ break
default:
showPlaylist(cnt)
}
+ btn.innerHTML = set
showTracks(pageNum)
}, false)
}
}
+ function saveOptions () {
+ if (!window.localStorage) return
+ let itms = JSON.stringify(options)
+ window.localStorage.setItem('options', itms)
+ }
+
+ function loadOptions () {
+ if (!window.localStorage) return
+ let itms = window.localStorage.getItem('options')
+ if (!itms || itms === '') return
+ let obj = {}
+ try {
+ obj = JSON.parse(itms)
+ } catch (e) {}
+ options = Object.assign({}, options, obj)
+ }
+
+ function handleOptions () {
+ let elms = elementsToArray(optmenu.querySelectorAll('input'))
+ elms = elms.concat(elementsToArray(optmenu.querySelectorAll('select')))
+ for (let i in elms) {
+ let inpt = elms[i]
+ if (!(inpt instanceof Element)) continue
+ let opt = inpt.getAttribute('name')
+ let type = inpt.getAttribute('type')
+
+ if (type == 'checkbox') {
+ inpt.checked = options[opt]
+ inpt.addEventListener('change', function (event) {
+ options[opt] = event.target.checked
+ showTracks(pageNum)
+ saveOptions()
+ })
+ } else {
+ inpt.value = options[opt]
+ inpt.addEventListener('change', function (event) {
+ options[opt] = event.target.value
+ showTracks(pageNum)
+ saveOptions()
+ })
+ }
+ }
+ }
+
input.addEventListener('keyup', function (e) {
e.which === 13 && showTracks(input.value.trim() === '' ? (pagePrev !== 0 ? pagePrev : 1) : 1)
}, false)
- audio.addEventListener('ended', playNext, false)
+ audio.addEventListener('ended', function (e) {
+ if (options.autoplay) {
+ playNext(e)
+ }
+ }, false)
clear.addEventListener('click', function () {
input.value = ''
@@ -454,7 +565,21 @@
}
})
+ var optcont = document.querySelector('.sidebar.bar')
+ document.addEventListener('click', function (event) {
+ // event.target.closest(optcont) === null
+ if (!optcont.contains(event.target) && optdrop.className.indexOf('active') !== -1) {
+ if (ignoreFirst) {
+ ignoreFirst = false
+ return
+ }
+ toggleOptions()
+ }
+ })
+
+ loadOptions()
showTracks(1)
handleHash(window.location.hash)
handleSelect()
+ handleOptions()
})()
diff --git a/src/server.js b/src/server.js
index 8b64d4f..ac941ed 100644
--- a/src/server.js
+++ b/src/server.js
@@ -17,12 +17,25 @@ const port = process.env.PORT || 3000
const router = express.Router()
+const sortfields = ['id', 'track', 'artist', 'title', 'album', 'year']
+const srchcategories = ['title', 'artist', 'album']
+
router.get('/tracks', async (req, res) => {
let page = parseInt(req.query.page) || 1
if (isNaN(page)) {
page = 1
}
+ let sort = req.query.sort
+ if (!sort || sortfields.indexOf(sort.toLowerCase()) === -1) {
+ sort = 'artist'
+ }
+
+ let sortdir = req.query.sortdir
+ if (!sortdir || (sortdir !== 'desc' && sortdir !== 'asc')) {
+ sortdir = 'asc'
+ }
+
let db = await dbPromise
let count = (await db.get('SELECT COUNT(*) FROM Track'))['COUNT(*)']
@@ -31,7 +44,7 @@ router.get('/tracks', async (req, res) => {
if (page > pageCount) page = pageCount
let offset = (page - 1) * tracksPerPage
- let tracks = await db.all('SELECT * FROM Track LIMIT ? OFFSET ?', tracksPerPage, offset)
+ let tracks = await db.all(`SELECT * FROM Track ORDER BY ${sort} ${sortdir.toUpperCase()} LIMIT ? OFFSET ?`, tracksPerPage, offset)
for (let i in tracks) {
delete tracks[i].file
@@ -42,7 +55,6 @@ router.get('/tracks', async (req, res) => {
})
})
-let srchcategories = ['title', 'artist', 'album']
router.get('/tracks/search', async (req, res) => {
let query = req.query.q
let qr = ''
@@ -72,6 +84,16 @@ router.get('/tracks/search', async (req, res) => {
if (!exact) query = `%${query}%`
+ let sort = req.query.sort
+ if (!sort || sortfields.indexOf(sort.toLowerCase()) === -1) {
+ sort = 'artist'
+ }
+
+ let sortdir = req.query.sortdir
+ if (!sortdir || (sortdir !== 'desc' && sortdir !== 'asc')) {
+ sortdir = 'asc'
+ }
+
// Paging
let page = parseInt(req.query.page) || 1
if (isNaN(page)) {
@@ -85,7 +107,8 @@ router.get('/tracks/search', async (req, res) => {
if (page > pageCount) page = pageCount
let offset = (page - 1) * tracksPerPage
- let tracks = await db.all(`SELECT * FROM Track WHERE ${qr} LIKE ? LIMIT ? OFFSET ?`, query, tracksPerPage, offset)
+ let tracks = await db.all(`SELECT * FROM Track WHERE ${qr} LIKE ? ORDER BY ${sort} ${sortdir.toUpperCase()} LIMIT ? OFFSET ?`,
+ query, tracksPerPage, offset)
for (let i in tracks) {
delete tracks[i].file