Improvements to the forum

NotSure

Made it much smaller, does that work better or shall I remove it till I find a better way to have it display?

oh i know why! its not on ur 'home' page but rather ../categories

yes nice banner lol.

Lia

@horseplay Sorry about that, it must have rendered fine for me because I had it cached from viewing it a few times in testing. Was way too HD for it's needs.

@NotSure I have it showing on categories but also when landing on owforum.co.uk.

Glad it's looks nice :)

NotSure

@lia said in Improvements to the forum:

I have it showing on categories but also when landing on owforum.co.uk.

umm...

Lia

@notsure Oh that's the recent tab, is that home for you?

NotSure

@lia said in Improvements to the forum:

@notsure Oh that's the recent tab, is that home for you?

debugged!

Franko

@lia said in Improvements to the forum:

Can we get some hype for the new homepage banner ;)

LOVE IT! great work.

Lia

YOUTUBE EMBEDS WORK NOW :D :D :D :D

Simply copy the YT URL into the post and it will embed the video in it's place.
Videos will also play in the embed rather than redirect off platform so you don't need to faff around with tabs.

Example below :)

NotSure

@lia example test
<iframe width="560" height="315" src="

" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

NotSure

@notsure said in Improvements to the forum:

@lia example test

example test test
src="

"

just need the link it seems.

Lia

@notsure Don't need any of the embed code, just the link :)

NotSure

@lia said in Improvements to the forum:

@notsure Don't need any of the embed code, just the link :)

Lia

Plugin uses iframes for embedding which is a bit taxing once a handful are present on the page. So much so that the "Share your float playlist <3" thread is extremely slow to load.

Timestamping also seems to get ignored so will see if I can get that to be retained.

The embed script is configurable so I might see if I can have it render differently. Will test when it's quiet on the platform. Shouldn't require a reboot but I tend to avoid live changes like that anyway.

NotSure

@lia said in Improvements to the forum:

So much so that the "Share your float playlist <3" thread is extremely slow to load.

lol

Lia

@notsure Don't worry about doing anything to it, I'll find a way to make it nice. Wouldn't want to undo all that effort you put in :)

Lia

Added lazy loading into the iframes so they shouldn't all try to load the moment the page is touched.

@lia said in Improvements to the forum:

Timestamping also seems to get ignored so will see if I can get that to be retained.

Unable to modify the regex to understand the extra length of timestamp code or playlists at the end. Mostly since it's written in a way I can't parse, below is that is there currently if anyone's interested.

Regex

(?:<a.*?)?(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?!user|channel)\S*(?:(?:\/e(?:mbed))?\/|watch\?(?:\S*?&?v\=))|youtu\.be\/)([a-zA-Z0-9_-]{6,11})(?:.*?\/a>)?

Replace

<div class='embed-wrapper'><div class='embed-container'><iframe src='https://www.youtube.com/embed/$1' loading='lazy' class='lazyload' frameborder='0' allowfullscreen></iframe></div></div>

Tried modifying what appears to be the bit that checks the bit after "V=" but it seems to brick the plugin when I add bits.

([a-zA-Z0-9_-]{6,11})

Wanted to add "?" and "=" but those stop it working even if I try to escape the characters. Modifying the character length "6,11" doesn't break it but also doesn't do much if I can't get the extra chunk of URL to be read.

.

Stuck with iframes since they're the only good way to embed a video after a bit of research. If this plugin does make things a pain or slows certain threads down let me know and I'll remove it.

NotSure

@lia said in Improvements to the forum:

Regex

protip: regex blows...

https://regex101.com/

Lia

@notsure Oh god no wonder I was struggling regex is a nightmare!
Thought I had it but adding an extra match for the timestamps causes the output to duplicate D:

(?:<a.*?)?(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?!user|channel)\S*(?:(?:\/e(?:mbed))?\/|watch\?(?:\S*?&?v\=))|youtu\.be\/)([a-zA-Z0-9_?&=-]{6,11})|(?:\?t=)([a-zA-Z0-9_?&=-]{1,4})(?:.*?\/a>)?

Going to spend a bit more time looking at that, thanks for that tool though, super useful!

biell

@lia Can you provide me with the string(s) it doesn't match, but you would like it to? I believe the solution will be simpler than you expect. I might be an expert on regular expressions, but on youtube, I am not.

Also, keep in mind that you might be correctly matching the string you want, but the plugin can't handle the extra information, and so that is why it breaks. If you have a link to the plugin, I can review that also.

Lia

@biell Thanks for chipping in :)

I'm thinking it might be easier to setup the regex to fail if the link has anything after the ID so that it will just show as a link and not replace with the embed. At least that way the site won't try to always generate an embed and mess up anything else intended in the URL like a playlist.

.

The plugin seems pretty simple, it looks like it just allows you to have a template for an output then uses regex to filter out and feed certain parts.

The default regex given is:

(?:<a.*?)?(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?!user|channel)\S*(?:(?:\/e(?:mbed))?\/|watch\?(?:\S*?&?v\=))|youtu\.be\/)([a-zA-Z0-9_-]{6,11})(?:.*?\/a>)?

By default it just looks for a youtube link and then takes the ID at the end like below.

https://www.youtube.com/watch?v= f0i-KnPu4Rw

That then feeds into the template given below. $1 will be whatever was captured by ([a-zA-Z0-9_-]{6,11})

<div class='embed-wrapper'>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/$1' frameborder='0' allowfullscreen>
</iframe>
</div>
</div>

Youtube timestamps work by adding ?t= followed by the seconds from start however in embeds for some reason they use ?start=. So the regex would need to look for ?t= and generate a second capture for whatever comes after (numeric only). Link example below.

https://youtu.be/ f0i-KnPu4Rw ?t= 12

Played around in https://regex101.com/ as recommended by @NotSure using the substitution function to feed the info into the embed template. So far I can capture the data fine but none of my attempts generate a valid output under both scenarios (ID only or ID and timestamp).

This change to the template works but I can't manipulate the regex to pass data in both scenarios without 1 of the scenarios failing :(

https://www.youtube.com/embed/$1?start=0$2

Brings me back to my initial thought of having regex consider a link invalid if it has anything following the video ID.

biell

@lia So, right now, as coded, this RE will strip off the ?t=12 from your example and play the video from the start. Are you saying that you would prefer, instead, for the RE to just not match? Because, if so, then that is actually pretty easy. I will supply that in a followup so I can explain it.

If you would like the "t=" to translate to "start=" then I would need to know the name of the plugin, so I can look at the source and see what would need to change. Can you confirm that this is it: https://github.com/NicolasSiver/nodebb-plugin-ns-embed

If that is the plugin, then what we would do to handle both cases is to create multiple items in the "default-rules.json" data structure, one for no time and another for with time. If that is what you want to do, I can provide the stanzas. But, it is important to note that making more changes may make it more difficult to upgrade the plugin. Generally, I don't recommend people make these kinds of changes to plugins because it complicates security patches.