search

mad-finance / clubspace

Livestreaming app that allows Lens profiles to host multi-host livestream sessions.
https://clubspace-mad-finance.vercel.app
0 stars 1 forks source link

feature: embeddable widget #31

Closed imthatcarlos closed 12 months ago

imthatcarlos commented 1 year ago
kseikyo commented 1 year ago

Lenster currently uses iFramely to handle embeds from content body, see:

lenster/PublicationBody.tsx at main · lensterxyz/lenster

“Embedded” images, videos or audio, are only handled by their own React components through attachments.

Example urls

Known issues

React sets HTML via innerHTML. Per HTML5 specification, any <script> tag is ignored. It means that rich media from publishers like Twitter, Instagram, Facebook and TikTok will not work out-of-the-box and require a hosted iFrame.

Given that, there are a few possible solutions that I can think of right now:

  1. Create react audio component to be copy and pasted to each project we need to include.

    This is the hacky way, which definitely will break things, and we quickly run into simple issues such as:

    • Different projects handle css differently;
    • Bundle size increase due to clubspace-sdk becoming a dependency of every project;
    • The need to make tailored state handling and logic to each project it's included.
    • Styles are handled inside the project, making the best possible UX and UI.
  2. Create a React component using zoid
    • Seems like a good standard, we got paypal (and it also seems like spinamp embed url uses it).
    • Old examples, and there’s a 2 year old issue with Next.js
    • Build once, render everywhere (even on mobile using a webview)
    • It’s not reliable to make components that shift in the UI as iframe widgets (shown in comments and when still playing and not in view, stick to the bottom of the page)
    • Need to host somewhere
  3. Create a web-component
    • Many gotchas
    • Support for mobile is basically non-existent
    • It’s not reliable to make components that shift in the UI as iframe widgets
    • Need to host somewhere, probably make an npm package.
kseikyo commented 1 year ago

Both youtube and spotify (the only ones I see that support live streaming) have a 2 step process to handle widgets that happen when adding the code to embed.

  1. Load and run some iframe api script;
  2. Load and run embed script;

The first step seems to only make the new origin a trusted one, and then load the next script.

Spinamp on the other hand, when you pass a URL to an iframe or a crawler, it redirects to a /embed version, which returns the proper media type and everything, as it includes a embed.bundle.js script.

Looking into IFramely, we will have to embed the whole html by introducing the joinclubspace domain to the known domains, just like oohlala_xyz and lenstube, then it's easy to add support to our widget on lenster, as we just need to:

  1. implement the widget
  2. include it in the allowedSites
imthatcarlos commented 1 year ago

Yeah I think supporting IFramely is the move, as it’ll be easier (in theory) to support future clients. I can add the domain to the known domains later today, is that all you would need to keep going with dev? Or do we need to setup some staging env as well (we have staging.join….)

kseikyo commented 1 year ago

Don't think we need staging, as the sdk creates a clubspace on mainnet, I can just add the meta tags to the [handle] page, and create the embed/[handle] page.

This can be seen in the oohlala.xyz.

Possible problems with this (not sure, just guessing):