search

kendraio / kendraio-app

Kendraio App
https://app.kendra.io
MIT License
22 stars 6 forks source link

Kendraio Player Audiotarky integration (bounty) #169

Open dahacouk opened 3 years ago

dahacouk commented 3 years ago

We're kicking off our first of four bounty programmes in collaboration with Simon Metson from Audiotarky. Audiotarky is one of our partners in our project, Kendraio Pay, funded by Grant for the Web. Grant for the Web is founded on the belief that a healthy internet needs openness and opportunity. It's a fund by Coil, Mozilla and Creative Commons, supporting an open, fair, and inclusive standard for monetising content on the web. In this bounty, we're exploring how rights management and payments operate when working with multiple DSPs.

The bounty

For this bounty, we're rewarding the individual (or group) that carries out the tasks below, in a way that is transparent, interoperable, and easy to use.

We have an existing audio player that supports Web Monetization with Coil login - with or without a browser extension - but not yet with Audiotarky. Candidates should have some existing experience with Javascript and web API's. Once a candidate has put themselves forward, our Kendraio developers can work with them exclusively for 2 weeks (or more by mutual agreement). After the agreed period if tasks remain, another candidate may be given the opportunity instead.

Tasks

We will be very flexible with any hiccups that may occur and we will hold your hand all the way. We don't like stress here at Kendraio. We just want to see people enjoying building with Kendraio App.

Technical details

We have a technical blog post that provides background and demonstrates a simple Flow using the Kendraio Player block with the "Web Money" block. The more advanced Kendraio Player uses GraphQL to load a track list and artist payment pointers from DSP1.

Source code

Audiotarky API

Audiotarky data is available through a simple API. Currently this is not "discoverable"; you need to know the artist stub ID to find their work. There will be a genre API ~soon.

Evaluation

Kendraio Player

Kendraio Player is a media player incorporating Coil's implementation of Web Monetization and funded by Grant for the Web. The player was built in Kendraio App. Kendraio App is a low-code dashboard creator that helps build interfaces using Flows that connect to APIs with minimal code needed. The App has an audio player block (Kendraio Player) that supports Web Monetization, using either Coil's browser extension or login API -- but it is not yet integrated with the Audiotarky streaming service.

The Kendraio App let's users build interfaces from blocks. The blocks themselves are plumbed together with modern Javascript, Typescript, and are configured using JSON. We have various backend APIs, and proxy endpoints hosted using Vercel's serverless platform.

Requirements

Candidates should have some existing experience with Javascript and web APIs. Must be willing to document and talk about their experience of working on the tasks in this bounty.

Process

Once a candidate has put themselves forward, our Kendraio developers will mentor them exclusively for 2 weeks (or more, by mutual agreement). If after the agreed upon period tasks remain open, another candidate may be given the opportunity instead.

Kendraio App is a general framework for creating low-code applications. Kendraio App was originally created to service the creative/music industry to enable easy asset and rights management both locally and on third-party platforms. But what we've ended up creating is a generic data browser that plugs into remote APIs and enables highly configurable low-code interfaces to be built. And we'll use this framework as the basis of this project.

Please check out these links before accepting this mission:

As you create this project your feedback will influence the direction and capabilities of the Kendraio framework.

totorogendut commented 3 years ago

Apparently API routes still blocked by CORS @drsm79. Can we have a fix on this?

drsm79 commented 3 years ago

Hmm, can you share a URL that's not got the header? If one call works, I think they all should...

If you want to get a session, you need to:

  1. send a payment to $webmonetization.org/api/receipts/%24ilp.uphold.com%2FWRPFhabhyrxF
  2. get the payment receipt for that payment
  3. POST the receipt to the /session endpoint, this is the code the site uses:
if (document.monetization) {
    document.monetization.addEventListener("monetizationprogress", ({ detail }) => {
        if (!loaded) {
            if (detail) {
                loaded = true
                var authz = new Request(
                    "/session", 
                    { method: "POST", body: JSON.stringify(detail), headers: { "Content-Type": "application/json" } }
                );
                fetch(authz).then(function (response) {
                    // do something fun here...
                })
            }
        }
    })
}
totorogendut commented 3 years ago

