Commit graph

5 commits

Author SHA1 Message Date
infinite-persistence
1e0da66110 OptimizedImage: simplify implementation
It has been broken for a while, probably since the theme changes?

- Anyway, removed the effort to get the exact mounted size before requesting the image from CDN.
    - When it works, it does prevent blurry image in different screen resolutions, but it's hard to maintain and too expensive.

ChannelThumbnail: use 64 to cover both the 64 and 40 case (the cached image will work on both, potentially reducing a call). I think the size is close enough to not trigger a Core Vital size warning.
2022-03-21 13:13:25 -04:00
infinite-persistence
1e7e7a7b7a
Notifications: use fetched urls instead of resolving (#820)
* Fix avatar occasionally stuck in spaceman

## Issue
Sometimes, we'll see a channel profile (e.g. in upper-right, in channel selector) stuck in the fallback Spaceman image.

This is due to OptimizedImage always starting with a blank src, and updated later when the mounted size has been determined. ChannelThumbnail, which uses OptimizedImage, captured the `onError` due to blank src.

## Fix
Don't mount the <img> until the optimum size has been determined.

* FileThumbnail: skip resolve if thumbnail url is specified

* UriIndicator: skip resolve if channel info is specified

* Notifications: disable batch resolve + use fetched data if available + fallback to resolve if n/a

The fallback is using the individual resolve when no direct data is provided and claim is undefined.
2022-02-07 15:59:20 -05:00
saltrafael
c24153c6ca
[New Feature] Comment Emotes (#125)
* Refactor form-field

* Create new Emote Menu

* Add Emotes

* Add Emote Selector and Emote Comment creation ability

* Fix and Split CSS
2021-10-27 14:20:47 -04:00
infinite-persistence
6b2548cc49
Fix channel-selector thumbnail not updating
Recently changed to `<OptimizedImg>`, which was assuming the `src` never changes.

dejavu ... we also hit this issue when implementing the `IntersectionObserver` lazy-loading.
2021-07-21 16:38:54 +08:00
infinite-persistence
68432eef26
OptimizedImage - wrapper for CDN-optimized image
Objective:
- Get appropriately sized images to improve performance and Core Vitals score.
- Ensure images using "objectFit=cover" doesn't get stretched out if the source is large enough.
- Peg to 100px increments for better caching.

Notes:
- Skip images hosted in '/public'. If we really want to optimize it, then we'll need to provide the full path in the code, otherwise CDN lookup will fail.
2021-07-20 16:21:50 +08:00