From 9393a32ba8aea02bdf42c5dd8156988180fff5b5 Mon Sep 17 00:00:00 2001
From: jeroentvb <36192730+jeroentvb@users.noreply.github.com>
Date: Mon, 23 Oct 2023 20:20:59 +0200
Subject: [PATCH 1/4] feat(auto-sync): auto sync combined playlists on spotify
 launch - closes #2

---
 README.md                             |    8 +-
 src/constants/index.ts                |    4 +-
 src/extensions/auto-sync.tsx          |   37 +
 src/types/index.ts                    |    1 +
 src/types/playlist-tracks-response.ts |    5 +
 src/types/spicetify.d.ts              | 3292 +++++++++++++++----------
 src/utils/combine-playlists.ts        |   15 +-
 7 files changed, 2000 insertions(+), 1362 deletions(-)
 create mode 100644 src/extensions/auto-sync.tsx
 create mode 100644 src/types/playlist-tracks-response.ts

diff --git a/README.md b/README.md
index 0f28b43..73c3ae7 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
 # Playlist combiner
 Ever wanted to combine your spotify playlists into one big one? This Spicetify custom app is able to do just that.  
-The app currently allows combining playlist into one playlists and synchronizing them with the press of a button after adding songs to one of the source playlists. The ultimate goal is to add the songs from the source to the target automatically. But that's still w.i.p.
+
+### Features
+* Combine multiple playlists into one
+* Auto sync to add missing tracks when spotify starts
 
 ![combined playlists home page](docs/home.png)
 
@@ -34,6 +37,3 @@ Playlists may also be added or removed via the edit modal. Removing a playlist d
 ```
 ⚠️ Combining a large amount of songs into a playlist may take some time
 ```
