From b4171c1fc2116f00449529d9ea958193365a7dfc Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Tue, 28 Jul 2026 18:36:54 +0800 Subject: [PATCH 1/3] * Update user playlist view to show grab bar disabled when items being deleted --- .../components/FtListLazyWrapper/FtListLazyWrapper.vue | 6 ++++-- src/renderer/components/FtListVideo/FtListVideo.scss | 5 +++++ src/renderer/components/FtListVideo/FtListVideo.vue | 8 ++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue index c317150a2dff8..41588e14111f0 100644 --- a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue +++ b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue @@ -30,7 +30,8 @@ :can-move-video-down="canMoveVideoDown" :can-remove-from-playlist="canRemoveFromPlaylist" :layout="layout" - :show-grab-bar="isDraggable && layout === 'grid'" + :show-grab-bar="showGrabBar && layout === 'grid'" + :grab-bar-enabled="isDraggable && layout === 'grid'" @move-video-up="moveVideoUp" @move-video-down="moveVideoDown" @move-video-to-the-top="moveVideoToTheTop" @@ -176,7 +177,8 @@ const emit = defineEmits([ ]) const inUserPlaylist = props.playlistType === 'user' -const isDraggable = computed(() => inUserPlaylist && props.isSortOrderCustom && (props.canMoveVideoUp || props.canMoveVideoDown)) +const showGrabBar = computed(() => inUserPlaylist && props.isSortOrderCustom) +const isDraggable = computed(() => showGrabBar.value && (props.canMoveVideoUp || props.canMoveVideoDown)) const { dragVideo, moveDraggedVideo, afterDrag } = handleDragAndDrop(emit) const draggableEventHandlers = { dragstart: onDragVideo, diff --git a/src/renderer/components/FtListVideo/FtListVideo.scss b/src/renderer/components/FtListVideo/FtListVideo.scss index 3ee38f3fdf75b..166c3dc4c79a6 100644 --- a/src/renderer/components/FtListVideo/FtListVideo.scss +++ b/src/renderer/components/FtListVideo/FtListVideo.scss @@ -14,6 +14,11 @@ padding-block: 1em; } +.grabBar.grabBarDisabled { + cursor: not-allowed; + opacity: 0.3; +} + .draggable:not(.draggable:only-child):focus .grabBar, .draggable:not(.draggable:only-child):hover .grabBar { display: revert; diff --git a/src/renderer/components/FtListVideo/FtListVideo.vue b/src/renderer/components/FtListVideo/FtListVideo.vue index ebbf6b89ed71d..41b0c99d72160 100644 --- a/src/renderer/components/FtListVideo/FtListVideo.vue +++ b/src/renderer/components/FtListVideo/FtListVideo.vue @@ -11,6 +11,10 @@
Date: Wed, 29 Jul 2026 07:58:39 +0800 Subject: [PATCH 2/3] ! Fix grab bar draggable when disabled --- src/renderer/components/FtListVideo/FtListVideo.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/renderer/components/FtListVideo/FtListVideo.vue b/src/renderer/components/FtListVideo/FtListVideo.vue index 41b0c99d72160..4c1f81752c724 100644 --- a/src/renderer/components/FtListVideo/FtListVideo.vue +++ b/src/renderer/components/FtListVideo/FtListVideo.vue @@ -14,7 +14,6 @@ :class="{ grabBarDisabled: !grabBarEnabled, }" - :draggable="!grabBarEnabled" > Date: Wed, 29 Jul 2026 19:18:22 +0800 Subject: [PATCH 3/3] * Hide grab bar like sort dropdown when no of items < 2 --- src/renderer/components/FtElementList/FtElementList.vue | 6 +++--- .../components/FtListLazyWrapper/FtListLazyWrapper.vue | 6 +++--- src/renderer/views/Playlist/Playlist.vue | 8 ++++++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/FtElementList/FtElementList.vue b/src/renderer/components/FtElementList/FtElementList.vue index 1a20fcd2ac7a5..5563899bdb096 100644 --- a/src/renderer/components/FtElementList/FtElementList.vue +++ b/src/renderer/components/FtElementList/FtElementList.vue @@ -24,8 +24,8 @@ :playlist-type="playlistType" :playlist-item-id="result.playlistItemId" :dragged-video="draggedVideo" - :is-sort-order-custom="isSortOrderCustom" :is-video-dragging="isVideoDragging" + :video-dragging-possible="videoDraggingPossible" @drag-video="dragVideo" @move-dragged-video="moveDraggedVideo" @drag-video-end="afterDrag" @@ -121,11 +121,11 @@ const props = defineProps({ type: Object, default: () => ({ videoId: null, playlistItemId: null }), }, - isSortOrderCustom: { + isVideoDragging: { type: Boolean, default: false, }, - isVideoDragging: { + videoDraggingPossible: { type: Boolean, default: false, }, diff --git a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue index 41588e14111f0..12e667db3105f 100644 --- a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue +++ b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue @@ -155,11 +155,11 @@ const props = defineProps({ type: Object, default: () => ({ videoId: null, playlistItemId: null }), }, - isSortOrderCustom: { + isVideoDragging: { type: Boolean, default: false, }, - isVideoDragging: { + videoDraggingPossible: { type: Boolean, default: false, }, @@ -177,7 +177,7 @@ const emit = defineEmits([ ]) const inUserPlaylist = props.playlistType === 'user' -const showGrabBar = computed(() => inUserPlaylist && props.isSortOrderCustom) +const showGrabBar = computed(() => inUserPlaylist && props.videoDraggingPossible) const isDraggable = computed(() => showGrabBar.value && (props.canMoveVideoUp || props.canMoveVideoDown)) const { dragVideo, moveDraggedVideo, afterDrag } = handleDragAndDrop(emit) const draggableEventHandlers = { diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index 2f26538b46234..6466696de769a 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/src/renderer/views/Playlist/Playlist.vue @@ -89,8 +89,8 @@ :playlist-items-length="shownPlaylistItems.length" :can-remove-from-playlist="true" :dragged-video="draggedVideo" - :is-sort-order-custom="isSortOrderCustom" :is-video-dragging="isVideoDragging" + :video-dragging-possible="videoDraggingPossible" @drag-video="setDraggedVideo" @drag-video-end="onDragVideoEnd" @move-dragged-video="moveDraggedVideoTemporarilyThrottled" @@ -704,7 +704,11 @@ async function getNextPageLocal() { } const canMoveVideos = computed(() => { - return !playlistInVideoSearchMode.value && isSortOrderCustom.value && noPlaylistItemsPendingDeletion.value + return isUserPlaylistRequested.value && !playlistInVideoSearchMode.value && isSortOrderCustom.value && noPlaylistItemsPendingDeletion.value +}) + +const videoDraggingPossible = computed(() => { + return isUserPlaylistRequested.value && isSortOrderCustom.value && shownPlaylistItems.value.length >= 2 }) /**