This one is missing CORS header: https://www.audiotarky.com/$/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json

and I think other tracks routes (and perhaps for artists and albums too) are still missing CORS header. Mp3 files are working fine, though.

If you want to get a session, you need to:

  1. send a payment to $webmonetization.org/api/receipts/%24ilp.uphold.com%2FWRPFhabhyrxF
  2. get the payment receipt for that payment
  3. POST the receipt to the /session endpoint, this is the code the site uses:
if (document.monetization) {
    document.monetization.addEventListener("monetizationprogress", ({ detail }) => {
        if (!loaded) {
            if (detail) {
                loaded = true
                var authz = new Request(
                    "/session", 
                    { method: "POST", body: JSON.stringify(detail), headers: { "Content-Type": "application/json" } }
                );
                fetch(authz).then(function (response) {
                    // do something fun here...
                })
            }
        }
    })
}

any idea to implement this from Kendraio side?

lukestanley commented 3 years ago

@drsm79 what does the endpoint return and should a session ID be stored somewhere afterwards? When does it expire?

This is a little related to the analytics work I'm doing, which currently extends the Web Money block. But the endpoint is different from the statistics endpoint, that would need the data. Also the event only needs to fire once, then presumably it would have to put a returned session ID somewhere for use in the next audio track download request (emit output from the block? save to memory or localstorage?). I'm still thinking about how to make something reusable and thoughts are welcome.

drsm79 commented 3 years ago

At the moment it just sets a secure session cookie in the browser if the payment is legit, and returns a 429 payment required if not. It’s deliberately simplistic.

On 30 Mar 2021, at 17:58, lukestanley @.***> wrote:

 @drsm79 what does the endpoint return and should a session ID be stored somewhere afterwards? When does it expire?

This is a little related to the analytics work I'm doing. But the endpoint is different from the statistics endpoint, that would need the data. Also the event only needs to fire once, then presumably it would have to put a returned session ID somewhere for use in the next audio track download request (emit output from the block? save to memory or localstorage?). I'm still thinking about how to make something reusable and thoughts are welcome.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

lukestanley commented 3 years ago

That's nice, in that case, since no new data flow is needed, I'm thinking that adapting the analytics implementation to conditionally share to a specified URL could potentially be a clean solution but I think to be fair, it need not be part of this bounty and I'd be happy to make the modifications needed to remove the automated notice for Web Monetization users who are in good standing.

But for this bounty, it would be ideal to get the flow working from the frontend, without Cloudflare Workers, and with CORs issues fixed if possible.

On Tue, 30 Mar 2021, 18:25 Simon Metson, @.***> wrote:

At the moment it just sets a secure session cookie in the browser if the payment is legit, and returns a 429 payment required if not. It’s deliberately simplistic.

On 30 Mar 2021, at 17:58, lukestanley @.***> wrote:

 @drsm79 what does the endpoint return and should a session ID be stored somewhere afterwards? When does it expire?

This is a little related to the analytics work I'm doing. But the endpoint is different from the statistics endpoint, that would need the data. Also the event only needs to fire once, then presumably it would have to put a returned session ID somewhere for use in the next audio track download request (emit output from the block? save to memory or localstorage?). I'm still thinking about how to make something reusable and thoughts are welcome.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kendraio/kendraio-app/issues/169#issuecomment-810440877, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACK336N4IDSPWZSUTJHGPLTGICR5ANCNFSM4YTPDIZQ .

lukestanley commented 3 years ago

I'll make a new issue for "session pinging".

totorogendut commented 3 years ago

any ETA for CORS fix @drsm79 ?

drsm79 commented 3 years ago

The json is getting served by my static provider, which is why CORS isn't there. I'll add a little proxy tonight/tomorrow for API calls, will probably shift them into /api/ as a result.

drsm79 commented 3 years ago

https://www.audiotarky.com/api/tracks/index.json https://www.audiotarky.com/api/artists/index.json

should have CORS working. The paging isn't right - it has $ instead of api. Need to think how things get generated.

totorogendut commented 3 years ago

https://www.audiotarky.com/api/tracks/index.json https://www.audiotarky.com/api/artists/index.json

