Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 33 commits into from
Jan 10, 2024

Conversation

ferferga
Copy link
Member

@ferferga ferferga commented Jan 8, 2024

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

This composable reactively runs requests and returns reactive BaseItemDto copies

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
With the new composables the store is indeed obsolete
Also remove audios from the resume section

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
…nts to api composables

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Rely only on axios interceptor to report the loading state

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Use the new composable in LikeButton

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
* Ensure reactivity by not destructuring itemId in most places
* Removed placeholder for Vuetify skeletons, we're not going to use them anymore with the refactors

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
* Endless loading was fixed by initializing the loading ref to false. resolveAndAdd has full control now.
* Requests loops were happening because the watcher could fire. Given the passed objects are getters,
it was difficult for it to determine if the args really changed.
Now, we map toValue and check for equality

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
This was the main thing that lead to ReferenceErrors and circular dependencies.
Wasn't refactored before to at least get the client working in production (although with quite a lot of reference errors)

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
When there's no connection, the request will be saved so it gets executed as soon as the connection to the server is recovered

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Allows for fine-grained control over the loading state. Merge skipCache with it.

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
* Remove the animation, showing only the Vuetify's background colors for each color scheme.
* Move all the splashscreen logic to App.vue, so we can hide the splashscreen only when suspense has finished resolving everything

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Do a single loop instead of 2

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
…t in progress

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
We've never been using Suspense to blcok navigation properly (which wasn't so relevant, since we didn't have many long promises like we have now)

We were wrongly swapping the key prop in the div, which effectively killed the inner suspense, not taking into account the async dependency tree

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
…ary page

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
@ferferga ferferga force-pushed the feat-offline-navigation branch 3 times, most recently from 2a043a8 to bcae7f7 Compare January 9, 2024 11:38
This is probably better than having a giant collection with another level of nesting

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
@ferferga ferferga force-pushed the feat-offline-navigation branch 2 times, most recently from a708c19 to 98df2d6 Compare January 9, 2024 17:37
@EffakT
Copy link
Contributor

EffakT commented Jan 9, 2024

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
Copy link
Contributor

Extarys commented Jan 9, 2024

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

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
@ferferga ferferga force-pushed the feat-offline-navigation branch 2 times, most recently from 9e23eeb to c68d0f1 Compare January 9, 2024 23:09
@ferferga
Copy link
Member Author

ferferga commented Jan 9, 2024

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

@EffakT
Copy link
Contributor

EffakT commented Jan 10, 2024

@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.

* Do a first pass on playback's manager watchers. The lack of sync was causing playback reporting to miss updates
* Set post as flush timer for stores cleanup

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
* Also removed unnecessary setting from VSCode settings.json (reported by Volar)

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
Copy link

sonarcloud bot commented Jan 10, 2024

Quality Gate Passed 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
Copy link

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 ferferga removed a link to an issue Jan 10, 2024
@ferferga ferferga mentioned this pull request Jan 10, 2024
@ferferga
Copy link
Member Author

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

@ferferga ferferga merged commit 5371a67 into master Jan 10, 2024
15 of 17 checks passed
@ferferga ferferga deleted the feat-offline-navigation branch January 10, 2024 09:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment