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 c317150a2dff8..12e667db3105f 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" @@ -154,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, }, @@ -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.videoDraggingPossible) +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..4c1f81752c724 100644 --- a/src/renderer/components/FtListVideo/FtListVideo.vue +++ b/src/renderer/components/FtListVideo/FtListVideo.vue @@ -11,6 +11,9 @@