Save current queue to playlist feature (#1456)

Author: chrisuthe

src/helpers/player_menu_items.ts

@@ -12,6 +12,7 @@ import {
 } from "@/plugins/api/interfaces";
 import { authManager } from "@/plugins/auth";
 import router from "@/plugins/router";
+import { eventbus } from "@/plugins/eventbus";
 import { store } from "@/plugins/store";
 import { $t } from "@/plugins/i18n";
 
@@ -133,7 +134,7 @@ export const getPlayerMenuItems = (
   }
 
   // add 'transfer queue' menu item
-  if (playerQueue?.items) {
+  if (playerQueue?.items && playerQueue.items > 0) {
     menuItems.push({
       label: "transfer_queue",
       icon: "mdi-swap-horizontal",
@@ -162,7 +163,7 @@ export const getPlayerMenuItems = (
     });
   }
   // add 'clear queue' menu item
-  if (playerQueue?.items) {
+  if (playerQueue?.items && playerQueue.items > 0) {
     menuItems.push({
       label: "queue_clear",
       labelArgs: [],
@@ -172,6 +173,17 @@ export const getPlayerMenuItems = (
       icon: "mdi-cancel",
     });
   }
+  // add 'save queue as playlist' menu item
+  if (playerQueue?.items && playerQueue.items > 0) {
+    menuItems.push({
+      label: "save_queue_as_playlist",
+      labelArgs: [],
+      action: () => {
+        eventbus.emit("createPlaylist", { queueId: playerQueue!.queue_id });
+      },
+      icon: "mdi-playlist-plus",
+    });
+  }
 
   // add 'select source' menu item
   const selectableSources = player.source_list.filter(

src/layouts/default/CreatePlaylistDialog.vue

@@ -0,0 +1,110 @@
+<!--
+  Global dialog to create a new playlist or save a queue as a playlist.
+  Because this dialog can be called from various places throughout the app,
+  we steer its visibility through the centralized eventbus.
+-->
+<template>
+  <v-dialog
+    v-model="showDialog"
+    max-width="500"
+    @update:model-value="
+      (v) => {
+        store.dialogActive = v;
+      }
+    "
+  >
+    <v-card>
+      <v-card-title>
+        {{ $t(queueId ? "save_queue_as_playlist" : "new_playlist") }}
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          ref="nameInput"
+          v-model="playlistName"
+          :label="$t('new_playlist_name')"
+          @keyup.enter="doSave"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="showDialog = false">
+          {{ $t("close") }}
+        </v-btn>
+        <v-btn
+          variant="text"
+          color="primary"
+          :disabled="!playlistName"
+          @click="doSave"
+        >
+          {{ $t("settings.save") }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { toast } from "vue-sonner";
+
+import api from "@/plugins/api";
+import { type CreatePlaylistEvent, eventbus } from "@/plugins/eventbus";
+import { $t } from "@/plugins/i18n";
+import router from "@/plugins/router";
+import { store } from "@/plugins/store";
+
+const showDialog = ref(false);
+const playlistName = ref("");
+const queueId = ref("");
+const providerId = ref("");
+const nameInput = ref();
+
+watch(showDialog, (open) => {
+  store.dialogActive = open;
+  if (open) {
+    nextTick(() => {
+      nameInput.value?.focus();
+    });
+  }
+});
+
+onMounted(() => {
+  eventbus.on("createPlaylist", (evt: CreatePlaylistEvent) => {
+    queueId.value = evt.queueId || "";
+    providerId.value = evt.providerId || "";
+    playlistName.value = "";
+    showDialog.value = true;
+  });
+});
+
+onBeforeUnmount(() => {
+  eventbus.off("createPlaylist");
+});
+
+const doSave = async () => {
+  if (!playlistName.value) return;
+  showDialog.value = false;
+  try {
+    const playlist = queueId.value
+      ? await api.queueCommandSaveAsPlaylist(queueId.value, playlistName.value)
+      : await api.createPlaylist(playlistName.value, providerId.value);
+    toast.success($t("playlist_created"), {
+      action: {
+        label: $t("open_playlist"),
+        onClick: () => {
+          store.showFullscreenPlayer = false;
+          router.push({
+            name: "playlist",
+            params: {
+              itemId: playlist.item_id,
+              provider: playlist.provider,
+            },
+          });
+        },
+      },
+    });
+  } catch (e) {
+    toast.error(e as string);
+  }
+};
+</script>

src/layouts/default/View.vue

@@ -16,6 +16,7 @@
             <component :is="Component" />
           </router-view>
           <add-to-playlist-dialog />
+          <create-playlist-dialog />
           <item-context-menu />
         </div>
       </SidebarInset>
@@ -28,6 +29,7 @@ import AppSidebar from "@/components/navigation/AppSidebar.vue";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { store } from "@/plugins/store";
 import AddToPlaylistDialog from "./AddToPlaylistDialog.vue";
+import CreatePlaylistDialog from "./CreatePlaylistDialog.vue";
 import ItemContextMenu from "./ItemContextMenu.vue";
 </script>
 

src/plugins/api/index.ts

@@ -1228,6 +1228,16 @@ export class MusicAssistantApi {
       auto_play: autoPlay,
     });
   }
+  public queueCommandSaveAsPlaylist(
+    queueId: string,
+    name: string,
+  ): Promise<Playlist> {
+    // Save the current queue items as a new playlist.
+    return this.sendCommand("player_queues/save_as_playlist", {
+      queue_id: queueId,
+      name,
+    });
+  }
 
   // Player related functions/commands
 

src/plugins/eventbus.ts

@@ -16,9 +16,15 @@ export type ContextMenuDialogEvent = {
   showPlayMenuHeader?: boolean;
 };
 
+export type CreatePlaylistEvent = {
+  queueId?: string;
+  providerId?: string;
+};
+
 export type Events = {
   contextmenu: ContextMenuDialogEvent;
   playlistdialog: PlaylistDialogEvent;
+  createPlaylist: CreatePlaylistEvent;
   clearSelection: void;
   "homescreen-edit-toggle": void;
   "mobile-sidebar-open": void;

src/translations/en.json

@@ -819,6 +819,9 @@
     "update_metadata": "Update metadata",
     "cancel": "Cancel",
     "transfer_queue": "Transfer queue",
+    "save_queue_as_playlist": "Save queue as playlist",
+    "playlist_created": "Playlist created",
+    "open_playlist": "Open playlist",
     "power_on_player": "Power on",
     "power_off_player": "Power off",
     "powered_off_players": "Unpowered players",

src/views/LibraryPlaylists.vue

@@ -29,16 +29,15 @@ import {
   EventType,
   ProviderFeature,
 } from "@/plugins/api/interfaces";
+import { eventbus } from "@/plugins/eventbus";
 import { store } from "@/plugins/store";
 import { ListMusic } from "lucide-vue-next";
 import { onBeforeUnmount, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 defineOptions({
   name: "Playlists",
 });
 
-const { t } = useI18n();
 const updateAvailable = ref(false);
 const total = ref(store.libraryPlaylistsCount);
 const extraMenuItems = ref<ToolBarMenuItem[]>([]);
@@ -129,12 +128,7 @@ onMounted(() => {
   onBeforeUnmount(unsub);
 });
 
-const newPlaylist = async function (provId: string) {
-  const name = prompt(t("new_playlist_name"));
-  if (!name) return;
-  await api
-    .createPlaylist(name, provId)
-    .then(() => location.reload())
-    .catch((e) => alert(e));
+const newPlaylist = function (provId: string) {
+  eventbus.emit("createPlaylist", { providerId: provId });
 };
 </script>