From 46ab70b22793d37bad4b90f4b2ff3181c81bea10 Mon Sep 17 00:00:00 2001
From: "Brian C. Arnold" <connect@brian-arnold.dev>
Date: Fri, 25 Nov 2022 13:42:59 -0500
Subject: [PATCH] feat(playlist): (Flattened Vue 2.x via rebase)

Temporary use of CollectionTabs for playlist for testing.
Need to create new component for playlist
 * Need to display in list
 * Need to be able to drag/reorder

Got playlists working for the most part. (the skeleton display isn't quite right, though.)

Remove showing of "loading" skel during moving items.

Removed code smells.

Fixed some linting issues.

Caused an issue while trying to clean things up. Fixed now.

Got saving play queue to playlist working. :-)

Fixed lint issues.
---
 frontend/components/Buttons/QueueButton.vue |  49 +++++-
 frontend/components/Item/CollectionTabs.vue |   7 +-
 frontend/components/Item/PlaylistItems.vue  | 177 ++++++++++++++++++++
 frontend/pages/item/_itemId/index.vue       |   3 +
 frontend/store/items.ts                     | 157 ++++++++++++++++-
 5 files changed, 381 insertions(+), 12 deletions(-)
 create mode 100644 frontend/components/Item/PlaylistItems.vue

diff --git a/frontend/components/Buttons/QueueButton.vue b/frontend/components/Buttons/QueueButton.vue
index 75231a91e00..7dd75b67de0 100644
--- a/frontend/components/Buttons/QueueButton.vue
+++ b/frontend/components/Buttons/QueueButton.vue
@@ -75,7 +75,25 @@
         <draggable-queue v-if="menu || !destroy" class="ml-4" />
       </v-list>
       <v-spacer />
-      <v-card-actions class="d-flex justify-space-between">
+      <v-card-text v-if="creatingPlaylist" class="py-1">
+        <v-form @submit.prevent="handleSubmit">
+          <v-text-field
+            v-model="playlistName"
+            single-line
+            :label="$t('name')"
+            append-outer-icon="mdi-content-save"
+            hide-details="auto"
+            prepend-icon="mdi-cancel"
+            class="py-1"
+            @click:append-outer="saveQueueAsPlaylist"
+            @click:prepend="cancelSaveQueue"
+          />
+        </v-form>
+      </v-card-text>
+      <v-card-actions
+        v-if="!creatingPlaylist"
+        class="d-flex justify-space-between"
+      >
         <v-tooltip top>
           <template #activator="{ on: tooltip }">
             <v-btn icon v-on="tooltip" @click="playbackManager.stop">
@@ -86,7 +104,7 @@
         </v-tooltip>
         <v-tooltip top>
           <template #activator="{ on: tooltip }">
-            <v-btn icon disabled v-on="tooltip">
+            <v-btn icon v-on="tooltip" @click="askForPlaylistName">
               <v-icon>mdi-content-save</v-icon>
             </v-btn>
           </template>
@@ -102,7 +120,7 @@
 import { BaseItemDto } from '@jellyfin/client-axios';
 import Vue from 'vue';
 import { mapStores } from 'pinia';
-import { playbackManagerStore } from '~/store';
+import { authStore, playbackManagerStore } from '~/store';
 import { InitMode } from '~/store/playbackManager';
 import { getTotalEndsAtTime } from '~/utils/time';
 
