From dbacfca2f8f1dbf836e2494781068a3bb5bafe5e Mon Sep 17 00:00:00 2001
From: Reino Zuppur <reino@reinozuppur.com>
Date: Tue, 4 Oct 2022 00:25:31 +0300
Subject: [PATCH] feat: view playlist contents

---
 package-lock.json                             | 18 +++---
 package.json                                  |  4 +-
 packages/renderer/src/App.vue                 | 12 +---
 .../renderer/src/components/PlaylistsView.vue | 55 +++++++++++++++++++
 4 files changed, 69 insertions(+), 20 deletions(-)
 create mode 100644 packages/renderer/src/components/PlaylistsView.vue

diff --git a/package-lock.json b/package-lock.json
index efe168c..8d7fdf5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "rekordfix",
-  "version": "0.1",
+  "version": "0.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "rekordfix",
-      "version": "0.1",
+      "version": "0.5.0",
       "hasInstallScript": true,
       "dependencies": {
         "electron-updater": "5.2.1",
@@ -14,7 +14,7 @@
         "xml2js": "^0.4.23"
       },
       "devDependencies": {
-        "@rzuppur/rvc": "^0.52.0",
+        "@rzuppur/rvc": "^0.53.0",
         "@types/xml2js": "^0.4.11",
         "@typescript-eslint/eslint-plugin": "5.37.0",
         "@typescript-eslint/parser": "^5.38.0",
@@ -378,9 +378,9 @@
       }
     },
     "node_modules/@rzuppur/rvc": {
-      "version": "0.52.0",
-      "resolved": "https://registry.npmjs.org/@rzuppur/rvc/-/rvc-0.52.0.tgz",
-      "integrity": "sha512-+EvWUx2uxm+Y0LDQ+NZw8xRMGgGNorRG0wIo/iI3gs0vA/K57sP0aKWWsxhSerKO226EYbchIX/ByPfaPeugzw==",
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@rzuppur/rvc/-/rvc-0.53.0.tgz",
+      "integrity": "sha512-7WNJCuojajsXgVj8ItzmoJl2Q7vEaVYEv2ecLq2MRXR+Sa1/fFbzQtZWHiZXbtVbSMhmUj7njhYgDWQ0UUV5+g==",
       "dev": true,
       "dependencies": {
         "resize-observer-polyfill": "^1.5.1"
@@ -6976,9 +6976,9 @@
       }
     },
     "@rzuppur/rvc": {
-      "version": "0.52.0",
-      "resolved": "https://registry.npmjs.org/@rzuppur/rvc/-/rvc-0.52.0.tgz",
-      "integrity": "sha512-+EvWUx2uxm+Y0LDQ+NZw8xRMGgGNorRG0wIo/iI3gs0vA/K57sP0aKWWsxhSerKO226EYbchIX/ByPfaPeugzw==",
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@rzuppur/rvc/-/rvc-0.53.0.tgz",
+      "integrity": "sha512-7WNJCuojajsXgVj8ItzmoJl2Q7vEaVYEv2ecLq2MRXR+Sa1/fFbzQtZWHiZXbtVbSMhmUj7njhYgDWQ0UUV5+g==",
       "dev": true,
       "requires": {
         "resize-observer-polyfill": "^1.5.1"
diff --git a/package.json b/package.json
index b63e5bc..72cd254 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rekordfix",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "packages/main/dist/index.cjs",
   "scripts": {
     "build": "npm run build:main && npm run build:preload && npm run build:renderer",
@@ -19,7 +19,7 @@
     "format": "npx prettier --write \"**/*.{js,mjs,cjs,ts,mts,cts,vue,json}\""
   },
   "devDependencies": {
-    "@rzuppur/rvc": "^0.52.0",
+    "@rzuppur/rvc": "^0.53.0",
     "@types/xml2js": "^0.4.11",
     "@typescript-eslint/eslint-plugin": "5.37.0",
     "@typescript-eslint/parser": "^5.38.0",
diff --git a/packages/renderer/src/App.vue b/packages/renderer/src/App.vue
index 4315c47..71cb0b3 100644
--- a/packages/renderer/src/App.vue
+++ b/packages/renderer/src/App.vue
@@ -5,6 +5,7 @@ import {ref} from 'vue';
 import type {Folder, Playlist, TrackData} from '/@/model';
 import {useToast} from '@rzuppur/rvc';
 import {cleanLocationString, formatSeconds} from '/@/utils';
+import PlaylistsView from '/@/components/PlaylistsView.vue';
 
 const toast = useToast();
 
@@ -153,17 +154,10 @@ const actionSaveDuplicatePlaylist = async () => {
     r-button.r-m-b-md(borderless small :action="resetCollection" icon="arrow left" icon-color="blue") Back
     .r-text-sm.r-text-medium {{ collectionFilePath }}
     .r-text-xxs.r-text-color-muted Rekordbox version {{ collectionVersion }} &middot; {{ collectionTracks.length }} tracks &middot;&nbsp;
-      a(@click="() => { $refs.playlistsModal.open(); }") {{ collectionPlaylists.length }} playlists
+      a(@click="() => { $refs.playlists.open(); }") {{ collectionPlaylists.length }} playlists
     .r-text-xxs.r-text-color-muted Last track added: "{{ collectionTracks.slice(-1)[0].Name }}" on {{ collectionTracks.slice(-1)[0].DateAdded }}
 
-    r-modal(ref="playlistsModal" size="fill" title="All playlists" :buttons="false")
-      .r-m-t-xs(v-for="playlist in collectionPlaylists.sort((a, b) => a.$.Name.localeCompare(b.$.Name))")
-        .r-flex-container
-          .r-flex-1.ellipsis.r-text-medium {{ playlist.$.Name }}
-          .r-flex-0.r-text-xxs
-            template(v-if="playlist.TRACK") {{ playlist.TRACK.length }} track{{ playlist.TRACK.length === 1 ? "" : "s" }}
-            template(v-else) empty
-        hr
+    PlaylistsView(ref="playlists" :collectionPlaylists="collectionPlaylists" :collectionTracks="collectionTracks")
 
     .r-m-t-lg(v-if="collectionTracksNotInPlaylists.length")
       h2.r-text-md.r-text-medium
diff --git a/packages/renderer/src/components/PlaylistsView.vue b/packages/renderer/src/components/PlaylistsView.vue
new file mode 100644
index 0000000..b0eb7a6
--- /dev/null
+++ b/packages/renderer/src/components/PlaylistsView.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type {Ref} from 'vue';
+import {ref} from 'vue';
+import type {Playlist, TrackData} from '/@/model';
+
+const props = defineProps<{
+  collectionPlaylists: Playlist[];
+  collectionTracks: TrackData[];
+}>();
+
+const playlistsModalRef: Ref = ref(null);
+const playlistDetailModalRef: Ref = ref(null);
+
+const open = () => {
+  if (playlistsModalRef.value) playlistsModalRef.value.open();
+};
+
+const playlistTitle = ref('');
+const playlistTracks: Ref<TrackData[]> = ref([]);
+
+const openPlaylist = (playlist: Playlist) => {
+  const allTracks = [];
+  if (props.collectionTracks && props.collectionTracks.length && playlist.TRACK && playlist.TRACK.length) {
+    for (const track of playlist.TRACK) {
+      const trackData = props.collectionTracks.find(t => t.TrackID === track.$.Key);
+      if (trackData) allTracks.push(trackData);
+    }
+  }
+  playlistTracks.value = allTracks;
+  playlistTitle.value = playlist.$.Name;
+  if (playlistDetailModalRef.value) playlistDetailModalRef.value.open();
+};
+
+defineExpose({
+  open,
+});
+
+</script>
+<template lang="pug">
+
+r-modal(ref="playlistsModalRef" size="fill" title="All playlists" :buttons="false")
+  .r-m-t-xs(v-for="playlist in collectionPlaylists.sort((a, b) => a.$.Name.localeCompare(b.$.Name))")
+    .r-flex-container
+      .r-flex-1.ellipsis.r-text-medium(@click="() => { openPlaylist(playlist); }") {{ playlist.$.Name }}
+      .r-flex-0.r-text-xxs
+        template(v-if="playlist.TRACK") {{ playlist.TRACK.length }} track{{ playlist.TRACK.length === 1 ? "" : "s" }}
+        template(v-else) empty
+    hr
+
+r-modal(ref="playlistDetailModalRef" size="fill" :title="playlistTitle" :buttons="false")
+  .r-m-t-xs(v-for="tracks in playlistTracks")
+    span.r-text-bold {{ tracks.Artist }}
+    span.r-text-medium &nbsp;- {{ tracks.Name }}
+
+</template>