Update watch view playlist component to auto scroll to current video

[PikachuEXE]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Fixes #1521

Description

Very strange/inconvenient to me that the playlist is not showing current video in playlist when playing a video in a playlist
This PR makes it auto scroll to current video

Screenshots

Screen.Recording.2023-04-04.at.14.19.14.mov

Testing

Test with both Local & Invidious API

• Find a playlist (long enough to have middle place)
• Play videos at the beginning, end & middle
• Ensure no strange scroll behaviour (besides scrolled to the video entry being played)

Test with different widths, sorting

Desktop

• OS:
• OS Version:
• FreeTube version:

Additional context

[PikachuEXE]

nextTick actually doesn't work for items near the end of a playlist

[efb4f5ff-1298-471a-8973-3d47447115dc]

nextTick actually doesn't work for items near the end of a playlist

LGTM, i dont think its that big of a deal because even if it's not the current video on top of the list, thumbnail of the current video playing is still in view.

[efb4f5ff-1298-471a-8973-3d47447115dc]

nextTick actually doesn't work for items near the end of a playlist

@PikachuEXE could u explain to me why u reverted in the latest commit to timeout? To me the nextTick didn't felt like it introduced a major issue with the items not working at the end of the playlist. Am i missing something here?

[PikachuEXE]

With nextTick "thumbnail of the current video playing is still in view" is false
The whole items is out of view
Visit https://youtu.be/vB1djFcT4xQ?list=PLzFTGYa_evXj7dJmh7qXNTPQdSbxattSE without cache (visit that video right after app launch or reload)

(Current is 90)

[PikachuEXE]

@absidue @ChunkyProgrammer
Please review when free~
I will try one more day to find non setTimeout solution, but that's it
It's still better than having no auto scroll in terms of UX IMO

[PikachuEXE]

I have following changes but still have setTimeout but with 0 in settings

I think setTimeout is difficult to avoid due to rendering must occur first
See https://stackoverflow.com/a/47636157/838346 for explanation

Let me know if this change is preferred or the current pushed version

[PikachuEXE]

Another way to implement this without setTimeout would be to force 3-4 video items near the current video item to be visible on start, the remaining items can stay not rendered. Tested locally
Code diff:

[absidue]

Looks good, please use created instead of mounted otherwise that value will be applied after it's already been rendered once, so it wouldn't be the initial value.

[PikachuEXE]

@absidue I assume you want me to go with the latest attempt to remove setTimeout, used created

Additional change:
Fixed issue when Invidious API updated
(watch view becomes "loaded" earlier than Local API)
Testing section updated (test with both APIs)