modal for viewing attachments in-tab

Major changes:

• Clicking image/video attachments opens them in a modal that can be closed with a click outside (or on the image itself if it's an image) or the escape button.
• Makes thumbnails smaller and lines them up nicer, because viewing them properly is easier now

Minor changes:

• Automatically get rid of thumbnails when more than 9 attachments in a post to protect from spammy posts
• middle-clicking on a NSFW-hider or video opens the media in new tab as it should
• Audio attachments automatically use full-width of status (seek bar was unusable on chrome when not full width)
• Modify default NSFW hider image to have a more suitable aspect ratio
• Change the cutoff for mobile vs desktop layout from 960px to 800px, because there's no downsides to this
• playing videos inline is an option, using contain over cover is an option

Potential TODOs (separately most likely):

• Make thumbnail size customizeable
• Bring back gif-looping -opion if deemed necessary (done)
• Open videos in a way that allow interaction with timeline at the same time (done)

added 18 commits

• 485a0612...7651290e - 17 commits from branch develop
• 8761e039 - Merge dev fix conflicts

Compare with previous version

Clicking image/video attachments opens them in a modal that can be closed with a click outside (or on the image itself if it's an image) or the escape button.

I'd really want an option to never open a modal for videos.

Playing back videos inline can't be done anymore (well you can right-click and play but that's cumbersome), might be a problem?

Yes, I feel like videos should not be ever played in a lightbox/modal (esp. if it's "mastodon-compatible audio" which audio-only video with a static image) since you can basically open videos in fullscreen instead of lightbox. It also would break experience with "mastodon-gifs" (no-audio video), watching a 2-frame 320x240 gif in a lightbox sounds like terrible UX, and so is right-clicking the "image" to play it.

Automatically get rid of thumbnails when more than 9 attachments in a post to protect from spammy posts

do they vanish completely?

I'd really want an option to never open a modal for videos.

you'd rather watch videos in thumbnails? or videos should always be full width instead of doing thumbnails? configurable I'd say

watching a 2-frame 320x240 gif in a lightbox sounds like terrible UX

while not optimal you underestimate how quick it is to open and close without stupid time wasting fade-in animations, it's really quick to have that reaction gif play out once and close it again. audio example is more relevant but thank g(argr)od mastodon is actually adding audio support..

do they vanish completely?

they show up the same way as hidden ones, so [IMAGE] or [NSFW/VIDEO] or whatever links (which still utilize modal for viewing them so less cumbersome than current hidden ones)

• 
  tall images do not get cropped, wide images do

• 
  videos aren't properly centered

• 
  images with varying aspect ratios are awkwardly stacked, impossible to predict how many rows will they take

• single/two image posts look bad

• thumbnails are too damn small, you have to click each every image to see what's depicted in the image, almost as if FE is showing off it's brand new lightbox wwww

overall attachments in TL look worse than what it is right now in develop, in my opinion/tastes

single/two image posts look bad

there's a reason why I asked if single images should behave differently vs trusting flex, I'll be experimenting with that more

thumbnails are too damn small

adjusted currently to my own preference (ie. stay out of the way mode), should be easy to make it properly configurable

almost as if FE is showing off it's brand new lightbox

it's a bit backwards, always showing full image that either takes lots of space or is scaled down to unreadable sizes anyway with awkward whitespace around it (and often unpredictable sizing) has been the way to deal with the fact that there has been no good way of viewing full images without resorting to new tabs (clunky even on desktop if you ask me, let alone mobile). current is ugly and causes issues elsewhere (which doesn't mean why my proposition should be accepted as is)

having things expanded at all times (or rather, having things fully expanded if they're the only, or the 4th/7th/10th/etc attachment) is not what I see or expect elsewhere (imageboards, twitter, mastodon, you name it), and won't work well with actual thumbnails either.

you'd rather watch videos in thumbnails? or videos should always be full width instead of doing thumbnails? configurable I'd say

yes, i'm saying to have an option. yes, given that thumbnails are good enough (like in develop) it's easier to watch them like that, and if you need detail you could go fullscreen instead of stop-gap lightbox.

while not optimal you underestimate how quick it is to open and close without stupid time wasting fade-in animations, it's really quick to have that reaction gif play out once and close it again. audio example is more relevant but thank g(argr)od mastodon is actually adding audio support..

for "gifs" it's still cumbersome - at the very least you still have to close, while with gifs you can just leave it playing for "audio" i'm still not sure because i think there was something about it having a limitation on 60 sec max or something, i'm not sure. Either way it's not in just yet AFAIK.

there's a reason why I asked if single images should behave differently vs trusting flex, I'll be experimenting with that more

adjusted currently to my own preference (ie. stay out of the way mode), should be easy to make it properly configurable

I thought attachments would still use the flex width, it's hard to understand without seeing (i just used your branch to see what it's like).

I have a proposition though, i'll post it separately.

1. Have "minimalistic attachments" mode in settings - it uses styles that you are proposing, where attachments are tucked away and occupy minimal size possible
2. In "expanded" (i.e. non-minimalistic) mode attachments appear like the do except:
   • align-items: strech so whitespace is less awkward and relevant fixes so that images are centered
   • posts with 4 images use 2:2 grid (so that you could post loss in 4 images)
   • posts with >4 images always use 3 columns, no more 4th/7th/10th big image. Left-aligned.

the "except" part could be done separately.

I have another clever idea as well to use space more nicely without being tied to tired grid layouts. You could restrict the amount of attachments per-row in javascript already instead of leaving it all the css, this way you can have each row of attachments (say 3 per row) flex their way the way they want which results in more natural usage of space instead of halves or thirds, and then handling remaining leftover attachments separately (maybe with 1 force it as 4th in the previous row and with 2 give it a new row, or just have the one leftover image take full space like currently). this would also eliminate all the guessing by attachment sizes which would also eliminate TL jumping.

TL jumping will be eliminated when we have meta information in attachment data

and it's really hard to imagine what it would look like. IMO columns look better than no columns.

I really like the way ddg or google images show the content (but not how they expand it), a columnless layout like that better handles and shows the aspect ratios of the images even if has to crop them a bit regardless.

and it looks less boring w

i remember my colleagues working on that exact thing ddg/google has and it's rather painful to implement, especially if you have container with variable width. It looks ugly when you can't fill the row completely, too.

I'll give it a go and give up if it's too much, but those shouldn't be too problematic when each row is a flex nowrap container with fixed amount of items.

WIP preview of that goog/ddg style layout, thoughts? (disabled the attachment-limit just for demonstration purposes)

Looks great! However...

1. how will it looks like if you post only first 4 images? i.e. how 1 image in a last row looks like?
2. what about flexible (mobile) layout?
3. what about view in notifications? (and inline conversations since they have just a tiny bit less space)