should have CORS working. The paging isn't right - it has $ instead of api. Need to think how things get generated.

Great, thanks!

One more thing - could we have the API to refer pathname only? Instead of https://www.audiotarky.com/$/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json we need something that expose the pathname only like /api/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json.

Lately I found HTTP Flow block in Kendraio app doesn't seem to able to make dynamic HTTP call with full endpoint, and JMESpath doesn't seem to be able to split string either (currently I'm using my CF Workers to split string which isn't ideal).

So this is working

{
  "type": "http",
  "method": "get",
  "endpoint": {
    "protocol": "https://",
    "host": "www.audiotarky.com",
    "valueGetters": {
      "pathname": "context.queryParams.api"
    }
  }
}

However something that dynamically query full endpoint like this doesn't seem to be working:

{
  "type": "http",
  "method": "get",
  "valueGetters": {
    "endpoint": "context.queryParams.api"
  }
}

Or maybe there's a plan for improvement from Kendraio side @dahacouk @darrenmothersele ?

Edit: For reference, this is modified Audiotarky tracks API that exposes the pathname only (look up for the "api_page2") https://kendraio-audiotarky.prognovel.workers.dev/tracks

drsm79 commented 3 years ago

Yeah, that should be easy enough

On 2 Apr 2021, at 03:45, ProgNovel @.***> wrote:

 https://www.audiotarky.com/api/tracks/index.json https://www.audiotarky.com/api/artists/index.json

should have CORS working. The paging isn't right - it has $ instead of api. Need to think how things get generated.

Great, thanks!

One more thing - could we have the API to refer pathname only? Instead of https://www.audiotarky.com/$/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json we need something that expose the pathname only like /api/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json.

Lately I found HTTP Flow block in Kendraio app doesn't seem to able to make dynamic HTTP call with full endpoint, and JMESpath doesn't seem to be able to split string either (currently I'm using my CF Workers to split string which isn't ideal).

So this is working

{ "type": "http", "method": "get", "endpoint": { "protocol": "https://", "host": "www.audiotarky.com", "valueGetters": { "pathname": "context.queryParams.api" } } } However something like this doesn't seem to be working:

{ "type": "http", "method": "get", "valueGetters": { "endpoint": "context.queryParams.api" } } Or maybe there's a plan for improvement from Kendraio side @dahacouk @darrenmothersele ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

totorogendut commented 3 years ago

Yeah, that should be easy enough

Many thanks!

totorogendut commented 3 years ago

Still waiting more update from Audiotarky so that the player can use Audiotarky API directly without CF Workers.

In the meantime, the player version which can fetch track metadata directly from the player: Kendraio Player with Track info

I wonder how far I am from completing this bounty @dahacouk ? Is there something else I need to focus on?

EDIT: In case the attached URL showing 400 error, please download this JSON config and paste them to Workflow Builder kendraio-player-with-metadata.zip

drsm79 commented 3 years ago

@ProgNovel https://www.audiotarky.com/api/artists/page/2/index.json :D let me know if that suits.

totorogendut commented 3 years ago

As for mp3 files and track cover doesn't need to be changed @drsm79 They use different blocks so don't have the same limitation as API JSON (in fact, they now resulting in 404 error).

Can you revert back the changes to mp3 files and cover images using full path https://www.audiotarky.com/$/...? Mainly for url and image in these https://www.audiotarky.com/api/artists/bruno-muerte/index.json https://www.audiotarky.com/api/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json https://www.audiotarky.com/api/tracks/index.json

As for other in the API it seems to be working fine. It's ready to replace the workaround CF Workers. Thanks!

drsm79 commented 3 years ago

Doh, my implementation was too simplistic. Fixed now.

totorogendut commented 3 years ago

https://www.audiotarky.com/api/artists/bruno-muerte/index.json https://www.audiotarky.com/api/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json

Seems to be down for hours @drsm79

Edit: Nevermind. Seems metadata from tracks route good enough for now (?)

totorogendut commented 3 years ago

Finally, player version that both fetch Audiotarky tracks and their metadata as per bounty task (without CF Workers workaround):

