Feature: Drag and Drop

[PikachuEXE]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Continue of #8621
Closes #4872

Description

Adds drag and drop ordering when custom sort is enabled for playlist videos both in list and grid view.

Grab bar on hover (list view only)

List drag and drop

Grid drag and drop

Testing

Testing instructions

• Prepare a playlist with multiple videos
• Test drag and drop feature in user playlists, ensure only draggable on custom sort (can be dragged back to original position
• Test drag and drop NOT working on online playlists
• Test drag and drop in BOTH list or grid view, ensure videos can only be moved by dragging the grab bar
• Test dragging video title (link) and channel link to text box like top nav still makes it filled with an URL
• Ensure dragging on user playlist with 1 video is disabled

To ensure list view is not broken, ensure to test the list view in search results (video playlist channel hashtag) to ensure nothing broken

Desktop

• OS:
• OS Version:
• FreeTube version:

Additional context

https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/mouse-events-have-key-events.md ignored for mouseenter/mouseleave let me know if it's not desired

[absidue]

Thank you for picking these changes up and continuing the work on them. One thing I noticed in my testing is that it is not possible to drag a video back to the location it came from aka cancelling the move.

[absidue]

Because you can only drag after you have moved a mouse pointer over the video number it makes dragging on a touch screen impossible :(

You can test it on your phone using the steps mentioned here: #8621 (comment)

[PikachuEXE]

This is introduced to fix being able to move the item on empty area on the box
Could use some directions

[PikachuEXE]

Update: Did a fix, please check

[PikachuEXE]

To ensure list view is not broken, ensure to test the list view in search results (video playlist channel hashtag) to ensure nothing broken

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

Question: If you have a playlist on YouTube and switch the sorting to Manual (its called Custom on our side) it will replace the index numbers and with the grab bar. Do we want todo the same or keep the current approach?

[PikachuEXE]

Well if you want I can show grab bar always with index number (which this PR already looks like it for device without hover
I am fine with grab bar shown on hover/always, up to you guys...

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

Well if you want I can show grab bar always with index number

Sure lets do that.

[PikachuEXE]

@efb4f5ff-1298-471a-8973-3d47447115dc Updated
Added testing entry Ensure dragging on user playlist with 1 video is disabled

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

It behaves a bit weird with duplicates

VirtualBoxVM_h99WvRXdSz.mp4

Sometimes there is like a trailing ghost effect as seen in the first seconds of the video. My expectation would be for it to be not there and behave like in the rest of the video (dont watch the full clip you will get it after the first 10sec)

VirtualBoxVM_1Xyiz6V46x.mp4

Moving around here also looks a bit weird here

VirtualBoxVM_ubYHAJzEdZ.mp4

[PikachuEXE]

It behaves a bit weird with duplicates

Yup but still no idea why, trying to fix this week

trailing ghost effect

Cannot reproduce, you using VM? Might have graphic acceleration issue if yes

Moving around here also looks a bit weird here

Probably the transition plus rapid firing of events
Added a throttle to prevent it

[PikachuEXE]

It behaves a bit weird with duplicates

I dunno why I did not realize the playlist item ID not being used last time, probably due to lack of sleep
Fixed now