feat,fix,refactor&perf: offline navigation, full item reactivity, simplifications and bug fixes

[ferferga]

I've been out a lot due to uni, but I'm not with empty hands either :):

Fixes #2194 #2129 #1921, possibly fixes #1803 #1717 #801 #762
Improves #2028 (major leak was fixed, but there are still some on full music's player swiper and the draggable queue)

Development improvements

• Fully new data fetching. Created the new useApi and useBaseItem composables, deprecate userLibraries and itemsStore, created apiStore. Both composables are fully documented in the codebase, but here's a brief explanation:

  • Depending on the response type you must use one of another. TypeScript typings will help you use the correct one, the incorrect one will only return undefined
  • Fully reactive, both in parameters and methods (which simplified a lot the library pages and allowed us to do some cool things, like in MarkPlayedButton).
  • The Api store has 2 reactive caches:
    • Map of the id of an item with the item itself
    • Map of a function of the api, the arguments used and the response. If the response is BaseItemDto based, it will do a lookup on the first map.
  • The composables will always return cached data first (if it exists) and then, in the background, refresh it. Given they return a ComputedRef, the data will be updated automatically.
  • If there's cached data for the request a page is performing, the page will load instantly and navigation will not be blocked.
  • All the item fields and images will always be fetched, for consistency

• Fix Suspense not really blocking navigation before resolve.

• Fix development build not working

• Fix the memory leak (root source was the items store, which we couldn't properly fix back at the time). The most memory and CPU intensive parts of the application are still the library pages, but even while on them, the GC fires with light scrolling, so it looks like that all our data structures are easily GCeable.

User facing improvements

• Navigation is much quicker now
  • Although we do a best-effort lazy load, full library pages are still slow to load due to the server constraints.
• More CPU-efficient splashscreen
• Reactive everywhere (we need further server support to get updates to other events, like editing metadata descriptions)
• Best-effort offline support: I added logic for caching pending responses and executing them afterwards, but still the client is not ready to be fully offline (in fact, it can only work offline if previously it has been online), so this is still WIP.
• Fix loading bar endlessly stuck.

Some videos:

2024-01-08.18-56-23.mp4

2024-01-08.18-57-55.mp4

2024-01-08.19-01-52.mp4

[EffakT]

Was going to test #2129, and noticed when you attempt a login with incorrect password it shows the error as expected, however does not reset the "loading" state. This works as expected on nightly (aside from the infinite loading bar).

[Extarys]

@ferferga Thank you for taking the time to write all this up! Great explanation and it makes total sense. ;)

[ferferga]

@EffakT Good catch! Try now please, both issues should be fixed

[EffakT]

@ferferga Not sure if its related to the last change, it doesn't seem to be loading the video information (video/audio/subtitles) on first load of a episode page.
Triggering an ajax call on the page (clicking tick icon, or the heart icon) makes the fields appear. I can see the Items query runs again returning a single item.

Though, can confirm both the login and play status issues are sorted.

[sonarqubecloud]

Quality Gate passed

The SonarCloud Quality Gate passed, but some issues were introduced.

4 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	608eebb
Status	✅ Deployed!
Preview URL	https://96d16433.jf-vue.pages.dev
Type	🔀 Preview

View build logs
View bot logs

[ferferga]

@EffakT I fixed it as well, not caused by this PR but no hassle to include it either. Shipping now!