Having a crack at this hackathon

Decided to have a crack at the grant for the web hackathon this afternoon
building on something around Web Monetisation, which is an emerging standard I have to admit I was pretty unaware of before today.

I've started working on a basic project which is essentially an updated version of their 'exclusive' content demo. My idea is to create a preview audio element if the user is Web Monetised for an albums tracks.

I started off doing this in React but got a bit frustrated with it after struggling to figure out how to implement the hooks via https://github.com/sharafian/react-web-monetization

So just moved to doing it in html / js, bootstrap and JQuery in the end as I'm purely prototyping and wanted to get something done fast, and React was getting in the way of that (no shade on React more self shade if anything haha).

Here it is in all it's bootstrapped glory

Wanted to keep it quite simple, and it is at the minute, but need to build on this as it's a super simple implementation with drawbacks - like for example, as it says in their own documentation, at present using the method I have used (itself an extension of the methods in the documentation for hiding content) a tech-savy user can still just go to the audio element and rename the class defining the element as hidden. So there is certainly some limitations I will try and iron out. It is early days though still tbh, plus an alert if you don't are not web monetised probably isn't the most user friendly way to display information to someone.

Github Repo : https://github.com/drnoir/Web-Monetization-Album-Track-Preview-Hiding