-
-## Todo
-See the [issues](https://github.com/jeroentvb/spicetify-combined-playlists/issues) tab.
diff --git a/src/constants/index.ts b/src/constants/index.ts
index b912e40..0e394fc 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -7,6 +7,8 @@ export const GET_PLAYLISTS_URL = 'https://api.spotify.com/v1/me/playlists?limit=
  */
 export const TRACKS_FROM_PLAYLIST_URL_FILTER = '?fields=items(track(uri)),next';
 
+export const GET_PLAYLIST_TRACKS_URL = (uri: string) => `sp://core-playlist/v1/playlist/${uri}/rows`;
+
 export const ADD_TRACKS_TO_PLAYLIST_URL = (id: string) => `https://api.spotify.com/v1/playlists/${id}/tracks`;
 
 export const LS_KEY = 'combined-playlists';
@@ -16,7 +18,7 @@ export const CREATE_PLAYLIST_URL = (userId: string) => `https://api.spotify.com/
 export const CREATE_NEW_PLAYLIST_IDENTIFIER = 'CREATE_NEW_PLAYLIST_IDENTIFIER';
 
 export const LIKED_SONGS_PLAYLIST_FACADE: SpotifyPlaylist = {
-   name: Spicetify.Platform.Translations['shared.library.entity-row.liked-songs.title'],
+   name: Spicetify.Platform?.Translations['shared.library.entity-row.liked-songs.title'],
    collaborative: false,
    description: '',
    external_urls: { spotify: '' },
diff --git a/src/extensions/auto-sync.tsx b/src/extensions/auto-sync.tsx
new file mode 100644
index 0000000..a3b2807
--- /dev/null
+++ b/src/extensions/auto-sync.tsx
@@ -0,0 +1,37 @@
+import { GET_PLAYLIST_TRACKS_URL, LS_KEY } from '../constants';
+import type { CombinedPlaylist, PlaylistRowsResponse } from '../types';
+import { addTracksToPlaylist } from '../utils';
+
+(async () => {
+   while (!Spicetify?.Platform || !Spicetify?.CosmosAsync) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+   }
+
+   synchronizeCombinedPlaylists();
+})();
+
+export function synchronizeCombinedPlaylists() {
+   const combinedPlaylists: CombinedPlaylist[] = JSON.parse(Spicetify.LocalStorage.get(LS_KEY) as string) ?? [];
+
+   Promise.all(combinedPlaylists.map(async ({ sources, target }) => {
+      const sourceUris = await Promise.all(sources.map(async (source) => {
+         const res: PlaylistRowsResponse = await Spicetify.CosmosAsync.get(GET_PLAYLIST_TRACKS_URL(source.uri));
+         return res.rows.map(({ link }) => link);
+      // Flatten result and remove duplicates
+      })).then(res => Array.from(new Set(res.flat())));
+
+      const targetUris = await Spicetify.CosmosAsync.get(GET_PLAYLIST_TRACKS_URL(target.uri))
+         .then((res: PlaylistRowsResponse) => res.rows.map(({ link }) => link));
+
+      const missingUris = sourceUris.filter(uri => !targetUris.includes(uri));
+
+      if (missingUris.length) {
+         Spicetify.showNotification(`Auto-syncing ${missingUris.length} missing tracks to playlist ${target.name}`);
+         // Endpoint only wants the id, not the full uri
+         await addTracksToPlaylist(target.uri.split(':').at(-1) as string, missingUris);
+         Spicetify.showNotification(`Auto-synced ${missingUris.length} missing tracks to playlist ${target.name} 🔥`);
+      }
+   })).catch((_err) => {
+      Spicetify.showNotification('An error while auto-syncing playlists', true);
+   });
+}
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 777860e..a53ea12 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,3 +2,4 @@ export * from './combined-playlist';
 export * from './initial-playlist-form';
 export * from './spotify-playlist';
 export * from './collection-call-response';
+export * from './playlist-tracks-response';
diff --git a/src/types/playlist-tracks-response.ts b/src/types/playlist-tracks-response.ts
new file mode 100644
index 0000000..1950320
--- /dev/null
+++ b/src/types/playlist-tracks-response.ts
@@ -0,0 +1,5 @@
+export interface PlaylistRowsResponse {
+   rows: {
+      link: string
+   }[]
+}
diff --git a/src/types/spicetify.d.ts b/src/types/spicetify.d.ts
index ad3e9e5..92fcde9 100644
--- a/src/types/spicetify.d.ts
+++ b/src/types/spicetify.d.ts
@@ -1,1357 +1,1945 @@
 declare namespace Spicetify {
-    type Metadata = Partial<Record<string, string>>;
-    type ContextTrack = {
-        uri: string;
-        uid?: string;
-        metadata?: Metadata;
-    };
-    type ProvidedTrack = ContextTrack & {
-        removed?: string[];
-        blocked?: string[];
-        provider?: string;
-    };
-    interface ContextOption {
-        contextURI?: string;
-        index?: number;
-        trackUri?: string;
-        page?: number;
-        trackUid?: string;
-        sortedBy?: string;
-        filteredBy?: string;
-        shuffleContext?: boolean;
-        repeatContext?: boolean;
-        repeatTrack?: boolean;
-        offset?: number;
-        next_page_url?: string;
-        restrictions?: Record<string, string[]>;
-        referrer?: string;
-    };
-    type PlayerState = {
-        timestamp: number;
-        context_uri: string;
-        context_url: string;
-        context_restrictions: Record<string, string>;
-        index?: {
-            page: number;
-            track: number;
-        };
-        track?: ProvidedTrack;
-        playback_id?: string;
-        playback_quality?: string;
-        playback_speed?: number;
-        position_as_of_timestamp: number;
-        duration: number;
-        is_playing: boolean;
-        is_paused: boolean;
-        is_buffering: boolean;
-        play_origin: {
-            feature_identifier: string;
-            feature_version: string;
-            view_uri?: string;
-            external_referrer?: string;
-            referrer_identifier?: string;
-            device_identifier?: string;
-        };
-        options: {
-            shuffling_context?: boolean;
-            repeating_context?: boolean;
-            repeating_track?: boolean;
-        };
-        restrictions: Record<string, string[]>;
-        suppressions: {
-            providers: string[];
-        };
-        debug: {
-            log: string[];
-        };
-        prev_tracks: ProvidedTrack[];
-        next_tracks: ProvidedTrack[];
-        context_metadata: Metadata;
-        page_metadata: Metadata;
-        session_id: string;
-        queue_revision: string;
-    };
-    namespace Player {
-        /**
-         * Register a listener `type` on Spicetify.Player.
-         *
-         * On default, `Spicetify.Player` always dispatch:
-         *  - `songchange` type when player changes track.
-         *  - `onplaypause` type when player plays or pauses.
-         *  - `onprogress` type when track progress changes.
-         *  - `appchange` type when user changes page.
-         */
-        function addEventListener(type: string, callback: (event?: Event) => void): void;
-        function addEventListener(type: "songchange", callback: (event?: Event & { data: PlayerState }) => void): void;
-        function addEventListener(type: "onplaypause", callback: (event?: Event & { data: PlayerState }) => void): void;
-        function addEventListener(type: "onprogress", callback: (event?: Event & { data: number }) => void): void;
-        function addEventListener(type: "appchange", callback: (event?: Event & { data: {
-            /**
-             * App href path
-             */
-            path: string;
-            /**
-             * App container
-             */
-             container: HTMLElement;
-        } }) => void): void;
-        /**
-         * Skip to previous track.
-         */
-        function back(): void;
-        /**
-         * An object contains all information about current track and player.
-         */
-        const data: PlayerState;
-        /**
-         * Decrease a small amount of volume.
-         */
-        function decreaseVolume(): void;
-        /**
-         * Dispatches an event at `Spicetify.Player`.
-         *
-         * On default, `Spicetify.Player` always dispatch
-         *  - `songchange` type when player changes track.
-         *  - `onplaypause` type when player plays or pauses.
-         *  - `onprogress` type when track progress changes.
-         *  - `appchange` type when user changes page.
-         */
-        function dispatchEvent(event: Event): void;
-        const eventListeners: {
-            [key: string]: Array<(event?: Event) => void>
-        };
-        /**
-         * Convert milisecond to `mm:ss` format
-         * @param milisecond
-         */
-        function formatTime(milisecond: number): string;
-        /**
-         * Return song total duration in milisecond.
-         */
-        function getDuration(): number;
-        /**
-         * Return mute state
-         */
-        function getMute(): boolean;
-        /**
-         * Return elapsed duration in milisecond.
-         */
-        function getProgress(): number;
-        /**
-         * Return elapsed duration in percentage (0 to 1).
-         */
-        function getProgressPercent(): number;
-        /**
-         * Return current Repeat state (No repeat = 0/Repeat all = 1/Repeat one = 2).
-         */
-        function getRepeat(): number;
-        /**
-         * Return current shuffle state.
-         */
-        function getShuffle(): boolean;
-        /**
-         * Return track heart state.
-         */
-        function getHeart(): boolean;
-        /**
-         * Return current volume level (0 to 1).
-         */
-        function getVolume(): number;
-        /**
-         * Increase a small amount of volume.
-         */
-        function increaseVolume(): void;
-        /**
-         * Return a boolean whether player is playing.
-         */
-        function isPlaying(): boolean;
-        /**
-         * Skip to next track.
-         */
-        function next(): void;
-        /**
-         * Pause track.
-         */
-        function pause(): void;
-        /**
-         * Resume track.
-         */
-        function play(): void;
-        /**
-         * Play a track, playlist, album, etc. immediately
-         * @param uri Spotify URI
-         * @param context
-         * @param options
-         */
-        async function playUri(uri: string, context: any = {}, options: Options = {});
-        /**
-         * Unregister added event listener `type`.
-         * @param type
-         * @param callback
-         */
-        function removeEventListener(type: string, callback: (event?: Event) => void): void;
-        /**
-         * Seek track to position.
-         * @param position can be in percentage (0 to 1) or in milisecond.
-         */
-        function seek(position: number): void;
-        /**
-         * Turn mute on/off
-         * @param state
-         */
-        function setMute(state: boolean): void;
-        /**
-         * Change Repeat mode
-         * @param mode `0` No repeat. `1` Repeat all. `2` Repeat one track.
-         */
-        function setRepeat(mode: number): void;
-        /**
-         * Turn shuffle on/off.
-         * @param state
-         */
-        function setShuffle(state: boolean): void;
-        /**
-         * Set volume level
-         * @param level 0 to 1
-         */
-        function setVolume(level: number): void;
-        /**
-         * Seek to previous `amount` of milisecond
-         * @param amount in milisecond. Default: 15000.
-         */
-        function skipBack(amount?: number): void;
-        /**
-         * Seek to next  `amount` of milisecond
-         * @param amount in milisecond. Default: 15000.
-         */
-        function skipForward(amount?: number): void;
-        /**
-        * Toggle Heart (Favourite) track state.
-        */
-        function toggleHeart(): void;
-        /**
-         * Toggle Mute/No mute.
-         */
-        function toggleMute(): void;
-        /**
-         * Toggle Play/Pause.
-         */
-        function togglePlay(): void;
-        /**
-         * Toggle No repeat/Repeat all/Repeat one.
-         */
-        function toggleRepeat(): void;
-        /**
-         * Toggle Shuffle/No shuffle.
-         */
-        function toggleShuffle(): void;
-    }
-    /**
-     * Adds a track/album or array of tracks/albums to prioritized queue.
-     */
-    function addToQueue(uri: string | string[]): Promise<void>;
-    /**
-     * @deprecated
-     */
-    const BridgeAPI: any;
-    /**
-     * @deprecated
-     */
-    const CosmosAPI: any;
-    /**
-     * Async wrappers of CosmosAPI
-     */
-    namespace CosmosAsync {
-        type Method = "DELETE" | "GET" | "HEAD" | "PATCH" | "POST" | "PUT" | "SUB";
-        interface Error {
-            code: number;
-            error: string;
-            message: string;
-            stack?: string;
-        }
-
-        type Headers = Record<string, string>;
-        type Body = Record<string, any>;
-
-        interface Response {
-            body: any;
-            headers: Headers;
-            status: number;
-            uri: string;
-            static isSuccessStatus(status: number): boolean;
-        }
-
-        function head(url: string, headers?: Headers): Promise<Headers>;
-        function get(url: string, body?: Body, headers?: Headers): Promise<Response.body>;
-        function post(url: string, body?: Body, headers?: Headers): Promise<Response.body>;
-        function put(url: string, body?: Body, headers?: Headers): Promise<Response.body>;
-        function del(url: string, body?: Body, headers?: Headers): Promise<Response.body>;
-        function patch(url: string, body?: Body, headers?: Headers): Promise<Response.body>;
-        function sub(url: string, callback: ((b: Response.body) => void), onError?: ((e: Error) => void), body?: Body, headers?: Headers): Promise<Response.body>;
-        function postSub(url: string, body?: Body, callback: ((b: Response.body) => void), onError?: ((e: Error) => void)): Promise<Response.body>;
-        function request(method: Method, url: string, body?: Body, headers?: Headers): Promise<Response>;
-        function resolve(method: Method, url: string, body?: Body, headers?: Headers): Promise<Response>;
-    }
-    /**
-     * Fetch interesting colors from URI.
-     * @param uri Any type of URI that has artwork (playlist, track, album, artist, show, ...)
-     */
-    function colorExtractor(uri: string): Promise<{
-        DESATURATED: string;
-        LIGHT_VIBRANT: string;
-        PROMINENT: string;
-        VIBRANT: string;
-        VIBRANT_NON_ALARMING: string;
-    }>;
-    /**
-     * @deprecated
-     */
-    function getAblumArtColors(): any;
-    /**
-     * Fetch track analyzed audio data.
-     * Beware, not all tracks have audio data.
-     * @param uri is optional. Leave it blank to get current track
-     * or specify another track uri.
-     */
-    function getAudioData(uri?: string): Promise<any>;
-    /**
-     * Set of APIs method to register, deregister hotkeys/shortcuts
-     */
-    namespace Keyboard {
-        type ValidKey = "BACKSPACE" | "TAB" | "ENTER" | "SHIFT" | "CTRL" | "ALT" | "CAPS" | "ESCAPE" | "SPACE" | "PAGE_UP" | "PAGE_DOWN" | "END" | "HOME" | "ARROW_LEFT" | "ARROW_UP" | "ARROW_RIGHT" | "ARROW_DOWN" | "INSERT" | "DELETE" | "A" | "B" | "C" | "D" | "E" | "F" | "G" | "H" | "I" | "J" | "K" | "L" | "M" | "N" | "O" | "P" | "Q" | "R" | "S" | "T" | "U" | "V" | "W" | "X" | "Y" | "Z" | "WINDOW_LEFT" | "WINDOW_RIGHT" | "SELECT" | "NUMPAD_0" | "NUMPAD_1" | "NUMPAD_2" | "NUMPAD_3" | "NUMPAD_4" | "NUMPAD_5" | "NUMPAD_6" | "NUMPAD_7" | "NUMPAD_8" | "NUMPAD_9" | "MULTIPLY" | "ADD" | "SUBTRACT" | "DECIMAL_POINT" | "DIVIDE" | "F1" | "F2" | "F3" | "F4" | "F5" | "F6" | "F7" | "F8" | "F9" | "F10" | "F11" | "F12" | ";" | "=" | " | " | "-" | "." | "/" | "`" | "[" | "\\" | "]" | "\"" | "~" | "!" | "@" | "#" | "$" | "%" | "^" | "&" | "*" | "(" | ")" | "_" | "+" | ":" | "<" | ">" | "?" | "|";
-        type KeysDefine = string | {
-            key: string;
-            ctrl?: boolean;
-            shift?: boolean;
-            alt?: boolean;
-            meta?: boolean;
-        };
-        const KEYS: Record<ValidKey, string>;
-        function registerShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void);
-        function registerIsolatedShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void);
-        function registerImportantShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void);
-        function _deregisterShortcut(keys: KeysDefine);
-        function deregisterImportantShortcut(keys: KeysDefine);
-    };
-
-    /**
-     * @deprecated
-     */
-    const LiveAPI: any;
-
-    namespace LocalStorage {
-        /**
-         * Empties the list associated with the object of all key/value pairs, if there are any.
-         */
-        function clear(): void;
-        /**
-         * Get key value
-         */
-        function get(key: string): string | null;
-        /**
-         * Delete key
-         */
-        function remove(key: string): void;
-        /**
-         * Set new value for key
-         */
-        function set(key: string, value: string): void;
-    }
-    /**
-     * To create and prepend custom menu item in profile menu.
-     */
-    namespace Menu {
-        /**
-         * Create a single toggle.
-         */
-        class Item {
-            constructor(name: string, isEnabled: boolean, onClick: (self: Item) => void);
-            name: string;
-            isEnabled: boolean;
-            /**
-             * Change item name
-             */
-            setName(name: string): void;
-            /**
-             * Change item enabled state.
-             * Visually, item would has a tick next to it if its state is enabled.
-             */
-            setState(isEnabled: boolean): void;
-            /**
-             * Item is only available in Profile menu when method "register" is called.
-             */
-            register(): void;
-            /**
-             * Stop item to be prepended into Profile menu.
-             */
-            deregister(): void;
-        }
-
-        /**
-         * Create a sub menu to contain Item toggles.
-         * `Item`s in `subItems` array shouldn't be registered.
-         */
-        class SubMenu {
-            constructor(name: string, subItems: Item[]);
-            name: string;
-            /**
-             * Change SubMenu name
-             */
-            setName(name: string): void;
-            /**
-             * Add an item to sub items list
-             */
-            addItem(item: Item);
-            /**
-             * Remove an item from sub items list
-             */
-            removeItem(item: Item);
-            /**
-             * SubMenu is only available in Profile menu when method "register" is called.
-             */
-            register(): void;
-            /**
-             * Stop SubMenu to be prepended into Profile menu.
-             */
-            deregister(): void;
-        }
-    }
-    
-    /**
-     * Keyboard shortcut library
-     * 
-     * Documentation: https://craig.is/killing/mice v1.6.5
-     * 
-     * Spicetify.Keyboard is wrapper of this library to be compatible with legacy Spotify,
-     * so new extension should use this library instead.
-     */
-     function Mousetrap(element?: any): void;
-
-    /**
-     * Contains vast array of internal APIs.
-     * Please explore in Devtool Console.
-     */
-    const Platform: any;
-    /**
-     * Queue object contains list of queuing tracks,
-     * history of played tracks and current track metadata.
-     */
-    const Queue: {
-        nextTracks: any[];
-        prevTracks: any[];
-        queueRevision: string;
-        track: any;
-    };
-    /**
-     * Remove a track/album or array of tracks/albums from current queue.
-     */
-    function removeFromQueue(uri: string | string[]): Promise<void>;
-    /**
-     * Display a bubble of notification. Useful for a visual feedback.
-     */
-    function showNotification(text: string): void;
-    /**
-     * Set of APIs method to parse and validate URIs.
-     */
-    class URI {
-        constructor(type: string, props: any);
-        public type: string;
-        public id: string;
-
-        /**
-         * Creates an application URI object from the current URI object.
-         *
-         * If the current URI object is already an application type, a copy is made.
-         *
-         * @return The current URI as an application URI.
-         */
-        toAppType(): URI;
-
-        /**
-         * Creates a URI object from an application URI object.
-         *
-         * If the current URI object is not an application type, a copy is made.
-         *
-         * @return The current URI as a real typed URI.
-         */
-        toRealType(): URI;
-
-        /**
-         *
-         * @return The URI representation of this uri.
-         */
-        toURI(): string;
-
-        /**
-         *
-         * @return The URI representation of this uri.
-         */
-        toString(): string;
-
-        /**
-         * Get the URL path of this uri.
-         *
-         * @param opt_leadingSlash True if a leading slash should be prepended.
-         * @return The path of this uri.
-         */
-        toURLPath(opt_leadingSlash: boolean): string;
-
-        /**
-         *
-         * @return The Play URL string for the uri.
-         */
-        toPlayURL(): string;
-
-        /**
-         *
-         * @return The URL string for the uri.
-         */
-        toURL(): string;
-
-        /**
-         *
-         * @return The Open URL string for the uri.
-         */
-        toOpenURL(): string;
-
-        /**
-         *
-         * @return The Play HTTPS URL string for the uri.
-         */
-        toSecurePlayURL(): string;
-
-        /**
-         *
-         * @return The HTTPS URL string for the uri.
-         */
-        toSecureURL(): string;
-
-        /**
-         *
-         * @return The Open HTTPS URL string for the uri.
-         */
-        toSecureOpenURL(): string;
-
-        /**
-         *
-         * @return The id of the uri as a bytestring.
-         */
-        idToByteString(): string;
-
-        getPath(): string;
-
-        getBase62Id(): string;
-
-        /**
-        * Checks whether two URI:s refer to the same thing even though they might
-        * not necessarily be equal.
+   type Icon = "album" | "artist" | "block" | "brightness" | "car" | "chart-down" | "chart-up" | "check" | "check-alt-fill" | "chevron-left" | "chevron-right" | "chromecast-disconnected" | "clock" | "collaborative" | "computer" | "copy" | "download" | "downloaded" | "edit" | "enhance" | "exclamation-circle" | "external-link" | "facebook" | "follow" | "fullscreen" | "gamepad" | "grid-view" | "heart" | "heart-active" | "instagram" | "laptop" | "library" | "list-view" | "location" | "locked" | "locked-active" | "lyrics" | "menu" | "minimize" | "minus" | "more" | "new-spotify-connect" | "offline" | "pause" | "phone" | "play" | "playlist" | "playlist-folder" | "plus-alt" | "plus2px" | "podcasts" | "projector" | "queue" | "repeat" | "repeat-once" | "search" | "search-active" | "shuffle" | "skip-back" | "skip-back15" | "skip-forward" | "skip-forward15" | "soundbetter" | "speaker" | "spotify" | "subtitles" | "tablet" | "ticket" | "twitter" | "visualizer" | "voice" | "volume" | "volume-off" | "volume-one-wave" | "volume-two-wave" | "watch" | "x";
+   type Variant = "bass" | "forte" | "brio" | "altoBrio" | "alto" | "canon" | "celloCanon" | "cello" | "ballad" | "balladBold" | "viola" | "violaBold" | "mesto" | "mestoBold" | "metronome" | "finale" | "finaleBold" | "minuet" | "minuetBold";
+   type SemanticColor = "textBase" | "textSubdued" | "textBrightAccent" | "textNegative" | "textWarning" | "textPositive" | "textAnnouncement" | "essentialBase" | "essentialSubdued" | "essentialBrightAccent" | "essentialNegative" | "essentialWarning" | "essentialPositive" | "essentialAnnouncement" | "decorativeBase" | "decorativeSubdued" | "backgroundBase" | "backgroundHighlight" | "backgroundPress" | "backgroundElevatedBase" | "backgroundElevatedHighlight" | "backgroundElevatedPress" | "backgroundTintedBase" | "backgroundTintedHighlight" | "backgroundTintedPress" | "backgroundUnsafeForSmallTextBase" | "backgroundUnsafeForSmallTextHighlight" | "backgroundUnsafeForSmallTextPress";
+   type Metadata = Partial<Record<string, string>>;
+   type ContextTrack = {
+       uri: string;
+       uid?: string;
+       metadata?: Metadata;
+   };
+   type ProvidedTrack = ContextTrack & {
+       removed?: string[];
+       blocked?: string[];
+       provider?: string;
+   };
+   type ContextOption = {
+       contextURI?: string;
+       index?: number;
+       trackUri?: string;
+       page?: number;
+       trackUid?: string;
+       sortedBy?: string;
+       filteredBy?: string;
+       shuffleContext?: boolean;
+       repeatContext?: boolean;
+       repeatTrack?: boolean;
+       offset?: number;
+       next_page_url?: string;
+       restrictions?: Record<string, string[]>;
+       referrer?: string;
+   };
+   type PlayerState = {
+       timestamp: number;
+       context_uri: string;
+       context_url: string;
+       context_restrictions: Record<string, string>;
+       index?: {
+           page: number;
+           track: number;
+       };
+       track?: ProvidedTrack;
+       playback_id?: string;
+       playback_quality?: string;
+       playback_speed?: number;
+       position_as_of_timestamp: number;
+       duration: number;
+       is_playing: boolean;
+       is_paused: boolean;
+       is_buffering: boolean;
+       play_origin: {
+           feature_identifier: string;
+           feature_version: string;
+           view_uri?: string;
+           external_referrer?: string;
+           referrer_identifier?: string;
+           device_identifier?: string;
+       };
+       options: {
+           shuffling_context?: boolean;
+           repeating_context?: boolean;
+           repeating_track?: boolean;
+       };
+       restrictions: Record<string, string[]>;
+       suppressions: {
+           providers: string[];
+       };
+       debug: {
+           log: string[];
+       };
+       prev_tracks: ProvidedTrack[];
+       next_tracks: ProvidedTrack[];
+       context_metadata: Metadata;
+       page_metadata: Metadata;
+       session_id: string;
+       queue_revision: string;
+   };
+   namespace Player {
+       /**
+        * Register a listener `type` on Spicetify.Player.
         *
-        * These two Playlist URIs, for example, refer to the same playlist:
+        * On default, `Spicetify.Player` always dispatch:
+        *  - `songchange` type when player changes track.
+        *  - `onplaypause` type when player plays or pauses.
+        *  - `onprogress` type when track progress changes.
+        *  - `appchange` type when user changes page.
+        */
+       function addEventListener(type: string, callback: (event?: Event) => void): void;
+       function addEventListener(type: "songchange", callback: (event?: Event & { data: PlayerState }) => void): void;
+       function addEventListener(type: "onplaypause", callback: (event?: Event & { data: PlayerState }) => void): void;
+       function addEventListener(type: "onprogress", callback: (event?: Event & { data: number }) => void): void;
+       function addEventListener(type: "appchange", callback: (event?: Event & { data: {
+           /**
+            * App href path
+            */
+           path: string;
+           /**
+            * App container
+            */
+            container: HTMLElement;
+       } }) => void): void;
+       /**
+        * Skip to previous track.
+        */
+       function back(): void;
+       /**
+        * An object contains all information about current track and player.
+        */
+       const data: PlayerState;
+       /**
+        * Decrease a small amount of volume.
+        */
+       function decreaseVolume(): void;
+       /**
+        * Dispatches an event at `Spicetify.Player`.
+        *
+        * On default, `Spicetify.Player` always dispatch
+        *  - `songchange` type when player changes track.
+        *  - `onplaypause` type when player plays or pauses.
+        *  - `onprogress` type when track progress changes.
+        *  - `appchange` type when user changes page.
+        */
+       function dispatchEvent(event: Event): void;
+       const eventListeners: {
+           [key: string]: Array<(event?: Event) => void>
+       };
+       /**
+        * Convert milisecond to `mm:ss` format
+        * @param milisecond
+        */
+       function formatTime(milisecond: number): string;
+       /**
+        * Return song total duration in milisecond.
+        */
+       function getDuration(): number;
+       /**
+        * Return mute state
+        */
+       function getMute(): boolean;
+       /**
+        * Return elapsed duration in milisecond.
+        */
+       function getProgress(): number;
+       /**
+        * Return elapsed duration in percentage (0 to 1).
+        */
+       function getProgressPercent(): number;
+       /**
+        * Return current Repeat state (No repeat = 0/Repeat all = 1/Repeat one = 2).
+        */
+       function getRepeat(): number;
+       /**
+        * Return current shuffle state.
+        */
+       function getShuffle(): boolean;
+       /**
+        * Return track heart state.
+        */
+       function getHeart(): boolean;
+       /**
+        * Return current volume level (0 to 1).
+        */
+       function getVolume(): number;
+       /**
+        * Increase a small amount of volume.
+        */
+       function increaseVolume(): void;
+       /**
+        * Return a boolean whether player is playing.
+        */
+       function isPlaying(): boolean;
+       /**
+        * Skip to next track.
+        */
+       function next(): void;
+       /**
+        * Pause track.
+        */
+       function pause(): void;
+       /**
+        * Resume track.
+        */
+       function play(): void;
+       /**
+        * Play a track, playlist, album, etc. immediately
+        * @param uri Spotify URI
+        * @param context
+        * @param options
+        */
+       function playUri(uri: string, context?: any, options?: any): Promise<void>;
+       /**
+        * Unregister added event listener `type`.
+        * @param type
+        * @param callback
+        */
+       function removeEventListener(type: string, callback: (event?: Event) => void): void;
+       /**
+        * Seek track to position.
+        * @param position can be in percentage (0 to 1) or in milisecond.
+        */
+       function seek(position: number): void;
+       /**
+        * Turn mute on/off
+        * @param state
+        */
+       function setMute(state: boolean): void;
+       /**
+        * Change Repeat mode
+        * @param mode `0` No repeat. `1` Repeat all. `2` Repeat one track.
+        */
+       function setRepeat(mode: number): void;
+       /**
+        * Turn shuffle on/off.
+        * @param state
+        */
+       function setShuffle(state: boolean): void;
+       /**
+        * Set volume level
+        * @param level 0 to 1
+        */
+       function setVolume(level: number): void;
+       /**
+        * Seek to previous `amount` of milisecond
+        * @param amount in milisecond. Default: 15000.
+        */
+       function skipBack(amount?: number): void;
+       /**
+        * Seek to next  `amount` of milisecond
+        * @param amount in milisecond. Default: 15000.
+        */
+       function skipForward(amount?: number): void;
+       /**
+       * Toggle Heart (Favourite) track state.
+       */
+       function toggleHeart(): void;
+       /**
+        * Toggle Mute/No mute.
+        */
+       function toggleMute(): void;
+       /**
+        * Toggle Play/Pause.
+        */
+       function togglePlay(): void;
+       /**
+        * Toggle No repeat/Repeat all/Repeat one.
+        */
+       function toggleRepeat(): void;
+       /**
+        * Toggle Shuffle/No shuffle.
+        */
+       function toggleShuffle(): void;
+   }
+   /**
+    * Adds a track or array of tracks to prioritized queue.
+    */
+   function addToQueue(uri: ContextTrack[]): Promise<void>;
+   /**
+    * @deprecated
+    */
+   const BridgeAPI: any;
+   /**
+    * @deprecated
+    */
+   const CosmosAPI: any;
+   /**
+    * Async wrappers of CosmosAPI
+    */
+   namespace CosmosAsync {
+       type Method = "DELETE" | "GET" | "HEAD" | "PATCH" | "POST" | "PUT" | "SUB";
+       interface Error {
+           code: number;
+           error: string;
+           message: string;
+           stack?: string;
+       }
+
+       type Headers = Record<string, string>;
+       type Body = Record<string, any>;
+
+       interface Response {
+           body: any;
+           headers: Headers;
+           status: number;
+           uri?: string;
+       }
+
+       function head(url: string, headers?: Headers): Promise<Headers>;
+       function get(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
+       function post(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
+       function put(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
+       function del(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
+       function patch(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
+       function sub(url: string, callback: ((b: Response["body"]) => void), onError?: ((e: Error) => void), body?: Body, headers?: Headers): Promise<Response["body"]>;
+       function postSub(url: string, body: Body | null, callback: ((b: Response["body"]) => void), onError?: ((e: Error) => void)): Promise<Response["body"]>;
+       function request(method: Method, url: string, body?: Body, headers?: Headers): Promise<Response>;
+       function resolve(method: Method, url: string, body?: Body, headers?: Headers): Promise<Response>;
+   }
+   /**
+    * Fetch interesting colors from URI.
+    * @param uri Any type of URI that has artwork (playlist, track, album, artist, show, ...)
+    */
+   function colorExtractor(uri: string): Promise<{
+       DESATURATED: string;
+       LIGHT_VIBRANT: string;
+       PROMINENT: string;
+       VIBRANT: string;
+       VIBRANT_NON_ALARMING: string;
+   }>;
+   /**
+    * @deprecated
+    */
+   function getAblumArtColors(): any;
+   /**
+    * Fetch track analyzed audio data.
+    * Beware, not all tracks have audio data.
+    * @param uri is optional. Leave it blank to get current track
+    * or specify another track uri.
+    */
+   function getAudioData(uri?: string): Promise<any>;
+   /**
+    * Set of APIs method to register, deregister hotkeys/shortcuts
+    */
+   namespace Keyboard {
+       type ValidKey = "BACKSPACE" | "TAB" | "ENTER" | "SHIFT" | "CTRL" | "ALT" | "CAPS" | "ESCAPE" | "SPACE" | "PAGE_UP" | "PAGE_DOWN" | "END" | "HOME" | "ARROW_LEFT" | "ARROW_UP" | "ARROW_RIGHT" | "ARROW_DOWN" | "INSERT" | "DELETE" | "A" | "B" | "C" | "D" | "E" | "F" | "G" | "H" | "I" | "J" | "K" | "L" | "M" | "N" | "O" | "P" | "Q" | "R" | "S" | "T" | "U" | "V" | "W" | "X" | "Y" | "Z" | "WINDOW_LEFT" | "WINDOW_RIGHT" | "SELECT" | "NUMPAD_0" | "NUMPAD_1" | "NUMPAD_2" | "NUMPAD_3" | "NUMPAD_4" | "NUMPAD_5" | "NUMPAD_6" | "NUMPAD_7" | "NUMPAD_8" | "NUMPAD_9" | "MULTIPLY" | "ADD" | "SUBTRACT" | "DECIMAL_POINT" | "DIVIDE" | "F1" | "F2" | "F3" | "F4" | "F5" | "F6" | "F7" | "F8" | "F9" | "F10" | "F11" | "F12" | ";" | "=" | " | " | "-" | "." | "/" | "`" | "[" | "\\" | "]" | "\"" | "~" | "!" | "@" | "#" | "$" | "%" | "^" | "&" | "*" | "(" | ")" | "_" | "+" | ":" | "<" | ">" | "?" | "|";
+       type KeysDefine = string | {
+           key: string;
+           ctrl?: boolean;
+           shift?: boolean;
+           alt?: boolean;
+           meta?: boolean;
+       };
+       const KEYS: Record<ValidKey, string>;
+       function registerShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void): void;
+       function registerIsolatedShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void): void;
+       function registerImportantShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void): void;
+       function _deregisterShortcut(keys: KeysDefine): void;
+       function deregisterImportantShortcut(keys: KeysDefine): void;
+       function changeShortcut(keys: KeysDefine, newKeys: KeysDefine): void;
+   }
+
+   /**
+    * @deprecated
+    */
+   const LiveAPI: any;
+
+   namespace LocalStorage {
+       /**
+        * Empties the list associated with the object of all key/value pairs, if there are any.
+        */
+       function clear(): void;
+       /**
+        * Get key value
+        */
+       function get(key: string): string | null;
+       /**
+        * Delete key
+        */
+       function remove(key: string): void;
+       /**
+        * Set new value for key
+        */
+       function set(key: string, value: string): void;
+   }
+   /**
+    * To create and prepend custom menu item in profile menu.
+    */
+   namespace Menu {
+       /**
+        * Create a single toggle.
+        */
+       class Item {
+           constructor(name: string, isEnabled: boolean, onClick: (self: Item) => void, icon?: Icon | string);
+           name: string;
+           isEnabled: boolean;
+           /**
+            * Change item name
+            */
+           setName(name: string): void;
+           /**
+            * Change item enabled state.
+            * Visually, item would has a tick next to it if its state is enabled.
+            */
+           setState(isEnabled: boolean): void;
+           /**
+            * Change icon
+            */
+           setIcon(icon: Icon | string): void;
+           /**
+            * Item is only available in Profile menu when method "register" is called.
+            */
+           register(): void;
+           /**
+            * Stop item to be prepended into Profile menu.
+            */
+           deregister(): void;
+       }
+
+       /**
+        * Create a sub menu to contain Item toggles.
+        * `Item`s in `subItems` array shouldn't be registered.
+        */
+       class SubMenu {
+           constructor(name: string, subItems: Item[]);
+           name: string;
+           /**
+            * Change SubMenu name
+            */
+           setName(name: string): void;
+           /**
+            * Add an item to sub items list
+            */
+           addItem(item: Item);
+           /**
+            * Remove an item from sub items list
+            */
+           removeItem(item: Item);
+           /**
+            * SubMenu is only available in Profile menu when method "register" is called.
+            */
+           register(): void;
+           /**
+            * Stop SubMenu to be prepended into Profile menu.
+            */
+           deregister(): void;
+       }
+   }
+
+   /**
+    * Keyboard shortcut library
+    *
+    * Documentation: https://craig.is/killing/mice v1.6.5
+    *
+    * Spicetify.Keyboard is wrapper of this library to be compatible with legacy Spotify,
+    * so new extension should use this library instead.
+    */
+    function Mousetrap(element?: any): void;
+
+   /**
+    * Contains vast array of internal APIs.
+    * Please explore in Devtool Console.
+    */
+   const Platform: any;
+   /**
+    * Queue object contains list of queuing tracks,
+    * history of played tracks and current track metadata.
+    */
+   const Queue: {
+       nextTracks: any[];
+       prevTracks: any[];
+       queueRevision: string;
+       track: any;
+   };
+   /**
+    * Remove a track or array of tracks from current queue.
+    */
+   function removeFromQueue(uri: ContextTrack[]): Promise<void>;
+   /**
+    * Display a bubble of notification. Useful for a visual feedback.
+    * @param message Message to display. Can use inline HTML for styling.
+    * @param isError If true, bubble will be red. Defaults to false.
+    * @param msTimeout Time in milliseconds to display the bubble. Defaults to Spotify's value.
+    */
+   function showNotification(message: React.ReactNode, isError?: boolean, msTimeout?: number): void;
+   /**
+    * Set of APIs method to parse and validate URIs.
+    */
+   class URI {
+       constructor(type: string, props: any);
+       public type: string;
+       public hasBase62Id: boolean;
+
+       public id?: string;
+       public disc?: any;
+       public args?: any;
+       public category?: string;
+       public username?: string;
+       public track?: string;
+       public artist?: string;
+       public album?: string;
+       public duration?: number;
+       public query?: string;
+       public country?: string;
+       public global?: boolean;
+       public context?: string | typeof URI | null;
+       public anchor?: string;
+       public play?: any;
+       public toplist?: any;
+
+       /**
+        *
+        * @return The URI representation of this uri.
+        */
+       toURI(): string;
+
+       /**
+        *
+        * @return The URI representation of this uri.
+        */
+       toString(): string;
+
+       /**
+        * Get the URL path of this uri.
+        *
+        * @param opt_leadingSlash True if a leading slash should be prepended.
+        * @return The path of this uri.
+        */
+       toURLPath(opt_leadingSlash: boolean): string;
+
+       /**
+        *
+        * @param origin The origin to use for the URL.
+        * @return The URL string for the uri.
+        */
+       toURL(origin?: string): string;
+
+       /**
+        * Clones a given SpotifyURI instance.
+        *
+        * @return An instance of URI.
+        */
+       clone(): URI | null;
+
+       /**
+        * Gets the path of the URI object by removing all hash and query parameters.
+        *
+        * @return The path of the URI object.
+        */
+       getPath(): string;
+
+       /**
+        * The various URI Types.
+        *
+        * Note that some of the types in this enum are not real URI types, but are
+        * actually URI particles. They are marked so.
+        *
+        */
+       static Type: {
+           AD: string;
+           ALBUM: string;
+           GENRE: string;
+           QUEUE: string;
+           APPLICATION: string;
+           ARTIST: string;
+           ARTIST_TOPLIST: string;
+           ARTIST_CONCERTS: string;
+           AUDIO_FILE: string;
+           COLLECTION: string;
+           COLLECTION_ALBUM: string;
+           COLLECTION_ARTIST: string;
+           COLLECTION_MISSING_ALBUM: string;
+           COLLECTION_TRACK_LIST: string;
+           CONCERT: string;
+           CONTEXT_GROUP: string;
+           DAILY_MIX: string;
+           EMPTY: string;
+           EPISODE: string;
+           /** URI particle; not an actual URI. */
+           FACEBOOK: string;
+           FOLDER: string;
+           FOLLOWERS: string;
+           FOLLOWING: string;
+           IMAGE: string;
+           INBOX: string;
+           INTERRUPTION: string;
+           LIBRARY: string;
+           LIVE: string;
+           ROOM: string;
+           EXPRESSION: string;
+           LOCAL: string;
+           LOCAL_TRACK: string;
+           LOCAL_ALBUM: string;
+           LOCAL_ARTIST: string;
+           MERCH: string;
+           MOSAIC: string;
+           PLAYLIST: string;
+           PLAYLIST_V2: string;
+           PRERELEASE: string;
+           PROFILE: string;
+           PUBLISHED_ROOTLIST: string;
+           RADIO: string;
+           ROOTLIST: string;
+           SEARCH: string;
+           SHOW: string;
+           SOCIAL_SESSION: string;
+           SPECIAL: string;
+           STARRED: string;
+           STATION: string;
+           TEMP_PLAYLIST: string;
+           TOPLIST: string;
+           TRACK: string;
+           TRACKSET: string;
+           USER_TOPLIST: string;
+           USER_TOP_TRACKS: string;
+           UNKNOWN: string;
+           MEDIA: string;
+           QUESTION: string;
+           POLL: string;
+       };
+
+       /**
+        * Creates a new URI object from a parsed string argument.
+        *
+        * @param str The string that will be parsed into a URI object.
+        * @throws TypeError If the string argument is not a valid URI, a TypeError will
+        *     be thrown.
+        * @return The parsed URI object.
+        */
+       static fromString(str: string): URI;
+
+       /**
+        * Parses a given object into a URI instance.
+        *
+        * Unlike URI.fromString, this function could receive any kind of value. If
+        * the value is already a URI instance, it is simply returned.
+        * Otherwise the value will be stringified before parsing.
+        *
+        * This function also does not throw an error like URI.fromString, but
+        * instead simply returns null if it can't parse the value.
+        *
+        * @param value The value to parse.
+        * @return The corresponding URI instance, or null if the
+        *     passed value is not a valid value.
+        */
+       static from(value: any): URI | null;
+
+       /**
+       * Checks whether two URI:s refer to the same thing even though they might
+       * not necessarily be equal.
+       *
+       * These two Playlist URIs, for example, refer to the same playlist:
+       *
+       *   spotify:user:napstersean:playlist:3vxotOnOGDlZXyzJPLFnm2
+       *   spotify:playlist:3vxotOnOGDlZXyzJPLFnm2
+       *
+       * @param baseUri The first URI to compare.
+       * @param refUri The second URI to compare.
+       * @return Whether they shared idenitity
+       */
+       static isSameIdentity(baseUri: URI | string, refUri: URI | string): boolean;
+
+       /**
+        * Returns the hex representation of a Base62 encoded id.
+        *
+        * @param id The base62 encoded id.
+        * @return The hex representation of the base62 id.
+        */
+       static idToHex(id: string): string;
+
+       /**
+        * Returns the base62 representation of a hex encoded id.
+        *
+        * @param hex The hex encoded id.
+        * @return The base62 representation of the id.
+        */
+       static hexToId(hex: string): string;
+
+       /**
+        * Creates a new 'album' type URI.
+        *
+        * @param id The id of the album.
+        * @param disc The disc number of the album.
+        * @return The album URI.
+        */
+       static albumURI(id: string, disc: number): URI;
+
+       /**
+        * Creates a new 'application' type URI.
+        *
+        * @param id The id of the application.
+        * @param args An array containing the arguments to the app.
+        * @return The application URI.
+        */
+       static applicationURI(id: string, args: string[]): URI;
+
+       /**
+        * Creates a new 'artist' type URI.
+        *
+        * @param id The id of the artist.
+        * @return The artist URI.
+        */
+       static artistURI(id: string): URI;
+
+       /**
+        * Creates a new 'collection' type URI.
+        *
+        * @param username The non-canonical username of the rootlist owner.
+        * @param category The category of the collection.
+        * @return The collection URI.
+        */
+       static collectionURI(username: string, category: string): URI;
+
+       /**
+        * Creates a new 'collection-album' type URI.
+        *
+        * @param username The non-canonical username of the rootlist owner.
+        * @param id The id of the album.
+        * @return The collection album URI.
+        */
+       static collectionAlbumURI(username: string, id: string): URI;
+
+       /**
+        * Creates a new 'collection-artist' type URI.
+        *
+        * @param username The non-canonical username of the rootlist owner.
+        * @param id The id of the artist.
+        * @return The collection artist URI.
+        */
+       static collectionAlbumURI(username: string, id: string): URI;
+
+       /**
+        * Creates a new 'concert' type URI.
+        * 
+        * @param id The id of the concert.
+        * @return The concert URI.
+        */
+       static concertURI(id: string): URI;
+
+       /**
+        * Creates a new 'episode' type URI.
+        * 
+        * @param id The id of the episode.
+        * @return The episode URI.
+        */
+       static episodeURI(id: string): URI;
+
+       /**
+        * Creates a new 'folder' type URI.
+        * 
+        * @param id The id of the folder.
+        * @return The folder URI.
+        */
+       static folderURI(id: string): URI;
+
+       /**
+        * Creates a new 'local-album' type URI.
+        * 
+        * @param artist The artist of the album.
+        * @param album The name of the album.
+        * @return The local album URI.
+        */
+       static localAlbumURI(artist: string, album: string): URI;
+
+       /**
+        * Creates a new 'local-artist' type URI.
+        * 
+        * @param artist The name of the artist.
+        * @return The local artist URI.
+        */
+       static localArtistURI(artist: string): URI;
+
+       /**
+        * Creates a new 'playlist-v2' type URI.
+        *
+        * @param id The id of the playlist.
+        * @return The playlist URI.
+        */
+       static playlistV2URI(id: string): URI;
+
+       /**
+        * Creates a new 'prerelease' type URI.
+        * 
+        * @param id The id of the prerelease.
+        * @return The prerelease URI.
+        */
+       static prereleaseURI(id: string): URI;
+
+       /**
+        * Creates a new 'profile' type URI.
+        *
+        * @param username The non-canonical username of the rootlist owner.
+        * @param args A list of arguments.
+        * @return The profile URI.
+        */
+       static profileURI(username: string, args: string[]): URI;
+
+       /**
+        * Creates a new 'search' type URI.
+        *
+        * @param query The unencoded search query.
+        * @return The search URI
+        */
+       static searchURI(query: string): URI;
+
+       /**
+        * Creates a new 'show' type URI.
+        *
+        * @param id The id of the show.
+        * @return The show URI.
+        */
+       static showURI(id: string): URI;
+
+       /**
+        * Creates a new 'station' type URI.
+        *
+        * @param args An array of arguments for the station.
+        * @return The station URI.
+        */
+       static stationURI(args: string[]): URI;
+
+       /**
+        * Creates a new 'track' type URI.
+        *
+        * @param id The id of the track.
+        * @param anchor The point in the track formatted as mm:ss
+        * @param context An optional context URI
+        * @param play Toggles autoplay
+        * @return The track URI.
+        */
+       static trackURI(id: string, anchor: string, context?: string, play: boolean): URI;
+
+       /**
+        * Creates a new 'user-toplist' type URI.
+        *
+        * @param username The non-canonical username of the toplist owner.
+        * @param toplist The toplist type.
+        * @return The user-toplist URI.
+        */
+       static userToplistURI(username: string, toplist: string): URI;
+
+       static isAd(uri: URI | string): boolean;
+       static isAlbum(uri: URI | string): boolean;
+       static isGenre(uri: URI | string): boolean;
+       static isQueue(uri: URI | string): boolean;
+       static isApplication(uri: URI | string): boolean;
+       static isArtist(uri: URI | string): boolean;
+       static isArtistToplist(uri: URI | string): boolean;
+       static isArtistConcerts(uri: URI | string): boolean;
+       static isAudioFile(uri: URI | string): boolean;
+       static isCollection(uri: URI | string): boolean;
+       static isCollectionAlbum(uri: URI | string): boolean;
+       static isCollectionArtist(uri: URI | string): boolean;
+       static isCollectionMissingAlbum(uri: URI | string): boolean;
+       static isCollectionTrackList(uri: URI | string): boolean;
+       static isConcert(uri: URI | string): boolean;
+       static isContextGroup(uri: URI | string): boolean;
+       static isDailyMix(uri: URI | string): boolean;
+       static isEmpty(uri: URI | string): boolean;
+       static isEpisode(uri: URI | string): boolean;
+       static isFacebook(uri: URI | string): boolean;
+       static isFolder(uri: URI | string): boolean;
+       static isFollowers(uri: URI | string): boolean;
+       static isFollowing(uri: URI | string): boolean;
+       static isImage(uri: URI | string): boolean;
+       static isInbox(uri: URI | string): boolean;
+       static isInterruption(uri: URI | string): boolean;
+       static isLibrary(uri: URI | string): boolean;
+       static isLive(uri: URI | string): boolean;
+       static isRoom(uri: URI | string): boolean;
+       static isExpression(uri: URI | string): boolean;
+       static isLocal(uri: URI | string): boolean;
+       static isLocalTrack(uri: URI | string): boolean;
+       static isLocalAlbum(uri: URI | string): boolean;
+       static isLocalArtist(uri: URI | string): boolean;
+       static isMerch(uri: URI | string): boolean;
+       static isMosaic(uri: URI | string): boolean;
+       static isPlaylist(uri: URI | string): boolean;
+       static isPlaylistV2(uri: URI | string): boolean;
+       static isPrerelease(uri: URI | string): boolean;
+       static isProfile(uri: URI | string): boolean;
+       static isPublishedRootlist(uri: URI | string): boolean;
+       static isRadio(uri: URI | string): boolean;
+       static isRootlist(uri: URI | string): boolean;
+       static isSearch(uri: URI | string): boolean;
+       static isShow(uri: URI | string): boolean;
+       static isSocialSession(uri: URI | string): boolean;
+       static isSpecial(uri: URI | string): boolean;
+       static isStarred(uri: URI | string): boolean;
+       static isStation(uri: URI | string): boolean;
+       static isTempPlaylist(uri: URI | string): boolean;
+       static isToplist(uri: URI | string): boolean;
+       static isTrack(uri: URI | string): boolean;
+       static isTrackset(uri: URI | string): boolean;
+       static isUserToplist(uri: URI | string): boolean;
+       static isUserTopTracks(uri: URI | string): boolean;
+       static isUnknown(uri: URI | string): boolean;
+       static isMedia(uri: URI | string): boolean;
+       static isQuestion(uri: URI | string): boolean;
+       static isPoll(uri: URI | string): boolean;
+       static isPlaylistV1OrV2(uri: URI | string): boolean;
+   }
+
+   /**
+    * Create custom menu item and prepend to right click context menu
+    */
+   namespace ContextMenu {
+       type OnClickCallback = (uris: string[], uids?: string[], contextUri?: string) => void;
+       type ShouldAddCallback = (uris: string[], uids?: string[], contextUri?: string) => boolean;
+
+       // Single context menu item
+       class Item {
+           /**
+            * List of valid icons to use.
+            */
+           static readonly iconList: Icon[];
+           constructor(name: string, onClick: OnClickCallback, shouldAdd?: ShouldAddCallback, icon?: Icon, disabled?: boolean);
+           name: string;
+           icon: Icon | string;
+           disabled: boolean;
+           /**
+            * A function returning boolean determines whether item should be prepended.
+            */
+           shouldAdd: ShouldAddCallback;
+           /**
+            * A function to call when item is clicked
+            */
+           onClick: OnClickCallback;
+           /**
+            * Item is only available in Context Menu when method "register" is called.
+            */
+           register: () => void;
+           /**
+            * Stop Item to be prepended into Context Menu.
+            */
+           deregister: () => void;
+       }
+
+       /**
+        * Create a sub menu to contain `Item`s.
+        * `Item`s in `subItems` array shouldn't be registered.
+        */
+       class SubMenu {
+           constructor(name: string, subItems: Iterable<Item>, shouldAdd?: ShouldAddCallback, disabled?: boolean);
+           name: string;
+           disabled: boolean;
+           /**
+            * A function returning boolean determines whether item should be prepended.
+            */
+           shouldAdd: ShouldAddCallback;
+           addItem: (item: Item) => void;
+           removeItem: (item: Item) => void;
+           /**
+            * SubMenu is only available in Context Menu when method "register" is called.
+            */
+           register: () => void;
+           /**
+            * Stop SubMenu to be prepended into Context Menu.
+            */
+           deregister: () => void;
+       }
+   }
+
+   /**
+    * Popup Modal
+    */
+   namespace PopupModal {
+       interface Content {
+           title: string;
+           /**
+            * You can specify a string for simple text display
+            * or a HTML element for interactive config/setting menu
+            */
+           content: string | Element;
+           /**
+            * Bigger window
+            */
+           isLarge?: boolean;
+       }
+
+       function display(e: Content): void;
+       function hide(): void;
+   }
+
+   /** React instance to create components */
+   const React: any;
+   /** React DOM instance to render and mount components */
+   const ReactDOM: any;
+   /** React DOM Server instance to render components to string */
+   const ReactDOMServer: any;
+
+   /** Stock React components exposed from Spotify library */
+   namespace ReactComponent {
+       type ContextMenuProps = {
+           /**
+            * Decide whether to use the global singleton context menu (rendered in <body>)
+            * or a new inline context menu (rendered in a sibling
+            * element to `children`)
+            */
+           renderInline?: boolean;
+           /**
+            * Determins what will trigger the context menu. For example, a click, or a right-click
+            */
+           trigger?: 'click' | 'right-click';
+           /**
+            * Determins is the context menu should open or toggle when triggered
+            */
+           action?: 'toggle' | 'open';
+           /**
+            * The preferred placement of the context menu when it opens.
+            * Relative to trigger element.
+            */
+           placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+           /**
+            * The x and y offset distances at which the context menu should open.
+            * Relative to trigger element and `position`.
+            */
+           offset?: [number, number];
+           /**
+            * Will stop the client from scrolling while the context menu is open
+            */
+           preventScrollingWhileOpen?: boolean;
+           /**
+            * The menu UI to render inside of the context menu.
+            */
+           menu: typeof Spicetify.ReactComponent.Menu |
+               typeof Spicetify.ReactComponent.AlbumMenu |
+               typeof Spicetify.ReactComponent.PodcastShowMenu |
+               typeof Spicetify.ReactComponent.ArtistMenu |
+               typeof Spicetify.ReactComponent.PlaylistMenu;
+           /**
+            * A child of the context menu. Should be `<button>`, `<a>`,
+            * a custom react component that forwards a ref to a `<button>` or `<a>`,
+            * or a function. If a function is passed it will be called with
+            * (`isOpen`, `handleContextMenu`, `ref`) as arguments.
+            */
+           children: Element | ((isOpen?: boolean, handleContextMenu?: (e: MouseEvent) => void, ref?: (e: Element) => void) => Element);
+       };
+       type MenuProps = {
+           /**
+            * Function that is called when the menu is closed
+            */
+           onClose?: () => void;
+           /**
+            * Function that provides the element that focus should jump to when the menu
+            * is opened
+            */
+           getInitialFocusElement?: (el: HTMLElement | null) => HTMLElement | undefined | null;
+       }
+       type MenuItemProps = {
+           /**
+            * Function that runs when `MenuItem` is clicked
+            */
+           onClick?: React.MouseEventHandler<HTMLButtonElement>;
+           /**
+            * Indicates if `MenuItem` is disabled. Disabled items will not cause
+            * the `Menu` to close when clicked.
+            */
+           disabled?: boolean;
+           /**
+            * Indicate that a divider line should be added `before` or `after` this `MenuItem`
+            */
+           divider?: 'before' | 'after' | 'both';
+           /**
+            * React component icon that will be rendered at the end of the `MenuItem`
+            * @deprecated Since Spotify `1.2.8`. Use `leadingIcon` or `trailingIcon` instead
+            */
+           icon?: React.ReactNode;
+           /**
+            * React component icon that will be rendered at the start of the `MenuItem`
+            * @since Spotify `1.2.8`
+            */
+           leadingIcon?: React.ReactNode;
+           /**
+            * React component icon that will be rendered at the end of the `MenuItem`
+            * @since Spotify `1.2.8`
+            */
+           trailingIcon?: React.ReactNode;
+       };
+       type TooltipProps = {
+           /**
+            * Label to display in the tooltip
+            */
+           label: string;
+           /**
+            * The child element that the tooltip will be attached to
+            * and will display when hovered over
+            */
+           children: React.ReactNode;
+           /**
+            * Decide whether to use the global singleton tooltip (rendered in `<body>`)
+            * or a new inline tooltip (rendered in a sibling
+            * element to `children`)
+            */
+           renderInline?: boolean;
+           /**
+            * Delay in milliseconds before the tooltip is displayed
+            * after the user hovers over the child element
+            */
+           showDelay?: number;
+           /**
+            * Determine whether the tooltip should be displayed
+            */
+           disabled?: boolean;
+           /**
+            * The preferred placement of the context menu when it opens.
+            * Relative to trigger element.
+            * @default 'top'
+            */
+           placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+           /**
+            * Class name to apply to the tooltip
+            */
+           labelClassName?: string;
+       };
+       type IconComponentProps = {
+           /**
+            * Icon size
+            * @default 24
+            */
+           iconSize?: number;
+           /**
+            * Icon color
+            * Might not be used by component
+            * @default 'currentColor'
+            */
+           color?: string;
+           /**
+            * Semantic color name
+            * Matches color variables used in xpui
+            * @default Inherit from parent
+            */
+           semanticColor?: SemanticColor;
+           /**
+            * Icon title
+            * @default ''
+            */
+           title?: string;
+           /**
+            * Title ID (internal)
+            */
+           titleId?: string;
+           /**
+            * Icon description
+            */
+           desc?: string;
+           /**
+            * Description ID (internal)
+            */
+           descId?: string;
+           /**
+            * Auto mirror icon
+            * @default false
+            */
+           autoMirror?: boolean;
+       }
+       type TextComponentProps = {
+           /**
+            * Text color
+            * Might not be used by component
+            * @default 'currentColor'
+            */
+           color?: string;
+           /**
+            * Semantic color name
+            * Matches color variables used in xpui
+            * @default Inherit from parent
+            */
+           semanticColor?: SemanticColor;
+           /**
+            * Text style variant
+            * @default 'viola'
+            */
+           variant?: Variant;
+           /**
+            * Bottom padding size
+            */
+           paddingBottom?: string;
+           /**
+            * Font weight
+            */
+           weight?: "book" | "bold" | "black";
+       }
+       type ConfirmDialogProps = {
+           /**
+            * Boolean to determine if the dialog should be opened
+            * @default true
+            */
+           isOpen?: boolean;
+           /**
+            * Whether to allow inline HTML in component text
+            * @default false
+            */
+           allowHTML?: boolean;
+           /**
+            * Dialog title. Can be inline HTML if `allowHTML` is true
+            */
+           titleText: string;
+           /**
+            * Dialog description. Can be inline HTML if `allowHTML` is true
+            */
+           descriptionText?: string;
+           /**
+            * Confirm button text
+            */
+           confirmText?: string;
+           /**
+            * Cancel button text
+            */
+           cancelText?: string;
+           /**
+            * Confirm button aria-label
+            */
+           confirmLabel?: string;
+           /**
+            * Function to run when confirm button is clicked
+            * The dialog does not close automatically, a handler must be included.
+            * @param {React.MouseEvent<HTMLButtonElement>} event
+            */
+           onConfirm?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+           /**
+            * Function to run when cancel button is clicked.
+            * The dialog does not close automatically, a handler must be included.
+            * @param {React.MouseEvent<HTMLButtonElement>} event
+            */
+           onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+           /**
+            * Function to run when dialog is clicked outside of.
+            * By default, this will run `onClose`.
+            * A handler must be included to close the dialog.
+            * @param {React.MouseEvent<HTMLButtonElement>} event
+            */
+           onOutside?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+       }
+       type PanelSkeletonProps = {
+           /**
+            * Aria label for the panel. Does not set the panel header content.
+            */
+           label?: string;
+           /**
+            * Item URI of the panel. Used as reference for Spotify's internal Event Factory.
+            */
+           itemUri?: string;
+           /**
+            * Additional class name to apply to the panel.
+            * @deprecated Spotify `1.2.12`
+            */
+           className?: string;
+           /**
+            * Additional styles to apply to the panel.
+            */
+           style?: React.CSSProperties;
+           /**
+            * Children to render inside the panel.
+            */
+           children?: React.ReactNode;
+       }
+       type PanelContentProps = {
+           /**
+            * Additional class name to apply to the panel.
+            */
+           className?: string;
+           /**
+            * Children to render inside the panel.
+            */
+           children?: React.ReactNode;
+       }
+       type PanelHeaderProps = {
+           /**
+            * Href for the header link.
+            * Can be either a URI for a path within the app, or a URL for an external link.
+            */
+           link?: string;
+           /**
+            * Title of the header.
+            */
+           title?: string;
+           /**
+            * Panel ID. Used to toggle panel open/closed state.
+            */
+           panel: number;
+           /**
+            * Whether or not the panel contains advertisements.
+            * @default false
+            */
+           isAdvert?: boolean;
+           /**
+            * Actions to render in the header.
+            */
+           actions?: React.ReactNode | React.ReactNode[];
+           /**
+            * Function to call when clicking on the close button.
+            * Called before the panel is closed.
+            */
+           onClose?: () => void;
+           /**
+            * Prevent the panel from closing when clicking on the header close button.
+            * @default false
+            */
+           preventDefaultClose?: boolean;
+           /**
+            * Function to call when clicking on the header back button.
+            * If not provided, the back button will not be rendered.
+            */
+           onBack?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+           /**
+            * Font variant for the header title.
+            * @default "balladBold"
+            */
+           titleVariant?: Variant;
+           /**
+            * Semantic color name for the header title.
+            * @default "textBase"
+            */
+           titleSemanticColor?: SemanticColor;
+       }
+       type SliderProps = {
+           /**
+            * Label for the slider.
+            */
+           labelText?: string;
+           /**
+            * The current value of the slider.
+            */
+           value: number;
+           /**
+            * The minimum value of the slider.
+            */
+           min: number;
+           /**
+            * The maximum value of the slider.
+            */
+           max: number;
+           /**
+            * The step value of the slider.
+            */
+           step: number;
+           /**
+            * Whether or not the slider is disabled/can be interacted with.
+            * @default true
+            */
+           isInteractive?: boolean;
+           /**
+            * Whether or not the active style of the slider should be shown.
+            * This is equivalent to the slider being focused/hovered.
+            * @default false
+            */
+           forceActiveStyles?: boolean;
+           /**
+            * Callback function that is called when the slider starts being dragged.
+            *
+            * @param {number} value The current value of the slider in percent.
+            */
+           onDragStart: (value: number) => void;
+           /**
+            * Callback function that is called when the slider is being dragged.
+            *
+            * @param {number} value The current value of the slider in percent.
+            */
+           onDragMove: (value: number) => void;
+           /**
+            * Callback function that is called when the slider stops being dragged.
+            *
+            * @param {number} value The current value of the slider in percent.
+            */
+           onDragEnd: (value: number) => void;
+           /**
+            * Callback function that is called when the slider incremented a step.
+            *
+            * @deprecated Use `onDrag` props instead.
+            */
+           onStepForward?: () => void;
+           /**
+            * Callback function that is called when the slider decremented a step.
+            *
+            * @deprecated Use `onDrag` props instead.
+            */
+           onStepBackward?: () => void;
+       }
+       /**
+        * Generic context menu provider
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.ContextMenuProps
+        */
+       const ContextMenu: any;
+       /**
+        * Wrapper of ReactComponent.ContextMenu with props: action = 'toggle' and trigger = 'right-click'
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.ContextMenuProps
+        */
+       const RightClickMenu: any;
+       /**
+        * Outer layer contain ReactComponent.MenuItem(s)
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.MenuProps
+        */
+       const Menu: any;
+       /**
+        * Component to construct menu item
+        * Used as ReactComponent.Menu children
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.MenuItemProps
+        */
+       const MenuItem: any;
+       /**
+        * Tailored ReactComponent.Menu for specific type of object
+        *
+        * Props: {
+        *      uri: string;
+        *      onRemoveCallback?: (uri: string) => void;
+        * }
+        */
+       const AlbumMenu: any;
+       const PodcastShowMenu: any;
+       const ArtistMenu: any;
+       const PlaylistMenu: any;
+       const TrackMenu: any;
+       /**
+        * Component to display tooltip when hovering over element
+        * Useful for accessibility
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.TooltipProps
+        */
+       const TooltipWrapper: any;
+       /**
+        * Component to render Spotify-style icon
+        * @since Spotify `1.1.95`
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.IconComponentProps
+        */
+       const IconComponent: any;
+       /**
+        * Component to render Spotify-style text
+        * @since Spotify `1.1.95`
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.TextComponentProps
+        */
+       const TextComponent: any;
+       /**
+        * Component to render Spotify-style confirm dialog
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.ConfirmDialogProps
+        */
+       const ConfirmDialog: any;
+       /**
+        * Component to render Spotify-style panel skeleton
         *
-        *   spotify:user:napstersean:playlist:3vxotOnOGDlZXyzJPLFnm2
-        *   spotify:playlist:3vxotOnOGDlZXyzJPLFnm2
+        * Props:
+        * @see Spicetify.ReactComponent.PanelSkeletonProps
+        */
+       const PanelSkeleton: any;
+       /**
+        * Component to render Spotify-style panel content
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.PanelContentProps
+        */
+       const PanelContent: any;
+       /**
+        * Component to render Spotify-style panel header
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.PanelHeaderProps
+        */
+       const PanelHeader: any;
+       /**
+        * Component to render Spotify slider
+        *
+        * Used in progress bar, volume slider, crossfade settings, etc.
+        *
+        * Props:
+        * @see Spicetify.ReactComponent.SliderProps
+        */
+       const Slider: any;
+   }
+
+   /**
+    * Add button in top bar next to navigation buttons
+    */
+   namespace Topbar {
+       class Button {
+           constructor(label: string, icon: Icon | string, onClick: (self: Button) => void, disabled?: boolean);
+           label: string;
+           icon: string;
+           onClick: (self: Button) => void;
+           disabled: boolean;
+           element: HTMLButtonElement;
+           tippy: any;
+       }
+   }
+
+   /**
+    * Add button in player controls
+    */
+   namespace Playbar {
+       /**
+        * Create a button on the right side of the playbar
+        */
+       class Button {
+           constructor(label: string, icon: Icon | string, onClick?: (self: Button) => void, disabled?: boolean, active?: boolean, registerOnCreate?: boolean);
+           label: string;
+           icon: string;
+           onClick: (self: Button) => void;
+           disabled: boolean;
+           active: boolean;
+           element: HTMLButtonElement;
+           tippy: any;
+           register: () => void;
+           deregister: () => void;
+       }
+
+       /**
+        * Create a widget next to track info
+        */
+       class Widget {
+           constructor(label: string, icon: Icon | string, onClick?: (self: Widget) => void, disabled?: boolean, active?: boolean, registerOnCreate?: boolean);
+           label: string;
+           icon: string;
+           onClick: (self: Widget) => void;
+           disabled: boolean;
+           active: boolean;
+           element: HTMLButtonElement;
+           tippy: any;
+           register: () => void;
+           deregister: () => void;
+       }
+   }
+
+   /**
+    * SVG icons
+    */
+   const SVGIcons: Record<Icon, string>;
+
+   /**
+    * Return font styling used by Spotify.
+    * @param font Name of the font.
+    * Can match any of the fonts listed in `Spicetify._fontStyle` or returns a generic style otherwise.
+    */
+   function getFontStyle(font: Variant): string;
+
+   /**
+    * A filtered copy of user's `config-xpui` file.
+    */
+   namespace Config {
+       const version: string;
+       const current_theme: string;
+       const color_scheme: string;
+       const extensions: string[];
+       const custom_apps: string[];
+   }
+
+   /**
+    * Tippy.js instance used by Spotify
+    */
+   const Tippy: any;
+   /**
+    * Spicetify's predefined props for Tippy.js
+    * Used to mimic Spotify's tooltip behavior
+    */
+   const TippyProps: any;
+
+   /**
+    * Interface for interacting with Spotify client's app title
+    */
+   namespace AppTitle {
+       /**
+        * Set default app title. This has no effect if the player is running.
+        * Will override any previous forced title.
+        * @param title Title to set
+        * @return Promise that resolves to a function to cancel forced title. This doesn't reset the title.
+        */
+       function set(title: string): Promise<{ clear: () => void }>;
+       /**
+        * Reset app title to default
+        */
+       function reset(): Promise<void>;
+       /**
+        * Get current default app title
+        * @return Current default app title
+        */
+       function get(): Promise<string>;
+       /**
+        * Subscribe to title changes.
+        * This event is not fired when the player changes app title.
+        * @param callback Callback to call when title changes
+        * @return Object with method to unsubscribe
+        */
+       function sub(callback: (title: string) => void): { clear: () => void };
+   }
+
+   /**
+    * Spicetify's QraphQL wrapper for Spotify's GraphQL API endpoints
+    */
+   namespace GraphQL {
+       /**
+        * Possible types of entities.
         *
-        * @param uri The uri to compare identity for.
-        * @return Whether they shared idenitity
-        */
-        isSameIdentity(uri: any): boolean;
-
-        /**
-         * The various URI Types.
-         *
-         * Note that some of the types in this enum are not real URI types, but are
-         * actually URI particles. They are marked so.
-         *
-         */
-        static Type: {
-            EMPTY: string;
-            ALBUM: string;
-            AD: string;
-            /** URI particle; not an actual URI. */
-            APP: string;
-            APPLICATION: string;
-            ARTIST: string;
-            ARTIST_TOPLIST: string;
-            AUDIO_FILE: string;
-            COLLECTION: string;
-            COLLECTION_ALBUM: string;
-            COLLECTION_MISSING_ALBUM: string;
-            COLLECTION_ARTIST: string;
-            CONTEXT_GROUP: string;
-            DAILY_MIX: string;
-            EPISODE: string;
-            /** URI particle; not an actual URI. */
-            FACEBOOK: string;
-            FOLDER: string;
-            FOLLOWERS: string;
-            FOLLOWING: string;
-            /** URI particle; not an actual URI. */
-            GLOBAL: string;
-            IMAGE: string;
-            INBOX: string;
-            INTERRUPTION: string;
-            LOCAL_ARTIST: string;
-            LOCAL_ALBUM: string;
-            LOCAL: string;
-            LIBRARY: string;
-            MOSAIC: string;
-            PLAYLIST: string;
-            /** Only used for URI classification. Not a valid URI fragment. */
-            PLAYLIST_V2: string;
-            PROFILE: string;
-            PUBLISHED_ROOTLIST: string;
-            RADIO: string;
-            ROOTLIST: string;
-            COLLECTION_TRACK_LIST: string;
-            SEARCH: string;
-            SHOW: string;
-            SOCIAL_SESSION: string,
-            CONCERT: string;
-            SPECIAL: string;
-            STARRED: string;
-            STATION: string;
-            TEMP_PLAYLIST: string;
-            /** URI particle; not an actual URI. */
-            TOP: string;
-            TOPLIST: string;
-            TRACK: string;
-            TRACKSET: string;
-            /** URI particle; not an actual URI. */
-            USER: string;
-            USER_TOPLIST: string;
-            USER_TOP_TRACKS: string;
-        };
-
-        /**
-         * Creates a new URI object from a parsed string argument.
-         *
-         * @param str The string that will be parsed into a URI object.
-         * @throws TypeError If the string argument is not a valid URI, a TypeError will
-         *     be thrown.
-         * @return The parsed URI object.
-         */
-        static fromString(str: string): URI;
-
-        /**
-         * Parses a given object into a URI instance.
-         *
-         * Unlike URI.fromString, this function could receive any kind of value. If
-         * the value is already a URI instance, it is simply returned.
-         * Otherwise the value will be stringified before parsing.
-         *
-         * This function also does not throw an error like URI.fromString, but
-         * instead simply returns null if it can't parse the value.
-         *
-         * @param value The value to parse.
-         * @return The corresponding URI instance, or null if the
-         *     passed value is not a valid value.
-         */
-        static from(value: any): URI | null;
-
-        /**
-        * Creates a new URI from a bytestring.
+        * This list is dynamic and may change in the future.
+        */
+       type Query = "decorateItemsForEnhance" | "imageURLAndSize" | "imageSources" | "audioItems" | "creator" | "extractedColors" | "extractedColorsAndImageSources" | "fetchExtractedColorAndImageForAlbumEntity" | "fetchExtractedColorAndImageForArtistEntity" | "fetchExtractedColorAndImageForEpisodeEntity" | "fetchExtractedColorAndImageForPlaylistEntity" | "fetchExtractedColorAndImageForPodcastEntity" | "fetchExtractedColorAndImageForTrackEntity" | "fetchExtractedColorForAlbumEntity" | "fetchExtractedColorForArtistEntity" | "fetchExtractedColorForEpisodeEntity" | "fetchExtractedColorForPlaylistEntity" | "fetchExtractedColorForPodcastEntity" | "fetchExtractedColorForTrackEntity" | "getAlbumNameAndTracks" | "getEpisodeName" | "getTrackName" | "queryAlbumTrackUris" | "queryTrackArtists" | "decorateContextEpisodesOrChapters" | "decorateContextTracks" | "fetchTracksForRadioStation" | "decoratePlaylists" | "playlistUser" | "FetchPlaylistMetadata" | "playlistContentsItemTrackArtist" | "playlistContentsItemTrackAlbum" | "playlistContentsItemTrack" | "playlistContentsItemLocalTrack" | "playlistContentsItemEpisodeShow" | "playlistContentsItemEpisode" | "playlistContentsItemResponse" | "playlistContentsItem" | "FetchPlaylistContents" | "episodeTrailerUri" | "podcastEpisode" | "podcastMetadataV2" | "minimalAudiobook" | "audiobookChapter" | "audiobookMetadataV2" | "fetchExtractedColors" | "queryFullscreenMode" | "queryNpvEpisode" | "queryNpvArtist" | "albumTrack" | "getAlbum" | "queryAlbumTracks" | "queryArtistOverview" | "queryArtistAppearsOn" | "discographyAlbum" | "albumMetadataReleases" | "albumMetadata" | "queryArtistDiscographyAlbums" | "queryArtistDiscographySingles" | "queryArtistDiscographyCompilations" | "queryArtistDiscographyAll" | "queryArtistDiscographyOverview" | "artistPlaylist" | "queryArtistPlaylists" | "queryArtistDiscoveredOn" | "queryArtistFeaturing" | "queryArtistRelated" | "queryArtistMinimal" | "searchModalResults" | "queryWhatsNewFeed" | "whatsNewFeedNewItems" | "SetItemsStateInWhatsNewFeed" | "browseImageURLAndSize" | "browseImageSources" | "browseAlbum" | "browseArtist" | "browseEpisode" | "browseChapter" | "browsePlaylist" | "browsePodcast" | "browseAudiobook" | "browseTrack" | "browseUser" | "browseMerch" | "browseArtistConcerts" | "browseContent" | "browseSectionContainer" | "browseClientFeature" | "browseItem" | "browseAll" | "browsePage";
+       /**
+        * Collection of GraphQL definitions.
+        */
+       const Definitions: Record<Query | string, any>;
+       /**
+        * GraphQL query definitions. Subset of `Definitions` that are used as query requests.
+        */
+       const QueryDefinitions: Record<Query | string, any>;
+       /**
+        * GraphQL mutation definitions. Subset of `Definitions` that are used as mutation requests.
+        */
+       const MutationDefinitions: Record<Query | string, any>;
+       /**
+        * GraphQL response definitions. Subset of `Definitions` that are used as response types.
+        */
+       const ResponseDefinitions: Record<Query | string, any>;
+       /**
+        * Sends a GraphQL query to Spotify.
+        * @description A preinitialized version of `Spicetify.GraphQL.Handler` using current context.
+        * @param query Query to send
+        * @param variables Variables to use
+        * @param context Context to use
+        * @return Promise that resolves to the response
+        */
+       function Request(query: typeof Definitions[Query | string], variables?: Record<string, any>, context?: Record<string, any>): Promise<any>;
+       /**
+        * Context for GraphQL queries.
+        * @description Used to set context for the handler and initialze it.
+        */
+       const Context: Record<string, any>;
+       /**
+        * Handler for GraphQL queries.
+        * @param context Context to use
+        * @return Function to handle GraphQL queries
+        */
+       function Handler(context: Record<string, any>): (query: typeof Definitions[Query | string], variables?: Record<string, any>, context?: Record<string, any>) => Promise<any>;
+   }
+
+   namespace ReactHook {
+       /**
+        * React Hook to create interactive drag-and-drop element
+        * @description Used to create a draggable element that can be dropped into Spotify's components (e.g. Playlist, Folder, Sidebar, Queue)
+        * @param uris List of URIs to be dragged
+        * @param label Label to be displayed when dragging
+        * @param contextUri Context URI of the element from which the drag originated (e.g. Playlist URI)
+        * @param sectionIndex Index of the section in which the drag originated
+        * @param dropOriginUri URI of the desired drop target. Leave empty to allow drop anywhere
+        * @return Function to handle drag event. Should be passed to `onDragStart` prop of the element. All parameters passed onto the hook will be passed onto the handler unless declared otherwise.
         *
-        * @param type The type of the URI.
-        * @param idByteString The ID of the URI as a bytestring.
-        * @param opt_args Optional arguments to the URI constructor.
-        * @return The URI object created.
-        */
-        static fromByteString(type: string, idByteString: string, opt_args?: any): URI;
-
-        /**
-         * Clones a given SpotifyURI instance.
-         *
-         * @param uri The uri to clone.
-         * @return An instance of URI.
-         */
-        static clone(uri: URI): URI | null;
-
-        /**
-         * Returns the canonical representation of a username.
-         *
-         * @param username The username to encode.
-         * @return The encoded canonical representation of the username.
-         */
-        static getCanonicalUsername(username: string): string;
-
-        /**
-         * Returns the non-canonical representation of a username.
-         *
-         * @param username The username to encode.
-         * @return The unencoded canonical representation of the username.
-         */
-        static getDisplayUsername(username: string): string;
-
-        /**
-         * Returns the hex representation of a Base62 encoded id.
-         *
-         * @param id The base62 encoded id.
-         * @return The hex representation of the base62 id.
-         */
-        static idToHex(id: string): string;
-
-        /**
-         * Returns the base62 representation of a hex encoded id.
-         *
-         * @param hex The hex encoded id.
-         * @return The base62 representation of the id.
-         */
-        static hexToId(hex: string): string;
-
-        /**
-         * Creates a new empty URI.
-         *
-         * @return The empty URI.
-         */
-        static emptyURI(): URI;
-
-        /**
-         * Creates a new 'album' type URI.
-         *
-         * @param id The id of the album.
-         * @param disc The disc number of the album.
-         * @return The album URI.
-         */
-        static albumURI(id: string, disc: number): URI;
-
-        /**
-         * Creates a new 'ad' type URI.
-         *
-         * @param id The id of the ad.
-         * @return The ad URI.
-         */
-        static adURI(id: string): URI;
-
-        /**
-         * Creates a new 'audiofile' type URI.
-         *
-         * @param extension The extension of the audiofile.
-         * @param id The id of the extension.
-         * @return The audiofile URI.
-         */
-        static audioFileURI(extension: string, id: string): URI;
-
-        /**
-         * Creates a new 'artist' type URI.
-         *
-         * @param id The id of the artist.
-         * @return The artist URI.
-         */
-        static artistURI(id: string): URI;
-
-        /**
-         * Creates a new 'artist-toplist' type URI.
-         *
-         * @param id The id of the artist.
-         * @param toplist The toplist type.
-         * @return The artist-toplist URI.
-         */
-        static artistToplistURI(id: string, toplist: string): URI;
-
-        /**
-         * Creates a new 'dailymix' type URI.
-         *
-         * @param args An array of arguments for the dailymix.
-         * @return The dailymix URI.
-         */
-        static dailyMixURI(args: string[]): URI;
-
-        /**
-         * Creates a new 'search' type URI.
-         *
-         * @param query The unencoded search query.
-         * @return The search URI
-         */
-        static searchURI(query: string): URI;
-
-        /**
-         * Creates a new 'track' type URI.
-         *
-         * @param id The id of the track.
-         * @param anchor The point in the track formatted as mm:ss
-         * @param context An optional context URI
-         * @param play Toggles autoplay
-         * @return The track URI.
-         */
-        static trackURI(id: string, anchor: string, context: string, play: boolean): URI;
-
-        /**
-         * Creates a new 'trackset' type URI.
-         *
-         * @param tracks An array of 'track' type URIs.
-         * @param name The name of the trackset.
-         * @param index The index in the trackset.
-         * @return The trackset URI.
-         */
-        static tracksetURI(tracks: URI[], name: string, index: number): URI;
-
-        /**
-         * Creates a new 'facebook' type URI.
-         *
-         * @param uid The user id.
-         * @return The facebook URI.
-         */
-        static facebookURI(uid: string): URI;
-
-        /**
-         * Creates a new 'followers' type URI.
-         *
-         * @param username The non-canonical username.
-         * @return The followers URI.
-         */
-        static followersURI(username: string): URI;
-
-        /**
-         * Creates a new 'following' type URI.
-         *
-         * @param username The non-canonical username.
-         * @return The following URI.
-         */
-        static followingURI(username: string): URI;
-
-        /**
-         * Creates a new 'playlist' type URI.
-         *
-         * @param username The non-canonical username of the playlist owner.
-         * @param id The id of the playlist.
-         * @return The playlist URI.
-         */
-        static playlistURI(username: string, id: string): URI;
-
-        /**
-         * Creates a new 'playlist-v2' type URI.
-         *
-         * @param id The id of the playlist.
-         * @return The playlist URI.
-         */
-        static playlistV2URI(id: string): URI;
-
-        /**
-         * Creates a new 'folder' type URI.
-         *
-         * @param username The non-canonical username of the folder owner.
-         * @param id The id of the folder.
-         * @return The folder URI.
-         */
-        static folderURI(username: string, id: string): URI;
-
-        /**
-         * Creates a new 'collectiontracklist' type URI.
-         *
-         * @param username The non-canonical username of the collection owner.
-         * @param id The id of the tracklist.
-         * @return The collectiontracklist URI.
-         */
-        static collectionTrackList(username: string, id: string): URI;
-
-        /**
-         * Creates a new 'starred' type URI.
-         *
-         * @param username The non-canonical username of the starred list owner.
-         * @return The starred URI.
-         */
-        static starredURI(username: string): URI;
-
-        /**
-         * Creates a new 'user-toplist' type URI.
-         *
-         * @param username The non-canonical username of the toplist owner.
-         * @param toplist The toplist type.
-         * @return The user-toplist URI.
-         */
-        static userToplistURI(username: string, toplist: string): URI;
-
-        /**
-         * Creates a new 'user-top-tracks' type URI.
-         *
-         * @deprecated
-         * @param username The non-canonical username of the toplist owner.
-         * @return The user-top-tracks URI.
-         */
-        static userTopTracksURI(username: string): URI;
-
-        /**
-         * Creates a new 'toplist' type URI.
-         *
-         * @param toplist The toplist type.
-         * @param country The country code for the toplist.
-         * @param global True if this is a global rather than a country list.
-         * @return The toplist URI.
-         */
-        static toplistURI(toplist: string, country: string, global: boolean): URI;
-
-        /**
-         * Creates a new 'inbox' type URI.
-         *
-         * @param username The non-canonical username of the inbox owner.
-         * @return The inbox URI.
-         */
-        static inboxURI(username: string): URI;
-
-        /**
-         * Creates a new 'rootlist' type URI.
-         *
-         * @param username The non-canonical username of the rootlist owner.
-         * @return The rootlist URI.
-         */
-        static rootlistURI(username: string): URI;
-
-        /**
-         * Creates a new 'published-rootlist' type URI.
-         *
-         * @param username The non-canonical username of the published-rootlist owner.
-         * @return The published-rootlist URI.
-         */
-        static publishedRootlistURI(username: string): URI;
-
-        /**
-         * Creates a new 'local-artist' type URI.
-         *
-         * @param artist The artist name.
-         * @return The local-artist URI.
-         */
-        static localArtistURI(artist: string): URI;
-
-        /**
-         * Creates a new 'local-album' type URI.
-         *
-         * @param artist The artist name.
-         * @param album The album name.
-         * @return The local-album URI.
-         */
-        static localAlbumURI(artist: string, album: string): URI;
-
-        /**
-         * Creates a new 'local' type URI.
-         *
-         * @param artist The artist name.
-         * @param album The album name.
-         * @param track The track name.
-         * @param duration The track duration in ms.
-         * @return The local URI.
-         */
-        static localURI(artist: string, album: string, track: string, duration: number): URI;
-
-        /**
-         * Creates a new 'library' type URI.
-         *
-         * @param username The non-canonical username of the rootlist owner.
-         * @param category The category of the library.
-         * @return The library URI.
-         */
-        static libraryURI(username: string, category: string): URI;
-
-        /**
-         * Creates a new 'collection' type URI.
-         *
-         * @param username The non-canonical username of the rootlist owner.
-         * @param category The category of the collection.
-         * @return The collection URI.
-         */
-        static collectionURI(username: string, category: string): URI;
-
-        /**
-         * Creates a new 'temp-playlist' type URI.
-         *
-         * @param origin The origin of the temporary playlist.
-         * @param data Additional data for the playlist.
-         * @return The temp-playlist URI.
-         */
-        static temporaryPlaylistURI(origin: string, data: string): URI;
-
-        /**
-         * Creates a new 'context-group' type URI.
-         *
-         * @deprecated
-         * @param origin The origin of the temporary playlist.
-         * @param name The name of the context group.
-         * @return The context-group URI.
-         */
-        static contextGroupURI(origin: string, name: string): URI;
-
-        /**
-         * Creates a new 'profile' type URI.
-         *
-         * @param username The non-canonical username of the rootlist owner.
-         * @param args A list of arguments.
-         * @return The profile URI.
-         */
-        static profileURI(username: string, args: string[]): URI;
-
-        /**
-         * Creates a new 'image' type URI.
-         *
-         * @param id The id of the image.
-         * @return The image URI.
-         */
-        static imageURI(id: string): URI;
-
-
-        /**
-         * Creates a new 'mosaic' type URI.
-         *
-         * @param ids The ids of the mosaic immages.
-         * @return The mosaic URI.
-         */
-        static mosaicURI(ids: string[]): URI;
-
-        /**
-         * Creates a new 'radio' type URI.
-         *
-         * @param args The radio seed arguments.
-         * @return The radio URI.
-         */
-        static radioURI(args: string): URI;
-
-        /**
-         * Creates a new 'special' type URI.
-         *
-         * @param args An array containing the other arguments.
-         * @return The special URI.
-         */
-        static specialURI(args: string[]): URI;
-
-        /**
-         * Creates a new 'station' type URI.
-         *
-         * @param args An array of arguments for the station.
-         * @return The station URI.
-         */
-        static stationURI(args: string[]): URI;
-
-        /**
-         * Creates a new 'application' type URI.
-         *
-         * @param id The id of the application.
-         * @param args An array containing the arguments to the app.
-         * @return The application URI.
-         */
-        static applicationURI(id: string, args: string[]): URI;
-
-        /**
-         * Creates a new 'collection-album' type URI.
-         *
-         * @param username The non-canonical username of the rootlist owner.
-         * @param id The id of the album.
-         * @return The collection-album URI.
-         */
-        static collectionAlbumURI(username: string, id: string): URI;
-
-        /**
-         * Creates a new 'collection-album-missing' type URI.
-         *
-         * @param username The non-canonical username of the rootlist owner.
-         * @param id The id of the album.
-         * @return The collection-album-missing URI.
-         */
-        static collectionMissingAlbumURI(username: string, id: string): URI;
-
-        /**
-         * Creates a new 'collection-artist' type URI.
-         *
-         * @param username The non-canonical username of the rootlist owner.
-         * @param id The id of the artist.
-         * @return The collection-artist URI.
-         */
-        static collectionArtistURI(username: string, id: string): URI;
-
-        /**
-         * Creates a new 'episode' type URI.
-         *
-         * @param id The id of the episode.
-         * @param context An optional context URI
-         * @param play Toggles autoplay in the episode URI
-         * @return The episode URI.
-         */
-        static episodeURI(id: string, context: string, play: boolean): URI;
-
-        /**
-         * Creates a new 'show' type URI.
-         *
-         * @param id The id of the show.
-         * @return The show URI.
-         */
-        static showURI(id: string): URI;
-
-        /**
-         * Creates a new 'concert' type URI.
-         *
-         * @param id The id of the concert.
-         * @return The concert URI.
-         */
-        static concertURI(id: string): URI;
-
-        /**
-         * Creates a new 'socialsession' type URI.
-         *
-         * @param id The token needed to join a social session.
-         * @return The socialsession URI.
-         */
-         static socialSessionURI(id: string): URI;
-
-         /**
-         * Creates a new 'interruption' type URI.
-         *
-         * @param id The id of the interruption.
-         * @return The ad URI.
-         */
-        static interruptionURI(id: string): URI;
-
-        static isAlbum(uri: any): boolean;
-        static isAd(uri: any): boolean;
-        static isApplication(uri: any): boolean;
-        static isArtist(uri: any): boolean;
-        static isCollection(uri: any): boolean;
-        static isCollectionAlbum(uri: any): boolean;
-        static isCollectionArtist(uri: any): boolean;
-        static isDailyMix(uri: any): boolean;
-        static isEpisode(uri: any): boolean;
-        static isFacebook(uri: any): boolean;
-        static isFolder(uri: any): boolean;
-        static isLocalArtist(uri: any): boolean;
-        static isLocalAlbum(uri: any): boolean;
-        static isLocalTrack(uri: any): boolean;
-        static isMosaic(uri: any): boolean;
-        static isPlaylistV1(uri: any): boolean;
-        static isPlaylistV2(uri: any): boolean;
-        static isRadio(uri: any): boolean;
-        static isRootlist(uri: any): boolean;
-        static isSearch(uri: any): boolean;
-        static isShow(uri: any): boolean;
-        static isConcert(uri: any): boolean;
-        static isStation(uri: any): boolean;
-        static isTrack(uri: any): boolean;
-        static isProfile(uri: any): boolean;
-        static isPlaylistV1OrV2(uri: any): boolean;
-        static isSocialSession(uri: any): boolean;
-        static isInterruption(uri: any): boolean;
-    }
-
-    /**
-     * Create custom menu item and prepend to right click context menu
-     */
-    namespace ContextMenu {
-        type Icon = "album" | "artist" | "block" | "chart-down" | "chart-up" | "check" | "check-alt-fill" | "chevron-left" | "chevron-right" | "chromecast-disconnected" | "copy" | "download" | "downloaded" | "edit" | "exclamation-circle" | "external-link" | "facebook" | "follow" | "fullscreen" | "grid-view" | "heart" | "heart-active" | "instagram" | "list-view" | "locked" | "locked-active" | "lyrics" | "minimize" | "more" | "new-spotify-connect" | "offline" | "pause" | "play" | "playlist" | "playlist-folder" | "plus2px" | "plus-alt" | "podcasts" | "repeat" | "repeat-once" | "search" | "search-active" | "shuffle" | "skip-back" | "skip-back15" | "skip-forward" | "skip-forward15" | "soundbetter" | "subtitles" | "twitter" | "volume" | "volume-off" | "volume-one-wave" | "volume-two-wave" | "x";
-        type OnClickCallback = (uris: string[], uids?: string[], contextUri?: string) => void;
-        type ShouldAddCallback = (uris: string[], uids?: string[], contextUri?: string) => boolean;
-
-        // Single context menu item
-        class Item {
-            /**
-             * List of valid icons to use.
-             */
-            static readonly iconList: Icon[];
-            constructor(name: string, onClick: OnClickCallback, shouldAdd?: ShouldAddCallback, icon?: Icon, disabled?: boolean);
-            name: string;
-            icon: Icon | string;
-            disabled: boolean;
-            /**
-             * A function returning boolean determines whether item should be prepended.
-             */
-            shouldAdd: ShouldAddCallback;
-            /**
-             * A function to call when item is clicked
-             */
-            onClick: OnClickCallback;
-            /**
-             * Item is only available in Context Menu when method "register" is called.
-             */
-            register: () => void;
-            /**
-             * Stop Item to be prepended into Context Menu.
-             */
-            deregister: () => void;
-        }
-
-        /**
-         * Create a sub menu to contain `Item`s.
-         * `Item`s in `subItems` array shouldn't be registered.
-         */
-        class SubMenu {
-            constructor(name: string, subItems: Iterable<Item>, shouldAdd?: ShouldAddCallback, disabled?: boolean);
-            name: string;
-            disabled: boolean;
-            /**
-             * A function returning boolean determines whether item should be prepended.
-             */
-            shouldAdd: ShouldAddCallback;
-            addItem: (item: Item) => void;
-            removeItem: (item: Item) => void;
-            /**
-             * SubMenu is only available in Context Menu when method "register" is called.
-             */
-            register: () => void;
-            /**
-             * Stop SubMenu to be prepended into Context Menu.
-             */
-            deregister: () => void;
-        }
-    }
-
-    /**
-     * Popup Modal
-     */
-    namespace PopupModal {
-        interface Content {
-            title: string;
-            /**
-             * You can specify a string for simple text display
-             * or a HTML element for interactive config/setting menu
-             */
-            content: string | Element | JSX.Element; // JSX.Element isn't standard, but seems to work.
-            /**
-             * Bigger window
-             */
-            isLarge?: boolean;
-        }
-
-        function display(e: Content): void;
-        function hide(): void;
-    }
-
-    /** React instance to create components */
-    const React: any;
-    /** React DOM instance to render and mount components */
-    const ReactDOM: any;
-
-    /** Stock React components exposed from Spotify library */
-    namespace ReactComponent {
-        type ContextMenuProps = {
-            /**
-             * Decide whether to use the global singleton context menu (rendered in <body>)
-             * or a new inline context menu (rendered in a sibling
-             * element to `children`)
-             */
-            renderInline?: boolean;
-            /**
-             * Determins what will trigger the context menu. For example, a click, or a right-click
-             */
-            trigger?: 'click' | 'right-click';
-            /**
-             * Determins is the context menu should open or toggle when triggered
-             */
-            action?: 'toggle' | 'open';
-            /**
-             * The preferred placement of the context menu when it opens.
-             * Relative to trigger element.
-             */
-            placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-            /**
-             * The x and y offset distances at which the context menu should open.
-             * Relative to trigger element and `position`.
-             */
-            offset?: [number, number];
-            /**
-             * Will stop the client from scrolling while the context menu is open
-             */
-            preventScrollingWhileOpen?: boolean;
-            /**
-             * The menu UI to render inside of the context menu.
-             */
-            menu: Spicetify.ReactComponent.Menu |
-                Spicetify.ReactComponent.AlbumMenu |
-                Spicetify.ReactComponent.PodcastShowMenu |
-                Spicetify.ReactComponent.ArtistMenu |
-                Spicetify.ReactComponent.PlaylistMenu;
-            /**
-             * A child of the context menu. Should be `<button>`, `<a>`,
-             * a custom react component that forwards a ref to a `<button>` or `<a>`,
-             * or a function. If a function is passed it will be called with
-             * (`isOpen`, `handleContextMenu`, `ref`) as arguments.
-             */
-            children: ContextMenuChildren;
-        };
-        type MenuProps = {
-            /**
-             * Function that is called when the menu is closed
-             */
-            onClose?: () => void;
-            /**
-             * Function that provides the element that focus should jump to when the menu
-             * is opened
-             */
-            getInitialFocusElement?: (el: HTMLElement | null) => HTMLElement | undefined | null;
-        }
-        type MenuItemProps = {
-            /**
-             * Function that runs when `MenuItem` is clicked
-             */
-            onClick?: React.MouseEventHandler<HTMLButtonElement>;
-            /**
-             * Indicates if `MenuItem` is disabled. Disabled items will not cause
-             * the `Menu` to close when clicked.
-             */
-            disabled?: boolean;
-            /**
-             * Indicate that a divider line should be added `before` or `after` this `MenuItem`
-             */
-            divider?: 'before' | 'after' | 'both';
-            /**
-             * React component icon that will be rendered at the end of the `MenuItem`
-             */
-            icon?: React.ReactNode;
-        };
-        /**
-         * Generic context menu provider
-         * 
-         * Props:
-         * @see Spicetify.ReactComponent.ContextMenuProps
-         */
-        const ContextMenu: any;
-        /**
-         * Wrapper of ReactComponent.ContextMenu with props: action = 'toggle' and trigger = 'right-click'
-         * 
-         * Props:
-         * @see Spicetify.ReactComponent.ContextMenuProps
-         */
-        const RightClickMenu: any;
-        /**
-         * Outer layer contain ReactComponent.MenuItem(s)
-         * 
-         * Props:
-         * @see Spicetify.ReactComponent.MenuProps
-         */
-        const Menu: any;
-        /**
-         * Component to construct menu item
-         * Used as ReactComponent.Menu children
-         * 
-         * Props:
-         * @see Spicetify.ReactComponent.MenuItemProps
-         */
-        const MenuItem: any;
-        /**
-         * Tailored ReactComponent.Menu for specific type of object
-         * 
-         * Props: {
-         *      uri: string;
-         *      onRemoveCallback?: (uri: string) => void;
-         * }
-         */
-        const AlbumMenu: any;
-        const PodcastShowMenu: any;
-        const ArtistMenu: any;
-        const PlaylistMenu: any;
-    };
-
-    /**
-     * Add button in top bar next to navigation buttons
-     */
-    namespace Topbar {
-        class Button {
-            constructor(label: string, icon: string, onClick: (self: Button) => void, disabled = false);
-            label: string;
-            icon: string;
-            onClick: (self: Button) => void;
-            disabled: boolean;
-            element: HTMLButtonElement;
-        }
-    }
-
-    /**
-     * SVG icons 
-     */
-    namespace SVGIcons {
-        const check: string;
-    }
-}
+        */
+       function DragHandler(
+           uris?: string[],
+           label?: string,
+           contextUri?: string,
+           sectionIndex?: number,
+           dropOriginUri?: string
+       ): (event: React.DragEvent, uris?: string[], label?: string, contextUri?: string, sectionIndex?: number) => void;
+
+       /**
+        * React Hook to use panel state
+        * @param id ID of the panel to use
+        * @return Object with methods of the panel
+        */
+       function usePanelState(id: number): { toggle: () => void, isActive: boolean };
+
+       /**
+        * React Hook to use extracted color from GraphQL
+        * 
+        * @note This is a wrapper of ReactQuery's `useQuery` hook. 
+        * The component using this hook must be wrapped in a `QueryClientProvider` component.
+        * 
+        * @see https://tanstack.com/query/v3/docs/react/reference/QueryClientProvider
+        * 
+        * @param uri URI of the Spotify image to extract color from.
+        * @param fallbackColor Fallback color to use if the image is not available. Defaults to `#535353`.
+        * @param variant Variant of the color to use. Defaults to `colorRaw`.
+        * 
+        * @return Extracted color hex code.
+        */
+       function useExtractedColor(uri: string, fallbackColor?: string, variant?: "colorRaw" | "colorLight" | "colorDark"): string;
+   }
+
+   /**
+    * An API wrapper to interact with Spotify's Panel/right sidebar.
+    */
+   namespace Panel {
+       /**
+        * Properties that are used by the `registerPanel` function.
+        */
+       type PanelProps = {
+           /**
+            * Label of the Panel.
+            */
+           label?: string;
+           /**
+            * Children to render inside the Panel.
+            * Must be a React Component.
+            * Will be passed a `panel` prop with the Panel ID.
+            */
+           children: React.ReactNode;
+           /**
+            * Determine if the children passed is a custom Panel.
+            * If true, the children will be rendered as is.
+            * Note: All passed props except `children` will be ignored if enabled.
+            *
+            * @default false
+            */
+           isCustom?: boolean;
+           /**
+            * Inline styles to apply to the Panel skeleton.
+            */
+           style?: React.CSSProperties;
+           /**
+            * Additional class name to apply to the Panel content wrapper.
+            */
+           wrapperClassname?: string;
+           /**
+            * Additional class name to apply to the Panel header.
+            */
+           headerClassname?: string;
+           /**
+            * Font variant for the Panel header title.
+            * @default "balladBold"
+            */
+           headerVariant?: Variant;
+           /**
+            * Semantic color name for the Panel header title.
+            * @default "textBase"
+            */
+           headerSemanticColor?: SemanticColor;
+           /**
+            * Href for the header link.
+            * Can be either a URI for a path within the app, or a URL for an external link.
+            */
+           headerLink?: string;
+           /**
+            * Additional actions to render in the header.
+            * Will be rendered next to the close button.
+            */
+           headerActions?: React.ReactNode | React.ReactNode[];
+           /**
+            * Function to call when clicking on the header close button.
+            * Called before the panel is closed.
+            */
+           headerOnClose?: () => void;
+           /**
+            * Prevent the panel from closing when clicking on the header close button.
+            * @default false
+            */
+           headerPreventDefaultClose?: boolean;
+           /**
+            * Function to call when clicking on the header back button.
+            * If not provided, the back button will not be rendered.
+            * @param event Event object
+            */
+           headerOnBack?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+       };
+
+       /**
+        * An object of reserved panel IDs used by Spotify.
+        */
+       const reservedPanelIds: Record<string | number, string | number>;
+       /**
+        * Collection of React Components used by Spotify in the Panel.
+        */
+       const Components: {
+           /**
+            * React Component for the Panel's skeleton.
+            *
+            * Props:
+            * @see Spicetify.ReactComponent.PanelSkeletonProps
+            */
+           PanelSkeleton: any;
+           /**
+            * React Component for the Panel's content.
+            *
+            * Props:
+            * @see Spicetify.ReactComponent.PanelContentProps
+            */
+           PanelContent: any;
+           /**
+            * React Component for the Panel's header.
+            *
+            * Props:
+            * @see Spicetify.ReactComponent.PanelHeaderProps
+            */
+           PanelHeader: any;
+       }
+       /**
+        * Check whether or not a Panel with the provided ID is registered.
+        * @param id Panel ID to check
+        * @return Whether or not a Panel with the provided ID is registered
+        */
+       function hasPanel(id: number): boolean;
+       /**
+        * Get the Panel with the provided ID.
+        * @param id Panel ID to get
+        * @return Panel with the provided ID
+        */
+       function getPanel(id: number): React.ReactNode | undefined;
+       /**
+        * Set the Panel with the provided ID.
+        * If the ID is not registered, it will be set to `0`.
+        * @param id Panel ID to set
+        */
+       function setPanel(id: number): Promise<void>;
+       /**
+        * Subscribe to Panel changes.
+        * @param callback Callback to call when Panel changes
+        */
+       function subPanelState(callback: (id: number) => void): void;
+       /**
+        * Register a new Panel.
+        * An ID will be automatically assigned to the Panel.
+        *
+        * To make it easier and convenient for developers to use the Panel API, this method by default wraps the children passed into a Panel skeleton and content wrapper.
+        *
+        * If you wish to customize the Panel, you can pass `isCustom` as `true` to disable the default wrapper.
+        *
+        * @param props Properties of the Panel
+        * @return Methods and properties of the Panel
+        */
+       function registerPanel(props: PanelProps): {
+           /**
+            * Assigned ID of the Panel.
+            */
+           id: number;
+           /**
+            * Function to toggle the Panel open/closed state.
+            */
+           toggle: () => Promise<void>;
+           /**
+            * Method to subscribe to the related Panel state.
+            * Only fires when the related Panel open/closed state changes.
+            */
+           onStateChange: (callback: (isActive: boolean) => void) => void;
+           /**
+            * Boolean to determine if the Panel is open.
+            */
+           isActive: boolean;
+       };
+       /**
+        * Function to render a Panel of the current ID.
+        * If the ID is not registered or is reserved by Spotify, the function will return `null`.
+        *
+        * Used as a hook for Spotify internal component.
+        * @return Panel of the current ID
+        */
+       function render(): React.ReactNode | null;
+       /**
+        * ID of the current Panel.
+        * @return ID of the current Panel
+        */
+       const currentPanel: number;
+   }
+
+   /**
+    * react-flip-toolkit
+    * @description A lightweight magic-move library for configurable layout transitions.
+    * @link https://github.com/aholachek/react-flip-toolkit
+    */
+   namespace ReactFlipToolkit {
+       const Flipper: any;
+       const Flipped: any;
+       const spring: any;
+   }
+
+   /**
+    * classnames
+    * @description A simple JavaScript utility for conditionally joining classNames together.
+    * @link https://github.com/JedWatson/classnames
+    */
+   function classnames(...args: any[]): string;
+
+   /**
+    * React Query v3
+    * @description A hook for fetching, caching and updating asynchronous data in React.
+    * @link https://github.com/TanStack/query/tree/v3
+    */
+   const ReactQuery: any;
+
+   /**
+    * Analyse and extract color presets from an image. Works for any valid image URL/URI.
+    * @param image Spotify URI to an image, or an image URL.
+    */
+   function extractColorPresets(image: string | string[]): Promise<{
+       colorRaw: Color;
+       colorLight: Color;
+       colorDark: Color;
+       isFallback: boolean;
+   }[]>;
+
+   interface hsl {
+       h: number;
+       s: number;
+       l: number;
+   };
+   interface hsv {
+       h: number;
+       s: number;
+       v: number;
+   };
+   interface rgb {
+       r: number;
+       g: number;
+       b: number;
+   };
+   type CSSColors = "HEX" | "HEXA" | "HSL" | "HSLA" | "RGB" | "RGBA";
+   /**
+    * Spotify's internal color class
+    */
+   class Color {
+       constructor(rgb: rgb, hsl: hsl, hsv: hsv, alpha?: number);
+
+       static BLACK: Color;
+       static WHITE: Color;
+       static CSSFormat: Record<CSSColors, number> & Record<number, CSSColors>;
+
+       a: number;
+       hsl: hsl;
+       hsv: hsv;
+       rgb: rgb;
+
+       /**
+        * Convert CSS representation to Color
+        * @param cssColor CSS representation of the color. Must not contain spaces.
+        * @param alpha Alpha value of the color. Defaults to 1.
+        * @return Color object
+        * @throws {Error} If the CSS color is invalid or unsupported
+        */
+       static fromCSS(cssColor: string, alpha?: number): Color;
+       static fromHSL(hsl: hsl, alpha?: number): Color;
+       static fromHSV(hsv: hsv, alpha?: number): Color;
+       static fromRGB(rgb: rgb, alpha?: number): Color;
+       static fromHex(hex: string, alpha?: number): Color;
+
+       /**
+        * Change the contrast of the color against another so that
+        * the contrast between them is at least `strength`.
+        */
+       contrastAdjust(against: Color, strength?: number): Color;
+
+       /**
+        * Stringify JSON result
+        */
+       stringify(): string;
+
+       /**
+        * Convert to CSS representation
+        * @param colorFormat CSS color format to convert to
+        * @return CSS representation of the color
+        */
+       toCSS(colorFormat: number): string;
+
+       /**
+        * Return RGBA representation of the color
+        */
+       toString(): string;
+   }
+}
\ No newline at end of file
diff --git a/src/utils/combine-playlists.ts b/src/utils/combine-playlists.ts
index 83c1ba8..4232e07 100644
--- a/src/utils/combine-playlists.ts
+++ b/src/utils/combine-playlists.ts
@@ -3,7 +3,7 @@ import { SpotifyCollectionCallResponse } from '../types';
 import { getPaginatedSpotifyData, splitArrayInChunks } from './';
 
 export async function combinePlaylists(sourcePlaylists: SpotifyApi.PlaylistObjectSimplified[], targetPlaylist: SpotifyApi.PlaylistObjectSimplified) {
-   const allTracksWithPossibleDuplicates = await Promise.all(sourcePlaylists.map(async (playlist): Promise<string[]> => {
+   const allTrackUris = await Promise.all(sourcePlaylists.map(async (playlist): Promise<string[]> => {
       if (playlist.id === LIKED_SONGS_PLAYLIST_FACADE.id) {
          return await Spicetify.CosmosAsync.get('sp://core-collection/unstable/@/list/tracks/all?responseFormat=protobufJson')
             .then((res: SpotifyCollectionCallResponse) => res.item.map(item => item.trackMetadata.link));
@@ -11,18 +11,23 @@ export async function combinePlaylists(sourcePlaylists: SpotifyApi.PlaylistObjec
          return await getPaginatedSpotifyData<{ track: { uri: string } }>(playlist.tracks.href + TRACKS_FROM_PLAYLIST_URL_FILTER)
             .then(items => items.map(item => item.track.uri));
       }
-   })).then(arrays => arrays.flatMap(array => array));
+   // Flatten responses and remove duplicates
+   })).then(arrays => Array.from(new Set(arrays.flat())));
 
    const targetTrackUris = await getPaginatedSpotifyData<{ track: { uri: string } }>(targetPlaylist.tracks.href + TRACKS_FROM_PLAYLIST_URL_FILTER)
       .then(items => items.map(item => item.track.uri));
 
    // Filter duplicates from souces usig new Set, then filter duplicates from targetPlaylist using .filter
-   const sourcesTrackUris = Array.from(new Set(allTracksWithPossibleDuplicates)).filter((sourceUri) => !targetTrackUris.includes(sourceUri));
+   const sourcesTrackUris = allTrackUris.filter((sourceUri) => !targetTrackUris.includes(sourceUri));
    const splittedTrackUris = splitArrayInChunks(sourcesTrackUris);
 
-   await Promise.all(splittedTrackUris.map(async (trackUris) => {
-      await Spicetify.CosmosAsync.post(ADD_TRACKS_TO_PLAYLIST_URL(targetPlaylist.id), { uris: trackUris });
+   await Promise.all(splittedTrackUris.map((trackUris) => {
+      return addTracksToPlaylist(targetPlaylist.id, trackUris);
    }));
 
    Spicetify.showNotification(`Added ${sourcesTrackUris.length} tracks to playlist: ${targetPlaylist.name}`);
 }
+
+export function addTracksToPlaylist(playlistId: string, trackUris: string[]) {
+   return Spicetify.CosmosAsync.post(ADD_TRACKS_TO_PLAYLIST_URL(playlistId), { uris: trackUris });
+}
\ No newline at end of file

From 0fd40aba27f92a5c7fbf231bf0b2a76d5ead5458 Mon Sep 17 00:00:00 2001
From: jeroentvb <36192730+jeroentvb@users.noreply.github.com>
Date: Mon, 23 Oct 2023 21:54:49 +0200
Subject: [PATCH 2/4] feat(auto-sync): add settings to enable/disable auto-sync
 - #2

---
 src/app.tsx                              | 56 ++++++++++++++++++++++--
 src/constants/index.ts                   |  1 +
 src/extensions/auto-sync.tsx             |  7 +--
 src/types/combined-playlists-settings.ts |  3 ++
 src/types/index.ts                       |  1 +
 src/types/spicetify.d.ts                 |  2 +-
 src/utils/combined-playlists-settings.ts | 14 ++++++
 src/utils/index.ts                       |  1 +
 8 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 src/types/combined-playlists-settings.ts
 create mode 100644 src/utils/combined-playlists-settings.ts

diff --git a/src/app.tsx b/src/app.tsx
index 5851a3c..8f1e3d6 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { combinePlaylists, getPlaylistInfo, getPaginatedSpotifyData, TrackState } from './utils';
+import { combinePlaylists, getPlaylistInfo, getPaginatedSpotifyData, TrackState, setCombinedPlaylistsSettings, getCombinedPlaylistsSettings } from './utils';
 import { CREATE_NEW_PLAYLIST_IDENTIFIER, CREATE_PLAYLIST_URL, GET_PLAYLISTS_URL, LIKED_SONGS_PLAYLIST_FACADE, LS_KEY } from './constants';
-import type { CombinedPlaylist, SpotifyPlaylist, InitialPlaylistForm } from './types';
+import type { CombinedPlaylist, SpotifyPlaylist, InitialPlaylistForm, CombinedPlaylistsSettings } from './types';
 
 import './assets/css/styles.scss';
 import { SpicetifySvgIcon } from './components/SpicetifySvgIcon';
@@ -9,14 +9,19 @@ import { PlaylistForm } from './components/AddPlaylistForm';
 import { AddPlaylistCard } from './components/AddPlaylistCard';
 import { Card } from './components/Card';
 import { ImportExportModal } from './components/ImportExportModal';
+import { synchronizeCombinedPlaylists } from './extensions/auto-sync';
 
 export interface State {
   playlists: SpotifyPlaylist[];
   combinedPlaylists: CombinedPlaylist[];
   isLoading: boolean;
   isInitializing: boolean;
+  autoSync: boolean;
 }
 
+// Needs to be deinfed to avoid eslint error
+const SpotifyComponents = Spicetify.ReactComponent;
+
 class App extends React.Component<Record<string, unknown>, State> {
 
    get combinedPlaylistsLs(): CombinedPlaylist[] {
@@ -30,11 +35,14 @@ class App extends React.Component<Record<string, unknown>, State> {
    constructor(props: Record<string, unknown>) {
       super(props);
 
+      const settings = getCombinedPlaylistsSettings();
+
       this.state = {
          playlists: [],
          combinedPlaylists: [],
          isLoading: false,
          isInitializing: false,
+         autoSync: settings.autoSync,
       };
    }
 
@@ -182,13 +190,55 @@ class App extends React.Component<Record<string, unknown>, State> {
       });
    }
 
+   toggleAutoSuync() {
+      const newSettings: CombinedPlaylistsSettings = {
+         ...getCombinedPlaylistsSettings(),
+         autoSync: !this.state.autoSync,
+      };
+
+      this.setState({ autoSync: newSettings.autoSync });
+      setCombinedPlaylistsSettings(newSettings);
+   }
+
    render() {
+      const menuWrapper = (<SpotifyComponents.Menu>
+         <SpotifyComponents.MenuItem
+            label="Import / export combined playlists"
+            leadingIcon={<SpicetifySvgIcon iconName="external-link" />}
+            onClick={() => this.openImportExportModal()}
+         >
+            Import / export
+         </SpotifyComponents.MenuItem>
+         <SpotifyComponents.MenuItem
+            label="Toggle auto sync"
+            leadingIcon={<SpicetifySvgIcon iconName="repeat" />}
+            onClick={() => this.toggleAutoSuync()}
+         >
+            {this.state.autoSync ? 'Disable auto sync' : 'Enable auto sync'}
+         </SpotifyComponents.MenuItem>
+         <SpotifyComponents.MenuItem
+            label="Synchronize all combined playlists"
+            leadingIcon={<SpicetifySvgIcon iconName="repeat-once" />}
+            onClick={() => {
+               synchronizeCombinedPlaylists();
+               Spicetify.showNotification('Synchronizing all combined playlists');
+            }}
+         >
+            Synchronize all
+         </SpotifyComponents.MenuItem>
+      </SpotifyComponents.Menu>);
+
       return (
          <div id="combined-playlists--wrapper" className="contentSpacing">
             <header>
                <h1>Playlist combiner</h1>
-               <button onClick={() => this.openImportExportModal()}><SpicetifySvgIcon iconName="external-link" /></button>
                <button onClick={() => this.showAddPlaylistModal()}><SpicetifySvgIcon iconName="plus2px" /></button>
+               <SpotifyComponents.ContextMenu
+                  trigger="click"
+                  menu={menuWrapper}
+               >
+                  <button><SpicetifySvgIcon iconName="more" /></button>
+               </SpotifyComponents.ContextMenu>
             </header>
 
             {!this.state.isInitializing && <div id="combined-playlists--grid" className="main-gridContainer-gridContainer">
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 0e394fc..2e1ea6a 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -12,6 +12,7 @@ export const GET_PLAYLIST_TRACKS_URL = (uri: string) => `sp://core-playlist/v1/p
 export const ADD_TRACKS_TO_PLAYLIST_URL = (id: string) => `https://api.spotify.com/v1/playlists/${id}/tracks`;
 
 export const LS_KEY = 'combined-playlists';
+export const LS_KEY_SETTINGS = 'combined-playlists-settings';
 
 export const CREATE_PLAYLIST_URL = (userId: string) => `https://api.spotify.com/v1/users/${userId}/playlists`;
 
diff --git a/src/extensions/auto-sync.tsx b/src/extensions/auto-sync.tsx
index a3b2807..7f60bb8 100644
--- a/src/extensions/auto-sync.tsx
+++ b/src/extensions/auto-sync.tsx
@@ -1,13 +1,14 @@
 import { GET_PLAYLIST_TRACKS_URL, LS_KEY } from '../constants';
 import type { CombinedPlaylist, PlaylistRowsResponse } from '../types';
-import { addTracksToPlaylist } from '../utils';
+import { addTracksToPlaylist, getCombinedPlaylistsSettings } from '../utils';
 
 (async () => {
    while (!Spicetify?.Platform || !Spicetify?.CosmosAsync) {
       await new Promise(resolve => setTimeout(resolve, 100));
    }
 
-   synchronizeCombinedPlaylists();
+   const autoSync = getCombinedPlaylistsSettings().autoSync;
+   if (autoSync) synchronizeCombinedPlaylists();
 })();
 
 export function synchronizeCombinedPlaylists() {
@@ -34,4 +35,4 @@ export function synchronizeCombinedPlaylists() {
    })).catch((_err) => {
       Spicetify.showNotification('An error while auto-syncing playlists', true);
    });
-}
\ No newline at end of file
+}
diff --git a/src/types/combined-playlists-settings.ts b/src/types/combined-playlists-settings.ts
new file mode 100644
index 0000000..225dd5f
--- /dev/null
+++ b/src/types/combined-playlists-settings.ts
@@ -0,0 +1,3 @@
+export interface CombinedPlaylistsSettings {
+   autoSync: boolean;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index a53ea12..46bd793 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -3,3 +3,4 @@ export * from './initial-playlist-form';
 export * from './spotify-playlist';
 export * from './collection-call-response';
 export * from './playlist-tracks-response';
+export * from './combined-playlists-settings';
diff --git a/src/types/spicetify.d.ts b/src/types/spicetify.d.ts
index 92fcde9..f5de49e 100644
--- a/src/types/spicetify.d.ts
+++ b/src/types/spicetify.d.ts
@@ -948,7 +948,7 @@ declare namespace Spicetify {
             * You can specify a string for simple text display
             * or a HTML element for interactive config/setting menu
             */
-           content: string | Element;
+           content: string | Element | JSX.Element;
            /**
             * Bigger window
             */
diff --git a/src/utils/combined-playlists-settings.ts b/src/utils/combined-playlists-settings.ts
new file mode 100644
index 0000000..150495f
--- /dev/null
+++ b/src/utils/combined-playlists-settings.ts
@@ -0,0 +1,14 @@
+import { LS_KEY_SETTINGS } from '../constants';
+import { CombinedPlaylistsSettings } from '../types';
+
+const DEFAULT_SETTINGS: CombinedPlaylistsSettings = {
+   autoSync: true
+};
+
+export function getCombinedPlaylistsSettings(): CombinedPlaylistsSettings {
+   return JSON.parse(Spicetify.LocalStorage.get(LS_KEY_SETTINGS) ?? 'null') || DEFAULT_SETTINGS;
+}
+
+export function setCombinedPlaylistsSettings(settings: CombinedPlaylistsSettings) {
+   Spicetify.LocalStorage.set(LS_KEY_SETTINGS, JSON.stringify(settings));
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 5679b24..a83c578 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,3 +3,4 @@ export * from './get-paginated-spotify-data';
 export * from './get-playlist-info';
 export * from './split-array-in-chunks';
 export * from './track-state';
+export * from './combined-playlists-settings';

From 0c6f495849407e803e56e5c3b15c709f3b461fa9 Mon Sep 17 00:00:00 2001
From: jeroentvb <36192730+jeroentvb@users.noreply.github.com>
Date: Tue, 24 Oct 2023 19:39:13 +0200
Subject: [PATCH 3/4] refactor(combine-playlists): optimize and remove
 duplicate code

---
 src/app.tsx                    | 23 ++++++++++++++------
 src/constants/index.ts         |  3 ++-
 src/extensions/auto-sync.tsx   | 32 +++++++---------------------
 src/utils/combine-playlists.ts | 39 +++++++++++++++++++++-------------
 4 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 8f1e3d6..7ab9f4a 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -75,7 +75,11 @@ class App extends React.Component<Record<string, unknown>, State> {
          ? await this.createPlaylist(formData.sources)
          : this.findPlaylist(formData.target);
 
-      await combinePlaylists(sourcePlaylists, targetPlaylist);
+      await combinePlaylists(sourcePlaylists, targetPlaylist)
+         .catch((err) => {
+            console.error('An error ocurred while combining playlists', err);
+            Spicetify.showNotification('An error ocurred while combining playlists', true);
+         });
       this.saveCombinedPlaylist(sourcePlaylists, targetPlaylist);
 
       Spicetify.PopupModal.hide();
@@ -128,7 +132,17 @@ class App extends React.Component<Record<string, unknown>, State> {
       const { sources } = this.state.combinedPlaylists.find((combinedPlaylist) => combinedPlaylist.target.id === playlistToSync.id) as CombinedPlaylist;
       const sourcePlaylists = sources.map((sourcePlaylist) => this.findPlaylist(sourcePlaylist.id));
 
-      await combinePlaylists(sourcePlaylists, playlistToSync);
+      await combinePlaylists(sourcePlaylists, playlistToSync)
+         .catch((err) => {
+            console.error('An error ocurred while syncing playlists', err);
+            Spicetify.showNotification('An error ocurred while syncing playlists', true);
+         });
+   }
+
+   @TrackState('isLoading')
+   async syncAllPlaylists() {
+      Spicetify.showNotification('Synchronizing all combined playlists');
+      await synchronizeCombinedPlaylists();
    }
 
    findPlaylist(id: string): SpotifyPlaylist {
@@ -219,10 +233,7 @@ class App extends React.Component<Record<string, unknown>, State> {
          <SpotifyComponents.MenuItem
             label="Synchronize all combined playlists"
             leadingIcon={<SpicetifySvgIcon iconName="repeat-once" />}
-            onClick={() => {
-               synchronizeCombinedPlaylists();
-               Spicetify.showNotification('Synchronizing all combined playlists');
-            }}
+            onClick={() => !this.state.isLoading && this.syncAllPlaylists()}
          >
             Synchronize all
          </SpotifyComponents.MenuItem>
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 2e1ea6a..52ddd99 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -9,6 +9,8 @@ export const TRACKS_FROM_PLAYLIST_URL_FILTER = '?fields=items(track(uri)),next';
 
 export const GET_PLAYLIST_TRACKS_URL = (uri: string) => `sp://core-playlist/v1/playlist/${uri}/rows`;
 
+export const GET_LIKED_SONGS_LIST_URL = 'sp://core-collection/unstable/@/list/tracks/all?responseFormat=protobufJson';
+
 export const ADD_TRACKS_TO_PLAYLIST_URL = (id: string) => `https://api.spotify.com/v1/playlists/${id}/tracks`;
 
 export const LS_KEY = 'combined-playlists';
@@ -42,5 +44,4 @@ export const LIKED_SONGS_PLAYLIST_FACADE: SpotifyPlaylist = {
    },
    type: 'playlist',
    uri: 'spotify:playlist:liked-songs-facade'
-
 };
diff --git a/src/extensions/auto-sync.tsx b/src/extensions/auto-sync.tsx
index 7f60bb8..da0a836 100644
--- a/src/extensions/auto-sync.tsx
+++ b/src/extensions/auto-sync.tsx
@@ -1,6 +1,6 @@
-import { GET_PLAYLIST_TRACKS_URL, LS_KEY } from '../constants';
-import type { CombinedPlaylist, PlaylistRowsResponse } from '../types';
-import { addTracksToPlaylist, getCombinedPlaylistsSettings } from '../utils';
+import { LS_KEY } from '../constants';
+import type { CombinedPlaylist } from '../types';
+import { combinePlaylists, getCombinedPlaylistsSettings } from '../utils';
 
 (async () => {
    while (!Spicetify?.Platform || !Spicetify?.CosmosAsync) {
@@ -14,25 +14,9 @@ import { addTracksToPlaylist, getCombinedPlaylistsSettings } from '../utils';
 export function synchronizeCombinedPlaylists() {
    const combinedPlaylists: CombinedPlaylist[] = JSON.parse(Spicetify.LocalStorage.get(LS_KEY) as string) ?? [];
 
-   Promise.all(combinedPlaylists.map(async ({ sources, target }) => {
-      const sourceUris = await Promise.all(sources.map(async (source) => {
-         const res: PlaylistRowsResponse = await Spicetify.CosmosAsync.get(GET_PLAYLIST_TRACKS_URL(source.uri));
-         return res.rows.map(({ link }) => link);
-      // Flatten result and remove duplicates
-      })).then(res => Array.from(new Set(res.flat())));
-
-      const targetUris = await Spicetify.CosmosAsync.get(GET_PLAYLIST_TRACKS_URL(target.uri))
-         .then((res: PlaylistRowsResponse) => res.rows.map(({ link }) => link));
-
-      const missingUris = sourceUris.filter(uri => !targetUris.includes(uri));
-
-      if (missingUris.length) {
-         Spicetify.showNotification(`Auto-syncing ${missingUris.length} missing tracks to playlist ${target.name}`);
-         // Endpoint only wants the id, not the full uri
-         await addTracksToPlaylist(target.uri.split(':').at(-1) as string, missingUris);
-         Spicetify.showNotification(`Auto-synced ${missingUris.length} missing tracks to playlist ${target.name} 🔥`);
-      }
-   })).catch((_err) => {
-      Spicetify.showNotification('An error while auto-syncing playlists', true);
-   });
+   return Promise.all(combinedPlaylists.map(({ sources, target }) => combinePlaylists(sources, target, true)))
+      .catch((err) => {
+         console.error('An error ocurred while auto-syncing playlists', err);
+         Spicetify.showNotification('An error ocurred while auto-syncing playlists', true);
+      });
 }
diff --git a/src/utils/combine-playlists.ts b/src/utils/combine-playlists.ts
index 4232e07..81475d8 100644
--- a/src/utils/combine-playlists.ts
+++ b/src/utils/combine-playlists.ts
@@ -1,33 +1,42 @@
-import { ADD_TRACKS_TO_PLAYLIST_URL, LIKED_SONGS_PLAYLIST_FACADE, TRACKS_FROM_PLAYLIST_URL_FILTER } from '../constants';
-import { SpotifyCollectionCallResponse } from '../types';
-import { getPaginatedSpotifyData, splitArrayInChunks } from './';
+import { ADD_TRACKS_TO_PLAYLIST_URL, GET_LIKED_SONGS_LIST_URL, GET_PLAYLIST_TRACKS_URL, LIKED_SONGS_PLAYLIST_FACADE } from '../constants';
+import { PlaylistInfo, PlaylistRowsResponse, SpotifyCollectionCallResponse } from '../types';
+import { splitArrayInChunks } from './';
 
-export async function combinePlaylists(sourcePlaylists: SpotifyApi.PlaylistObjectSimplified[], targetPlaylist: SpotifyApi.PlaylistObjectSimplified) {
-   const allTrackUris = await Promise.all(sourcePlaylists.map(async (playlist): Promise<string[]> => {
+export async function combinePlaylists(sourcePlaylists: PlaylistInfo[], targetPlaylist: PlaylistInfo, autoSync = false) {
+   const sourceUris = await Promise.all(sourcePlaylists.map(async (playlist): Promise<string[]> => {
       if (playlist.id === LIKED_SONGS_PLAYLIST_FACADE.id) {
-         return await Spicetify.CosmosAsync.get('sp://core-collection/unstable/@/list/tracks/all?responseFormat=protobufJson')
+         return Spicetify.CosmosAsync.get(GET_LIKED_SONGS_LIST_URL)
             .then((res: SpotifyCollectionCallResponse) => res.item.map(item => item.trackMetadata.link));
       } else {
-         return await getPaginatedSpotifyData<{ track: { uri: string } }>(playlist.tracks.href + TRACKS_FROM_PLAYLIST_URL_FILTER)
-            .then(items => items.map(item => item.track.uri));
+         return Spicetify.CosmosAsync.get(GET_PLAYLIST_TRACKS_URL(playlist.uri))
+            .then((res: PlaylistRowsResponse) => res.rows.map((row) => row.link));
       }
    // Flatten responses and remove duplicates
    })).then(arrays => Array.from(new Set(arrays.flat())));
 
-   const targetTrackUris = await getPaginatedSpotifyData<{ track: { uri: string } }>(targetPlaylist.tracks.href + TRACKS_FROM_PLAYLIST_URL_FILTER)
-      .then(items => items.map(item => item.track.uri));
+   const targetUris = await Spicetify.CosmosAsync.get(GET_PLAYLIST_TRACKS_URL(targetPlaylist.uri))
+      .then((res: PlaylistRowsResponse) => res.rows.map(({ link }) => link));
 
    // Filter duplicates from souces usig new Set, then filter duplicates from targetPlaylist using .filter
-   const sourcesTrackUris = allTrackUris.filter((sourceUri) => !targetTrackUris.includes(sourceUri));
-   const splittedTrackUris = splitArrayInChunks(sourcesTrackUris);
+   const missingUris = sourceUris.filter((sourceUri) => !targetUris.includes(sourceUri));
+   const uriChunks = splitArrayInChunks(missingUris);
 
-   await Promise.all(splittedTrackUris.map((trackUris) => {
+   if (missingUris.length > 0 && autoSync) {
+      Spicetify.showNotification(`Auto-syncing ${missingUris.length} missing tracks to playlist ${targetPlaylist.name}`);
+   }
+
+   await Promise.all(uriChunks.map((trackUris) => {
       return addTracksToPlaylist(targetPlaylist.id, trackUris);
    }));
 
-   Spicetify.showNotification(`Added ${sourcesTrackUris.length} tracks to playlist: ${targetPlaylist.name}`);
+   if (missingUris.length > 0) {
+      const msg = autoSync
+         ? `Auto-synced ${missingUris.length} missing tracks to playlist ${targetPlaylist.name} 🔥`
+         : `Added ${missingUris.length} tracks to playlist: ${targetPlaylist.name}`;
+      Spicetify.showNotification(msg);
+   }
 }
 
 export function addTracksToPlaylist(playlistId: string, trackUris: string[]) {
    return Spicetify.CosmosAsync.post(ADD_TRACKS_TO_PLAYLIST_URL(playlistId), { uris: trackUris });
-}
\ No newline at end of file
+}

From 7548831b411c5a53b5f7742eceff6b04cf281df4 Mon Sep 17 00:00:00 2001
From: jeroentvb <36192730+jeroentvb@users.noreply.github.com>
Date: Tue, 24 Oct 2023 20:30:23 +0200
Subject: [PATCH 4/4] release: 1.4.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 774c910..79467f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "combined-playlists",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "build": "spicetify-creator",