Improve the TTV LOL PRO popup's "Donate" button

[younesaassila]

I'm thinking of improving the TTV LOL PRO popup's "Donate" button by making it display the list of configured proxies in a dialog box instead of immediately redirecting to https://ttv.lol/donate, thus letting other proxy providers share their donation page via TTV LOL PRO.

Here are my initial thoughts:

• The dialog box would appear within TTV LOL PRO's popup
• The user would only see the list of proxies they use (i.e. that they have in the "Proxies" list under "Options")
• The donate page for each proxy would be queried via a GET /donate request which would either respond with a 2xx or 3xx HTTP code for success.
• When the user would click on a proxy to make a donation, the extension would open the /donate route mentioned above in a new tab (so 3xx HTTP codes would probably be preferred unless you also host your donation page on the same server)
• If a proxy doesn't provide a /donate route or if the request fails (5xx code for example), the proxy would appear grayed out in the list with a quick explanation underneath (e.g. "This proxy doesn't accept donations.").
• The proxies would be displayed in the same order as the "Proxies" list under "Options"
• The default proxy (api.ttv.lol) would have its donation link pre-coded in the extension, thus not requiring a server update to accept donations.

Any thoughts about this? @captainswain @AlyoshaVasilieva @zGato & others

[zGato]

Hello @younesaassila,

I really like the idea, although we maybe should keep the donate to TTV LOL directly, as thanks to their main work this project is really possible. Covering server costs with this would be great, but I wouldn't had any servers if TTV LOL didn't mainly exist (sorry for the bad English, I'm not native)

If you would like to test the feature, I've already enabled the /donate route on my Asia server. https://lb-as.perfprod.com/donate

Thanks,

[younesaassila]

Hello @younesaassila,

I really like the idea, although we maybe should keep the donate to TTV LOL directly, as thanks to their main work this project is really possible. Covering server costs with this would be great, but I wouldn't had any servers if TTV LOL didn't mainly exist (sorry for the bad English, I'm not native)

If you would like to test the feature, I've already enabled the /donate route on my Asia server. https://lb-as.perfprod.com/donate

Thanks,

Thanks for your feedback! By "we maybe should keep the donate to TTV LOL directly", do you mean we should keep a separate "Donate" button for the TTV LOL API? I think a possibility is to have the Donate button go directly to https://ttv.lol/donate if the TTV LOL API is the only proxy the user is using.

Also, it seems like my initial plan to use HTTP status code doesn't work for the extension. I can't detect redirects because the fetch API follows redirects by default, resulting in the PayPal request failing because of CORS (related: https://stackoverflow.com/a/46031800) I'm thinking perhaps using a JSON response like { "url": "YOUR_URL_HERE" } would be better?

[zGato]

Hello again,

Sorry if I wasn't clear enough. Something like this seems good to me. If the proxy maintainer doesn't have donations enabled it will just stay grayed out.

Regards the json response, that would be more clean as the extension already uses /ping json responses so it wouldn't be a pain to implement to compatible platforms (such as Luminous TTV)

I've just implemented this change to the Asia proxy if you want to try it out. https://lb-as.perfprod.com/donate

[younesaassila]

@zGato Thanks for the deployment for me to test out! I think your JSON response is missing the Access-Control-Allow-Origin: * header which makes it fail in TTV LOL PRO's code. I think the JSON is indeed cleaner and would avoid the user make 2 requests to the redirect URL if they were to make a donation.

For the design here what I was thinking about:

I'm currently working on a redesigned popup which currently looks like this: I was thinking the donate submenu could look something like this:

[zGato]

Hello,

I've just implemented the header, sorry! Some possible improvements:

• Instead of database icons, maybe put server icon? or similar?
• Wouldn't it be better to remove URL modificators (?hosted_button...) so it looks like a cleaner URL? (Some stripe or paypal donation URLs are super long, take a look at the PayPal TTV LOL donation URL) (If it's not possible, limit URLs characters to not overlap?)

[younesaassila]

Hello,

I've just implemented the header, sorry! Some possible improvements:

* Instead of database icons, maybe put server icon? or similar?

* Wouldn't it be better to remove URL modificators (?hosted_button...) so it looks like a cleaner URL? (Some stripe or paypal donation URLs are super long, take a look at the PayPal TTV LOL donation URL) (If it's not possible, limit URLs characters to not overlap?)

Yes of course, this is just a mock-up I did in under 2 minutes. I'll look for a better icon and trim URLs so they look cleaner