Commit graph

5 commits

Author SHA1 Message Date
infinite-persistence
7cbb7a54aa
Handle browsers that don't support IntersectionObserver (#1739)
* Remove ad-handling in videojs.jsx

Primary impetus is to remove unnecessary IntersectionObserver usage, but it should be removed anyway because:
- no longer relevant today with Adnimation's script.
- we also globally hide floating ads now, so no more invisible divs.
- the code is wrongly placed -- it's not the responsibility of the Videojs component.

* use-lazy-loaded: skip if IntersectionObserver is not supported

## Issue
Page not loading in older Safari (e.g. ipad air 2)

## Approach
Instead of using a polyfill (which comes with implementation caveats), just not apply the lazy-loading for those old browsers. Not lazy-loading is better than not loading at all, plus this is way easier to test (even by just reading the code) than testing out the polyfill implementation's caveats.

The cons is we would need the polyfill if we use it in other places in the future.

## Code Changes
Factor out the src-setting code, and use it directly when IntersectionObserver is not found.
2022-06-23 08:10:27 -04:00
infinite-persistence
afe4fee3f3 Fallback image for <FileThumbnail>
## Ticket
5457 Create file thumbnail fallback image for odysee

## Approach
Since `background-image` does not invoke an `onerror` event, create a test Image instance to have the `onerror` capability. This technique is used by majority of plugins. No additional fetch is seen with this technique.
2021-08-17 19:46:54 -07:00
infinite-persistence
f7cf21b661 useLazyLoading: start loading when near viewport
## Issue
#6332 <Thumbnail lazy-loader is too slow || Use browser-level lazy-loading>

## Change
Switch from "threshold-based check" to "viewport distance comparison" using the `rootMargin` parameter. The root is the viewport.

This change makes it closer to the native `loading="lazy"` behavior, where it starts to load when approaching the viewport. Chrome I believe uses 3000px distance -- I think 500px is a good compromise for now. Can adjust further.

## Future
- We are currently creating N instances of IntersectionObserver.
  - https://developers.google.com/web/updates/2016/04/intersectionobserver
  - "If you need to observe multiple elements, it is both possible and advised to observe multiple elements using the same IntersectionObserver instance by calling observe() multiple times."

This would probably need a refactor to make ClaimList (or something higher) own the IntersectionObserver.
2021-07-12 17:06:30 -04:00
infinite-persistence
4dc333de41
Fix blank gif avatars (#6060)
## Issue
6010: hyperchat send display issues with GIF profiles

The FreezeFrameWrapper have no `src` to freeze due to the lazy loading.

## Fix
Delay the freezing by making the lazy-load effect return a state to indicate when then `src` has been loaded.

Since the lazy-loader will `unobserve` after loading, the state will never go back to false, so we don't need to handle the case of preventing `new FreezeFrameWrapper` from being called multiple times from it's effect.
2021-05-14 11:00:07 -04:00
Sean Yesmunt
e4a3e54613 move lazy loading effect into effects/ 2021-04-14 15:25:19 -04:00
Renamed from ui/util/useLazyLoading.js (Browse further)