Kendraio player

URL sharing doesn't seem to work anymore at this point due to the size of the Workflow config. I'm uploading the JSON so it can be tested by simply paste'd it to the Workflow builder. kendraio-player-with-metadata-full.zip

drsm79 commented 3 years ago

Apologies, should be working now

On Tue, 6 Apr 2021 at 18:45, ProgNovel @.***> wrote:

https://www.audiotarky.com/api/artists/bruno-muerte/index.json

https://www.audiotarky.com/api/artists/a-sol-mechanic-x-handbook/mindfulness/all-along/index.json

Seems to be down for hours @drsm79 https://github.com/drsm79

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kendraio/kendraio-app/issues/169#issuecomment-814309889, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAZNGR4OOXQ35ETQQIM3VTTHNCDJANCNFSM4YTPDIZQ .

dahacouk commented 3 years ago

Hi Radhy (@ProgNovel), @lukestanley is in the process of integrating what you have built. We are all very, very happy with the work you have done on this bounty. And we'd love to pay you the $500 USD. There are still a few things to sort out but as I understand it this is mainly with the issue of @drsm79 and the robot voice. 😉 And it might be nice to get a bloggable summary from you of what you did and what you thought about fulfilling this bounty. But neither of those should get in the way of paying out the bounty. As I stated in the bounty text, I'd like to pay you through Open Collective. So you would have to create an account there and submit an expense request. We may need to convert the USD to EUR for the accounting. This may take a little working out, but the system is well used and should not be a problem. If you want to chat with me directly please message me on Telegram or wherever. I have the same handle everywhere. Cheers Daniel

totorogendut commented 3 years ago

Thanks @dahacouk !

I've submitted the expense on OpenCollective for €417.82 (which is equivalent to $500 according to Google). As for the blog post, I'll write it on Web Monetization Community in a few days. Cheers!

totorogendut commented 3 years ago

Is there any ETA that my expense request to be accepted @dahacouk ? Seems the balance on Kendraio OpenCollective is not sufficient for the expense I submitted yesterday, so it's still pending. https://opencollective.com/kendraio/expenses/38582

It's my first time on OpenCollective so I'm not sure whether it should be automatic or there are processes required for the expense I submitted to go through.

Also, there might be a slight mistake when I put my address information on my expense request--I don't know if it would become a problem or not.

By the way, the summary intended for blog post is halfway on being completed. If not today it should be up the next day on Web Monetization community.

totorogendut commented 3 years ago

Summary on Web Monetization community has been posted: https://community.webmonetization.org/radhyr/afterthought-on-integrating-audiotarky-api-into-kendraio-app-16dk

Please let me know if I made mistakes on the blog post @dahacouk.

dahacouk commented 3 years ago

Hey Radhy (@ProgNovel)! The truth is you are just too fast for me! 😉 I need to figure out how to do the Open Collective thing. I'm sure you've given all the information correctly. Please give me a week as I need to checking with accounting and make sure I do it right.

Thanks for the report. I'll read through over the next few days.

Cheers Daniel

drsm79 commented 3 years ago

Great write up, thanks!

On 17 Apr 2021, at 07:44, ProgNovel @.***> wrote:

 Summary on Web Monetization community has been posted: https://community.webmonetization.org/radhyr/afterthought-on-integrating-audiotarky-api-into-kendraio-app-16dk

Please let me know if I made mistakes on the blog post @dahacouk.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

totorogendut commented 3 years ago

Hey Radhy (@ProgNovel)! The truth is you are just too fast for me! 😉 I need to figure out how to do the Open Collective thing. I'm sure you've given all the information correctly. Please give me a week as I need to checking with accounting and make sure I do it right.

Thanks for the report. I'll read through over the next few days.

Cheers Daniel

Sure, no problem. Please take your time 😀

Great write up, thanks! … On 17 Apr 2021, at 07:44, ProgNovel @.***> wrote:  Summary on Web Monetization community has been posted: https://community.webmonetization.org/radhyr/afterthought-on-integrating-audiotarky-api-into-kendraio-app-16dk Please let me know if I made mistakes on the blog post @dahacouk. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

👍👍👍