Consider replacing Clappr media controls

[bent0b0x]

Right now, some of the player UI is rendered by Clappr (which we style/adjust) and some (e.g. video title, wallet information, etc) is rendered by paratii-portal and react.

This is problematic! Not necessarily a deal-breaker, but problematic.

It takes some effort for us to render all of these UI elements in sync, and it is unclear as to what, exactly, our source of truth is for our UI state. Sometimes we listen to the react state, and sometimes we check the Clappr mediacontrols state (whose api is not well documented).

I experimented w/ adding some transitions/animations to the player UI earlier today, and this was very tricky due to this separation of UI control. In fact I was not able to add these transitions w/o bugs after giving it a significant effort. It may be possible to work around this problem, but if we have the time I think we should look into replacing all of Clappr's default UI controls w/ our own, which are rendered by react and controlled by our application's state.

cc @jellegerbrandy

[jellegerbrandy]

Yes, this is not completely unexpected :-/

In any case, the idea of having the "paratii player as a clappr plugin" never really became a real thing.

Just to be clear: if we indeed replace "all of clapprs conrols with our own", what remains of clappr?

(@felipegaucho , also you might be interested in this discussion)

[bent0b0x]

I'm not entirely sure, but I would think it handles video loading/playback for us quite well. All we do is pass in an ipfsNode and some additional config and we're good to go. Perhaps that is easy to do w/o Clappr, but you or @ya7ya would likely know better than I do.

But purely in terms of the UI, I do not think Clappr is providing very much value at this point, for these reasons:

• its documentation is hard to find/lacking. Sometimes I have needed to dig through the source code to find solutions
• it introduces a second model to how we manage our UI into the app
• I do not think its plugin system is very adaptable. We need to design plugins in a very specific way, and the new plugins almost need to be aware of the other plugins that have been loaded (in order to configure the UI correctly). This almost makes them not plugins at all. Plus, to design a plugin you need to be aware of the DOM structure of the clappr controls (unless we build our own custom UI from the ground up), which can change as we bump versions. This has already bitten us in #30.

For the record, if/when we do consider this a priority I do not think it will be that difficult to carry out. One of the tricky things would be deciding where the new UI would live. If we put it in paratii-portal, then paratii-mediaplayer basically becomes nothing. If we put it in paratii-mediaplayer, we lose out on sharing our UI styleguide/constants that live in the portal.

[jellegerbrandy]

For reference:

• A Proof-of-concept PR: https://github.com/Paratii-Video/paratii-portal/issues/161
• Google doc with discussion: https://docs.google.com/document/d/11WdJY8DKMhTpj03uT7a9Yr3blDg4eTDTNlsBL9Qbtr4/edit?usp=sharing_eip&ts=5a820e53

[felipegaucho]

@bent0b0x let me know if there's any reason to keep this open.