Make queue items moveable via drag & drop

[Tyrritt]

I tried my hand at making queue items movable via drag & drop provided by SortableJS. Keep in mind JS is not my forte and I pretty much only do simple stuff in projects that i find useful myself.

Some parts, like the drag handle content / icont are still WIP, but I need some input.

It works fine with my testing on desktop browsers (FF, Chrome, other Chromium-based: Brave, Edge), but as soon as I switch to Responsive Design Mode it stops working. I'm stuck here and need some input (tag this PR Help Needed?)
Over the last few days I have tried the following things to no avail:

• Wrap each queue-stream-item LIT-element in the list in basic HTML Elements (e.g. a div)
• Apply the suggestions for LIT Elements mentioned in [bug] lit-html: Moving HTML comments creates issue with template system SortableJS/Sortable#2089 (comment)
• Tried pretty much all options for Sortable (like: forceFallback, swap, forceAutoFallback, ...)
• Created many dummy-event handlers to see if something fires that shouldn't and prevents the drag & drop
• Combed through issues of the last 2 years in the SortableJS repo

I did however find, that removing the ease-out transition in line 222 in src/stylesheets/style.css at least prevents the dragged item from snapping / glitching back to its original position all the time. Dropping the item on a different location does not fire the appropriate events (OnMove, OnUpdate, OnEnd). The element is not actually being moved in the DOM.

If there no solutions or obvious things I have missed come up here, I should probably open an issue about this in SortableJS.

EDIT: i just tested the deployed preview on my actual phone running Bromite on LineageOS and it seems to work just fine. Maybe it is just an issue with the Responsive Design Mode in the Desktop browser. Can somebody else please confirm if it works on their mobile device too?

[netlify]

❌ Deploy Preview for ytify failed.

Name	Link
🔨 Latest commit	282bb08
🔍 Latest deploy log	https://app.netlify.com/sites/ytify/deploys/66464358d64d900008217322

[n-ce]

Thanks for the wonderful work. I was trying this myself as you can tell by the commented code but was failed by the sticky behaviour of the elements. Then I thought something must be wrong with the queuelist container they are in so i postponed it to a refactor.

First things I noticed about this PR

• Play Next button is missing from SuperModal
• List Actions : Enqueue button is not working
• What is the dblclick event, is it a standard event or custom?
• You added another component <queue-stream-item> can you explain why? You could have used <stream-item> with a <div> to wrap it as well.
• Lighthouse performance drop
• No drag and drop behaviour getting triggered on my device. (Chrome 124, Android 14)

About the drag handle, my point on implementing one is that it increases the width of the list items which means we have to reduce the width of the original list item to maybe a 85% for drag handle to take 15% space. The icon for which could be https://remixicon.com/icon/draggable. Since we were going to wrap it into a div anyway, we could fit the drag handle into that.

<div>
  <stream-item></stream-item>
  <i class="ri-draggable"></i>
</div>

[Tyrritt]

Thanks for the feedback, I really appreciat it!
For the sake of keeping this short, let me go over your points one by one:

• Right, I made this branch before I created the PR for Play Next. I shall rebase soon
• Huh I thought I fixed this locally but it must've got eaten when I git reset one of my failed attempts. I know what causes this and have a fix ready
• dblclick is standard, see https://w3c.github.io/uievents/#event-type-dblclick
• I originally made the new component to be able to edit it and try things out without breaking stuff in other lists. I do like your idea to warp it in a div and have an additional handle component in the wrapper. I'll implement it when I can and will revert the addition of queued-stream-item
• I do not know what lighthouse is, will look into it
• This is what I was worried about and tried to describe iny initial comment. I have no idea what goes wrong and causes it.
• I will add the handle icon, thanks for the quick explanation in the wiki!

I hope I'll be able to make some changes in a few days, I am currently occupied with other things.

[n-ce]

Thanks for the feedback, I really appreciat it! For the sake of keeping this short, let me go over your points one by one:

• Right, I made this branch before I created the PR for Play Next. I shall rebase soon
• Huh I thought I fixed this locally but it must've got eaten when I git reset one of my failed attempts. I know what causes this and have a fix ready
• dblclick is standard, see https://w3c.github.io/uievents/#event-type-dblclick
• I originally made the new component to be able to edit it and try things out without breaking stuff in other lists. I do like your idea to warp it in a div and have an additional handle component in the wrapper. I'll implement it when I can and will revert the addition of queued-stream-item
• I do not know what lighthouse is, will look into it
• This is what I was worried about and tried to describe iny initial comment. I have no idea what goes wrong and causes it.
• I will add the handle icon, thanks for the quick explanation in the wiki!

I hope I'll be able to make some changes in a few days, I am currently occupied with other things.

Hey take your time! I'm currently experimenting with replacing lit components with solid-js tsx components, if all things go well it might help reduce the complications with this PR. Thank you for your work on improving this project.

[Tyrritt]

Quick update from me, I still dont have much time

• If we wrap stream-item in a div and make the handle a child of said div, the handle will appear outside the "video box". This probably looks bad
• Issue with the Enqueue All button gets resolved if I revert 00826b0, However, see the top bullet point
• I still have no clue whatsoever why on some machines / devices / ... you cannot move the items

[n-ce]

Quick update from me, I still dont have much time

• If we wrap stream-item in a div and make the handle a child of said div, the handle will appear outside the "video box". This probably looks bad
• Issue with the Enqueue All button gets resolved if I revert 00826b0, However, see the top bullet point
• I still have no clue whatsoever why on some machines / devices / ... you cannot move the items

Please rebase from the oembed branch. I'll try to attempt the rest.

ytify/src/components/StreamItem.tsx

Lines 62 to 90 in 50d7243

	<a
	class='streamItem ravel'
	href={href}
	ref={parent}
	data-id={id}
	data-title={title}
	data-author={author}
	data-channel_url={channelUrl}
	data-duration={duration}
	>
	<span>
	<img
	class='thumbnail'
	loading={imgLoadStyle}
	crossorigin='anonymous'
	onerror={handleThumbnailError}
	onload={handleThumbnailLoad}
	src={tsrc()}
	/>
	<p class='duration'>{duration}</p>
	</span>
	<div class='metadata'>
	<p class='title'>{title}</p>
	<div class='avu'>
	<p class='author'>{author}</p>
	<p class='viewsXuploaded'>{(views || '') + (uploaded ? ' • ' + uploaded.replace('Streamed ', '') : '')}</p>
	</div>
	</div>
	</a>

we are going to insert the handle just beside the metadata div, it should be hidden by default so that when the class is toggled it's visible, this would be the case for queue (and user imported playlists), a lot of things are broken right now but with continued hard work and persistence a polished and refactor could be made in time

[Tyrritt]

Rebase to oembeddone, I'll have a look at the actual code too soon and see where I can support.

Thanks for your help!

[n-ce]

I have integrated the draggable icon with the stream item to be active dynamically on queue using the draggable property passed to it.