feat: worked more on convert Spotify modal, cleaned up code a lot

backend/logic/actions/playlists.js

@@ -158,6 +158,48 @@ CacheModule.runJob("SUB", {
 	}
 });
 
+CacheModule.runJob("SUB", {
+	channel: "playlist.replaceSong",
+	cb: res => {
+		if (res.createdBy !== "Musare") {
+			WSModule.runJob("SOCKETS_FROM_USER", { userId: res.createdBy }, this).then(sockets => {
+				sockets.forEach(socket => {
+					socket.dispatch("event:playlist.song.replaced", {
+						data: {
+							playlistId: res.playlistId,
+							song: res.song,
+							oldMediaSource: res.oldMediaSource
+						}
+					});
+				});
+			});
+
+			if (res.privacy === "public")
+				WSModule.runJob("EMIT_TO_ROOM", {
+					room: `profile.${res.createdBy}.playlists`,
+					args: [
+						"event:playlist.song.replaced",
+						{
+							data: {
+								playlistId: res.playlistId,
+								song: res.song,
+								oldMediaSource: res.oldMediaSource
+							}
+						}
+					]
+				});
+		}
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: "admin.playlists",
+			args: [
+				"event:admin.playlist.song.replaced",
+				{ data: { playlistId: res.playlistId, song: res.song, oldMediaSource: res.oldMediaSource } }
+			]
+		});
+	}
+});
+
 CacheModule.runJob("SUB", {
 	channel: "playlist.updateDisplayName",
 	cb: res => {

frontend/src/components/AddToPlaylistDropdown.vue

@@ -132,6 +132,24 @@ onMounted(() => {
 		},
 		{ replaceable: true }
 	);
+
+	socket.on(
+		"event:playlist.song.replaced",
+		res => {
+			playlists.value.forEach((playlist, index) => {
+				if (playlist._id === res.data.playlistId) {
+					playlists.value[index].songs = playlists.value[
+						index
+					].songs.map(song =>
+						song.mediaSource === res.data.oldMediaSource
+							? res.data.song
+							: song
+					);
+				}
+			});
+		},
+		{ replaceable: true }
+	);
 });
 </script>
 

frontend/src/components/modals/EditPlaylist/index.vue

@@ -63,8 +63,14 @@ const containsSpotifySongs = computed(
 );
 
 const { tab, playlist } = storeToRefs(editPlaylistStore);
-const { setPlaylist, clearPlaylist, addSong, removeSong, repositionedSong } =
-	editPlaylistStore;
+const {
+	setPlaylist,
+	clearPlaylist,
+	addSong,
+	removeSong,
+	replaceSong,
+	repositionedSong
+} = editPlaylistStore;
 
 const { closeCurrentModal, openModal } = useModalsStore();
 
@@ -287,6 +293,20 @@ onMounted(() => {
 		{ modalUuid: props.modalUuid }
 	);
 
+	socket.on(
+		"event:playlist.song.replaced",
+		res => {
+			if (playlist.value._id === res.data.playlistId) {
+				// replace song
+				replaceSong({
+					song: res.data.song,
+					oldMediaSource: res.data.oldMediaSource
+				});
+			}
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
 	socket.on(
 		"event:playlist.displayName.updated",
 		res => {

frontend/src/components/modals/ManageStation/index.vue

@@ -402,6 +402,22 @@ onMounted(() => {
 				}
 			);
 
+			socket.on(
+				"event:playlist.song.replaced",
+				res => {
+					if (stationPlaylist.value._id === res.data.playlistId)
+						stationPlaylist.value.songs =
+							stationPlaylist.value.songs.map(song =>
+								song.mediaSource === res.data.oldMediaSource
+									? res.data.song
+									: song
+							);
+				},
+				{
+					modalUuid: props.modalUuid
+				}
+			);
+
 			socket.on(
 				"event:playlist.songs.repositioned",
 				res => {

frontend/src/composables/useSortablePlaylists.ts

@@ -119,6 +119,24 @@ export const useSortablePlaylists = () => {
 			{ replaceable: true }
 		);
 
+		socket.on(
+			"event:playlist.song.replaced",
+			res => {
+				playlists.value.forEach((playlist, index) => {
+					if (playlist._id === res.data.playlistId) {
+						playlists.value[index].songs = playlists.value[
+							index
+						].songs.map(song =>
+							song.mediaSource === res.data.oldMediaSource
+								? res.data.song
+								: song
+						);
+					}
+				});
+			},
+			{ replaceable: true }
+		);
+
 		socket.on(
 			"event:playlist.displayName.updated",
 			res => {

frontend/src/stores/editPlaylist.ts

@@ -29,6 +29,11 @@ export const useEditPlaylistStore = ({ modalUuid }: { modalUuid: string }) =>
 					song => song.mediaSource !== mediaSource
 				);
 			},
+			replaceSong({ song, oldMediaSource }) {
+				this.playlist.songs = this.playlist.songs.map(_song =>
+					_song.mediaSource === oldMediaSource ? song : _song
+				);
+			},
 			updatePlaylistSongs(playlistSongs) {
 				this.playlist.songs = playlistSongs;
 			},