Investigate if there is an existing media library we can use

[setch-l]

Investigate media libraries and share the results here for 2-3 options other than native.

[joshuatbrown]

I wasn't remembering what media libraries meant, so I asked in Slack and got some answers:

We currently use LPLinkView which lacks customization and has some problems:

• fuzzy/blurry sides in the image carousel
• can't change the color of the gray bar at the bottom
• it resizes itself, making scrolling less smooth
• always shows the URL (sometimes we don't want it to)
• takes a lot of time on the main thread
• doesn't cache anything

We're looking for something to replace it that fixes at least some of the above problems. It should:

• support a variety of media types
• allow us to customize colors (such as the gray bar at the bottom of LPLinkView)
• allow us to set the size we want so it doesn't resize itself
• allow us to show or hide the URL
• perform well
• cache media

[joshuatbrown]

I found a few projects on GitHub that we might be able to use. However, most haven't been updated for a few years, and I may have found an even better option. But first, the GitHub projects, ordered by popularity and most recently updated:

zadr/OG https://github.com/zadr/OG

NuPlay/LinkPreview https://github.com/NuPlay/LinkPreview

crspybits/SMLinkPreview https://github.com/crspybits/SMLinkPreview

There are also a few messenger apps that use previews, so we could look at their code, too. But I think the best option might be to write this ourselves, as it would give us total control over it, shouldn't take long, and can probably meet most of our requirements. Here's a recording of a prototype I built using LPLinkMetadata from the LinkPresentation framework provided by Apple:

https://github.com/planetary-social/nos/assets/59564/cafae753-3a80-431f-963e-c2d4d097039e

In this prototype, we can customize a number of things:

• purple bar color at the bottom
• show/hide the URL
• show/hide the webpage title
• corner radius
• total size of the preview
• size of the image
• font color, size, weight
• padding on all elements
• how much text to display for the title and URL (and whether to truncate)

[setch-l]

@joshuatbrown - I'm curious how this tool handles the following:

• carousel images
• videos playing in line
• Text + images

It seems like it does a good job of handling linked content.

[joshuatbrown]

@setch-l since this prototype is entirely custom, we should be able to handle those however we want. I can do a little work to show how that would work, but for one, I think a carousel is doable. I considered this and started prototyping that, but didn't quite get it to where I felt comfortable sharing. As for playing inline videos...I'd have to see if there's a good way to do that but I would expect that to be doable as well. And finally, text + images should be no problem.

[joshuatbrown]

@setch-l yeah, inline video should be no problem according to this article.

[setch-l]

Thanks @joshuatbrown! @Chardot - please take a look at Josh's prototype above for this Apple library to see if you are good with how it looks for Nos for the near term. If you are good with the option.

[Chardot]

@joshuatbrown I like what you're showing in the video, but as @setch-l says I'm more concerned about things like

• the ability to autoplay videos when they scroll into view
• display of video controls
• what's the UI for displaying audio files
• how it handles GIF autoplay, and if it shows UI for pausing autoplay
• if the media preview can be loaded in the appropiate size before the note scrolls into view, so that it doesn't move the notes below it when you're reading (as it happens with the current implementation)

Are you able to demo some of that?

[joshuatbrown]

@Chardot whether we choose one of the libraries I found or build our own, we'd have to do all of those things ourselves. Given that, it's clear to me that building our own is the best approach, since the libraries I found are extremely minimal replacements for the built-in LPLinkView and don't do anything more than it does, except maybe allow you to customize some colors. I'll also note that those projects have been inactive for 2+ years.

GIF autoplay may actually just be an iOS setting according to this article.

[joshuatbrown]

@Chardot I was able to quickly add video support to this. See attached video:

https://github.com/planetary-social/nos/assets/59564/e948811f-96d6-4f28-9971-b4e42430a718

Whether that can be customized and how much is still to be determined.

To the developers: the code is all in #989 in a totally separate Xcode project from Nos.

[Chardot]

I was able to quickly add video support to this. See attached video:

Did that video play automatically when scrolling into view, or you had to tap to play? If it did play automatically, do you think the video controls han be hidden by default?

[joshuatbrown]

@Chardot I tapped it to play. We can investigate whether autoplay is an option if that's something we want.