hello world!
I am currently on a gigantic Rollplay binge after an extended break. Finding and downloading the episodes in the unordered, seemingly randomized list of files that is patreon.itmejp.com was driving me insane (sorry @who ever is responsible). So I wrote a little Tampermonkey userscript to fix up the UX of the download page taking it from this to this (I can only post 3 links so here are the pics as an album: https://imgur.com/a/d7FudY3 )
TamperMonkey for FireFox is also available for FireFox on Android! I usually use chrome but for some reason you can not disable the auto playback of mp3 files which forces you to right-click/long-press > save link as instead of just clicking the button. On FireFox you can disable this behavior by setting media.play-stand-alone to false in abut:config , you may need to also remove media player plugins.
The script below should be compatible with GreaseMonkey too but I have not tested that. It does not need any invasiv permissions and is licensed under CC-BY-4.0.
// ==UserScript==
// @name beautify patreon.itmejp.com
// @namespace URI
// @version 0.1
// @description Makeing the page usable
// @author JotunKing
// @match https://patreon.itmejp.com
// @grant none
// @run-at document-end
// @license https://creativecommons.org/licenses/by/4.0/
// ==/UserScript==
(function() {
'use strict'
const content = document.getElementsByClassName('table')
if(content.length > 0) {
fixPage(content)
} else { console.log('Not logged in')}
function alphaSort(a,b) {
return a.localeCompare(b,'en',{sensitivity:'base',ignorePunctuation:true,caseFirst:false,numeric:true})
}
function alphaMapSort(a,b) {
return alphaSort(a[0],b[0])
}
function alphaMP3Sort(a,b){
return alphaSort(a.mp3,b.mp3)
}
function fixPage(content){
const File = class {
constructor(nodes){
let path = nodes[0].innerText,link = nodes[1].innerHTML
let parths = path.split('/')
this.path = path
this.link = link.match(/\/download\/[\w-]+/)
this.mp3 = parths.pop()
this.show = parths.pop()
}
}
const rows = content[0].childNodes[0].childNodes
let files = new Array(rows.length)
let shows = new Map()
for(var i = 0; i < rows.length; i++){
let x = rows[i]
let a = new File(x.childNodes)
files.push(a)
let show = shows.get(a.show)
if(show){
show.push(a)
shows.set(a.show,show)
} else {
shows.set(a.show,[a])
}
}
shows = new Map(Array.from(shows).sort(alphaMapSort))
let tableDiv = document.createElement('DIV')
tableDiv.className = "col-md-10 col-md-push-1"
shows.forEach((v,k) => {
let tag = k.replace(/[^\w]/g, "")
let d = document.createElement('DIV')
let dd = document.createElement('DIV')
let a = document.createElement('A')
a.className = "btn btn-outline-secondary btn-block"
a.setAttribute("data-toggle","collapse")
a.setAttribute("aria-expanded","false")
a.setAttribute("role","button")
a.href = "#collapse" + tag
a.innerText = k
d.appendChild(a)
dd.className = "collapse"
dd.id = "collapse" + tag
let t= document.createElement('TABLE')
t.className = "table"
t.id = tag
v.sort(alphaMP3Sort)
v.forEach(x => {
let r = t.insertRow()
r.insertCell(0).innerText = x.mp3
let l = r.insertCell(1)
let b = document.createElement('A')
b.className = "btn btn-xs btn-default"
b.innerText = "Download"
b.href = x.link
l.align = "right"
l.appendChild(b)
})
dd.appendChild(t)
d.appendChild(dd)
tableDiv.appendChild(d)
})
document.body.children[1].innerHTML = ''
document.body.children[1].appendChild(tableDiv)
}
})();
and also gives you an rss feed for the show.
Now I look like an idiot.
Thanks for the detailed answer