Fix videos not rendering in comments

[sharunkumar]

Resolves #875
Resolves #929

ReactMarkdown seems to be creating an img component even if the underlying link is webm. So I've updated GalleryImg to handle such links for now.

also in this PR:

• isUrlVideo and isUrlImage functions updated to use mime library

[RocketRide9]

are there any measures to protect from webm videos abusing resize bug to hide video controls so you cant stop it from playing loud sound?

[sharunkumar]

What's the resize bug? 🤔

[RocketRide9]

What's the resize bug? 🤔

https://lemmy.world/post/7742328 turn off audio before playing this video

[sharunkumar]

What's the resize bug? 🤔

https://lemmy.world/post/7742328 turn off audio before playing this video

just checking this, and it seems like https://litter.catbox.moe/2daxdw.webm is a 404 right now

[RocketRide9]

What's the resize bug? 🤔

https://lemmy.world/post/7742328 turn off audio before playing this video

just checking this, and it seems like https://litter.catbox.moe/2daxdw.webm is a 404 right now

my bad. this one https://lemmy.world/post/7743736

[sharunkumar]

Not sure of the bug, cuz I can see the video controls on the webm, even on comments. Seems like lemmyui does not mute the videos in comments by default, and doesn't auto-play them either.

I checked it against my PR changes, and seems like the video auto plays, but without sound.

I am using the existing <Video /> component that doesn't show the controls (same component used to show videos on the feed)

[aeharding]

Can you remove the mime dependency? That adds over 10KB minified+gz https://bundlephobia.com/package/mime@3.0.0

[sharunkumar]

are there any alternative packages for getting mime types from urls? or any other strategy that you could suggest? currently the file extensions are just hard-coded

[aeharding]

The mime library seems to just be checking if the file ends in a given extension and mapping that to the mime type. So, I think we can just maintain our own logic with a list of video extensions. We could extract it to a helper function with an array of extensions, though. That would be less repetitive than a bunch of .endsWith :)

[sharunkumar]

I agree that the logic in that library might be the same but then we wouldn't want to have posts break on the timeline because we forgot to add some file extensions in our own helper, though?

Also, it seems like mime has a mime/lite which seems to have a cheaper bundle size (3.82kb gzip):

Would that be good enough?

[aeharding]

Would that be good enough?

It still is quite heavy - and I have some other concerns such as performance, because the function checking image or video is called quite often in the feed.

I pushed some refactor that should fix a couple more edge cases, and cleans up the logic in the post component (should make it easier to maintain), as well as some small fixes here and there (showing progress indicator where appropriate).

It still needs testing, so please check it out if you can! :)

[aeharding]

Nice :D

[aeharding]

LGTM! Thank you very much for your help!