A place to discuss s9e\TextFormatter

[JoshyPHP]

You can do it here.

[ruano-a]

Thanks, I rarely saw a library so well done :)

[efast1568]

HI JoshyPHP sir
Can you guide me through a few major steps to complete MediaEmbed( youtube)? I'm currently on new "waterhole " forum.

[JoshyPHP]

I don't know how Waterhole configures the formatter. Generally you can just grab the configurator, access the MediaEmbed plugin and enable YouTube.

$configurator->MediaEmbed->add('youtube');

I see there's a getConfigurator() method, that's probably how, but you'd have to check out Waterhole's docs to be sure. https://github.com/waterholeforum/core/blob/3f3acc2caf8b593fe8235265da3515d7744215ce/src/Formatter/Formatter.php#L108
https://s9etextformatter.readthedocs.io/Plugins/MediaEmbed/Synopsis/

[efast1568]

Thanks, bro. I just read it and found that it's a different level of language for me. But it's okay, I'm doing well on Flarum.

[efast1568]

I just succeeded in adding the following code to app/Providers/WaterholeServiceProvider.php

    public function boot(){
        \Waterhole\Extend\Formatter::configure(function (Configurator $configurator) {
            $configurator->MediaEmbed;
        });
    }
 

Thank you for your guidance.

[clloyd]

Hi! Is there any reason why you've opted to wrap reddit embeds within a https://s9e.github.io iframe? I work on the embeds team at Reddit and if you had any feedback around why they couldn't be used directly it would be really useful.

[JoshyPHP]

Hi,

There isn't anything specific to Reddit but I can explain the reasons I use an iframe to embed some third party content. This applies to any site that requires a script to be run on the page in order to embed its content: Twitter/𝕏, TikTok, etc... The repository holding the iframes' code is here on GitHub and you can see it run in your browser using this example code:

<iframe data-s9e-mediaembed="twitter" allow="autoplay *" allowfullscreen="" loading="lazy" onload="let c=new MessageChannel;c.port1.onmessage=e=&gt;this.style.height=e.data+'px';this.contentWindow.postMessage('s9e:init','*',[c.port2])" scrolling="no" style="border:0;height:273px;max-width:550px;width:100%" src="https://s9e.github.io/iframe/2/twitter.min.html#463372588690202624"></iframe>
<iframe data-s9e-mediaembed="mastodon" allowfullscreen="" loading="lazy" onload="let c=new MessageChannel;c.port1.onmessage=e=&gt;this.style.height=e.data+'px';this.contentWindow.postMessage('s9e:init','*',[c.port2])" scrolling="no" style="border:0;height:300px;max-width:550px;width:100%" src="https://s9e.github.io/iframe/2/mastodon.min.html#HackerNewsBot/100181134752056592"></iframe>
<iframe data-s9e-mediaembed="tiktok" allowfullscreen="" loading="lazy" onload="let c=new MessageChannel;c.port1.onmessage=e=&gt;this.style.height=e.data+'px';this.contentWindow.postMessage('s9e:init','*',[c.port2])" scrolling="no" src="https://s9e.github.io/iframe/2/tiktok.min.html#6789430799839104261" style="border:0;height:740px;max-width:325px;width:100%"></iframe>

There are many reasons and I'm going to try to organise them by topic rather than by importance. Not all of them apply to Reddit and I'm not sure any of it can be used to improved Reddit's embed script(s).

Interference with the host page

Embedding via a third party iframe prevents third party scripts from interfering with the host page. This has multiple facets; One benefit is that buggy scripts won't mess the current page. For example, I've had spurrious bugs/reports related to messaging. I've never managed to pinpoint a single source but my working theory is that something had an event listener that captured unrelated messages sent to the host page and prevented the relevant listener from applying. It prevented embeds from being resized correctly. This particular bug disappeared when I switched to the current implementation using channel messaging which provides exclusive communication between the host and each iframe.

Another argument for running third party scripts in a separate iframe is security/privacy. Running third party scripts on a different domain effectively acts as a sandbox. Currently GitHub pages is used for convenience but AFAICT that can be done with an iframe that's entirely stored in a data: URI if necessary. I couldn't ask the library's consumers to run TikTok's script on their domain, considering their track record about respecting boundaries. Currently there are no particular security or privacy measures being taken (for instance, iframes still have access to referrers,the iframe's parent, and cross-origin resources) but actual sandboxing/policing could be used if necessary.

Loading performance

Having third party scripts sandboxed to a lazy-loaded iframe means they're only loaded and executed if the iframe is visible, and that's usually after the page has been fully loaded. The flip side is that each iframe requires its own copy of the third party script.

Graphical performance/usability

Most (all?) third party scripts used for embedding create then resize their content as early as possible, sometimes during the initial page load. This causes a number of reflow/repaint for content that may not even be visible. This can cause significant Content Layout Shift too.

The main consumers of this library are forum software. They are usually flat and display single threads with posts ordered by creation time. The typical user will often return to the same thread for updates and will just click on a link that brings them to the newest unread post. Depending on the topic (e.g. current events) you can have something like a dozen tweets above the viewport. When those tweets load, they can push the target content outside of the viewport. Lazy-loading third party content mitigates this issue, and having a unified API for all dymanically-sized content allowed me to address this issue cohesively across embed providers. For instance, on XenForo I use this function to resize all dynamically-sized iframes regardless of the origin. It completely eliminates CLS from above-the-viewport content, and by caching the last known height in the client it can even eliminate CLS from visible content on repeat viewings by creating the iframe using its last known dimensions. You can see an example on this XenForo forum.

That's most of it. Let me know if you have any questions.

[clloyd]

Thanks for this great reply, really useful context for us and it's great to see the care you're taking to maintain an awesome experience for your users.

[efast1568]

Is there a chance to use s9e to achieve the Link Preview effect for URLs?

[JoshyPHP]

Not really, as there isn't anything related to collecting metadata in the library. So yes, you can technically do it, you just have to do it almost entirely by yourself. 😐

I don't know what the best approach would be. You can stuff all the metadata you need to construct a link preview in the XML itself. This can be done at parsing time, during parsing, or after parsing by post-processing with replaceAttributes(). You'll probably want to store all the metadata for link previews in a separate db table, and in that case it may be preferable to inject it dynamically right before rendering. Or just not care about XML and all that and just post-process your HTML directly.

I assume this is related to Waterhole, and either path you choose feel free to tag me in any relevant discussion in case I have anything of value to add.