feat: view playlist contents

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",

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 }} · {{ collectionTracks.length }} tracks · 
-      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

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>