Merge pull request #658 from bcc-code/feature/reorder-private-playlists

feat: reorder private playlists

Author: sifferhans

components/track/TrackItem.vue

@@ -15,6 +15,7 @@ const props = withDefaults(
     addDropdownItems?: (items: DropdownMenuItem[], track: TrackModel) => void;
     isAlbumKnown?: boolean;
     origin?: string;
+    showDragHandle?: boolean;
   }>(),
   {
     isAlbumKnown: false,
@@ -94,6 +95,13 @@ const selectedTrack: Ref<TrackModel | null> = ref(null);
     class="group relative col-span-full grid cursor-pointer grid-cols-subgrid gap-3 py-3"
     @click.stop="playTrack"
   >
+    <div
+      v-if="showDragHandle"
+      class="drag-handle invisible absolute left-0 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 cursor-grab text-label-3 active:cursor-grabbing group-hover:visible group-active:visible"
+    >
+      <NuxtIcon name="icon.sort" />
+    </div>
+
     <div
       class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
     ></div>

components/track/TrackList.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useDraggable } from "vue-draggable-plus";
 import type { TrackModel } from "@bcc-code/bmm-sdk-fetch";
 
 const props = withDefaults(
@@ -11,16 +12,22 @@ const props = withDefaults(
     showThumbnails?: boolean;
     addDropdownItems?: (items: DropdownMenuItem[], track: TrackModel) => void;
     origin?: string;
+    reorder?: boolean;
   }>(),
   {
     skeletonCount: 5,
     addDropdownItems: undefined,
     trackTypeIsKnown: undefined,
     albumIsKnown: false,
     origin: "",
+    reorder: false,
   },
 );
 
+const emit = defineEmits<{
+  reorder: [tracks: TrackModel[]];
+}>();
+
 const { setQueue } = useNuxtApp().$mediaPlayer;
 
 const isTrackTypeKnown = () => {
@@ -35,10 +42,37 @@ const isTrackTypeKnown = () => {
     ) || false
   );
 };
+
+const orderableTracks = ref<TrackModel[]>([]);
+onMounted(() => {
+  if (props.tracks) {
+    orderableTracks.value = props.tracks;
+  }
+});
+const trackList = ref<HTMLOListElement>();
+useDraggable<TrackModel>(trackList, orderableTracks, {
+  animation: 200,
+  disabled: !props.reorder,
+  ghostClass: "opacity-50",
+  handle: ".drag-handle",
+  onSort({ oldIndex, newIndex }) {
+    if (oldIndex === undefined || newIndex === undefined || !props.tracks) {
+      return;
+    }
+    const tracks = [...props.tracks];
+    const [removed] = tracks.splice(oldIndex, 1);
+    if (!removed) {
+      return;
+    }
+    tracks.splice(newIndex, 0, removed);
+    emit("reorder", tracks);
+  },
+});
 </script>
 
 <template>
   <ol
+    ref="trackList"
     class="grid w-full grid-cols-tracklist grid-rows-1 gap-x-4 divide-y divide-label-separator"
   >
     <template v-if="showSkeleton">
@@ -58,6 +92,7 @@ const isTrackTypeKnown = () => {
         :add-dropdown-items="props.addDropdownItems"
         :is-album-known="props.albumIsKnown"
         :origin="props.origin"
+        :show-drag-handle="props.reorder"
         @play-track="setQueue(tracks, i, props.origin)"
       >
       </TrackItem>

pages/playlist/private/[id]/index.vue

@@ -50,6 +50,21 @@ const addDropdownItems = (items: DropdownMenuItem[], track: TrackModel) => {
     },
   });
 };
+
+const handleReorder = (tracks: TrackModel[]) => {
+  if (!collection.value || !collection.value.canEdit) {
+    return;
+  }
+  new TrackCollectionApi().trackCollectionIdPut({
+    id: collectionId,
+    updateTrackCollectionCommand: {
+      id: collectionId,
+      name: collection.value.name || "",
+      trackReferences: tracksToTrackReferences(tracks),
+    },
+  });
+  collection.value.tracks = tracks;
+};
 </script>
 
 <template>
@@ -106,11 +121,13 @@ const addDropdownItems = (items: DropdownMenuItem[], track: TrackModel) => {
     </TrackCollectionHeader>
 
     <TrackList
+      :key="`tracklist:can-edit:${collection?.canEdit}`"
       :skeleton-count="5"
       :show-skeleton="pending"
       :tracks="collection?.tracks || null"
       :add-dropdown-items="addDropdownItems"
-    >
-    </TrackList>
+      :reorder="collection?.canEdit"
+      @reorder="handleReorder"
+    />
   </div>
 </template>