@@ -121,11 +139,13 @@ export default Vue.extend({
     return {
       menu: false,
       destroy: false,
-      timeout: undefined as undefined | number
+      timeout: undefined as undefined | number,
+      playlistName: null as string | null,
+      creatingPlaylist: false
     };
   },
   computed: {
-    ...mapStores(playbackManagerStore),
+    ...mapStores(playbackManagerStore, authStore),
     sourceText: {
       get(): string {
         /**
@@ -204,7 +224,24 @@ export default Vue.extend({
     }
   },
   methods: {
-    getTotalEndsAtTime
+    getTotalEndsAtTime,
+    askForPlaylistName() {
+      this.creatingPlaylist = true;
+    },
+    async saveQueueAsPlaylist() {
+      try {
+        await this.$nuxt.$api.playlists.createPlaylist({
+          name: this.playlistName as string,
+          ids: this.playbackManager.queue,
+          userId: this.auth.currentUserId
+        });
+      } finally {
+        this.creatingPlaylist = false;
+      }
+    },
+    cancelSaveQueue() {
+      this.creatingPlaylist = false;
+    }
   }
 });
 </script>
diff --git a/frontend/components/Item/CollectionTabs.vue b/frontend/components/Item/CollectionTabs.vue
index 80f07dce5c9..28b41589341 100644
--- a/frontend/components/Item/CollectionTabs.vue
+++ b/frontend/components/Item/CollectionTabs.vue
@@ -42,8 +42,11 @@ export default Vue.extend({
   computed: {
     ...mapStores(itemsStore),
     children(): Record<string, BaseItemDto[]> | undefined {
-      if (this.items.getChildrenOfParent(this.item.Id)?.length) {
-        return groupBy(this.items.getChildrenOfParent(this.item.Id), 'Type');
+      if (this.items.getChildrenOfParentCollection(this.item.Id)?.length) {
+        return groupBy(
+          this.items.getChildrenOfParentCollection(this.item.Id),
+          'Type'
+        );
       }
     }
   },
diff --git a/frontend/components/Item/PlaylistItems.vue b/frontend/components/Item/PlaylistItems.vue
new file mode 100644
index 00000000000..a2acfe41c09
--- /dev/null
+++ b/frontend/components/Item/PlaylistItems.vue
@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <h1 v-if="!children && !loading" class="text-h5 text-center">
+      {{ $t('collectionEmpty') }}
+    </h1>
+    <skeleton-item-grid v-if="loading" :view-type="''" />
+
+    <v-list v-if="!!children" color="transparent" two-line>
+      <v-list-item-group class="list-group">
+        <draggable
+          v-if="children.length > 0"
+          v-bind="dragOptions"
+          v-model="children"
+          :move="checkMove"
+          class="list-draggable"
+        >
+          <v-hover
+            v-for="(item, index) in children"
+            :key="`${item.Id}-${index}`"
+            v-slot="{ hover }"
+          >
+            <v-list-item ripple @click="playQueueFrom(index)">
+              <v-list-item-action
+                v-if="!hover"
+                class="list-group-item d-flex justify-center d-flex transition"
+                :class="{ 'primary--text font-weight-bold': isPlaying(item) }"
+              >
+                {{ index + 1 }}
+              </v-list-item-action>
+              <v-list-item-action v-else class="justify-center d-flex">
+                <v-icon>mdi-drag-horizontal</v-icon>
+              </v-list-item-action>
+              <v-list-item-avatar tile class="list-group-item">
+                <blurhash-image :item="item" />
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title
+                  class="text-truncate ml-2 list-group-item transition"
+                  :class="{
+                    'primary--text font-weight-bold': isPlaying(item)
+                  }"
+                >
+                  {{ item.Name }}
+                </v-list-item-title>
+                <v-list-item-subtitle
+                  v-if="getArtists(item)"
+                  class="ml-2 list-group-item transition"
+                  :class="{
+                    'primary--text font-weight-bold': isPlaying(item)
+                  }"
+                >
+                  {{ getArtists(item) }}
+                </v-list-item-subtitle>
+              </v-list-item-content>
+
+              <v-list-item-action>
+                <like-button :item="item" />
+              </v-list-item-action>
+              <v-list-item-action class="mr-2">
+                <item-menu :item="item" queue />
+              </v-list-item-action>
+            </v-list-item>
+          </v-hover>
+        </draggable>
+        <div
+          v-for="index in skeletonLength"
+          v-else
+          :key="index"
+          class="d-flex align-center mt-5 mb-5"
+        >
+          <v-skeleton-loader type="avatar" class="ml-3 mr-3" />
+          <v-skeleton-loader type="sentences" width="10em" class="pr-5" />
+        </div>
+      </v-list-item-group>
+    </v-list>
+  </div>
+</template>
+
+<script lang="ts">
+import { BaseItemDto } from '@jellyfin/client-axios';
+import Vue from 'vue';
+import { mapStores } from 'pinia';
+import { MoveEvent } from 'vuedraggable';
+import { itemsStore, playbackManagerStore } from '~/store';
+
+export default Vue.extend({
+  props: {
+    playlist: {
+      type: Object as () => BaseItemDto,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentTab: 0,
+      loading: false,
+      newIndex: null as number | null,
+      oldIndex: null as number | null,
+      dragOptions: {
+        animation: 500,
+        delay: 0,
+        group: false,
+        dragoverBubble: true,
+        ghostClass: 'ghost'
+      }
+    };
+  },
+  computed: {
+    ...mapStores(itemsStore, playbackManagerStore),
+    children: {
+      get(): BaseItemDto[] {
+        return this.items.getChildrenOfParentPlaylist(
+          this.playlist.Id
+        ) as BaseItemDto[];
+      },
+      set(_: BaseItemDto[]): void {
+        if (this.oldIndex != null && this.newIndex != null) {
+          this.items.movePlaylistItem(
+            this.playlist,
+            this.children[this.oldIndex],
+            this.newIndex
+          );
+        }
+      }
+    }
+  },
+  watch: {
+    playlist: {
+      immediate: true,
+      async handler(playlist: BaseItemDto): Promise<void> {
+        if (!this.children) {
+          this.loading = true;
+          await this.items.fetchAndAddPlaylist(playlist.Id as string);
+          this.loading = false;
+        }
+      }
+    }
+  },
+  methods: {
+    checkMove(evt: MoveEvent<BaseItemDto>) {
+      this.newIndex = evt.draggedContext.futureIndex;
+      this.oldIndex = evt.draggedContext.index;
+    },
+    getArtists(item: BaseItemDto): string | null {
+      if (item.Artists) {
+        return item.Artists.join(', ');
+      } else {
+        return null;
+      }
+    },
+    isPlaying(item: BaseItemDto): boolean {
+      if (this.playbackManager.getCurrentItem === undefined) {
+        return false;
+      }
+
+      return (
+        item.Id === (this.playbackManager.getCurrentItem as BaseItemDto).Id
+      );
+    },
+    async playQueueFrom(playFromIndex: number): Promise<void> {
+      await this.playbackManager.play({
+        item: this.playlist,
+        startFromIndex: playFromIndex,
+        initiator: this.playlist
+      });
+      await this.items.fetchAndAddPlaylist(this.playlist.Id as string);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.list-draggable {
+  user-select: none;
+  min-height: 20px;
+}
+</style>
diff --git a/frontend/pages/item/_itemId/index.vue b/frontend/pages/item/_itemId/index.vue
index 72063aef67b..de64919a9cc 100644
--- a/frontend/pages/item/_itemId/index.vue
+++ b/frontend/pages/item/_itemId/index.vue
@@ -244,6 +244,9 @@
         <v-col v-if="item.Type === 'BoxSet'" cols="12">
           <collection-tabs :item="item" />
         </v-col>
+        <v-col v-if="item.Type === 'Playlist'" cols="12">
+          <playlist-items :playlist="item" />
+        </v-col>
         <v-col cols="12">
           <related-items :id="$route.params.itemId" :item="item" />
         </v-col>
diff --git a/frontend/store/items.ts b/frontend/store/items.ts
index 31a47f54244..5d7cb0b693b 100644
--- a/frontend/store/items.ts
+++ b/frontend/store/items.ts
@@ -1,18 +1,20 @@
 import Vue from 'vue';
-import { BaseItemDto, ItemFields } from '@jellyfin/client-axios';
+import { BaseItemDto, ImageType, ItemFields } from '@jellyfin/client-axios';
 import { defineStore } from 'pinia';
 import { authStore } from '.';
 
 export interface ItemsState {
   byId: Record<string, BaseItemDto>;
   collectionById: Record<string, string[]>;
+  playlistById: Record<string, string[]>;
 }
 
 export const itemsStore = defineStore('items', {
   state: () => {
     return {
       byId: {},
-      collectionById: {}
+      collectionById: {},
+      playlistById: {}
     } as ItemsState;
   },
   actions: {
@@ -62,6 +64,135 @@ export const itemsStore = defineStore('items', {
         Vue.delete(this.byId, id);
       }
     },
+    /**
+     * Moves a playlist item to another index.
+     *
+     * @param parent The playlist containing the item to be moved.
+     * @param localChild The item in the playlist to be moved.
+     * @param index The new index of the item after being moved
+     * @returns A promise representing the resulting playlist after the item is moved.
+     */
+    async movePlaylistItem(
+      parent: BaseItemDto,
+      localChild: BaseItemDto,
+      index: number
+    ): Promise<BaseItemDto[]> {
+      const auth = authStore();
+
+      // You're probably asking "... but why?"
+
+      // Because when the Playback manager is playing these tracks,
+      // it seems to erase the PlaylistItemId from each of the items.
+      // So... I just get a new bunch of them to move things.
+
+      // Probably a better way to do it, but...
+      // ... I didn't feel like figuring that out right now.
+
+      // If you try to fix this, make sure that you can click "Play"
+      // on the playlist, then move tracks.
+
+      const children = await this.$nuxt.$api.playlists.getPlaylistItems({
+        userId: auth.currentUserId,
+        playlistId: parent.Id as string,
+        fields: [ItemFields.PrimaryImageAspectRatio],
+        enableImageTypes: [
+          ImageType.Primary,
+          ImageType.Backdrop,
+          ImageType.Banner,
+          ImageType.Thumb
+        ]
+      });
+
+      const child = children.data.Items?.find(
+        (i) => i.Id === localChild.Id
+      ) as BaseItemDto;
+
+      await this.$nuxt.$api.playlists.moveItem({
+        playlistId: parent.Id as string,
+        itemId: child.PlaylistItemId as string,
+        newIndex: index
+      });
+
+      return await this.fetchAndAddPlaylist(parent.Id as string);
+    },
+    /**
+     * Adds a playlist and it's items to the local store.
+     *
+     * @param parent The playlist containing the children items.
+     * @param children The items in the playlist
+     * @returns The items in the playlist
+     */
+    addPlaylist(parent: BaseItemDto, children: BaseItemDto[]): BaseItemDto[] {
+      if (!parent.Id) {
+        throw new Error("Parent item doesn't have an Id");
+      }
+
+      const childIds = [];
+
+      for (const child of children) {
+        if (child.Id) {
+          if (!this.getItemById(child.Id)) {
+            this.add(child);
+          }
+
+          childIds.push(child.Id);
+        }
+      }
+
+      Vue.set(this.playlistById, parent.Id, childIds);
+
+      return this.getChildrenOfParentPlaylist(parent.Id) as BaseItemDto[];
+    },
+    /**
+     * Fetches the items in a playlist and stores them locally.
+     *
+     * @param parentId The Item ID of the playlist
+     * @returns The items in the playlist.
+     */
+    async fetchAndAddPlaylist(
+      parentId: string | undefined
+    ): Promise<BaseItemDto[]> {
+      const auth = authStore();
+
+      if (parentId && !this.getItemById(parentId)) {
+        const parentItem = (
+          await this.$nuxt.$api.items.getItems({
+            userId: auth.currentUserId,
+            ids: [parentId],
+            fields: Object.values(ItemFields)
+          })
+        ).data;
+
+        if (!parentItem.Items?.[0]) {
+          throw new Error("This parent doesn't exist");
+        }
+
+        this.add(parentItem.Items[0]);
+      }
+
+      const childItems = (
+        await this.$nuxt.$api.playlists.getPlaylistItems({
+          userId: auth.currentUserId,
+          playlistId: parentId as string,
+          fields: [ItemFields.PrimaryImageAspectRatio],
+          enableImageTypes: [
+            ImageType.Primary,
+            ImageType.Backdrop,
+            ImageType.Banner,
+            ImageType.Thumb
+          ]
+        })
+      ).data;
+
+      const parent = this.getItemById(parentId);
+
+      if (childItems.Items) {
+        return this.addPlaylist(parent as BaseItemDto, childItems.Items);
+      } else {
+        // I think this just means it's an empty playlist...?
+        return this.addPlaylist(parent as BaseItemDto, []);
+      }
+    },
     /**
      * Associate an item that has children with its children
      *
@@ -88,7 +219,7 @@ export const itemsStore = defineStore('items', {
 
       Vue.set(this.collectionById, parent.Id, childIds);
 
-      return this.getChildrenOfParent(parent.Id) as BaseItemDto[];
+      return this.getChildrenOfParentCollection(parent.Id) as BaseItemDto[];
     },
     /**
      * Fetches a parent and its children and adds thecollection to the store
@@ -156,7 +287,7 @@ export const itemsStore = defineStore('items', {
         return res;
       };
     },
-    getChildrenOfParent: (state) => {
+    getChildrenOfParentCollection: (state) => {
       return (id: string | undefined): BaseItemDto[] | undefined => {
         if (!id) {
           throw new Error('No itemId provided');
@@ -165,6 +296,24 @@ export const itemsStore = defineStore('items', {
         const res = [] as BaseItemDto[];
         const ids = state.collectionById[id];
 
+        if (ids?.length) {
+          for (const _id of ids) {
+            res.push(state.byId[_id]);
+          }
+
+          return res;
+        }
+      };
+    },
+    getChildrenOfParentPlaylist: (state) => {
+      return (id: string | undefined): BaseItemDto[] | undefined => {
+        if (!id) {
+          throw new Error('No itemId provided');
+        }
+
+        const res = [] as BaseItemDto[];
+        const ids = state.playlistById[id];
+
         if (ids?.length) {
           for (const _id of ids) {
             res.push(state.byId[_id]);