Make images nicer

[staab]

• When clicking on an image, open it full-screen in-app
• When multiple images are inserted serially, tile them like twitter does

[manimejia]

Gon try to tackle this as "low hanging fruit" dip my toes in the water of coracle.

[manimejia]

I assume MediaSet.svelte is the template to use. I see it implemented once in NoteContentType1.svelte, supposedly for rendering "extraLinks" that don't fit in the note summary? But I don't see this actually rendering content.

https://github.com/coracle-social/coracle/blob/04f8d898554ba5511c55fabc196a9c7d12de8e51/src/app/shared/NoteContentKind1.svelte#L77

Is this a bug? maybe MediaSet.svelte is just a WIP for me to work on? or maybe I'm not properly reading the intentions of this code, and there is another way for me to see this template "in action"?

[staab]

This is all a little disorganized. MediaSet is only used in one place, and you're right, it might be dead code at this point. Feel free to move things around and re-factor. The main problem is that more kinds of media (audio, link previews, video, quotes) were added over time and conflicted with things like note truncation, show media settings, etc.

We should avoid re-organizing people's media too much, so it would probably best to identify media in sequence and group them.

[manimejia]

Hmm... looks like the "isMedia" property of URLs "discovered" in note content does not distinguish between web pages (excluding domain root?) and actual media content...

 export const urlIsMedia = (url: string) => 
!url.match(/\.(apk|docx|xlsx|csv|dmg)/) && last(url.split("://"))?.includes("/") 

https://github.com/votegold/coracle/blob/13a1f9d57726a6f580617f184475bb362d7a46b8/src/util/notes.ts#L18-L19

That complicates the matter in our (current and future) efforts to present links to images and other media in a manner visually distinct from HTML web page links. ONLY because I'm NOT smart enough to know the RIGHT regex to use for such a purposes. However I AM smart enough to see that the above code is insufficient for determining the content of outgoing links for our needs.

So... is there a preferred node module or other library we can use for this? (asking for a friend)

[staab]

Yeah, like I said it's a bit disorganized. I'm no smart enough either, I've just built what I currently have on a case by case basis, and it seems to work pretty well. Maybe a good approach would be to abstract a lot of this stuff into its own module so it's clear how it all works (I never remember where annotateMedia is or what it does). Or we could use a library, but I don't know of one that would really directly address this, since the problem is pretty diffuse and UI-dependent. Feel free to propose libs that might help, but I think because the problem is not well defined that might be tricky.

[manimejia]

LOL

util/misc

export const annotateMedia = (url: string) => {
  if (url.match(/open.spotify.com/)) {
    return {type: "spotify", url}
  } else if (url.match(/\.(jpe?g|png|gif|webp)$/)) {
    return {type: "image", url}
  } else if (url.match(/\.(mov|webm|mp4)$/)) {
    return {type: "video", url}
  } else if (url.match(/\.(wav|mp3|m3u8)$/)) {
    return {type: "audio", url}
  } else {
    return {type: "preview", url}
  }
}

I'll try to clean it all up while I'm in there.

[manimejia]

It's only a bit disorganized around the edges... mostly a well constructed labor of love. Thanks for your patience as I orient myself. Lol.