itmeJP Community


A makeover for patreon.itmejp.com


(JotunKing) #1
 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 ):grin:

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)

    }
})();

Patreon MP3 Site
Can't find Swan Song on Mp3s
(It's Alive, It's Alive, IT'S ALIVE!!!!) #2

Nice work… https://rss.itmebot.com also does something similar without having to install a client side script :slight_smile: and also gives you an rss feed for the show.

Note: I need to poke with the backend a little after JP moved some shows around which may make the older shows appear randomized. Just had to take some personal time due to family matters but should be finished by the weekend.


(JotunKing) #3

:scream: Now I look like an idiot.

I recently became a patreon supporter and only found patreon.itmejp.com. This could mean I am just blind though^^ Maybe add a link to the rss on the old page?
RSS feed is super nice though :heart_eyes:


(It's Alive, It's Alive, IT'S ALIVE!!!!) #4

Na, just shows you care enough to help the community. You saw something that could be made better and made it better, Props to you for that :+1:

JP asked us about adding RSS feeds a while ago (Its been something I wanted to add for years as its something I would personally use) and it was just easier to create a new system for RSS then poke with the old one so that’s what we did, and adding downloads to the page that created the feed links was easy enough so that’s what we did.

BUT people don’t like change so instead of forcing people to use the new versions we leave the old versions up too (the first ever version of the download system which is created in a rush over a weekend is still live and some people still use it because that is what they want to use).

But rss.itmebot.com isn’t as widely advertised as it could be as the Patreon info page (and the welcome email iirc) hasn’t had much of a update since v2 of it went live (if I recall, you have to dig into the news feed to see JP’s post about it, but as new after shows get posted the post about the rss/download page gets pushed further down the feed). I know JP wants to get those updated with the new information soon :slight_smile:


(JotunKing) #5

:smiley: Thanks for the detailed answer :slight_smile: They should be updated, the RSS feed is sweet for podcatchers! I also learned some JS DOM manipulation (usually backend js only) coding this so that’s cool too :smiley: