[ { "path": ".coderabbit.yaml", "content": "issue_enrichment:\n auto_enrich:\n enabled: false\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n - package-ecosystem: \"github-actions\"\n directory: \"/\"\n schedule:\n interval: \"daily\"\n - package-ecosystem: \"gomod\"\n directory: \"/\"\n schedule:\n interval: \"daily\"\n" }, { "path": ".github/labeler.yml", "content": "šŸ“¦ aur:\n - \"(aur)\"\nšŸ“¦ snap:\n - \"(snap)\"\nšŸ“¦ brew:\n - \"(brew)\"\nšŸŖŸ windows:\n - \"(windows)\"\nšŸ§ linux:\n - \"(linux)\"\nšŸŽ macos:\n - \"(macos)\"\nšŸ”µ extension:\n - \"(extension|auto.*?skip|bookmark|full.*?app.*?display|keyboard.*?shortcut|shuffle|web.*?now.*?playing|popup.*?lyrics)\"\nšŸ”“ custom app:\n - \"(custom.*?app|lyrics.*?plus|new.*?releases|store|reddit|lyrics)\"\nšŸ–‡ duplicate:\n - \"(duplicate)\"\n" }, { "path": ".github/workflows/build.yml", "content": "name: Build\n\non:\n pull_request:\n branches:\n - \"main\"\n - \"*/main/*/**\"\n push:\n branches:\n - \"main\"\n - \"*/main/*/**\"\n release:\n types: [published]\n\njobs:\n build:\n name: Build\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Setup Go\n uses: actions/setup-go@v6\n with:\n go-version-file: \"go.mod\"\n\n - name: Build\n run: go build .\n\n - name: Format\n run: |\n gofmt -s -l .\n if [ \"$(gofmt -s -l . | wc -l)\" -gt 0 ]; then exit 1; fi\n\n release:\n permissions:\n id-token: write\n contents: write\n attestations: write\n name: Release\n strategy:\n matrix:\n os: [\"linux\", \"darwin\", \"windows\"]\n arch: [\"amd64\", \"arm64\", \"386\"]\n runs-on: ubuntu-latest\n if: startsWith(github.ref, 'refs/tags/v2')\n needs: build\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Get Tag\n run: echo \"TAG=${GITHUB_REF#refs/*/v}\" >> $GITHUB_ENV\n\n - name: Is Unix Platform\n run: echo \"IS_UNIX=${{ matrix.os != 'windows' && matrix.arch != '386' && (matrix.os != 'linux' || matrix.arch != 'arm64') }}\" >> $GITHUB_ENV\n\n - name: Is Windows Platform\n run: echo \"IS_WIN=${{ matrix.os == 'windows' }}\" >> $GITHUB_ENV\n\n - name: Setup Go\n uses: actions/setup-go@v6\n with:\n go-version-file: \"go.mod\"\n\n - name: Build\n if: env.IS_UNIX == 'true' || env.IS_WIN == 'true'\n run: |\n go build -ldflags \"-X main.version=${{ env.TAG }}\" -o \"./spicetify${{ matrix.os == 'windows' && '.exe' || '' }}\"\n chmod +x \"./spicetify${{ matrix.os == 'windows' && '.exe' || '' }}\"\n env:\n GOOS: ${{ matrix.os }}\n GOARCH: ${{ matrix.arch }}\n CGO_ENABLED: 0\n\n - name: Upload Artifact for Signing\n if: env.IS_WIN == 'true'\n id: upload-artifact-for-signing\n uses: actions/upload-artifact@v6\n with:\n name: spicetify-${{ env.TAG }}-${{ matrix.os }}-${{ (matrix.arch == 'amd64' && 'x64') || (matrix.arch == 'arm64' && 'arm64') || 'x32' }}-unsigned\n path: ./spicetify.exe\n\n - name: Sign Windows Executable\n if: env.IS_WIN == 'true'\n uses: signpath/github-action-submit-signing-request@v2\n with:\n api-token: ${{ secrets.SIGNPATH_API_TOKEN }}\n organization-id: ${{ secrets.SIGNPATH_ORG_ID }}\n project-slug: \"cli\"\n signing-policy-slug: \"release-signing\"\n github-artifact-id: ${{ steps.upload-artifact-for-signing.outputs.artifact-id }}\n wait-for-completion: true\n output-artifact-directory: \"./signed\"\n\n - name: Copy Signed Windows Executable\n if: env.IS_WIN == 'true'\n run: |\n cp ./signed/spicetify.exe ./spicetify.exe\n\n - name: Attest output\n uses: actions/attest-build-provenance@v4\n if: env.IS_UNIX == 'true' || env.IS_WIN == 'true'\n with:\n subject-path: \"./spicetify${{ matrix.os == 'windows' && '.exe' || '' }}\"\n subject-name: \"spicetify v${{ env.TAG }} (${{ matrix.os }}, ${{ (matrix.os == 'windows' && matrix.arch == 'amd64' && 'x64') || (matrix.os == 'windows' && matrix.arch == '386' && 'x32') || matrix.arch }})\"\n\n - name: 7z - .tar\n if: env.IS_UNIX == 'true'\n uses: edgarrc/action-7z@v1\n with:\n args: 7z a -bb0 \"spicetify-${{ env.TAG }}-${{ matrix.os }}-${{ matrix.arch }}.tar\" \"./spicetify\" \"./CustomApps\" \"./Extensions\" \"./Themes\" \"./jsHelper\" \"globals.d.ts\" \"css-map.json\"\n\n - name: 7z - .tar.gz\n if: env.IS_UNIX == 'true'\n uses: edgarrc/action-7z@v1\n with:\n args: 7z a -bb0 -sdel -mx9 \"spicetify-${{ env.TAG }}-${{ matrix.os }}-${{ matrix.arch }}.tar.gz\" \"spicetify-${{ env.TAG }}-${{ matrix.os }}-${{ matrix.arch }}.tar\"\n\n - name: 7z - .zip\n if: env.IS_WIN == 'true'\n uses: edgarrc/action-7z@v1\n with:\n args: 7z a -bb0 -mx9 \"spicetify-${{ env.TAG }}-${{ matrix.os }}-${{ (matrix.arch == 'amd64' && 'x64') || (matrix.arch == 'arm64' && 'arm64') || 'x32' }}.zip\" \"./spicetify.exe\" \"./CustomApps\" \"./Extensions\" \"./Themes\" \"./jsHelper\" \"globals.d.ts\" \"css-map.json\"\n\n - name: Release\n if: env.IS_UNIX == 'true' || env.IS_WIN == 'true'\n uses: softprops/action-gh-release@v2\n with:\n files: \"spicetify-${{ env.TAG }}-${{ matrix.os }}-${{ (matrix.os == 'windows' && matrix.arch == 'amd64' && 'x64') || (matrix.os == 'windows' && matrix.arch == '386' && 'x32') || matrix.arch }}.${{ matrix.os == 'windows' && 'zip' || 'tar.gz' }}\"\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n\n trigger-release:\n name: Trigger Homebrew/AUR Release\n runs-on: ubuntu-latest\n needs: release\n steps:\n - name: Update AUR package\n uses: fjogeleit/http-request-action@master\n with:\n url: https://spicetify-update.itsmeow.dev/spicetify-update\n method: GET\n - name: Update Winget package\n uses: vedantmgoyal9/winget-releaser@main\n with:\n identifier: Spicetify.Spicetify\n installers-regex: '-windows-\\w+\\.zip$'\n token: ${{ secrets.SPICETIFY_WINGET_TOKEN }}\n" }, { "path": ".github/workflows/labeler.yml", "content": "name: Issue Labeler\n\non:\n issues:\n types: [opened, edited]\n\njobs:\n triage:\n runs-on: ubuntu-latest\n steps:\n - uses: github/issue-labeler@v3.4\n with:\n repo-token: \"${{ secrets.GITHUB_TOKEN }}\"\n configuration-path: .github/labeler.yml\n enable-versioned-regex: 0\n" }, { "path": ".github/workflows/linter.yml", "content": "name: Code quality\n\non:\n pull_request:\n branches:\n - \"main\"\n - \"*/main/*/**\"\n push:\n branches:\n - \"main\"\n - \"*/main/*/**\"\n\njobs:\n linter:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout the repo\n uses: actions/checkout@v6\n\n - name: Setup Biome\n uses: biomejs/setup-biome@v2\n with:\n version: latest\n\n - name: Run Biome\n run: biome ci . --files-ignore-unknown=true --diagnostic-level=error\n" }, { "path": ".github/workflows/lintpr.yml", "content": "name: Lint Pull Request\n\non:\n pull_request_target:\n types: [opened, edited, synchronize]\n\njobs:\n lintpr:\n runs-on: ubuntu-latest\n steps:\n - name: Lint pull request title\n uses: amannn/action-semantic-pull-request@v6\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n with:\n disallowScopes: |\n [A-Z]+\n subjectPattern: ^(?![A-Z]).+$\n" }, { "path": ".gitignore", "content": "# Executables\nbin\ncli\nspicetify\nspicetify-cli\n*.exe\n\n# MacOS\n.DS_Store\n\n# Node.js\nnode_modules\npackage-lock.json\npackage.json\n\n# Logs\ninstall.log\n\npnpm-lock.yaml\n" }, { "path": ".vscode/extensions.json", "content": "{\n\t\"recommendations\": [\"timonwong.shellcheck\", \"biomejs.biome\", \"golang.go\", \"ms-vscode.powershell\"]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n\t\"editor.formatOnSave\": true,\n\t\"[go]\": {\n\t\t\"editor.defaultFormatter\": \"golang.go\"\n\t},\n\t\"[powershell]\": {\n\t\t\"editor.defaultFormatter\": \"ms-vscode.powershell\"\n\t},\n\t\"[javascript][typescript][json]\": {\n\t\t\"editor.defaultFormatter\": \"biomejs.biome\"\n\t}\n}\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to Spicetify-cli\n\n## Table of Contents\n\n- [I Have a Question](#i-have-a-question)\n- [How to Contribute](#how-to-contribute)\n - [Reporting Bugs](#reporting-bugs)\n - [Suggesting Enhancements](#suggesting-enhancements)\n - [Your First Code Contribution](#your-first-code-contribution)\n - [Improving The Documentation](#improving-the-documentation)\n - [Commit Message Format](#commit-message-format)\n\n## I Have a Question\n\n> If you want to ask a question, we assume that you have read the available [Documentation](https://spicetify.app/docs/getting-started/).\n\nBefore you ask a question, it is best to search for existing [issues](https://github.com/spicetify/cli/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first.\n\nIf you then still feel the need to ask a question and need clarification, we recommend the following:\n\n- Open an [issue](https://github.com/spicetify/cli/issues/new).\n- Provide both Spicetify and Spotify version.\n- Explain what the problem is.\n\nWe will then take care of the issue as soon as possible.\n\n## How to Contribute\n\n> ### Legal Notice\n> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.\n\n### Reporting Bugs\n\n#### Before Submitting a Bug Report\n\nA good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.\n\n- Make sure that you are using the latest version.\n- Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://spicetify.app/docs/getting-started/). If you are looking for support, you might want to check [this section](#i-have-a-question)).\n- To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/spicetify/cli/labels/%F0%9F%90%9B%20bug).\n\n#### How Do I Submit a Good Bug Report?\n\nWe use GitHub issues to track bugs and errors. If you run into an issue with the project:\n\n- Open an [issue](https://github.com/spicetify/cli/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)\n - Use the provided [bug template](https://github.com/spicetify/cli/issues/new?assignees=&labels=%F0%9F%90%9B+bug&projects=&template=bug_report.yml).\n- Explain the behavior you would expect and the actual behavior.\n- Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.\n- Provide the information you collected in the previous section.\n\n### Suggesting Enhancements\n\nThis section guides you through submitting an enhancement suggestion for spicetify, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.\n\n#### Before Submitting an Enhancement\n\n- Make sure that you are using the latest version.\n- Read the [documentation](https://spicetify.app/docs/getting-started/) carefully and find out if the functionality is already covered, maybe by an individual configuration.\n- Perform a [search](https://github.com/spicetify/cli/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.\n- Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.\n\n#### How Do I Submit a Good Enhancement Suggestion?\n\nEnhancement suggestions are tracked as [GitHub issues](https://github.com/spicetify/cli/issues). Create an enhancement suggestion using the provided [feature request template](https://github.com/spicetify/cli/issues/new?assignees=&labels=%E2%9C%A8+feature&projects=&template=feature_request.yml).\n\n- Use a **clear and descriptive title** for the issue to identify the suggestion.\n- Provide a **step-by-step description of the suggested enhancement** in as many details as possible.\n- **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.\n- For GUIs, you may want to **include screenshots** which help you demonstrate the steps or point out the part which the suggestion is related to. Animated GIFS and videos may be helpful but are not expected. Some tools available are the [built-in screen recorder](https://support.apple.com/en-us/102618) on macOS, [LICEcap](https://www.cockos.com/licecap/) on macOS and Windows, and [ShareX](https://getsharex.com/) on Linux.\n- **Explain why this enhancement would be useful** to most spicetify users. You may also want to point out the other projects that solved it better and which could serve as inspiration.\n\n### Your First Code Contribution\n\n#### Requirements\n\n- [Go](https://go.dev/dl/)\n\n#### Environment Setup and Development\n\nFollow the steps outlined in the [documentation](https://spicetify.app/docs/development/compiling) or the steps below.\n1. Clone the repository using `git clone https://github.com/spicetify/cli`.\n2. Enter the repository directory and build the project.\n * Windows\n ```\n cd cli\n go build -o spicetify.exe\n ```\n * Linux and MacOS\n ```\n cd cli\n go build -o spicetify\n ```\n3. Execute the executable file generated by `go build` using `./spicetify` or `./spicetify.exe`.\n\n### Improving The Documentation\n\nTo improve the [documentation](https://spicetify.app/docs/getting-started), navigate to the documentation [repository](https://github.com/spicetify/docs).\n\n### Commit Message Format\n\n (): \n \n [optional]\n\n* **type:** feat | fix | docs | chore | revert\n * **feat:** A new feature\n * **fix:** A bug fix\n * **docs:** Documentation only changes\n * **chore:** Changes to build process, auxiliary tools, libraries, and other things\n * **revert:** A reversion to a previous commit\n* **scope:** Anything specifying place of the commit change\n* **subject:** What changes you have done\n * Use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n * Don't capitalize first letter\n * No dot (.) at the end\n* **body**: More details of your changes, you can mention the most important changes here\n * Use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n\nIf you want to learn more, view the [Angular - Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines).\n" }, { "path": "CustomApps/lyrics-plus/OptionsMenu.js", "content": "const OptionsMenuItemIcon = react.createElement(\n\t\"svg\",\n\t{\n\t\twidth: 16,\n\t\theight: 16,\n\t\tviewBox: \"0 0 16 16\",\n\t\tfill: \"currentColor\",\n\t},\n\treact.createElement(\"path\", {\n\t\td: \"M13.985 2.383L5.127 12.754 1.388 8.375l-.658.77 4.397 5.149 9.618-11.262z\",\n\t})\n);\n\nconst OptionsMenuItem = react.memo(({ onSelect, value, isSelected }) => {\n\treturn react.createElement(\n\t\tSpicetify.ReactComponent.MenuItem,\n\t\t{\n\t\t\tonClick: onSelect,\n\t\t\ticon: isSelected ? OptionsMenuItemIcon : null,\n\t\t\ttrailingIcon: isSelected ? OptionsMenuItemIcon : null,\n\t\t},\n\t\tvalue\n\t);\n});\n\nconst OptionsMenu = react.memo(({ options, onSelect, selected, defaultValue, bold = false }) => {\n\t/**\n\t * ) }\n\t * >\n\t * \n\t * \n\t */\n\tconst menuRef = react.useRef(null);\n\treturn react.createElement(\n\t\tSpicetify.ReactComponent.ContextMenu,\n\t\t{\n\t\t\tmenu: react.createElement(\n\t\t\t\tSpicetify.ReactComponent.Menu,\n\t\t\t\t{},\n\t\t\t\toptions.map(({ key, value }) =>\n\t\t\t\t\treact.createElement(OptionsMenuItem, {\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tonSelect: () => {\n\t\t\t\t\t\t\tonSelect(key);\n\t\t\t\t\t\t\t// Close menu on item click\n\t\t\t\t\t\t\tmenuRef.current?.click();\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisSelected: selected?.key === key,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t),\n\t\t\ttrigger: \"click\",\n\t\t\taction: \"toggle\",\n\t\t\trenderInline: false,\n\t\t},\n\t\treact.createElement(\n\t\t\t\"button\",\n\t\t\t{\n\t\t\t\tclassName: \"optionsMenu-dropBox\",\n\t\t\t\tref: menuRef,\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName: bold ? \"main-type-mestoBold\" : \"main-type-mesto\",\n\t\t\t\t},\n\t\t\t\tselected?.value || defaultValue\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"svg\",\n\t\t\t\t{\n\t\t\t\t\theight: \"16\",\n\t\t\t\t\twidth: \"16\",\n\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\"path\", {\n\t\t\t\t\td: \"M3 6l5 5.794L13 6z\",\n\t\t\t\t})\n\t\t\t)\n\t\t)\n\t);\n});\n\nfunction getMusixmatchTranslationPrefix() {\n\tif (typeof window !== \"undefined\" && typeof window.__lyricsPlusMusixmatchTranslationPrefix === \"string\") {\n\t\treturn window.__lyricsPlusMusixmatchTranslationPrefix;\n\t}\n\n\treturn \"musixmatchTranslation:\";\n}\n\nconst TranslationMenu = react.memo(({ friendlyLanguage, hasTranslation, musixmatchLanguages, musixmatchSelectedLanguage }) => {\n\tconst musixmatchTranslationPrefix = getMusixmatchTranslationPrefix();\n\n\tconst [languageMap, setLanguageMap] = react.useState({});\n\n\treact.useEffect(() => {\n\t\tlet cancelled = false;\n\n\t\tif (typeof ProviderMusixmatch !== \"undefined\" && ProviderMusixmatch && typeof ProviderMusixmatch.getLanguages === \"function\") {\n\t\t\t(async () => {\n\t\t\t\ttry {\n\t\t\t\t\tconst languages = await ProviderMusixmatch.getLanguages();\n\t\t\t\t\tif (!cancelled) {\n\t\t\t\t\t\tsetLanguageMap(languages);\n\t\t\t\t\t}\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error(\"Failed to fetch Musixmatch languages:\", error);\n\t\t\t\t}\n\t\t\t})();\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, []);\n\n\tconst items = useMemo(() => {\n\t\tlet sourceOptions = {\n\t\t\tnone: \"None\",\n\t\t};\n\n\t\tconst translationDisplayOptions = {\n\t\t\treplace: \"Replace original\",\n\t\t\tbelow: \"Below original\",\n\t\t};\n\n\t\tconst languageOptions = {\n\t\t\toff: \"Off\",\n\t\t\t\"zh-hans\": \"Chinese (Simplified)\",\n\t\t\t\"zh-hant\": \"Chinese (Traditional)\",\n\t\t\tja: \"Japanese\",\n\t\t\tko: \"Korean\",\n\t\t};\n\n\t\tlet modeOptions = {\n\t\t\tnone: \"None\",\n\t\t};\n\n\t\tconst musixmatchDisplay = new Intl.DisplayNames([\"en\"], { type: \"language\" });\n\t\tconst availableMusixmatchLanguages = Array.isArray(musixmatchLanguages) ? [...new Set(musixmatchLanguages.filter(Boolean))] : [];\n\t\tconst activeMusixmatchLanguage = musixmatchSelectedLanguage && musixmatchSelectedLanguage !== \"none\" ? musixmatchSelectedLanguage : null;\n\t\tif (hasTranslation.musixmatch && activeMusixmatchLanguage) {\n\t\t\tavailableMusixmatchLanguages.push(activeMusixmatchLanguage);\n\t\t}\n\n\t\tif (availableMusixmatchLanguages.length) {\n\t\t\tconst musixmatchOptionsArray = availableMusixmatchLanguages.map((code) => {\n\t\t\t\tlet label = \"\";\n\t\t\t\ttry {\n\t\t\t\t\tif (languageMap && languageMap[code]) {\n\t\t\t\t\t\tlabel = languageMap[code];\n\t\t\t\t\t} else {\n\t\t\t\t\t\tlabel = musixmatchDisplay.of(code) ?? code.toUpperCase();\n\t\t\t\t\t}\n\t\t\t\t} catch (e) {\n\t\t\t\t\tlabel = code.toUpperCase();\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tkey: `${musixmatchTranslationPrefix}${code}`,\n\t\t\t\t\tlabel: `${label} (Musixmatch)`,\n\t\t\t\t};\n\t\t\t});\n\n\t\t\tmusixmatchOptionsArray.sort((a, b) => a.label.localeCompare(b.label));\n\n\t\t\tconst musixmatchOptions = musixmatchOptionsArray.reduce((acc, { key, label }) => {\n\t\t\t\tacc[key] = label;\n\t\t\t\treturn acc;\n\t\t\t}, {});\n\t\t\tsourceOptions = { ...sourceOptions, ...musixmatchOptions };\n\t\t}\n\n\t\tif (hasTranslation.netease) {\n\t\t\tsourceOptions = {\n\t\t\t\t...sourceOptions,\n\t\t\t\tneteaseTranslation: \"Chinese (Netease)\",\n\t\t\t};\n\t\t}\n\n\t\tswitch (friendlyLanguage) {\n\t\t\tcase \"japanese\": {\n\t\t\t\tmodeOptions = {\n\t\t\t\t\tfurigana: \"Furigana\",\n\t\t\t\t\tromaji: \"Romaji\",\n\t\t\t\t\thiragana: \"Hiragana\",\n\t\t\t\t\tkatakana: \"Katakana\",\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"korean\": {\n\t\t\t\tmodeOptions = {\n\t\t\t\t\tromaja: \"Romaja\",\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"chinese\": {\n\t\t\t\tmodeOptions = {\n\t\t\t\t\tcn: \"Simplified Chinese\",\n\t\t\t\t\thk: \"Traditional Chinese (Hong Kong)\",\n\t\t\t\t\ttw: \"Traditional Chinese (Taiwan)\",\n\t\t\t\t};\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tconst configItems = [\n\t\t\t{\n\t\t\t\tdesc: \"Translation Provider\",\n\t\t\t\tkey: \"translate:translated-lyrics-source\",\n\t\t\t\ttype: ConfigSelection,\n\t\t\t\toptions: sourceOptions,\n\t\t\t\trenderInline: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tdesc: \"Translation Display\",\n\t\t\t\tkey: \"translate:display-mode\",\n\t\t\t\ttype: ConfigSelection,\n\t\t\t\toptions: translationDisplayOptions,\n\t\t\t\trenderInline: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tdesc: \"Language Override\",\n\t\t\t\tkey: \"translate:detect-language-override\",\n\t\t\t\ttype: ConfigSelection,\n\t\t\t\toptions: languageOptions,\n\t\t\t\trenderInline: true,\n\t\t\t\t// for songs in languages that support translation but not Convert (e.g., English), the option is disabled.\n\t\t\t\twhen: () => friendlyLanguage,\n\t\t\t},\n\t\t\t{\n\t\t\t\tdesc: \"Display Mode\",\n\t\t\t\tkey: `translation-mode:${friendlyLanguage}`,\n\t\t\t\ttype: ConfigSelection,\n\t\t\t\toptions: modeOptions,\n\t\t\t\trenderInline: true,\n\t\t\t\t// for songs in languages that support translation but not Convert (e.g., English), the option is disabled.\n\t\t\t\twhen: () => friendlyLanguage,\n\t\t\t},\n\t\t\t{\n\t\t\t\tdesc: \"Convert\",\n\t\t\t\tkey: \"translate\",\n\t\t\t\ttype: ConfigSlider,\n\t\t\t\ttrigger: \"click\",\n\t\t\t\taction: \"toggle\",\n\t\t\t\trenderInline: true,\n\t\t\t\t// for songs in languages that support translation but not Convert (e.g., English), the option is disabled.\n\t\t\t\twhen: () => friendlyLanguage,\n\t\t\t},\n\t\t];\n\n\t\treturn configItems;\n\t}, [\n\t\tfriendlyLanguage,\n\t\thasTranslation.musixmatch,\n\t\thasTranslation.netease,\n\t\tArray.isArray(musixmatchLanguages) ? musixmatchLanguages.join(\",\") : \"\",\n\t\tmusixmatchSelectedLanguage || \"\",\n\t\tmusixmatchTranslationPrefix,\n\t\tlanguageMap,\n\t]);\n\n\tuseEffect(() => {\n\t\t// Currently opened Context Menu does not receive prop changes\n\t\t// If we were to use keys the Context Menu would close on re-render\n\t\tconst event = new CustomEvent(\"lyrics-plus\", {\n\t\t\tdetail: {\n\t\t\t\ttype: \"translation-menu\",\n\t\t\t\titems,\n\t\t\t},\n\t\t});\n\t\tdocument.dispatchEvent(event);\n\t}, [friendlyLanguage, items]);\n\n\treturn react.createElement(\n\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t{\n\t\t\tlabel: \"Conversion\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"lyrics-tooltip-wrapper\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\tSpicetify.ReactComponent.ContextMenu,\n\t\t\t\t{\n\t\t\t\t\tmenu: react.createElement(\n\t\t\t\t\t\tSpicetify.ReactComponent.Menu,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\treact.createElement(\"h3\", null, \" Conversions\"),\n\t\t\t\t\t\treact.createElement(OptionList, {\n\t\t\t\t\t\t\ttype: \"translation-menu\",\n\t\t\t\t\t\t\titems,\n\t\t\t\t\t\t\tonChange: (name, value) => {\n\t\t\t\t\t\t\t\tif (name === \"translate\") {\n\t\t\t\t\t\t\t\t\tCONFIG.visual[\"translate:translated-lyrics-source\"] = \"none\";\n\t\t\t\t\t\t\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:translate:translated-lyrics-source`, \"none\");\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (name === \"translate:translated-lyrics-source\") {\n\t\t\t\t\t\t\t\t\tconst hasTranslationProvider = typeof value === \"string\" && value !== \"none\";\n\t\t\t\t\t\t\t\t\tif (hasTranslationProvider && CONFIG.visual.translate) {\n\t\t\t\t\t\t\t\t\t\tCONFIG.visual.translate = false;\n\t\t\t\t\t\t\t\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:translate`, \"false\");\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tlet nextMusixmatchLanguage = \"none\";\n\t\t\t\t\t\t\t\t\tif (typeof value === \"string\" && value.startsWith(musixmatchTranslationPrefix)) {\n\t\t\t\t\t\t\t\t\t\tnextMusixmatchLanguage = value.slice(musixmatchTranslationPrefix.length) || \"none\";\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif (CONFIG.visual[\"musixmatch-translation-language\"] !== nextMusixmatchLanguage) {\n\t\t\t\t\t\t\t\t\t\tCONFIG.visual[\"musixmatch-translation-language\"] = nextMusixmatchLanguage;\n\t\t\t\t\t\t\t\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:musixmatch-translation-language`, nextMusixmatchLanguage);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tCONFIG.visual[name] = value;\n\t\t\t\t\t\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:${name}`, value);\n\t\t\t\t\t\t\t\tlyricContainerUpdate?.();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t\t\t),\n\t\t\t\t\ttrigger: \"click\",\n\t\t\t\t\taction: \"toggle\",\n\t\t\t\t\trenderInline: true,\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"button\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"lyrics-config-button\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"p1\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\t\tviewBox: \"0 0 16 10.3\",\n\t\t\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t\"ā‡„\"\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n});\n\nconst AdjustmentsMenu = react.memo(({ mode, hasPerformer }) => {\n\treturn react.createElement(\n\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t{\n\t\t\tlabel: \"Adjustments\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"lyrics-tooltip-wrapper\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\tSpicetify.ReactComponent.ContextMenu,\n\t\t\t\t{\n\t\t\t\t\tmenu: react.createElement(\n\t\t\t\t\t\tSpicetify.ReactComponent.Menu,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\treact.createElement(\"h3\", null, \" Adjustments\"),\n\t\t\t\t\t\treact.createElement(OptionList, {\n\t\t\t\t\t\t\titems: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tdesc: \"Font size\",\n\t\t\t\t\t\t\t\t\tkey: \"font-size\",\n\t\t\t\t\t\t\t\t\ttype: ConfigAdjust,\n\t\t\t\t\t\t\t\t\tmin: fontSizeLimit.min,\n\t\t\t\t\t\t\t\t\tmax: fontSizeLimit.max,\n\t\t\t\t\t\t\t\t\tstep: fontSizeLimit.step,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tdesc: \"Track delay\",\n\t\t\t\t\t\t\t\t\tkey: \"delay\",\n\t\t\t\t\t\t\t\t\ttype: ConfigAdjust,\n\t\t\t\t\t\t\t\t\tmin: Number.NEGATIVE_INFINITY,\n\t\t\t\t\t\t\t\t\tmax: Number.POSITIVE_INFINITY,\n\t\t\t\t\t\t\t\t\tstep: 250,\n\t\t\t\t\t\t\t\t\twhen: () => mode === SYNCED || mode === KARAOKE,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tdesc: \"Compact\",\n\t\t\t\t\t\t\t\t\tkey: \"synced-compact\",\n\t\t\t\t\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\t\t\t\t\twhen: () => mode === SYNCED || mode === KARAOKE,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tdesc: \"Show performers\",\n\t\t\t\t\t\t\t\t\tkey: \"show-performers\",\n\t\t\t\t\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\t\t\t\t\twhen: () => hasPerformer && (mode === SYNCED || mode === KARAOKE || mode === UNSYNCED),\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tdesc: \"Dual panel\",\n\t\t\t\t\t\t\t\t\tkey: \"dual-genius\",\n\t\t\t\t\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\t\t\t\t\twhen: () => mode === GENIUS,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tonChange: (name, value) => {\n\t\t\t\t\t\t\t\tCONFIG.visual[name] = value;\n\t\t\t\t\t\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:${name}`, value);\n\t\t\t\t\t\t\t\tname === \"delay\" && localStorage.setItem(`lyrics-delay:${Spicetify.Player.data.item.uri}`, value);\n\t\t\t\t\t\t\t\tlyricContainerUpdate?.();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t\t\t),\n\t\t\t\t\ttrigger: \"click\",\n\t\t\t\t\taction: \"toggle\",\n\t\t\t\t\trenderInline: true,\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"button\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"lyrics-config-button\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"svg\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\t\tviewBox: \"0 0 16 10.3\",\n\t\t\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\treact.createElement(\"path\", {\n\t\t\t\t\t\t\td: \"M 10.8125,0 C 9.7756347,0 8.8094481,0.30798341 8,0.836792 7.1905519,0.30798341 6.2243653,0 5.1875,0 2.3439941,0 0,2.3081055 0,5.15625 0,8.0001222 2.3393555,10.3125 5.1875,10.3125 6.2243653,10.3125 7.1905519,10.004517 8,9.4757081 8.8094481,10.004517 9.7756347,10.3125 10.8125,10.3125 13.656006,10.3125 16,8.0043944 16,5.15625 16,2.3123779 13.660644,0 10.8125,0 Z M 8,2.0146484 C 8.2629394,2.2503662 8.4963378,2.5183106 8.6936034,2.8125 H 7.3063966 C 7.5036622,2.5183106 7.7370606,2.2503662 8,2.0146484 Z M 6.619995,4.6875 C 6.6560059,4.3625487 6.7292481,4.0485841 6.8350831,3.75 h 2.3298338 c 0.1059572,0.2985841 0.1790772,0.6125487 0.21521,0.9375 z M 9.380005,5.625 C 9.3439941,5.9499512 9.2707519,6.2639159 9.1649169,6.5625 H 6.8350831 C 6.7291259,6.2639159 6.6560059,5.9499512 6.6198731,5.625 Z M 5.1875,9.375 c -2.3435059,0 -4.25,-1.8925781 -4.25,-4.21875 0,-2.3261719 1.9064941,-4.21875 4.25,-4.21875 0.7366944,0 1.4296875,0.1899414 2.0330809,0.5233154 C 6.2563478,2.3981934 5.65625,3.7083741 5.65625,5.15625 c 0,1.4478759 0.6000978,2.7580566 1.5643309,3.6954347 C 6.6171875,9.1850584 5.9241944,9.375 5.1875,9.375 Z M 8,8.2978516 C 7.7370606,8.0621337 7.5036622,7.7938231 7.3063966,7.4996337 H 8.6936034 C 8.4963378,7.7938231 8.2629394,8.0621338 8,8.2978516 Z M 10.8125,9.375 C 10.075806,9.375 9.3828125,9.1850584 8.7794191,8.8516847 9.7436522,7.9143066 10.34375,6.6041259 10.34375,5.15625 10.34375,3.7083741 9.7436522,2.3981934 8.7794191,1.4608154 9.3828125,1.1274414 10.075806,0.9375 10.8125,0.9375 c 2.343506,0 4.25,1.8925781 4.25,4.21875 0,2.3261719 -1.906494,4.21875 -4.25,4.21875 z m 0,0\",\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n});\n" }, { "path": "CustomApps/lyrics-plus/Pages.js", "content": "const CreditFooter = react.memo(({ provider, copyright }) => {\n\tif (provider === \"local\") return null;\n\tconst credit = [Spicetify.Locale.get(\"web-player.lyrics.providedBy\", provider)];\n\tif (copyright) {\n\t\tcredit.push(...copyright.split(\"\\n\"));\n\t}\n\n\treturn (\n\t\tprovider &&\n\t\treact.createElement(\n\t\t\t\"p\",\n\t\t\t{\n\t\t\t\tclassName: \"lyrics-lyricsContainer-Provider main-type-mesto\",\n\t\t\t\tdir: \"auto\",\n\t\t\t},\n\t\t\tcredit.join(\" ā€¢ \")\n\t\t)\n\t);\n});\n\nconst IdlingIndicator = ({ isActive, progress, delay }) => {\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: `lyrics-idling-indicator ${\n\t\t\t\t!isActive ? \"lyrics-idling-indicator-hidden\" : \"\"\n\t\t\t} lyrics-lyricsContainer-LyricsLine lyrics-lyricsContainer-LyricsLine-active`,\n\t\t\tstyle: {\n\t\t\t\t\"--position-index\": 0,\n\t\t\t\t\"--animation-index\": 1,\n\t\t\t\t\"--indicator-delay\": `${delay}ms`,\n\t\t\t},\n\t\t},\n\t\treact.createElement(\"div\", { className: `lyrics-idling-indicator__circle ${progress >= 0.05 ? \"active\" : \"\"}` }),\n\t\treact.createElement(\"div\", { className: `lyrics-idling-indicator__circle ${progress >= 0.33 ? \"active\" : \"\"}` }),\n\t\treact.createElement(\"div\", { className: `lyrics-idling-indicator__circle ${progress >= 0.66 ? \"active\" : \"\"}` })\n\t);\n};\n\nconst emptyLine = {\n\tstartTime: 0,\n\tendTime: 0,\n\ttext: [],\n};\n\nconst useTrackPosition = (callback) => {\n\tconst callbackRef = useRef();\n\tcallbackRef.current = callback;\n\n\tuseEffect(() => {\n\t\tconst interval = setInterval(callbackRef.current, 50);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t}, [callbackRef]);\n};\n\nconst KaraokeLine = ({ text, isActive, position, startTime, endTime }) => {\n\tif (endTime && position > endTime) {\n\t\treturn text.map(({ word }) => word).join(\"\");\n\t}\n\n\treturn text.map(({ word, time }, i) => {\n\t\tconst isWordActive = position >= startTime;\n\t\tstartTime += time;\n\t\treturn react.createElement(\n\t\t\t\"span\",\n\t\t\t{\n\t\t\t\tkey: i,\n\t\t\t\tclassName: `lyrics-lyricsContainer-Karaoke-Word${isWordActive ? \" lyrics-lyricsContainer-Karaoke-WordActive\" : \"\"}`,\n\t\t\t\tstyle: {\n\t\t\t\t\t\"--word-duration\": `${time}ms`,\n\t\t\t\t\t// don't animate unless we have to\n\t\t\t\t\ttransition: !isWordActive ? \"all 0s linear\" : \"\",\n\t\t\t\t},\n\t\t\t},\n\t\t\tword\n\t\t);\n\t});\n};\n\nconst SyncedLyricsPage = react.memo(({ lyrics = [], provider, copyright, isKara }) => {\n\tconst [position, setPosition] = useState(0);\n\tconst activeLineEle = useRef();\n\tconst lyricContainerEle = useRef();\n\n\tuseTrackPosition(() => {\n\t\tconst newPos = Spicetify.Player.getProgress();\n\t\tconst delay = CONFIG.visual[\"global-delay\"] + CONFIG.visual.delay;\n\t\tif (newPos !== position) {\n\t\t\tsetPosition(newPos + delay);\n\t\t}\n\t});\n\n\tconst lyricWithEmptyLines = useMemo(\n\t\t() =>\n\t\t\t[emptyLine, emptyLine, ...lyrics].map((line, i) => ({\n\t\t\t\t...line,\n\t\t\t\tlineNumber: i,\n\t\t\t})),\n\t\t[lyrics]\n\t);\n\n\tconst lyricsId = lyrics[0].text;\n\n\tlet activeLineIndex = 0;\n\tfor (let i = lyricWithEmptyLines.length - 1; i > 0; i--) {\n\t\tif (position >= lyricWithEmptyLines[i].startTime) {\n\t\t\tactiveLineIndex = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\tconst activeLines = useMemo(() => {\n\t\tconst startIndex = Math.max(activeLineIndex - 1 - CONFIG.visual[\"lines-before\"], 0);\n\t\t// 3 lines = 1 padding top + 1 padding bottom + 1 active\n\t\tconst linesCount = CONFIG.visual[\"lines-before\"] + CONFIG.visual[\"lines-after\"] + 3;\n\t\treturn lyricWithEmptyLines.slice(startIndex, startIndex + linesCount);\n\t}, [activeLineIndex, lyricWithEmptyLines]);\n\n\tlet offset = lyricContainerEle.current ? lyricContainerEle.current.clientHeight / 2 : 0;\n\tif (activeLineEle.current) {\n\t\toffset += -(activeLineEle.current.offsetTop + activeLineEle.current.clientHeight / 2);\n\t}\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"lyrics-lyricsContainer-SyncedLyricsPage\",\n\t\t\tref: lyricContainerEle,\n\t\t},\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"lyrics-lyricsContainer-SyncedLyrics\",\n\t\t\t\tstyle: {\n\t\t\t\t\t\"--offset\": `${offset}px`,\n\t\t\t\t},\n\t\t\t\tkey: lyricsId,\n\t\t\t},\n\t\t\tactiveLines.map(({ text, lineNumber, startTime, endTime, originalText, performer }, i) => {\n\t\t\t\tif (i === 1 && activeLineIndex === 1) {\n\t\t\t\t\treturn react.createElement(IdlingIndicator, {\n\t\t\t\t\t\tprogress: position / activeLines[2].startTime,\n\t\t\t\t\t\tdelay: activeLines[2].startTime / 3,\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tlet className = \"lyrics-lyricsContainer-LyricsLine\";\n\t\t\t\tconst activeElementIndex = Math.min(activeLineIndex, CONFIG.visual[\"lines-before\"] + 1);\n\t\t\t\tlet ref;\n\n\t\t\t\tconst isActive = activeElementIndex === i;\n\t\t\t\tif (isActive) {\n\t\t\t\t\tclassName += \" lyrics-lyricsContainer-LyricsLine-active\";\n\t\t\t\t\tref = activeLineEle;\n\t\t\t\t}\n\n\t\t\t\tlet animationIndex;\n\t\t\t\tif (activeLineIndex <= CONFIG.visual[\"lines-before\"]) {\n\t\t\t\t\tanimationIndex = i - activeLineIndex;\n\t\t\t\t} else {\n\t\t\t\t\tanimationIndex = i - CONFIG.visual[\"lines-before\"] - 1;\n\t\t\t\t}\n\n\t\t\t\tconst paddingLine = (animationIndex < 0 && -animationIndex > CONFIG.visual[\"lines-before\"]) || animationIndex > CONFIG.visual[\"lines-after\"];\n\t\t\t\tif (paddingLine) {\n\t\t\t\t\tclassName += \" lyrics-lyricsContainer-LyricsLine-paddingLine\";\n\t\t\t\t}\n\t\t\t\tconst showTranslatedBelow = CONFIG.visual[\"translate:display-mode\"] === \"below\";\n\t\t\t\t// If we have original text and we are showing translated below, we should show the original text\n\t\t\t\t// Otherwise we should show the translated text\n\t\t\t\tconst lineText = originalText && showTranslatedBelow ? originalText : text;\n\n\t\t\t\t// Convert lyrics to text for comparison\n\t\t\t\tconst belowOrigin = (typeof originalText === \"object\" ? originalText?.props?.children?.[0] : originalText)?.replace(/\\s+/g, \"\");\n\t\t\t\tconst belowTxt = (typeof text === \"object\" ? text?.props?.children?.[0] : text)?.replace(/\\s+/g, \"\");\n\n\t\t\t\tconst belowMode = showTranslatedBelow && originalText && belowOrigin !== belowTxt;\n\n\t\t\t\treturn react.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t\t\t\"--position-index\": animationIndex,\n\t\t\t\t\t\t\t\"--animation-index\": (animationIndex < 0 ? 0 : animationIndex) + 1,\n\t\t\t\t\t\t\t\"--blur-index\": Math.abs(animationIndex),\n\t\t\t\t\t\t},\n\t\t\t\t\t\tdir: \"auto\",\n\t\t\t\t\t\tref,\n\t\t\t\t\t\tkey: lineNumber,\n\t\t\t\t\t\tonClick: (event) => {\n\t\t\t\t\t\t\tif (startTime) {\n\t\t\t\t\t\t\t\tSpicetify.Player.seek(startTime);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"p\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(Utils.convertParsedToLRC(lyrics, belowMode).original)\n\t\t\t\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Lyrics copied to clipboard\"))\n\t\t\t\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy lyrics to clipboard\"));\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t(() => {\n\t\t\t\t\t\t\tif (!CONFIG.visual[\"show-performers\"] || !performer) return null;\n\n\t\t\t\t\t\t\tif (!CONFIG.visual[\"synced-compact\"]) {\n\t\t\t\t\t\t\t\tconst previousLine = lyricWithEmptyLines[lineNumber - 1];\n\t\t\t\t\t\t\t\tif (previousLine && previousLine.performer === performer) return null;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn react.createElement(\n\t\t\t\t\t\t\t\t\"span\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tclassName: \"lyrics-lyricsContainer-Performer\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tperformer\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})(),\n\t\t\t\t\t\t!isKara ? lineText : react.createElement(KaraokeLine, { text, startTime, endTime, position, isActive })\n\t\t\t\t\t),\n\t\t\t\t\tbelowMode &&\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"p\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\topacity: 0.5,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(Utils.convertParsedToLRC(lyrics, belowMode).conver)\n\t\t\t\t\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Translated lyrics copied to clipboard\"))\n\t\t\t\t\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy translated lyrics to clipboard\"));\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttext\n\t\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t})\n\t\t),\n\t\treact.createElement(CreditFooter, {\n\t\t\tprovider,\n\t\t\tcopyright,\n\t\t})\n\t);\n});\n\nclass SearchBar extends react.Component {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.state = {\n\t\t\thidden: true,\n\t\t\tatNode: 0,\n\t\t\tfoundNodes: [],\n\t\t};\n\t\tthis.container = null;\n\t}\n\n\tcomponentDidMount() {\n\t\tthis.viewPort = document.querySelector(\".main-view-container .os-viewport\");\n\t\tthis.mainViewOffsetTop = document.querySelector(\".Root__main-view\").offsetTop;\n\t\tthis.toggleCallback = () => {\n\t\t\tif (!(Spicetify.Platform.History.location.pathname === \"/lyrics-plus\" && this.container)) return;\n\n\t\t\tif (this.state.hidden) {\n\t\t\t\tthis.setState({ hidden: false });\n\t\t\t\tthis.container.focus();\n\t\t\t} else {\n\t\t\t\tthis.setState({ hidden: true });\n\t\t\t\tthis.container.blur();\n\t\t\t}\n\t\t};\n\t\tthis.unFocusCallback = () => {\n\t\t\tthis.container.blur();\n\t\t\tthis.setState({ hidden: true });\n\t\t};\n\t\tthis.loopThroughCallback = (event) => {\n\t\t\tif (!this.state.foundNodes.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tconst dir = event.shiftKey ? -1 : 1;\n\t\t\t\tlet atNode = this.state.atNode + dir;\n\t\t\t\tif (atNode < 0) {\n\t\t\t\t\tatNode = this.state.foundNodes.length - 1;\n\t\t\t\t}\n\t\t\t\tatNode %= this.state.foundNodes.length;\n\t\t\t\tconst rects = this.state.foundNodes[atNode].getBoundingClientRect();\n\t\t\t\tthis.viewPort.scrollBy(0, rects.y - 100);\n\t\t\t\tthis.setState({ atNode });\n\t\t\t}\n\t\t};\n\n\t\tSpicetify.Mousetrap().bind(\"mod+shift+f\", this.toggleCallback);\n\t\tSpicetify.Mousetrap(this.container).bind(\"mod+shift+f\", this.toggleCallback);\n\t\tSpicetify.Mousetrap(this.container).bind(\"enter\", this.loopThroughCallback);\n\t\tSpicetify.Mousetrap(this.container).bind(\"shift+enter\", this.loopThroughCallback);\n\t\tSpicetify.Mousetrap(this.container).bind(\"esc\", this.unFocusCallback);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tSpicetify.Mousetrap().unbind(\"mod+shift+f\", this.toggleCallback);\n\t\tSpicetify.Mousetrap(this.container).unbind(\"mod+shift+f\", this.toggleCallback);\n\t\tSpicetify.Mousetrap(this.container).unbind(\"enter\", this.loopThroughCallback);\n\t\tSpicetify.Mousetrap(this.container).unbind(\"shift+enter\", this.loopThroughCallback);\n\t\tSpicetify.Mousetrap(this.container).unbind(\"esc\", this.unFocusCallback);\n\t}\n\n\tgetNodeFromInput(event) {\n\t\tconst value = event.target.value.toLowerCase();\n\t\tif (!value) {\n\t\t\tthis.setState({ foundNodes: [] });\n\t\t\tthis.viewPort.scrollTo(0, 0);\n\t\t\treturn;\n\t\t}\n\n\t\tconst lyricsPage = document.querySelector(\".lyrics-lyricsContainer-UnsyncedLyricsPage\");\n\t\tconst walker = document.createTreeWalker(\n\t\t\tlyricsPage,\n\t\t\tNodeFilter.SHOW_TEXT,\n\t\t\t(node) => {\n\t\t\t\tif (node.textContent.toLowerCase().includes(value)) {\n\t\t\t\t\treturn NodeFilter.FILTER_ACCEPT;\n\t\t\t\t}\n\t\t\t\treturn NodeFilter.FILTER_REJECT;\n\t\t\t},\n\t\t\tfalse\n\t\t);\n\n\t\tconst foundNodes = [];\n\t\twhile (walker.nextNode()) {\n\t\t\tconst range = document.createRange();\n\t\t\trange.selectNodeContents(walker.currentNode);\n\t\t\tfoundNodes.push(range);\n\t\t}\n\n\t\tif (!foundNodes.length) {\n\t\t\tthis.viewPort.scrollBy(0, 0);\n\t\t} else {\n\t\t\tconst rects = foundNodes[0].getBoundingClientRect();\n\t\t\tthis.viewPort.scrollBy(0, rects.y - 100);\n\t\t}\n\n\t\tthis.setState({ foundNodes, atNode: 0 });\n\t}\n\n\trender() {\n\t\tlet y = 0;\n\t\tlet height = 0;\n\t\tif (this.state.foundNodes.length) {\n\t\t\tconst node = this.state.foundNodes[this.state.atNode];\n\t\t\tconst rects = node.getBoundingClientRect();\n\t\t\ty = rects.y + this.viewPort.scrollTop - this.mainViewOffsetTop;\n\t\t\theight = rects.height;\n\t\t}\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: `lyrics-Searchbar${this.state.hidden ? \" hidden\" : \"\"}`,\n\t\t\t},\n\t\t\treact.createElement(\"input\", {\n\t\t\t\tref: (c) => {\n\t\t\t\t\tthis.container = c;\n\t\t\t\t},\n\t\t\t\tonChange: this.getNodeFromInput.bind(this),\n\t\t\t}),\n\t\t\treact.createElement(\"svg\", {\n\t\t\t\twidth: 16,\n\t\t\t\theight: 16,\n\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\tfill: \"currentColor\",\n\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t__html: Spicetify.SVGIcons.search,\n\t\t\t\t},\n\t\t\t}),\n\t\t\treact.createElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\thidden: this.state.foundNodes.length === 0,\n\t\t\t\t},\n\t\t\t\t`${this.state.atNode + 1}/${this.state.foundNodes.length}`\n\t\t\t),\n\t\t\treact.createElement(\"div\", {\n\t\t\t\tclassName: \"lyrics-Searchbar-highlight\",\n\t\t\t\tstyle: {\n\t\t\t\t\t\"--search-highlight-top\": `${y}px`,\n\t\t\t\t\t\"--search-highlight-height\": `${height}px`,\n\t\t\t\t},\n\t\t\t})\n\t\t);\n\t}\n}\n\nfunction isInViewport(element) {\n\tconst rect = element.getBoundingClientRect();\n\treturn (\n\t\trect.top >= 0 &&\n\t\trect.left >= 0 &&\n\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t);\n}\n\nconst SyncedExpandedLyricsPage = react.memo(({ lyrics, provider, copyright, isKara }) => {\n\tconst [position, setPosition] = useState(0);\n\tconst activeLineRef = useRef(null);\n\tconst pageRef = useRef(null);\n\n\tuseTrackPosition(() => {\n\t\tif (!Spicetify.Player.data.is_paused) {\n\t\t\tsetPosition(Spicetify.Player.getProgress() + CONFIG.visual[\"global-delay\"] + CONFIG.visual.delay);\n\t\t}\n\t});\n\n\tconst padded = useMemo(() => [emptyLine, ...lyrics], [lyrics]);\n\n\tconst intialScroll = useMemo(() => [false], [lyrics]);\n\n\tconst lyricsId = lyrics[0].text;\n\n\tlet activeLineIndex = 0;\n\tfor (let i = padded.length - 1; i >= 0; i--) {\n\t\tconst line = padded[i];\n\t\tif (position >= line.startTime) {\n\t\t\tactiveLineIndex = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (activeLineRef.current && (!intialScroll[0] || isInViewport(activeLineRef.current))) {\n\t\t\tactiveLineRef.current.scrollIntoView({\n\t\t\t\tbehavior: \"smooth\",\n\t\t\t\tblock: \"center\",\n\t\t\t\tinline: \"nearest\",\n\t\t\t});\n\t\t\tintialScroll[0] = true;\n\t\t}\n\t}, [activeLineRef.current]);\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"lyrics-lyricsContainer-UnsyncedLyricsPage\",\n\t\t\tkey: lyricsId,\n\t\t\tref: pageRef,\n\t\t},\n\t\treact.createElement(\"p\", {\n\t\t\tclassName: \"lyrics-lyricsContainer-LyricsUnsyncedPadding\",\n\t\t}),\n\t\tpadded.map(({ text, startTime, endTime, originalText, performer }, i) => {\n\t\t\tif (i === 0) {\n\t\t\t\treturn react.createElement(IdlingIndicator, {\n\t\t\t\t\tisActive: activeLineIndex === 0,\n\t\t\t\t\tprogress: position / padded[1].startTime,\n\t\t\t\t\tdelay: padded[1].startTime / 3,\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst isActive = i === activeLineIndex;\n\t\t\tconst showTranslatedBelow = CONFIG.visual[\"translate:display-mode\"] === \"below\";\n\t\t\t// If we have original text and we are showing translated below, we should show the original text\n\t\t\t// Otherwise we should show the translated text\n\t\t\tconst lineText = originalText && showTranslatedBelow ? originalText : text;\n\n\t\t\t// Convert lyrics to text for comparison\n\t\t\tconst belowOrigin = (typeof originalText === \"object\" ? originalText?.props?.children?.[0] : originalText)?.replace(/\\s+/g, \"\");\n\t\t\tconst belowTxt = (typeof text === \"object\" ? text?.props?.children?.[0] : text)?.replace(/\\s+/g, \"\");\n\n\t\t\tconst belowMode = showTranslatedBelow && originalText && belowOrigin !== belowTxt;\n\n\t\t\treturn react.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: `lyrics-lyricsContainer-LyricsLine${i <= activeLineIndex ? \" lyrics-lyricsContainer-LyricsLine-active\" : \"\"}`,\n\t\t\t\t\tkey: i,\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t},\n\t\t\t\t\tdir: \"auto\",\n\t\t\t\t\tref: isActive ? activeLineRef : null,\n\t\t\t\t\tonClick: (event) => {\n\t\t\t\t\t\tif (startTime) {\n\t\t\t\t\t\t\tSpicetify.Player.seek(startTime);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"p\",\n\t\t\t\t\t{\n\t\t\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(Utils.convertParsedToLRC(lyrics, belowMode).original)\n\t\t\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Lyrics copied to clipboard\"))\n\t\t\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy lyrics to clipboard\"));\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t(() => {\n\t\t\t\t\t\tif (!CONFIG.visual[\"show-performers\"] || !performer) return null;\n\n\t\t\t\t\t\tif (!CONFIG.visual[\"synced-compact\"]) {\n\t\t\t\t\t\t\tconst previousLine = padded[i - 1];\n\t\t\t\t\t\t\tif (previousLine && previousLine.performer === performer) return null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn react.createElement(\n\t\t\t\t\t\t\t\"span\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: \"lyrics-lyricsContainer-Performer\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tperformer\n\t\t\t\t\t\t);\n\t\t\t\t\t})(),\n\t\t\t\t\t!isKara ? lineText : react.createElement(KaraokeLine, { text, startTime, endTime, position, isActive })\n\t\t\t\t),\n\t\t\t\tbelowMode &&\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"p\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tstyle: { opacity: 0.5 },\n\t\t\t\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(Utils.convertParsedToLRC(lyrics, belowMode).conver)\n\t\t\t\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Translated lyrics copied to clipboard\"))\n\t\t\t\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy translated lyrics to clipboard\"));\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext\n\t\t\t\t\t)\n\t\t\t);\n\t\t}),\n\t\treact.createElement(\"p\", {\n\t\t\tclassName: \"lyrics-lyricsContainer-LyricsUnsyncedPadding\",\n\t\t}),\n\t\treact.createElement(CreditFooter, {\n\t\t\tprovider,\n\t\t\tcopyright,\n\t\t}),\n\t\treact.createElement(SearchBar, null)\n\t);\n});\n\nconst UnsyncedLyricsPage = react.memo(({ lyrics, provider, copyright }) => {\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"lyrics-lyricsContainer-UnsyncedLyricsPage\",\n\t\t},\n\t\treact.createElement(\"p\", {\n\t\t\tclassName: \"lyrics-lyricsContainer-LyricsUnsyncedPadding\",\n\t\t}),\n\t\tlyrics.map(({ text, originalText, performer }, index) => {\n\t\t\tconst showTranslatedBelow = CONFIG.visual[\"translate:display-mode\"] === \"below\";\n\t\t\t// If we have original text and we are showing translated below, we should show the original text\n\t\t\t// Otherwise we should show the translated text\n\t\t\tconst lineText = originalText && showTranslatedBelow ? originalText : text;\n\n\t\t\t// Convert lyrics to text for comparison\n\t\t\tconst belowOrigin = (typeof originalText === \"object\" ? originalText?.props?.children?.[0] : originalText)?.replace(/\\s+/g, \"\");\n\t\t\tconst belowTxt = (typeof text === \"object\" ? text?.props?.children?.[0] : text)?.replace(/\\s+/g, \"\");\n\n\t\t\tconst belowMode = showTranslatedBelow && originalText && belowOrigin !== belowTxt;\n\n\t\t\treturn react.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"lyrics-lyricsContainer-LyricsLine lyrics-lyricsContainer-LyricsLine-active\",\n\t\t\t\t\tkey: index,\n\t\t\t\t\tdir: \"auto\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"p\",\n\t\t\t\t\t{\n\t\t\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(Utils.convertParsedToUnsynced(lyrics, belowMode).original)\n\t\t\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Lyrics copied to clipboard\"))\n\t\t\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy lyrics to clipboard\"));\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t(() => {\n\t\t\t\t\t\tif (!CONFIG.visual[\"show-performers\"] || !performer) return null;\n\n\t\t\t\t\t\tconst previousLine = lyrics[index - 1];\n\t\t\t\t\t\tif (previousLine && previousLine.performer === performer) return null;\n\n\t\t\t\t\t\treturn react.createElement(\n\t\t\t\t\t\t\t\"span\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: \"lyrics-lyricsContainer-Performer\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tperformer\n\t\t\t\t\t\t);\n\t\t\t\t\t})(),\n\t\t\t\t\tlineText\n\t\t\t\t),\n\t\t\t\tbelowMode &&\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"p\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tstyle: { opacity: 0.5 },\n\t\t\t\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(Utils.convertParsedToUnsynced(lyrics, belowMode).conver)\n\t\t\t\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Translated lyrics copied to clipboard\"))\n\t\t\t\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy translated lyrics to clipboard\"));\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext\n\t\t\t\t\t)\n\t\t\t);\n\t\t}),\n\t\treact.createElement(\"p\", {\n\t\t\tclassName: \"lyrics-lyricsContainer-LyricsUnsyncedPadding\",\n\t\t}),\n\t\treact.createElement(CreditFooter, {\n\t\t\tprovider,\n\t\t\tcopyright,\n\t\t}),\n\t\treact.createElement(SearchBar, null)\n\t);\n});\n\nconst noteContainer = document.createElement(\"div\");\nnoteContainer.classList.add(\"lyrics-Genius-noteContainer\");\nconst noteDivider = document.createElement(\"div\");\nnoteDivider.classList.add(\"lyrics-Genius-divider\");\nnoteDivider.innerHTML = ``;\nnoteDivider.style.setProperty(\"--link-left\", 0);\nconst noteTextContainer = document.createElement(\"div\");\nnoteTextContainer.classList.add(\"lyrics-Genius-noteTextContainer\");\nnoteTextContainer.onclick = (event) => {\n\tevent.preventDefault();\n\tevent.stopPropagation();\n};\nnoteContainer.append(noteDivider, noteTextContainer);\n\nfunction showNote(parent, note) {\n\tif (noteContainer.parentElement === parent) {\n\t\tnoteContainer.remove();\n\t\treturn;\n\t}\n\tnoteTextContainer.innerText = note;\n\tparent.append(noteContainer);\n\tconst arrowPos = parent.offsetLeft - noteContainer.offsetLeft;\n\tnoteDivider.style.setProperty(\"--link-left\", `${arrowPos}px`);\n\tconst box = noteTextContainer.getBoundingClientRect();\n\tif (box.y + box.height > window.innerHeight) {\n\t\t// Wait for noteContainer is mounted\n\t\tsetTimeout(() => {\n\t\t\tnoteContainer.scrollIntoView({\n\t\t\t\tbehavior: \"smooth\",\n\t\t\t\tblock: \"center\",\n\t\t\t\tinline: \"nearest\",\n\t\t\t});\n\t\t}, 50);\n\t}\n}\n\nconst GeniusPage = react.memo(\n\t({ lyrics, provider, copyright, versions, versionIndex, onVersionChange, isSplitted, lyrics2, versionIndex2, onVersionChange2 }) => {\n\t\tlet notes = {};\n\t\tlet container = null;\n\t\tlet container2 = null;\n\n\t\t// Fetch notes\n\t\tuseEffect(() => {\n\t\t\tif (!container) return;\n\t\t\tnotes = {};\n\t\t\tlet links = container.querySelectorAll(\"a\");\n\t\t\tif (isSplitted && container2) {\n\t\t\t\tlinks = [...links, ...container2.querySelectorAll(\"a\")];\n\t\t\t}\n\t\t\tfor (const link of links) {\n\t\t\t\tlet id = link.pathname.match(/\\/(\\d+)\\//);\n\t\t\t\tif (!id) {\n\t\t\t\t\tid = link.dataset.id;\n\t\t\t\t} else {\n\t\t\t\t\tid = id[1];\n\t\t\t\t}\n\t\t\t\tProviderGenius.getNote(id).then((note) => {\n\t\t\t\t\tnotes[id] = note;\n\t\t\t\t\tlink.classList.add(\"fetched\");\n\t\t\t\t});\n\t\t\t\tlink.onclick = (event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (!notes[id]) return;\n\t\t\t\t\tshowNote(link, notes[id]);\n\t\t\t\t};\n\t\t\t}\n\t\t}, [lyrics, lyrics2]);\n\n\t\tconst lyricsEl1 = react.createElement(\n\t\t\t\"div\",\n\t\t\tnull,\n\t\t\treact.createElement(VersionSelector, { items: versions, index: versionIndex, callback: onVersionChange }),\n\t\t\treact.createElement(\"div\", {\n\t\t\t\tclassName: \"lyrics-lyricsContainer-LyricsLine lyrics-lyricsContainer-LyricsLine-active\",\n\t\t\t\tref: (c) => {\n\t\t\t\t\tcontainer = c;\n\t\t\t\t},\n\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t__html: lyrics,\n\t\t\t\t},\n\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tconst copylyrics = lyrics.replace(/
/g, \"\\n\").replace(/<[^>]*>/g, \"\");\n\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(copylyrics)\n\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Lyrics copied to clipboard\"))\n\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy lyrics to clipboard\"));\n\t\t\t\t},\n\t\t\t})\n\t\t);\n\n\t\tconst mainContainer = [lyricsEl1];\n\t\tconst shouldSplit = versions.length > 1 && isSplitted;\n\n\t\tif (shouldSplit) {\n\t\t\tconst lyricsEl2 = react.createElement(\n\t\t\t\t\"div\",\n\t\t\t\tnull,\n\t\t\t\treact.createElement(VersionSelector, { items: versions, index: versionIndex2, callback: onVersionChange2 }),\n\t\t\t\treact.createElement(\"div\", {\n\t\t\t\t\tclassName: \"lyrics-lyricsContainer-LyricsLine lyrics-lyricsContainer-LyricsLine-active\",\n\t\t\t\t\tref: (c) => {\n\t\t\t\t\t\tcontainer2 = c;\n\t\t\t\t\t},\n\t\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t\t__html: lyrics2,\n\t\t\t\t\t},\n\t\t\t\t\tonContextMenu: (event) => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tconst copylyrics = lyrics.replace(/
/g, \"\\n\").replace(/<[^>]*>/g, \"\");\n\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(copylyrics)\n\t\t\t\t\t\t\t.then(() => Spicetify.showNotification(\"Lyrics copied to clipboard\"))\n\t\t\t\t\t\t\t.catch(() => Spicetify.showNotification(\"Failed to copy lyrics to clipboard\"));\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t);\n\t\t\tmainContainer.push(lyricsEl2);\n\t\t}\n\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"lyrics-lyricsContainer-UnsyncedLyricsPage\",\n\t\t\t},\n\t\t\treact.createElement(\"p\", {\n\t\t\t\tclassName: \"lyrics-lyricsContainer-LyricsUnsyncedPadding main-type-ballad\",\n\t\t\t}),\n\t\t\treact.createElement(\"div\", { className: shouldSplit ? \"split\" : \"\" }, mainContainer),\n\t\t\treact.createElement(CreditFooter, {\n\t\t\t\tprovider,\n\t\t\t\tcopyright,\n\t\t\t}),\n\t\t\treact.createElement(SearchBar, null)\n\t\t);\n\t}\n);\n\nconst LoadingIcon = react.createElement(\n\t\"svg\",\n\t{\n\t\twidth: \"200px\",\n\t\theight: \"200px\",\n\t\tviewBox: \"0 0 100 100\",\n\t\tpreserveAspectRatio: \"xMidYMid\",\n\t},\n\treact.createElement(\n\t\t\"circle\",\n\t\t{\n\t\t\tcx: \"50\",\n\t\t\tcy: \"50\",\n\t\t\tr: \"0\",\n\t\t\tfill: \"none\",\n\t\t\tstroke: \"currentColor\",\n\t\t\t\"stroke-width\": \"2\",\n\t\t},\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"r\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"0;40\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0 0.2 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"0s\",\n\t\t}),\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"opacity\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"1;0\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0.2 0 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"0s\",\n\t\t})\n\t),\n\treact.createElement(\n\t\t\"circle\",\n\t\t{\n\t\t\tcx: \"50\",\n\t\t\tcy: \"50\",\n\t\t\tr: \"0\",\n\t\t\tfill: \"none\",\n\t\t\tstroke: \"currentColor\",\n\t\t\t\"stroke-width\": \"2\",\n\t\t},\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"r\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"0;40\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0 0.2 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"-0.5s\",\n\t\t}),\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"opacity\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"1;0\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0.2 0 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"-0.5s\",\n\t\t})\n\t)\n);\n\nconst VersionSelector = react.memo(({ items, index, callback }) => {\n\tif (items.length < 2) {\n\t\treturn null;\n\t}\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"lyrics-versionSelector\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"select\",\n\t\t\t{\n\t\t\t\tonChange: (event) => {\n\t\t\t\t\tcallback(items, event.target.value);\n\t\t\t\t},\n\t\t\t\tvalue: index,\n\t\t\t},\n\t\t\titems.map((a, i) => {\n\t\t\t\treturn react.createElement(\"option\", { value: i }, a.title);\n\t\t\t})\n\t\t),\n\t\treact.createElement(\n\t\t\t\"svg\",\n\t\t\t{\n\t\t\t\theight: \"16\",\n\t\t\t\twidth: \"16\",\n\t\t\t\tfill: \"currentColor\",\n\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t},\n\t\t\treact.createElement(\"path\", {\n\t\t\t\td: \"M3 6l5 5.794L13 6z\",\n\t\t\t})\n\t\t)\n\t);\n});\n" }, { "path": "CustomApps/lyrics-plus/PlaybarButton.js", "content": "(function PlaybarButton() {\n\tif (!Spicetify.Platform.History) {\n\t\tsetTimeout(PlaybarButton, 300);\n\t\treturn;\n\t}\n\n\tconst button = new Spicetify.Playbar.Button(\n\t\t\"Lyrics Plus\",\n\t\t``,\n\t\t() =>\n\t\t\tSpicetify.Platform.History.location.pathname !== \"/lyrics-plus\"\n\t\t\t\t? Spicetify.Platform.History.push(\"/lyrics-plus\")\n\t\t\t\t: Spicetify.Platform.History.goBack(),\n\t\tfalse,\n\t\tSpicetify.Platform.History.location.pathname === \"/lyrics-plus\",\n\t\tfalse\n\t);\n\n\tconst style = document.createElement(\"style\");\n\tstyle.innerHTML = `\n\t\t.main-nowPlayingBar-lyricsButton[data-testid=\"lyrics-button\"] {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tli[data-id=\"/lyrics-plus\"] {\n\t\t\tdisplay: none;\n\t\t}\n\t`;\n\tstyle.classList.add(\"lyrics-plus:visual:playbar-button\");\n\n\tif (Spicetify.LocalStorage.get(\"lyrics-plus:visual:playbar-button\") === \"true\") setPlaybarButton();\n\twindow.addEventListener(\"lyrics-plus\", (event) => {\n\t\tif (event.detail?.name === \"playbar-button\") event.detail.value ? setPlaybarButton() : removePlaybarButton();\n\t});\n\n\tSpicetify.Platform.History.listen((location) => {\n\t\tbutton.active = location.pathname === \"/lyrics-plus\";\n\t});\n\n\tfunction setPlaybarButton() {\n\t\tdocument.head.appendChild(style);\n\t\tbutton.register();\n\t}\n\n\tfunction removePlaybarButton() {\n\t\tstyle.remove();\n\t\tbutton.deregister();\n\t}\n})();\n" }, { "path": "CustomApps/lyrics-plus/ProviderGenius.js", "content": "const ProviderGenius = (() => {\n\tfunction getChildDeep(parent, isDeep = false) {\n\t\tlet acc = \"\";\n\n\t\tif (!parent.children) {\n\t\t\treturn acc;\n\t\t}\n\n\t\tfor (const child of parent.children) {\n\t\t\tif (typeof child === \"string\") {\n\t\t\t\tacc += child;\n\t\t\t} else if (child.children) {\n\t\t\t\tacc += getChildDeep(child, true);\n\t\t\t}\n\t\t\tif (!isDeep) {\n\t\t\t\tacc += \"\\n\";\n\t\t\t}\n\t\t}\n\t\treturn acc.trim();\n\t}\n\n\tasync function getNote(id) {\n\t\tconst body = await Spicetify.CosmosAsync.get(`https://genius.com/api/annotations/${id}`);\n\t\tconst response = body.response;\n\t\tlet note = \"\";\n\n\t\t// Authors annotations\n\t\tif (response.referent && response.referent.classification === \"verified\") {\n\t\t\tconst referentsBody = await Spicetify.CosmosAsync.get(`https://genius.com/api/referents/${id}`);\n\t\t\tconst referents = referentsBody.response;\n\t\t\tfor (const ref of referents.referent.annotations) {\n\t\t\t\tnote += getChildDeep(ref.body.dom);\n\t\t\t}\n\t\t}\n\n\t\t// Users annotations\n\t\tif (!note && response.annotation) {\n\t\t\tnote = getChildDeep(response.annotation.body.dom);\n\t\t}\n\n\t\t// Users comments\n\t\tif (!note && response.annotation && response.annotation.top_comment) {\n\t\t\tnote += getChildDeep(response.annotation.top_comment.body.dom);\n\t\t}\n\t\tnote = note.replace(/\\n\\n\\n?/, \"\\n\");\n\n\t\treturn note;\n\t}\n\n\tfunction fetchHTML(url) {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst request = JSON.stringify({\n\t\t\t\tmethod: \"GET\",\n\t\t\t\turi: url,\n\t\t\t});\n\n\t\t\twindow.sendCosmosRequest({\n\t\t\t\trequest,\n\t\t\t\tpersistent: false,\n\t\t\t\tonSuccess: resolve,\n\t\t\t\tonFailure: reject,\n\t\t\t});\n\t\t});\n\t}\n\n\tasync function fetchLyricsVersion(results, index) {\n\t\tconst result = results[index];\n\t\tif (!result) {\n\t\t\tconsole.warn(result);\n\t\t\treturn;\n\t\t}\n\n\t\tconst site = await fetchHTML(result.url);\n\t\tconst body = JSON.parse(site)?.body;\n\t\tif (!body) {\n\t\t\treturn null;\n\t\t}\n\n\t\tlet lyrics = \"\";\n\t\tconst parser = new DOMParser();\n\t\tconst htmlDoc = parser.parseFromString(body, \"text/html\");\n\t\tconst lyricsDiv = htmlDoc.querySelectorAll('div[data-lyrics-container=\"true\"]');\n\n\t\tfor (const i of lyricsDiv) {\n\t\t\tlyrics += `${i.innerHTML}
`;\n\t\t}\n\n\t\tif (!lyrics?.length) {\n\t\t\tconsole.warn(\"forceError\");\n\t\t\treturn null;\n\t\t}\n\n\t\treturn lyrics;\n\t}\n\n\tasync function fetchLyrics(info) {\n\t\tconst titles = new Set([info.title]);\n\n\t\tconst titleNoExtra = Utils.removeExtraInfo(info.title);\n\t\ttitles.add(titleNoExtra);\n\t\ttitles.add(Utils.removeSongFeat(info.title));\n\t\ttitles.add(Utils.removeSongFeat(titleNoExtra));\n\n\t\tlet lyrics;\n\t\tlet hits;\n\t\tfor (const title of titles) {\n\t\t\tconst query = new URLSearchParams({ per_page: 20, q: `${info.artist} ${title}` });\n\t\t\tconst url = `https://genius.com/api/search/song?${query.toString()}`;\n\n\t\t\tconst geniusSearch = await Spicetify.CosmosAsync.get(url);\n\n\t\t\thits = geniusSearch.response.sections[0].hits.map((item) => ({\n\t\t\t\ttitle: item.result.full_title,\n\t\t\t\turl: item.result.url,\n\t\t\t}));\n\n\t\t\tif (!hits.length) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tlyrics = await fetchLyricsVersion(hits, 0);\n\t\t\tbreak;\n\t\t}\n\n\t\tif (!lyrics) {\n\t\t\treturn { lyrics: null, versions: [] };\n\t\t}\n\n\t\treturn { lyrics, versions: hits };\n\t}\n\n\treturn { fetchLyrics, getNote, fetchLyricsVersion };\n})();\n" }, { "path": "CustomApps/lyrics-plus/ProviderLRCLIB.js", "content": "const ProviderLRCLIB = (() => {\n\tasync function findLyrics(info) {\n\t\tconst baseURL = \"https://lrclib.net/api/get\";\n\t\tconst durr = info.duration / 1000;\n\t\tconst params = {\n\t\t\ttrack_name: info.title,\n\t\t\tartist_name: info.artist,\n\t\t\talbum_name: info.album,\n\t\t\tduration: durr,\n\t\t};\n\n\t\tconst finalURL = `${baseURL}?${Object.keys(params)\n\t\t\t.map((key) => `${key}=${encodeURIComponent(params[key])}`)\n\t\t\t.join(\"&\")}`;\n\n\t\tconst body = await fetch(finalURL, {\n\t\t\theaders: {\n\t\t\t\t\"x-user-agent\": `spicetify v${Spicetify.Config.version} (https://github.com/spicetify/cli)`,\n\t\t\t},\n\t\t});\n\n\t\tif (body.status !== 200) {\n\t\t\treturn {\n\t\t\t\terror: \"Request error: Track wasn't found\",\n\t\t\t\turi: info.uri,\n\t\t\t};\n\t\t}\n\n\t\treturn await body.json();\n\t}\n\n\tfunction getUnsynced(body) {\n\t\tconst unsyncedLyrics = body?.plainLyrics;\n\t\tconst isInstrumental = body.instrumental;\n\t\tif (isInstrumental) return [{ text: \"ā™Ŗ Instrumental ā™Ŗ\" }];\n\n\t\tif (!unsyncedLyrics) return null;\n\n\t\treturn Utils.parseLocalLyrics(unsyncedLyrics).unsynced;\n\t}\n\n\tfunction getSynced(body) {\n\t\tconst syncedLyrics = body?.syncedLyrics;\n\t\tconst isInstrumental = body.instrumental;\n\t\tif (isInstrumental) return [{ text: \"ā™Ŗ Instrumental ā™Ŗ\" }];\n\n\t\tif (!syncedLyrics) return null;\n\n\t\treturn Utils.parseLocalLyrics(syncedLyrics).synced;\n\t}\n\n\treturn { findLyrics, getSynced, getUnsynced };\n})();\n" }, { "path": "CustomApps/lyrics-plus/ProviderMusixmatch.js", "content": "const ProviderMusixmatch = (() => {\n\tconst headers = {\n\t\tauthority: \"apic-desktop.musixmatch.com\",\n\t\tcookie: \"x-mxm-token-guid=\",\n\t};\n\n\tfunction findTranslationStatus(body) {\n\t\tif (!body || typeof body !== \"object\") {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (Array.isArray(body)) {\n\t\t\tfor (const item of body) {\n\t\t\t\tconst result = findTranslationStatus(item);\n\t\t\t\tif (result) {\n\t\t\t\t\treturn result;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn null;\n\t\t}\n\n\t\tif (Array.isArray(body.track_lyrics_translation_status)) {\n\t\t\treturn body.track_lyrics_translation_status;\n\t\t}\n\n\t\tfor (const value of Object.values(body)) {\n\t\t\tconst result = findTranslationStatus(value);\n\t\t\tif (result) {\n\t\t\t\treturn result;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tasync function findLyrics(info) {\n\t\tconst baseURL =\n\t\t\t\"https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched&subtitle_format=mxm&app_id=web-desktop-app-v1.0&\";\n\n\t\tconst durr = info.duration / 1000;\n\n\t\tconst params = {\n\t\t\tq_album: info.album,\n\t\t\tq_artist: info.artist,\n\t\t\tq_artists: info.artist,\n\t\t\tq_track: info.title,\n\t\t\ttrack_spotify_id: info.uri,\n\t\t\tq_duration: durr,\n\t\t\tf_subtitle_length: Math.floor(durr),\n\t\t\tusertoken: CONFIG.providers.musixmatch.token,\n\t\t\tpart: \"track_lyrics_translation_status,track_structure,track_performer_tagging\",\n\t\t};\n\n\t\tconst finalURL =\n\t\t\tbaseURL +\n\t\t\tObject.keys(params)\n\t\t\t\t.map((key) => `${key}=${encodeURIComponent(params[key])}`)\n\t\t\t\t.join(\"&\");\n\n\t\tlet body = await Spicetify.CosmosAsync.get(finalURL, null, headers);\n\n\t\tbody = body.message.body.macro_calls;\n\n\t\tif (body[\"matcher.track.get\"].message.header.status_code !== 200) {\n\t\t\treturn {\n\t\t\t\terror: `Requested error: ${body[\"matcher.track.get\"].message.header.mode}`,\n\t\t\t\turi: info.uri,\n\t\t\t};\n\t\t}\n\t\tif (body[\"track.lyrics.get\"]?.message?.body?.lyrics?.restricted) {\n\t\t\treturn {\n\t\t\t\terror: \"Unfortunately we're not authorized to show these lyrics.\",\n\t\t\t\turi: info.uri,\n\t\t\t};\n\t\t}\n\n\t\tconst translationStatus = findTranslationStatus(body);\n\t\tconst meta = body?.[\"matcher.track.get\"]?.message?.body;\n\t\tconst availableTranslations = Array.isArray(translationStatus) ? [...new Set(translationStatus.map((status) => status?.to).filter(Boolean))] : [];\n\n\t\tObject.defineProperties(body, {\n\t\t\t__musixmatchTranslationStatus: {\n\t\t\t\tvalue: availableTranslations,\n\t\t\t},\n\t\t\t__musixmatchTrackId: {\n\t\t\t\tvalue: meta?.track?.track_id ?? null,\n\t\t\t},\n\t\t});\n\n\t\treturn body;\n\t}\n\n\tfunction parsePerformerData(meta) {\n\t\tif (!meta || !meta.track || !meta.track.performer_tagging) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst tagging = meta.track.performer_tagging;\n\t\tconst miscTags = meta.track.performer_tagging_misc_tags || {};\n\t\tlet performerMap = [];\n\t\tif (tagging && tagging.content && tagging.content.length > 0) {\n\t\t\tconst resources = tagging.resources?.artists || [];\n\t\t\tconst resourcesList = Array.isArray(resources) ? resources : Object.values(resources);\n\n\t\t\tperformerMap = tagging.content\n\t\t\t\t.map((c) => {\n\t\t\t\t\tif (!c.performers || c.performers.length === 0) return null;\n\n\t\t\t\t\tconst resolvedPerformers = c.performers\n\t\t\t\t\t\t.map((p) => {\n\t\t\t\t\t\t\tlet name = \"Unknown\";\n\t\t\t\t\t\t\tif (p.type === \"artist\") {\n\t\t\t\t\t\t\t\tconst fqid = p.fqid;\n\t\t\t\t\t\t\t\tconst idFromFqid = fqid ? parseInt(fqid.split(\":\")[2]) : null;\n\n\t\t\t\t\t\t\t\tconst artist = resourcesList.find((r) => r.artist_id === idFromFqid);\n\t\t\t\t\t\t\t\tif (artist) name = artist.artist_name;\n\t\t\t\t\t\t\t} else if (miscTags[p.type]) {\n\t\t\t\t\t\t\t\tname = miscTags[p.type];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tfqid: p.fqid,\n\t\t\t\t\t\t\t\tartist_id: p.fqid ? parseInt(p.fqid.split(\":\")[2]) : null,\n\t\t\t\t\t\t\t\tname: name,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((p) => p.name !== \"Unknown\");\n\n\t\t\t\t\tconst names = resolvedPerformers.map((p) => p.name);\n\t\t\t\t\tif (names.length === 0) return null;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tname: names.join(\", \"),\n\t\t\t\t\t\tsnippet: c.snippet,\n\t\t\t\t\t\tperformers: resolvedPerformers,\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t\t.filter(Boolean);\n\t\t}\n\n\t\tconst normalizeForMatch = (text) => text.replace(/\\s+/g, \"\").toLowerCase();\n\n\t\tconst snippetQueue = [];\n\t\tif (performerMap.length > 0) {\n\t\t\tfor (const tag of performerMap) {\n\t\t\t\tif (!tag.snippet) continue;\n\t\t\t\tconst snippetLines = tag.snippet\n\t\t\t\t\t.split(/\\n+/)\n\t\t\t\t\t.map((s) => s.trim())\n\t\t\t\t\t.filter(Boolean);\n\t\t\t\tfor (const sLine of snippetLines) {\n\t\t\t\t\tif (sLine.length < 2 && !/^[\\u3131-\\uD79D]/.test(sLine)) continue;\n\t\t\t\t\tsnippetQueue.push({\n\t\t\t\t\t\ttext: normalizeForMatch(sLine),\n\t\t\t\t\t\traw: sLine,\n\t\t\t\t\t\tperformers: tag.performers,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn snippetQueue;\n\t}\n\n\tfunction matchSequential(lyricsLines, snippetQueue, getTextCallback = (l) => l.text) {\n\t\tif (!snippetQueue || snippetQueue.length === 0) return lyricsLines;\n\n\t\tconst normalizeForMatch = (text) => text.replace(/\\s+/g, \"\").toLowerCase();\n\t\tlet queueCursor = 0;\n\t\tconst LOOKAHEAD = 5;\n\n\t\treturn lyricsLines.map((line) => {\n\t\t\tconst lineText = getTextCallback(line) || \"ā™Ŗ\";\n\t\t\tlet normalizedLine = normalizeForMatch(lineText);\n\n\t\t\tlet matchedPerformers = [];\n\n\t\t\twhile (queueCursor < snippetQueue.length) {\n\t\t\t\tlet matchFoundAtOffset = -1;\n\n\t\t\t\tfor (let i = 0; i < LOOKAHEAD && queueCursor + i < snippetQueue.length; i++) {\n\t\t\t\t\tconst snippet = snippetQueue[queueCursor + i];\n\n\t\t\t\t\tif (normalizedLine.includes(snippet.text) && snippet.text.length > 0) {\n\t\t\t\t\t\tmatchFoundAtOffset = i;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (matchFoundAtOffset !== -1) {\n\t\t\t\t\tqueueCursor += matchFoundAtOffset;\n\t\t\t\t\tconst matchedSnippet = snippetQueue[queueCursor];\n\t\t\t\t\tmatchedPerformers.push(...matchedSnippet.performers);\n\t\t\t\t\tnormalizedLine = normalizedLine.replace(matchedSnippet.text, \"\");\n\t\t\t\t\tqueueCursor++;\n\t\t\t\t} else {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst uniquePerformers = [];\n\t\t\tconst sawMap = new Set();\n\t\t\tfor (const p of matchedPerformers) {\n\t\t\t\tconst key = p.fqid || p.name;\n\t\t\t\tif (!sawMap.has(key)) {\n\t\t\t\t\tsawMap.add(key);\n\t\t\t\t\tuniquePerformers.push(p);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...line,\n\t\t\t\tperformers: uniquePerformers,\n\t\t\t};\n\t\t});\n\t}\n\n\tasync function getKaraoke(body) {\n\t\tconst meta = body?.[\"matcher.track.get\"]?.message?.body;\n\t\tif (!meta) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (!meta.track.has_richsync || meta.track.instrumental) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst baseURL = \"https://apic-desktop.musixmatch.com/ws/1.1/track.richsync.get?format=json&subtitle_format=mxm&app_id=web-desktop-app-v1.0&\";\n\n\t\tconst params = {\n\t\t\tf_subtitle_length: meta.track.track_length,\n\t\t\tq_duration: meta.track.track_length,\n\t\t\tcommontrack_id: meta.track.commontrack_id,\n\t\t\tusertoken: CONFIG.providers.musixmatch.token,\n\t\t};\n\n\t\tconst finalURL =\n\t\t\tbaseURL +\n\t\t\tObject.keys(params)\n\t\t\t\t.map((key) => `${key}=${encodeURIComponent(params[key])}`)\n\t\t\t\t.join(\"&\");\n\n\t\tlet result = await Spicetify.CosmosAsync.get(finalURL, null, headers);\n\n\t\tif (result.message.header.status_code !== 200) {\n\t\t\treturn null;\n\t\t}\n\n\t\tresult = result.message.body;\n\n\t\tconst snippetQueue = parsePerformerData(meta);\n\n\t\tconst parsedKaraoke = JSON.parse(result.richsync.richsync_body).map((line) => {\n\t\t\tconst startTime = line.ts * 1000;\n\t\t\tconst endTime = line.te * 1000;\n\t\t\tconst words = line.l;\n\n\t\t\tconst text = words.map((word, index, words) => {\n\t\t\t\tconst wordText = word.c;\n\t\t\t\tconst wordStartTime = word.o * 1000;\n\t\t\t\tconst nextWordStartTime = words[index + 1]?.o * 1000;\n\n\t\t\t\tconst time = !Number.isNaN(nextWordStartTime) ? nextWordStartTime - wordStartTime : endTime - (wordStartTime + startTime);\n\n\t\t\t\treturn {\n\t\t\t\t\tword: wordText,\n\t\t\t\t\ttime,\n\t\t\t\t};\n\t\t\t});\n\t\t\treturn {\n\t\t\t\tstartTime,\n\t\t\t\tendTime,\n\t\t\t\ttext,\n\t\t\t};\n\t\t});\n\n\t\treturn matchSequential(parsedKaraoke, snippetQueue, (line) => {\n\t\t\tif (Array.isArray(line.text)) {\n\t\t\t\treturn line.text.map((t) => t.word).join(\"\");\n\t\t\t}\n\t\t\treturn line.text;\n\t\t}).map((line) => {\n\t\t\tconst performerNames = (line.performers || [])\n\t\t\t\t.map((p) => p.name)\n\t\t\t\t.filter(Boolean)\n\t\t\t\t.join(\", \");\n\t\t\treturn {\n\t\t\t\t...line,\n\t\t\t\tperformer: performerNames || null,\n\t\t\t};\n\t\t});\n\t}\n\n\tfunction getSynced(body) {\n\t\tconst meta = body?.[\"matcher.track.get\"]?.message?.body;\n\t\tif (!meta) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst hasSynced = meta?.track?.has_subtitles;\n\n\t\tconst isInstrumental = meta?.track?.instrumental;\n\n\t\tif (isInstrumental) {\n\t\t\treturn [{ text: \"ā™Ŗ Instrumental ā™Ŗ\", startTime: \"0000\" }];\n\t\t}\n\t\tif (hasSynced) {\n\t\t\tconst subtitle = body[\"track.subtitles.get\"]?.message?.body?.subtitle_list?.[0]?.subtitle;\n\t\t\tif (!subtitle) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst snippetQueue = parsePerformerData(meta);\n\t\t\tconst rawLines = JSON.parse(subtitle.subtitle_body);\n\n\t\t\treturn matchSequential(rawLines, snippetQueue, (l) => l.text).map((line) => {\n\t\t\t\tconst lineText = line.text || \"ā™Ŗ\";\n\t\t\t\tconst performerNames = (line.performers || [])\n\t\t\t\t\t.map((p) => p.name)\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(\", \");\n\n\t\t\t\treturn {\n\t\t\t\t\ttext: lineText,\n\t\t\t\t\tstartTime: line.time.total * 1000,\n\t\t\t\t\tperformer: performerNames || null,\n\t\t\t\t};\n\t\t\t});\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tfunction getUnsynced(body) {\n\t\tconst meta = body?.[\"matcher.track.get\"]?.message?.body;\n\t\tif (!meta) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst hasUnSynced = meta.track.has_lyrics || meta.track.has_lyrics_crowd;\n\n\t\tconst isInstrumental = meta?.track?.instrumental;\n\n\t\tif (isInstrumental) {\n\t\t\treturn [{ text: \"ā™Ŗ Instrumental ā™Ŗ\" }];\n\t\t}\n\t\tif (hasUnSynced) {\n\t\t\tconst lyrics = body[\"track.lyrics.get\"]?.message?.body?.lyrics?.lyrics_body;\n\t\t\tif (!lyrics) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst snippetQueue = parsePerformerData(meta);\n\t\t\tconst rawLines = lyrics.split(\"\\n\").map((text) => ({ text }));\n\n\t\t\treturn matchSequential(rawLines, snippetQueue, (l) => l.text).map((line) => {\n\t\t\t\tconst performerNames = (line.performers || [])\n\t\t\t\t\t.map((p) => p.name)\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(\", \");\n\n\t\t\t\treturn {\n\t\t\t\t\t...line,\n\t\t\t\t\tperformer: performerNames || null,\n\t\t\t\t};\n\t\t\t});\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tasync function getTranslation(trackId) {\n\t\tif (!trackId) return null;\n\n\t\tconst selectedLanguage = CONFIG.visual[\"musixmatch-translation-language\"] || \"none\";\n\t\tif (selectedLanguage === \"none\") return null;\n\n\t\tconst baseURL =\n\t\t\t\"https://apic-desktop.musixmatch.com/ws/1.1/crowd.track.translations.get?translation_fields_set=minimal&comment_format=text&format=json&app_id=web-desktop-app-v1.0&\";\n\n\t\tconst params = {\n\t\t\ttrack_id: trackId,\n\t\t\tselected_language: selectedLanguage,\n\t\t\tusertoken: CONFIG.providers.musixmatch.token,\n\t\t};\n\n\t\tconst finalURL =\n\t\t\tbaseURL +\n\t\t\tObject.keys(params)\n\t\t\t\t.map((key) => `${key}=${encodeURIComponent(params[key])}`)\n\t\t\t\t.join(\"&\");\n\n\t\tlet result = await Spicetify.CosmosAsync.get(finalURL, null, headers);\n\n\t\tif (result.message.header.status_code !== 200) return null;\n\n\t\tresult = result.message.body;\n\n\t\tif (!result.translations_list?.length) return null;\n\n\t\treturn result.translations_list.map(({ translation }) => ({\n\t\t\ttranslation: translation.description,\n\t\t\tmatchedLine: translation.matched_line,\n\t\t}));\n\t}\n\n\tlet languageMap = null;\n\tasync function getLanguages() {\n\t\tif (languageMap) return languageMap;\n\n\t\ttry {\n\t\t\tconst cached = localStorage.getItem(\"lyrics-plus:musixmatch-languages\");\n\t\t\tif (cached) {\n\t\t\t\tconst tempMap = JSON.parse(cached);\n\t\t\t\t// Check cache version\n\t\t\t\tif (tempMap.__version === 1) {\n\t\t\t\t\tdelete tempMap.__version;\n\t\t\t\t\tlanguageMap = tempMap;\n\t\t\t\t\treturn languageMap;\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tconsole.warn(\"Failed to parse cached languages\", e);\n\t\t}\n\n\t\tconst baseURL = \"https://apic-desktop.musixmatch.com/ws/1.1/languages.get?app_id=web-desktop-app-v1.0&get_romanized_info=1&\";\n\n\t\tconst params = {\n\t\t\tusertoken: CONFIG.providers.musixmatch.token,\n\t\t};\n\n\t\tconst finalURL =\n\t\t\tbaseURL +\n\t\t\tObject.keys(params)\n\t\t\t\t.map((key) => `${key}=${encodeURIComponent(params[key])}`)\n\t\t\t\t.join(\"&\");\n\n\t\ttry {\n\t\t\tlet body = await Spicetify.CosmosAsync.get(finalURL, null, headers);\n\t\t\tif (body?.message?.body?.language_list) {\n\t\t\t\tlanguageMap = {};\n\t\t\t\tbody.message.body.language_list.forEach((item) => {\n\t\t\t\t\tconst lang = item.language;\n\t\t\t\t\tif (lang.language_name) {\n\t\t\t\t\t\tconst name = lang.language_name.charAt(0).toUpperCase() + lang.language_name.slice(1);\n\t\t\t\t\t\tif (lang.language_iso_code_1) languageMap[lang.language_iso_code_1] = name;\n\t\t\t\t\t\tif (lang.language_iso_code_3) languageMap[lang.language_iso_code_3] = name;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tlocalStorage.setItem(\"lyrics-plus:musixmatch-languages\", JSON.stringify({ ...languageMap, __version: 1 }));\n\t\t\t\treturn languageMap;\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tconsole.error(\"Failed to fetch languages\", e);\n\t\t}\n\t\treturn {};\n\t}\n\n\treturn { findLyrics, getKaraoke, getSynced, getUnsynced, getTranslation, getLanguages };\n})();\n" }, { "path": "CustomApps/lyrics-plus/ProviderNetease.js", "content": "const ProviderNetease = (() => {\n\tconst requestHeader = {\n\t\t\"User-Agent\": \"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0\",\n\t};\n\n\tasync function findLyrics(info) {\n\t\tconst searchURL = \"https://music.xianqiao.wang/neteaseapiv2/search?limit=10&type=1&keywords=\";\n\t\tconst lyricURL = \"https://music.xianqiao.wang/neteaseapiv2/lyric?id=\";\n\n\t\tconst cleanTitle = Utils.removeExtraInfo(Utils.removeSongFeat(Utils.normalize(info.title)));\n\t\tconst finalURL = searchURL + encodeURIComponent(`${cleanTitle} ${info.artist}`);\n\n\t\tconst searchResults = await Spicetify.CosmosAsync.get(finalURL, null, requestHeader);\n\t\tconst items = searchResults.result.songs;\n\t\tif (!items?.length) {\n\t\t\tthrow \"Cannot find track\";\n\t\t}\n\n\t\t// normalized expected album name\n\t\tconst neAlbumName = Utils.normalize(info.album);\n\t\tconst expectedAlbumName = Utils.containsHanCharacter(neAlbumName) ? await Utils.toSimplifiedChinese(neAlbumName) : neAlbumName;\n\t\tlet itemId = items.findIndex((val) => Utils.normalize(val.album.name) === expectedAlbumName);\n\t\tif (itemId === -1) itemId = items.findIndex((val) => Math.abs(info.duration - val.duration) < 3000);\n\t\tif (itemId === -1) itemId = items.findIndex((val) => val.name === cleanTitle);\n\t\tif (itemId === -1) throw \"Cannot find track\";\n\n\t\treturn await Spicetify.CosmosAsync.get(lyricURL + items[itemId].id, null, requestHeader);\n\t}\n\n\tconst creditInfo = [\n\t\t\"\\\\s?作?\\\\s*čƍ|\\\\s?作?\\\\s*ę›²|\\\\s?ē¼–\\\\s*ę›²?|\\\\s?ē›‘\\\\s*制?\",\n\t\t\".*ē¼–写|.*和音|.*和声|.*合声|.*ꏐē“|.*录|.*å·„ē؋|.*巄作室|.*č®¾č®”|.*å‰Ŗč¾‘|.*制作|.*å‘č”Œ|.*å‡ŗ品|.*åŽęœŸ|.*ę··éŸ³|.*ē¼©ę··\",\n\t\t\"原唱|ēæ»å”±|题字|ę–‡ę”ˆ|굷ꊄ|古ē­|äŗŒčƒ”|钢ē“|吉他|č“ę–Æ|ē¬›å­|鼓|弦乐\",\n\t\t\"lrc|publish|vocal|guitar|program|produce|write|mix\",\n\t];\n\tconst creditInfoRegExp = new RegExp(`^(${creditInfo.join(\"|\")}).*(:|ļ¼š)`, \"i\");\n\n\tfunction containCredits(text) {\n\t\treturn creditInfoRegExp.test(text);\n\t}\n\n\tfunction parseTimestamp(line) {\n\t\t// [\"[ar:Beyond]\"]\n\t\t// [\"[03:10]\"]\n\t\t// [\"[03:10]\", \"lyrics\"]\n\t\t// [\"lyrics\"]\n\t\t// [\"[03:10]\", \"[03:10]\", \"lyrics\"]\n\t\t// [\"[1235,300]\", \"lyrics\"]\n\t\tconst matchResult = line.match(/(\\[.*?\\])|([^[\\]]+)/g);\n\t\tif (!matchResult?.length || matchResult.length === 1) {\n\t\t\treturn { text: line };\n\t\t}\n\n\t\tconst textIndex = matchResult.findIndex((slice) => !slice.endsWith(\"]\"));\n\t\tlet text = \"\";\n\n\t\tif (textIndex > -1) {\n\t\t\ttext = matchResult.splice(textIndex, 1)[0];\n\t\t\ttext = Utils.capitalize(Utils.normalize(text, false));\n\t\t}\n\n\t\tconst time = matchResult[0].replace(\"[\", \"\").replace(\"]\", \"\");\n\n\t\treturn { time, text };\n\t}\n\n\tfunction breakdownLine(text) {\n\t\t// (0,508)Don't(0,1) (0,151)want(0,1) (0,162)to(0,1) (0,100)be(0,1) (0,157)an(0,1)\n\t\tconst components = text.split(/\\(\\d+,(\\d+)\\)/g);\n\t\t// [\"\", \"508\", \"Don't\", \"1\", \" \", \"151\", \"want\" , \"1\" ...]\n\t\tconst result = [];\n\t\tfor (let i = 1; i < components.length; i += 2) {\n\t\t\tif (components[i + 1] === \" \") continue;\n\t\t\tresult.push({\n\t\t\t\tword: `${components[i + 1]} `,\n\t\t\t\ttime: Number.parseInt(components[i]),\n\t\t\t});\n\t\t}\n\t\treturn result;\n\t}\n\n\tfunction getKaraoke(list) {\n\t\tconst lyricStr = list?.klyric?.lyric;\n\n\t\tif (!lyricStr) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst lines = lyricStr.split(/\\r?\\n/).map((line) => line.trim());\n\t\tconst karaoke = lines\n\t\t\t.map((line) => {\n\t\t\t\tconst { time, text } = parseTimestamp(line);\n\t\t\t\tif (!time || !text) return null;\n\n\t\t\t\tconst [key, value] = time.split(\",\") || [];\n\t\t\t\tconst [start, durr] = [Number.parseFloat(key), Number.parseFloat(value)];\n\n\t\t\t\tif (!Number.isNaN(start) && !Number.isNaN(durr) && !containCredits(text)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tstartTime: start,\n\t\t\t\t\t\t// endTime: start + durr,\n\t\t\t\t\t\ttext: breakdownLine(text),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn null;\n\t\t\t})\n\t\t\t.filter(Boolean);\n\n\t\tif (!karaoke.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn karaoke;\n\t}\n\n\tfunction getSynced(list) {\n\t\tconst lyricStr = list?.lrc?.lyric;\n\t\tlet noLyrics = false;\n\n\t\tif (!lyricStr) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst lines = lyricStr.split(/\\r?\\n/).map((line) => line.trim());\n\t\tconst lyrics = lines\n\t\t\t.map((line) => {\n\t\t\t\tconst { time, text } = parseTimestamp(line);\n\t\t\t\tif (text === \"ēŗÆ音乐, čÆ·ę¬£čµ\") noLyrics = true;\n\t\t\t\tif (!time || !text) return null;\n\n\t\t\t\tconst [key, value] = time.split(\":\") || [];\n\t\t\t\tconst [min, sec] = [Number.parseFloat(key), Number.parseFloat(value)];\n\t\t\t\tif (!Number.isNaN(min) && !Number.isNaN(sec) && !containCredits(text)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tstartTime: (min * 60 + sec) * 1000,\n\t\t\t\t\t\ttext: text || \"\",\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn null;\n\t\t\t})\n\t\t\t.filter(Boolean);\n\n\t\tif (!lyrics.length || noLyrics) {\n\t\t\treturn null;\n\t\t}\n\t\treturn lyrics;\n\t}\n\n\tfunction getTranslation(list) {\n\t\tconst lyricStr = list?.tlyric?.lyric;\n\n\t\tif (!lyricStr) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst lines = lyricStr.split(/\\r?\\n/).map((line) => line.trim());\n\t\tconst translation = lines\n\t\t\t.map((line) => {\n\t\t\t\tconst { time, text } = parseTimestamp(line);\n\t\t\t\tif (!time || !text) return null;\n\n\t\t\t\tconst [key, value] = time.split(\":\") || [];\n\t\t\t\tconst [min, sec] = [Number.parseFloat(key), Number.parseFloat(value)];\n\t\t\t\tif (!Number.isNaN(min) && !Number.isNaN(sec) && !containCredits(text)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tstartTime: (min * 60 + sec) * 1000,\n\t\t\t\t\t\ttext: text || \"\",\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn null;\n\t\t\t})\n\t\t\t.filter(Boolean);\n\n\t\tif (!translation.length) {\n\t\t\treturn null;\n\t\t}\n\t\treturn translation;\n\t}\n\n\tfunction getUnsynced(list) {\n\t\tconst lyricStr = list?.lrc?.lyric;\n\t\tlet noLyrics = false;\n\n\t\tif (!lyricStr) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst lines = lyricStr.split(/\\r?\\n/).map((line) => line.trim());\n\t\tconst lyrics = lines\n\t\t\t.map((line) => {\n\t\t\t\tconst parsed = parseTimestamp(line);\n\t\t\t\tif (parsed.text === \"ēŗÆ音乐, čÆ·ę¬£čµ\") noLyrics = true;\n\t\t\t\tif (!parsed.text || containCredits(parsed.text)) return null;\n\t\t\t\treturn parsed;\n\t\t\t})\n\t\t\t.filter(Boolean);\n\n\t\tif (!lyrics.length || noLyrics) {\n\t\t\treturn null;\n\t\t}\n\t\treturn lyrics;\n\t}\n\n\treturn { findLyrics, getKaraoke, getSynced, getUnsynced, getTranslation };\n})();\n" }, { "path": "CustomApps/lyrics-plus/Providers.js", "content": "const Providers = {\n\tspotify: async (info) => {\n\t\tconst result = {\n\t\t\turi: info.uri,\n\t\t\tkaraoke: null,\n\t\t\tsynced: null,\n\t\t\tunsynced: null,\n\t\t\tprovider: \"Spotify\",\n\t\t\tcopyright: null,\n\t\t};\n\n\t\tconst baseURL = \"https://spclient.wg.spotify.com/color-lyrics/v2/track/\";\n\t\tconst id = info.uri.split(\":\")[2];\n\t\tlet body;\n\t\ttry {\n\t\t\tbody = await Spicetify.CosmosAsync.get(`${baseURL + id}?format=json&vocalRemoval=false&market=from_token`);\n\t\t} catch {\n\t\t\treturn { error: \"Request error\", uri: info.uri };\n\t\t}\n\n\t\tconst lyrics = body.lyrics;\n\t\tif (!lyrics) {\n\t\t\treturn { error: \"No lyrics\", uri: info.uri };\n\t\t}\n\n\t\tconst lines = lyrics.lines;\n\t\tif (lyrics.syncType === \"LINE_SYNCED\") {\n\t\t\tresult.synced = lines.map((line) => ({\n\t\t\t\tstartTime: line.startTimeMs,\n\t\t\t\ttext: line.words,\n\t\t\t}));\n\t\t\tresult.unsynced = result.synced;\n\t\t} else {\n\t\t\tresult.unsynced = lines.map((line) => ({\n\t\t\t\ttext: line.words,\n\t\t\t}));\n\t\t}\n\n\t\t/**\n\t\t * to distinguish it from the existing Musixmatch, the provider will remain as Spotify.\n\t\t * if Spotify official lyrics support multiple providers besides Musixmatch in the future, please uncomment the under section. */\n\t\t// result.provider = lyrics.provider;\n\n\t\treturn result;\n\t},\n\tmusixmatch: async (info) => {\n\t\tconst result = {\n\t\t\terror: null,\n\t\t\turi: info.uri,\n\t\t\tkaraoke: null,\n\t\t\tsynced: null,\n\t\t\tunsynced: null,\n\t\t\tmusixmatchTranslation: null,\n\t\t\tmusixmatchAvailableTranslations: [],\n\t\t\tmusixmatchTrackId: null,\n\t\t\tmusixmatchTranslationLanguage: null,\n\t\t\tprovider: \"Musixmatch\",\n\t\t\tcopyright: null,\n\t\t};\n\n\t\tlet list;\n\t\ttry {\n\t\t\tlist = await ProviderMusixmatch.findLyrics(info);\n\t\t\tif (list.error) {\n\t\t\t\tthrow \"\";\n\t\t\t}\n\t\t} catch {\n\t\t\tresult.error = \"No lyrics\";\n\t\t\treturn result;\n\t\t}\n\n\t\tconst karaoke = await ProviderMusixmatch.getKaraoke(list);\n\t\tif (karaoke) {\n\t\t\tresult.karaoke = karaoke;\n\t\t\tresult.copyright = list[\"track.lyrics.get\"].message?.body?.lyrics?.lyrics_copyright?.trim();\n\t\t}\n\t\tconst synced = ProviderMusixmatch.getSynced(list);\n\t\tif (synced) {\n\t\t\tresult.synced = synced;\n\t\t\tresult.copyright = list[\"track.subtitles.get\"].message?.body?.subtitle_list?.[0]?.subtitle.lyrics_copyright.trim();\n\t\t}\n\t\tconst unsynced = synced || ProviderMusixmatch.getUnsynced(list);\n\t\tif (unsynced) {\n\t\t\tresult.unsynced = unsynced;\n\t\t\tresult.copyright = list[\"track.lyrics.get\"].message?.body?.lyrics?.lyrics_copyright?.trim();\n\t\t}\n\t\tresult.musixmatchAvailableTranslations = Array.isArray(list.__musixmatchTranslationStatus) ? list.__musixmatchTranslationStatus : [];\n\t\tresult.musixmatchTrackId = list.__musixmatchTrackId ?? null;\n\n\t\tconst selectedLanguage = CONFIG.visual[\"musixmatch-translation-language\"];\n\t\tconst canRequestTranslation =\n\t\t\tselectedLanguage && selectedLanguage !== \"none\" && result.musixmatchAvailableTranslations.includes(selectedLanguage);\n\n\t\tconst translation = canRequestTranslation ? await ProviderMusixmatch.getTranslation(result.musixmatchTrackId) : null;\n\t\tif ((synced || unsynced) && Array.isArray(translation) && translation.length) {\n\t\t\tconst normalizeLyrics =\n\t\t\t\ttypeof Utils !== \"undefined\" && typeof Utils.processLyrics === \"function\"\n\t\t\t\t\t? (value) => Utils.processLyrics(value ?? \"\")\n\t\t\t\t\t: (value) =>\n\t\t\t\t\t\t\ttypeof value === \"string\" ? value.replace(/怀| /g, \"\").replace(/[!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~ļ¼Ÿļ¼ļ¼Œć€‚ć€ć€Šć€‹ć€ć€‘ć€Œć€]/g, \"\") : \"\";\n\n\t\t\tconst translationMap = new Map();\n\t\t\tfor (const entry of translation) {\n\t\t\t\tconst normalizedMatched = normalizeLyrics(entry.matchedLine);\n\t\t\t\tif (!translationMap.has(normalizedMatched)) {\n\t\t\t\t\ttranslationMap.set(normalizedMatched, entry.translation);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst baseLyrics = synced ?? unsynced;\n\t\t\tresult.musixmatchTranslation = baseLyrics.map((line) => {\n\t\t\t\tconst originalText = line.text;\n\t\t\t\tconst normalizedOriginal = normalizeLyrics(originalText);\n\t\t\t\treturn {\n\t\t\t\t\t...line,\n\t\t\t\t\ttext: translationMap.get(normalizedOriginal) ?? line.text,\n\t\t\t\t\toriginalText,\n\t\t\t\t};\n\t\t\t});\n\t\t\tresult.musixmatchTranslationLanguage = selectedLanguage;\n\t\t}\n\n\t\treturn result;\n\t},\n\tnetease: async (info) => {\n\t\tconst result = {\n\t\t\turi: info.uri,\n\t\t\tkaraoke: null,\n\t\t\tsynced: null,\n\t\t\tunsynced: null,\n\t\t\tneteaseTranslation: null,\n\t\t\tprovider: \"Netease\",\n\t\t\tcopyright: null,\n\t\t};\n\n\t\tlet list;\n\t\ttry {\n\t\t\tlist = await ProviderNetease.findLyrics(info);\n\t\t} catch {\n\t\t\tresult.error = \"No lyrics\";\n\t\t\treturn result;\n\t\t}\n\n\t\tconst karaoke = ProviderNetease.getKaraoke(list);\n\t\tif (karaoke) {\n\t\t\tresult.karaoke = karaoke;\n\t\t}\n\t\tconst synced = ProviderNetease.getSynced(list);\n\t\tif (synced) {\n\t\t\tresult.synced = synced;\n\t\t}\n\t\tconst unsynced = synced || ProviderNetease.getUnsynced(list);\n\t\tif (unsynced) {\n\t\t\tresult.unsynced = unsynced;\n\t\t}\n\t\tconst translation = ProviderNetease.getTranslation(list);\n\t\tif ((synced || unsynced) && Array.isArray(translation)) {\n\t\t\tconst baseLyrics = synced ?? unsynced;\n\t\t\tresult.neteaseTranslation = baseLyrics.map((line) => ({\n\t\t\t\t...line,\n\t\t\t\ttext: translation.find((t) => t.startTime === line.startTime)?.text ?? line.text,\n\t\t\t\toriginalText: line.text,\n\t\t\t}));\n\t\t}\n\n\t\treturn result;\n\t},\n\tlrclib: async (info) => {\n\t\tconst result = {\n\t\t\turi: info.uri,\n\t\t\tkaraoke: null,\n\t\t\tsynced: null,\n\t\t\tunsynced: null,\n\t\t\tprovider: \"lrclib\",\n\t\t\tcopyright: null,\n\t\t};\n\n\t\tlet list;\n\t\ttry {\n\t\t\tlist = await ProviderLRCLIB.findLyrics(info);\n\t\t} catch {\n\t\t\tresult.error = \"No lyrics\";\n\t\t\treturn result;\n\t\t}\n\n\t\tconst synced = ProviderLRCLIB.getSynced(list);\n\t\tif (synced) {\n\t\t\tresult.synced = synced;\n\t\t}\n\n\t\tconst unsynced = synced || ProviderLRCLIB.getUnsynced(list);\n\n\t\tif (unsynced) {\n\t\t\tresult.unsynced = unsynced;\n\t\t}\n\n\t\treturn result;\n\t},\n\tgenius: async (info) => {\n\t\tconst { lyrics, versions } = await ProviderGenius.fetchLyrics(info);\n\n\t\tlet versionIndex2 = 0;\n\t\tlet genius2 = lyrics;\n\t\tif (CONFIG.visual[\"dual-genius\"] && versions.length > 1) {\n\t\t\tgenius2 = await ProviderGenius.fetchLyricsVersion(versions, 1);\n\t\t\tversionIndex2 = 1;\n\t\t}\n\n\t\treturn {\n\t\t\turi: info.uri,\n\t\t\tgenius: lyrics,\n\t\t\tprovider: \"Genius\",\n\t\t\tkaraoke: null,\n\t\t\tsynced: null,\n\t\t\tunsynced: null,\n\t\t\tcopyright: null,\n\t\t\terror: null,\n\t\t\tversions,\n\t\t\tversionIndex: 0,\n\t\t\tgenius2,\n\t\t\tversionIndex2,\n\t\t};\n\t},\n\tlocal: (info) => {\n\t\tlet result = {\n\t\t\turi: info.uri,\n\t\t\tkaraoke: null,\n\t\t\tsynced: null,\n\t\t\tunsynced: null,\n\t\t\tprovider: \"local\",\n\t\t};\n\n\t\ttry {\n\t\t\tconst savedLyrics = JSON.parse(localStorage.getItem(\"lyrics-plus:local-lyrics\"));\n\t\t\tconst lyrics = savedLyrics[info.uri];\n\t\t\tif (!lyrics) {\n\t\t\t\tthrow \"\";\n\t\t\t}\n\n\t\t\tresult = {\n\t\t\t\t...result,\n\t\t\t\t...lyrics,\n\t\t\t};\n\t\t} catch {\n\t\t\tresult.error = \"No lyrics\";\n\t\t}\n\n\t\treturn result;\n\t},\n};\n" }, { "path": "CustomApps/lyrics-plus/README.md", "content": "# Spicetify Custom App\n\n### Lyrics Plus\n\nShow current track lyrics. Current lyrics providers:\n\n- Internal Spotify lyrics service.\n- Netease: From Chinese developers and users. Provides karaoke and synced lyrics.\n- Musixmatch: A company from Italy. Provided synced lyrics.\n- Genius: Provides unsynced lyrics but with description/insight from artists themselves (Disabled and cannot be used as a provider on `1.2.31` and higher).\n\n![kara](./kara.png)\n\n![genius](./genius.png)\n\nDifferent lyrics modes: Karaoke, Synced, Unsynced and Genius. At the moment, only Netease provides karaoke-able lyrics. Mode is automatically falled back, from Karaoke, Synced, Unsynced to Genius when lyrics are not available in that mode.\n\nRight click or Double click at any mode tab to \"lock in\", so lyric mode won't auto switch. It should show a dot next to mode name when mode is locked. Right click or double click again to unlock\n\n![lockin](./lockin.png)\n\nLyrics in Unsynced and Genius modes can be search and jump to. Hit Ctrl + Shift + F to open search box at bottom left of screen. Hit Enter/Shift+Enter to loop over results.\n\n![search](./search.png)\n\nChoose between different option of displaying Japanese lyrics. (Furigana, Romaji, Hiragana, Katakana)\n\n![conversion](./conversion.png)\n\nCustomise colors, change providers' priorities in config menu. Config menu locates in Profile Menu (top right button with your user name).\n\nTo install, run:\n\n```bash\nspicetify config custom_apps lyrics-plus\nspicetify apply\n```\n\n### Credits\n\n- A few parts of app code are taken from Spotify official app, including SyncedLyricsPage, CSS animation and TabBar. Please do not distribute these code else where out of Spotify/Spicetify context.\n- Netease synced lyrics parser is adapted from [mantou132/Spotify-Lyrics](https://github.com/mantou132/Spotify-Lyrics). Give it a Star if you like this app.\n- The algorithm for converting Japanese lyrics is based on [Hexenq's Kuroshiro](https://github.com/hexenq/kuroshiro).\n- The algorithm for converting Chinese lyrics is based on [BYVoid's OpenCC](https://github.com/BYVoid/OpenCC) via [nk2028's opencc-js](https://github.com/nk2028/opencc-js).\n- The algorithm for converting Korean lyrics is based on [fujaru's aromanize-js](https://github.com/fujaru/aromanize-js)\n- The algorithm for detecting Simplified Chinese is adapted from [nickdrewe's traditional-or-simplified](https://github.com/nickdrewe/traditional-or-simplified).\n" }, { "path": "CustomApps/lyrics-plus/Settings.js", "content": "const ButtonSVG = ({ icon, active = true, onClick }) => {\n\treturn react.createElement(\n\t\t\"button\",\n\t\t{\n\t\t\tclassName: `switch${active ? \"\" : \" disabled\"}`,\n\t\t\tonClick,\n\t\t},\n\t\treact.createElement(\"svg\", {\n\t\t\twidth: 16,\n\t\t\theight: 16,\n\t\t\tviewBox: \"0 0 16 16\",\n\t\t\tfill: \"currentColor\",\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: icon,\n\t\t\t},\n\t\t})\n\t);\n};\n\nconst SwapButton = ({ icon, disabled, onClick }) => {\n\treturn react.createElement(\n\t\t\"button\",\n\t\t{\n\t\t\tclassName: \"switch small\",\n\t\t\tonClick,\n\t\t\tdisabled,\n\t\t},\n\t\treact.createElement(\"svg\", {\n\t\t\twidth: 10,\n\t\t\theight: 10,\n\t\t\tviewBox: \"0 0 16 16\",\n\t\t\tfill: \"currentColor\",\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: icon,\n\t\t\t},\n\t\t})\n\t);\n};\n\nconst CacheButton = () => {\n\tlet lyrics = {};\n\n\ttry {\n\t\tconst localLyrics = JSON.parse(localStorage.getItem(\"lyrics-plus:local-lyrics\"));\n\t\tif (!localLyrics || typeof localLyrics !== \"object\") {\n\t\t\tthrow \"\";\n\t\t}\n\t\tlyrics = localLyrics;\n\t} catch {\n\t\tlyrics = {};\n\t}\n\n\tconst [count, setCount] = useState(Object.keys(lyrics).length);\n\tconst text = count ? \"Clear all cached lyrics\" : \"No cached lyrics\";\n\n\treturn react.createElement(\n\t\t\"button\",\n\t\t{\n\t\t\tclassName: \"btn\",\n\t\t\tonClick: () => {\n\t\t\t\tlocalStorage.removeItem(\"lyrics-plus:local-lyrics\");\n\t\t\t\tsetCount(0);\n\t\t\t},\n\t\t\tdisabled: !count,\n\t\t},\n\t\ttext\n\t);\n};\n\nconst RefreshTokenButton = ({ setTokenCallback }) => {\n\tconst [buttonText, setButtonText] = useState(\"Refresh token\");\n\n\tuseEffect(() => {\n\t\tif (buttonText === \"Refreshing token...\") {\n\t\t\tSpicetify.CosmosAsync.get(\"https://apic-desktop.musixmatch.com/ws/1.1/token.get?app_id=web-desktop-app-v1.0\", null, {\n\t\t\t\tauthority: \"apic-desktop.musixmatch.com\",\n\t\t\t})\n\t\t\t\t.then(({ message: response }) => {\n\t\t\t\t\tif (response.header.status_code === 200 && response.body.user_token) {\n\t\t\t\t\t\tsetTokenCallback(response.body.user_token);\n\t\t\t\t\t\tsetButtonText(\"Token refreshed\");\n\t\t\t\t\t} else if (response.header.status_code === 401) {\n\t\t\t\t\t\tsetButtonText(\"Too many attempts\");\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetButtonText(\"Failed to refresh token\");\n\t\t\t\t\t\tconsole.error(\"Failed to refresh token\", response);\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tsetButtonText(\"Failed to refresh token\");\n\t\t\t\t\tconsole.error(\"Failed to refresh token\", error);\n\t\t\t\t});\n\t\t}\n\t}, [buttonText]);\n\n\treturn react.createElement(\n\t\t\"button\",\n\t\t{\n\t\t\tclassName: \"btn\",\n\t\t\tonClick: () => {\n\t\t\t\tsetButtonText(\"Refreshing token...\");\n\t\t\t},\n\t\t\tdisabled: buttonText !== \"Refresh token\",\n\t\t},\n\t\tbuttonText\n\t);\n};\n\nconst ConfigButton = ({ name, text, onChange = () => {} }) => {\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"button\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"btn\",\n\t\t\t\t\tonClick: onChange,\n\t\t\t\t},\n\t\t\t\ttext\n\t\t\t)\n\t\t)\n\t);\n};\n\nconst ConfigSlider = ({ name, defaultValue, onChange = () => {} }) => {\n\tconst [active, setActive] = useState(defaultValue);\n\n\tuseEffect(() => {\n\t\tsetActive(defaultValue);\n\t}, [defaultValue]);\n\n\tconst toggleState = useCallback(() => {\n\t\tconst state = !active;\n\t\tsetActive(state);\n\t\tonChange(state);\n\t}, [active]);\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(ButtonSVG, {\n\t\t\t\ticon: Spicetify.SVGIcons.check,\n\t\t\t\tactive,\n\t\t\t\tonClick: toggleState,\n\t\t\t})\n\t\t)\n\t);\n};\n\nconst ConfigSelection = ({ name, defaultValue, options, onChange = () => {} }) => {\n\tconst [value, setValue] = useState(defaultValue);\n\n\tconst setValueCallback = useCallback(\n\t\t(event) => {\n\t\t\tlet value = event.target.value;\n\t\t\tif (!Number.isNaN(Number(value))) {\n\t\t\t\tvalue = Number.parseInt(value);\n\t\t\t}\n\t\t\tsetValue(value);\n\t\t\tonChange(value);\n\t\t},\n\t\t[value, options]\n\t);\n\n\tuseEffect(() => {\n\t\tsetValue(defaultValue);\n\t}, [defaultValue]);\n\n\tif (!Object.keys(options).length) return null;\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"select\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"main-dropDown-dropDown\",\n\t\t\t\t\tvalue,\n\t\t\t\t\tonChange: setValueCallback,\n\t\t\t\t},\n\t\t\t\tObject.keys(options).map((item) =>\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"option\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvalue: item,\n\t\t\t\t\t\t},\n\t\t\t\t\t\toptions[item]\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n};\n\nconst ConfigInput = ({ name, defaultValue, onChange = () => {} }) => {\n\tconst [value, setValue] = useState(defaultValue);\n\n\tconst setValueCallback = useCallback(\n\t\t(event) => {\n\t\t\tconst value = event.target.value;\n\t\t\tsetValue(value);\n\t\t\tonChange(value);\n\t\t},\n\t\t[value]\n\t);\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(\"input\", {\n\t\t\t\tvalue,\n\t\t\t\tonChange: setValueCallback,\n\t\t\t})\n\t\t)\n\t);\n};\n\nconst ConfigAdjust = ({ name, defaultValue, step, min, max, onChange = () => {} }) => {\n\tconst [value, setValue] = useState(defaultValue);\n\n\tfunction adjust(dir) {\n\t\tlet temp = value + dir * step;\n\t\tif (temp < min) {\n\t\t\ttemp = min;\n\t\t} else if (temp > max) {\n\t\t\ttemp = max;\n\t\t}\n\t\tsetValue(temp);\n\t\tonChange(temp);\n\t}\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(SwapButton, {\n\t\t\t\ticon: ``,\n\t\t\t\tonClick: () => adjust(-1),\n\t\t\t\tdisabled: value === min,\n\t\t\t}),\n\t\t\treact.createElement(\n\t\t\t\t\"p\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"adjust-value\",\n\t\t\t\t},\n\t\t\t\tvalue\n\t\t\t),\n\t\t\treact.createElement(SwapButton, {\n\t\t\t\ticon: Spicetify.SVGIcons.plus2px,\n\t\t\t\tonClick: () => adjust(1),\n\t\t\t\tdisabled: value === max,\n\t\t\t})\n\t\t)\n\t);\n};\n\nconst ConfigHotkey = ({ name, defaultValue, onChange = () => {} }) => {\n\tconst [value, setValue] = useState(defaultValue);\n\tconst [trap] = useState(new Spicetify.Mousetrap());\n\n\tfunction record() {\n\t\ttrap.handleKey = (character, modifiers, e) => {\n\t\t\tif (e.type === \"keydown\") {\n\t\t\t\tconst sequence = [...new Set([...modifiers, character])];\n\t\t\t\tif (sequence.length === 1 && sequence[0] === \"esc\") {\n\t\t\t\t\tonChange(\"\");\n\t\t\t\t\tsetValue(\"\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tsetValue(sequence.join(\"+\"));\n\t\t\t}\n\t\t};\n\t}\n\n\tfunction finishRecord() {\n\t\ttrap.handleKey = () => {};\n\t\tonChange(value);\n\t}\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(\"input\", {\n\t\t\t\tvalue,\n\t\t\t\tonFocus: record,\n\t\t\t\tonBlur: finishRecord,\n\t\t\t})\n\t\t)\n\t);\n};\n\nconst ServiceAction = ({ item, setTokenCallback }) => {\n\tswitch (item.name) {\n\t\tcase \"local\":\n\t\t\treturn react.createElement(CacheButton);\n\t\tcase \"musixmatch\":\n\t\t\treturn react.createElement(RefreshTokenButton, { setTokenCallback });\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\n\nconst ServiceOption = ({ item, onToggle, onSwap, isFirst = false, isLast = false, onTokenChange = null }) => {\n\tconst [token, setToken] = useState(item.token);\n\tconst [active, setActive] = useState(item.on);\n\n\tconst setTokenCallback = useCallback(\n\t\t(token) => {\n\t\t\tsetToken(token);\n\t\t\tonTokenChange(item.name, token);\n\t\t},\n\t\t[item.token]\n\t);\n\n\tconst toggleActive = useCallback(() => {\n\t\tif (item.name === \"genius\" && spotifyVersion >= \"1.2.31\") return;\n\t\tconst state = !active;\n\t\tsetActive(state);\n\t\tonToggle(item.name, state);\n\t}, [active]);\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\tnull,\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"setting-row\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"h3\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"col description\",\n\t\t\t\t},\n\t\t\t\titem.name\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"col action\",\n\t\t\t\t},\n\t\t\t\treact.createElement(ServiceAction, {\n\t\t\t\t\titem,\n\t\t\t\t\tsetTokenCallback,\n\t\t\t\t}),\n\t\t\t\treact.createElement(SwapButton, {\n\t\t\t\t\ticon: Spicetify.SVGIcons[\"chart-up\"],\n\t\t\t\t\tonClick: () => onSwap(item.name, -1),\n\t\t\t\t\tdisabled: isFirst,\n\t\t\t\t}),\n\t\t\t\treact.createElement(SwapButton, {\n\t\t\t\t\ticon: Spicetify.SVGIcons[\"chart-down\"],\n\t\t\t\t\tonClick: () => onSwap(item.name, 1),\n\t\t\t\t\tdisabled: isLast,\n\t\t\t\t}),\n\t\t\t\treact.createElement(ButtonSVG, {\n\t\t\t\t\ticon: Spicetify.SVGIcons.check,\n\t\t\t\t\tactive,\n\t\t\t\t\tonClick: toggleActive,\n\t\t\t\t})\n\t\t\t)\n\t\t),\n\t\treact.createElement(\"span\", {\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: item.desc,\n\t\t\t},\n\t\t}),\n\t\titem.token !== undefined &&\n\t\t\treact.createElement(\"input\", {\n\t\t\t\tplaceholder: `Place your ${item.name} token here`,\n\t\t\t\tvalue: token,\n\t\t\t\tonChange: (event) => setTokenCallback(event.target.value),\n\t\t\t})\n\t);\n};\n\nconst ServiceList = ({ itemsList, onListChange = () => {}, onToggle = () => {}, onTokenChange = () => {} }) => {\n\tconst [items, setItems] = useState(itemsList);\n\tconst maxIndex = items.length - 1;\n\n\tconst onSwap = useCallback(\n\t\t(name, direction) => {\n\t\t\tconst curPos = items.findIndex((val) => val === name);\n\t\t\tconst newPos = curPos + direction;\n\t\t\t[items[curPos], items[newPos]] = [items[newPos], items[curPos]];\n\t\t\tonListChange(items);\n\t\t\tsetItems([...items]);\n\t\t},\n\t\t[items]\n\t);\n\n\treturn items.map((key, index) => {\n\t\tconst item = CONFIG.providers[key];\n\t\titem.name = key;\n\t\treturn react.createElement(ServiceOption, {\n\t\t\titem,\n\t\t\tkey,\n\t\t\tisFirst: index === 0,\n\t\t\tisLast: index === maxIndex,\n\t\t\tonSwap,\n\t\t\tonTokenChange,\n\t\t\tonToggle,\n\t\t});\n\t});\n};\n\nconst corsProxyTemplate = () => {\n\tconst [proxyValue, setProxyValue] = react.useState(localStorage.getItem(\"spicetify:corsProxyTemplate\") || \"https://cors-proxy.spicetify.app/{url}\");\n\n\treturn react.createElement(\"input\", {\n\t\tplaceholder: \"CORS Proxy Template\",\n\t\tvalue: proxyValue,\n\t\tonChange: (event) => {\n\t\t\tconst value = event.target.value;\n\t\t\tsetProxyValue(value);\n\n\t\t\tif (value === \"\" || !value) return localStorage.removeItem(\"spicetify:corsProxyTemplate\");\n\t\t\tlocalStorage.setItem(\"spicetify:corsProxyTemplate\", value);\n\t\t},\n\t});\n};\n\nconst OptionList = ({ type, items, onChange }) => {\n\tconst [itemList, setItemList] = useState(items);\n\tconst [, forceUpdate] = useState();\n\n\tuseEffect(() => {\n\t\tif (!type) return;\n\n\t\tconst eventListener = (event) => {\n\t\t\tif (event.detail?.type !== type) return;\n\t\t\tsetItemList(event.detail.items);\n\t\t};\n\t\tdocument.addEventListener(\"lyrics-plus\", eventListener);\n\n\t\treturn () => document.removeEventListener(\"lyrics-plus\", eventListener);\n\t}, []);\n\n\treturn itemList.map((item) => {\n\t\tif (!item || (item.when && !item.when())) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst onChangeItem = item.onChange || onChange;\n\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\tnull,\n\t\t\treact.createElement(item.type, {\n\t\t\t\t...item,\n\t\t\t\tname: item.desc,\n\t\t\t\tdefaultValue: CONFIG.visual[item.key],\n\t\t\t\tonChange: (value) => {\n\t\t\t\t\tonChangeItem(item.key, value);\n\t\t\t\t\tforceUpdate({});\n\t\t\t\t},\n\t\t\t}),\n\t\t\titem.info &&\n\t\t\t\treact.createElement(\"span\", {\n\t\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t\t__html: item.info,\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t);\n\t});\n};\n\nfunction openConfig() {\n\tconst configContainer = react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tid: `${APP_NAME}-config-container`,\n\t\t},\n\t\treact.createElement(\"h2\", null, \"Options\"),\n\t\treact.createElement(OptionList, {\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Playbar button\",\n\t\t\t\t\tkey: \"playbar-button\",\n\t\t\t\t\tinfo: \"Replace Spotify's lyrics button with Lyrics Plus.\",\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Global delay\",\n\t\t\t\t\tinfo: \"Offset (in ms) across all tracks.\",\n\t\t\t\t\tkey: \"global-delay\",\n\t\t\t\t\ttype: ConfigAdjust,\n\t\t\t\t\tmin: -10000,\n\t\t\t\t\tmax: 10000,\n\t\t\t\t\tstep: 250,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Font size\",\n\t\t\t\t\tinfo: \"(or Ctrl + Mouse scroll in main app)\",\n\t\t\t\t\tkey: \"font-size\",\n\t\t\t\t\ttype: ConfigAdjust,\n\t\t\t\t\tmin: fontSizeLimit.min,\n\t\t\t\t\tmax: fontSizeLimit.max,\n\t\t\t\t\tstep: fontSizeLimit.step,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Alignment\",\n\t\t\t\t\tkey: \"alignment\",\n\t\t\t\t\ttype: ConfigSelection,\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tleft: \"Left\",\n\t\t\t\t\t\tcenter: \"Center\",\n\t\t\t\t\t\tright: \"Right\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Fullscreen hotkey\",\n\t\t\t\t\tkey: \"fullscreen-key\",\n\t\t\t\t\ttype: ConfigHotkey,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Compact synced: Lines to show before\",\n\t\t\t\t\tkey: \"lines-before\",\n\t\t\t\t\ttype: ConfigSelection,\n\t\t\t\t\toptions: [0, 1, 2, 3, 4],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Compact synced: Lines to show after\",\n\t\t\t\t\tkey: \"lines-after\",\n\t\t\t\t\ttype: ConfigSelection,\n\t\t\t\t\toptions: [0, 1, 2, 3, 4],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Compact synced: Fade-out blur\",\n\t\t\t\t\tkey: \"fade-blur\",\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Noise overlay\",\n\t\t\t\t\tkey: \"noise\",\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Colorful background\",\n\t\t\t\t\tkey: \"colorful\",\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Background color\",\n\t\t\t\t\tkey: \"background-color\",\n\t\t\t\t\ttype: ConfigInput,\n\t\t\t\t\twhen: () => !CONFIG.visual.colorful,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Active text color\",\n\t\t\t\t\tkey: \"active-color\",\n\t\t\t\t\ttype: ConfigInput,\n\t\t\t\t\twhen: () => !CONFIG.visual.colorful,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Inactive text color\",\n\t\t\t\t\tkey: \"inactive-color\",\n\t\t\t\t\ttype: ConfigInput,\n\t\t\t\t\twhen: () => !CONFIG.visual.colorful,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Highlight text background\",\n\t\t\t\t\tkey: \"highlight-color\",\n\t\t\t\t\ttype: ConfigInput,\n\t\t\t\t\twhen: () => !CONFIG.visual.colorful,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Text convertion: Japanese Detection threshold (Advanced)\",\n\t\t\t\t\tinfo: \"Checks if whenever Kana is dominant in lyrics. If the result passes the threshold, it's most likely Japanese, and vice versa. This setting is in percentage.\",\n\t\t\t\t\tkey: \"ja-detect-threshold\",\n\t\t\t\t\ttype: ConfigAdjust,\n\t\t\t\t\tmin: thresholdSizeLimit.min,\n\t\t\t\t\tmax: thresholdSizeLimit.max,\n\t\t\t\t\tstep: thresholdSizeLimit.step,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Text convertion: Traditional-Simplified Detection threshold (Advanced)\",\n\t\t\t\t\tinfo: \"Checks if whenever Traditional or Simplified is dominant in lyrics. If the result passes the threshold, it's most likely Simplified, and vice versa. This setting is in percentage.\",\n\t\t\t\t\tkey: \"hans-detect-threshold\",\n\t\t\t\t\ttype: ConfigAdjust,\n\t\t\t\t\tmin: thresholdSizeLimit.min,\n\t\t\t\t\tmax: thresholdSizeLimit.max,\n\t\t\t\t\tstep: thresholdSizeLimit.step,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Clear Memory Cache\",\n\t\t\t\t\tinfo: \"Loaded lyrics are cached in memory for faster reloading. Press this button to clear the cached lyrics from memory without restarting Spotify.\",\n\t\t\t\t\tkey: \"clear-memore-cache\",\n\t\t\t\t\ttext: \"Clear memory cache\",\n\t\t\t\t\ttype: ConfigButton,\n\t\t\t\t\tonChange: () => {\n\t\t\t\t\t\treloadLyrics?.();\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t\tonChange: (name, value) => {\n\t\t\t\tCONFIG.visual[name] = value;\n\t\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:${name}`, value);\n\t\t\t\tlyricContainerUpdate?.();\n\n\t\t\t\tconst configChange = new CustomEvent(\"lyrics-plus\", {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\ttype: \"config\",\n\t\t\t\t\t\tname: name,\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\twindow.dispatchEvent(configChange);\n\t\t\t},\n\t\t}),\n\t\treact.createElement(\"h2\", null, \"Providers\"),\n\t\treact.createElement(ServiceList, {\n\t\t\titemsList: CONFIG.providersOrder,\n\t\t\tonListChange: (list) => {\n\t\t\t\tCONFIG.providersOrder = list;\n\t\t\t\tlocalStorage.setItem(`${APP_NAME}:services-order`, JSON.stringify(list));\n\t\t\t\treloadLyrics?.();\n\t\t\t},\n\t\t\tonToggle: (name, value) => {\n\t\t\t\tCONFIG.providers[name].on = value;\n\t\t\t\tlocalStorage.setItem(`${APP_NAME}:provider:${name}:on`, value);\n\t\t\t\treloadLyrics?.();\n\t\t\t},\n\t\t\tonTokenChange: (name, value) => {\n\t\t\t\tCONFIG.providers[name].token = value;\n\t\t\t\tlocalStorage.setItem(`${APP_NAME}:provider:${name}:token`, value);\n\t\t\t\treloadLyrics?.();\n\t\t\t},\n\t\t}),\n\t\treact.createElement(\"h2\", null, \"CORS Proxy Template\"),\n\t\treact.createElement(\"span\", {\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html:\n\t\t\t\t\t\"Use this to bypass CORS restrictions. Replace the URL with your cors proxy server of your choice. {url} will be replaced with the request URL.\",\n\t\t\t},\n\t\t}),\n\t\treact.createElement(corsProxyTemplate),\n\t\treact.createElement(\"span\", {\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: \"Spotify will reload its webview after applying. Leave empty to restore default: https://cors-proxy.spicetify.app/{url}\",\n\t\t\t},\n\t\t})\n\t);\n\n\tSpicetify.PopupModal.display({\n\t\ttitle: \"Lyrics Plus\",\n\t\tcontent: configContainer,\n\t\tisLarge: true,\n\t});\n}\n" }, { "path": "CustomApps/lyrics-plus/TabBar.js", "content": "class TabBarItem extends react.Component {\n\tonSelect(event) {\n\t\tevent.preventDefault();\n\t\tthis.props.switchTo(this.props.item.key);\n\t}\n\tonLock(event) {\n\t\tevent.preventDefault();\n\t\tthis.props.lockIn(this.props.item.key);\n\t}\n\trender() {\n\t\treturn react.createElement(\n\t\t\t\"li\",\n\t\t\t{\n\t\t\t\tclassName: \"lyrics-tabBar-headerItem\",\n\t\t\t\tonClick: this.onSelect.bind(this),\n\t\t\t\tonDoubleClick: this.onLock.bind(this),\n\t\t\t\tonContextMenu: this.onLock.bind(this),\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"a\",\n\t\t\t\t{\n\t\t\t\t\t\"aria-current\": \"page\",\n\t\t\t\t\tclassName: `lyrics-tabBar-headerItemLink ${this.props.item.active ? \"lyrics-tabBar-active\" : \"\"}`,\n\t\t\t\t\tdraggable: \"false\",\n\t\t\t\t\thref: \"\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"span\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"main-type-mestoBold\",\n\t\t\t\t\t},\n\t\t\t\t\tthis.props.item.value\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t}\n}\n\nconst TabBarMore = react.memo(({ items, switchTo, lockIn }) => {\n\tconst activeItem = items.find((item) => item.active);\n\n\tfunction onLock(event) {\n\t\tevent.preventDefault();\n\t\tif (activeItem) {\n\t\t\tlockIn(activeItem.key);\n\t\t}\n\t}\n\treturn react.createElement(\n\t\t\"li\",\n\t\t{\n\t\t\tclassName: `lyrics-tabBar-headerItem ${activeItem ? \"lyrics-tabBar-active\" : \"\"}`,\n\t\t\tonDoubleClick: onLock,\n\t\t\tonContextMenu: onLock,\n\t\t},\n\t\treact.createElement(OptionsMenu, {\n\t\t\toptions: items,\n\t\t\tonSelect: switchTo,\n\t\t\tselected: activeItem,\n\t\t\tdefaultValue: \"More\",\n\t\t\tbold: true,\n\t\t})\n\t);\n});\n\nconst TopBarContent = ({ links, activeLink, lockLink, switchCallback, lockCallback }) => {\n\tconst resizeHost = document.querySelector(\n\t\t\".Root__main-view .os-resize-observer-host, .Root__main-view .os-size-observer, .Root__main-view .main-view-container__scroll-node\"\n\t);\n\tconst [windowSize, setWindowSize] = useState(resizeHost.clientWidth);\n\tconst resizeHandler = () => setWindowSize(resizeHost.clientWidth);\n\n\tuseEffect(() => {\n\t\tconst observer = new ResizeObserver(resizeHandler);\n\t\tobserver.observe(resizeHost);\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [resizeHandler]);\n\n\treturn react.createElement(\n\t\tTabBarContext,\n\t\tnull,\n\t\treact.createElement(TabBar, {\n\t\t\tclassName: \"queue-queueHistoryTopBar-tabBar\",\n\t\t\tlinks,\n\t\t\tactiveLink,\n\t\t\tlockLink,\n\t\t\tswitchCallback,\n\t\t\tlockCallback,\n\t\t\twindowSize,\n\t\t})\n\t);\n};\n\nconst TabBarContext = ({ children }) => {\n\treturn Spicetify.ReactDOM.createPortal(\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"main-topBar-topbarContent\",\n\t\t\t},\n\t\t\tchildren\n\t\t),\n\t\tdocument.querySelector(\".main-topBar-topbarContentWrapper\")\n\t);\n};\n\nconst TabBar = react.memo(({ links, activeLink, lockLink, switchCallback, lockCallback, windowSize = Number.POSITIVE_INFINITY }) => {\n\tconst tabBarRef = react.useRef(null);\n\tconst [childrenSizes, setChildrenSizes] = useState([]);\n\tconst [availableSpace, setAvailableSpace] = useState(0);\n\tconst [droplistItem, setDroplistItems] = useState([]);\n\n\tconst options = [];\n\tfor (let i = 0; i < links.length; i++) {\n\t\tconst key = links[i];\n\t\tif (spotifyVersion >= \"1.2.31\" && key === \"genius\") continue;\n\t\tlet value = key[0].toUpperCase() + key.slice(1);\n\t\tif (key === lockLink) value = `ā€¢ ${value}`;\n\t\tconst active = key === activeLink;\n\t\toptions.push({ key, value, active });\n\t}\n\n\tuseEffect(() => {\n\t\tif (!tabBarRef.current) return;\n\t\tsetAvailableSpace(tabBarRef.current.clientWidth);\n\t}, [windowSize]);\n\n\tuseEffect(() => {\n\t\tif (!tabBarRef.current) return;\n\n\t\tconst tabbarItemSizes = [];\n\t\tfor (const child of tabBarRef.current.children) {\n\t\t\ttabbarItemSizes.push(child.clientWidth);\n\t\t}\n\n\t\tsetChildrenSizes(tabbarItemSizes);\n\t}, [links]);\n\n\tuseEffect(() => {\n\t\tif (!tabBarRef.current) return;\n\n\t\tconst totalSize = childrenSizes.reduce((a, b) => a + b, 0);\n\n\t\t// Can we render everything?\n\t\tif (totalSize <= availableSpace) {\n\t\t\tsetDroplistItems([]);\n\t\t\treturn;\n\t\t}\n\n\t\t// The `More` button can be set to _any_ of the children. So we\n\t\t// reserve space for the largest item instead of always taking\n\t\t// the last item.\n\t\tconst viewMoreButtonSize = Math.max(...childrenSizes);\n\n\t\t// Figure out how many children we can render while also showing\n\t\t// the More button\n\t\tconst itemsToHide = [];\n\t\tlet stopWidth = viewMoreButtonSize;\n\n\t\tchildrenSizes.forEach((childWidth, i) => {\n\t\t\tif (availableSpace >= stopWidth + childWidth) {\n\t\t\t\tstopWidth += childWidth;\n\t\t\t} else {\n\t\t\t\t// First elem is edit button\n\t\t\t\titemsToHide.push(i);\n\t\t\t}\n\t\t});\n\n\t\tsetDroplistItems(itemsToHide);\n\t}, [availableSpace, childrenSizes]);\n\n\treturn react.createElement(\n\t\t\"nav\",\n\t\t{\n\t\t\tclassName: \"lyrics-tabBar lyrics-tabBar-nav\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"ul\",\n\t\t\t{\n\t\t\t\tclassName: \"lyrics-tabBar-header\",\n\t\t\t\tref: tabBarRef,\n\t\t\t},\n\t\t\treact.createElement(\"li\", {\n\t\t\t\tclassName: \"lyrics-tabBar-headerItem\",\n\t\t\t}),\n\t\t\toptions\n\t\t\t\t.filter((_, id) => !droplistItem.includes(id))\n\t\t\t\t.map((item) =>\n\t\t\t\t\treact.createElement(TabBarItem, {\n\t\t\t\t\t\titem,\n\t\t\t\t\t\tswitchTo: switchCallback,\n\t\t\t\t\t\tlockIn: lockCallback,\n\t\t\t\t\t})\n\t\t\t\t),\n\t\t\tdroplistItem.length || childrenSizes.length === 0\n\t\t\t\t? react.createElement(TabBarMore, {\n\t\t\t\t\t\titems: droplistItem.map((i) => options[i]).filter(Boolean),\n\t\t\t\t\t\tswitchTo: switchCallback,\n\t\t\t\t\t\tlockIn: lockCallback,\n\t\t\t\t\t})\n\t\t\t\t: null\n\t\t)\n\t);\n});\n" }, { "path": "CustomApps/lyrics-plus/Translator.js", "content": "const kuroshiroPath = \"https://cdn.jsdelivr.net/npm/kuroshiro@1.2.0/dist/kuroshiro.min.js\";\nconst kuromojiPath = \"https://cdn.jsdelivr.net/npm/kuroshiro-analyzer-kuromoji@1.1.0/dist/kuroshiro-analyzer-kuromoji.min.js\";\nconst aromanize = \"https://cdn.jsdelivr.net/npm/aromanize@0.1.5/aromanize.min.js\";\nconst openCCPath = \"https://cdn.jsdelivr.net/npm/opencc-js@1.0.5/dist/umd/full.min.js\";\n\nconst dictPath = \"https:/cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict\";\n\nclass Translator {\n\tconstructor(lang, isUsingNetease = false) {\n\t\tthis.finished = {\n\t\t\tja: false,\n\t\t\tko: false,\n\t\t\tzh: false,\n\t\t};\n\t\tthis.isUsingNetease = isUsingNetease;\n\n\t\tthis.applyKuromojiFix();\n\t\tthis.injectExternals(lang);\n\t\tthis.createTranslator(lang);\n\t}\n\n\tincludeExternal(url) {\n\t\tif ((CONFIG.visual.translate || this.isUsingNetease) && !document.querySelector(`script[src=\"${url}\"]`)) {\n\t\t\tconst script = document.createElement(\"script\");\n\t\t\tscript.setAttribute(\"type\", \"text/javascript\");\n\t\t\tscript.setAttribute(\"src\", url);\n\t\t\tdocument.head.appendChild(script);\n\t\t}\n\t}\n\n\tinjectExternals(lang) {\n\t\tswitch (lang?.slice(0, 2)) {\n\t\t\tcase \"ja\":\n\t\t\t\tthis.includeExternal(kuromojiPath);\n\t\t\t\tthis.includeExternal(kuroshiroPath);\n\t\t\t\tbreak;\n\t\t\tcase \"ko\":\n\t\t\t\tthis.includeExternal(aromanize);\n\t\t\t\tbreak;\n\t\t\tcase \"zh\":\n\t\t\t\tthis.includeExternal(openCCPath);\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tasync awaitFinished(language) {\n\t\treturn new Promise((resolve) => {\n\t\t\tconst interval = setInterval(() => {\n\t\t\t\tthis.injectExternals(language);\n\t\t\t\tthis.createTranslator(language);\n\n\t\t\t\tconst lan = language.slice(0, 2);\n\t\t\t\tif (this.finished[lan]) {\n\t\t\t\t\tclearInterval(interval);\n\t\t\t\t\tresolve();\n\t\t\t\t}\n\t\t\t}, 100);\n\t\t});\n\t}\n\n\t/**\n\t * Fix an issue with kuromoji when loading dict from external urls\n\t * Adapted from: https://github.com/mobilusoss/textlint-browser-runner/pull/7\n\t */\n\tapplyKuromojiFix() {\n\t\tif (typeof XMLHttpRequest.prototype.realOpen !== \"undefined\") return;\n\t\tXMLHttpRequest.prototype.realOpen = XMLHttpRequest.prototype.open;\n\t\tXMLHttpRequest.prototype.open = function (method, url, bool) {\n\t\t\tif (url.indexOf(dictPath.replace(\"https://\", \"https:/\")) === 0) {\n\t\t\t\tthis.realOpen(method, url.replace(\"https:/\", \"https://\"), bool);\n\t\t\t} else {\n\t\t\t\tthis.realOpen(method, url, bool);\n\t\t\t}\n\t\t};\n\t}\n\n\tasync createTranslator(lang) {\n\t\tswitch (lang.slice(0, 2)) {\n\t\t\tcase \"ja\":\n\t\t\t\tif (this.kuroshiro) return;\n\t\t\t\tif (typeof Kuroshiro === \"undefined\" || typeof KuromojiAnalyzer === \"undefined\") {\n\t\t\t\t\tawait Translator.#sleep(50);\n\t\t\t\t\treturn this.createTranslator(lang);\n\t\t\t\t}\n\n\t\t\t\tthis.kuroshiro = new Kuroshiro.default();\n\t\t\t\tthis.kuroshiro.init(new KuromojiAnalyzer({ dictPath })).then(\n\t\t\t\t\tfunction () {\n\t\t\t\t\t\tthis.finished.ja = true;\n\t\t\t\t\t}.bind(this)\n\t\t\t\t);\n\n\t\t\t\tbreak;\n\t\t\tcase \"ko\":\n\t\t\t\tif (this.Aromanize) return;\n\t\t\t\tif (typeof Aromanize === \"undefined\") {\n\t\t\t\t\tawait Translator.#sleep(50);\n\t\t\t\t\treturn this.createTranslator(lang);\n\t\t\t\t}\n\n\t\t\t\tthis.Aromanize = Aromanize;\n\t\t\t\tthis.finished.ko = true;\n\t\t\t\tbreak;\n\t\t\tcase \"zh\":\n\t\t\t\tif (this.OpenCC) return;\n\t\t\t\tif (typeof OpenCC === \"undefined\") {\n\t\t\t\t\tawait Translator.#sleep(50);\n\t\t\t\t\treturn this.createTranslator(lang);\n\t\t\t\t}\n\n\t\t\t\tthis.OpenCC = OpenCC;\n\t\t\t\tthis.finished.zh = true;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tasync romajifyText(text, target = \"romaji\", mode = \"spaced\") {\n\t\tif (!this.finished.ja) {\n\t\t\tawait Translator.#sleep(100);\n\t\t\treturn this.romajifyText(text, target, mode);\n\t\t}\n\n\t\treturn this.kuroshiro.convert(text, {\n\t\t\tto: target,\n\t\t\tmode: mode,\n\t\t});\n\t}\n\n\tasync convertToRomaja(text, target) {\n\t\tif (!this.finished.ko) {\n\t\t\tawait Translator.#sleep(100);\n\t\t\treturn this.convertToRomaja(text, target);\n\t\t}\n\n\t\tif (target === \"hangul\") return text;\n\t\treturn Aromanize.hangulToLatin(text, \"rr-translit\");\n\t}\n\n\tasync convertChinese(text, from, target) {\n\t\tif (!this.finished.zh) {\n\t\t\tawait Translator.#sleep(100);\n\t\t\treturn this.convertChinese(text, from, target);\n\t\t}\n\n\t\tconst converter = this.OpenCC.Converter({\n\t\t\tfrom: from,\n\t\t\tto: target,\n\t\t});\n\n\t\treturn converter(text);\n\t}\n\n\t/**\n\t * Async wrapper of `setTimeout`.\n\t *\n\t * @param {number} ms\n\t * @returns {Promise}\n\t */\n\tstatic async #sleep(ms) {\n\t\treturn new Promise((resolve) => setTimeout(resolve, ms));\n\t}\n}\n" }, { "path": "CustomApps/lyrics-plus/Utils.js", "content": "const Utils = {\n\taddQueueListener(callback) {\n\t\tSpicetify.Player.origin._events.addListener(\"queue_update\", callback);\n\t},\n\tremoveQueueListener(callback) {\n\t\tSpicetify.Player.origin._events.removeListener(\"queue_update\", callback);\n\t},\n\tconvertIntToRGB(colorInt, div = 1) {\n\t\tconst rgb = {\n\t\t\tr: Math.round(((colorInt >> 16) & 0xff) / div),\n\t\t\tg: Math.round(((colorInt >> 8) & 0xff) / div),\n\t\t\tb: Math.round((colorInt & 0xff) / div),\n\t\t};\n\t\treturn `rgb(${rgb.r},${rgb.g},${rgb.b})`;\n\t},\n\t/**\n\t * @param {string} s\n\t * @param {boolean} emptySymbol\n\t * @returns {string}\n\t */\n\tnormalize(s, emptySymbol = true) {\n\t\tlet result = s\n\t\t\t.replace(/ļ¼ˆ/g, \"(\")\n\t\t\t.replace(/ļ¼‰/g, \")\")\n\t\t\t.replace(/怐/g, \"[\")\n\t\t\t.replace(/怑/g, \"]\")\n\t\t\t.replace(/怂/g, \". \")\n\t\t\t.replace(/ļ¼›/g, \"; \")\n\t\t\t.replace(/ļ¼š/g, \": \")\n\t\t\t.replace(/ļ¼Ÿ/g, \"? \")\n\t\t\t.replace(/ļ¼/g, \"! \")\n\t\t\t.replace(/态|ļ¼Œ/g, \", \")\n\t\t\t.replace(/ā€˜|ā€™|ā€²|ļ¼‡/g, \"'\")\n\t\t\t.replace(/ā€œ|ā€/g, '\"')\n\t\t\t.replace(/怜/g, \"~\")\n\t\t\t.replace(/Ā·|惻/g, \"ā€¢\");\n\t\tif (emptySymbol) {\n\t\t\tresult = result.replace(/-/g, \" \").replace(/\\//g, \" \");\n\t\t}\n\t\treturn result.replace(/\\s+/g, \" \").trim();\n\t},\n\t/**\n\t * Check if the specified string contains Han character.\n\t *\n\t * @param {string} s\n\t * @returns {boolean}\n\t */\n\tcontainsHanCharacter(s) {\n\t\tconst hanRegex = /\\p{Script=Han}/u;\n\t\treturn hanRegex.test(s);\n\t},\n\t/**\n\t * Singleton Translator instance for {@link toSimplifiedChinese}.\n\t *\n\t * @type {Translator | null}\n\t */\n\tset translator(translator) {\n\t\tthis._translatorInstance = translator;\n\t},\n\t_translatorInstance: null,\n\t/**\n\t * Convert all Han characters to Simplified Chinese.\n\t *\n\t * Choosing Simplified Chinese makes the converted result more accurate,\n\t * as the conversion from SC to TC may have multiple possibilities,\n\t * while the conversion from TC to SC usually has only one possibility.\n\t *\n\t * @param {string} s\n\t * @returns {Promise}\n\t */\n\tasync toSimplifiedChinese(s) {\n\t\t// create a singleton Translator instance\n\t\tif (!this._translatorInstance) this.translator = new Translator(\"zh\", true);\n\n\t\t// translate to Simplified Chinese\n\t\t// as Traditional Chinese differs between HK and TW, forcing to use OpenCC standard\n\t\treturn this._translatorInstance.convertChinese(s, \"t\", \"cn\");\n\t},\n\tremoveSongFeat(s) {\n\t\treturn (\n\t\t\ts\n\t\t\t\t.replace(/-\\s+(feat|with|prod).*/i, \"\")\n\t\t\t\t.replace(/(\\(|\\[)(feat|with|prod)\\.?\\s+.*(\\)|\\])$/i, \"\")\n\t\t\t\t.trim() || s\n\t\t);\n\t},\n\tremoveExtraInfo(s) {\n\t\treturn s.replace(/\\s-\\s.*/, \"\");\n\t},\n\tcapitalize(s) {\n\t\treturn s.replace(/^(\\w)/, ($1) => $1.toUpperCase());\n\t},\n\tdetectLanguage(lyrics) {\n\t\tif (!Array.isArray(lyrics)) return;\n\n\t\t// Should return IETF BCP 47 language tags.\n\t\t// This should detect the song's main language.\n\t\t// Remember there is a possibility of a song referencing something in another language and the lyrics show it in that native language!\n\t\tconst rawLyrics = lyrics[0].originalText ? lyrics.map((line) => line.originalText).join(\" \") : lyrics.map((line) => line.text).join(\" \");\n\n\t\tconst kanaRegex = /[\\u3001-\\u3003]|[\\u3005\\u3007]|[\\u301d-\\u301f]|[\\u3021-\\u3035]|[\\u3038-\\u303a]|[\\u3040-\\u30ff]|[\\uff66-\\uff9f]/gu;\n\t\tconst hangulRegex = /(\\S*[\\u3131-\\u314e|\\u314f-\\u3163|\\uac00-\\ud7a3]+\\S*)/g;\n\t\tconst simpRegex =\n\t\t\t/[äø‡äøŽäø‘äø“äøšäø›äøœäøäø¢äø¤äø„äø§äøŖäø¬äø°äø“äøŗäø½äø¾ä¹ˆä¹‰ä¹Œä¹ä¹”ä¹ ä¹”书买乱äŗ‰äŗŽäŗäŗ‘äŗ˜äŗšäŗ§äŗ©äŗ²äŗµäŗøäŗæ仅从仑仓ä»Ŗ们价众优伙会伛伞伟传伤伄伦伧ä¼Ŗ伫体余佣佄侠侣侄侦侧ä¾Ø侩ä¾Ŗ侬äæ£äæ¦äæØäæ©äæŖäæ­å€ŗ倾偬偻偾åæ傄傧å‚Ø傩å„æ兑兖党兰关兓兹养兽冁内冈册写军农冢å†Æ冲决况冻净凄凉凌减凑凛几凤凫凭å‡Æ击凼å‡æ刍划刘则刚创删别刬刭刽åˆæ剀剂剐剑剄剧劝办劔劢åŠØ励劲劳åŠæ勋勐勚匀匦匮åŒŗ医华协单卖卢卤卧卫卓åŗ厂厅历厉压厌厍厕厢厣厦åŽØ厩厮åŽæ参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣åØ听åÆ吓呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咓å’ø哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唔唢唣唤å”æ啧啬啭啮啰啓å•ø喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣åšÆ团园囱囓囵国图圆圣圹åœŗ坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭åžÆ垱垲垓埘埙埚埝åŸÆ堑堕唆墙壮声壳壶å£ø处备复够夓å¤ø夹å¤ŗ儁儂儋儖億妆妇妈妩å¦Ŗ妫姗姜å؄å؅å؆å؇å؈åرåزåؓ婳婓婵婶åŖŖ嫒嫔嫱嬷孙学å­Ŗ宁宝实宠宔å®Ŗ宫宽宾åƝåƹåÆ»åƼåÆæ将尔尘尧尓å°ø尽层屃屉届属屔屦å±æ岁岂岖岗岘岙岚岛岭岳岽å²æ峃峄峔峣峤峄峦哂哃哄哭嵘嵚嵛嵝嵓巅巩å·Æåøåø…åøˆåøåøåø˜åøœåø¦åø§åø®åø±åø»åø¼å¹‚幞干并å¹æåŗ„åŗ†åŗåŗ‘åŗ“åŗ”åŗ™åŗžåŗŸåŗ¼å»Ŗ开异弃张弄å¼Ŗå¼Æå¼¹å¼ŗ归当录彟彦彻径徕徔åæ†åæåæ§åæ¾ę€€ę€ę€‚ę€ƒę€„ę€…ę€†ę€œę€»ę€¼ę€æę‹ę³ę¶ęøę¹ęŗę»ę¼ę½ę‚¦ę‚«ę‚¬ę‚­ę‚ÆꃊꃧęƒØꃩꃫꃬꃭꃮęƒÆę„ę„ ę„¤ę„¦ę„æę…‘ę…­ę†·ę‡‘ę‡’ę‡”ęˆ†ęˆ‹ęˆęˆ—ęˆ˜ęˆ¬ęˆ·ę‰Žę‰‘ę‰¦ę‰§ę‰©ę‰Ŗę‰«ę‰¬ę‰°ęŠšęŠ›ęŠŸęŠ ęŠ”ęŠ¢ęŠ¤ęŠ„ę‹…ę‹Ÿę‹¢ę‹£ę‹„ę‹¦ę‹§ę‹Øę‹©ęŒ‚ęŒšęŒ›ęŒœęŒęŒžęŒŸęŒ ęŒ”ęŒ¢ęŒ£ęŒ¤ęŒ„ęŒ¦ęžęŸę”ę¢ę£ę®ę»ęŽ³ęŽ“ęŽ·ęŽøęŽŗęŽ¼ęøę½ęæꐀꐁꐂꐅęŗę‘„ę‘…ę‘†ę‘‡ę‘ˆę‘Šę’„ę’‘ę’µę’·ę’øę’ŗę“žę”’ę•Œę•›ę•°ę–‹ę–“ę–—ę–©ę–­ę— ę—§ę—¶ę—·ę—øę˜™ę˜¼ę˜½ę˜¾ę™‹ę™’ę™“ę™”ę™•ę™–ęš‚ęš§ęœ­ęœÆęœ“ęœŗę€ę‚ęƒę”ę„ęØę©ę°ęžęž„ęžžęž¢ęž£ęž„ęž§ęžØęžŖęž«ęž­ęŸœęŸ ęŸ½ę €ę …ę ‡ę ˆę ‰ę Šę ‹ę Œę Žę ę ‘ę –ę ·ę ¾ę”Šę” ę””ę”¢ę”£ę”¤ę”„ę”¦ę”§ę”Øę”©ę¢¦ę¢¼ę¢¾ę£€ę£‚ę¤ę¤Ÿę¤ ę¤¤ę¤­ę„¼ę¦„ę¦‡ę¦ˆę¦‰ę§šę§›ę§Ÿę§ ęØŖęØÆęØ±ę©„ę©±ę©¹ę©¼ęŖęŖ©ę¬¢ę¬¤ę¬§ę­¼ę®ę®‡ę®‹ę®’ꮓꮚꮔꮓęƁęƂęƕęƙęÆ”ęÆµę°‡ę°”ę°¢ę°©ę°²ę±‡ę±‰ę±”ę±¤ę±¹ę²“ę²Ÿę²”ę²£ę²¤ę²„ę²¦ę²§ę²Øę²©ę²Ŗę²µę³žę³Ŗę³¶ę³·ę³øę³ŗę³»ę³¼ę³½ę³¾ę“ę“’ę“¼ęµƒęµ…ęµ†ęµ‡ęµˆęµ‰ęµŠęµ‹ęµęµŽęµęµęµ‘ęµ’ęµ“ęµ”ęµ•ę¶‚ę¶Œę¶›ę¶ę¶žę¶Ÿę¶ ę¶”ę¶¢ę¶£ę¶¤ę¶¦ę¶§ę¶Ø궩귀ęøŠęøŒęøęøŽęøęø‘ęø”ęø–ęø—ęø©ęøøę¹¾ę¹æęŗƒęŗ…ęŗ†ęŗ‡ę»—ę»šę»žę»Ÿę» ę»”ę»¢ę»¤ę»„ę»¦ę»Ø껩ę»Ŗę¼¤ę½†ę½‡ę½‹ę½ę½œę½“ę¾œęæ‘ęæ’ēē­ēÆēµē¾ēæē‚€ē‚‰ē‚–ē‚œē‚ē‚¹ē‚¼ē‚½ēƒēƒ‚ēƒƒēƒ›ēƒŸēƒ¦ēƒ§ēƒØēƒ©ēƒ«ēƒ¬ēƒ­ē„•ē„–ē„˜ē……ē…³ē†˜ēˆ±ēˆ·ē‰ē‰¦ē‰µē‰ŗēŠŠēŠŸēŠ¶ēŠ·ēŠøēŠ¹ē‹ˆē‹ē‹ē‹žē‹¬ē‹­ē‹®ē‹Æē‹°ē‹±ē‹²ēŒƒēŒŽēŒ•ēŒ”ēŒŖēŒ«ēŒ¬ēŒ®ē­ēŽ‘ēŽ™ēŽšēŽ›ēŽ®ēŽÆēŽ°ēŽ±ēŽŗē‰ēēē‘ē°ē²ēŽēēē¼ē‘¶ē‘·ē’‡ē’Žē“’ē“®ē“Æē”µē”»ē•…ē•²ē•“ē––ē–—ē–Ÿē– ē–”ē–¬ē–®ē–Æē–±ē–“ē—ˆē—‰ē—’ē—–ē—Øē—Ŗē—«ē—“ē˜…ē˜†ē˜—ē˜˜ē˜Ŗē˜«ē˜¾ē˜æē™žē™£ē™«ē™Æēš‘ēš±ēš²ē›ē›ē›‘ē›–ē›—ē›˜ēœēœ¦ēœ¬ē€ēēē‘ēž’ēž©ēŸ«ēŸ¶ēŸ¾ēŸæē €ē ē –ē —ē šē œē ŗē »ē ¾ē”€ē”ē”…ē”•ē”–ē”—ē”™ē”šē”®ē”·ē¢ē¢›ē¢œē¢±ē¢¹ē£™ē¤¼ē„Žē„¢ē„Æē„·ē„øē¦€ē¦„ē¦…ē¦»ē§ƒē§†ē§ē§Æē§°ē§½ē§¾ē؆ē؎ēØ£ēسē©‘ē©·ēŖƒēŖēŖ‘ēŖœēŖēŖ„ēŖ¦ēŖ­ē«–ē«žē¬ƒē¬‹ē¬”ē¬•ē¬ŗē¬¼ē¬¾ē­‘ē­šē­›ē­œē­ē­¹ē­¾ē®€ē®“ē®¦ē®§ē®Øē®©ē®Ŗē®«ēƑēƓēÆ®ēƱē°–ē±ē±“ē±»ē±¼ē²œē²ē²¤ē²Ŗē²®ē³ē³‡ē“§ēµ·ēŗŸēŗ ēŗ”ēŗ¢ēŗ£ēŗ¤ēŗ„ēŗ¦ēŗ§ēŗØēŗ©ēŗŖēŗ«ēŗ¬ēŗ­ēŗ®ēŗÆēŗ°ēŗ±ēŗ²ēŗ³ēŗ“ēŗµēŗ¶ēŗ·ēŗøēŗ¹ēŗŗēŗ»ēŗ¼ēŗ½ēŗ¾ēŗæē»€ē»ē»‚ē»ƒē»„ē»…ē»†ē»‡ē»ˆē»‰ē»Šē»‹ē»Œē»ē»Žē»ē»ē»‘ē»’ē»“ē»”ē»•ē»–ē»—ē»˜ē»™ē»šē»›ē»œē»ē»žē»Ÿē» ē»”ē»¢ē»£ē»¤ē»„ē»¦ē»§ē»Øē»©ē»Ŗē»«ē»¬ē»­ē»®ē»Æē»°ē»±ē»²ē»³ē»“ē»µē»¶ē»·ē»øē»¹ē»ŗē»»ē»¼ē»½ē»¾ē»æē¼€ē¼ē¼‚ē¼ƒē¼„ē¼…ē¼†ē¼‡ē¼ˆē¼‰ē¼Šē¼‹ē¼Œē¼ē¼Žē¼ē¼ē¼‘ē¼’ē¼“ē¼”ē¼•ē¼–ē¼—ē¼˜ē¼™ē¼šē¼›ē¼œē¼ē¼žē¼Ÿē¼ ē¼”ē¼¢ē¼£ē¼¤ē¼„ē¼¦ē¼§ē¼Øē¼©ē¼Ŗē¼«ē¼¬ē¼­ē¼®ē¼Æē¼°ē¼±ē¼²ē¼³ē¼“ē¼µē½‚ē½‘ē½—ē½šē½¢ē½“ē¾ē¾Ÿē¾”ēæ˜ēæ™ēæšč€¢č€§č€øč€»č‚č‹čŒčč”č©čŖč‚ƒč‚ č‚¤č‚·č‚¾č‚æ胀胁胆胜胧čƒØčƒŖčƒ«čƒ¶č„‰č„č„č„č„‘č„“č„”č„šč„±č„¶č„øč…Šč…Œč…˜č…­č…»č…¼č…½č…¾č†‘č‡œčˆ†čˆ£čˆ°čˆ±čˆ»č‰°č‰³č‰¹č‰ŗčŠ‚čŠˆčŠ—čŠœčŠ¦č‹č‹‡č‹ˆč‹‹č‹Œč‹č‹Žč‹č‹˜č‹¹čŒŽčŒčŒ‘čŒ”čŒ•čŒ§č†čč™čšč›čœčžčŸč č”č£č¤č„č¦č§čØč©čŖč«č¬č­č®čÆčŽ…čŽœčŽ±čŽ²čŽ³čŽ“čŽ¶čŽ·čŽøčŽ¹čŽŗčŽ¼čščč¤č„č¦č§čØč‘±č’‡č’‰č’‹č’Œč“č“Ÿč“ č“£č“„č“¦č”·č”¹č”ŗč”¼č•²č•“č–®č—č—“č™č™‘č™šč™«č™¬č™®č™½č™¾č™æčš€čščš‚čš•čščš¬č›Šč›Žč›č›®č›°č›±č›²č›³č›“čœ•čœ—čœ”č‡čˆč‰čŽč¼č¾čž€čžØčŸč”…č””č”„č”¬č”®č¢„č¢…č¢†č¢œč¢­č¢Æč£…č£†č£ˆč£¢č££č£¤č£„č¤›č¤“č„č„•č§č§‚č§ƒč§„č§…č§†č§‡č§ˆč§‰č§Šč§‹č§Œč§č§Žč§č§č§‘č§žč§¦č§Æč©ŸčŖ‰čŖŠč® č®”č®¢č®£č®¤č®„č®¦č®§č®Ø让č®Ŗ讫训议č®Æč®°č®±č®²č®³č®“č®µč®¶č®·č®øč®¹č®ŗč®»č®¼č®½č®¾č®æčƀčƁčƂčƃčƄčƅčƆčƇčƈčƉčƊčƋčƌčƍčƎčƏčƐčƑčƒčƓčƔčƕčƖčƗčƘčƙčƚčƛčƜčƝčƞčƟčÆ čÆ”čÆ¢čÆ£čƤčÆ„čƦčƧčÆØčÆ©čÆŖčÆ«čƬčÆ­čÆ®čÆÆčÆ°čƱčƲčƳčÆ“čƵčƶčÆ·čÆøčƹčÆŗčÆ»čƼčƽčƾčÆæč°€č°č°‚č°ƒč°„č°…č°†č°‡č°ˆč°Šč°‹č°Œč°č°Žč°č°č°‘č°’č°“č°”č°•č°–č°—č°˜č°™č°šč°›č°œč°č°žč°Ÿč° č°”č°¢č°£č°¤č°„č°¦č°§č°Øč°©č°Ŗ谫谬谭谮č°Æč°°č°±č°²č°³č°“č°µč°¶č°·č±®č“č“žč“Ÿč“ č“”č“¢č“£č“¤č“„č“¦č“§č“Øč“©č“Ŗ蓫蓬蓭蓮č“Æč“°č“±č“²č“³č““č“µč“¶č“·č“øč“¹č“ŗč“»č“¼č“½č“¾č“æčµ€čµčµ‚čµƒčµ„čµ…čµ†čµ‡čµˆčµ‰čµŠčµ‹čµŒčµčµŽčµčµčµ‘čµ’čµ“čµ”čµ•čµ–čµ—čµ˜čµ™čµščµ›čµœčµčµžčµŸčµ čµ”čµ¢čµ£čµŖ赵赶趋趱č¶øč·ƒč·„č·–č·žč·µč·¶č··č·øč·¹č·»čøŠčøŒčøŖčø¬čøÆč¹‘č¹’č¹°č¹æčŗčŗœčŗÆč½¦č½§č½Øč½©č½Ŗč½«č½¬č½­č½®č½Æč½°č½±č½²č½³č½“č½µč½¶č½·č½øč½¹č½ŗč½»č½¼č½½č½¾č½æč¾€č¾č¾‚č¾ƒč¾„č¾…č¾†č¾‡č¾ˆč¾‰č¾Šč¾‹č¾Œč¾č¾Žč¾č¾č¾‘č¾’č¾“č¾”č¾•č¾–č¾—č¾˜č¾™č¾šč¾žč¾©č¾«č¾¹č¾½č¾¾čæčæ‡čæˆčæčæ˜čæ™čæ›čæœčæčæžčæŸčæ©čæ³čæ¹é€‚选逊递逦逻遗遄邓邝邬邮邹é‚ŗ邻郁郄郏郐郑郓郦郧éƒø酝酦酱酽酾é…æ释里鉅鉓銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钔钢钣钤钄钦钧é’Ø钩é’Ŗ钫钬钭钮é’Æ钰钱钲钳钓钵钶钷é’ø钹é’ŗ钻钼钽钾é’æ铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铔铢铣铤铄铦铧é“Øé“Ŗ铫铬铭铮é“Æ铰铱铲铳铓铵银铷é“ø铹é“ŗ铻铼铽链é“æ销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锔锢锣锤锄锦é”Ø锩锫锬锭键é”Æ锰锱锲锳锓锵锶锷é”ø锹é”ŗ锻锼锽锾é”æ镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镔镢镣镤镄镦镧é•Ø镩é•Ŗ镫镬镭镮é•Æ镰镱镲镳镓镶é•æé—Ø闩é—Ŗ闫闬闭问é—Æ闰闱闲闳闓闵闶闷é—ø闹é—ŗ闻闼闽闾é—æ阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阓阵阶际陆陇陈陉陕陧é™Ø险随隐隶隽难雏雠雳雾霁霉霭靓静靄鞑鞒éžÆ鞓韦韧éŸØ韩éŸŖ韫韬韵锵锶锷é”ø锹é”ŗ锻锼锽锾é”æ颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颔颢颣颤预颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞é£Ø餍鄤鄄鄦鄧é„Øé„©é„Ŗ鄫鄬鄭鄮é„Æ鄰鄱鄲鄳鄓鄵鄶鄷é„ø鄹é„ŗ鄻鄼鄽鄾é„æ馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮é©Æ驰驱驲驳驓驵驶驷é©ø驹é©ŗ驻驼驽驾é©æéŖ€éŖéŖ‚éŖƒéŖ„éŖ…éŖ†éŖ‡éŖˆéŖ‰éŖŠéŖ‹éŖŒéŖéŖŽéŖéŖéŖ‘éŖ’éŖ“éŖ”éŖ•éŖ–éŖ—éŖ˜éŖ™éŖšéŖ›éŖœéŖéŖžéŖŸéŖ éŖ”éŖ¢éŖ£éŖ¤éŖ„éŖ¦éŖ§é«…髋髌鬓魇魉鱼鱽鱾é±æ鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲔鲢鲣鲤鲄鲦鲧é²Ø鲩é²Ŗ鲫鲬鲭鲮é²Æ鲰鲱鲲鲳鲓鲵鲶鲷é²øé²¹é²ŗ鲻鲼鲽鲾é²æ鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳔鳢鳣éøŸéø éø”éø¢éø£éø¤éø„éø¦éø§éøØéø©éøŖéø«éø¬éø­éø®éøÆéø°éø±éø²éø³éø“éøµéø¶éø·éøøéø¹éøŗéø»éø¼éø½éø¾éøæ鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹔鹢鹣鹤鹄鹦鹧é¹Ø鹩é¹Ŗ鹫鹬鹭é¹Æ鹰鹱鹲鹳鹓鹾éŗ¦éŗø黄黉黔黩é»Ŗ黾鼋鼌鼍鼗鼹齄齐齑é½æ龀龁龂龃龄龅龆龇龈龉龊龋龌龙龚龛龟åæ—制å’ØåŖ里ē³»čŒƒę¾ę²”å°å°é—¹é¢å‡†é’Ÿåˆ«é—²å¹²å°½č„ę‹¼]/gu;\n\t\tconst tradRegex =\n\t\t\t/[č¬čˆ‡é†œå°ˆę„­å¢ę±ēµ²äøŸå…©åš“å–Ŗ個ēˆæ豐č‡Øē‚ŗéŗ—čˆ‰éŗ¼ē¾©ēƒę؂喬ēæ’鄉ę›øč²·äŗ‚ēˆ­ę–¼č™§é›²äŗ™äŗžē”¢ē•č¦Ŗč¤»åš²å„„åƒ…å¾žä¾–å€‰å„€å€‘åƒ¹ēœ¾å„Ŗå¤„ęœƒå‚“å‚˜å‰å‚³å‚·å€€å€«å‚–å½ä½‡é«”é¤˜å‚­åƒ‰äæ ä¾¶åƒ„偵偓僑儈儕儂äæå„”儼倆儷儉債傾å‚Æ僂åƒØ償儻儐儲å„ŗ兒兌兗é»Øč˜­é—œčˆˆčŒ²é¤Šēø囅內岔冊åÆ«č»č¾²å”šé¦®č”ę±ŗę³å‡ę·Øę·’ę¶¼ę·©ęø›ę¹Šå‡œå¹¾é³³é³§ę†‘å‡±ę“Šę°¹é‘æčŠ»åŠƒåŠ‰å‰‡å‰›å‰µåˆŖ刄剗剄劊劌剓劑剮劍剝劇å‹øč¾¦å‹™å‹±å‹•å‹µå‹å‹žå‹¢å‹³ēŒ›å‹©å‹»åŒ­åŒ±å€é†«čÆå”å–®č³£ē›§é¹µč‡„č”›å»å·¹å» å»³ę›†åŽ²å£“åŽ­åŽ™å»å»‚åŽ“å»ˆå»šå»„å»ēø£åƒé‰é†é›™ē™¼č®Šę•˜ē–Šč‘‰č™Ÿę­Žå˜°ē±²å¾Œåš‡å‘‚嗎唚å™øč½å•Ÿå³å˜øå›ˆå˜”åš¦å”„å“”å’¼å—†å—šč© å“¢åšØ嚀噝吒噅鹹呱éŸæ啞噠嘵嗶噦嘩噲嚌噄喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽å˜Æ噓嘍嚳囁嗬å™Æå™“åš¶å›‘åš•åŠˆå›‚č¬”åœ˜åœ’å›Ŗåœåœ‡åœ‹åœ–åœ“č–å£™å “é˜Ŗ壞唊堅壇壢壩唢墳墜壟壟壚壘墾坰堊墊埔墶壋唏堖唒唤堝墊垵唹墮å£Ŗē‰†å£Æč²ę®¼å£ŗå£¼č™•å‚™č¤‡å¤ é ­čŖ‡å¤¾å„Ŗ儩儐儮ēŽå„§å¦å©¦åŖ½å«µå«—åŖÆå§č–‘å©å©­å¬ˆå¬Œå­Œå؛åŖ§å«»å«æ嬰嬋å¬øåŖ¼å¬”å¬Ŗ嬙嬤孫å­øå­æåƧåƶåƦåƵåÆ©ę†²å®®åÆ¬č³“åƢ對尋導壽將ēˆ¾å”µå Æ尷屍ē›”層屭屜屆屬屢å±Øå¶¼ę­²č±ˆå¶‡å“—å³“å¶“åµå³¶å¶ŗ嶽哠巋å¶Ø嶧峽嶢嶠哢巒嶗响嶮嶄å¶øå¶”å“³å¶č„Šå·”éžå·°å¹£åø„åø«å¹ƒåø³ē°¾å¹Ÿåø¶å¹€å¹«å¹¬å¹˜å¹—å†Ŗč„†å¹¹äø¦å»£čŽŠę…¶å»¬å»”åŗ«ę‡‰å»Ÿé¾å»¢å»Žå»©é–‹ē•°ę£„張彌弳彎彈強ę­øē•¶éŒ„彠彄徹徑徠ē¦¦ę†¶ę‡ŗę†‚ę„¾ę‡·ę…‹ę…«ę†®ę…Ŗꂵꄓꆐēø½ę‡Ÿę‡Œęˆ€ę‡‡ęƒ”ꅟę‡Øę„·ęƒ»ęƒ±ęƒ²ę‚…ę„Øę‡øę…³ę†«é©šę‡¼ę…˜ę‡²ę†Šę„œę…šę†šę…£ę¹£ę…ę†¤ę†’é”˜ę‡¾ę†–ę€µę‡£ę‡¶ę‡ęˆ‡ęˆ”ęˆ²ęˆ§ęˆ°ęˆ©ęˆ¶ē“®ę’²ę‰”åŸ·ę““ę«ęŽƒęšę“¾ę’«ę‹‹ę‘¶ę‘³ęŽ„ę¶č­·å ±ę“”ę“¬ę”ę€ę“ę””ę“°ę’„ę“‡ęŽ›ę‘Æę”£ęŽ—ę’¾ę’»ęŒ¾ę’“ę“‹ę’ŸęŽ™ę“ ę®ę’ę’ˆęę’æę›ę—ę“šę’šę“„ę‘‘ę“²ę’£ę‘»ę‘œę‘£ę”¬ę’³ę”™ę“±ę‘Ÿę”Ŗꔜꔝꔄę“ŗꐖę“Æę”¤ę”–ę’ę”†ę“·ę“¼ę”›ę“»ę”¢ę•µę–‚ę•øé½‹ę–•é¬„ę–¬ę–·ē„”舊ꙂꛠꚘꛇꙝę›Øé”Æę™‰ę›¬ę›‰ę›„ęšˆęš‰ęš«ę›–åŠ„č”“ęØøę©Ÿę®ŗé›œę¬Šę¢ä¾†ę„Šę¦Ŗå‚‘ę„µę§‹ę؅ęØžę£—ę«Ŗę¢˜ę£–ę§ę„“ę¢Ÿę«ƒęŖøęŖ‰ę¢”ęŸµęØ™ę£§ę«›ę«³ę£Ÿę«Øę«Ÿę¬„ęØ¹ę£²ęØ£ę¬’ę£¬ę¤ę©ˆę„ØęŖ”ę¦æę©‹ęØŗęŖœę§³ę؁夢ęŖ®ę£¶ęŖ¢ę¬žę§Øę«ę§§ę¬ę©¢ęØ“ę¬–ę«¬ę«šę«øęŖŸęŖ»ęŖ³ę«§ę©«ęŖ£ę«»ę««ę«„ę«“ę«žē°·ęŖę­”ę­Ÿę­ę®²ę­æę®¤ę®˜ę®žę®®ę®«ę®ÆęƆęÆ€č½‚ē•¢ę–ƒę°ˆęÆæę°Œę°£ę°«ę°¬ę°³å½™ę¼¢ę±™ę¹Æę“¶éęŗę²’ēƒę¼šē€ę·Ŗ껄ęø¢ęŗˆę»¬ęæ”ęæ˜ę·šę¾©ē€§ē€˜ęæ¼ē€‰ę½‘ę¾¤ę¶‡ę½”ē‘ēŖŖęµ¹ę·ŗę¼æę¾†ę¹žęŗ®ęæęø¬ę¾®ęæŸē€ę»»ęø¾ę»øęæƒę½Æęæœå”—ę¹§ęæ¤ę¾‡ę·¶ę¼£ę½æęø¦ęŗ³ęø™ę»Œę½¤ę¾—ę¼²ę¾€ę¾±ę·µę·„ę¼¬ē€†ę¼øę¾ ę¼ē€‹ę»²ęŗ«éŠē£ęæ•ę½°ęæŗę¼µę¼Šę½·ę»¾ę»Æē©ē„ę»æē€…ęæ¾ęæ«ē¤ęæ±ē˜ę¾¦ęæ«ē€ ē€Ÿē€²ęæ°ę½›ē€¦ē€¾ē€Øē€•ēę»…ē‡ˆéˆē½ē‡¦ē…¬ēˆē‡‰ē…’ē†—點ē…‰ē†¾ēˆēˆ›ēƒ“ē‡­ē…™ē…©ē‡’ē‡ē‡“ē‡™ē‡¼ē†±ē…„ē‡œē‡¾ē…†ē³Šęŗœę„›ēˆŗē‰˜ēŠ›ē‰½ēŠ§ēŠ¢å¼·ē‹€ē·ēēŒ¶ē‹½éŗ…ē®ē°ēØē‹¹ē…ēŖēŒ™ē„ēŒ»ē«ēµē¼ēŽ€č±¬č²“čŸē»ēŗē’£ē’µē‘’ē‘Ŗē‘‹ē’°ē¾ē‘²ē’½ē‘‰ēŽØēŗē“ē’«ēæē’”ē’‰ē‘£ē“Šē‘¤ē’¦ē’æē“”ē“šē”•ē”Œé›»ē•«ęš¢ä½˜ē–‡ē™¤ē™‚ē˜§ē™˜ē˜é¬ē˜”ē˜‹ēš°å±™ē™°ē—™ē™¢ē˜‚ē™†ē˜“ē™‡ē™”ē™‰ē˜®ē˜žē˜ŗē™Ÿē™±ē™®ē™­ē™©ē™¬ē™²č‡’ēššēšŗēšøē›žé¹½ē›£č“‹ē›œē›¤ēž˜ēœ„ēŸ“č‘—ēœēžēž¼ēžžēŸšēŸÆē£Æē¤¬ē¤¦ē¢­ē¢¼ē£šē”Øē”Æē¢øē¤Ŗē¤±ē¤«ē¤Žē”œēŸ½ē¢©ē”¤ē£½ē£‘ē¤„ē¢ŗé¹¼ē¤™ē£§ē££å æé•Ÿę»¾ē¦®ē¦•ē¦°ē¦Žē¦±ē¦ē؟ē„æē¦Ŗ離ē¦æē؈ēØ®ē©ēرē©¢ē© ē©­ē؅ē©Œē©©ē©”ēŖ®ē«Šē«…ēŖÆē«„ēŖ©ēŖŗē«‡ēŖ¶č±Žē«¶ēƤē­ē­†ē­§ē®‹ē± ē±©ēƉēƳēÆ©ē°¹ē®ē±Œē°½ē°”ē±™ē°€ēƋē±œē±®ē°žē°«ē°£ē°ē±ƒē±¬ē±Ŗē±Ÿē³“锞ē§ˆē³¶ē³²ē²µē³žē³§ē³é¤±ē·Šēø¶ē³øē³¾ē“†ē“…ē“‚ēŗ–ē“‡ē“„ē“šē“ˆēŗŠē“€ē“‰ē·Æē“œē“˜ē“”ē“•ē“—ē¶±ē“ē“ēø±ē¶øē“›ē“™ē“‹ē“”ē“µē“–ē“ē““ē·šē“ŗēµē“±ē·“ēµ„ē“³ē“°ē¹”ēµ‚ēøēµ†ē“¼ēµ€ē“¹ē¹¹ē¶“ē“æē¶ēµØēµēµē¹žēµ°ēµŽē¹Ŗēµ¦ēµ¢ēµ³ēµ”ēµ•ēµžēµ±ē¶†ē¶ƒēµ¹ē¹”ē¶Œē¶ēµ›ē¹¼ē¶ˆēø¾ē·’ē¶¾ē·“ēŗŒē¶ŗē·‹ē¶½ē·”ē·„ē¹©ē¶­ē¶æē¶¬ē¹ƒē¶¢ē¶Æē¶¹ē¶£ē¶œē¶»ē¶°ē¶ ē¶“ē·‡ē·™ē·—ē·˜ē·¬ēŗœē·¹ē·²ē·ēø•ē¹¢ē·¦ē¶žē·žē·¶ē·šē·±ēø‹ē·©ē· ēø·ē·Øē·”ē·£ēø‰ēø›ēøŸēøēø«ēø—ēøžēŗēø­ēøŠēø‘ē¹½ēø¹ēøµēø²ēŗ“ēø®ē¹†ē¹…ēŗˆē¹šē¹•ē¹’韁ē¹¾ē¹°ē¹Æē¹³ēŗ˜ē½Œē¶²ē¾…ē½°ē½·ē¾†ē¾ˆē¾„ē¾Øēæ¹ēæ½ēæ¬č€®č€¬č³ę„č¶č¾č·č¹čÆ聵聰肅č…øč†šč†č…Žč…«č„¹č„…č†½å‹ęœ§č…–č‡šč„›č† č„ˆč†¾é«’č‡č…¦č†æč‡ č…³č„«č…”č‡‰č‡˜é†ƒč†•é½¶č†©é¦č†ƒéØ°č‡č‡¢č¼æ艤艦艙艫艱豔č‰ø藝ēƀē¾‹č–Œč•Ŗ蘆č“Æč‘¦č—¶čŽ§č‡č’¼č‹§č˜‡ęŖ¾č˜‹čŽ–č˜¢č”¦å”‹ē…¢ē¹­čŠč–¦č–˜čŽ¢č•˜č“½č•Žč–ˆč–ŗ蕩ꦮ葷껎ēŠ–ē†’č•č—Žč“€č”­č•’č‘’č‘¤č—„č’žč“§čŠč“®č’”čµč–Ÿē²č••ē‘©é¶Æč““č˜€č˜æčž¢ē‡Ÿēøˆč•­č–©č”„č•†č•¢č”£č”žč—č–Šč˜ŗč•·éŽ£é©€č–”č˜žč—ŗč—¹č˜„č˜Šč—Ŗę§č˜šč™œę…®č™›čŸ²č™ÆčŸ£é›–č¦č †č•čŸ»čžžč ¶č ”čœ†č ±č £čŸ¶č »čŸ„č›ŗčŸÆ螄蠐蛻čøč Ÿč …čŸˆčŸ¬č čž»č ‘čžæ蟎č Øé‡éŠœč£œč„Æč¢žč„–å«‹č¤˜č„Ŗč„²č„č£č„ č¤Œč¤³č„č¤²č„‡č¤ø脤ē¹ˆč„“č¦‹č§€č¦Žč¦č¦“č¦–č¦˜č¦½č¦ŗ覬覔č¦æ覄覦č¦Æč¦²č¦·č§“č§øč§¶č®‹č­½č¬„č؁č؈č؂č؃čŖč­čؐč،čØŽč®“čؕčؖčØ“č­°č؊čؘčØ’č¬›č«±č¬³č©Žč؝čØ„čرčØ›č«–čØ©čØŸč«·čØ­čØŖčØ£č­‰č©čØ¶č©•č©›č­˜č©—č©čØ“čØŗč©†č¬…č©žč©˜č©”č©–č­Æč©’čŖ†čŖ„試č©æč©©č©°č©¼čŖ čŖ…詵話čŖ•č©¬č©®č©­č©¢č©£č«č©²č©³č©«č«¢č©”č­øčŖ”čŖ£čŖžčŖščŖ¤čŖ„čŖ˜čŖØčŖ‘čŖŖčŖ¦čŖ’č«‹č«øč«č«¾č®€č«‘čŖ¹čŖ²č«‰č«›čŖ°č«—čŖæč«‚č«’č«„čŖ¶č«‡čŖ¼č¬€č«¶č«œč¬Šč««č«§č¬”č¬č¬‚č«¤č«­č«¼č®’č«®č«³č«ŗč«¦č¬Žč«žč«č¬Øč®œč¬–č¬č¬ č¬—č«”č¬™č¬č¬¹č¬¾č¬«č­¾č¬¬č­šč­–č­™č®•č­œč­Žč®žč­“č­«č®–ē©€č±¶č²č²žč² č²Ÿč²¢č²”č²¬č³¢ę•—č³¬č²Øč³Ŗč²©č²Ŗč²§č²¶č³¼č²Æč²«č²³č³¤č³č²°č²¼č²“č²ŗč²øč²æč²»č³€č²½č³Šč“„č³ˆč³„č²²č³ƒč³‚č““č³‡č³…č“č³•č³‘č³šč³’č³¦č³­é½Žč“–č³žč³œč“”č³™č³”č³ č³§č³“č³µč“…č³»č³ŗč³½č³¾č“—č®šč“‡č“ˆč“č“č“›čµ¬č¶™č¶•č¶Øč¶²čŗ‰čŗč¹Œč¹ čŗ’čøčŗ‚č¹ŗč¹•čŗščŗ‹čø“čŗŠč¹¤čŗ“čŗ‘čŗ”č¹£čŗ•čŗ„čŗŖčŗ¦č»€č»Šč»‹č»Œč»’č»‘č»”č½‰č»›č¼Ŗč»Ÿč½Ÿč»²č»»č½¤č»øč»¹č»¼č»¤č»«č½¢č»ŗč¼•č»¾č¼‰č¼Šč½Žč¼ˆč¼‡č¼…č¼ƒč¼’č¼”č¼›č¼¦č¼©č¼č¼„č¼žč¼¬č¼Ÿč¼œč¼³č¼»č¼Æč½€č¼øč½”č½…č½„č¼¾č½†č½č½”č¾­č¾Æč¾®é‚Šé¼é”é·éŽé‚é‹é‚„é€™é€²é é•é€£é²é‚‡é€•č·”é©éø遜遞邐邏éŗ遙鄧é„ŗé„”éƒµé„’é„“é„°é¬±éƒ¤éƒŸé„¶é„­é„†é…ˆé„–é„²é†žé†±é†¬é‡…é‡ƒé‡€é‡‹č£é’œé‘’é‘¾éØ釓釔針釘釗釙釕釷é‡ŗé‡§é‡¤éˆ’é‡©é‡£é†é‡¹éšé‡µéˆƒéˆ£éˆˆéˆ¦éˆéˆ”é¾éˆ‰é‹‡é‹¼éˆ‘éˆé‘°ę¬½éˆžéŽ¢é‰¤éˆ§éˆéˆ„éˆ„éˆ•éˆ€éˆŗ錢鉦鉗鈷ē¼½éˆ³é‰•éˆ½éˆø鉞鑽鉬鉭鉀éˆæ鈾鐵鉑鈓鑠鉛鉚鈰鉉鉈鉍鈹éø鉶銬銠é‰ŗéŠŖ鋏鋣鐃銍éŗ銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓é‰æ銚鉻銘錚銫é‰ø銄鏟銃鐋éŠØ銀銣鑄鐒é‹Ŗ鋙éŒø鋱鏈鏗銷鎖鋰鋄鋤鍋é‹Æé‹Ø鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆éŗéŒÆéŒØ錔錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵é‹ø錳錙鍄鍈鍇鏘鍶鍔鍤鍬鍾鍛éŽŖ鍠鍰鎄鍍鎂鏤鎔鏌鎮鎛鎘鑷鐫鎳éŽæ鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏔鏑鏃鏇鏐鐔钁鐐鏷鑄鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮éæé‘”é‘£é‘žé‘²é•·é–€é–‚é–ƒé–†é–ˆé–‰å•é—–é–é—ˆé–‘é–Žé–“é–”é–Œę‚¶é–˜é¬§é–Øčžé—„é–©é–­é—“é–„é–£é–”é–«é¬®é–±é–¬é—é–¾é–¹é–¶é¬©é–æ閽閻閼闔闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際é™ø隓陳陘陝隉隕éšŖéšØ隱éšøé›‹é›£é››č®Žé‚éœ§éœ½é»“é„éšéœéØ韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑锧頓頎頒頌頏預锱領頗é øé ”é °é ²é œę½ē†²é ¦é ¤é »é ®é ¹é ·é “ē©Žé”†é”Œé”’锎锓锏锍锳锢锛错锄ēŗ‡é”«é”¬é”°é”“é¢Øé¢ŗ颭颮é¢Æ颶é¢ø颼颻飀飄飆飆飛鄗鄜飣鄑飄餳飩餼é£Ŗ飫飭é£Æ飲餞飾飽飼é£æ飓餌鄒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餔é¤Ø餷鄋餶é¤æ鄞鄁鄃é¤ŗ餾鄈鄉鄅鄊鄌鄢馬馭馱馓馳驅馹駁驢駔駛駟駙駒éض駐駝駑駕驛駘驍ē½µé§°é©•é©Šé§±é§­é§¢é©«é©Ŗé؁驗é؂é§øé§æé؏é؎é؍é؅é،驌驂éؙéØ­éؤéØ·éؖ驁éØ®éØ«éØø驃éؾ驄驏驟驄驦驤髏髖髕鬢魘魎魚魛魢魷é­Øé­Æé­“é­ŗ鮁鮃éÆ°é±ø鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳é®Ŗ鮞鮦鰂鮜鱠鱭鮫鮮é®ŗéƗ鱘éƁé±ŗ鰱鰹éƉ鰣鰷éƀéƊéƇ鮶éƽéƒéƖéÆŖéƕéÆ«éÆ”éƤéƧéƝéÆ¢éÆ°éƛéÆØéƵéÆ“éƔ鱝鰈鰏é±ØéƷ鰮鰃鰓鱷鰍鰒鰉鰁鱂éÆæ鰠鼇鰭é°Ø鰄鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒é±Æ鱤鱧鱣鳄鳩雞鳶鳓鳲鷗铉鶬铇铆铣鶇éø•é“Ø铞铦铒铟铝铛铬铕鷄鷙é“Æ铰鵂铓鵃é“æéøžé“»éµéµ“éøéµ‘鵠鵝鵒鷳鵜鵔鵲鶓éµŖ鶤éµÆ鵬鵮鶉鶊鵷鷫鶘鶔鶚鶻é¶æ鶄鶩鷊鷂鶲鶹é¶ŗ鷁鶼鶓鷖éøšé·“é·šé·Æ鷦鷲é·øé·ŗéø‡é·¹éøŒéøéø›éø˜é¹ŗéŗ„éŗ©é»ƒé»Œé»¶é»·é»²é»½é»æ鼂鼉鞀鼓齇齊齏齒齔齕齗齟齔齙齠齜齦齬é½Ŗ齲齷龍龔龕龜čŖŒč£½č°˜éš»č£”äæ‚ēƄ鬆冇嚐嘗é¬Øéŗµęŗ–é˜å½†é–’ä¹¾å„˜č‡Ÿę‹š]/gu;\n\t\tconst hanziRegex = /\\p{Script=Han}/gu;\n\n\t\tconst cjkMatch = rawLyrics.match(\n\t\t\tnew RegExp(`${kanaRegex.source}|${hanziRegex.source}|${hangulRegex.source}|${/\\p{Unified_Ideograph}/gu.source}`, \"gu\")\n\t\t);\n\n\t\tif (!cjkMatch) return;\n\n\t\tconst kanaCount = cjkMatch.filter((glyph) => kanaRegex.test(glyph)).length;\n\t\tconst hanziCount = cjkMatch.filter((glyph) => hanziRegex.test(glyph)).length;\n\t\tconst simpCount = cjkMatch.filter((glyph) => simpRegex.test(glyph)).length;\n\t\tconst tradCount = cjkMatch.filter((glyph) => tradRegex.test(glyph)).length;\n\n\t\tconst kanaPercentage = kanaCount / cjkMatch.length;\n\t\tconst hanziPercentage = hanziCount / cjkMatch.length;\n\t\tconst simpPercentage = simpCount / cjkMatch.length;\n\t\tconst tradPercentage = tradCount / cjkMatch.length;\n\n\t\tif (cjkMatch.filter((glyph) => hangulRegex.test(glyph)).length !== 0) {\n\t\t\treturn \"ko\";\n\t\t}\n\n\t\tif (((kanaPercentage - hanziPercentage + 1) / 2) * 100 >= CONFIG.visual[\"ja-detect-threshold\"]) {\n\t\t\treturn \"ja\";\n\t\t}\n\n\t\treturn ((simpPercentage - tradPercentage + 1) / 2) * 100 >= CONFIG.visual[\"hans-detect-threshold\"] ? \"zh-hans\" : \"zh-hant\";\n\t},\n\tprocessTranslatedLyrics(translated, original) {\n\t\treturn original.map((lyric, index) => ({\n\t\t\tstartTime: lyric.startTime || 0,\n\t\t\ttext: this.rubyTextToReact(translated[index]),\n\t\t\toriginalText: lyric.text,\n\t\t}));\n\t},\n\t/** It seems that this function is not being used, but I'll keep it just in case itā€™s needed in the future.*/\n\tprocessTranslatedOriginalLyrics(lyrics, synced) {\n\t\tconst data = [];\n\t\tconst dataSouce = {};\n\n\t\tfor (const item of lyrics) {\n\t\t\tdataSouce[item.startTime] = { translate: item.text };\n\t\t}\n\n\t\tfor (const time in synced) {\n\t\t\tdataSouce[item.startTime] = {\n\t\t\t\t...dataSouce[item.startTime],\n\t\t\t\ttext: item.text,\n\t\t\t};\n\t\t}\n\n\t\tfor (const time in dataSouce) {\n\t\t\tconst item = dataSouce[time];\n\t\t\tconst lyric = {\n\t\t\t\tstartTime: time || 0,\n\t\t\t\ttext: this.rubyTextToOriginalReact(item.translate || item.text, item.text || item.translate),\n\t\t\t};\n\t\t\tdata.push(lyric);\n\t\t}\n\n\t\treturn data;\n\t},\n\trubyTextToOriginalReact(translated, syncedText) {\n\t\tconst react = Spicetify.React;\n\t\treturn react.createElement(\"p1\", null, [react.createElement(\"ruby\", {}, syncedText, react.createElement(\"rt\", null, translated))]);\n\t},\n\trubyTextToReact(s) {\n\t\tconst react = Spicetify.React;\n\t\tconst rubyElems = s.split(\"\");\n\t\tconst reactChildren = [];\n\n\t\treactChildren.push(rubyElems[0]);\n\t\tfor (let i = 1; i < rubyElems.length; i++) {\n\t\t\tconst kanji = rubyElems[i].split(\"\")[0];\n\t\t\tconst furigana = rubyElems[i].split(\"\")[1].split(\"\")[0];\n\t\t\treactChildren.push(react.createElement(\"ruby\", null, kanji, react.createElement(\"rt\", null, furigana)));\n\n\t\t\treactChildren.push(rubyElems[i].split(\"\")[1]);\n\t\t}\n\t\treturn react.createElement(\"p1\", null, reactChildren);\n\t},\n\tformatTime(timestamp) {\n\t\tif (Number.isNaN(timestamp)) return timestamp.toString();\n\t\tlet minutes = Math.trunc(timestamp / 60000);\n\t\tlet seconds = ((timestamp - minutes * 60000) / 1000).toFixed(2);\n\n\t\tif (minutes < 10) minutes = `0${minutes}`;\n\t\tif (seconds < 10) seconds = `0${seconds}`;\n\n\t\treturn `${minutes}:${seconds}`;\n\t},\n\tformatTextWithTimestamps(text, startTime = 0) {\n\t\tif (text.props?.children) {\n\t\t\treturn text.props.children\n\t\t\t\t.map((child) => {\n\t\t\t\t\tif (typeof child === \"string\") {\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t}\n\t\t\t\t\tif (child.props?.children) {\n\t\t\t\t\t\treturn child.props?.children[0];\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.join(\"\");\n\t\t}\n\t\tif (Array.isArray(text)) {\n\t\t\tlet wordTime = startTime;\n\t\t\treturn text\n\t\t\t\t.map((word) => {\n\t\t\t\t\twordTime += word.time;\n\t\t\t\t\treturn `${word.word}<${this.formatTime(wordTime)}>`;\n\t\t\t\t})\n\t\t\t\t.join(\"\");\n\t\t}\n\t\treturn text;\n\t},\n\tconvertParsedToLRC(lyrics, isBelow) {\n\t\tlet original = \"\";\n\t\tlet conver = \"\";\n\n\t\tif (isBelow) {\n\t\t\tfor (const line of lyrics) {\n\t\t\t\toriginal += `[${this.formatTime(line.startTime)}]${this.formatTextWithTimestamps(line.originalText, line.startTime)}\\n`;\n\t\t\t\tconver += `[${this.formatTime(line.startTime)}]${this.formatTextWithTimestamps(line.text, line.startTime)}\\n`;\n\t\t\t}\n\t\t} else {\n\t\t\tfor (const line of lyrics) {\n\t\t\t\toriginal += `[${this.formatTime(line.startTime)}]${this.formatTextWithTimestamps(line.text, line.startTime)}\\n`;\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\toriginal,\n\t\t\tconver,\n\t\t};\n\t},\n\tconvertParsedToUnsynced(lyrics, isBelow) {\n\t\tlet original = \"\";\n\t\tlet conver = \"\";\n\n\t\tif (isBelow) {\n\t\t\tfor (const line of lyrics) {\n\t\t\t\tif (typeof line.originalText === \"object\") {\n\t\t\t\t\toriginal += `${line.originalText?.props?.children?.[0]}\\n`;\n\t\t\t\t} else {\n\t\t\t\t\toriginal += `${line.originalText}\\n`;\n\t\t\t\t}\n\n\t\t\t\tif (typeof line.text === \"object\") {\n\t\t\t\t\tconver += `${line.text?.props?.children?.[0]}\\n`;\n\t\t\t\t} else {\n\t\t\t\t\tconver += `${line.text}\\n`;\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tfor (const line of lyrics) {\n\t\t\t\tif (typeof line.text === \"object\") {\n\t\t\t\t\toriginal += `${line.text?.props?.children?.[0]}\\n`;\n\t\t\t\t} else {\n\t\t\t\t\toriginal += `${line.text}\\n`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\toriginal,\n\t\t\tconver,\n\t\t};\n\t},\n\tparseLocalLyrics(lyrics) {\n\t\t// Preprocess lyrics by removing [tags] and empty lines\n\t\tconst lines = lyrics\n\t\t\t.replaceAll(/\\[[a-zA-Z]+:.+\\]/g, \"\")\n\t\t\t.trim()\n\t\t\t.split(\"\\n\");\n\n\t\tconst syncedTimestamp = /\\[([0-9:.]+)\\]/;\n\t\tconst karaokeTimestamp = /<([0-9:.]+)>/;\n\n\t\tconst unsynced = [];\n\n\t\tconst isSynced = lines[0].match(syncedTimestamp);\n\t\tconst synced = isSynced ? [] : null;\n\n\t\tconst isKaraoke = lines[0].match(karaokeTimestamp);\n\t\tconst karaoke = isKaraoke ? [] : null;\n\n\t\tfunction timestampToMs(timestamp) {\n\t\t\tconst [minutes, seconds] = timestamp.replace(/\\[\\]<>/, \"\").split(\":\");\n\t\t\treturn Number(minutes) * 60 * 1000 + Number(seconds) * 1000;\n\t\t}\n\n\t\tfunction parseKaraokeLine(line, startTime) {\n\t\t\tlet wordTime = timestampToMs(startTime);\n\t\t\tconst karaokeLine = [];\n\t\t\tconst karaoke = line.matchAll(/(\\S+ ?)<([0-9:.]+)>/g);\n\t\t\tfor (const match of karaoke) {\n\t\t\t\tconst word = match[1];\n\t\t\t\tconst time = match[2];\n\t\t\t\tkaraokeLine.push({ word, time: timestampToMs(time) - wordTime });\n\t\t\t\twordTime = timestampToMs(time);\n\t\t\t}\n\t\t\treturn karaokeLine;\n\t\t}\n\n\t\tfor (const [i, line] of lines.entries()) {\n\t\t\tconst time = line.match(syncedTimestamp)?.[1];\n\t\t\tlet lyricContent = line.replace(syncedTimestamp, \"\").trim();\n\t\t\tconst lyric = lyricContent.replaceAll(/<([0-9:.]+)>/g, \"\").trim();\n\n\t\t\tif (line.trim() !== \"\") {\n\t\t\t\tif (isKaraoke) {\n\t\t\t\t\tif (!lyricContent.endsWith(\">\")) {\n\t\t\t\t\t\t// For some reason there are a variety of formats for karaoke lyrics, Wikipedia is also inconsisent in their examples\n\t\t\t\t\t\tconst endTime = lines[i + 1]?.match(syncedTimestamp)?.[1] || this.formatTime(Number(Spicetify.Player.data.item.metadata.duration));\n\t\t\t\t\t\tlyricContent += `<${endTime}>`;\n\t\t\t\t\t}\n\t\t\t\t\tconst karaokeLine = parseKaraokeLine(lyricContent, time);\n\t\t\t\t\tkaraoke.push({ text: karaokeLine, startTime: timestampToMs(time) });\n\t\t\t\t}\n\t\t\t\tisSynced && time && synced.push({ text: lyric || \"ā™Ŗ\", startTime: timestampToMs(time) });\n\t\t\t\tunsynced.push({ text: lyric || \"ā™Ŗ\" });\n\t\t\t}\n\t\t}\n\n\t\treturn { synced, unsynced, karaoke };\n\t},\n\tprocessLyrics(lyrics) {\n\t\treturn lyrics\n\t\t\t.replace(/怀| /g, \"\") // Remove space\n\t\t\t.replace(/[!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~ļ¼Ÿļ¼ļ¼Œć€‚ć€ć€Šć€‹ć€ć€‘ć€Œć€]/g, \"\"); // Remove punctuation\n\t},\n};\n" }, { "path": "CustomApps/lyrics-plus/index.js", "content": "// Run \"npm i @types/react\" to have this type package available in workspace\n/// \n/// \n\n/** @type {React} */\nconst react = Spicetify.React;\nconst { useState, useEffect, useCallback, useMemo, useRef } = react;\n/** @type {import(\"react\").ReactDOM} */\nconst spotifyVersion = Spicetify.Platform.version;\n\n// Define a function called \"render\" to specify app entry point\n// This function will be used to mount app to main view.\nfunction render() {\n\treturn react.createElement(LyricsContainer, null);\n}\n\nfunction getConfig(name, defaultVal = true) {\n\tconst value = localStorage.getItem(name);\n\treturn value ? value === \"true\" : defaultVal;\n}\n\nconst APP_NAME = \"lyrics-plus\";\nconst MUSIXMATCH_TRANSLATION_PREFIX_DEFAULT = \"musixmatchTranslation:\";\nconst MUSIXMATCH_TRANSLATION_PREFIX_GLOBAL_KEY = \"__lyricsPlusMusixmatchTranslationPrefix\";\nconst MUSIXMATCH_TRANSLATION_FETCH_MESSAGE = \"Fetching translation...\";\nconst MUSIXMATCH_TRANSLATION_FETCH_FAILED_MESSAGE = \"Failed to fetch translation, please try again in a few minutes\";\nconst MUSIXMATCH_TRANSLATION_PREFIX =\n\ttypeof window !== \"undefined\" && typeof window[MUSIXMATCH_TRANSLATION_PREFIX_GLOBAL_KEY] === \"string\"\n\t\t? window[MUSIXMATCH_TRANSLATION_PREFIX_GLOBAL_KEY]\n\t\t: MUSIXMATCH_TRANSLATION_PREFIX_DEFAULT;\n\nif (typeof window !== \"undefined\") {\n\twindow[MUSIXMATCH_TRANSLATION_PREFIX_GLOBAL_KEY] = MUSIXMATCH_TRANSLATION_PREFIX;\n}\n\nconst KARAOKE = 0;\nconst SYNCED = 1;\nconst UNSYNCED = 2;\nconst GENIUS = 3;\n\nconst CONFIG = {\n\tvisual: {\n\t\t\"playbar-button\": getConfig(\"lyrics-plus:visual:playbar-button\", false),\n\t\tcolorful: getConfig(\"lyrics-plus:visual:colorful\"),\n\t\tnoise: getConfig(\"lyrics-plus:visual:noise\"),\n\t\t\"background-color\": localStorage.getItem(\"lyrics-plus:visual:background-color\") || \"var(--spice-main)\",\n\t\t\"active-color\": localStorage.getItem(\"lyrics-plus:visual:active-color\") || \"var(--spice-text)\",\n\t\t\"inactive-color\": localStorage.getItem(\"lyrics-plus:visual:inactive-color\") || \"rgba(var(--spice-rgb-subtext),0.5)\",\n\t\t\"highlight-color\": localStorage.getItem(\"lyrics-plus:visual:highlight-color\") || \"var(--spice-button)\",\n\t\talignment: localStorage.getItem(\"lyrics-plus:visual:alignment\") || \"center\",\n\t\t\"lines-before\": localStorage.getItem(\"lyrics-plus:visual:lines-before\") || \"0\",\n\t\t\"lines-after\": localStorage.getItem(\"lyrics-plus:visual:lines-after\") || \"2\",\n\t\t\"font-size\": localStorage.getItem(\"lyrics-plus:visual:font-size\") || \"32\",\n\t\t\"translate:translated-lyrics-source\": localStorage.getItem(\"lyrics-plus:visual:translate:translated-lyrics-source\") || \"none\",\n\t\t\"translate:display-mode\": localStorage.getItem(\"lyrics-plus:visual:translate:display-mode\") || \"replace\",\n\t\t\"translate:detect-language-override\": localStorage.getItem(\"lyrics-plus:visual:translate:detect-language-override\") || \"off\",\n\t\t\"translation-mode:japanese\": localStorage.getItem(\"lyrics-plus:visual:translation-mode:japanese\") || \"furigana\",\n\t\t\"translation-mode:korean\": localStorage.getItem(\"lyrics-plus:visual:translation-mode:korean\") || \"romaja\",\n\t\t\"translation-mode:chinese\": localStorage.getItem(\"lyrics-plus:visual:translation-mode:chinese\") || \"cn\",\n\t\ttranslate: getConfig(\"lyrics-plus:visual:translate\", false),\n\t\t\"ja-detect-threshold\": localStorage.getItem(\"lyrics-plus:visual:ja-detect-threshold\") || \"40\",\n\t\t\"hans-detect-threshold\": localStorage.getItem(\"lyrics-plus:visual:hans-detect-threshold\") || \"40\",\n\t\t\"musixmatch-translation-language\": localStorage.getItem(\"lyrics-plus:visual:musixmatch-translation-language\") || \"none\",\n\t\t\"fade-blur\": getConfig(\"lyrics-plus:visual:fade-blur\"),\n\t\t\"fullscreen-key\": localStorage.getItem(\"lyrics-plus:visual:fullscreen-key\") || \"f12\",\n\t\t\"show-performers\": getConfig(\"lyrics-plus:visual:show-performers\", true),\n\t\t\"synced-compact\": getConfig(\"lyrics-plus:visual:synced-compact\"),\n\t\t\"dual-genius\": getConfig(\"lyrics-plus:visual:dual-genius\"),\n\t\t\"global-delay\": Number(localStorage.getItem(\"lyrics-plus:visual:global-delay\")) || 0,\n\t\tdelay: 0,\n\t},\n\tproviders: {\n\t\tlrclib: {\n\t\t\ton: getConfig(\"lyrics-plus:provider:lrclib:on\"),\n\t\t\tdesc: \"Lyrics sourced from lrclib.net. Supports both synced and unsynced lyrics. LRCLIB is a free and open-source lyrics provider.\",\n\t\t\tmodes: [SYNCED, UNSYNCED],\n\t\t},\n\t\tmusixmatch: {\n\t\t\ton: getConfig(\"lyrics-plus:provider:musixmatch:on\"),\n\t\t\tdesc: \"Fully compatible with Spotify. Requires a token that can be retrieved from the official Musixmatch app. If you have problems with retrieving lyrics, try refreshing the token by clicking Refresh Token button. You may need to be forced to use your own CORS Proxy to use this provider.\",\n\t\t\ttoken: localStorage.getItem(\"lyrics-plus:provider:musixmatch:token\") || \"21051986b9886beabe1ce01c3ce94c96319411f8f2c122676365e3\",\n\t\t\tmodes: [KARAOKE, SYNCED, UNSYNCED],\n\t\t},\n\t\tspotify: {\n\t\t\ton: getConfig(\"lyrics-plus:provider:spotify:on\"),\n\t\t\tdesc: \"Lyrics sourced from official Spotify API.\",\n\t\t\tmodes: [SYNCED, UNSYNCED],\n\t\t},\n\t\tnetease: {\n\t\t\ton: getConfig(\"lyrics-plus:provider:netease:on\", false),\n\t\t\tdesc: \"Crowdsourced lyrics provider ran by Chinese developers and users.\",\n\t\t\tmodes: [KARAOKE, SYNCED, UNSYNCED],\n\t\t},\n\t\tgenius: {\n\t\t\ton: spotifyVersion >= \"1.2.31\" ? false : getConfig(\"lyrics-plus:provider:genius:on\"),\n\t\t\tdesc: \"Provide unsynced lyrics with insights from artists themselves. Genius is disabled and cannot be used as a provider on 1.2.31 and higher.\",\n\t\t\tmodes: [GENIUS],\n\t\t},\n\t\tlocal: {\n\t\t\ton: getConfig(\"lyrics-plus:provider:local:on\"),\n\t\t\tdesc: \"Provide lyrics from cache/local files loaded from previous Spotify sessions.\",\n\t\t\tmodes: [KARAOKE, SYNCED, UNSYNCED],\n\t\t},\n\t},\n\tprovidersOrder: localStorage.getItem(\"lyrics-plus:services-order\"),\n\tmodes: [\"karaoke\", \"synced\", \"unsynced\", \"genius\"],\n\tlocked: localStorage.getItem(\"lyrics-plus:lock-mode\") || \"-1\",\n};\n\ntry {\n\tCONFIG.providersOrder = JSON.parse(CONFIG.providersOrder);\n\tif (!Array.isArray(CONFIG.providersOrder) || Object.keys(CONFIG.providers).length !== CONFIG.providersOrder.length) {\n\t\tthrow \"\";\n\t}\n} catch {\n\tCONFIG.providersOrder = Object.keys(CONFIG.providers);\n\tlocalStorage.setItem(\"lyrics-plus:services-order\", JSON.stringify(CONFIG.providersOrder));\n}\n\nCONFIG.locked = Number.parseInt(CONFIG.locked);\nCONFIG.visual[\"lines-before\"] = Number.parseInt(CONFIG.visual[\"lines-before\"]);\nCONFIG.visual[\"lines-after\"] = Number.parseInt(CONFIG.visual[\"lines-after\"]);\nCONFIG.visual[\"font-size\"] = Number.parseInt(CONFIG.visual[\"font-size\"]);\nCONFIG.visual[\"ja-detect-threshold\"] = Number.parseInt(CONFIG.visual[\"ja-detect-threshold\"]);\nCONFIG.visual[\"hans-detect-threshold\"] = Number.parseInt(CONFIG.visual[\"hans-detect-threshold\"]);\n\nif (CONFIG.visual[\"translate:translated-lyrics-source\"] === \"musixmatchTranslation\") {\n\tconst language = CONFIG.visual[\"musixmatch-translation-language\"];\n\tconst normalizedLanguage = language && language !== \"none\" ? language : \"none\";\n\tconst upgradedValue = normalizedLanguage !== \"none\" ? `${MUSIXMATCH_TRANSLATION_PREFIX}${normalizedLanguage}` : \"none\";\n\tCONFIG.visual[\"translate:translated-lyrics-source\"] = upgradedValue;\n\tlocalStorage.setItem(`${APP_NAME}:visual:translate:translated-lyrics-source`, upgradedValue);\n}\n\nif (typeof CONFIG.visual[\"translate:translated-lyrics-source\"] === \"string\") {\n\tconst sourceValue = CONFIG.visual[\"translate:translated-lyrics-source\"];\n\tif (sourceValue.startsWith(MUSIXMATCH_TRANSLATION_PREFIX)) {\n\t\tconst language = sourceValue.slice(MUSIXMATCH_TRANSLATION_PREFIX.length) || \"none\";\n\t\tif (CONFIG.visual[\"musixmatch-translation-language\"] !== language) {\n\t\t\tCONFIG.visual[\"musixmatch-translation-language\"] = language;\n\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:musixmatch-translation-language`, language);\n\t\t}\n\t}\n}\n\nif (\n\tCONFIG.visual.translate &&\n\ttypeof CONFIG.visual[\"translate:translated-lyrics-source\"] === \"string\" &&\n\tCONFIG.visual[\"translate:translated-lyrics-source\"] !== \"none\"\n) {\n\tCONFIG.visual.translate = false;\n\tlocalStorage.setItem(`${APP_NAME}:visual:translate`, \"false\");\n}\n\nlet CACHE = {};\n\nconst emptyState = {\n\tkaraoke: null,\n\tsynced: null,\n\tunsynced: null,\n\tgenius: null,\n\tgenius2: null,\n\tcurrentLyrics: null,\n\tmusixmatchAvailableTranslations: null,\n\tmusixmatchTrackId: null,\n\tmusixmatchTranslationLanguage: null,\n};\n\nlet lyricContainerUpdate;\nlet reloadLyrics;\nlet refreshMusixmatchTranslation;\n\nconst fontSizeLimit = { min: 16, max: 256, step: 4 };\n\nconst thresholdSizeLimit = { min: 0, max: 100, step: 5 };\n\nfunction resolveTranslationSource(source) {\n\tif (typeof source !== \"string\") {\n\t\treturn { key: source, language: null };\n\t}\n\n\tif (source.startsWith(MUSIXMATCH_TRANSLATION_PREFIX)) {\n\t\tconst language = source.slice(MUSIXMATCH_TRANSLATION_PREFIX.length) || null;\n\t\treturn { key: \"musixmatchTranslation\", language };\n\t}\n\n\treturn { key: source, language: null };\n}\n\nclass LyricsContainer extends react.Component {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.state = {\n\t\t\tkaraoke: null,\n\t\t\tsynced: null,\n\t\t\tunsynced: null,\n\t\t\tgenius: null,\n\t\t\tgenius2: null,\n\t\t\tcurrentLyrics: null,\n\t\t\tromaji: null,\n\t\t\tfurigana: null,\n\t\t\thiragana: null,\n\t\t\thangul: null,\n\t\t\tromaja: null,\n\t\t\tkatakana: null,\n\t\t\tcn: null,\n\t\t\thk: null,\n\t\t\ttw: null,\n\t\t\tmusixmatchTranslation: null,\n\t\t\tmusixmatchTranslationLanguage: null,\n\t\t\tmusixmatchAvailableTranslations: [],\n\t\t\tmusixmatchTrackId: null,\n\t\t\tneteaseTranslation: null,\n\t\t\turi: \"\",\n\t\t\tprovider: \"\",\n\t\t\tcolors: {\n\t\t\t\tbackground: \"\",\n\t\t\t\tinactive: \"\",\n\t\t\t},\n\t\t\ttempo: \"0.25s\",\n\t\t\texplicitMode: -1,\n\t\t\tlockMode: CONFIG.locked,\n\t\t\tmode: -1,\n\t\t\tisLoading: false,\n\t\t\tversionIndex: 0,\n\t\t\tversionIndex2: 0,\n\t\t\tisFullscreen: false,\n\t\t\tisFADMode: false,\n\t\t\tisCached: false,\n\t\t\tlanguage: null,\n\t\t};\n\t\tthis.currentTrackUri = \"\";\n\t\tthis.nextTrackUri = \"\";\n\t\tthis.availableModes = [];\n\t\tthis.styleVariables = {};\n\t\tthis.fullscreenContainer = document.createElement(\"div\");\n\t\tthis.fullscreenContainer.id = \"lyrics-fullscreen-container\";\n\t\tthis.mousetrap = null;\n\t\tthis.containerRef = react.createRef(null);\n\t\tthis.translator = null;\n\t\tthis.initMoustrap();\n\t\t// Cache last state\n\t\tthis.languageOverride = CONFIG.visual[\"translate:detect-language-override\"];\n\t\tthis.translate = CONFIG.visual.translate;\n\t\tthis.reRenderLyricsPage = false;\n\t\tthis.displayMode = null;\n\t\tthis.currentMusixmatchLanguage = CONFIG.visual[\"musixmatch-translation-language\"];\n\t\tthis._musixmatchTranslationRequestId = null;\n\t}\n\n\tinfoFromTrack(track) {\n\t\tconst meta = track?.metadata;\n\t\tif (!meta) {\n\t\t\treturn null;\n\t\t}\n\t\treturn {\n\t\t\tduration: Number(meta.duration),\n\t\t\talbum: meta.album_title,\n\t\t\tartist: meta.artist_name,\n\t\t\ttitle: meta.title,\n\t\t\turi: track.uri,\n\t\t\timage: meta.image_url,\n\t\t};\n\t}\n\n\tasync fetchColors(uri) {\n\t\tlet vibrant = 0;\n\t\ttry {\n\t\t\ttry {\n\t\t\t\tconst { fetchExtractedColorForTrackEntity } = Spicetify.GraphQL.Definitions;\n\t\t\t\tconst { data } = await Spicetify.GraphQL.Request(fetchExtractedColorForTrackEntity, { uri });\n\t\t\t\tconst { hex } = data.trackUnion.albumOfTrack.coverArt.extractedColors.colorDark;\n\t\t\t\tvibrant = Number.parseInt(hex.replace(\"#\", \"\"), 16);\n\t\t\t} catch {\n\t\t\t\tconst colors = await Spicetify.CosmosAsync.get(`https://spclient.wg.spotify.com/colorextractor/v1/extract-presets?uri=${uri}&format=json`);\n\t\t\t\tvibrant = colors.entries[0].color_swatches.find((color) => color.preset === \"VIBRANT_NON_ALARMING\").color;\n\t\t\t}\n\t\t} catch {\n\t\t\tvibrant = 8747370;\n\t\t}\n\n\t\tthis.setState({\n\t\t\tcolors: {\n\t\t\t\tbackground: Utils.convertIntToRGB(vibrant),\n\t\t\t\tinactive: Utils.convertIntToRGB(vibrant, 3),\n\t\t\t},\n\t\t});\n\t}\n\n\tasync fetchTempo(uri) {\n\t\tconst audio = await Spicetify.CosmosAsync.get(\n\t\t\t`https://spclient.wg.spotify.com/audio-attributes/v1/audio-features/${uri.split(\":\")[2]}?format=json`\n\t\t);\n\t\tlet tempo = audio.tempo;\n\n\t\tconst MIN_TEMPO = 60;\n\t\tconst MAX_TEMPO = 150;\n\t\tconst MAX_PERIOD = 0.4;\n\t\tif (!tempo) tempo = 105;\n\t\tif (tempo < MIN_TEMPO) tempo = MIN_TEMPO;\n\t\tif (tempo > MAX_TEMPO) tempo = MAX_TEMPO;\n\n\t\tlet period = MAX_PERIOD - ((tempo - MIN_TEMPO) / (MAX_TEMPO - MIN_TEMPO)) * MAX_PERIOD;\n\t\tperiod = Math.round(period * 100) / 100;\n\n\t\tthis.setState({\n\t\t\ttempo: `${String(period)}s`,\n\t\t});\n\t}\n\n\tasync refreshMusixmatchTranslation() {\n\t\tconst selectedLanguage = CONFIG.visual[\"musixmatch-translation-language\"] || \"none\";\n\t\tconst availableTranslations = this.state.musixmatchAvailableTranslations || [];\n\t\tconst trackId = this.state.musixmatchTrackId;\n\t\tconst currentUri = this.state.uri;\n\t\tconst currentRequestId = Symbol(\"musixmatchTranslationRequest\");\n\t\tthis._musixmatchTranslationRequestId = currentRequestId;\n\t\tconst isLatestRequest = () => this._musixmatchTranslationRequestId === currentRequestId;\n\t\tconst finishRequest = () => {\n\t\t\tif (isLatestRequest()) {\n\t\t\t\tthis._musixmatchTranslationRequestId = null;\n\t\t\t}\n\t\t};\n\n\t\tconst clearTranslation = () => {\n\t\t\tif (this.state.musixmatchTranslation !== null || this.state.musixmatchTranslationLanguage !== null) {\n\t\t\t\tthis.setState({\n\t\t\t\t\tmusixmatchTranslation: null,\n\t\t\t\t\tmusixmatchTranslationLanguage: null,\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (CACHE[currentUri]) {\n\t\t\t\tCACHE[currentUri].musixmatchTranslation = null;\n\t\t\t\tCACHE[currentUri].musixmatchTranslationLanguage = null;\n\t\t\t}\n\t\t};\n\n\t\tif (!trackId || !selectedLanguage || selectedLanguage === \"none\") {\n\t\t\tclearTranslation();\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tif (!availableTranslations.includes(selectedLanguage)) {\n\t\t\tclearTranslation();\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tconst baseLyrics = this.state.synced ?? this.state.unsynced;\n\t\tif (!baseLyrics) {\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentLanguage = selectedLanguage;\n\n\t\tSpicetify.showNotification(MUSIXMATCH_TRANSLATION_FETCH_MESSAGE, false, 1000);\n\n\t\tthis.setState({\n\t\t\tmusixmatchTranslation: null,\n\t\t\tmusixmatchTranslationLanguage: null,\n\t\t});\n\n\t\tlet translation;\n\t\ttry {\n\t\t\ttranslation = await ProviderMusixmatch.getTranslation(trackId);\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t\tif (isLatestRequest()) {\n\t\t\t\tSpicetify.showNotification(MUSIXMATCH_TRANSLATION_FETCH_FAILED_MESSAGE, true, 3000);\n\t\t\t\tif (CACHE[currentUri]) {\n\t\t\t\t\tCACHE[currentUri].musixmatchTranslation = null;\n\t\t\t\t\tCACHE[currentUri].musixmatchTranslationLanguage = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tif (!translation) {\n\t\t\tif (isLatestRequest()) {\n\t\t\t\tSpicetify.showNotification(MUSIXMATCH_TRANSLATION_FETCH_FAILED_MESSAGE, true, 3000);\n\t\t\t\tif (CACHE[currentUri]) {\n\t\t\t\t\tCACHE[currentUri].musixmatchTranslation = null;\n\t\t\t\t\tCACHE[currentUri].musixmatchTranslationLanguage = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tcurrentLanguage !== CONFIG.visual[\"musixmatch-translation-language\"] ||\n\t\t\ttrackId !== this.state.musixmatchTrackId ||\n\t\t\tcurrentUri !== this.state.uri ||\n\t\t\t!isLatestRequest()\n\t\t) {\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tconst latestBaseLyrics = this.state.synced ?? this.state.unsynced;\n\t\tif (!latestBaseLyrics) {\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tconst mappedTranslation = latestBaseLyrics.map((line) => {\n\t\t\tconst originalText = line.originalText ?? line.text;\n\t\t\tconst matched = translation.find((entry) => Utils.processLyrics(entry.matchedLine) === Utils.processLyrics(originalText));\n\n\t\t\treturn {\n\t\t\t\t...line,\n\t\t\t\ttext: matched?.translation ?? line.text,\n\t\t\t\toriginalText,\n\t\t\t};\n\t\t});\n\n\t\tif (!isLatestRequest()) {\n\t\t\tfinishRequest();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setState({\n\t\t\tmusixmatchTranslation: mappedTranslation,\n\t\t\tmusixmatchTranslationLanguage: currentLanguage,\n\t\t});\n\t\tif (CACHE[currentUri]) {\n\t\t\tCACHE[currentUri].musixmatchTranslation = mappedTranslation;\n\t\t\tCACHE[currentUri].musixmatchTranslationLanguage = currentLanguage;\n\t\t}\n\t\tfinishRequest();\n\t}\n\n\tasync tryServices(trackInfo, mode = -1) {\n\t\tconst currentMode = CONFIG.modes[mode] || \"\";\n\t\tlet finalData = { ...emptyState, uri: trackInfo.uri };\n\t\tfor (const id of CONFIG.providersOrder) {\n\t\t\tconst service = CONFIG.providers[id];\n\t\t\tif (spotifyVersion >= \"1.2.31\" && id === \"genius\") continue;\n\t\t\tif (!service.on) continue;\n\t\t\tif (mode !== -1 && !service.modes.includes(mode)) continue;\n\n\t\t\tlet data;\n\t\t\ttry {\n\t\t\t\tdata = await Providers[id](trackInfo);\n\t\t\t} catch (e) {\n\t\t\t\tconsole.error(e);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (data.error || (!data.karaoke && !data.synced && !data.unsynced && !data.genius)) continue;\n\t\t\tif (mode === -1) {\n\t\t\t\tfinalData = data;\n\t\t\t\treturn finalData;\n\t\t\t}\n\n\t\t\tif (!data[currentMode]) {\n\t\t\t\tfor (const key in data) {\n\t\t\t\t\tif (!finalData[key]) {\n\t\t\t\t\t\tfinalData[key] = data[key];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tfor (const key in data) {\n\t\t\t\tif (!finalData[key]) {\n\t\t\t\t\tfinalData[key] = data[key];\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (data.provider !== \"local\" && finalData.provider && finalData.provider !== data.provider) {\n\t\t\t\tconst styledMode = currentMode.charAt(0).toUpperCase() + currentMode.slice(1);\n\t\t\t\tfinalData.copyright = `${styledMode} lyrics provided by ${data.provider}\\n${finalData.copyright || \"\"}`.trim();\n\t\t\t}\n\n\t\t\tif (finalData.musixmatchTranslation && typeof finalData.musixmatchTranslation[0].startTime === \"undefined\" && finalData.synced) {\n\t\t\t\tfinalData.musixmatchTranslation = finalData.synced.map((line) => ({\n\t\t\t\t\t...line,\n\t\t\t\t\ttext:\n\t\t\t\t\t\tfinalData.musixmatchTranslation.find((l) => Utils.processLyrics(l.originalText) === Utils.processLyrics(line.text))?.text ?? line.text,\n\t\t\t\t}));\n\t\t\t}\n\n\t\t\treturn finalData;\n\t\t}\n\n\t\treturn finalData;\n\t}\n\n\tasync fetchLyrics(track, mode = -1, refresh = false) {\n\t\tconst info = this.infoFromTrack(track);\n\t\tif (!info) {\n\t\t\tthis.setState({ error: \"No track info\" });\n\t\t\treturn;\n\t\t}\n\n\t\tlet isCached = this.lyricsSaved(info.uri);\n\n\t\tif (CONFIG.visual.colorful) {\n\t\t\tthis.fetchColors(info.uri);\n\t\t}\n\n\t\tthis.fetchTempo(info.uri);\n\t\tthis.resetDelay();\n\n\t\tlet tempState;\n\t\t// if lyrics are cached\n\t\tif ((mode === -1 && CACHE[info.uri]) || CACHE[info.uri]?.[CONFIG.modes?.[mode]]) {\n\t\t\ttempState = { ...emptyState, ...CACHE[info.uri], isCached };\n\t\t\tif (CACHE[info.uri]?.mode) {\n\t\t\t\tthis.state.explicitMode = CACHE[info.uri]?.mode;\n\t\t\t\ttempState = { ...tempState, mode: CACHE[info.uri]?.mode };\n\t\t\t}\n\t\t} else {\n\t\t\tthis.setState({ ...emptyState, isLoading: true, isCached: false });\n\n\t\t\tconst resp = await this.tryServices(info, mode);\n\t\t\tif (resp.provider) {\n\t\t\t\t// Cache lyrics\n\t\t\t\tCACHE[resp.uri] = resp;\n\t\t\t}\n\n\t\t\t// This True when the user presses the Cache Lyrics button and saves it to localStorage.\n\t\t\tisCached = this.lyricsSaved(resp.uri);\n\n\t\t\t// In case user skips tracks too fast and multiple callbacks\n\t\t\t// set wrong lyrics to current track.\n\t\t\tif (resp.uri === this.currentTrackUri) {\n\t\t\t\ttempState = { ...emptyState, ...resp, isLoading: false, isCached };\n\t\t\t} else {\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tconst selectedMusixmatchLanguage = CONFIG.visual[\"musixmatch-translation-language\"] || \"none\";\n\t\tconst shouldRefreshMusixmatchTranslation =\n\t\t\ttempState.musixmatchTrackId &&\n\t\t\tselectedMusixmatchLanguage !== \"none\" &&\n\t\t\tArray.isArray(tempState.musixmatchAvailableTranslations) &&\n\t\t\ttempState.musixmatchAvailableTranslations.includes(selectedMusixmatchLanguage) &&\n\t\t\t(tempState.musixmatchTranslationLanguage !== selectedMusixmatchLanguage || !tempState.musixmatchTranslation);\n\t\tif (\n\t\t\tselectedMusixmatchLanguage !== \"none\" &&\n\t\t\t(!Array.isArray(tempState.musixmatchAvailableTranslations) || !tempState.musixmatchAvailableTranslations.includes(selectedMusixmatchLanguage))\n\t\t) {\n\t\t\tif (\n\t\t\t\ttypeof CONFIG.visual[\"translate:translated-lyrics-source\"] === \"string\" &&\n\t\t\t\tCONFIG.visual[\"translate:translated-lyrics-source\"].startsWith(MUSIXMATCH_TRANSLATION_PREFIX)\n\t\t\t) {\n\t\t\t\tCONFIG.visual[\"translate:translated-lyrics-source\"] = \"none\";\n\t\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:translate:translated-lyrics-source`, \"none\");\n\t\t\t}\n\t\t\tCONFIG.visual[\"musixmatch-translation-language\"] = \"none\";\n\t\t\tlocalStorage.setItem(`${APP_NAME}:visual:musixmatch-translation-language`, \"none\");\n\t\t}\n\t\tconst translationOverrides = shouldRefreshMusixmatchTranslation ? { musixmatchTranslation: null, musixmatchTranslationLanguage: null } : {};\n\n\t\tlet finalMode = mode;\n\t\tif (mode === -1) {\n\t\t\tif (this.state.explicitMode !== -1) {\n\t\t\t\tfinalMode = this.state.explicitMode;\n\t\t\t} else if (this.state.lockMode !== -1) {\n\t\t\t\tfinalMode = this.state.lockMode;\n\t\t\t} else {\n\t\t\t\t// Auto switch\n\t\t\t\tif (tempState.karaoke) {\n\t\t\t\t\tfinalMode = KARAOKE;\n\t\t\t\t} else if (tempState.synced) {\n\t\t\t\t\tfinalMode = SYNCED;\n\t\t\t\t} else if (tempState.unsynced) {\n\t\t\t\t\tfinalMode = UNSYNCED;\n\t\t\t\t} else if (tempState.genius) {\n\t\t\t\t\tfinalMode = GENIUS;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis.lyricsSource(tempState, finalMode);\n\n\t\t// if song changed one time\n\t\tif (tempState.uri !== this.state.uri || refresh) {\n\t\t\t// when a song starts for the first time and language-override is selected, the lyrics are converted to the specified language.\n\t\t\t// however, when switching it off again, the detected language needs to be known, so defaultLanguage has been introduced.\n\t\t\tconst defaultLanguage = Utils.detectLanguage(this.state.currentLyrics);\n\t\t\tconst language =\n\t\t\t\tCONFIG.visual[\"translate:detect-language-override\"] !== \"off\" ? CONFIG.visual[\"translate:detect-language-override\"] : defaultLanguage;\n\t\t\tconst friendlyLanguage = language && new Intl.DisplayNames([\"en\"], { type: \"language\" }).of(language.split(\"-\")[0])?.toLowerCase();\n\t\t\tconst targetConvert = CONFIG.visual[`translation-mode:${friendlyLanguage}`];\n\n\t\t\tconst isMemorey = CACHE[tempState.uri]?.[targetConvert];\n\t\t\tif (CONFIG.visual.translate && defaultLanguage && !isMemorey) {\n\t\t\t\tthis.translateLyrics(language, this.state.currentLyrics, targetConvert).then((translated) => {\n\t\t\t\t\tconst res = { [targetConvert]: translated };\n\t\t\t\t\t// Cache translated lyrics\n\t\t\t\t\tCACHE[tempState.uri] = { ...CACHE[tempState.uri], ...res };\n\t\t\t\t\tthis.setState({ ...res });\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// reset and apply\n\t\t\tthis.setState(\n\t\t\t\t{\n\t\t\t\t\tfurigana: null,\n\t\t\t\t\tromaji: null,\n\t\t\t\t\thiragana: null,\n\t\t\t\t\tkatakana: null,\n\t\t\t\t\thangul: null,\n\t\t\t\t\tromaja: null,\n\t\t\t\t\tcn: null,\n\t\t\t\t\thk: null,\n\t\t\t\t\ttw: null,\n\t\t\t\t\tneteaseTranslation: null,\n\t\t\t\t\t...tempState,\n\t\t\t\t\t...translationOverrides,\n\t\t\t\t\tlanguage: defaultLanguage,\n\t\t\t\t},\n\t\t\t\t() => {\n\t\t\t\t\tthis.currentMusixmatchLanguage = CONFIG.visual[\"musixmatch-translation-language\"];\n\t\t\t\t\tif (shouldRefreshMusixmatchTranslation) {\n\t\t\t\t\t\tthis.refreshMusixmatchTranslation();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setState({ ...tempState, ...translationOverrides }, () => {\n\t\t\tthis.currentMusixmatchLanguage = CONFIG.visual[\"musixmatch-translation-language\"];\n\t\t\tif (shouldRefreshMusixmatchTranslation) {\n\t\t\t\tthis.refreshMusixmatchTranslation();\n\t\t\t}\n\t\t});\n\t}\n\n\tlyricsSource(lyricsState, mode) {\n\t\tif (!lyricsState) return;\n\n\t\tconst lang = this.provideLanguageCode(this.state.currentLyrics);\n\t\tconst friendlyLanguage = lang && new Intl.DisplayNames([\"en\"], { type: \"language\" }).of(lang.split(\"-\")[0])?.toLowerCase();\n\n\t\tif (!this.displayMode) {\n\t\t\tthis.displayMode = CONFIG.visual[`translation-mode:${friendlyLanguage}`];\n\t\t}\n\n\t\t// get original Lyrics\n\t\tconst lyrics = lyricsState[CONFIG.modes[mode]];\n\t\tconst translationSourceConfig = resolveTranslationSource(CONFIG.visual[\"translate:translated-lyrics-source\"]);\n\n\t\tif (translationSourceConfig.language) {\n\t\t\tconst translationLanguageKey = `${APP_NAME}:visual:musixmatch-translation-language`;\n\t\t\tconst storedLanguage = localStorage.getItem(translationLanguageKey);\n\n\t\t\tif (storedLanguage !== translationSourceConfig.language) {\n\t\t\t\tlocalStorage.setItem(translationLanguageKey, translationSourceConfig.language);\n\t\t\t}\n\n\t\t\tif (CONFIG.visual[\"musixmatch-translation-language\"] !== translationSourceConfig.language) {\n\t\t\t\tCONFIG.visual[\"musixmatch-translation-language\"] = translationSourceConfig.language;\n\t\t\t}\n\t\t}\n\n\t\tif (CONFIG.visual.translate) {\n\t\t\tthis.state.currentLyrics = lyricsState[CONFIG.visual[`translation-mode:${friendlyLanguage}`]] ?? lyrics;\n\t\t} else {\n\t\t\tthis.state.currentLyrics = lyricsState[translationSourceConfig.key] ?? lyrics;\n\t\t}\n\n\t\t// Convert Mode re-fresh\n\t\tif (\n\t\t\tthis.translate !== CONFIG.visual.translate ||\n\t\t\tthis.languageOverride !== CONFIG.visual[\"translate:detect-language-override\"] ||\n\t\t\tthis.displayMode !== CONFIG.visual[`translation-mode:${friendlyLanguage}`]\n\t\t) {\n\t\t\tthis.translate = CONFIG.visual.translate;\n\t\t\tthis.languageOverride = CONFIG.visual[\"translate:detect-language-override\"];\n\t\t\tthis.displayMode = CONFIG.visual[`translation-mode:${friendlyLanguage}`];\n\n\t\t\tif (CONFIG.visual.translate) {\n\t\t\t\tconst targetConvert = CONFIG.visual[`translation-mode:${friendlyLanguage}`];\n\t\t\t\tconst isCached = CACHE[lyricsState.uri]?.[targetConvert];\n\n\t\t\t\tif (!isCached) {\n\t\t\t\t\tthis.translateLyrics(lang, lyrics, targetConvert).then((translated) => {\n\t\t\t\t\t\tconst res = { [targetConvert]: translated };\n\t\t\t\t\t\t// Cache translated lyrics\n\t\t\t\t\t\tCACHE[lyricsState.uri] = { ...CACHE[lyricsState.uri], ...res };\n\t\t\t\t\t\tthis.setState({ ...this.state, ...res });\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tconst resetCache = { furigana: null, romaji: null, hiragana: null, katakana: null, hangul: null, romaja: null, cn: null, hk: null, tw: null };\n\t\t\t\tCACHE[lyricsState.uri] = { ...CACHE[lyricsState.uri], ...resetCache };\n\t\t\t}\n\t\t}\n\t}\n\n\tprovideLanguageCode(lyrics) {\n\t\tif (!lyrics) return;\n\n\t\tif (CONFIG.visual[\"translate:detect-language-override\"] !== \"off\") {\n\t\t\treturn CONFIG.visual[\"translate:detect-language-override\"];\n\t\t}\n\t\tif (this.state.language) {\n\t\t\treturn this.state.language;\n\t\t}\n\t\treturn Utils.detectLanguage(lyrics);\n\t}\n\n\tasync translateLyrics(language, lyrics, targetConvert) {\n\t\tif (!language) return;\n\n\t\tSpicetify.showNotification(\"Converting...\", false, 1000);\n\t\tif (!this.translator) {\n\t\t\tthis.translator = new Translator(language);\n\t\t}\n\t\tawait this.translator.awaitFinished(language);\n\n\t\tlet result;\n\t\ttry {\n\t\t\tif (language === \"ja\") {\n\t\t\t\t// Japanese\n\t\t\t\tconst map = {\n\t\t\t\t\tromaji: { target: \"romaji\", mode: \"spaced\" },\n\t\t\t\t\tfurigana: { target: \"hiragana\", mode: \"furigana\" },\n\t\t\t\t\thiragana: { target: \"hiragana\", mode: \"normal\" },\n\t\t\t\t\tkatakana: { target: \"katakana\", mode: \"normal\" },\n\t\t\t\t};\n\n\t\t\t\tresult = await Promise.all(\n\t\t\t\t\tlyrics.map(async (lyric) => await this.translator.romajifyText(lyric.text, map[targetConvert].target, map[targetConvert].mode))\n\t\t\t\t);\n\t\t\t} else if (language === \"ko\") {\n\t\t\t\t// Korean\n\t\t\t\tresult = await Promise.all(lyrics.map(async (lyric) => await this.translator.convertToRomaja(lyric.text, \"romaji\")));\n\t\t\t} else if (language === \"zh-hans\") {\n\t\t\t\t// Chinese (Simplified)\n\t\t\t\tconst map = {\n\t\t\t\t\tcn: { from: \"cn\", target: \"cn\" },\n\t\t\t\t\ttw: { from: \"cn\", target: \"tw\" },\n\t\t\t\t\thk: { from: \"cn\", target: \"hk\" },\n\t\t\t\t};\n\n\t\t\t\t// prevent conversion between the same language.\n\t\t\t\tif (targetConvert === \"cn\") {\n\t\t\t\t\tSpicetify.showNotification(\"No conversion is needed\", false, 1000);\n\t\t\t\t\treturn lyrics;\n\t\t\t\t}\n\n\t\t\t\tresult = await Promise.all(\n\t\t\t\t\tlyrics.map(async (lyric) => await this.translator.convertChinese(lyric.text, map[targetConvert].from, map[targetConvert].target))\n\t\t\t\t);\n\t\t\t} else if (language === \"zh-hant\") {\n\t\t\t\t// Chinese (Traditional)\n\t\t\t\tconst map = {\n\t\t\t\t\tcn: { from: \"t\", target: \"cn\" },\n\t\t\t\t\thk: { from: \"t\", target: \"hk\" },\n\t\t\t\t\ttw: { from: \"t\", target: \"tw\" },\n\t\t\t\t};\n\n\t\t\t\t// prevent conversion between the same language.\n\t\t\t\tif (targetConvert === \"tw\") {\n\t\t\t\t\tSpicetify.showNotification(\"No conversion is needed\", false, 1000);\n\t\t\t\t\treturn lyrics;\n\t\t\t\t}\n\n\t\t\t\tresult = await Promise.all(\n\t\t\t\t\tlyrics.map(async (lyric) => await this.translator.convertChinese(lyric.text, map[targetConvert].from, map[targetConvert].target))\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst res = Utils.processTranslatedLyrics(result, lyrics);\n\t\t\tSpicetify.showNotification(\"Converting...\", false, 0);\n\t\t\treturn res;\n\t\t} catch (error) {\n\t\t\tSpicetify.showNotification(\"Convert Error!\", true);\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n\n\tresetDelay() {\n\t\tCONFIG.visual.delay = Number(localStorage.getItem(`lyrics-delay:${Spicetify.Player.data.item.uri}`)) || 0;\n\t}\n\n\tasync onVersionChange(items, index) {\n\t\tif (this.state.mode === GENIUS) {\n\t\t\tthis.setState({\n\t\t\t\t...emptyLine,\n\t\t\t\tgenius2: this.state.genius2,\n\t\t\t\tisLoading: true,\n\t\t\t});\n\t\t\tconst lyrics = await ProviderGenius.fetchLyricsVersion(items, index);\n\t\t\tthis.setState({\n\t\t\t\tgenius: lyrics,\n\t\t\t\tversionIndex: index,\n\t\t\t\tisLoading: false,\n\t\t\t});\n\t\t}\n\t}\n\n\tasync onVersionChange2(items, index) {\n\t\tif (this.state.mode === GENIUS) {\n\t\t\tthis.setState({\n\t\t\t\t...emptyLine,\n\t\t\t\tgenius: this.state.genius,\n\t\t\t\tisLoading: true,\n\t\t\t});\n\t\t\tconst lyrics = await ProviderGenius.fetchLyricsVersion(items, index);\n\t\t\tthis.setState({\n\t\t\t\tgenius2: lyrics,\n\t\t\t\tversionIndex2: index,\n\t\t\t\tisLoading: false,\n\t\t\t});\n\t\t}\n\t}\n\n\tsaveLocalLyrics(uri, lyrics) {\n\t\tif (lyrics.genius) {\n\t\t\tlyrics.unsynced = lyrics.genius.split(\"
\").map((lyc) => {\n\t\t\t\treturn {\n\t\t\t\t\ttext: lyc.replace(/<[^>]*>/g, \"\"),\n\t\t\t\t};\n\t\t\t});\n\t\t\tlyrics.genius = null;\n\t\t}\n\n\t\tconst localLyrics = JSON.parse(localStorage.getItem(`${APP_NAME}:local-lyrics`)) || {};\n\t\tlocalLyrics[uri] = lyrics;\n\t\tlocalStorage.setItem(`${APP_NAME}:local-lyrics`, JSON.stringify(localLyrics));\n\t\tthis.setState({ isCached: true });\n\t}\n\n\tdeleteLocalLyrics(uri) {\n\t\tconst localLyrics = JSON.parse(localStorage.getItem(`${APP_NAME}:local-lyrics`)) || {};\n\t\tdelete localLyrics[uri];\n\t\tlocalStorage.setItem(`${APP_NAME}:local-lyrics`, JSON.stringify(localLyrics));\n\t\tconsole.log(localLyrics);\n\t\tthis.setState({ isCached: false });\n\t}\n\n\tlyricsSaved(uri) {\n\t\tconst localLyrics = JSON.parse(localStorage.getItem(`${APP_NAME}:local-lyrics`)) || {};\n\t\treturn !!localLyrics[uri];\n\t}\n\n\tprocessLyricsFromFile(event) {\n\t\tconst file = event.target.files;\n\t\tif (!file.length) return;\n\t\tconst reader = new FileReader();\n\n\t\tif (file[0].size > 1024 * 1024) {\n\t\t\tSpicetify.showNotification(\"File too large\", true);\n\t\t\treturn;\n\t\t}\n\n\t\treader.onload = (e) => {\n\t\t\ttry {\n\t\t\t\tconst localLyrics = Utils.parseLocalLyrics(e.target.result);\n\t\t\t\tconst parsedKeys = Object.keys(localLyrics)\n\t\t\t\t\t.filter((key) => localLyrics[key])\n\t\t\t\t\t.map((key) => key[0].toUpperCase() + key.slice(1))\n\t\t\t\t\t.map((key) => `${key}`);\n\n\t\t\t\tif (!parsedKeys.length) {\n\t\t\t\t\tSpicetify.showNotification(\"Nothing to load\", true);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthis.setState({ ...localLyrics, provider: \"local\" });\n\t\t\t\tCACHE[this.currentTrackUri] = { ...localLyrics, provider: \"local\", uri: this.currentTrackUri };\n\t\t\t\tthis.saveLocalLyrics(this.currentTrackUri, localLyrics);\n\n\t\t\t\tSpicetify.showNotification(`Loaded ${parsedKeys.join(\", \")} lyrics from file`);\n\t\t\t} catch (e) {\n\t\t\t\tconsole.error(e);\n\t\t\t\tSpicetify.showNotification(\"Failed to load lyrics\", true);\n\t\t\t}\n\t\t};\n\n\t\treader.onerror = (e) => {\n\t\t\tconsole.error(e);\n\t\t\tSpicetify.showNotification(\"Failed to read file\", true);\n\t\t};\n\n\t\treader.readAsText(file[0]);\n\t\tevent.target.value = \"\";\n\t}\n\tinitMoustrap() {\n\t\tif (!this.mousetrap && Spicetify.Mousetrap) {\n\t\t\tthis.mousetrap = new Spicetify.Mousetrap();\n\t\t}\n\t}\n\n\tcomponentDidMount() {\n\t\tthis.onQueueChange = async ({ data: queue }) => {\n\t\t\tthis.state.explicitMode = this.state.lockMode;\n\t\t\tthis.currentTrackUri = queue.current.uri;\n\t\t\tthis.fetchLyrics(queue.current, this.state.explicitMode);\n\t\t\tthis.viewPort.scrollTo(0, 0);\n\n\t\t\t// Fetch next track\n\t\t\tconst nextTrack = queue.queued?.[0] || queue.nextUp?.[0];\n\t\t\tconst nextInfo = this.infoFromTrack(nextTrack);\n\t\t\t// Debounce next track fetch\n\t\t\tif (!nextInfo || nextInfo.uri === this.nextTrackUri) return;\n\t\t\tthis.nextTrackUri = nextInfo.uri;\n\t\t\tthis.tryServices(nextInfo, this.state.explicitMode).then((resp) => {\n\t\t\t\tif (resp.provider) {\n\t\t\t\t\t// Cache lyrics\n\t\t\t\t\tCACHE[resp.uri] = resp;\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (Spicetify.Player?.data?.item) {\n\t\t\tthis.state.explicitMode = this.state.lockMode;\n\t\t\tthis.currentTrackUri = Spicetify.Player.data.item.uri;\n\t\t\tthis.fetchLyrics(Spicetify.Player.data.item, this.state.explicitMode);\n\t\t}\n\n\t\tthis.updateVisualOnConfigChange();\n\t\tUtils.addQueueListener(this.onQueueChange);\n\n\t\tlyricContainerUpdate = () => {\n\t\t\tthis.reRenderLyricsPage = !this.reRenderLyricsPage;\n\t\t\tthis.updateVisualOnConfigChange();\n\t\t\tthis.forceUpdate();\n\n\t\t\tif (this.currentMusixmatchLanguage !== CONFIG.visual[\"musixmatch-translation-language\"]) {\n\t\t\t\tthis.currentMusixmatchLanguage = CONFIG.visual[\"musixmatch-translation-language\"];\n\t\t\t\tthis.refreshMusixmatchTranslation();\n\t\t\t}\n\t\t};\n\n\t\trefreshMusixmatchTranslation = this.refreshMusixmatchTranslation.bind(this);\n\n\t\treloadLyrics = () => {\n\t\t\tCACHE = {};\n\t\t\tthis.updateVisualOnConfigChange();\n\t\t\tthis.forceUpdate();\n\t\t\tthis.fetchLyrics(Spicetify.Player.data.item, this.state.explicitMode, true);\n\t\t};\n\n\t\tthis.viewPort =\n\t\t\tdocument.querySelector(\".Root__main-view .os-viewport\") ?? document.querySelector(\".Root__main-view .main-view-container__scroll-node\");\n\n\t\tthis.configButton = new Spicetify.Menu.Item(\"Lyrics Plus config\", false, openConfig, \"lyrics\");\n\t\tthis.configButton.register();\n\n\t\tthis.onFontSizeChange = (event) => {\n\t\t\tif (!event.ctrlKey) return;\n\t\t\tconst dir = event.deltaY < 0 ? 1 : -1;\n\t\t\tlet temp = CONFIG.visual[\"font-size\"] + dir * fontSizeLimit.step;\n\t\t\tif (temp < fontSizeLimit.min) {\n\t\t\t\ttemp = fontSizeLimit.min;\n\t\t\t} else if (temp > fontSizeLimit.max) {\n\t\t\t\ttemp = fontSizeLimit.max;\n\t\t\t}\n\t\t\tCONFIG.visual[\"font-size\"] = temp;\n\t\t\tlocalStorage.setItem(\"lyrics-plus:visual:font-size\", temp);\n\t\t\tlyricContainerUpdate();\n\t\t};\n\n\t\tthis.toggleFullscreen = () => {\n\t\t\tconst isEnabled = !this.state.isFullscreen;\n\t\t\tif (isEnabled) {\n\t\t\t\tdocument.body.append(this.fullscreenContainer);\n\t\t\t\tdocument.documentElement.requestFullscreen();\n\t\t\t\tthis.mousetrap.bind(\"esc\", this.toggleFullscreen);\n\t\t\t} else {\n\t\t\t\tthis.fullscreenContainer.remove();\n\t\t\t\tdocument.exitFullscreen();\n\t\t\t\tthis.mousetrap.unbind(\"esc\");\n\t\t\t}\n\n\t\t\tthis.setState({\n\t\t\t\tisFullscreen: isEnabled,\n\t\t\t});\n\t\t};\n\t\tthis.mousetrap.reset();\n\t\tthis.mousetrap.bind(CONFIG.visual[\"fullscreen-key\"], this.toggleFullscreen);\n\t\twindow.addEventListener(\"fad-request\", lyricContainerUpdate);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tUtils.removeQueueListener(this.onQueueChange);\n\t\tthis.configButton.deregister();\n\t\tthis.mousetrap.reset();\n\t\twindow.removeEventListener(\"fad-request\", lyricContainerUpdate);\n\t\trefreshMusixmatchTranslation = null;\n\t}\n\n\tupdateVisualOnConfigChange() {\n\t\tthis.availableModes = CONFIG.modes.filter((_, id) => {\n\t\t\treturn Object.values(CONFIG.providers).some((p) => p.on && p.modes.includes(id));\n\t\t});\n\n\t\tif (!CONFIG.visual.colorful) {\n\t\t\tthis.styleVariables = {\n\t\t\t\t\"--lyrics-color-active\": CONFIG.visual[\"active-color\"],\n\t\t\t\t\"--lyrics-color-inactive\": CONFIG.visual[\"inactive-color\"],\n\t\t\t\t\"--lyrics-color-background\": CONFIG.visual[\"background-color\"],\n\t\t\t\t\"--lyrics-highlight-background\": CONFIG.visual[\"highlight-color\"],\n\t\t\t\t\"--lyrics-background-noise\": CONFIG.visual.noise ? \"var(--background-noise)\" : \"unset\",\n\t\t\t};\n\t\t}\n\n\t\tthis.styleVariables = {\n\t\t\t...this.styleVariables,\n\t\t\t\"--lyrics-align-text\": CONFIG.visual.alignment,\n\t\t\t\"--lyrics-font-size\": `${CONFIG.visual[\"font-size\"]}px`,\n\t\t\t\"--animation-tempo\": this.state.tempo,\n\t\t};\n\n\t\tthis.mousetrap.reset();\n\t\tthis.mousetrap.bind(CONFIG.visual[\"fullscreen-key\"], this.toggleFullscreen);\n\t}\n\n\trender() {\n\t\tconst fadLyricsContainer = document.getElementById(\"fad-lyrics-plus-container\");\n\t\tthis.state.isFADMode = !!fadLyricsContainer;\n\n\t\tif (this.state.isFADMode) {\n\t\t\t// Text colors will be set by FAD extension\n\t\t\tthis.styleVariables = {};\n\t\t} else if (CONFIG.visual.colorful) {\n\t\t\tthis.styleVariables = {\n\t\t\t\t\"--lyrics-color-active\": \"white\",\n\t\t\t\t\"--lyrics-color-inactive\": this.state.colors.inactive,\n\t\t\t\t\"--lyrics-color-background\": this.state.colors.background || \"transparent\",\n\t\t\t\t\"--lyrics-highlight-background\": this.state.colors.inactive,\n\t\t\t\t\"--lyrics-background-noise\": CONFIG.visual.noise ? \"var(--background-noise)\" : \"unset\",\n\t\t\t};\n\t\t}\n\n\t\tthis.styleVariables = {\n\t\t\t...this.styleVariables,\n\t\t\t\"--lyrics-align-text\": CONFIG.visual.alignment,\n\t\t\t\"--lyrics-font-size\": `${CONFIG.visual[\"font-size\"]}px`,\n\t\t\t\"--animation-tempo\": this.state.tempo,\n\t\t};\n\n\t\tlet mode = -1;\n\t\tif (this.state.explicitMode !== -1) {\n\t\t\tmode = this.state.explicitMode;\n\t\t} else if (this.state.lockMode !== -1) {\n\t\t\tmode = this.state.lockMode;\n\t\t} else {\n\t\t\t// Auto switch\n\t\t\tif (this.state.karaoke) {\n\t\t\t\tmode = KARAOKE;\n\t\t\t} else if (this.state.synced) {\n\t\t\t\tmode = SYNCED;\n\t\t\t} else if (this.state.unsynced) {\n\t\t\t\tmode = UNSYNCED;\n\t\t\t} else if (this.state.genius) {\n\t\t\t\tmode = GENIUS;\n\t\t\t}\n\t\t}\n\n\t\tlet activeItem;\n\t\tlet showTranslationButton;\n\n\t\tthis.lyricsSource(this.state, mode);\n\t\tconst lang = this.provideLanguageCode(this.state.currentLyrics);\n\t\tconst friendlyLanguage = lang && new Intl.DisplayNames([\"en\"], { type: \"language\" }).of(lang.split(\"-\")[0])?.toLowerCase();\n\t\tconst hasMusixmatchLanguages = Array.isArray(this.state.musixmatchAvailableTranslations) && this.state.musixmatchAvailableTranslations.length > 0;\n\t\tconst hasTranslation = this.state.neteaseTranslation !== null || this.state.musixmatchTranslation !== null || hasMusixmatchLanguages;\n\t\tconst hasPerformer = !!this.state.currentLyrics?.some((line) => line.performer);\n\n\t\tif (mode !== -1) {\n\t\t\tshowTranslationButton = (friendlyLanguage || hasTranslation) && (mode === SYNCED || mode === UNSYNCED);\n\n\t\t\tif (mode === KARAOKE && this.state.karaoke) {\n\t\t\t\tactiveItem = react.createElement(CONFIG.visual[\"synced-compact\"] ? SyncedLyricsPage : SyncedExpandedLyricsPage, {\n\t\t\t\t\tisKara: true,\n\t\t\t\t\ttrackUri: this.state.uri,\n\t\t\t\t\tlyrics: this.state.karaoke,\n\t\t\t\t\tprovider: this.state.provider,\n\t\t\t\t\tcopyright: this.state.copyright,\n\t\t\t\t\treRenderLyricsPage: this.reRenderLyricsPage,\n\t\t\t\t});\n\t\t\t} else if (mode === SYNCED && this.state.synced) {\n\t\t\t\tactiveItem = react.createElement(CONFIG.visual[\"synced-compact\"] ? SyncedLyricsPage : SyncedExpandedLyricsPage, {\n\t\t\t\t\ttrackUri: this.state.uri,\n\t\t\t\t\tlyrics: this.state.currentLyrics,\n\t\t\t\t\tprovider: this.state.provider,\n\t\t\t\t\tcopyright: this.state.copyright,\n\t\t\t\t\treRenderLyricsPage: this.reRenderLyricsPage,\n\t\t\t\t});\n\t\t\t} else if (mode === UNSYNCED && this.state.unsynced) {\n\t\t\t\tactiveItem = react.createElement(UnsyncedLyricsPage, {\n\t\t\t\t\ttrackUri: this.state.uri,\n\t\t\t\t\tlyrics: this.state.currentLyrics,\n\t\t\t\t\tprovider: this.state.provider,\n\t\t\t\t\tcopyright: this.state.copyright,\n\t\t\t\t\treRenderLyricsPage: this.reRenderLyricsPage,\n\t\t\t\t});\n\t\t\t} else if (mode === GENIUS && this.state.genius) {\n\t\t\t\tactiveItem = react.createElement(GeniusPage, {\n\t\t\t\t\tisSplitted: CONFIG.visual[\"dual-genius\"],\n\t\t\t\t\ttrackUri: this.state.uri,\n\t\t\t\t\tlyrics: this.state.genius,\n\t\t\t\t\tprovider: this.state.provider,\n\t\t\t\t\tcopyright: this.state.copyright,\n\t\t\t\t\tversions: this.state.versions,\n\t\t\t\t\tversionIndex: this.state.versionIndex,\n\t\t\t\t\tonVersionChange: this.onVersionChange.bind(this),\n\t\t\t\t\tlyrics2: this.state.genius2,\n\t\t\t\t\tversionIndex2: this.state.versionIndex2,\n\t\t\t\t\tonVersionChange2: this.onVersionChange2.bind(this),\n\t\t\t\t\treRenderLyricsPage: this.reRenderLyricsPage,\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tif (!activeItem) {\n\t\t\tactiveItem = react.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"lyrics-lyricsContainer-LyricsUnavailablePage\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"span\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"lyrics-lyricsContainer-LyricsUnavailableMessage\",\n\t\t\t\t\t},\n\t\t\t\t\tthis.state.isLoading ? LoadingIcon : \"(ā€¢ _ ā€¢ )\"\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\tthis.state.mode = mode;\n\n\t\tconst out = react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: `lyrics-lyricsContainer-LyricsContainer${CONFIG.visual[\"fade-blur\"] ? \" blur-enabled\" : \"\"}${\n\t\t\t\t\tfadLyricsContainer ? \" fad-enabled\" : \"\"\n\t\t\t\t}`,\n\t\t\t\tstyle: this.styleVariables,\n\t\t\t\tref: (el) => {\n\t\t\t\t\tif (!el) return;\n\t\t\t\t\tel.onmousewheel = this.onFontSizeChange;\n\t\t\t\t},\n\t\t\t},\n\t\t\treact.createElement(\"div\", {\n\t\t\t\tclassName: \"lyrics-lyricsContainer-LyricsBackground\",\n\t\t\t}),\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"lyrics-config-button-container\",\n\t\t\t\t},\n\t\t\t\tshowTranslationButton &&\n\t\t\t\t\treact.createElement(TranslationMenu, {\n\t\t\t\t\t\tfriendlyLanguage,\n\t\t\t\t\t\thasTranslation: {\n\t\t\t\t\t\t\tmusixmatch: this.state.musixmatchTranslation !== null,\n\t\t\t\t\t\t\tnetease: this.state.neteaseTranslation !== null,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tmusixmatchLanguages: this.state.musixmatchAvailableTranslations || [],\n\t\t\t\t\t\tmusixmatchSelectedLanguage: this.state.musixmatchTranslationLanguage || CONFIG.visual[\"musixmatch-translation-language\"],\n\t\t\t\t\t}),\n\t\t\t\treact.createElement(AdjustmentsMenu, { mode, hasPerformer }),\n\t\t\t\treact.createElement(\n\t\t\t\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: this.state.isCached ? \"Lyrics cached\" : \"Cache lyrics\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclassName: \"lyrics-config-button\",\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tconst { synced, unsynced, karaoke, genius } = this.state;\n\t\t\t\t\t\t\t\tif (!synced && !unsynced && !karaoke && !genius) {\n\t\t\t\t\t\t\t\t\tSpicetify.showNotification(\"No lyrics to cache\", true);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tif (this.state.isCached) {\n\t\t\t\t\t\t\t\t\tthis.deleteLocalLyrics(this.currentTrackUri);\n\t\t\t\t\t\t\t\t\tSpicetify.showNotification(\"Delete lyrics cache\");\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.saveLocalLyrics(this.currentTrackUri, { synced, unsynced, karaoke, genius });\n\t\t\t\t\t\t\t\t\tSpicetify.showNotification(\"Lyrics cached\");\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\treact.createElement(\"svg\", {\n\t\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t\t\t\t__html: Spicetify.SVGIcons[this.state.isCached ? \"downloaded\" : \"download\"],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t),\n\t\t\t\treact.createElement(\n\t\t\t\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: \"Load lyrics from file\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclassName: \"lyrics-config-button\",\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tdocument.getElementById(\"lyrics-file-input\").click();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\treact.createElement(\"input\", {\n\t\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\t\tid: \"lyrics-file-input\",\n\t\t\t\t\t\t\taccept: \".lrc,.txt\",\n\t\t\t\t\t\t\tonChange: this.processLyricsFromFile.bind(this),\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\tdisplay: \"none\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t\treact.createElement(\"svg\", {\n\t\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t\t\t\t__html: Spicetify.SVGIcons[\"plus-alt\"],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\tactiveItem,\n\t\t\t!!document.querySelector(\".main-topBar-topbarContentWrapper\") &&\n\t\t\t\treact.createElement(TopBarContent, {\n\t\t\t\t\tlinks: this.availableModes,\n\t\t\t\t\tactiveLink: CONFIG.modes[mode],\n\t\t\t\t\tlockLink: CONFIG.modes[this.state.lockMode],\n\t\t\t\t\tswitchCallback: (label) => {\n\t\t\t\t\t\tconst mode = CONFIG.modes.findIndex((a) => a === label);\n\t\t\t\t\t\tif (mode !== this.state.mode) {\n\t\t\t\t\t\t\t// If explicitMode is not set, moving the topBar will apply the default mode value for the selected song.\n\t\t\t\t\t\t\tconst info = this.infoFromTrack(Spicetify.Player.data.item);\n\t\t\t\t\t\t\tif (info?.uri && CACHE[info?.uri]) {\n\t\t\t\t\t\t\t\tCACHE[info.uri].mode = mode;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tthis.setState({ explicitMode: mode });\n\t\t\t\t\t\t\tthis.state.provider !== \"local\" && this.fetchLyrics(Spicetify.Player.data.item, mode);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tlockCallback: (label) => {\n\t\t\t\t\t\tlet mode = CONFIG.modes.findIndex((a) => a === label);\n\t\t\t\t\t\tif (mode === this.state.lockMode) {\n\t\t\t\t\t\t\tmode = -1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.setState({ explicitMode: mode, lockMode: mode });\n\t\t\t\t\t\tthis.fetchLyrics(Spicetify.Player.data.item, mode);\n\t\t\t\t\t\tCONFIG.locked = mode;\n\t\t\t\t\t\tlocalStorage.setItem(\"lyrics-plus:lock-mode\", mode);\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t);\n\n\t\tif (this.state.isFullscreen) return Spicetify.ReactDOM.createPortal(out, this.fullscreenContainer);\n\t\tif (fadLyricsContainer) return Spicetify.ReactDOM.createPortal(out, fadLyricsContainer);\n\t\treturn out;\n\t}\n}\n" }, { "path": "CustomApps/lyrics-plus/manifest.json", "content": "{\n\t\"name\": {\n\t\t\"ms\": \"Lyrics\",\n\t\t\"gu\": \"Lyrics\",\n\t\t\"ko\": \"Lyrics\",\n\t\t\"pa-IN\": \"Lyrics\",\n\t\t\"az\": \"Lyrics\",\n\t\t\"ru\": \"Š¢ŠµŠŗст\",\n\t\t\"uk\": \"Lyrics\",\n\t\t\"nb\": \"Lyrics\",\n\t\t\"sv\": \"LĆ„ttext\",\n\t\t\"sw\": \"Lyrics\",\n\t\t\"ur\": \"Lyrics\",\n\t\t\"bho\": \"Lyrics\",\n\t\t\"pa-PK\": \"Lyrics\",\n\t\t\"te\": \"Lyrics\",\n\t\t\"ro\": \"Lyrics\",\n\t\t\"vi\": \"Lį»i bĆ i hĆ”t\",\n\t\t\"am\": \"Lyrics\",\n\t\t\"bn\": \"Lyrics\",\n\t\t\"en\": \"Lyrics\",\n\t\t\"id\": \"Lirik\",\n\t\t\"bg\": \"Lyrics\",\n\t\t\"da\": \"Lyrics\",\n\t\t\"es-419\": \"Letras\",\n\t\t\"mr\": \"Lyrics\",\n\t\t\"ml\": \"Lyrics\",\n\t\t\"th\": \"ą¹€ąø™ąø·ą¹‰ąø­ą¹€ąøžąø„ąø‡\",\n\t\t\"tr\": \"Şarkı Sƶzleri\",\n\t\t\"is\": \"Lyrics\",\n\t\t\"fa\": \"Lyrics\",\n\t\t\"or\": \"Lyrics\",\n\t\t\"he\": \"Lyrics\",\n\t\t\"hi\": \"Lyrics\",\n\t\t\"zh-TW\": \"ę­Œč©ž\",\n\t\t\"sr\": \"Lyrics\",\n\t\t\"pt-BR\": \"Letra\",\n\t\t\"zu\": \"Lyrics\",\n\t\t\"nl\": \"Songteksten\",\n\t\t\"es\": \"Letra\",\n\t\t\"lt\": \"Lyrics\",\n\t\t\"ja\": \"ę­Œč©ž\",\n\t\t\"st\": \"Lyrics\",\n\t\t\"it\": \"Lyrics\",\n\t\t\"el\": \"Ī£Ļ„ĪÆĻ‡ĪæĪ¹\",\n\t\t\"pt-PT\": \"Lyrics\",\n\t\t\"kn\": \"Lyrics\",\n\t\t\"de\": \"Songtext\",\n\t\t\"fr\": \"Paroles\",\n\t\t\"ne\": \"Lyrics\",\n\t\t\"ar\": \"Ų§Ł„ŁƒŁ„Ł…Ų§ŲŖ\",\n\t\t\"af\": \"Lyrics\",\n\t\t\"et\": \"Lyrics\",\n\t\t\"pl\": \"Tekst\",\n\t\t\"ta\": \"Lyrics\",\n\t\t\"sl\": \"Lyrics\",\n\t\t\"pk\": \"Lyrics\",\n\t\t\"hr\": \"Lyrics\",\n\t\t\"sk\": \"Lyrics\",\n\t\t\"fi\": \"Sanat\",\n\t\t\"lv\": \"Lyrics\",\n\t\t\"fil\": \"Lyrics\",\n\t\t\"fr-CA\": \"Paroles\",\n\t\t\"cs\": \"Text\",\n\t\t\"zh-CN\": \"ꭌčƍ\",\n\t\t\"hu\": \"Dalszƶveg\"\n\t},\n\t\"icon\": \"\",\n\t\"active-icon\": \"\",\n\t\"subfiles\": [\n\t\t\"ProviderNetease.js\",\n\t\t\"ProviderMusixmatch.js\",\n\t\t\"ProviderGenius.js\",\n\t\t\"ProviderLRCLIB.js\",\n\t\t\"Providers.js\",\n\t\t\"Pages.js\",\n\t\t\"OptionsMenu.js\",\n\t\t\"TabBar.js\",\n\t\t\"Utils.js\",\n\t\t\"Settings.js\",\n\t\t\"Translator.js\"\n\t],\n\t\"subfiles_extension\": [\"PlaybarButton.js\"]\n}\n" }, { "path": "CustomApps/lyrics-plus/style.css", "content": "/*!\n * Bootstrap v3.3.7 (http://getbootstrap.com)\n * Copyright 2011-2016 Twitter,\n Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n */\n/*!\n * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=35378cd201a131f69c68a64bc4438544)\n * Config saved to config.json and https://gist.github.com/35378cd201a131f69c68a64bc4438544\n */\n@media (min-width: 768px) {\n\t.container {\n\t\twidth: 750px;\n\t}\n}\n\n@media (min-width: 992px) {\n\t.container {\n\t\twidth: 970px;\n\t}\n}\n\n@media (min-width: 1200px) {\n\t.container {\n\t\twidth: 1170px;\n\t}\n}\n\n@media (min-width: 1500px) {\n\t.container {\n\t\twidth: 1450px;\n\t}\n}\n\n.row {\n\tmargin-left: -16px;\n\tmargin-right: -16px;\n}\n\n.container:after,\n.row:after {\n\tclear: both;\n}\n\n.hide {\n\tdisplay: none !important;\n}\n\n.show {\n\tdisplay: block !important;\n}\n\n.hidden {\n\tdisplay: none !important;\n}\n\n.lyrics-lyricsContainer-LyricsContainer {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr;\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n\ttop: 0;\n}\n\n.lyrics-lyricsContainer-Loading {\n\talign-self: center;\n\tgrid-area: 1 / 1 / -1 / -1;\n}\n\n.lyrics-lyricsContainer-LyricsUnavailablePage {\n\talign-items: center;\n\tcolor: var(--lyrics-color-inactive);\n\tdisplay: flex;\n\tgrid-area: 1 / 1 / -1 / -1;\n\theight: 100%;\n\tjustify-content: center;\n\tpadding: 20px;\n\tfont-size: 88px;\n\tletter-spacing: 0.1em;\n\tfont-weight: 700;\n}\n\n.lyrics-lyricsContainer-UnsyncedLyricsPage {\n\tgrid-area: 1 / 1 / -1 / -1;\n\tgrid-template-rows: 1fr 20px;\n\tuser-select: text;\n\ttext-align: var(--lyrics-align-text);\n}\n\n.lyrics-lyricsContainer-LyricsUnsyncedPadding {\n\tdisplay: flex;\n\t/* 2 padding blocks & 1 line height & Provider block */\n\theight: calc(50vh - 91px - 8px - var(--lyrics-font-size));\n}\n.lyrics-lyricsContainer-UnsyncedLyricsPage:has(.lyrics-versionSelector, .lyrics-lyricsContainer-LyricsLine:nth-child(4))\n\t.lyrics-lyricsContainer-LyricsUnsyncedPadding {\n\theight: 10vh;\n}\n\n.lyrics-lyricsContainer-SyncedLyricsPage {\n\tdisplay: grid;\n\tgrid-area: 1 / 1 / -1 / -1;\n\tgrid-template-rows: 1fr 30px;\n\toverflow: hidden;\n\ttext-align: var(--lyrics-align-text);\n\tuser-select: text;\n}\n\n.lyrics-lyricsContainer-LyricsBackground {\n\tbackground-color: var(--lyrics-color-background);\n\tbackground-image: var(--lyrics-background-noise);\n\tgrid-area: 1 / 1 / -1 / -1;\n\ttransition: background-color 0.25s ease-out;\n}\n\n.lyrics-lyricsContainer-Provider {\n\talign-self: end;\n\tcolor: var(--lyrics-color-inactive);\n\tgrid-area: 2 / 1 / -1 / -1;\n\tjustify-self: stretch;\n\theight: 25px;\n\toverflow: hidden;\n\tbackground: linear-gradient(0deg, var(--lyrics-color-background) 30%, transparent);\n\tz-index: 1;\n\tpadding: 60px 20px 30px;\n\tpointer-events: none;\n}\n\n.lyrics-lyricsContainer-SyncedLyrics {\n\t--lyrics-line-height: calc(4px + var(--lyrics-font-size));\n\tgrid-area: 1 / 1 / -2 / -1;\n\theight: 0;\n}\n\n.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {\n\ttransform: translateY(calc(var(--position-index) * var(--lyrics-line-height) + var(--offset)));\n\ttransform-origin: var(--lyrics-align-text);\n\ttransition-timing-function: cubic-bezier(0, 0, 0.58, 1);\n\ttransition-duration: calc(var(--animation-index) * var(--animation-tempo) + 0.1s);\n\ttransition-property: transform, color, opacity;\n}\n\n.lyrics-lyricsContainer-LyricsContainer.blur-enabled .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {\n\tfilter: blur(calc(var(--blur-index) * 1.5px));\n}\n\n.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine a {\n\tcolor: var(--lyrics-color-active);\n}\n\n.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine {\n\tcolor: var(--lyrics-color-inactive);\n\ttransition: color 0.25s cubic-bezier(0, 0, 0.58, 1);\n}\n\n.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine-active {\n\tcolor: var(--lyrics-color-active);\n}\n\n.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine:hover {\n\tcolor: var(--lyrics-color-active);\n}\n\n.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {\n\tcolor: var(--lyrics-color-inactive);\n}\n\n.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:hover {\n\tcolor: var(--lyrics-color-active);\n}\n\n.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active {\n\tcolor: var(--lyrics-color-active);\n\topacity: 1;\n\ttransform: translateY(calc(var(--position-index) * var(--lyrics-line-height) + var(--offset))) scale(1.1);\n\tfilter: none !important;\n}\n\n.lyrics-lyricsContainer-SyncedLyrics > .lyrics-lyricsContainer-LyricsLine-paddingLine {\n\topacity: 0;\n\tpointer-events: none;\n}\n\n.lyrics-lyricsContainer-LyricsLine,\n.lyrics-versionSelector {\n\tmargin-left: 100px;\n\tmargin-right: 100px;\n}\n\n@media (min-width: 1024px) {\n\t.lyrics-lyricsContainer-LyricsLine,\n\t.lyrics-versionSelector {\n\t\tmargin-left: 150px;\n\t\tmargin-right: 150px;\n\t}\n}\n\n@media (min-width: 1280px) {\n\t.lyrics-lyricsContainer-LyricsLine,\n\t.lyrics-versionSelector {\n\t\tmargin-left: 200px;\n\t\tmargin-right: 200px;\n\t}\n}\n\n.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine {\n\tfont-size: var(--lyrics-font-size);\n\tfont-weight: 700;\n\tletter-spacing: -0.04em;\n\tline-height: calc(12px + var(--lyrics-font-size));\n}\n\n.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {\n\tfont-size: var(--lyrics-font-size);\n\tfont-weight: 700;\n\tletter-spacing: -0.04em;\n\tline-height: var(--lyrics-line-height);\n}\n\n@media (min-width: 1280px) {\n\t.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {\n\t\tfont-weight: 900;\n\t}\n}\n\n.lyrics-tabBar-headerItem {\n\t-webkit-app-region: no-drag;\n\tdisplay: inline-block;\n\tpointer-events: auto;\n}\n\n.lyrics-tabBar-headerItemLink {\n\tmargin: 0 8px 0 0;\n}\n\n.lyrics-tabBar-active {\n\tbackground-color: var(--spice-tab-active);\n\tborder-radius: 4px;\n}\n\n.lyrics-tabBar-headerItemLink {\n\tborder-radius: 4px;\n\tcolor: var(--spice-text);\n\tdisplay: inline-block;\n\tmargin: 0 8px;\n\tpadding: 8px 16px;\n\tposition: relative;\n\ttext-decoration: none !important;\n\tcursor: pointer;\n}\n\n.lyrics-tabBar-headerItemLink .main-type-mestoBold {\n\ttext-transform: capitalize;\n}\n\n.lyrics-tabBar-headerItemLink-locked::before {\n\tcontent: \"ā€¢ \";\n}\n\n.lyrics-tabBar-nav {\n\t-webkit-app-region: drag;\n\tpointer-events: none;\n\twidth: 100%;\n}\n\n.lyrics-tabBar-header {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: nowrap;\n\talign-items: center;\n\tjustify-content: flex-start;\n}\n\n.lyrics-tabBar-headerItem .optionsMenu-dropBox {\n\tcolor: var(--spice-text);\n\tborder: 0;\n\tmax-width: 150px;\n\theight: 42px;\n\tpadding: 0 30px 0 12px;\n\tbackground-color: initial;\n\tcursor: pointer;\n\tappearance: none;\n}\n\n.lyrics-tabBar-headerItem .optionsMenu-dropBox svg {\n\tposition: absolute;\n\tmargin-left: 8px;\n}\n\n#lyrics-plus-config-container option {\n\tbackground-color: var(--spice-button);\n}\n\ndiv.lyrics-tabBar-headerItemLink {\n\tpadding: 0;\n}\n\n.lyrics-tabBar-header button.switch {\n\tmargin-inline-end: 12px;\n\tmargin-inline-start: 0;\n}\n\n.lyrics-lyricsContainer-Karaoke-WordActive {\n\tcolor: var(--lyrics-color-active) !important;\n\tbackground-position: top left !important;\n}\n\n.lyrics-lyricsContainer-LyricsLine:hover .lyrics-lyricsContainer-Karaoke-Word {\n\tbackground-position: top left;\n}\n\n.lyrics-lyricsContainer-Karaoke-Word {\n\tcolor: var(--lyrics-color-inactive);\n\tbackground-image: linear-gradient(\n\t\tto right,\n\t\tvar(--lyrics-color-active),\n\t\tvar(--lyrics-color-active) 45%,\n\t\tvar(--lyrics-color-inactive) 55%,\n\t\tvar(--lyrics-color-inactive)\n\t);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-size: 225% 100%;\n\tbackground-position: top left 100%;\n\ttransition-property: color, background-position;\n\ttransition-duration: calc(var(--word-duration) + 0.05s);\n\ttransition-timing-function: linear;\n}\n\n.lyrics-lyricsContainer-LyricsLine a {\n\tbackground-color: transparent;\n\ttransition: background-color 0.25s cubic-bezier(0, 0, 0, 1);\n}\n\n.lyrics-lyricsContainer-LyricsLine a.fetched {\n\tbackground-color: var(--lyrics-highlight-background);\n}\n\n.lyrics-lyricsContainer-LyricsLine a,\n.lyrics-lyricsContainer-LyricsLine a:hover {\n\ttext-decoration: none !important;\n}\n\n.lyrics-lyricsContainer-LyricsLine a:hover {\n\tborder-bottom: 2px solid var(--lyrics-color-active);\n}\n\n.lyrics-Genius-noteTextContainer {\n\tfont-size: 18px;\n\tfont-weight: 400;\n\tletter-spacing: normal;\n\tline-height: 24px;\n\ttext-transform: none;\n\n\tpadding: 25px;\n\tbackground-color: var(--lyrics-color-active);\n\tborder-radius: 3px;\n\tcolor: var(--lyrics-highlight-background);\n\tbox-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2);\n\tcursor: default;\n\ttext-align: left;\n}\n\n.lyrics-Genius-divider {\n\t/* border-bottom: 3px solid var(--lyrics-color-active); */\n\tline-height: 0;\n\tmargin-left: var(--link-left);\n}\n\n.lyrics-Searchbar {\n\tposition: sticky;\n\twidth: 300px;\n\theight: 40px;\n\tbottom: 10px;\n\tdisplay: flex;\n\tbackground-color: var(--lyrics-color-active) !important;\n\tcolor: var(--lyrics-highlight-background);\n\tmargin-left: 10px;\n\tborder-radius: 3px;\n\tbox-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2);\n}\n\n.lyrics-Searchbar input {\n\twidth: 300px;\n\theight: 40px;\n\tbottom: 10px;\n\tborder: 0;\n\tcolor: var(--lyrics-highlight-background) !important;\n\tpadding: 0 36px;\n}\n\n.lyrics-Searchbar svg {\n\tposition: absolute;\n\tleft: 0;\n\theight: 40px;\n\tmargin-left: 10px;\n}\n\n.lyrics-Searchbar span {\n\tposition: relative;\n\tright: 0;\n\tline-height: 40px;\n\tmargin-right: 10px;\n\tfont-weight: 400;\n\tfont-size: 16px;\n\tletter-spacing: 0.2em;\n}\n\n.lyrics-Searchbar-highlight {\n\tposition: fixed;\n\twidth: 100%;\n\theight: var(--search-highlight-height);\n\tleft: 0;\n\ttop: var(--search-highlight-top);\n\tbackground-color: var(--lyrics-highlight-background);\n\topacity: 0.5;\n\tpointer-events: none;\n}\n\n.lyrics-versionSelector {\n\tmax-width: 500px;\n\tborder-radius: 4px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tcursor: pointer;\n\tbox-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2);\n\tbackground-color: var(--lyrics-highlight-background);\n\tmargin-bottom: 75px;\n}\n\n.lyrics-versionSelector select {\n\tborder: 0;\n\tborder-radius: 4px;\n\tmax-width: 500px;\n\theight: 42px;\n\tpadding: 0 30px 0 12px;\n\tcursor: pointer;\n\tappearance: none;\n\tfont-size: 18px;\n\tbackground-color: var(--lyrics-color-active);\n\tcolor: var(--lyrics-highlight-background);\n}\n.lyrics-versionSelector option {\n\tbackground-color: var(--lyrics-color-active);\n}\n\n.lyrics-versionSelector svg {\n\tposition: absolute;\n\theight: 42px;\n\tright: 10px;\n\tpointer-events: none;\n\tfill: var(--lyrics-highlight-background);\n}\n\n/** Setting menu */\n.lyrics-tooltip-wrapper .setting-row::after,\n#lyrics-plus-config-container .setting-row::after {\n\tcontent: \"\";\n\tdisplay: table;\n\tclear: both;\n}\n.lyrics-tooltip-wrapper .setting-row .col,\n#lyrics-plus-config-container .setting-row .col {\n\tpadding: 16px 0 4px;\n\talign-items: center;\n}\n.lyrics-tooltip-wrapper .setting-row .col.description,\n#lyrics-plus-config-container .setting-row .col.description {\n\tfloat: left;\n\tpadding-right: 15px;\n\tcursor: default;\n}\n.lyrics-tooltip-wrapper .setting-row .col.action,\n#lyrics-plus-config-container .setting-row .col.action {\n\tfloat: right;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n}\n.lyrics-tooltip-wrapper button.switch,\n#lyrics-plus-config-container button.switch {\n\talign-items: center;\n\tborder: 0px;\n\tborder-radius: 50%;\n\tbackground-color: rgba(var(--spice-rgb-shadow), 0.7);\n\tcolor: var(--spice-text);\n\tcursor: pointer;\n\tmargin-inline-start: 12px;\n\tpadding: 8px;\n\twidth: 32px;\n\theight: 32px;\n}\n.lyrics-tooltip-wrapper button.switch.disabled,\n.lyrics-tooltip-wrapper button.switch[disabled],\n#lyrics-plus-config-container button.switch.disabled,\n#lyrics-plus-config-container button.switch[disabled] {\n\tcolor: rgba(var(--spice-rgb-text), 0.3);\n}\n.lyrics-tooltip-wrapper button.switch.small,\n#lyrics-plus-config-container button.switch.small {\n\twidth: 22px;\n\theight: 22px;\n\tpadding: 3px;\n}\n\n.lyrics-tooltip-wrapper input,\n#lyrics-plus-config-container input {\n\twidth: 100%;\n\tmargin-top: 10px;\n\tpadding: 0 5px;\n\theight: 32px;\n\tborder: 0;\n\tcolor: var(--spice-text);\n\tbackground-color: initial;\n\tborder-bottom: 1px solid var(--spice-text);\n}\n.lyrics-tooltip-wrapper .col.action .adjust-value,\n#lyrics-plus-config-container .col.action .adjust-value {\n\tmargin-inline-start: 12px;\n\tmin-width: 22px;\n\ttext-align: center;\n}\n\n.lyrics-tooltip-wrapper .col.action span,\n#lyrics-plus-config-container .col.action span {\n\tfont-size: 14px;\n\topacity: 0.8;\n}\n.lyrics-tooltip-wrapper .col.action .btn,\n#lyrics-plus-config-container .col.action .btn {\n\tfont-weight: 700;\n\tbackground-color: transparent;\n\tborder-radius: 500px;\n\ttransition-duration: 33ms;\n\ttransition-property: background-color, border-color, color, box-shadow, filter, transform;\n\tpadding-inline: 15px;\n\tborder: 1px solid #727272;\n\tcolor: var(--spice-text);\n\tmin-block-size: 32px;\n\tcursor: pointer;\n}\n\n.lyrics-tooltip-wrapper .col.action .btn:hover,\n#lyrics-plus-config-container .col.action .btn:hover {\n\ttransform: scale(1.04);\n\tborder-color: var(--spice-text);\n}\n\n.lyrics-tooltip-wrapper .col.action .btn:disabled,\n#lyrics-plus-config-container .col.action .btn:disabled {\n\topacity: 0.5;\n\tcursor: not-allowed;\n}\n.lyrics-tooltip-wrapper .col.action .main-dropDown-dropDown,\n.lyrics-tooltip-wrapper .col.action input,\n#lyrics-plus-config-container .col.action .main-dropDown-dropDown,\n#lyrics-plus-config-container .col.action input {\n\twidth: 150px;\n}\n\n#lyrics-fullscreen-container {\n\tposition: fixed;\n\twidth: 100vw;\n\theight: 100vh;\n\tcursor: default;\n\tleft: 0;\n\ttop: 0;\n}\n\n#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer {\n\theight: 100vh;\n\tmargin-bottom: 0;\n\tmargin-top: 0;\n\toverflow-y: auto;\n}\n\n#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar {\n\tbackground-color: var(--lyrics-color-background);\n}\n\n.lyrics-lyricsContainer-LyricsContainer.fad-enabled {\n\theight: 100vh;\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n\toverflow-y: scroll;\n}\n\n.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsLine {\n\tmargin-left: 100px;\n\tmargin-right: 100px;\n}\n\n.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsBackground,\n.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-Provider {\n\tdisplay: none;\n}\n\n.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-SyncedLyricsPage {\n\twidth: 100%;\n}\n\n.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-config-button-container {\n\topacity: 0;\n\ttransition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);\n}\n\n.lyrics-lyricsContainer-LyricsContainer.fad-enabled:hover .lyrics-config-button-container {\n\topacity: 1;\n}\n\n.lyrics-idling-indicator {\n\tdisplay: inline-block;\n\topacity: 1;\n\ttransition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);\n}\n\n.lyrics-idling-indicator-hidden {\n\topacity: 0;\n}\n\n.lyrics-idling-indicator__circle {\n\tbackground-color: var(--lyrics-color-active);\n\tborder-radius: 50%;\n\tdisplay: inline-block;\n\topacity: 0.5;\n\tmargin-right: calc(var(--lyrics-font-size) / 4);\n\n\ttransform-origin: center;\n\ttransition-timing-function: linear;\n\ttransition-duration: var(--indicator-delay);\n\ttransition-property: transform, opacity;\n\theight: var(--lyrics-font-size);\n\twidth: var(--lyrics-font-size);\n\ttransform: scale(0.5);\n}\n.lyrics-idling-indicator__circle.active {\n\topacity: 1;\n\ttransform: scale(0.7);\n}\n\n.lyrics-config-button-container {\n\t-webkit-margin-end: 32px;\n\t-webkit-box-pack: end;\n\tpointer-events: none;\n\tbottom: 32px;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tmargin: -52px 0 0;\n\tmargin-inline-end: 32px;\n\tposition: sticky;\n\tz-index: 2;\n}\n\n.lyrics-config-button-container > * {\n\tpointer-events: auto;\n}\n\n@-webkit-keyframes spin {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(360deg);\n\t}\n}\n\n.lyrics-config-button {\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tborder: 0;\n\tmargin: 5px;\n\tborder-radius: 4px;\n\tcolor: #eee;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8px;\n\tjustify-content: center;\n\tpadding: 12px;\n\theight: 40px;\n\twidth: 40px;\n}\n\n.lyrics-config-button-container .main-contextMenu-menu {\n\tcolor: var(--spice-text);\n\tpadding: 12px 12px 6px;\n}\n\n.lyrics-lyricsContainer-UnsyncedLyricsPage .split {\n\tdisplay: flex;\n}\n.lyrics-lyricsContainer-UnsyncedLyricsPage .split > div {\n\tflex: 50%;\n}\n.lyrics-lyricsContainer-UnsyncedLyricsPage .split > div > div:not(.lyrics-versionSelector) {\n\tmargin-left: 0;\n\tmargin-right: 0;\n}\n.split .lyrics-lyricsContainer-LyricsLine {\n\tpadding-left: 50px;\n\tpadding-right: 50px;\n}\n.split .lyrics-versionSelector {\n\tmargin-right: 50px;\n\tmargin-left: 50px;\n}\n.split .lyrics-versionSelector select {\n\twidth: 100%;\n}\n.main-content-view {\n\theight: 100%;\n}\n\n@media (min-width: 1024px) {\n\t.split .lyrics-lyricsContainer-LyricsLine {\n\t\tpadding-left: 75px;\n\t\tpadding-right: 75px;\n\t}\n\t.split .lyrics-versionSelector {\n\t\tmargin-right: 75px;\n\t\tmargin-left: 75px;\n\t}\n}\n\n@media (min-width: 1280px) {\n\t.split .lyrics-lyricsContainer-LyricsLine {\n\t\tpadding-left: 100px;\n\t\tpadding-right: 100px;\n\t}\n\t.split .lyrics-versionSelector {\n\t\tmargin-right: 100px;\n\t\tmargin-left: 100px;\n\t}\n}\n\n.lyrics-lyricsContainer-Performer {\n\tdisplay: block;\n\tfont-size: 0.6em;\n\topacity: 0.7;\n\tline-height: 1.2em;\n\t/* color: var(--lyrics-color-inactive); */\n}\n" }, { "path": "CustomApps/new-releases/Card.js", "content": "function DraggableComponent({ uri, title, children }) {\n\tconst dragHandler = Spicetify.ReactHook.DragHandler?.([uri], title);\n\treturn dragHandler\n\t\t? react.cloneElement(children, {\n\t\t\t\tonDragStart: dragHandler,\n\t\t\t\tdraggable: \"true\",\n\t\t\t})\n\t\t: children;\n}\n\nclass Card extends react.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tObject.assign(this, props);\n\t\tthis.href = URI.fromString(this.uri).toURLPath(true);\n\t\tthis.artistHref = URI.fromString(this.artist.uri).toURLPath(true);\n\t\tconst uriType = Spicetify.URI.fromString(this.uri)?.type;\n\t\tswitch (uriType) {\n\t\t\tcase Spicetify.URI.Type.ALBUM:\n\t\t\tcase Spicetify.URI.Type.TRACK:\n\t\t\t\tthis.menuType = Spicetify.ReactComponent.AlbumMenu;\n\t\t\t\tbreak;\n\t\t}\n\t\tthis.menuType = this.menuType || \"div\";\n\t}\n\n\tplay(event) {\n\t\tSpicetify.Player.playUri(this.uri, this.context);\n\t\tevent.stopPropagation();\n\t}\n\n\tcloseButtonClicked(event) {\n\t\tevent.stopPropagation();\n\n\t\tremoveCards(this.props.uri);\n\n\t\tSpicetify.Snackbar.enqueueCustomSnackbar\n\t\t\t? Spicetify.Snackbar.enqueueCustomSnackbar(\"dismissed-release\", {\n\t\t\t\t\tkeyPrefix: \"dismissed-release\",\n\t\t\t\t\tchildren: Spicetify.ReactComponent.Snackbar.wrapper({\n\t\t\t\t\t\tchildren: Spicetify.ReactComponent.Snackbar.simpleLayout({\n\t\t\t\t\t\t\tleading: Spicetify.ReactComponent.Snackbar.styledImage({\n\t\t\t\t\t\t\t\tsrc: this.props.imageURL,\n\t\t\t\t\t\t\t\timageHeight: \"24px\",\n\t\t\t\t\t\t\t\timageWidth: \"24px\",\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tcenter: Spicetify.React.createElement(\"div\", {\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t\t\t\t\t__html: `Dismissed ${this.title}.`,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\ttrailing: Spicetify.ReactComponent.Snackbar.ctaText({\n\t\t\t\t\t\t\t\tctaText: \"Undo\",\n\t\t\t\t\t\t\t\tonCtaClick: () => removeCards(this.props.uri, \"undo\"),\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t}),\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t: Spicetify.showNotification(`Dismissed ${this.title} from
${this.artist.name}`);\n\t}\n\n\trender() {\n\t\tconst detail = [];\n\t\tthis.visual.type && detail.push(this.type);\n\t\tif (this.visual.count && this.trackCount) {\n\t\t\tdetail.push(Spicetify.Locale.get(\"tracklist-header.songs-counter\", this.trackCount));\n\t\t}\n\n\t\treturn react.createElement(\n\t\t\tSpicetify.ReactComponent.RightClickMenu || \"div\",\n\t\t\t{\n\t\t\t\tmenu: react.createElement(this.menuType, { uri: this.uri }),\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"main-card-card\",\n\t\t\t\t\tonClick: (event) => {\n\t\t\t\t\t\tHistory.push(this.href);\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\tDraggableComponent,\n\t\t\t\t\t{\n\t\t\t\t\t\turi: this.uri,\n\t\t\t\t\t\ttitle: this.title,\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclassName: \"main-card-draggable\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: \"main-card-imageContainer\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tclassName: \"main-cardImage-imageWrapper\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t\t{},\n\t\t\t\t\t\t\t\t\treact.createElement(\"img\", {\n\t\t\t\t\t\t\t\t\t\t\"aria-hidden\": \"false\",\n\t\t\t\t\t\t\t\t\t\tdraggable: \"false\",\n\t\t\t\t\t\t\t\t\t\tloading: \"lazy\",\n\t\t\t\t\t\t\t\t\t\tsrc: this.imageURL,\n\t\t\t\t\t\t\t\t\t\tclassName: \"main-image-image main-cardImage-image\",\n\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tclassName: \"main-card-PlayButtonContainer\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tclassName: \"main-playButton-PlayButton main-playButton-primary\",\n\t\t\t\t\t\t\t\t\t\t\"aria-label\": Spicetify.Locale.get(\"play\"),\n\t\t\t\t\t\t\t\t\t\tstyle: { \"--size\": \"40px\" },\n\t\t\t\t\t\t\t\t\t\tonClick: this.play.bind(this),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\t\t\"span\",\n\t\t\t\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\"svg\",\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\theight: \"24\",\n\t\t\t\t\t\t\t\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: \"24\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tviewBox: \"0 0 24 24\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-hidden\": \"true\",\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\treact.createElement(\"polygon\", {\n\t\t\t\t\t\t\t\t\t\t\t\t\tpoints: \"21.57 12 5.98 3 5.98 21 21.57 12\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t\t\t\t\t\t\t{ label: \"Dismiss\" },\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tclassName: \"main-card-closeButton\",\n\t\t\t\t\t\t\t\t\t\tonClick: this.closeButtonClicked.bind(this),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\t\"svg\",\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\twidth: \"16\",\n\t\t\t\t\t\t\t\t\t\t\theight: \"16\",\n\t\t\t\t\t\t\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t\t\t\t\t\t\t\txmlns: \"http://www.w3.org/2000/svg\",\n\t\t\t\t\t\t\t\t\t\t\tclassName: \"main-card-closeButton-svg\",\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\treact.createElement(\"path\", {\n\t\t\t\t\t\t\t\t\t\t\td: \"M2.47 2.47a.75.75 0 0 1 1.06 0L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47a.75.75 0 1 1-1.06 1.06L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1 0-1.06Z\",\n\t\t\t\t\t\t\t\t\t\t\tfill: \"var(--spice-text)\",\n\t\t\t\t\t\t\t\t\t\t\tfillRule: \"evenodd\",\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t),\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: \"main-card-cardMetadata\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"a\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tdraggable: \"false\",\n\t\t\t\t\t\t\t\t\ttitle: this.title,\n\t\t\t\t\t\t\t\t\tclassName: \"main-cardHeader-link\",\n\t\t\t\t\t\t\t\t\tdir: \"auto\",\n\t\t\t\t\t\t\t\t\thref: this.href,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tclassName: \"main-cardHeader-text main-type-balladBold\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tthis.title\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tdetail.length > 0 &&\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tclassName: \"main-cardSubHeader-root main-type-mestoBold new-releases-cardSubHeader\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\treact.createElement(\"span\", null, detail.join(\" ā€¢ \"))\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\tDraggableComponent,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\turi: this.artist.uri,\n\t\t\t\t\t\t\t\t\ttitle: this.artist.name,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"a\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tclassName: \"main-cardSubHeader-root main-type-mesto new-releases-cardSubHeader\",\n\t\t\t\t\t\t\t\t\t\thref: this.artistHref,\n\t\t\t\t\t\t\t\t\t\tonClick: (event) => {\n\t\t\t\t\t\t\t\t\t\t\tHistory.push(this.artistHref);\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\treact.createElement(\"span\", null, this.artist.name)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t),\n\t\t\t\t\t\treact.createElement(\"div\", {\n\t\t\t\t\t\t\tclassName: \"main-card-cardLink\",\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t}\n}\n" }, { "path": "CustomApps/new-releases/Icons.js", "content": "const LoadingIcon = react.createElement(\n\t\"svg\",\n\t{\n\t\twidth: \"100px\",\n\t\theight: \"100px\",\n\t\tviewBox: \"0 0 100 100\",\n\t\tpreserveAspectRatio: \"xMidYMid\",\n\t},\n\treact.createElement(\n\t\t\"circle\",\n\t\t{\n\t\t\tcx: \"50\",\n\t\t\tcy: \"50\",\n\t\t\tr: \"0\",\n\t\t\tfill: \"none\",\n\t\t\tstroke: \"currentColor\",\n\t\t\t\"stroke-width\": \"2\",\n\t\t},\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"r\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"0;40\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0 0.2 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"0s\",\n\t\t}),\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"opacity\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"1;0\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0.2 0 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"0s\",\n\t\t})\n\t),\n\treact.createElement(\n\t\t\"circle\",\n\t\t{\n\t\t\tcx: \"50\",\n\t\t\tcy: \"50\",\n\t\t\tr: \"0\",\n\t\t\tfill: \"none\",\n\t\t\tstroke: \"currentColor\",\n\t\t\t\"stroke-width\": \"2\",\n\t\t},\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"r\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"0;40\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0 0.2 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"-0.5s\",\n\t\t}),\n\t\treact.createElement(\"animate\", {\n\t\t\tattributeName: \"opacity\",\n\t\t\trepeatCount: \"indefinite\",\n\t\t\tdur: \"1s\",\n\t\t\tvalues: \"1;0\",\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tkeySplines: \"0.2 0 0.8 1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tbegin: \"-0.5s\",\n\t\t})\n\t)\n);\n\nclass LoadMoreIcon extends react.Component {\n\trender() {\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tonClick: this.props.onClick,\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"p\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tfontSize: 100,\n\t\t\t\t\t\tlineHeight: \"65px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t\"Ā»\"\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tfontSize: 20,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t\"Load more\"\n\t\t\t)\n\t\t);\n\t}\n}\n" }, { "path": "CustomApps/new-releases/Settings.js", "content": "const ButtonSVG = ({ icon, active = true, onClick }) => {\n\treturn react.createElement(\n\t\t\"button\",\n\t\t{\n\t\t\tclassName: `switch${active ? \"\" : \" disabled\"}`,\n\t\t\tonClick,\n\t\t},\n\t\treact.createElement(\"svg\", {\n\t\t\twidth: 16,\n\t\t\theight: 16,\n\t\t\tviewBox: \"0 0 16 16\",\n\t\t\tfill: \"currentColor\",\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: icon,\n\t\t\t},\n\t\t})\n\t);\n};\n\nconst ButtonText = ({ text, active = true, onClick }) => {\n\treturn react.createElement(\n\t\t\"button\",\n\t\t{\n\t\t\tclassName: `text${active ? \"\" : \" disabled\"}`,\n\t\t\tonClick,\n\t\t},\n\t\ttext\n\t);\n};\n\nconst ConfigSlider = ({ name, defaultValue, onChange = () => {} }) => {\n\tconst [active, setActive] = useState(defaultValue);\n\n\tconst toggleState = useCallback(() => {\n\t\tconst state = !active;\n\t\tsetActive(state);\n\t\tonChange(state);\n\t}, [active]);\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(ButtonSVG, {\n\t\t\t\ticon: Spicetify.SVGIcons.check,\n\t\t\t\tactive,\n\t\t\t\tonClick: toggleState,\n\t\t\t})\n\t\t)\n\t);\n};\n\nconst ConfigSelection = ({ name, defaultValue, options, onChange = () => {} }) => {\n\tconst [value, setValue] = useState(defaultValue);\n\n\tconst setValueCallback = useCallback(\n\t\t(event) => {\n\t\t\tconst value = event.target.value;\n\t\t\tsetValue(value);\n\t\t\tonChange(value);\n\t\t},\n\t\t[value]\n\t);\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"select\",\n\t\t\t\t{\n\t\t\t\t\tvalue,\n\t\t\t\t\tonChange: setValueCallback,\n\t\t\t\t},\n\t\t\t\tObject.keys(options).map((item) =>\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"option\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvalue: item,\n\t\t\t\t\t\t},\n\t\t\t\t\t\toptions[item]\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n};\n\nconst ConfigInput = ({ name, defaultValue, onChange = () => {} }) => {\n\tconst [value, setValue] = useState(defaultValue);\n\n\tconst setValueCallback = useCallback(\n\t\t(event) => {\n\t\t\tconst value = event.target.value;\n\t\t\tsetValue(value);\n\t\t\tonChange(value);\n\t\t},\n\t\t[value]\n\t);\n\n\treturn react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tclassName: \"setting-row\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"label\",\n\t\t\t{\n\t\t\t\tclassName: \"col description\",\n\t\t\t},\n\t\t\tname\n\t\t),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"col action\",\n\t\t\t},\n\t\t\treact.createElement(\"input\", {\n\t\t\t\tvalue,\n\t\t\t\tonChange: setValueCallback,\n\t\t\t})\n\t\t)\n\t);\n};\n\nconst OptionList = ({ items, onChange }) => {\n\tconst [_, setItems] = useState(items);\n\treturn items.map((item) => {\n\t\tif (!item.when()) {\n\t\t\treturn;\n\t\t}\n\t\treturn react.createElement(item.type, {\n\t\t\tname: item.desc,\n\t\t\tdefaultValue: item.defaultValue,\n\t\t\toptions: item.options,\n\t\t\tonChange: (value) => {\n\t\t\t\tonChange(item.key, value);\n\t\t\t\tsetItems([...items]);\n\t\t\t},\n\t\t});\n\t});\n};\n\nfunction openConfig() {\n\tconst configContainer = react.createElement(\n\t\t\"div\",\n\t\t{\n\t\t\tid: `${APP_NAME}-config-container`,\n\t\t},\n\t\treact.createElement(OptionList, {\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Time range\",\n\t\t\t\t\tkey: \"range\",\n\t\t\t\t\tdefaultValue: CONFIG.range,\n\t\t\t\t\ttype: ConfigSelection,\n\t\t\t\t\toptions: {\n\t\t\t\t\t\t30: \"30 days\",\n\t\t\t\t\t\t60: \"60 days\",\n\t\t\t\t\t\t90: \"90 days\",\n\t\t\t\t\t\t120: \"120 days\",\n\t\t\t\t\t},\n\t\t\t\t\twhen: () => true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Date locale\",\n\t\t\t\t\tkey: \"locale\",\n\t\t\t\t\tdefaultValue: CONFIG.locale,\n\t\t\t\t\ttype: ConfigInput,\n\t\t\t\t\twhen: () => true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Relative date\",\n\t\t\t\t\tkey: \"relative\",\n\t\t\t\t\tdefaultValue: CONFIG.relative,\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Show type\",\n\t\t\t\t\tkey: \"visual:type\",\n\t\t\t\t\tdefaultValue: CONFIG.visual.type,\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Show track count\",\n\t\t\t\t\tkey: \"visual:count\",\n\t\t\t\t\tdefaultValue: CONFIG.visual.count,\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Fetch new podcast\",\n\t\t\t\t\tkey: \"podcast\",\n\t\t\t\t\tdefaultValue: CONFIG.podcast,\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: \"Fetch new music\",\n\t\t\t\t\tkey: \"music\",\n\t\t\t\t\tdefaultValue: CONFIG.music,\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: Spicetify.Locale.get(\"artist.albums\"),\n\t\t\t\t\tkey: \"album\",\n\t\t\t\t\tdefaultValue: CONFIG.album,\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => CONFIG.music,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tdesc: Spicetify.Locale.get(\"artist.singles\"),\n\t\t\t\t\tkey: \"single-ep\",\n\t\t\t\t\tdefaultValue: CONFIG[\"single-ep\"],\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => CONFIG.music,\n\t\t\t\t},\n\t\t\t\t/* {\n\t\t\t\t\tdesc: Spicetify.Locale.get(\"artist.appears-on\"),\n\t\t\t\t\tkey: \"appears-on\",\n\t\t\t\t\tdefaultValue: CONFIG[\"appears-on\"],\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => CONFIG[\"music\"]\n\t\t\t\t}, */\n\t\t\t\t{\n\t\t\t\t\tdesc: Spicetify.Locale.get(\"artist.compilations\"),\n\t\t\t\t\tkey: \"compilations\",\n\t\t\t\t\tdefaultValue: CONFIG.compilations,\n\t\t\t\t\ttype: ConfigSlider,\n\t\t\t\t\twhen: () => CONFIG.music,\n\t\t\t\t},\n\t\t\t],\n\t\t\tonChange: (name, value) => {\n\t\t\t\tconst subs = name.split(\":\");\n\t\t\t\tif (subs.length > 1) {\n\t\t\t\t\tCONFIG[subs[0]][subs[1]] = value;\n\t\t\t\t\tgridUpdatePostsVisual();\n\t\t\t\t} else {\n\t\t\t\t\tCONFIG[name] = value;\n\t\t\t\t}\n\t\t\t\tlocalStorage.setItem(`${APP_NAME}:${name}`, value);\n\t\t\t},\n\t\t}),\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"setting-row\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"label\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"col description\",\n\t\t\t\t},\n\t\t\t\t\"Dismissed releases\"\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"col action\",\n\t\t\t\t},\n\t\t\t\treact.createElement(ButtonText, {\n\t\t\t\t\ttext: Spicetify.Locale.get(\"equalizer.reset\"),\n\t\t\t\t\tonClick: removeCards.bind(this, null, \"reset\"),\n\t\t\t\t})\n\t\t\t)\n\t\t)\n\t);\n\n\tSpicetify.PopupModal.display({\n\t\ttitle: Spicetify.Locale.get(\"new_releases\"),\n\t\tcontent: configContainer,\n\t});\n}\n" }, { "path": "CustomApps/new-releases/index.js", "content": "// Run \"npm i @types/react\" to have this type package available in workspace\n/// \n\n/** @type {React} */\nconst {\n\tURI,\n\tReact: react,\n\tReact: { useState, useEffect, useCallback },\n\tReactDOM: reactDOM,\n\tPlatform: { History },\n\tCosmosAsync,\n} = Spicetify;\n\n// Define a function called \"render\" to specify app entry point\n// This function will be used to mount app to main view.\nfunction render() {\n\treturn react.createElement(Grid);\n}\n\nfunction getConfig(name, defaultVal = true) {\n\tconst value = localStorage.getItem(name);\n\treturn value ? value === \"true\" : defaultVal;\n}\n\nconst APP_NAME = \"new-releases\";\n\nconst CONFIG = {\n\tvisual: {\n\t\ttype: getConfig(\"new-releases:visual:type\", true),\n\t\tcount: getConfig(\"new-releases:visual:count\", true),\n\t},\n\tpodcast: getConfig(\"new-releases:podcast\", false),\n\tmusic: getConfig(\"new-releases:music\", true),\n\talbum: getConfig(\"new-releases:album\", true),\n\t\"single-ep\": getConfig(\"new-releases:single-ep\", true),\n\t// [\"appears-on\"]: getConfig(\"new-releases:appears-on\", false),\n\tcompilations: getConfig(\"new-releases:compilations\", false),\n\trange: localStorage.getItem(\"new-releases:range\") || \"30\",\n\tlocale: localStorage.getItem(\"new-releases:locale\") || navigator.language,\n\trelative: getConfig(\"new-releases:relative\", false),\n};\n\nlet dismissed;\ntry {\n\tdismissed = JSON.parse(Spicetify.LocalStorage.get(\"new-releases:dismissed\"));\n\tif (!Array.isArray(dismissed)) throw \"\";\n} catch {\n\tdismissed = [];\n}\n\nlet gridList = [];\nlet lastScroll = 0;\n\nlet gridUpdatePostsVisual;\nlet removeCards;\n\nlet today = Date.now();\nCONFIG.range = Number.parseInt(CONFIG.range) || 30;\nconst DAY_DIVIDER = 24 * 3600 * 1000;\nlet limitInMs = CONFIG.range * DAY_DIVIDER;\nconst dateFormat = {\n\tyear: \"numeric\",\n\tmonth: \"short\",\n\tday: \"2-digit\",\n};\nconst relativeDateFormat = {\n\tnumeric: \"auto\",\n};\nlet separatedByDate = {};\nlet dateList = [];\n\nclass Grid extends react.Component {\n\tviewportSelector = document.querySelector(\"#main .os-viewport\") ? \"#main .os-viewport\" : \"#main .main-view-container__scroll-node\";\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.state = {\n\t\t\tcards: [],\n\t\t\trest: true,\n\t\t};\n\t}\n\n\tupdatePostsVisual() {\n\t\tgridList = [];\n\t\tfor (const date of dateList) {\n\t\t\tif (separatedByDate[date].every((card) => dismissed.includes(card.props.uri))) continue;\n\n\t\t\tgridList.push(\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"new-releases-header\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\"h2\", null, date)\n\t\t\t\t),\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"main-gridContainer-gridContainer \",\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\"--min-container-width\": \"180px\",\n\t\t\t\t\t\t\t\"--column-count\": \"auto-fill\",\n\t\t\t\t\t\t\t\"--grid-gap\": \"18px\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\tseparatedByDate[date]\n\t\t\t\t\t\t.filter((card) => !dismissed.includes(card.props.uri))\n\t\t\t\t\t\t.map((card) => react.createElement(Card, { ...card.props, key: card.props.uri }))\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t\tthis.setState({ cards: [...gridList] });\n\t}\n\n\tremoveCards(id, type) {\n\t\tswitch (type) {\n\t\t\tcase \"reset\":\n\t\t\t\tSpicetify.showNotification(\"Reset dismissed releases\");\n\t\t\t\tdismissed = [];\n\t\t\t\tbreak;\n\t\t\tcase \"undo\":\n\t\t\t\tif (!dismissed[0]) Spicetify.showNotification(\"Nothing to undo\", true);\n\t\t\t\telse Spicetify.showNotification(\"Undone dismissal\");\n\t\t\t\tdismissed = id ? dismissed.filter((item) => item !== id) : dismissed.slice(0, -1);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tdismissed.push(id);\n\t\t\t\tbreak;\n\t\t}\n\t\tSpicetify.LocalStorage.set(\"new-releases:dismissed\", JSON.stringify(dismissed));\n\t\tthis.updatePostsVisual();\n\t}\n\n\tasync reload() {\n\t\tgridList = [];\n\t\tseparatedByDate = {};\n\t\tdateList = [];\n\n\t\ttoday = Date.now();\n\t\tCONFIG.range = Number.parseInt(CONFIG.range) || 30;\n\t\tlimitInMs = CONFIG.range * DAY_DIVIDER;\n\n\t\tthis.setState({ rest: false });\n\t\tlet items = [];\n\t\tif (CONFIG.music) {\n\t\t\tconst tracks = await fetchTracks();\n\t\t\titems.push(...tracks.flat());\n\t\t}\n\t\tif (CONFIG.podcast) {\n\t\t\tconst episodes = await fetchPodcasts();\n\t\t\titems.push(...episodes);\n\t\t}\n\n\t\titems = items.filter(Boolean).sort((a, b) => b.time - a.time);\n\n\t\tlet timeFormat;\n\t\tif (CONFIG.relative) {\n\t\t\ttimeFormat = new Intl.RelativeTimeFormat(CONFIG.locale, relativeDateFormat);\n\t\t} else {\n\t\t\ttimeFormat = new Intl.DateTimeFormat(CONFIG.locale, dateFormat);\n\t\t}\n\n\t\tfor (const track of items) {\n\t\t\ttrack.visual = CONFIG.visual;\n\t\t\tlet dateStr;\n\t\t\tif (CONFIG.relative) {\n\t\t\t\tconst days = Math.ceil((track.time - today) / DAY_DIVIDER);\n\t\t\t\tdateStr = timeFormat.format(days, \"day\");\n\t\t\t} else {\n\t\t\t\tdateStr = timeFormat.format(track.time);\n\t\t\t}\n\t\t\tif (!separatedByDate[dateStr]) {\n\t\t\t\tdateList.push(dateStr);\n\t\t\t\tseparatedByDate[dateStr] = [];\n\t\t\t}\n\t\t\tseparatedByDate[dateStr].push(react.createElement(Card, { ...track, key: track.uri }));\n\t\t}\n\n\t\tfor (const date of dateList) {\n\t\t\tif (separatedByDate[date].every((card) => dismissed.includes(card.props.uri))) continue;\n\n\t\t\tgridList.push(\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"new-releases-header\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\"h2\", null, date)\n\t\t\t\t),\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"main-gridContainer-gridContainer\",\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\"--min-container-width\": \"180px\",\n\t\t\t\t\t\t\t\"--column-count\": \"auto-fill\",\n\t\t\t\t\t\t\t\"--grid-gap\": \"18px\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\tseparatedByDate[date].filter((card) => !dismissed.includes(card.props.uri))\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\tthis.setState({ rest: true });\n\t}\n\n\tasync componentDidMount() {\n\t\tgridUpdatePostsVisual = this.updatePostsVisual.bind(this);\n\t\tremoveCards = this.removeCards.bind(this);\n\n\t\tthis.configButton = new Spicetify.Menu.Item(\n\t\t\t\"New Releases config\",\n\t\t\tfalse,\n\t\t\topenConfig,\n\t\t\t''\n\t\t);\n\t\tthis.configButton.register();\n\n\t\tconst viewPort = document.querySelector(this.viewportSelector);\n\n\t\tif (gridList.length) {\n\t\t\t// Already loaded\n\t\t\tif (lastScroll > 0) {\n\t\t\t\tviewPort.scrollTo(0, lastScroll);\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tthis.reload();\n\t}\n\n\tcomponentWillUnmount() {\n\t\tconst viewPort = document.querySelector(this.viewportSelector);\n\t\tlastScroll = viewPort.scrollTop;\n\t\tthis.configButton.deregister();\n\t}\n\n\trender() {\n\t\tconst expFeatures = JSON.parse(localStorage.getItem(\"spicetify-exp-features\") || \"{}\");\n\t\tconst isGlobalNav = expFeatures?.enableGlobalNavBar?.value !== \"control\";\n\t\tconst version = Spicetify.Platform.version.split(\".\").map((i) => Number.parseInt(i));\n\n\t\tconst tabBarMargin = {\n\t\t\tmarginTop: isGlobalNav || (version[0] === 1 && version[1] === 2 && version[2] >= 45) ? \"60px\" : \"0px\",\n\t\t};\n\t\treturn react.createElement(\n\t\t\t\"section\",\n\t\t\t{\n\t\t\t\tclassName: \"contentSpacing\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"new-releases-header\",\n\t\t\t\t\tstyle: tabBarMargin,\n\t\t\t\t},\n\t\t\t\treact.createElement(\"h1\", null, Spicetify.Locale.get(\"new_releases\")),\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"new-releases-controls-container\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(ButtonText, {\n\t\t\t\t\t\ttext: Spicetify.Locale.get(\"playlist.extender.refresh\"),\n\t\t\t\t\t\tonClick: this.reload.bind(this),\n\t\t\t\t\t}),\n\t\t\t\t\treact.createElement(ButtonText, {\n\t\t\t\t\t\ttext: \"undo\", // no locale for this\n\t\t\t\t\t\tonClick: this.removeCards.bind(this, null, \"undo\"),\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t),\n\t\t\tthis.state.rest ? gridList : LoadingIcon\n\t\t);\n\t}\n}\n\nasync function getArtistList() {\n\tconst config = {\n\t\tfilters: [\"1\"],\n\t\tsortOrder: [\"0\"],\n\t\ttextFilter: \"\",\n\t\toffset: 0,\n\t\tlimit: 50000,\n\t};\n\tconst artists = await Spicetify.Platform.LibraryAPI.getContents(config);\n\tcount(true);\n\treturn artists.items ?? [];\n}\n\nasync function getArtistEverything(artist) {\n\tconst { data, errors } = await Spicetify.GraphQL.Request(\n\t\t{\n\t\t\tname: \"queryArtistDiscographyAll\",\n\t\t\toperation: \"query\",\n\t\t\tsha256Hash: \"9380995a9d4663cbcb5113fef3c6aabf70ae6d407ba61793fd01e2a1dd6929b0\",\n\t\t\tvalue: null,\n\t\t},\n\t\t{\n\t\t\turi: artist.uri,\n\t\t\toffset: 0,\n\t\t\t// Limit 100 since GraphQL has resource limit\n\t\t\tlimit: 100,\n\t\t}\n\t);\n\tif (errors) throw errors;\n\n\tconst releases = data?.artistUnion.discography.all.items.flatMap((r) => r.releases.items);\n\tconst items = [];\n\tconst types = [\n\t\t[CONFIG.album, releases.filter((r) => r.type === \"ALBUM\"), Spicetify.Locale.get(\"album\")],\n\t\t// Appears on has a separate GraphQL query but does not provide enough information (release date), which requires recursively making requests for each album\n\t\t// [CONFIG[\"appears-on\"], releases.appears_on?.releases, Spicetify.Locale.get(\"artist.appears-on\")],\n\t\t[CONFIG.compilations, releases.filter((r) => r.type === \"COMPILATION\"), Spicetify.Locale.get(\"compilation\")],\n\t\t[\n\t\t\tCONFIG[\"single-ep\"],\n\t\t\treleases.filter((r) => r.type === \"SINGLE\" || r.type === \"EP\"),\n\t\t\t`${Spicetify.Locale.get(\"single\")}/${Spicetify.Locale.get(\"ep\")}`,\n\t\t],\n\t];\n\tfor (const type of types) {\n\t\tif (type[0] && type[1]) {\n\t\t\tfor (const item of type[1]) {\n\t\t\t\tconst meta = metaFromTrack(artist, item);\n\t\t\t\tif (!meta) continue;\n\t\t\t\tmeta.type = type[2];\n\t\t\t\titems.push(meta);\n\t\t\t}\n\t\t}\n\t}\n\treturn items;\n}\n\nasync function getPodcastList() {\n\tconst body = await Spicetify.Platform.LibraryAPI.getShows({ limit: 50000 });\n\treturn body.items ?? [];\n}\n\nasync function getPodcastRelease(uri) {\n\tconst body = await Spicetify.Platform.ShowAPI.getContents(uri, { limit: 50000 });\n\treturn body.items;\n}\n\nfunction metaFromTrack(artist, track) {\n\tconst time = Date.parse(track.date.isoString);\n\tif (today - time < limitInMs) {\n\t\treturn {\n\t\t\turi: track.uri,\n\t\t\ttitle: track.name,\n\t\t\tartist: {\n\t\t\t\tname: artist.name,\n\t\t\t\turi: artist.uri,\n\t\t\t},\n\t\t\timageURL: track.coverArt.sources.reduce((prev, curr) => (prev.width > curr.width ? prev : curr)).url,\n\t\t\ttime,\n\t\t\ttrackCount: track.tracks.totalCount,\n\t\t};\n\t}\n\treturn null;\n}\n\nconst count = (() => {\n\tlet counter = 0;\n\treturn (reset = false) => {\n\t\tif (reset) counter = 0;\n\t\telse counter++;\n\t};\n})();\n\nasync function fetchTracks() {\n\tconst artistList = await getArtistList();\n\tSpicetify.showNotification(`Fetching releases from ${artistList.length} artists`);\n\n\tconst requests = artistList.map(async (obj) => {\n\t\treturn await getArtistEverything(obj).catch((err) => {\n\t\t\tconsole.debug(\"Could not fetch all releases\", err);\n\t\t\tconsole.debug(`Missing releases from ${count()} artists`);\n\t\t});\n\t});\n\n\treturn await Promise.all(requests);\n}\n\nasync function fetchPodcasts() {\n\tconst items = [];\n\tconst itemTypeStr = Spicetify.Locale.get(\"card.tag.episode\");\n\tfor (const podcast of await getPodcastList()) {\n\t\tconst tracks = await getPodcastRelease(podcast.uri);\n\t\tif (!tracks) continue;\n\n\t\tfor (const track of tracks) {\n\t\t\tconst time = new Date(track.releaseDate.isoString);\n\n\t\t\tif (today - time.getTime() > limitInMs) {\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\titems.push({\n\t\t\t\turi: track.uri,\n\t\t\t\ttitle: track.name,\n\t\t\t\tartist: {\n\t\t\t\t\tname: podcast.name,\n\t\t\t\t\turi: podcast.uri,\n\t\t\t\t},\n\t\t\t\timageURL: track.coverArt.reduce((prev, curr) => (prev.width > curr.width ? prev : curr)).url,\n\t\t\t\ttime,\n\t\t\t\ttype: itemTypeStr,\n\t\t\t});\n\t\t}\n\t}\n\n\treturn items;\n}\n" }, { "path": "CustomApps/new-releases/manifest.json", "content": "{\n\t\"name\": {\n\t\t\"ms\": \"Keluaran Baharu\",\n\t\t\"gu\": \"ąŖØąŖµąŖ¾ ąŖ°ąŖæąŖ²ą«€ąŖ\",\n\t\t\"ko\": \"ģµœģ‹  ģŒģ•…\",\n\t\t\"pa-IN\": \"ąØØąØµą©‡ąØ‚ ąØ°ąØæąØ²ą©€ą©›\",\n\t\t\"az\": \"Yeni buraxılışlar\",\n\t\t\"ru\": \"ŠŠ¾Š²Ń‹Šµ рŠµŠ»ŠøŠ·Ń‹\",\n\t\t\"uk\": \"ŠŠ¾Š²Ń– рŠµŠ»Ń–Š·Šø\",\n\t\t\"nb\": \"Nye utgivelser\",\n\t\t\"sv\": \"Nya releaser\",\n\t\t\"sw\": \"Matoleo Mapya\",\n\t\t\"ur\": \"Ł†Ų¦ŪŒ Ų±ŪŒŁ„ŪŒŲ²Ų²\",\n\t\t\"bho\": \"ą¤Øą¤µą¤•ą¤¾ ą¤°ą¤æą¤²ą„€ą¤œą¤¼\",\n\t\t\"pa-PK\": \"Ł†ŁˆŪŒŚŗ Ų±ŪŒŁ„ŪŒŲ²Ų§Śŗ\",\n\t\t\"te\": \"ą°•ą±ą°°ą±Šą°¤ą±ą°¤ ą°°ą°æą°²ą±€ą°œą±ā€Œą°²ą±\",\n\t\t\"ro\": \"Lansări noi\",\n\t\t\"vi\": \"Mį»›i PhĆ”t HĆ nh\",\n\t\t\"am\": \"įŠ į‹³į‹²įˆµ į‹Øį‰°įˆˆį‰€į‰\",\n\t\t\"bn\": \"ą¦Øą¦¤ą§ą¦Ø ą¦°ą¦æą¦²ą¦æą¦œ\",\n\t\t\"en\": \"New Releases\",\n\t\t\"id\": \"Rilis Terbaru\",\n\t\t\"bg\": \"ŠŠ¾Š²Šø ŠøŠ·Š“Š°Š½Šøя\",\n\t\t\"da\": \"Nye udgivelser\",\n\t\t\"es-419\": \"Nuevos Lanzamientos\",\n\t\t\"mr\": \"ą¤Øą¤µą„€ą¤Ø ą¤°ą¤æą¤²ą„€ą¤\",\n\t\t\"ml\": \"ą“Ŗąµą“¤ą“æą“Æ ą“±ą“æą“²ąµ€ą“øąµą“•ą“³ąµā€\",\n\t\t\"th\": \"ąø­ąø­ąøą¹ƒąø«ąø”ą¹ˆąø„ą¹ˆąø²ąøŖąøøąø”\",\n\t\t\"tr\": \"Yeni Ƈıkanlar\",\n\t\t\"is\": \"NĆ½jar ĆŗtgĆ”fur\",\n\t\t\"fa\": \"ŲŖŁˆŁ„ŪŒŲÆŲ§ŲŖ Ų¬ŲÆŪŒŲÆ\",\n\t\t\"or\": \"ą¬Øą­‚ą¬† ą¬°ą¬æą¬²ą¬æą¬œą¬—ą­ą­œą¬æą¬•\",\n\t\t\"he\": \"מה חדש?\",\n\t\t\"hi\": \"ą¤Øą¤ˆ ą¤°ą¤æą¤²ą„€ą„›\",\n\t\t\"zh-TW\": \"꜀ꖰē™¼č”Œ\",\n\t\t\"sr\": \"Nova izdanja\",\n\t\t\"pt-BR\": \"Novos lanƧamentos\",\n\t\t\"zu\": \"Ezisanda Kukhishwa\",\n\t\t\"nl\": \"Nieuwe releases\",\n\t\t\"es\": \"Novedades\",\n\t\t\"lt\": \"Nauji leidimai\",\n\t\t\"ja\": \"ćƒ‹ćƒ„ćƒ¼ćƒŖćƒŖćƒ¼ć‚¹\",\n\t\t\"st\": \"Nova izdanja\",\n\t\t\"it\": \"Nuove uscite\",\n\t\t\"el\": \"ĪĪ­ĪµĻ‚ ĪŗĻ…ĪŗĪ»ĪæĻ†ĪæĻĪÆĪµĻ‚\",\n\t\t\"pt-PT\": \"Novos lanƧamentos\",\n\t\t\"kn\": \"ą²¹ą³Šą²ø ą²¬ą²æą²”ą³ą²—ą²”ą³†ą²—ą²³ą³\",\n\t\t\"de\": \"Neuerscheinungen\",\n\t\t\"fr\": \"NouveautĆ©s\",\n\t\t\"ne\": \"ą¤Øą¤Æą¤¾ą¤ ą¤°ą¤æą¤²ą¤æą¤œą¤¹ą¤°ą„‚\",\n\t\t\"ar\": \"Ų§Ł„Ų„ŲµŲÆŲ§Ų±Ų§ŲŖ Ų§Ł„Ų¬ŲÆŁŠŲÆŲ©\",\n\t\t\"af\": \"Nuwe vrystellings\",\n\t\t\"et\": \"Uus muusika\",\n\t\t\"pl\": \"Nowe wydania\",\n\t\t\"ta\": \"ą®ŖąÆą®¤ą®æą®Æ ą®µąÆ†ą®³ą®æą®ÆąÆ€ą®ŸąÆą®•ą®³ąÆ\",\n\t\t\"sl\": \"Nove izdaje\",\n\t\t\"pk\": \"New Releases\",\n\t\t\"hr\": \"Nova izdanja\",\n\t\t\"sk\": \"Novinky\",\n\t\t\"fi\": \"Uudet julkaisut\",\n\t\t\"lv\": \"Jaunumi\",\n\t\t\"fil\": \"Mga Bagong Release\",\n\t\t\"fr-CA\": \"NouveautĆ©s\",\n\t\t\"cs\": \"ČerstvĆ© novinky\",\n\t\t\"zh-CN\": \"ꖰꭌēƒ­ę’­\",\n\t\t\"hu\": \"ƚjdonsĆ”gok\"\n\t},\n\t\"icon\": \"\",\n\t\"active-icon\": \"\",\n\t\"subfiles\": [\"Card.js\", \"Icons.js\", \"Settings.js\"]\n}\n" }, { "path": "CustomApps/new-releases/style.css", "content": ".setting-row::after {\n\tcontent: \"\";\n\tdisplay: table;\n\tclear: both;\n}\n.setting-row .col {\n\tdisplay: flex;\n\tpadding: 10px 0;\n\talign-items: center;\n}\n.setting-row .col.description {\n\tfloat: left;\n\tpadding-right: 15px;\n\tcursor: default;\n}\n.setting-row .col.action {\n\tfloat: right;\n\ttext-align: right;\n}\nbutton.switch {\n\talign-items: center;\n\tborder: 0px;\n\tborder-radius: 50%;\n\tbackground-color: rgba(var(--spice-rgb-shadow), 0.7);\n\tcolor: var(--spice-text);\n\tcursor: pointer;\n\tdisplay: flex;\n\tmargin-inline-start: 12px;\n\tpadding: 8px;\n}\nbutton.switch.disabled,\nbutton.switch[disabled] {\n\tcolor: rgba(var(--spice-rgb-text), 0.3);\n}\nbutton.switch.small {\n\twidth: 22px;\n\theight: 22px;\n\tpadding: 6px;\n}\nbutton.text {\n\tfont-size: 12px;\n\tline-height: 16px;\n\tfont-weight: 700;\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n\ttext-align: center;\n\tcolor: var(--spice-text);\n\tbackground-color: initial;\n\tpadding: 7px 15px;\n\tborder: 1px solid var(--spice-text);\n\t-webkit-box-sizing: border-box;\n\tbox-sizing: border-box;\n\tborder-radius: 4px;\n\tmargin-inline-start: 12px;\n}\n#new-releases-config-container input {\n\twidth: 100%;\n\tmargin-top: 10px;\n\tpadding: 0 5px;\n\theight: 32px;\n\tborder: 0;\n\tcolor: var(--spice-text);\n\tbackground-color: initial;\n\tborder-bottom: 1px solid var(--spice-text);\n}\n\noption {\n\tbackground-color: var(--spice-button);\n}\n\n.new-releases-header {\n\t-webkit-box-pack: justify;\n\t-webkit-box-align: center;\n\talign-content: space-between;\n\talign-items: center;\n\tcolor: var(--spice-text);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin: 16px 0;\n\ttext-transform: capitalize;\n}\n\n.new-releases-controls-container {\n\tposition: relative;\n\talign-items: center;\n\tdisplay: flex;\n}\n\n.new-releases-cardSubHeader {\n\tcolor: var(--spice-subtext);\n}\n.new-releases-header + .main-gridContainer-gridContainer .main-card-card .main-playButton-PlayButton button {\n\t-webkit-tap-highlight-color: transparent;\n\tbackground-color: transparent;\n\tborder: 0px;\n\tborder-radius: 500px;\n\tdisplay: inline-block;\n\tposition: relative;\n\ttouch-action: manipulation;\n\ttransition-duration: 33ms;\n\ttransition-property: background-color, border-color, color, box-shadow, filter, transform;\n\tuser-select: none;\n\tvertical-align: middle;\n\ttransform: translate3d(0px, 0px, 0px);\n\tpadding: 0px;\n\tmin-inline-size: 0px;\n\talign-self: center;\n}\n.new-releases-header + .main-gridContainer-gridContainer .main-card-card .main-playButton-PlayButton span {\n\t-webkit-tap-highlight-color: transparent;\n\tposition: relative;\n\tbackground-color: var(--spice-button-active);\n\tcolor: var(--spice-sidebar);\n\tdisplay: flex;\n\tborder-radius: 500px;\n\tfont-size: inherit;\n\tmin-block-size: 48px;\n\t-webkit-box-align: center;\n\talign-items: center;\n\t-webkit-box-pack: center;\n\tjustify-content: center;\n\tinline-size: 48px;\n\tblock-size: 48px;\n}\n.new-releases-header + .main-gridContainer-gridContainer .main-card-card .main-playButton-PlayButton span:hover {\n\ttransform: scale(1.04);\n}\n\n.main-card-closeButton {\n\tpointer-events: all;\n\tposition: absolute !important;\n\ttop: 8px;\n\tright: 8px;\n\t-webkit-box-align: center;\n\t-ms-flex-align: center;\n\t-webkit-box-pack: center;\n\t-ms-flex-pack: center;\n\talign-items: center;\n\tbackground-color: rgba(var(--spice-rgb-shadow), 0.7);\n\tborder: 0;\n\tborder-radius: 500px;\n\tcolor: var(--spice-sidebar);\n\tdisplay: flex;\n\theight: 28px;\n\tjustify-content: center;\n\t-webkit-transform: scale(1);\n\ttransform: scale(1);\n\t-webkit-transform-origin: center;\n\ttransform-origin: center;\n\twidth: 28px;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition:\n\t\tvisibility 0s,\n\t\topacity 0.3s ease;\n}\n\n.main-card-closeButton:active {\n\ttransform: scale(1) !important;\n}\n.main-card-closeButton:hover {\n\ttransform: scale(1.1);\n}\n\n.main-card-card:hover .main-card-closeButton {\n\tvisibility: visible;\n\topacity: 1;\n\ttransition:\n\t\tvisibility 0s,\n\t\topacity 0.3s ease;\n}\n\n.new-releases-header + .main-gridContainer-gridContainer {\n\tgrid-template-columns: repeat(var(--column-count), minmax(var(--min-container-width), 1fr)) !important;\n}\n" }, { "path": "CustomApps/reddit/Card.js", "content": "class Card extends react.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tObject.assign(this, props);\n\t\tconst uriObj = URI.fromString(this.uri);\n\t\tthis.href = uriObj.toURLPath(true);\n\n\t\tthis.uriType = uriObj.type;\n\t\tswitch (this.uriType) {\n\t\t\tcase URI.Type.ALBUM:\n\t\t\tcase URI.Type.TRACK:\n\t\t\t\tthis.menuType = Spicetify.ReactComponent.AlbumMenu;\n\t\t\t\tbreak;\n\t\t\tcase URI.Type.ARTIST:\n\t\t\t\tthis.menuType = Spicetify.ReactComponent.ArtistMenu;\n\t\t\t\tbreak;\n\t\t\tcase URI.Type.PLAYLIST:\n\t\t\tcase URI.Type.PLAYLIST_V2:\n\t\t\t\tthis.menuType = Spicetify.ReactComponent.PlaylistMenu;\n\t\t\t\tbreak;\n\t\t\tcase URI.Type.SHOW:\n\t\t\t\tthis.menuType = Spicetify.ReactComponent.PodcastShowMenu;\n\t\t\t\tbreak;\n\t\t}\n\t\tthis.menuType = this.menuType || \"div\";\n\t}\n\n\tplay(event) {\n\t\tSpicetify.Player.playUri(this.uri, this.context);\n\t\tevent.stopPropagation();\n\t}\n\n\tgetSubtitle() {\n\t\tlet subtitle;\n\t\tif ((this.uriType === URI.Type.ALBUM || this.uriType === URI.Type.TRACK) && Array.isArray(this.subtitle)) {\n\t\t\tsubtitle = this.subtitle.map((artist) => {\n\t\t\t\tconst artistHref = URI.fromString(artist.uri).toURLPath(true);\n\t\t\t\treturn react.createElement(\n\t\t\t\t\t\"a\",\n\t\t\t\t\t{\n\t\t\t\t\t\thref: artistHref,\n\t\t\t\t\t\tonClick: (event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\tHistory.push(artistHref);\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\"span\", null, artist.name)\n\t\t\t\t);\n\t\t\t});\n\t\t\t// Insert commas between elements\n\t\t\tsubtitle = subtitle.flatMap((el, i, arr) => (arr.length - 1 !== i ? [el, \", \"] : el));\n\t\t} else {\n\t\t\tsubtitle = react.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: `${this.visual.longDescription ? \"reddit-longDescription \" : \"\"}main-cardSubHeader-root main-type-mesto reddit-cardSubHeader`,\n\t\t\t\t\tas: \"div\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\"span\", null, this.subtitle)\n\t\t\t);\n\t\t}\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"reddit-cardSubHeader main-type-mesto\",\n\t\t\t},\n\t\t\tsubtitle\n\t\t);\n\t}\n\n\tgetFollowers() {\n\t\tif (this.visual.followers && (this.uriType === URI.Type.PLAYLIST || this.uriType === URI.Type.PLAYLIST_V2)) {\n\t\t\treturn react.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"main-cardSubHeader-root main-type-mestoBold reddit-cardSubHeader\",\n\t\t\t\t\tas: \"div\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\"span\", null, Spicetify.Locale.get(\"user.followers\", this.followersCount))\n\t\t\t);\n\t\t}\n\t}\n\n\trender() {\n\t\tconst detail = [];\n\t\tthis.visual.type && detail.push(this.type);\n\t\tthis.visual.upvotes && detail.push(`ā–² ${this.upvotes}`);\n\n\t\treturn react.createElement(\n\t\t\tSpicetify.ReactComponent.RightClickMenu || \"div\",\n\t\t\t{\n\t\t\t\tmenu: react.createElement(this.menuType, { uri: this.uri }),\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"main-card-card\",\n\t\t\t\t\tonClick: (event) => {\n\t\t\t\t\t\tHistory.push(this.href);\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"main-card-draggable\",\n\t\t\t\t\t\tdraggable: \"true\",\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclassName: \"main-card-imageContainer\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: \"main-cardImage-imageWrapper\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{},\n\t\t\t\t\t\t\t\treact.createElement(\"img\", {\n\t\t\t\t\t\t\t\t\t\"aria-hidden\": \"false\",\n\t\t\t\t\t\t\t\t\tdraggable: \"false\",\n\t\t\t\t\t\t\t\t\tloading: \"lazy\",\n\t\t\t\t\t\t\t\t\tsrc: this.imageURL,\n\t\t\t\t\t\t\t\t\tclassName: \"main-image-image main-cardImage-image\",\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t),\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: \"main-card-PlayButtonContainer\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tclassName: \"main-playButton-PlayButton main-playButton-primary\",\n\t\t\t\t\t\t\t\t\t\"aria-label\": Spicetify.Locale.get(\"play\"),\n\t\t\t\t\t\t\t\t\tstyle: { \"--size\": \"40px\" },\n\t\t\t\t\t\t\t\t\tonClick: this.play.bind(this),\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\t\"span\",\n\t\t\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\t\t\"svg\",\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\theight: \"24\",\n\t\t\t\t\t\t\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\t\t\t\t\t\t\twidth: \"24\",\n\t\t\t\t\t\t\t\t\t\t\t\tviewBox: \"0 0 24 24\",\n\t\t\t\t\t\t\t\t\t\t\t\t\"aria-hidden\": \"true\",\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\treact.createElement(\"polygon\", {\n\t\t\t\t\t\t\t\t\t\t\t\tpoints: \"21.57 12 5.98 3 5.98 21 21.57 12\",\n\t\t\t\t\t\t\t\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t),\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclassName: \"main-card-cardMetadata\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"a\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tdraggable: \"false\",\n\t\t\t\t\t\t\t\ttitle: this.title,\n\t\t\t\t\t\t\t\tclassName: \"main-cardHeader-link\",\n\t\t\t\t\t\t\t\tdir: \"auto\",\n\t\t\t\t\t\t\t\thref: this.href,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tclassName: \"main-cardHeader-text main-type-balladBold\",\n\t\t\t\t\t\t\t\t\tas: \"div\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tthis.title\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t),\n\t\t\t\t\t\tdetail.length > 0 &&\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tclassName: \"main-cardSubHeader-root main-type-mestoBold reddit-cardSubHeader\",\n\t\t\t\t\t\t\t\t\tas: \"div\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\treact.createElement(\"span\", null, detail.join(\" ā€’ \"))\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\tthis.getFollowers(),\n\t\t\t\t\t\tthis.getSubtitle()\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t}\n}\n" }, { "path": "CustomApps/reddit/Icons.js", "content": "class LoadingIcon extends react.Component {\n\trender() {\n\t\treturn react.createElement(\n\t\t\t\"svg\",\n\t\t\t{\n\t\t\t\twidth: \"100px\",\n\t\t\t\theight: \"100px\",\n\t\t\t\tviewBox: \"0 0 100 100\",\n\t\t\t\tpreserveAspectRatio: \"xMidYMid\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"circle\",\n\t\t\t\t{\n\t\t\t\t\tcx: \"50\",\n\t\t\t\t\tcy: \"50\",\n\t\t\t\t\tr: \"0\",\n\t\t\t\t\tfill: \"none\",\n\t\t\t\t\tstroke: \"currentColor\",\n\t\t\t\t\t\"stroke-width\": \"2\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\"animate\", {\n\t\t\t\t\tattributeName: \"r\",\n\t\t\t\t\trepeatCount: \"indefinite\",\n\t\t\t\t\tdur: \"1s\",\n\t\t\t\t\tvalues: \"0;40\",\n\t\t\t\t\tkeyTimes: \"0;1\",\n\t\t\t\t\tkeySplines: \"0 0.2 0.8 1\",\n\t\t\t\t\tcalcMode: \"spline\",\n\t\t\t\t\tbegin: \"0s\",\n\t\t\t\t}),\n\t\t\t\treact.createElement(\"animate\", {\n\t\t\t\t\tattributeName: \"opacity\",\n\t\t\t\t\trepeatCount: \"indefinite\",\n\t\t\t\t\tdur: \"1s\",\n\t\t\t\t\tvalues: \"1;0\",\n\t\t\t\t\tkeyTimes: \"0;1\",\n\t\t\t\t\tkeySplines: \"0.2 0 0.8 1\",\n\t\t\t\t\tcalcMode: \"spline\",\n\t\t\t\t\tbegin: \"0s\",\n\t\t\t\t})\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"circle\",\n\t\t\t\t{\n\t\t\t\t\tcx: \"50\",\n\t\t\t\t\tcy: \"50\",\n\t\t\t\t\tr: \"0\",\n\t\t\t\t\tfill: \"none\",\n\t\t\t\t\tstroke: \"currentColor\",\n\t\t\t\t\t\"stroke-width\": \"2\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\"animate\", {\n\t\t\t\t\tattributeName: \"r\",\n\t\t\t\t\trepeatCount: \"indefinite\",\n\t\t\t\t\tdur: \"1s\",\n\t\t\t\t\tvalues: \"0;40\",\n\t\t\t\t\tkeyTimes: \"0;1\",\n\t\t\t\t\tkeySplines: \"0 0.2 0.8 1\",\n\t\t\t\t\tcalcMode: \"spline\",\n\t\t\t\t\tbegin: \"-0.5s\",\n\t\t\t\t}),\n\t\t\t\treact.createElement(\"animate\", {\n\t\t\t\t\tattributeName: \"opacity\",\n\t\t\t\t\trepeatCount: \"indefinite\",\n\t\t\t\t\tdur: \"1s\",\n\t\t\t\t\tvalues: \"1;0\",\n\t\t\t\t\tkeyTimes: \"0;1\",\n\t\t\t\t\tkeySplines: \"0.2 0 0.8 1\",\n\t\t\t\t\tcalcMode: \"spline\",\n\t\t\t\t\tbegin: \"-0.5s\",\n\t\t\t\t})\n\t\t\t)\n\t\t);\n\t}\n}\n\nclass LoadMoreIcon extends react.Component {\n\trender() {\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tonClick: this.props.onClick,\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"p\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tfontSize: 100,\n\t\t\t\t\t\tlineHeight: \"65px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t\"Ā»\"\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tfontSize: 20,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t\"Load more\"\n\t\t\t)\n\t\t);\n\t}\n}\n" }, { "path": "CustomApps/reddit/OptionsMenu.js", "content": "const OptionsMenuItemIcon = react.createElement(\n\t\"svg\",\n\t{\n\t\twidth: 16,\n\t\theight: 16,\n\t\tviewBox: \"0 0 16 16\",\n\t\tfill: \"currentColor\",\n\t},\n\treact.createElement(\"path\", {\n\t\td: \"M13.985 2.383L5.127 12.754 1.388 8.375l-.658.77 4.397 5.149 9.618-11.262z\",\n\t})\n);\n\nconst OptionsMenuItem = react.memo(({ onSelect, value, isSelected }) => {\n\treturn react.createElement(\n\t\tSpicetify.ReactComponent.MenuItem,\n\t\t{\n\t\t\tonClick: onSelect,\n\t\t\ticon: isSelected ? OptionsMenuItemIcon : null,\n\t\t\ttrailingIcon: isSelected ? OptionsMenuItemIcon : null,\n\t\t},\n\t\tvalue\n\t);\n});\n\nconst OptionsMenu = react.memo(({ options, onSelect, selected, defaultValue, bold = false }) => {\n\t/**\n\t * ) }\n\t * >\n\t * \n\t * \n\t */\n\tconst menuRef = react.useRef(null);\n\treturn react.createElement(\n\t\tSpicetify.ReactComponent.ContextMenu,\n\t\t{\n\t\t\tmenu: react.createElement(\n\t\t\t\tSpicetify.ReactComponent.Menu,\n\t\t\t\t{},\n\t\t\t\toptions.map(({ key, value }) =>\n\t\t\t\t\treact.createElement(OptionsMenuItem, {\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tonSelect: () => {\n\t\t\t\t\t\t\tonSelect(key);\n\t\t\t\t\t\t\t// Close menu on item click\n\t\t\t\t\t\t\tmenuRef.current?.click();\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisSelected: selected?.key === key,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t),\n\t\t\ttrigger: \"click\",\n\t\t\taction: \"toggle\",\n\t\t\trenderInline: false,\n\t\t},\n\t\treact.createElement(\n\t\t\t\"button\",\n\t\t\t{\n\t\t\t\tclassName: \"optionsMenu-dropBox\",\n\t\t\t\tref: menuRef,\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName: bold ? \"main-type-mestoBold\" : \"main-type-mesto\",\n\t\t\t\t},\n\t\t\t\tselected?.value || defaultValue\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"svg\",\n\t\t\t\t{\n\t\t\t\t\theight: \"16\",\n\t\t\t\t\twidth: \"16\",\n\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\"path\", {\n\t\t\t\t\td: \"M3 6l5 5.794L13 6z\",\n\t\t\t\t})\n\t\t\t)\n\t\t)\n\t);\n});\n" }, { "path": "CustomApps/reddit/Settings.js", "content": "let configContainer;\n\nfunction openConfig() {\n\tif (configContainer) {\n\t\tSpicetify.PopupModal.display({\n\t\t\ttitle: \"Reddit\",\n\t\t\tcontent: configContainer,\n\t\t});\n\t\treturn;\n\t}\n\n\tCONFIG.servicesElement = {};\n\n\tconfigContainer = document.createElement(\"div\");\n\tconfigContainer.id = \"reddit-config-container\";\n\n\tconst optionHeader = document.createElement(\"h2\");\n\toptionHeader.innerText = \"Options\";\n\n\tconst serviceHeader = document.createElement(\"h2\");\n\tserviceHeader.innerText = \"Subreddits\";\n\n\tconst serviceContainer = document.createElement(\"div\");\n\n\tfunction stackServiceElements() {\n\t\tCONFIG.services.forEach((name, index) => {\n\t\t\tconst el = CONFIG.servicesElement[name];\n\n\t\t\tconst [up, down] = el.querySelectorAll(\"button\");\n\t\t\tif (CONFIG.services.length === 1) {\n\t\t\t\tup.disabled = true;\n\t\t\t\tdown.disabled = true;\n\t\t\t} else if (index === 0) {\n\t\t\t\tup.disabled = true;\n\t\t\t\tdown.disabled = false;\n\t\t\t} else if (index === CONFIG.services.length - 1) {\n\t\t\t\tup.disabled = false;\n\t\t\t\tdown.disabled = true;\n\t\t\t} else {\n\t\t\t\tup.disabled = false;\n\t\t\t\tdown.disabled = false;\n\t\t\t}\n\n\t\t\tserviceContainer.append(el);\n\t\t});\n\t\tgridUpdateTabs?.();\n\t}\n\n\tfunction posCallback(el, dir) {\n\t\tconst id = el.dataset.id;\n\t\tconst curPos = CONFIG.services.findIndex((val) => val === id);\n\t\tconst newPos = curPos + dir;\n\n\t\tif (CONFIG.services.length > 1) {\n\t\t\tconst temp = CONFIG.services[newPos];\n\t\t\tCONFIG.services[newPos] = CONFIG.services[curPos];\n\t\t\tCONFIG.services[curPos] = temp;\n\t\t}\n\n\t\tlocalStorage.setItem(\"reddit:services\", JSON.stringify(CONFIG.services));\n\n\t\tstackServiceElements();\n\t}\n\n\tfunction removeCallback(el) {\n\t\tconst id = el.dataset.id;\n\t\tCONFIG.services = CONFIG.services.filter((s) => s !== id);\n\t\tCONFIG.servicesElement[id].remove();\n\n\t\tlocalStorage.setItem(\"reddit:services\", JSON.stringify(CONFIG.services));\n\n\t\tstackServiceElements();\n\t}\n\n\tfor (const name of CONFIG.services) {\n\t\tCONFIG.servicesElement[name] = createServiceOption(name, posCallback, removeCallback);\n\t}\n\tstackServiceElements();\n\n\tconst serviceInput = document.createElement(\"input\");\n\tserviceInput.placeholder = \"Add new subreddit\";\n\tserviceInput.onkeydown = (event) => {\n\t\tif (event.key !== \"Enter\") {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tconst name = serviceInput.value;\n\n\t\tif (!CONFIG.services.includes(name)) {\n\t\t\tCONFIG.services.push(name);\n\t\t\tCONFIG.servicesElement[name] = createServiceOption(name, posCallback, removeCallback);\n\t\t\tlocalStorage.setItem(\"reddit:services\", JSON.stringify(CONFIG.services));\n\t\t}\n\n\t\tstackServiceElements();\n\t\tserviceInput.value = \"\";\n\t\tconst parent = configContainer.parentElement.parentElement;\n\t\tparent.scrollTo(0, parent.scrollHeight);\n\t};\n\n\tconfigContainer.append(\n\t\toptionHeader,\n\t\tcreateSlider(\"Upvotes count\", \"upvotes\"),\n\t\tcreateSlider(\"Followers count\", \"followers\"),\n\t\tcreateSlider(\"Post type\", \"type\"),\n\t\tcreateSlider(\"Long description\", \"longDescription\"),\n\t\tserviceHeader,\n\t\tserviceContainer,\n\t\tserviceInput\n\t);\n\n\tSpicetify.PopupModal.display({\n\t\ttitle: \"Reddit\",\n\t\tcontent: configContainer,\n\t});\n}\n\nfunction createSlider(name, key) {\n\tconst container = document.createElement(\"div\");\n\tcontainer.innerHTML = `\n
\n \n
\n
`;\n\n\tconst slider = container.querySelector(\"button\");\n\tslider.classList.toggle(\"disabled\", !CONFIG.visual[key]);\n\n\tslider.onclick = () => {\n\t\tconst state = !slider.classList.toggle(\"disabled\");\n\t\tCONFIG.visual[key] = state;\n\t\tlocalStorage.setItem(`reddit:${key}`, String(state));\n\t\tgridUpdatePostsVisual?.();\n\t};\n\n\treturn container;\n}\n\nfunction createServiceOption(id, posCallback, removeCallback) {\n\tconst container = document.createElement(\"div\");\n\tcontainer.dataset.id = id;\n\tcontainer.innerHTML = `\n
\n

${id}

\n
\n \n \n \n
\n
`;\n\n\tconst [up, down, remove] = container.querySelectorAll(\"button\");\n\n\tup.onclick = () => posCallback(container, -1);\n\tdown.onclick = () => posCallback(container, 1);\n\tremove.onclick = () => removeCallback(container);\n\n\treturn container;\n}\n" }, { "path": "CustomApps/reddit/SortBox.js", "content": "class SortBox extends react.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.sortByOptions = [\n\t\t\t{ key: \"hot\", value: \"Hot\" },\n\t\t\t{ key: \"new\", value: \"New\" },\n\t\t\t{ key: \"top\", value: \"Top\" },\n\t\t\t{ key: \"rising\", value: \"Rising\" },\n\t\t\t{ key: \"controversial\", value: \"Controversial\" },\n\t\t];\n\t\tthis.sortTimeOptions = [\n\t\t\t{ key: \"hour\", value: \"Hour\" },\n\t\t\t{ key: \"day\", value: \"Day\" },\n\t\t\t{ key: \"week\", value: \"Week\" },\n\t\t\t{ key: \"month\", value: \"Month\" },\n\t\t\t{ key: \"year\", value: \"Year\" },\n\t\t\t{ key: \"all\", value: \"All\" },\n\t\t];\n\t}\n\n\trender() {\n\t\tconst sortBySelected = this.sortByOptions.filter((a) => a.key === sortConfig.by)[0];\n\t\tconst sortTimeSelected = this.sortTimeOptions.filter((a) => a.key === sortConfig.time)[0];\n\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"reddit-sort-bar\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"reddit-sort-container\",\n\t\t\t\t},\n\t\t\t\treact.createElement(OptionsMenu, {\n\t\t\t\t\toptions: this.sortByOptions,\n\t\t\t\t\tonSelect: (by) => this.props.onChange(by, null),\n\t\t\t\t\tselected: sortBySelected,\n\t\t\t\t}),\n\t\t\t\t!!sortConfig.by.match(/top|controversial/) &&\n\t\t\t\t\treact.createElement(OptionsMenu, {\n\t\t\t\t\t\toptions: this.sortTimeOptions,\n\t\t\t\t\t\tonSelect: (time) => this.props.onChange(null, time),\n\t\t\t\t\t\tselected: sortTimeSelected,\n\t\t\t\t\t})\n\t\t\t)\n\t\t);\n\t}\n}\n" }, { "path": "CustomApps/reddit/TabBar.js", "content": "class TabBarItem extends react.Component {\n\trender() {\n\t\treturn react.createElement(\n\t\t\t\"li\",\n\t\t\t{\n\t\t\t\tclassName: \"reddit-tabBar-headerItem\",\n\t\t\t\tonClick: (event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tthis.props.switchTo(this.props.item.key);\n\t\t\t\t},\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"a\",\n\t\t\t\t{\n\t\t\t\t\t\"aria-current\": \"page\",\n\t\t\t\t\tclassName: `reddit-tabBar-headerItemLink ${this.props.item.active ? \"reddit-tabBar-active\" : \"\"}`,\n\t\t\t\t\tdraggable: \"false\",\n\t\t\t\t\thref: \"\",\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"span\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"main-type-mestoBold\",\n\t\t\t\t\t},\n\t\t\t\t\tthis.props.item.value\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t}\n}\n\nconst TabBarMore = react.memo(({ items, switchTo }) => {\n\tconst activeItem = items.find((item) => item.active);\n\n\treturn react.createElement(\n\t\t\"li\",\n\t\t{\n\t\t\tclassName: `reddit-tabBar-headerItem ${activeItem ? \"reddit-tabBar-active\" : \"\"}`,\n\t\t},\n\t\treact.createElement(OptionsMenu, {\n\t\t\toptions: items,\n\t\t\tonSelect: switchTo,\n\t\t\tselected: activeItem,\n\t\t\tdefaultValue: \"More\",\n\t\t\tbold: true,\n\t\t})\n\t);\n});\n\nconst TopBarContent = ({ links, activeLink, switchCallback }) => {\n\tconst resizeHost = document.querySelector(\n\t\t\".Root__main-view .os-resize-observer-host, .Root__main-view .os-size-observer, .Root__main-view .main-view-container__scroll-node\"\n\t);\n\tconst [windowSize, setWindowSize] = useState(resizeHost.clientWidth);\n\tconst resizeHandler = () => setWindowSize(resizeHost.clientWidth);\n\n\tuseEffect(() => {\n\t\tconst observer = new ResizeObserver(resizeHandler);\n\t\tobserver.observe(resizeHost);\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [resizeHandler]);\n\n\treturn react.createElement(\n\t\tTabBarContext,\n\t\tnull,\n\t\treact.createElement(TabBar, {\n\t\t\tclassName: \"queue-queueHistoryTopBar-tabBar\",\n\t\t\tlinks,\n\t\t\tactiveLink,\n\t\t\twindowSize,\n\t\t\tswitchCallback,\n\t\t})\n\t);\n};\n\nconst TabBarContext = ({ children }) => {\n\treturn Spicetify.ReactDOM.createPortal(\n\t\treact.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName: \"main-topBar-topbarContent\",\n\t\t\t},\n\t\t\tchildren\n\t\t),\n\t\tdocument.querySelector(\".main-topBar-topbarContentWrapper\")\n\t);\n};\n\nconst TabBar = react.memo(({ links, activeLink, switchCallback, windowSize = Number.POSITIVE_INFINITY }) => {\n\tconst tabBarRef = react.useRef(null);\n\tconst [childrenSizes, setChildrenSizes] = useState([]);\n\tconst [availableSpace, setAvailableSpace] = useState(0);\n\tconst [droplistItem, setDroplistItems] = useState([]);\n\n\tconst options = links.map((key) => {\n\t\tconst active = key === activeLink;\n\t\treturn { key, value: key, active };\n\t});\n\n\tuseEffect(() => {\n\t\tif (!tabBarRef.current) return;\n\t\tsetAvailableSpace(tabBarRef.current.clientWidth);\n\t}, [windowSize]);\n\n\tuseEffect(() => {\n\t\tif (!tabBarRef.current) return;\n\n\t\tconst children = Array.from(tabBarRef.current.children);\n\t\tconst tabbarItemSizes = children.map((child) => child.clientWidth);\n\n\t\tsetChildrenSizes(tabbarItemSizes);\n\t}, [links]);\n\n\tuseEffect(() => {\n\t\tif (!tabBarRef.current) return;\n\n\t\tconst totalSize = childrenSizes.reduce((a, b) => a + b, 0);\n\n\t\t// Can we render everything?\n\t\tif (totalSize <= availableSpace) {\n\t\t\tsetDroplistItems([]);\n\t\t\treturn;\n\t\t}\n\n\t\t// The `More` button can be set to _any_ of the children. So we\n\t\t// reserve space for the largest item instead of always taking\n\t\t// the last item.\n\t\tconst viewMoreButtonSize = Math.max(...childrenSizes);\n\n\t\t// Figure out how many children we can render while also showing\n\t\t// the More button\n\t\tconst itemsToHide = [];\n\t\tlet stopWidth = viewMoreButtonSize;\n\n\t\tchildrenSizes.forEach((childWidth, i) => {\n\t\t\tif (availableSpace >= stopWidth + childWidth) {\n\t\t\t\tstopWidth += childWidth;\n\t\t\t} else {\n\t\t\t\titemsToHide.push(i);\n\t\t\t}\n\t\t});\n\n\t\tsetDroplistItems(itemsToHide);\n\t}, [availableSpace, childrenSizes]);\n\n\treturn react.createElement(\n\t\t\"nav\",\n\t\t{\n\t\t\tclassName: \"reddit-tabBar reddit-tabBar-nav\",\n\t\t},\n\t\treact.createElement(\n\t\t\t\"ul\",\n\t\t\t{\n\t\t\t\tclassName: \"reddit-tabBar-header\",\n\t\t\t\tref: tabBarRef,\n\t\t\t},\n\t\t\toptions\n\t\t\t\t.filter((_, id) => !droplistItem.includes(id))\n\t\t\t\t.map((item) =>\n\t\t\t\t\treact.createElement(TabBarItem, {\n\t\t\t\t\t\titem,\n\t\t\t\t\t\tswitchTo: switchCallback,\n\t\t\t\t\t})\n\t\t\t\t),\n\t\t\tdroplistItem.length || childrenSizes.length === 0\n\t\t\t\t? react.createElement(TabBarMore, {\n\t\t\t\t\t\titems: droplistItem.map((i) => options[i]).filter(Boolean),\n\t\t\t\t\t\tswitchTo: switchCallback,\n\t\t\t\t\t})\n\t\t\t\t: null\n\t\t)\n\t);\n});\n" }, { "path": "CustomApps/reddit/index.js", "content": "// Run \"npm i @types/react-dom @types/react\" to have this type package available in workspace\n/// \n/// \n\n/** @type {React} */\nconst react = Spicetify.React;\n/** @type {ReactDOM} */\nconst reactDOM = Spicetify.ReactDOM;\nconst {\n\tURI,\n\tReact: { useState, useEffect, useCallback },\n\tPlatform: { History },\n} = Spicetify;\n\n// Define a function called \"render\" to specify app entry point\n// This function will be used to mount app to main view.\nfunction render() {\n\treturn react.createElement(Grid, { title: \"Reddit\" });\n}\n\nconst CONFIG = {\n\tvisual: {\n\t\ttype: localStorage.getItem(\"reddit:type\") === \"true\",\n\t\tupvotes: localStorage.getItem(\"reddit:upvotes\") === \"true\",\n\t\tfollowers: localStorage.getItem(\"reddit:followers\") === \"true\",\n\t\tlongDescription: localStorage.getItem(\"reddit:longDescription\") === \"true\",\n\t},\n\tservices: localStorage.getItem(\"reddit:services\") || `[\"spotify\",\"makemeaplaylist\",\"SpotifyPlaylists\",\"music\",\"edm\",\"popheads\"]`,\n\tlastService: localStorage.getItem(\"reddit:last-service\"),\n};\n\ntry {\n\tCONFIG.services = JSON.parse(CONFIG.services);\n\tif (!Array.isArray(CONFIG.services)) {\n\t\tthrow \"\";\n\t}\n} catch {\n\tCONFIG.services = [\"spotify\", \"makemeaplaylist\", \"SpotifyPlaylists\", \"music\", \"edm\", \"popheads\"];\n\tlocalStorage.setItem(\"reddit:services\", JSON.stringify(CONFIG.services));\n}\n\nif (!CONFIG.lastService || !CONFIG.services.includes(CONFIG.lastService)) {\n\tCONFIG.lastService = CONFIG.services[0];\n}\nconst sortConfig = {\n\tby: localStorage.getItem(\"reddit:sort-by\") || \"top\",\n\ttime: localStorage.getItem(\"reddit:sort-time\") || \"month\",\n};\nlet cardList = [];\nlet endOfList = false;\nlet lastScroll = 0;\nlet requestQueue = [];\nlet requestAfter = null;\n\nlet gridUpdateTabs;\nlet gridUpdatePostsVisual;\n\nconst typesLocale = {\n\talbum: Spicetify.Locale.get(\"album\"),\n\tsong: Spicetify.Locale.get(\"song\"),\n\tplaylist: Spicetify.Locale.get(\"playlist\"),\n};\n\nclass Grid extends react.Component {\n\tviewportSelector = document.querySelector(\"#main .os-viewport\") ? \"#main .os-viewport\" : \"#main .main-view-container__scroll-node\";\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tObject.assign(this, props);\n\t\tthis.state = {\n\t\t\tcards: [],\n\t\t\ttabs: CONFIG.services,\n\t\t\trest: true,\n\t\t\tendOfList: endOfList,\n\t\t};\n\t}\n\n\tnewRequest(amount) {\n\t\tcardList = [];\n\t\tconst queue = [];\n\t\trequestQueue.unshift(queue);\n\t\tthis.loadAmount(queue, amount);\n\t}\n\n\tappendCard(item) {\n\t\titem.visual = CONFIG.visual;\n\t\tcardList.push(react.createElement(Card, item));\n\t\tthis.setState({ cards: cardList });\n\t}\n\n\tupdateSort(sortByValue, sortTimeValue) {\n\t\tif (sortByValue) {\n\t\t\tsortConfig.by = sortByValue;\n\t\t\tlocalStorage.setItem(\"reddit:sort-by\", sortByValue);\n\t\t}\n\t\tif (sortTimeValue) {\n\t\t\tsortConfig.time = sortTimeValue;\n\t\t\tlocalStorage.setItem(\"reddit:sort-time\", sortTimeValue);\n\t\t}\n\n\t\trequestAfter = null;\n\t\tcardList = [];\n\t\tthis.setState({\n\t\t\tcards: [],\n\t\t\trest: false,\n\t\t\tendOfList: false,\n\t\t});\n\t\tendOfList = false;\n\n\t\tthis.newRequest(30);\n\t}\n\n\tupdateTabs() {\n\t\tthis.setState({\n\t\t\ttabs: [...CONFIG.services],\n\t\t});\n\t}\n\n\tupdatePostsVisual() {\n\t\tcardList = cardList.map((card) => {\n\t\t\treturn react.createElement(Card, card.props);\n\t\t});\n\t\tthis.setState({ cards: [...cardList] });\n\t}\n\n\tswitchTo(value) {\n\t\tCONFIG.lastService = value;\n\t\tlocalStorage.setItem(\"reddit:last-service\", value);\n\t\tcardList = [];\n\t\trequestAfter = null;\n\t\tthis.setState({\n\t\t\tcards: [],\n\t\t\trest: false,\n\t\t\tendOfList: false,\n\t\t});\n\t\tendOfList = false;\n\n\t\tthis.newRequest(30);\n\t}\n\n\tasync loadPage(queue) {\n\t\tconst subMeta = await getSubreddit(requestAfter);\n\t\tconst posts = postMapper(subMeta.data.children);\n\t\tfor (const post of posts) {\n\t\t\tlet item;\n\t\t\tswitch (post.type) {\n\t\t\t\tcase \"playlist\":\n\t\t\t\tcase \"playlist-v2\":\n\t\t\t\t\titem = await fetchPlaylist(post);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"track\":\n\t\t\t\t\titem = await fetchTrack(post);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"album\":\n\t\t\t\t\titem = await fetchAlbum(post);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (requestQueue.length > 1 && queue !== requestQueue[0]) {\n\t\t\t\t// Stop this queue from continuing to fetch and append to cards list\n\t\t\t\treturn -1;\n\t\t\t}\n\n\t\t\titem && this.appendCard(item);\n\t\t}\n\n\t\tif (subMeta.data.after) {\n\t\t\treturn subMeta.data.after;\n\t\t}\n\n\t\tthis.setState({ rest: true, endOfList: true });\n\t\tendOfList = true;\n\t\treturn null;\n\t}\n\n\tasync loadAmount(queue, quantity = 50) {\n\t\tthis.setState({ rest: false });\n\t\tlet addQuantity = quantity;\n\t\taddQuantity += cardList.length;\n\n\t\trequestAfter = await this.loadPage(queue);\n\t\twhile (requestAfter && requestAfter !== -1 && cardList.length < addQuantity && !this.endOfList) {\n\t\t\trequestAfter = await this.loadPage(queue);\n\t\t}\n\n\t\tif (requestAfter === -1) {\n\t\t\trequestQueue = requestQueue.filter((a) => a !== queue);\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove this queue from queue list\n\t\trequestQueue.shift();\n\t\tthis.setState({ rest: true });\n\t}\n\n\tloadMore() {\n\t\tif (this.state.rest && !endOfList) {\n\t\t\tthis.loadAmount(requestQueue[0], 50);\n\t\t}\n\t}\n\n\tasync componentDidMount() {\n\t\tgridUpdateTabs = this.updateTabs.bind(this);\n\t\tgridUpdatePostsVisual = this.updatePostsVisual.bind(this);\n\n\t\tthis.configButton = new Spicetify.Menu.Item(\"Reddit config\", false, openConfig);\n\t\tthis.configButton.register();\n\n\t\tconst viewPort = document.querySelector(this.viewportSelector);\n\t\tthis.checkScroll = this.isScrolledBottom.bind(this);\n\t\tviewPort.addEventListener(\"scroll\", this.checkScroll);\n\n\t\tif (cardList.length) {\n\t\t\t// Already loaded\n\t\t\tif (lastScroll > 0) {\n\t\t\t\tviewPort.scrollTo(0, lastScroll);\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tthis.newRequest(30);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tgridUpdateTabs = gridUpdatePostsVisual = null;\n\t\tconst viewPort = document.querySelector(this.viewportSelector);\n\t\tlastScroll = viewPort.scrollTop;\n\t\tviewPort.removeEventListener(\"scroll\", this.checkScroll);\n\t\tthis.configButton.deregister();\n\t}\n\n\tisScrolledBottom(event) {\n\t\tconst viewPort = event.target;\n\t\tif (viewPort.scrollTop + viewPort.clientHeight >= viewPort.scrollHeight) {\n\t\t\t// At bottom, load more posts\n\t\t\tthis.loadMore();\n\t\t}\n\t}\n\n\trender() {\n\t\tconst expFeatures = JSON.parse(localStorage.getItem(\"spicetify-exp-features\") || \"{}\");\n\t\tconst isGlobalNav = expFeatures?.enableGlobalNavBar?.value !== \"control\";\n\t\tconst version = Spicetify.Platform.version.split(\".\").map((i) => Number.parseInt(i));\n\n\t\tconst tabBarMargin = {\n\t\t\tmarginTop: isGlobalNav || (version[0] === 1 && version[1] === 2 && version[2] >= 45) ? \"60px\" : \"0px\",\n\t\t};\n\t\treturn react.createElement(\n\t\t\t\"section\",\n\t\t\t{\n\t\t\t\tclassName: \"contentSpacing\",\n\t\t\t},\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"reddit-header\",\n\t\t\t\t\tstyle: tabBarMargin,\n\t\t\t\t},\n\t\t\t\treact.createElement(\"h1\", null, this.props.title),\n\t\t\t\treact.createElement(SortBox, {\n\t\t\t\t\tonChange: this.updateSort.bind(this),\n\t\t\t\t\tonServicesChange: this.updateTabs.bind(this),\n\t\t\t\t})\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tid: \"reddit-grid\",\n\t\t\t\t\tclassName: \"main-gridContainer-gridContainer main-gridContainer-fixedWidth\",\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\"--minimumColumnWidth\": \"180px\",\n\t\t\t\t\t\t\"--column-width\": \"minmax(var(--minimumColumnWidth),1fr)\",\n\t\t\t\t\t\t\"--column-count\": \"auto-fill\",\n\t\t\t\t\t\t\"--grid-gap\": \"24px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[...cardList]\n\t\t\t),\n\t\t\treact.createElement(\n\t\t\t\t\"footer\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tmargin: \"auto\",\n\t\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t!this.state.endOfList &&\n\t\t\t\t\t(this.state.rest ? react.createElement(LoadMoreIcon, { onClick: this.loadMore.bind(this) }) : react.createElement(LoadingIcon))\n\t\t\t),\n\t\t\t!!document.querySelector(\".main-topBar-topbarContentWrapper\") &&\n\t\t\t\treact.createElement(TopBarContent, {\n\t\t\t\t\tswitchCallback: this.switchTo.bind(this),\n\t\t\t\t\tlinks: CONFIG.services,\n\t\t\t\t\tactiveLink: CONFIG.lastService,\n\t\t\t\t})\n\t\t);\n\t}\n}\n\nasync function getSubreddit(after = \"\") {\n\t// www is needed or it will block with \"cross-origin\" error.\n\tlet url = `https://www.reddit.com/r/${CONFIG.lastService}/${sortConfig.by}.json?limit=100&count=10&raw_json=1`;\n\tif (after) {\n\t\turl += `&after=${after}`;\n\t}\n\tif (sortConfig.by.match(/top|controversial/) && sortConfig.time) {\n\t\turl += `&t=${sortConfig.time}`;\n\t}\n\n\treturn await fetch(url, { method: \"GET\" }).then((res) => res.json());\n}\n\nasync function fetchPlaylist(post) {\n\ttry {\n\t\tconst res = await Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${post.uri}/metadata`, {\n\t\t\tpolicy: {\n\t\t\t\tname: true,\n\t\t\t\tpicture: true,\n\t\t\t\tfollowers: true,\n\t\t\t},\n\t\t});\n\n\t\tconst { metadata } = res;\n\t\treturn {\n\t\t\ttype: typesLocale.playlist,\n\t\t\turi: post.uri,\n\t\t\ttitle: metadata.name,\n\t\t\tsubtitle: post.title,\n\t\t\timageURL: metadata.picture,\n\t\t\tupvotes: post.upvotes,\n\t\t\tfollowersCount: metadata.followers,\n\t\t};\n\t} catch {\n\t\treturn null;\n\t}\n}\n\nasync function fetchAlbum(post) {\n\tconst { getAlbum } = Spicetify.GraphQL.Definitions;\n\n\ttry {\n\t\tconst { data } = await Spicetify.GraphQL.Request(getAlbum, {\n\t\t\turi: post.uri,\n\t\t\tlocale: Spicetify.Locale.getLocale(),\n\t\t\toffset: 0,\n\t\t\tlimit: 10,\n\t\t});\n\t\tconst metadata = data.albumUnion;\n\n\t\treturn {\n\t\t\ttype: typesLocale.album,\n\t\t\turi: post.uri,\n\t\t\ttitle: metadata.name,\n\t\t\tsubtitle: metadata.artists.items.map((artist) => artist.profile.name).join(\", \"),\n\t\t\timageURL: metadata.coverArt.sources.reduce((prev, curr) => (prev.width > curr.width ? prev : curr)).url,\n\t\t\tupvotes: post.upvotes,\n\t\t};\n\t} catch {\n\t\treturn null;\n\t}\n}\n\nasync function fetchTrack(post) {\n\tconst arg = post.uri.split(\":\")[2];\n\ttry {\n\t\tconst metadata = await Spicetify.CosmosAsync.get(`https://api.spotify.com/v1/tracks/${arg}`);\n\t\treturn {\n\t\t\ttype: typesLocale.song,\n\t\t\turi: post.uri,\n\t\t\ttitle: metadata.name,\n\t\t\tsubtitle: metadata.artists,\n\t\t\timageURL: metadata.album.images[0].url,\n\t\t\tupvotes: post.upvotes,\n\t\t};\n\t} catch {\n\t\treturn null;\n\t}\n}\n\nfunction postMapper(posts) {\n\tconst mappedPosts = [];\n\tfor (const post of posts) {\n\t\tconst uri = URI.from(post.data.url);\n\t\tif (uri && (uri.type === \"playlist\" || uri.type === \"playlist-v2\" || uri.type === \"track\" || uri.type === \"album\")) {\n\t\t\tmappedPosts.push({\n\t\t\t\turi: uri.toURI(),\n\t\t\t\ttype: uri.type,\n\t\t\t\ttitle: post.data.title,\n\t\t\t\tupvotes: post.data.ups,\n\t\t\t});\n\t\t}\n\t}\n\treturn mappedPosts;\n}\n" }, { "path": "CustomApps/reddit/manifest.json", "content": "{\n\t\"name\": \"Reddit\",\n\t\"icon\": \"\",\n\t\"active-icon\": \"\",\n\t\"subfiles\": [\"Card.js\", \"Icons.js\", \"OptionsMenu.js\", \"SortBox.js\", \"TabBar.js\", \"Settings.js\"]\n}\n" }, { "path": "CustomApps/reddit/style.css", "content": ".setting-row::after {\n\tcontent: \"\";\n\tdisplay: table;\n\tclear: both;\n}\n.setting-row .col {\n\tdisplay: flex;\n\tpadding: 10px 0;\n\talign-items: center;\n}\n.setting-row .col.description {\n\tfloat: left;\n\tpadding-right: 15px;\n\tcursor: default;\n}\n.setting-row .col.action {\n\tfloat: right;\n\ttext-align: right;\n}\nbutton.switch {\n\talign-items: center;\n\tborder: 0px;\n\tborder-radius: 50%;\n\tbackground-color: rgba(var(--spice-rgb-shadow), 0.7);\n\tcolor: var(--spice-text);\n\tcursor: pointer;\n\tdisplay: flex;\n\tmargin-inline-start: 12px;\n\tpadding: 8px;\n}\nbutton.switch.disabled,\nbutton.switch[disabled] {\n\tcolor: rgba(var(--spice-rgb-text), 0.3);\n}\nbutton.switch.small {\n\twidth: 22px;\n\theight: 22px;\n\tpadding: 6px;\n}\n.reddit-sort-container .optionsMenu-dropBox {\n\tgrid-gap: 8px;\n\talign-items: center;\n\tbackground-color: transparent;\n\tborder-radius: 4px;\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 16px;\n\tcolor: rgba(var(--spice-rgb-text), 0.7);\n\tborder: 0;\n\theight: 32px;\n\tmargin-left: 8px;\n\tpadding: 0 8px 0 12px;\n}\n.reddit-sort-container .optionsMenu-dropBox:hover {\n\tcolor: var(--spice-text);\n}\n#reddit-config-container input {\n\twidth: 100%;\n\tmargin-top: 10px;\n\tpadding: 0 5px;\n\theight: 32px;\n\tborder: 0;\n\tcolor: var(--spice-text);\n\tbackground-color: initial;\n\tborder-bottom: 1px solid var(--spice-text);\n}\n\noption {\n\tbackground-color: var(--spice-button);\n}\n\n.reddit-header {\n\t-webkit-box-pack: justify;\n\t-webkit-box-align: center;\n\talign-content: space-between;\n\talign-items: center;\n\tcolor: var(--spice-text);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin: 16px 0;\n}\n\n/* New layout top bar height = 64px + Original margin = 16px */\n.Root__fixed-top-bar ~ .Root__main-view .reddit-header {\n\tmargin-top: 80px;\n}\n\n.reddit-sort-bar {\n\talign-items: center;\n\tdisplay: flex;\n}\n\n.reddit-sort-container {\n\tposition: relative;\n\tdisplay: flex;\n}\n\n.reddit-tabBar-headerItem {\n\t-webkit-app-region: no-drag;\n\tdisplay: inline-block;\n\tpointer-events: auto;\n}\n\n.reddit-tabBar-headerItemLink {\n\tmargin: 0 8px 0 0;\n}\n\n.reddit-tabBar-active {\n\tbackground-color: var(--spice-tab-active);\n\tborder-radius: 4px;\n}\n\n.reddit-tabBar-headerItemLink {\n\tborder-radius: 4px;\n\tcolor: var(--spice-text);\n\tdisplay: inline-block;\n\tmargin: 0 8px;\n\tpadding: 8px 16px;\n\tposition: relative;\n\ttext-decoration: none !important;\n\tcursor: pointer;\n}\n\n.reddit-tabBar-nav {\n\t-webkit-app-region: drag;\n\tpointer-events: none;\n\twidth: 100%;\n}\n\n.reddit-tabBar-headerItem .optionsMenu-dropBox {\n\tcolor: var(--spice-text);\n\tborder: 0;\n\tmax-width: 150px;\n\theight: 42px;\n\tpadding: 0 30px 0 12px;\n\tbackground-color: initial;\n\tcursor: pointer;\n\tappearance: none;\n}\n\n.reddit-tabBar-headerItem .optionsMenu-dropBox svg {\n\tposition: absolute;\n\tmargin-left: 8px;\n}\n\ndiv.reddit-tabBar-headerItemLink {\n\tpadding: 0;\n}\n\n.reddit-cardSubHeader {\n\tmargin-top: 4px;\n\twhite-space: normal;\n\tcolor: var(--spice-subtext);\n}\n\n.reddit-longDescription {\n\tdisplay: flex;\n}\n.reddit-header + .main-gridContainer-gridContainer .main-card-card .main-playButton-PlayButton button {\n\t-webkit-tap-highlight-color: transparent;\n\tbackground-color: transparent;\n\tborder: 0px;\n\tborder-radius: 500px;\n\tdisplay: inline-block;\n\tposition: relative;\n\ttouch-action: manipulation;\n\ttransition-duration: 33ms;\n\ttransition-property: background-color, border-color, color, box-shadow, filter, transform;\n\tuser-select: none;\n\tvertical-align: middle;\n\ttransform: translate3d(0px, 0px, 0px);\n\tpadding: 0px;\n\tmin-inline-size: 0px;\n\talign-self: center;\n}\n.reddit-header + .main-gridContainer-gridContainer .main-card-card .main-playButton-PlayButton span {\n\t-webkit-tap-highlight-color: transparent;\n\tposition: relative;\n\tbackground-color: var(--spice-button-active);\n\tcolor: var(--spice-sidebar);\n\tdisplay: flex;\n\tborder-radius: 500px;\n\tfont-size: inherit;\n\tmin-block-size: 48px;\n\t-webkit-box-align: center;\n\talign-items: center;\n\t-webkit-box-pack: center;\n\tjustify-content: center;\n\tinline-size: 48px;\n\tblock-size: 48px;\n}\n.reddit-header + .main-gridContainer-gridContainer .main-card-card .main-playButton-PlayButton span:hover {\n\ttransform: scale(1.04);\n}\n" }, { "path": "Extensions/autoSkipExplicit.js", "content": "// NAME: Christian Spotify\n// AUTHOR: khanhas\n// DESCRIPTION: Auto skip explicit songs. Toggle in Profile menu.\n\n/// \n\n(async function ChristianSpotify() {\n\tif (!Spicetify.LocalStorage) {\n\t\tsetTimeout(ChristianSpotify, 1000);\n\t\treturn;\n\t}\n\tawait new Promise((res) => Spicetify.Events.webpackLoaded.on(res));\n\n\tlet isEnabled = Spicetify.LocalStorage.get(\"ChristianMode\") === \"1\";\n\n\tnew Spicetify.Menu.Item(\"Christian mode\", isEnabled, (self) => {\n\t\tisEnabled = !isEnabled;\n\t\tSpicetify.LocalStorage.set(\"ChristianMode\", isEnabled ? \"1\" : \"0\");\n\t\tself.setState(isEnabled);\n\t}).register();\n\n\tSpicetify.Player.addEventListener(\"songchange\", () => {\n\t\tif (!isEnabled) return;\n\t\tconst data = Spicetify.Player.data || Spicetify.Queue;\n\t\tif (!data) return;\n\n\t\tconst isExplicit = data.item.metadata.is_explicit;\n\t\tif (isExplicit === \"true\") {\n\t\t\tSpicetify.Player.next();\n\t\t}\n\t});\n})();\n" }, { "path": "Extensions/autoSkipVideo.js", "content": "// NAME: Auto Skip Video\n// AUTHOR: khanhas\n// DESCRIPTION: Auto skip video\n\n/// \n\n(function SkipVideo() {\n\tSpicetify.Player.addEventListener(\"songchange\", () => {\n\t\tconst data = Spicetify.Player.data || Spicetify.Queue;\n\t\tif (!data) return;\n\n\t\tconst meta = data.item.metadata;\n\t\t// Ads are also video media type so I need to exclude them out.\n\t\tif (meta[\"media.type\"] === \"video\" && meta.is_advertisement !== \"true\") {\n\t\t\tSpicetify.Player.next();\n\t\t}\n\t});\n})();\n" }, { "path": "Extensions/bookmark.js", "content": "// NAME: Bookmark\n// AUTHOR: khanhas\n// VERSION: 2.0\n// DESCRIPTION: Store page, track, track with time to view/listen later.\n\n/// \n\n(function Bookmark() {\n\tconst { CosmosAsync, Player, LocalStorage, ContextMenu, URI } = Spicetify;\n\tif (!(CosmosAsync && URI)) {\n\t\tsetTimeout(Bookmark, 300);\n\t\treturn;\n\t}\n\n\t// UI Text\n\tconst BUTTON_NAME_TEXT = \"Bookmark\";\n\tconst REMOVE_TEXT = \"Remove\";\n\n\t// Local Storage keys\n\tconst STORAGE_KEY = \"bookmark_spicetify\";\n\n\tclass BookmarkCollection {\n\t\tconstructor() {\n\t\t\tconst menu = createMenu();\n\t\t\tthis.container = menu.container;\n\t\t\tthis.items = menu.menu;\n\t\t\tthis.lastScroll = 0;\n\t\t\tthis.container.onclick = () => {\n\t\t\t\tthis.storeScroll();\n\t\t\t\tthis.container.remove();\n\t\t\t};\n\t\t\tthis.filter = 0;\n\t\t\tthis.apply();\n\t\t}\n\n\t\tapply() {\n\t\t\tthis.items.textContent = \"\"; // Remove all childs\n\t\t\tthis.items.append(createMenuItem(\"Current page\", storeThisPage));\n\t\t\tthis.items.append(createMenuItem(\"Track\", storeTrack));\n\t\t\tthis.items.append(createMenuItem(\"Track with timestamp\", storeTrackWithTime));\n\n\t\t\tconst select = createSortSelect(this.filter);\n\t\t\tselect.onchange = (event) => {\n\t\t\t\tthis.filter = event.srcElement.selectedIndex;\n\t\t\t\tthis.apply();\n\t\t\t};\n\t\t\tthis.items.append(select);\n\n\t\t\tconst collection = this.getStorage();\n\t\t\tfor (const item of collection) {\n\t\t\t\tif (this.filter !== 0) {\n\t\t\t\t\tconst isTrack = this.isTrack(item.uri);\n\t\t\t\t\tif (this.filter === 1 && isTrack) continue;\n\t\t\t\t\tif (this.filter === 2 && !isTrack) continue;\n\t\t\t\t}\n\n\t\t\t\tthis.items.append(new CardContainer(item));\n\t\t\t}\n\t\t}\n\n\t\tisTrack(uri) {\n\t\t\treturn uri.startsWith(\"spotify:track:\") || uri.startsWith(\"spotify:episode:\");\n\t\t}\n\n\t\tgetStorage() {\n\t\t\tconst storageRaw = LocalStorage.get(STORAGE_KEY);\n\t\t\tlet storage = [];\n\n\t\t\tif (storageRaw) {\n\t\t\t\tstorage = JSON.parse(storageRaw);\n\t\t\t} else {\n\t\t\t\tLocalStorage.set(STORAGE_KEY, \"[]\");\n\t\t\t}\n\n\t\t\treturn storage;\n\t\t}\n\n\t\taddToStorage(data) {\n\t\t\tdata.id = `${data.uri}-${new Date().getTime()}`;\n\n\t\t\t/** @type {Object[]} */\n\t\t\tconst storage = this.getStorage();\n\t\t\tstorage.unshift(data);\n\n\t\t\tLocalStorage.set(STORAGE_KEY, JSON.stringify(storage));\n\t\t\tthis.apply();\n\t\t}\n\n\t\tremoveFromStorage(id) {\n\t\t\tconst storage = this.getStorage().filter((item) => item.id !== id);\n\n\t\t\tLocalStorage.set(STORAGE_KEY, JSON.stringify(storage));\n\t\t\tthis.apply();\n\t\t}\n\n\t\tchangePosition(x, y) {\n\t\t\tthis.items.style.left = `${x}px`;\n\t\t\tthis.items.style.top = `${y + 40}px`;\n\t\t}\n\n\t\tstoreScroll() {\n\t\t\tthis.lastScroll = this.items.scrollTop;\n\t\t}\n\n\t\tsetScroll() {\n\t\t\tthis.items.scrollTop = this.lastScroll;\n\t\t}\n\t}\n\n\tclass CardContainer extends HTMLElement {\n\t\tconstructor(info) {\n\t\t\tsuper();\n\t\t\tconst uri = URI.fromString(info.uri);\n\t\t\tconst isPlayable =\n\t\t\t\turi.type === URI.Type.TRACK ||\n\t\t\t\turi.type === URI.Type.PLAYLIST_V2 ||\n\t\t\t\turi.type === URI.Type.ALBUM ||\n\t\t\t\turi.type === URI.Type.EPISODE ||\n\t\t\t\turi.type === URI.Type.PLAYLIST;\n\n\t\t\tthis.innerHTML = `\n\n
\n ${\n\t\t\tinfo.imageUrl\n\t\t\t\t? `\"${info.title}\"`\n\t\t\t\t: \"\"\n\t\t}\n
\n
${info.title}
\n
${info.description}
\n ${\n\t\t\t\t\tinfo.time\n\t\t\t\t\t\t? `\n
\n
\n
\n
\n ${Player.formatTime(info.time)}\n
\n `\n\t\t\t\t\t\t: \"\"\n\t\t\t\t}\n
\n ${\n\t\t\tisPlayable\n\t\t\t\t? `
`\n\t\t\t\t: \"\"\n\t\t}\n \n
\n`;\n\n\t\t\tSpicetify.Tippy(this.querySelectorAll(\"[data-tippy-content]\"), Spicetify.TippyProps);\n\t\t\tif (isPlayable) {\n\t\t\t\t/** @type {HTMLButtonElement} */\n\t\t\t\tconst playButton = this.querySelector(\"button.main-playButton-PlayButton\");\n\t\t\t\tplayButton.onclick = (event) => {\n\t\t\t\t\tonPlayClick(info);\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t/** @type {HTMLDivElement} */\n\t\t\tconst controls = this.querySelector(\".bookmark-controls\");\n\t\t\tcontrols.onclick = (event) => {\n\t\t\t\tLIST.removeFromStorage(info.id);\n\t\t\t\tevent.stopPropagation();\n\t\t\t};\n\n\t\t\tthis.onclick = () => onLinkClick(info);\n\t\t}\n\t}\n\n\tcustomElements.define(\"bookmark-card-container\", CardContainer);\n\n\tconst LIST = new BookmarkCollection();\n\n\tnew Spicetify.Topbar.Button(\n\t\tBUTTON_NAME_TEXT,\n\t\t``,\n\t\t(self) => {\n\t\t\tconst bound = self.element.getBoundingClientRect();\n\t\t\tLIST.changePosition(bound.left, bound.top);\n\t\t\tdocument.body.append(LIST.container);\n\t\t\tLIST.setScroll();\n\t\t}\n\t);\n\n\t/**\n\t *\n\t * @param {string} title\n\t * @param {() => void} callback\n\t */\n\tfunction createMenuItem(title, callback) {\n\t\tconst wrapper = document.createElement(\"div\");\n\t\tSpicetify.ReactDOM.render(\n\t\t\tSpicetify.React.createElement(\n\t\t\t\tSpicetify.ReactComponent.MenuItem,\n\t\t\t\t{\n\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\tcallback?.();\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\ttitle\n\t\t\t),\n\t\t\twrapper\n\t\t);\n\n\t\treturn wrapper;\n\t}\n\n\tfunction createSortSelect(defaultOpt = 0) {\n\t\tconst select = document.createElement(\"select\");\n\t\tselect.className = \"GlueDropdown bookmark-filter\";\n\t\tconst allOpt = document.createElement(\"option\");\n\t\tallOpt.text = \"All\";\n\t\tconst pageOpt = document.createElement(\"option\");\n\t\tpageOpt.text = \"Page\";\n\t\tconst trackOpt = document.createElement(\"option\");\n\t\ttrackOpt.text = \"Track\";\n\n\t\tselect.onclick = (ev) => ev.stopPropagation();\n\t\tselect.append(allOpt, pageOpt, trackOpt);\n\t\tselect.options[defaultOpt].selected = true;\n\n\t\treturn select;\n\t}\n\n\tasync function storeThisPage() {\n\t\tlet title;\n\t\tlet description;\n\t\tlet contextUri;\n\n\t\tconst context = Spicetify.Platform.History.location.pathname;\n\t\ttry {\n\t\t\tcontextUri = Spicetify.URI.fromString(context);\n\t\t} catch (e) {\n\t\t\tSpicetify.showNotification(\"Cannot bookmark this page\", true);\n\t\t\treturn;\n\t\t}\n\t\tconst uri = contextUri.toURI();\n\n\t\tconst titleElem =\n\t\t\tdocument.querySelector(\".Root__main-view h1\") ||\n\t\t\tdocument.querySelector(\".Root__main-view h2\") ||\n\t\t\tdocument.querySelector(\".Root__main-view h3\") ||\n\t\t\tdocument.querySelector(\".Root__main-view a\");\n\n\t\tif (titleElem) {\n\t\t\ttitle = titleElem.innerText;\n\t\t}\n\n\t\tif (!title && contextUri.type === URI.Type.APPLICATION) {\n\t\t\ttitle = idToProperName(contextUri.id);\n\t\t\tdescription = \"Application\";\n\t\t} else {\n\t\t\tdescription = contextUri.type.replace(/-.+$/, \"\");\n\t\t\tconst tail = context.split(\"/\");\n\t\t\tif (tail.length > 3) {\n\t\t\t\tdescription += ` ${tail[3]}`;\n\t\t\t}\n\t\t\tdescription = idToProperName(description);\n\t\t}\n\n\t\tconst headerElem = document.querySelector(\".Root__main-view .main-entityHeader-background\");\n\t\tlet imageUrl = headerElem?.style.backgroundImage.replace('url(\"', \"\").replace('\")', \"\");\n\n\t\tif (!imageUrl) {\n\t\t\tconst firstImgElem = document.querySelector(\".Root__main-view img\");\n\t\t\timageUrl = firstImgElem?.src;\n\t\t}\n\n\t\tLIST.addToStorage({\n\t\t\turi,\n\t\t\ttitle,\n\t\t\tdescription,\n\t\t\timageUrl,\n\t\t\tcontext,\n\t\t});\n\t}\n\n\tfunction getTrackMeta() {\n\t\tconst meta = {\n\t\t\ttitle: Player.data.item.metadata.title,\n\t\t\timageUrl: Player.data.item.metadata.image_url,\n\t\t};\n\t\tmeta.uri = Player.data.item.uri;\n\t\tif (URI.isEpisode(meta.uri)) {\n\t\t\tmeta.description = Player.data.item.metadata.album_title;\n\t\t} else {\n\t\t\tmeta.description = Player.data.item.metadata.artist_name;\n\t\t}\n\t\tconst playerState = Spicetify.Player.data;\n\t\tconst contextUri = URI.fromString(playerState.context_uri ?? playerState.context.uri);\n\t\tif (contextUri && (contextUri.type === URI.Type.PLAYLIST || contextUri.type === URI.Type.PLAYLIST_V2 || contextUri.type === URI.Type.ALBUM)) {\n\t\t\tmeta.context = `/${contextUri.toURLPath()}?uid=${Player.data.item.uid}`;\n\t\t}\n\n\t\treturn meta;\n\t}\n\n\tfunction storeTrack() {\n\t\tLIST.addToStorage(getTrackMeta());\n\t}\n\n\tfunction storeTrackWithTime() {\n\t\tconst meta = getTrackMeta();\n\t\tmeta.time = Player.getProgress();\n\t\tmeta.progress = Player.getProgressPercent();\n\t\tLIST.addToStorage(meta);\n\t}\n\n\t// Utilities\n\tfunction idToProperName(id) {\n\t\tconst newId = id.replace(/-/g, \" \").replace(/^.|\\s./g, (char) => char.toUpperCase());\n\n\t\treturn newId;\n\t}\n\n\tfunction createMenu() {\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.id = \"bookmark-spicetify\";\n\t\tcontainer.className = \"context-menu-container\";\n\t\tcontainer.style.zIndex = \"1029\";\n\n\t\tconst style = document.createElement(\"style\");\n\t\tstyle.textContent = `\n#bookmark-spicetify {\n position: absolute;\n left: 0;\n right: 0;\n width: 100vw;\n height: 100vh;\n z-index: 5000;\n}\n#bookmark-menu {\n display: inline-block;\n width: 25%;\n min-width: 380px;\n max-height: 70%;\n overflow: hidden auto;\n padding-bottom: 10px;\n position: absolute;\n z-index: 5001;\n}\n.bookmark-card {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-top: 20px;\n cursor: pointer;\n padding: 0 10px;\n}\n.bookmark-card-image {\n width: 70px;\n height: 70px;\n object-fit: cover;\n object-position: center center;\n border-radius: 4px;\n}\n.bookmark-card-info {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 100%;\n padding: 10px 20px;\n color: var(--spice-text);\n}\n.bookmark-card-info span {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n white-space: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.bookmark-filter {\n margin-top: 7px;\n margin-left: 8px;\n border-radius: 4px;\n padding: 0 8px 0 12px;\n height: 32px;\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--spice-text);\n}\n.bookmark-controls {\n margin: 10px 0 10px 10px;\n width: 24px;\n height: 24px;\n align-items: center;\n background-color: rgba(var(--spice-rgb-shadow),.7);\n border: none;\n border-radius: 50%;\n color: var(--spice-text);\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding: 8px;\n}\n.bookmark-fixed-height {\n height: 30px;\n display: flex;\n align-items: center;\n}\n.bookmark-progress {\n overflow: hidden;\n width: 100px;\n height: 4px;\n border-radius: 2px;\n background-color: rgba(var(--spice-rgb-text), .2);\n}\n\n.bookmark-progress__bar {\n --progress: 0;\n width: calc(var(--progress) * 100%);\n height: 4px;\n background-color: var(--spice-text);\n}\n\n.bookmark-progress__time {\n padding-left: 5px;\n color: var(--spice-subtext);\n}\n`;\n\n\t\tconst menu = document.createElement(\"ul\");\n\t\tmenu.id = \"bookmark-menu\";\n\t\tmenu.className = \"main-contextMenu-menu\";\n\t\tmenu.onclick = (e) => e.stopPropagation();\n\n\t\tcontainer.append(style, menu);\n\n\t\treturn { container, menu };\n\t}\n\n\t/**\n\t * Handle Link click event when item context is a playlist\n\t */\n\tasync function onLinkClick(info) {\n\t\tif (info.context?.startsWith(\"/\")) {\n\t\t\tSpicetify.Platform.History.push(info.context);\n\t\t\treturn;\n\t\t}\n\t\tconst url = Spicetify.URI.fromString(info.uri).toURLPath(true);\n\t\tSpicetify.Platform.History.push(url);\n\t}\n\n\tfunction onPlayClick(info) {\n\t\tlet uri = info.uri;\n\t\tconst options = {};\n\t\tif (info.time) {\n\t\t\toptions.seekTo = info.time;\n\t\t}\n\t\tif (info.context?.startsWith(\"/\")) {\n\t\t\turi = URI.fromString(info.context).toURI();\n\t\t\tif (uri !== info.uri) {\n\t\t\t\toptions.skipTo = {};\n\t\t\t\toptions.skipTo.uid = info.context.split(\"?uid=\", 2)[1];\n\t\t\t\toptions.skipTo.uri = info.uri;\n\t\t\t}\n\t\t}\n\n\t\tSpicetify.Player.playUri(uri, {}, options);\n\t}\n\n\tconst fetchAlbum = async (uri) => {\n\t\tconst { getAlbum } = Spicetify.GraphQL.Definitions;\n\t\tconst { data } = await Spicetify.GraphQL.Request(getAlbum, {\n\t\t\turi,\n\t\t\tlocale: Spicetify.Locale.getLocale(),\n\t\t\toffset: 0,\n\t\t\tlimit: 10,\n\t\t});\n\t\tconst res = data.albumUnion;\n\t\treturn {\n\t\t\turi,\n\t\t\ttitle: res.name,\n\t\t\tdescription: \"Album\",\n\t\t\timageUrl: res.coverArt.sources.reduce((prev, curr) => (prev.width > curr.width ? prev : curr)).url,\n\t\t};\n\t};\n\n\tconst fetchShow = async (uri) => {\n\t\tconst base62 = uri.split(\":\")[2];\n\t\tconst res = await CosmosAsync.get(`sp://core-show/v1/shows/${base62}?responseFormat=protobufJson`, {\n\t\t\tpolicy: { list: { index: true } },\n\t\t});\n\t\treturn {\n\t\t\turi,\n\t\t\ttitle: res.header.showMetadata.name,\n\t\t\tdescription: \"Podcast\",\n\t\t\timageUrl: res.header.showMetadata.covers.standardLink,\n\t\t};\n\t};\n\n\tconst fetchArtist = async (uri) => {\n\t\tconst { queryArtistOverview } = Spicetify.GraphQL.Definitions;\n\t\tconst { data } = await Spicetify.GraphQL.Request(queryArtistOverview, {\n\t\t\turi,\n\t\t\tlocale: Spicetify.Locale.getLocale(),\n\t\t\tincludePrerelease: false,\n\t\t});\n\t\tconst res = data.artistUnion;\n\t\treturn {\n\t\t\turi,\n\t\t\ttitle: res.profile.name,\n\t\t\tdescription: \"Artist\",\n\t\t\timageUrl:\n\t\t\t\tres.visuals.avatarImage?.sources.reduce((prev, curr) => (prev.width > curr.width ? prev : curr)).url ||\n\t\t\t\tres.visuals.headerImage?.sources[0].url,\n\t\t};\n\t};\n\n\tconst fetchTrack = async (uri, uid, context) => {\n\t\tconst base62 = uri.split(\":\")[2];\n\t\tconst res = await CosmosAsync.get(`https://api.spotify.com/v1/tracks/${base62}`);\n\t\tlet newContext;\n\t\tif (context && uid && Spicetify.URI.isPlaylistV1OrV2(context)) {\n\t\t\tnewContext = `${Spicetify.URI.fromString(context).toURLPath(true)}?uid=${uid}`;\n\t\t}\n\t\treturn {\n\t\t\turi,\n\t\t\ttitle: res.name,\n\t\t\tdescription: res.artists[0].name,\n\t\t\timageUrl: res.album.images[0].url,\n\t\t\tcontext: newContext ?? context,\n\t\t};\n\t};\n\n\tconst fetchEpisode = async (uri) => {\n\t\tconst base62 = uri.split(\":\")[2];\n\t\tconst res = await CosmosAsync.get(`https://api.spotify.com/v1/episodes/${base62}`);\n\t\tconsole.log(res);\n\t\treturn {\n\t\t\turi,\n\t\t\ttitle: res.name,\n\t\t\tdescription: `${res.show.name} episode`,\n\t\t\timageUrl: res.show.images[0].url,\n\t\t};\n\t};\n\n\tconst fetchPlaylist = async (uri) => {\n\t\tconst res = await Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri}/metadata`, {\n\t\t\tpolicy: { picture: true, name: true },\n\t\t});\n\t\treturn {\n\t\t\turi,\n\t\t\ttitle: res.metadata.name,\n\t\t\tdescription: \"Playlist\",\n\t\t\timageUrl: res.metadata.picture,\n\t\t};\n\t};\n\n\tnew Spicetify.ContextMenu.Item(\n\t\t\"Bookmark\",\n\t\tasync ([uri], [uid] = [], context = undefined) => {\n\t\t\tconst type = uri.split(\":\")[1];\n\t\t\tlet meta;\n\t\t\tswitch (type) {\n\t\t\t\tcase Spicetify.URI.Type.TRACK:\n\t\t\t\t\tmeta = await fetchTrack(uri, uid, context);\n\t\t\t\t\tbreak;\n\t\t\t\tcase Spicetify.URI.Type.ALBUM:\n\t\t\t\t\tmeta = await fetchAlbum(uri);\n\t\t\t\t\tbreak;\n\t\t\t\tcase Spicetify.URI.Type.ARTIST:\n\t\t\t\t\tmeta = await fetchArtist(uri);\n\t\t\t\t\tbreak;\n\t\t\t\tcase Spicetify.URI.Type.SHOW:\n\t\t\t\t\tmeta = await fetchShow(uri);\n\t\t\t\t\tbreak;\n\t\t\t\tcase Spicetify.URI.Type.EPISODE:\n\t\t\t\t\tmeta = await fetchEpisode(uri);\n\t\t\t\t\tbreak;\n\t\t\t\tcase Spicetify.URI.Type.PLAYLIST:\n\t\t\t\tcase Spicetify.URI.Type.PLAYLIST_V2:\n\t\t\t\t\tmeta = await fetchPlaylist(uri);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tLIST.addToStorage(meta);\n\t\t},\n\t\t([uri]) => {\n\t\t\tconst type = uri.split(\":\")[1];\n\t\t\tswitch (type) {\n\t\t\t\tcase Spicetify.URI.Type.TRACK:\n\t\t\t\tcase Spicetify.URI.Type.ALBUM:\n\t\t\t\tcase Spicetify.URI.Type.ARTIST:\n\t\t\t\tcase Spicetify.URI.Type.SHOW:\n\t\t\t\tcase Spicetify.URI.Type.EPISODE:\n\t\t\t\tcase Spicetify.URI.Type.PLAYLIST:\n\t\t\t\tcase Spicetify.URI.Type.PLAYLIST_V2:\n\t\t\t\t\treturn true;\n\t\t\t}\n\t\t\treturn false;\n\t\t},\n\t\t``\n\t).register();\n})();\n" }, { "path": "Extensions/fullAppDisplay.js", "content": "// NAME: Full App Display\n// AUTHOR: khanhas\n// VERSION: 1.0\n// DESCRIPTION: Fancy artwork and track status display.\n\n/// \n(function FullAppDisplay() {\n\tif (!Spicetify.Keyboard || !Spicetify.React || !Spicetify.ReactDOM) {\n\t\tsetTimeout(FullAppDisplay, 200);\n\t\treturn;\n\t}\n\n\tconst { React: react, ReactDOM: reactDOM } = Spicetify;\n\tconst { useState, useEffect, useRef } = react;\n\n\tconst CONFIG = getConfig();\n\tlet updateVisual;\n\n\tconst style = document.createElement(\"style\");\n\tconst styleBase = `\n#full-app-display {\n display: none;\n position: fixed;\n width: 100%;\n height: 100%;\n cursor: default;\n left: 0;\n top: 0;\n}\n#full-app-display.hide-cursor {\n\tcursor: none;\n}\n#fad-header {\n position: fixed;\n width: 100%;\n height: 80px;\n -webkit-app-region: drag;\n}\n#fad-body {\n height: 100vh;\n}\n#fad-foreground {\n position: relative;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: scale(var(--fad-scale));\n}\n#fad-art-image {\n position: relative;\n width: 100%;\n height: 100%;\n padding-bottom: 100%;\n border-radius: 15px;\n background-size: cover;\n}\n#fad-art-inner {\n position: absolute;\n left: 3%;\n bottom: 0;\n width: 94%;\n height: 94%;\n z-index: -1;\n backface-visibility: hidden;\n transform: translateZ(0);\n filter: blur(6px);\n backdrop-filter: blur(6px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);\n}\n#fad-art-overlay {\n display: none;\n}\n#fad-art:hover #fad-art-overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n border-radius: 15px;\n backdrop-filter: brightness(0.75);\n}\n#fad-heart {\n background-color: transparent;\n border: 0;\n color: #fff;\n padding: 0 5px;\n cursor: pointer;\n}\n#fad-progress-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n gap: 10px;\n}\n#fad-progress {\n width: 100%;\n height: 6px;\n border-radius: 6px;\n background-color: #ffffff50;\n flex-grow: 1;\n min-width: 150px;\n}\n#fad-progress:hover #fad-progress-inner {\n background-color: var(--spice-button);\n}\n#fad-progress:hover #fad-thumb {\n visibility: visible;\n}\n#fad-progress-inner {\n width: var(--progress-width);\n height: 100%;\n border-radius: 6px;\n background-color: #ffffff;\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.8);\n\tposition: relative;\n}\n#fad-thumb {\n position: absolute;\n top: -3px;\n right: -6px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #ffffff;\n cursor: pointer;\n visibility: hidden;\n}\n#fad-background {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: -2;\n}\nbody.fad-activated #full-app-display {\n display: block\n}\n.fad-background-fade {\n transition: background-image 1s linear;\n}\nbody.video-full-screen.video-full-screen--hide-ui {\n cursor: auto;\n}\n#fad-controls button {\n background-color: transparent;\n border: 0;\n color: currentColor;\n padding: 0 5px;\n cursor: pointer;\n}\n#fad-controls button svg {\n vertical-align: middle;\n}\n#fad-elapsed, #fad-duration {\n font-variant-numeric: tabular-nums;\n}\n#fad-artist svg, #fad-album svg, #fad-release-date svg {\n display: inline-block;\n}\n::-webkit-scrollbar {\n width: 8px;\n}\n`;\n\n\tconst styleChoices = [\n\t\t`\n#fad-foreground {\n flex-direction: row;\n text-align: left;\n}\n#fad-art {\n width: calc(100vw - 840px);\n min-width: 200px;\n max-width: 340px;\n}\n#fad-details {\n padding-left: 50px;\n line-height: initial;\n max-width: 70%;\n color: #FFFFFF;\n}\n#fad-title {\n font-size: 87px;\n font-weight: var(--glue-font-weight-black);\n}\n#fad-artist, #fad-album, #fad-release-date {\n font-size: 54px;\n font-weight: var(--glue-font-weight-medium);\n}\n#fad-artist svg, #fad-album svg, #fad-release-date svg {\n margin-right: 5px;\n}\n#fad-status {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n#fad-status.active {\n margin-top: 20px;\n}\n#fad-controls {\n display: flex;\n margin: 0 auto;\n}`,\n\t\t`\n#fad-art {\n width: calc(100vh - 400px);\n max-width: 340px;\n}\n#fad-foreground {\n flex-direction: column;\n text-align: center;\n}\n#fad-details {\n padding-top: 50px;\n line-height: initial;\n max-width: 70%;\n color: #FFFFFF;\n}\n#fad-title {\n font-size: 54px;\n font-weight: var(--glue-font-weight-black);\n}\n#fad-artist, #fad-album, #fad-release-date {\n font-size: 33px;\n font-weight: var(--glue-font-weight-medium);\n}\n#fad-artist svg, #fad-album svg, #fad-release-date svg {\n width: 25px;\n height: 25px;\n margin-right: 5px;\n}\n#fad-status {\n display: flex;\n min-width: 400px;\n max-width: 400px;\n align-items: center;\n flex-direction: column;\n}\n#fad-status.active {\n margin: 20px auto 0;\n}\n#fad-controls {\n margin-top: 20px;\n order: 2\n}\n#fad-progress-container {\n width: 100%;\n}`,\n\t];\n\n\tconst lyricsPlusBase = `\n#fad-body {\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n#fad-foreground {\n padding: 0 50px 0 100px;\n width: 50vw;\n}\n#fad-lyrics-plus-container {\n position: relative;\n width: 50vw;\n}\n`;\n\tconst lyricsPlusStyleChoices = [\n\t\t`\n#fad-title {\n font-size: 54px;\n}\n#fad-art {\n max-width: 210px;\n}`,\n\t\t\"\",\n\t];\n\tupdateStyle();\n\n\tconst DisplayIcon = ({ icon, size }) => {\n\t\treturn react.createElement(\"svg\", {\n\t\t\twidth: size,\n\t\t\theight: size,\n\t\t\tviewBox: \"0 0 16 16\",\n\t\t\tfill: \"currentColor\",\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: icon,\n\t\t\t},\n\t\t});\n\t};\n\n\tconst SubInfo = ({ text, id, icon }) => {\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tid,\n\t\t\t},\n\t\t\tCONFIG.icons && react.createElement(DisplayIcon, { icon, size: 35 }),\n\t\t\treact.createElement(\"span\", null, text)\n\t\t);\n\t};\n\n\tconst ButtonIcon = ({ icon, onClick }) => {\n\t\treturn react.createElement(\n\t\t\t\"button\",\n\t\t\t{\n\t\t\t\tonClick,\n\t\t\t},\n\t\t\treact.createElement(DisplayIcon, { icon, size: 20 })\n\t\t);\n\t};\n\n\tconst ProgressBar = () => {\n\t\tconst [progress, setProgress] = useState(Spicetify.Player.getProgress());\n\t\tconst duration = Spicetify.Platform.PlayerAPI._state.duration;\n\n\t\tconst progressDivRef = useRef(null);\n\t\tconst [isDragging, setIsDragging] = useState(false);\n\n\t\tuseEffect(() => {\n\t\t\tif (isDragging) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst update = ({ data }) => setProgress(data);\n\t\t\tSpicetify.Player.addEventListener(\"onprogress\", update);\n\t\t\treturn () => Spicetify.Player.removeEventListener(\"onprogress\", update);\n\t\t}, [isDragging]);\n\n\t\t// Handle click on progress bar to set progress\n\t\tconst handleClick = (e) => {\n\t\t\tconst container = progressDivRef.current;\n\t\t\tif (isDragging || !container) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst containerRect = container.getBoundingClientRect();\n\t\t\tconst clickX = e.clientX - containerRect.left;\n\t\t\tconst newProgress = (clickX / containerRect.width) * duration;\n\t\t\tSpicetify.Player.seek(newProgress);\n\t\t\tsetProgress(newProgress);\n\t\t};\n\n\t\t// Handle dragging functionality\n\t\tconst handleMouseDown = () => setIsDragging(true);\n\t\tconst handleMouseMove = (e) => {\n\t\t\tconst container = progressDivRef.current;\n\t\t\tif (!isDragging || !container) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst containerRect = container.getBoundingClientRect();\n\t\t\tconst offsetX = e.clientX - containerRect.left;\n\t\t\tconst newProgress = (offsetX / containerRect.width) * duration;\n\t\t\tsetProgress(newProgress);\n\t\t};\n\t\tconst handleMouseUp = () => {\n\t\t\tif (!isDragging) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tSpicetify.Player.seek(progress);\n\t\t\tsetIsDragging(false);\n\t\t};\n\n\t\t// Attach mousemove and mouseup listeners when dragging starts\n\t\tuseEffect(() => {\n\t\t\tif (isDragging) {\n\t\t\t\twindow.addEventListener(\"mousemove\", handleMouseMove);\n\t\t\t\twindow.addEventListener(\"mouseup\", handleMouseUp);\n\t\t\t} else {\n\t\t\t\twindow.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\t\twindow.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\t\twindow.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t\t};\n\t\t}, [isDragging]);\n\n\t\t// Calculate the thumb position\n\t\tconst thumbPosition = (progress / duration) * 100;\n\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{ id: \"fad-progress-container\" },\n\t\t\treact.createElement(\"span\", { id: \"fad-elapsed\" }, Spicetify.Player.formatTime(progress)),\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tid: \"fad-progress\",\n\t\t\t\t\tref: progressDivRef,\n\t\t\t\t\tonClick: handleClick,\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\"--progress-width\": `${thumbPosition}%`,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ id: \"fad-progress-inner\" },\n\t\t\t\t\treact.createElement(\"div\", {\n\t\t\t\t\t\tid: \"fad-thumb\",\n\t\t\t\t\t\tonMouseDown: handleMouseDown,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t),\n\t\t\treact.createElement(\"span\", { id: \"fad-duration\" }, Spicetify.Player.formatTime(duration))\n\t\t);\n\t};\n\n\tconst PlayerControls = () => {\n\t\tconst [value, setValue] = useState(Spicetify.Player.isPlaying());\n\t\tuseEffect(() => {\n\t\t\tconst update = ({ data }) => setValue(!data.isPaused);\n\t\t\tSpicetify.Player.addEventListener(\"onplaypause\", update);\n\t\t\treturn () => Spicetify.Player.removeEventListener(\"onplaypause\", update);\n\t\t});\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{ id: \"fad-controls\" },\n\t\t\treact.createElement(ButtonIcon, {\n\t\t\t\ticon: Spicetify.SVGIcons[\"skip-back\"],\n\t\t\t\tonClick: Spicetify.Player.back,\n\t\t\t}),\n\t\t\treact.createElement(ButtonIcon, {\n\t\t\t\ticon: Spicetify.SVGIcons[value ? \"pause\" : \"play\"],\n\t\t\t\tonClick: Spicetify.Player.togglePlay,\n\t\t\t}),\n\t\t\treact.createElement(ButtonIcon, {\n\t\t\t\ticon: Spicetify.SVGIcons[\"skip-forward\"],\n\t\t\t\tonClick: Spicetify.Player.next,\n\t\t\t})\n\t\t);\n\t};\n\n\tclass FAD extends react.Component {\n\t\tconstructor(props) {\n\t\t\tsuper(props);\n\n\t\t\tthis.state = {\n\t\t\t\ttitle: \"\",\n\t\t\t\tartist: \"\",\n\t\t\t\talbum: \"\",\n\t\t\t\treleaseDate: \"\",\n\t\t\t\tcover: \"\",\n\t\t\t\theart: Spicetify.Player.getHeart(),\n\t\t\t};\n\t\t\tthis.currTrackImg = new Image();\n\t\t\tthis.nextTrackImg = new Image();\n\t\t\tthis.mousetrap = new Spicetify.Mousetrap();\n\t\t}\n\n\t\tasync getAlbumDate(uri) {\n\t\t\tconst id = uri.replace(\"spotify:album:\", \"\");\n\n\t\t\tconst albumInfo = await Spicetify.CosmosAsync.get(`https://api.spotify.com/v1/albums/${id}`);\n\n\t\t\tconst albumDate = new Date(albumInfo.release_date);\n\t\t\treturn albumDate.toLocaleString(\"default\", {\n\t\t\t\tyear: \"numeric\",\n\t\t\t\tmonth: \"short\",\n\t\t\t\tday: \"numeric\",\n\t\t\t});\n\t\t}\n\n\t\tasync fetchInfo() {\n\t\t\tconst meta = Spicetify.Player.data.item.metadata;\n\n\t\t\t// prepare title\n\t\t\tlet rawTitle = meta.title;\n\t\t\tif (CONFIG.trimTitle) {\n\t\t\t\trawTitle = rawTitle\n\t\t\t\t\t.replace(/\\(.+?\\)/g, \"\")\n\t\t\t\t\t.replace(/\\[.+?\\]/g, \"\")\n\t\t\t\t\t.replace(/\\s-\\s.+?$/, \"\")\n\t\t\t\t\t.replace(/,.+?$/, \"\")\n\t\t\t\t\t.trim();\n\t\t\t}\n\n\t\t\t// prepare artist\n\t\t\tlet artistName;\n\t\t\tif (CONFIG.showAllArtists) {\n\t\t\t\tartistName = Object.keys(meta)\n\t\t\t\t\t.filter((key) => key.startsWith(\"artist_name\"))\n\t\t\t\t\t.sort()\n\t\t\t\t\t.map((key) => meta[key])\n\t\t\t\t\t.join(\", \");\n\t\t\t} else {\n\t\t\t\tartistName = meta.artist_name;\n\t\t\t}\n\n\t\t\t// prepare release date\n\t\t\tlet releaseDate;\n\t\t\tif (CONFIG.showReleaseDate) {\n\t\t\t\tconst albumURI = meta.album_uri;\n\t\t\t\tif (albumURI?.startsWith(\"spotify:album:\")) {\n\t\t\t\t\treleaseDate = await this.getAlbumDate(albumURI);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// prepare album\n\t\t\tconst albumText = meta.album_title || \"\";\n\n\t\t\tif (meta.image_xlarge_url === this.currTrackImg.src) {\n\t\t\t\tthis.setState({\n\t\t\t\t\ttitle: rawTitle || \"\",\n\t\t\t\t\tartist: artistName || \"\",\n\t\t\t\t\talbum: albumText || \"\",\n\t\t\t\t\treleaseDate: releaseDate || \"\",\n\t\t\t\t\theart: Spicetify.Player.getHeart(),\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// TODO: Pre-load next track\n\t\t\t// Wait until next track image is downloaded then update UI text and images\n\t\t\tconst previousImg = this.currTrackImg.cloneNode();\n\t\t\tthis.currTrackImg.src = meta.image_xlarge_url;\n\t\t\tthis.currTrackImg.onload = () => {\n\t\t\t\tconst bgImage = `url(\"${this.currTrackImg.src}\")`;\n\n\t\t\t\tthis.animateCanvas(previousImg, this.currTrackImg);\n\t\t\t\tthis.setState({\n\t\t\t\t\ttitle: rawTitle || \"\",\n\t\t\t\t\tartist: artistName || \"\",\n\t\t\t\t\talbum: albumText || \"\",\n\t\t\t\t\treleaseDate: releaseDate || \"\",\n\t\t\t\t\tcover: bgImage,\n\t\t\t\t\theart: Spicetify.Player.getHeart(),\n\t\t\t\t});\n\t\t\t};\n\t\t\tthis.currTrackImg.onerror = () => {\n\t\t\t\t// Placeholder\n\t\t\t\tthis.currTrackImg.src =\n\t\t\t\t\t\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB4PSIwIiB5PSIwIiAvPgogIDxwYXRoIGZpbGw9IiNCM0IzQjMiIGQ9Ik0yNi4yNSAxNi4xNjJMMjEuMDA1IDEzLjEzNEwyMS4wMTIgMjIuNTA2QzIwLjU5NCAyMi4xOTIgMjAuMDgxIDIxLjk5OSAxOS41MTkgMjEuOTk5QzE4LjE0MSAyMS45OTkgMTcuMDE5IDIzLjEyMSAxNy4wMTkgMjQuNDk5QzE3LjAxOSAyNS44NzggMTguMTQxIDI2Ljk5OSAxOS41MTkgMjYuOTk5QzIwLjg5NyAyNi45OTkgMjIuMDE5IDI1Ljg3OCAyMi4wMTkgMjQuNDk5QzIyLjAxOSAyNC40MjIgMjIuMDA2IDE0Ljg2NyAyMi4wMDYgMTQuODY3TDI1Ljc1IDE3LjAyOUwyNi4yNSAxNi4xNjJaTTE5LjUxOSAyNS45OThDMTguNjkyIDI1Ljk5OCAxOC4wMTkgMjUuMzI1IDE4LjAxOSAyNC40OThDMTguMDE5IDIzLjY3MSAxOC42OTIgMjIuOTk4IDE5LjUxOSAyMi45OThDMjAuMzQ2IDIyLjk5OCAyMS4wMTkgMjMuNjcxIDIxLjAxOSAyNC40OThDMjEuMDE5IDI1LjMyNSAyMC4zNDYgMjUuOTk4IDE5LjUxOSAyNS45OThaIi8+Cjwvc3ZnPgo=\";\n\t\t\t};\n\t\t}\n\n\t\tanimateCanvas(prevImg, nextImg) {\n\t\t\tconst { innerWidth: width, innerHeight: height } = window;\n\t\t\tthis.back.width = width;\n\t\t\tthis.back.height = height;\n\n\t\t\tconst ctx = this.back.getContext(\"2d\");\n\t\t\tctx.imageSmoothingEnabled = false;\n\t\t\tctx.filter = \"blur(30px) brightness(0.6)\";\n\t\t\tconst blur = 30;\n\n\t\t\tconst x = -blur * 2;\n\n\t\t\tlet y;\n\t\t\tlet dim;\n\n\t\t\tif (width > height) {\n\t\t\t\tdim = width;\n\t\t\t\ty = x - (width - height) / 2;\n\t\t\t} else {\n\t\t\t\tdim = height;\n\t\t\t\ty = x;\n\t\t\t}\n\n\t\t\tconst size = dim + 4 * blur;\n\n\t\t\tif (!CONFIG.enableFade) {\n\t\t\t\tctx.globalAlpha = 1;\n\t\t\t\tctx.drawImage(nextImg, x, y, size, size);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet factor = 0.0;\n\t\t\tconst animate = () => {\n\t\t\t\tctx.globalAlpha = 1;\n\t\t\t\tctx.drawImage(prevImg, x, y, size, size);\n\t\t\t\tctx.globalAlpha = Math.sin((Math.PI / 2) * factor);\n\t\t\t\tctx.drawImage(nextImg, x, y, size, size);\n\n\t\t\t\tif (factor < 1.0) {\n\t\t\t\t\tfactor += 0.016;\n\t\t\t\t\trequestAnimationFrame(animate);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\trequestAnimationFrame(animate);\n\t\t}\n\n\t\tcomponentDidMount() {\n\t\t\tthis.updateInfo = this.fetchInfo.bind(this);\n\t\t\tSpicetify.Player.addEventListener(\"songchange\", this.updateInfo);\n\t\t\tthis.updateInfo();\n\n\t\t\tupdateVisual = () => {\n\t\t\t\tupdateStyle();\n\t\t\t\tthis.fetchInfo();\n\t\t\t};\n\n\t\t\tthis.onQueueChange = async (queueData) => {\n\t\t\t\tconst queue = queueData.data;\n\t\t\t\tlet nextTrack;\n\t\t\t\tif (queue.queued.length) {\n\t\t\t\t\tnextTrack = queue.queued[0];\n\t\t\t\t} else {\n\t\t\t\t\tnextTrack = queue.nextUp[0];\n\t\t\t\t}\n\t\t\t\tthis.nextTrackImg.src = nextTrack.metadata.image_xlarge_url;\n\t\t\t};\n\n\t\t\tconst scaleLimit = { min: 0.1, max: 4, step: 0.05 };\n\t\t\tthis.onScaleChange = (event) => {\n\t\t\t\tif (!event.ctrlKey) return;\n\t\t\t\tconst dir = event.deltaY < 0 ? 1 : -1;\n\t\t\t\tlet temp = (CONFIG.scale || 1) + dir * scaleLimit.step;\n\t\t\t\tif (temp < scaleLimit.min) {\n\t\t\t\t\ttemp = scaleLimit.min;\n\t\t\t\t} else if (temp > scaleLimit.max) {\n\t\t\t\t\ttemp = scaleLimit.max;\n\t\t\t\t}\n\t\t\t\tCONFIG.scale = temp;\n\t\t\t\tsaveConfig();\n\t\t\t\tupdateVisual();\n\t\t\t};\n\n\t\t\tSpicetify.Platform.PlayerAPI._events.addListener(\"queue_update\", this.onQueueChange);\n\t\t\tthis.mousetrap.bind(\"esc\", deactivate);\n\t\t\twindow.dispatchEvent(new Event(\"fad-request\"));\n\t\t}\n\n\t\tcomponentWillUnmount() {\n\t\t\tSpicetify.Player.removeEventListener(\"songchange\", this.updateInfo);\n\t\t\tSpicetify.Platform.PlayerAPI._events.removeListener(\"queue_update\", this.onQueueChange);\n\t\t\tthis.mousetrap.unbind(\"esc\");\n\t\t}\n\n\t\trender() {\n\t\t\treturn react.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tid: \"full-app-display\",\n\t\t\t\t\tclassName: \"Video VideoPlayer--fullscreen VideoPlayer--landscape\",\n\t\t\t\t\tonDoubleClick: deactivate,\n\t\t\t\t\tonContextMenu: openConfig,\n\t\t\t\t},\n\t\t\t\treact.createElement(\"canvas\", {\n\t\t\t\t\tid: \"fad-background\",\n\t\t\t\t\tref: (el) => {\n\t\t\t\t\t\tthis.back = el;\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t\treact.createElement(\"div\", { id: \"fad-header\" }),\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ id: \"fad-body\" },\n\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: \"fad-foreground\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\"--fad-scale\": CONFIG.scale || 1,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tref: (el) => {\n\t\t\t\t\t\t\t\tif (!el) return;\n\t\t\t\t\t\t\t\tel.onmousewheel = this.onScaleChange;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{ id: \"fad-art\" },\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: \"fad-art-image\",\n\t\t\t\t\t\t\t\t\tclassName: CONFIG.enableFade && \"fad-background-fade\",\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tbackgroundImage: this.state.cover,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: \"fad-art-overlay\",\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tid: \"fad-heart\",\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\tSpicetify.Player.toggleHeart();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ heart: !this.state.heart });\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\treact.createElement(DisplayIcon, {\n\t\t\t\t\t\t\t\t\t\t\ticon: Spicetify.SVGIcons[this.state.heart ? \"heart-active\" : \"heart\"],\n\t\t\t\t\t\t\t\t\t\t\tsize: 50,\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\treact.createElement(\"div\", {\n\t\t\t\t\t\t\t\t\tid: \"fad-art-inner\",\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t),\n\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{ id: \"fad-details\" },\n\t\t\t\t\t\t\treact.createElement(\"div\", { id: \"fad-title\" }, this.state.title),\n\t\t\t\t\t\t\treact.createElement(SubInfo, {\n\t\t\t\t\t\t\t\tid: \"fad-artist\",\n\t\t\t\t\t\t\t\ttext: this.state.artist,\n\t\t\t\t\t\t\t\ticon: Spicetify.SVGIcons.artist,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tCONFIG.showAlbum &&\n\t\t\t\t\t\t\t\treact.createElement(SubInfo, {\n\t\t\t\t\t\t\t\t\tid: \"fad-album\",\n\t\t\t\t\t\t\t\t\ttext: this.state.album,\n\t\t\t\t\t\t\t\t\ticon: Spicetify.SVGIcons.album,\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tCONFIG.showReleaseDate &&\n\t\t\t\t\t\t\t\treact.createElement(SubInfo, {\n\t\t\t\t\t\t\t\t\tid: \"fad-release-date\",\n\t\t\t\t\t\t\t\t\ttext: this.state.releaseDate,\n\t\t\t\t\t\t\t\t\ticon: Spicetify.SVGIcons.clock,\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\treact.createElement(\n\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: \"fad-status\",\n\t\t\t\t\t\t\t\t\tclassName: (CONFIG.enableControl || CONFIG.enableProgress) && \"active\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tCONFIG.enableControl && react.createElement(PlayerControls),\n\t\t\t\t\t\t\t\tCONFIG.enableProgress && react.createElement(ProgressBar)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t),\n\t\t\t\t\tCONFIG.lyricsPlus &&\n\t\t\t\t\t\treact.createElement(\"div\", {\n\t\t\t\t\t\t\tid: \"fad-lyrics-plus-container\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\"--lyrics-color-active\": \"#ffffff\",\n\t\t\t\t\t\t\t\t\"--lyrics-color-inactive\": \"#ffffff50\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}\n\n\tconst classes = [\"video\", \"video-full-screen\", \"video-full-window\", \"video-full-screen--hide-ui\", \"fad-activated\"];\n\n\tconst container = document.createElement(\"div\");\n\tcontainer.id = \"fad-main\";\n\tlet lastApp;\n\tlet cursorTimeout;\n\tlet fad;\n\n\tasync function toggleFullscreen() {\n\t\tif (CONFIG.enableFullscreen) {\n\t\t\tawait document.documentElement.requestFullscreen();\n\t\t\ttoggleCursor(false);\n\t\t} else if (document.webkitIsFullScreen) {\n\t\t\tawait document.exitFullscreen();\n\t\t\ttoggleCursor(true);\n\t\t}\n\t}\n\n\tfunction eventListener() {\n\t\tshowCursor();\n\t\tcursorTimeout = setTimeout(hideCursor, 2000);\n\t}\n\n\tfunction showCursor() {\n\t\tfad.classList.remove(\"hide-cursor\");\n\t\tclearTimeout(cursorTimeout);\n\t}\n\n\tfunction hideCursor() {\n\t\tfad.classList.add(\"hide-cursor\");\n\t}\n\n\tfunction toggleCursor(show = true) {\n\t\tfad = document.getElementById(\"full-app-display\");\n\n\t\tif (!fad) {\n\t\t\tsetTimeout(toggleCursor, 300, show);\n\t\t\treturn;\n\t\t}\n\n\t\tif (show) {\n\t\t\tdocument.removeEventListener(\"mousemove\", eventListener);\n\t\t\tshowCursor();\n\t\t} else {\n\t\t\tcursorTimeout = setTimeout(hideCursor, 2000);\n\t\t\tdocument.addEventListener(\"mousemove\", eventListener);\n\t\t}\n\t}\n\n\tasync function activate() {\n\t\tif (!Spicetify.Player.data) return;\n\n\t\tawait toggleFullscreen();\n\n\t\tdocument.body.classList.add(...classes);\n\t\tdocument.body.append(style, container);\n\t\treactDOM.render(react.createElement(FAD), container);\n\n\t\trequestLyricsPlus();\n\t}\n\n\tfunction deactivate() {\n\t\tif (CONFIG.enableFullscreen || document.webkitIsFullScreen) {\n\t\t\tdocument.exitFullscreen();\n\t\t}\n\t\ttoggleCursor(true);\n\t\tdocument.body.classList.remove(...classes);\n\t\treactDOM.unmountComponentAtNode(container);\n\t\tstyle.remove();\n\t\tcontainer.remove();\n\t\twindow.dispatchEvent(new Event(\"fad-request\"));\n\n\t\tif (lastApp && lastApp !== \"/lyrics-plus\") {\n\t\t\tSpicetify.Platform.History.push(lastApp);\n\t\t}\n\t}\n\n\tfunction toggleFad() {\n\t\tif (document.body.classList.contains(\"fad-activated\")) {\n\t\t\tdeactivate();\n\t\t} else {\n\t\t\tactivate();\n\t\t}\n\t}\n\n\tfunction updateStyle() {\n\t\tstyle.innerHTML =\n\t\t\tstyleBase +\n\t\t\tstyleChoices[CONFIG.vertical ? 1 : 0] +\n\t\t\t(checkLyricsPlus() && CONFIG.lyricsPlus ? lyricsPlusBase + lyricsPlusStyleChoices[CONFIG.vertical ? 1 : 0] : \"\");\n\t}\n\n\tfunction checkLyricsPlus() {\n\t\treturn Spicetify.Config?.custom_apps?.includes(\"lyrics-plus\") || !!document.querySelector(\"a[href='/lyrics-plus']\");\n\t}\n\n\tfunction requestLyricsPlus() {\n\t\tif (CONFIG.lyricsPlus && checkLyricsPlus()) {\n\t\t\tlastApp = Spicetify.Platform.History.location.pathname;\n\t\t\tif (lastApp !== \"/lyrics-plus\") {\n\t\t\t\tSpicetify.Platform.History.push(\"/lyrics-plus\");\n\t\t\t}\n\t\t}\n\t\twindow.dispatchEvent(new Event(\"fad-request\"));\n\t}\n\n\tfunction getConfig() {\n\t\ttry {\n\t\t\tconst parsed = JSON.parse(Spicetify.LocalStorage.get(\"full-app-display-config\") || \"{}\");\n\t\t\tif (parsed && typeof parsed === \"object\") {\n\t\t\t\treturn parsed;\n\t\t\t}\n\t\t\tthrow \"\";\n\t\t} catch {\n\t\t\tSpicetify.LocalStorage.set(\"full-app-display-config\", \"{}\");\n\t\t\treturn {};\n\t\t}\n\t}\n\n\tfunction saveConfig() {\n\t\tSpicetify.LocalStorage.set(\"full-app-display-config\", JSON.stringify(CONFIG));\n\t}\n\n\tconst ConfigItem = ({ name, field, func, disabled = false }) => {\n\t\tconst [value, setValue] = useState(CONFIG[field]);\n\t\treturn react.createElement(\n\t\t\t\"div\",\n\t\t\t{ className: \"setting-row\" },\n\t\t\treact.createElement(\"label\", { className: \"col description\" }, name),\n\t\t\treact.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: \"col action\" },\n\t\t\t\treact.createElement(\n\t\t\t\t\t\"button\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: `switch${value ? \"\" : \" disabled\"}`,\n\t\t\t\t\t\tdisabled,\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tconst state = !value;\n\t\t\t\t\t\t\tCONFIG[field] = state;\n\t\t\t\t\t\t\tsetValue(state);\n\t\t\t\t\t\t\tsaveConfig();\n\t\t\t\t\t\t\tfunc();\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\treact.createElement(DisplayIcon, {\n\t\t\t\t\t\ticon: Spicetify.SVGIcons.check,\n\t\t\t\t\t\tsize: 16,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t};\n\n\tfunction openConfig(event) {\n\t\tevent.preventDefault();\n\t\tconst style = react.createElement(\"style\", {\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: `\n.setting-row::after {\n content: \"\";\n display: table;\n clear: both;\n}\n.setting-row .col {\n display: flex;\n padding: 10px 0;\n align-items: center;\n}\n.setting-row .col.description {\n float: left;\n padding-right: 15px;\n}\n.setting-row .col.action {\n float: right;\n text-align: right;\n}\nbutton.switch {\n align-items: center;\n border: 0px;\n border-radius: 50%;\n background-color: rgba(var(--spice-rgb-shadow), .7);\n color: var(--spice-text);\n cursor: pointer;\n display: flex;\n margin-inline-start: 12px;\n padding: 8px;\n}\nbutton.switch.disabled,\nbutton.switch[disabled] {\n color: rgba(var(--spice-rgb-text), .3);\n}\n`,\n\t\t\t},\n\t\t});\n\t\tconst configContainer = react.createElement(\n\t\t\t\"div\",\n\t\t\tnull,\n\t\t\tstyle,\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: checkLyricsPlus() ? \"Enable Lyrics Plus integration\" : \"Lyrics Plus not applied\",\n\t\t\t\tfield: \"lyricsPlus\",\n\t\t\t\tfunc: () => {\n\t\t\t\t\tupdateVisual();\n\t\t\t\t\trequestLyricsPlus();\n\t\t\t\t},\n\t\t\t\tdisabled: !checkLyricsPlus(),\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Enable progress bar\",\n\t\t\t\tfield: \"enableProgress\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Enable controls\",\n\t\t\t\tfield: \"enableControl\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Trim title\",\n\t\t\t\tfield: \"trimTitle\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Show album\",\n\t\t\t\tfield: \"showAlbum\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Show all artists\",\n\t\t\t\tfield: \"showAllArtists\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Show release date\",\n\t\t\t\tfield: \"showReleaseDate\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Show icons\",\n\t\t\t\tfield: \"icons\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Vertical mode\",\n\t\t\t\tfield: \"vertical\",\n\t\t\t\tfunc: updateStyle,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Enable fullscreen\",\n\t\t\t\tfield: \"enableFullscreen\",\n\t\t\t\tfunc: toggleFullscreen,\n\t\t\t}),\n\t\t\treact.createElement(ConfigItem, {\n\t\t\t\tname: \"Enable song change animation\",\n\t\t\t\tfield: \"enableFade\",\n\t\t\t\tfunc: updateVisual,\n\t\t\t})\n\t\t);\n\t\tSpicetify.PopupModal.display({\n\t\t\ttitle: \"Full App Display\",\n\t\t\tcontent: configContainer,\n\t\t});\n\t}\n\n\t// Add activator on top bar\n\tnew Spicetify.Topbar.Button(\n\t\t\"Full App Display\",\n\t\t`${Spicetify.SVGIcons.projector}`,\n\t\tactivate\n\t);\n\n\tSpicetify.Mousetrap.bind(\"f11\", toggleFad);\n})();\n" }, { "path": "Extensions/keyboardShortcut.js", "content": "// NAME: Keyboard Shortcut\n// AUTHOR: khanhas, OhItsTom\n// DESCRIPTION: Register a few more keybinds to support keyboard-driven navigation in Spotify client.\n\n/// \n\n(function KeyboardShortcut() {\n\tif (!Spicetify.Mousetrap) {\n\t\tsetTimeout(KeyboardShortcut, 1000);\n\t\treturn;\n\t}\n\n\t// Variables / Conditions\n\tconst vim = new VimBind();\n\tconst SCROLL_STEP = 25;\n\n\t/**\n\t * Binds a keyboard shortcut using Mousetrap.\n\t * @param {string} key - The Mousetrap keybind.\n\t * @param {boolean | undefined} staticCondition - A static condition.\n\t * @param {(event: KeyboardEvent) => void} callback - Callback function for the event.\n\t */\n\tconst binds = {\n\t\t// Shutdown Spotify using Ctrl+Q\n\t\t\"ctrl+q\": {\n\t\t\tcallback: () =>\n\t\t\t\tSpicetify.CosmosAsync.post(\"sp://esperanto/spotify.desktop.lifecycle_esperanto.proto.DesktopLifecycle/Shutdown\") &&\n\t\t\t\tSpicetify.CosmosAsync.post(\"sp://desktop/v1/shutdown\"),\n\t\t},\n\n\t\t// Rotate through sidebar items using Ctrl+Tab and Ctrl+Shift+Tab\n\t\t\"ctrl+tab\": { callback: () => rotateSidebar(1) },\n\t\t\"ctrl+shift+tab\": { callback: () => rotateSidebar(-1) },\n\n\t\t// Focus on the app content before scrolling using Shift+PageUp and Shift+PageDown\n\t\t\"shift+pageup\": { callback: () => focusOnApp() },\n\t\t\"shift+pagedown\": { callback: () => focusOnApp() },\n\n\t\t// Scroll actions using 'j' and 'k' keys\n\t\tj: { callback: () => createScrollCallback(SCROLL_STEP) },\n\t\tk: { callback: () => createScrollCallback(-SCROLL_STEP) },\n\n\t\t// Scroll to the top ('gg') or bottom ('Shift+g') of the page\n\t\t\"g g\": { callback: () => scrollToPosition(0) },\n\t\t\"shift+g\": { callback: () => scrollToPosition(1) },\n\n\t\t// Shift + H and Shift + L to go back and forward page\n\t\t\"shift+h\": { callback: () => Spicetify.Platform.History.goBack() },\n\t\t\"shift+l\": { callback: () => Spicetify.Platform.History.goForward() },\n\n\t\t// M to Like/Unlike track\n\t\tm: { callback: () => Spicetify.Player.toggleHeart() },\n\n\t\t// Forward Slash to open search page\n\t\t\"/\": { callback: () => Spicetify.Platform.History.replace(\"/search\") },\n\n\t\t// CTRL + Arrow Left Next and CTRL + Arrow Right Previous Song\n\t\t\"ctrl+left\": { callback: () => Spicetify.Player.back() },\n\t\t\"ctrl+right\": { callback: () => Spicetify.Player.next() },\n\n\t\t// CTRL + Arrow Up Increase Volume CTRL + Arrow Down Decrease Volume\n\t\t\"ctrl+up\": { callback: () => Spicetify.Player.setVolume(Spicetify.Player.getVolume() + 0.05) },\n\t\t\"ctrl+down\": { callback: () => Spicetify.Player.setVolume(Spicetify.Player.getVolume() - 0.05) },\n\n\t\t// Activate Vim mode and set cancel key to 'ESCAPE'\n\t\tf: {\n\t\t\tcallback: (event) => {\n\t\t\t\tvim.activate(event);\n\t\t\t\tvim.setCancelKey(\"ESCAPE\");\n\t\t\t},\n\t\t},\n\t};\n\n\t// Bind all the keys\n\tfor (const [key, { staticCondition, callback }] of Object.entries(binds)) {\n\t\tif (typeof staticCondition === \"undefined\" || staticCondition) {\n\t\t\tSpicetify.Mousetrap.bind(key, (event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!vim.isActive) {\n\t\t\t\t\tcallback(event);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\t// re-render vim on window resize & prevent mouse event while active\n\twindow.addEventListener(\n\t\t\"resize\",\n\t\t(event) => {\n\t\t\tif (vim.isActive) {\n\t\t\t\tvim.activate();\n\t\t\t}\n\t\t},\n\t\ttrue\n\t);\n\n\twindow.addEventListener(\n\t\t\"mousedown\",\n\t\t(event) => {\n\t\t\tif (vim.isActive) {\n\t\t\t\tevent.stopPropagation();\n\t\t\t}\n\t\t},\n\t\ttrue\n\t);\n\n\t// Functions\n\tfunction focusOnApp() {\n\t\treturn document.querySelector(\n\t\t\t\".Root__main-view .os-viewport, .Root__main-view .main-view-container > .main-view-container__scroll-node:not([data-overlayscrollbars-initialize]), .Root__main-view .main-view-container__scroll-node > [data-overlayscrollbars-viewport]\"\n\t\t);\n\t}\n\n\tfunction createScrollCallback(step) {\n\t\tconst app = focusOnApp();\n\t\tif (app) {\n\t\t\tconst scrollInterval = setInterval(() => {\n\t\t\t\tapp.scrollTop += step;\n\t\t\t}, 10);\n\t\t\tdocument.addEventListener(\"keyup\", () => {\n\t\t\t\tclearInterval(scrollInterval);\n\t\t\t});\n\t\t}\n\t}\n\n\tfunction scrollToPosition(position) {\n\t\tconst app = focusOnApp();\n\t\tapp.scroll(0, position === 0 ? 0 : app.scrollHeight);\n\t}\n\n\t/**\n\t * @returns {number | undefined}\n\t * @param {NodeListOf} allItems\n\t */\n\tfunction findActiveIndex(allItems) {\n\t\tconst activeLink = document.querySelector(\".main-yourLibraryX-navLinkActive\");\n\t\tconst historyURI = Spicetify.Platform.History.location.pathname.replace(/^\\//, \"spotify:\").replace(/\\//g, \":\");\n\t\tconst activePage = document.querySelector(`[aria-describedby=\"onClickHint${historyURI}\"]`);\n\n\t\tif (!activeLink && !activePage) {\n\t\t\treturn -1;\n\t\t}\n\n\t\tlet index = 0;\n\t\tfor (const item of allItems) {\n\t\t\tif (item === activeLink || item === activePage) {\n\t\t\t\treturn index;\n\t\t\t}\n\n\t\t\tindex++;\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param {1 | -1} direction\n\t */\n\tfunction rotateSidebar(direction) {\n\t\tconst allItems = document.querySelectorAll(\n\t\t\t\"#spicetify-sticky-list .main-yourLibraryX-navLink, .main-yourLibraryX-listItem > div:not(:has([data-skip-in-keyboard-nav])) > div:first-child\"\n\t\t);\n\t\tconst maxIndex = allItems.length - 1;\n\n\t\tlet index = findActiveIndex(allItems) + direction;\n\t\tif (index < 0) index = maxIndex;\n\t\telse if (index > maxIndex) index = 0;\n\n\t\tallItems[index].click();\n\t}\n})();\n\nfunction VimBind() {\n\tconst elementQuery = [\"[href]\", \"button\", \".main-trackList-trackListRow\", \"[role='button']\"].join(\",\");\n\n\tconst keyList = \"qwertasdfgzxcvyuiophjklbnm\".split(\"\");\n\n\tconst lastKeyIndex = keyList.length - 1;\n\n\tthis.isActive = false;\n\n\tconst vimOverlay = document.createElement(\"div\");\n\tconst baseOverlay = document.createElement(\"div\");\n\tconst tippyOverlay = document.createElement(\"div\");\n\tvimOverlay.id = \"vim-overlay\";\n\tbaseOverlay.id = \"base-overlay\";\n\ttippyOverlay.id = \"tippy-overlay\";\n\tvimOverlay.style.position = baseOverlay.style.position = tippyOverlay.style.position = \"absolute\";\n\tvimOverlay.style.width = baseOverlay.style.width = tippyOverlay.style.width = \"100%\";\n\tvimOverlay.style.height = baseOverlay.style.height = tippyOverlay.style.height = \"100%\";\n\tbaseOverlay.style.zIndex = \"9999\";\n\ttippyOverlay.style.zIndex = \"10000\";\n\tvimOverlay.style.display = \"none\";\n\tvimOverlay.innerHTML = ``;\n\tvimOverlay.append(baseOverlay);\n\tvimOverlay.append(tippyOverlay);\n\tdocument.body.append(vimOverlay);\n\n\tconst mousetrap = new Spicetify.Mousetrap(document);\n\tmousetrap.bind(keyList, listenToKeys.bind(this), \"keypress\");\n\t// Pause mousetrap event emitter\n\tconst orgStopCallback = mousetrap.stopCallback;\n\tmousetrap.stopCallback = () => true;\n\n\t/**\n\t *\n\t * @param {KeyboardEvent} event\n\t */\n\tthis.activate = function (event) {\n\t\tvimOverlay.style.display = \"block\";\n\n\t\tconst vimkey = getVims();\n\t\tif (vimkey.length > 0) {\n\t\t\tfor (const e of vimkey) {\n\t\t\t\te.remove();\n\t\t\t}\n\t\t}\n\n\t\tlet firstKey = 0;\n\t\tlet secondKey = 0;\n\n\t\tfor (const e of getLinks()) {\n\t\t\tconst computed = window.getComputedStyle(e);\n\t\t\tif (computed.display === \"none\" || computed.visibility === \"hidden\" || computed.opacity === \"0\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst bound = e.getBoundingClientRect();\n\t\t\tconst owner = document.body;\n\n\t\t\tlet top = bound.top;\n\t\t\tlet left = bound.left;\n\n\t\t\tif (\n\t\t\t\tbound.bottom > owner.clientHeight ||\n\t\t\t\tbound.left > owner.clientWidth ||\n\t\t\t\tbound.right < 0 ||\n\t\t\t\tbound.top < 0 ||\n\t\t\t\tbound.width === 0 ||\n\t\t\t\tbound.height === 0\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// Exclude certain elements from the centering calculation\n\t\t\tif (e.parentNode.role !== \"row\") {\n\t\t\t\ttop = top + bound.height / 2 - 15;\n\t\t\t\tleft = left + bound.width / 2 - 15;\n\t\t\t}\n\n\t\t\t// Append the key to the correct overlay\n\t\t\tif (e.tagName === \"BUTTON\" && e.parentNode.tagName === \"LI\") {\n\t\t\t\ttippyOverlay.append(createKey(e, keyList[firstKey] + keyList[secondKey], top, left));\n\t\t\t} else {\n\t\t\t\tbaseOverlay.append(createKey(e, keyList[firstKey] + keyList[secondKey], top, left));\n\t\t\t}\n\n\t\t\tsecondKey++;\n\t\t\tif (secondKey > lastKeyIndex) {\n\t\t\t\tsecondKey = 0;\n\t\t\t\tfirstKey++;\n\t\t\t}\n\t\t}\n\n\t\tthis.isActive = true;\n\t\tsetTimeout(() => {\n\t\t\tmousetrap.stopCallback = orgStopCallback.bind(mousetrap);\n\t\t}, 100);\n\t};\n\n\t/**\n\t *\n\t * @param {KeyboardEvent} event\n\t */\n\tthis.deactivate = function (event) {\n\t\tmousetrap.stopCallback = () => true;\n\t\tthis.isActive = false;\n\t\tvimOverlay.style.display = \"none\";\n\t\tfor (const e of getVims()) {\n\t\t\te.remove();\n\t\t}\n\t};\n\n\tfunction getLinks() {\n\t\tconst elements = Array.from(document.querySelectorAll(elementQuery));\n\t\treturn elements;\n\t}\n\n\tfunction getVims() {\n\t\treturn Array.from(vimOverlay.getElementsByClassName(\"vim-key\"));\n\t}\n\n\t/**\n\t * @param {KeyboardEvent} event\n\t */\n\tfunction listenToKeys(event) {\n\t\tif (!this.isActive) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst vimkey = getVims();\n\n\t\tif (vimkey.length === 0) {\n\t\t\tthis.deactivate(event);\n\t\t\treturn;\n\t\t}\n\n\t\tfor (const div of vimkey) {\n\t\t\tconst text = div.innerText.toLowerCase();\n\t\t\tif (text[0] !== event.key) {\n\t\t\t\tdiv.remove();\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst newText = text.slice(1);\n\t\t\tif (newText.length === 0) {\n\t\t\t\tinteract(div.target);\n\t\t\t\tthis.deactivate(event);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tdiv.innerText = newText;\n\t\t}\n\n\t\tif (baseOverlay.childNodes.length === 0 && tippyOverlay.childNodes.length === 0) {\n\t\t\tthis.deactivate(event);\n\t\t}\n\t}\n\n\t/**\n\t * @param {HTMLElement} element\n\t */\n\tfunction interact(element) {\n\t\t// Hover on contextmenu dropdown list items\n\t\tif (element.tagName === \"BUTTON\" && element.parentNode.tagName === \"LI\" && element.ariaExpanded !== null) {\n\t\t\tconst event = new MouseEvent(\"mouseover\", {\n\t\t\t\tview: window,\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t});\n\n\t\t\telement.dispatchEvent(event);\n\t\t\treturn;\n\t\t}\n\n\t\tif (element.hasAttribute(\"href\") || element.tagName === \"BUTTON\" || element.role === \"button\" || element.parentNode.role === \"row\") {\n\t\t\telement.click();\n\t\t\treturn;\n\t\t}\n\n\t\tconst findButton = element.querySelector(`button[data-ta-id=\"play-button\"]`) || element.querySelector(`button[data-button=\"play\"]`);\n\t\tif (findButton instanceof HTMLButtonElement) {\n\t\t\tfindButton.click();\n\t\t\treturn;\n\t\t}\n\t\talert(\"Let me know where you found this button, please. I can't click this for you without that information.\");\n\t\treturn;\n\t}\n\n\t/**\n\t * @param {Element} target\n\t * @param {string} key\n\t * @param {string | number} top\n\t * @param {string | number} left\n\t */\n\tfunction createKey(target, key, top, left) {\n\t\tconst div = document.createElement(\"span\");\n\t\tdiv.classList.add(\"vim-key\");\n\t\tdiv.innerText = key;\n\t\tdiv.style.top = `${top}px`;\n\t\tdiv.style.left = `${left}px`;\n\t\tdiv.target = target;\n\t\treturn div;\n\t}\n\n\t/**\n\t *\n\t * @param {Spicetify.Keyboard.ValidKey} key\n\t */\n\tthis.setCancelKey = function (key) {\n\t\tmousetrap.bind(Spicetify.Keyboard.KEYS[key], this.deactivate.bind(this));\n\t};\n\n\treturn this;\n}\n" }, { "path": "Extensions/loopyLoop.js", "content": "// NAME: Loopy loop\n// AUTHOR: khanhas\n// VERSION: 0.1\n// DESCRIPTION: Simple tool to help you practice hitting that note right. Right click at process bar to open up menu.\n\n/// \n\n(function LoopyLoop() {\n\tconst playbackBar = document.querySelector(\".playback-bar\");\n\tconst progressContainer = playbackBar?.querySelector(\".playback-progressbar-container\");\n\tconst rangeInput = progressContainer?.querySelector('input[type=\"range\"]');\n\tconst bar = rangeInput?.closest(\"label\")?.nextElementSibling;\n\tif (!(bar && Spicetify.Player)) {\n\t\tsetTimeout(LoopyLoop, 100);\n\t\treturn;\n\t}\n\n\tconst style = document.createElement(\"style\");\n\tstyle.innerHTML = `\n#loopy-loop-start, #loopy-loop-end {\n position: absolute;\n font-weight: bolder;\n font-size: 15px;\n top: -7px;\n}\n`;\n\n\tconst startMark = document.createElement(\"div\");\n\tstartMark.id = \"loopy-loop-start\";\n\tstartMark.innerText = \"[\";\n\tconst endMark = document.createElement(\"div\");\n\tendMark.id = \"loopy-loop-end\";\n\tendMark.innerText = \"]\";\n\tstartMark.style.position = endMark.style.position = \"absolute\";\n\tstartMark.hidden = endMark.hidden = true;\n\n\tbar.append(style);\n\tbar.append(startMark);\n\tbar.append(endMark);\n\n\tlet start = null;\n\tlet end = null;\n\tlet mouseOnBarPercent = 0.0;\n\n\tfunction drawOnBar() {\n\t\tif (start === null && end === null) {\n\t\t\tstartMark.hidden = endMark.hidden = true;\n\t\t\treturn;\n\t\t}\n\t\tstartMark.hidden = endMark.hidden = false;\n\t\tstartMark.style.left = `${start * 100}%`;\n\t\tendMark.style.left = `${end * 100}%`;\n\t}\n\tfunction reset() {\n\t\tstart = null;\n\t\tend = null;\n\t\tdrawOnBar();\n\t}\n\n\tlet debouncing = 0;\n\tSpicetify.Player.addEventListener(\"onprogress\", (event) => {\n\t\tif (start != null && end != null) {\n\t\t\tif (debouncing) {\n\t\t\t\tif (event.timeStamp - debouncing > 1000) {\n\t\t\t\t\tdebouncing = 0;\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst percent = Spicetify.Player.getProgressPercent();\n\t\t\tif (percent > end || percent < start) {\n\t\t\t\tdebouncing = event.timeStamp;\n\t\t\t\tSpicetify.Player.seek(start);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t});\n\n\tSpicetify.Player.addEventListener(\"songchange\", reset);\n\n\tfunction createMenuItem(title, callback) {\n\t\tconst item = document.createElement(\"li\");\n\t\titem.setAttribute(\"role\", \"menuitem\");\n\t\tconst button = document.createElement(\"button\");\n\t\tbutton.classList.add(\"main-contextMenu-menuItemButton\");\n\t\tbutton.textContent = title;\n\t\tbutton.onclick = () => {\n\t\t\tcontextMenu.hidden = true;\n\t\t\tcallback?.();\n\t\t};\n\t\titem.append(button);\n\t\treturn item;\n\t}\n\n\tconst startBtn = createMenuItem(\"Set start\", () => {\n\t\tstart = mouseOnBarPercent;\n\t\tif (end === null || start > end) {\n\t\t\tend = 0.99;\n\t\t}\n\t\tdrawOnBar();\n\t});\n\tconst endBtn = createMenuItem(\"Set end\", () => {\n\t\tend = mouseOnBarPercent;\n\t\tif (start === null || end < start) {\n\t\t\tstart = 0;\n\t\t}\n\t\tdrawOnBar();\n\t});\n\tconst resetBtn = createMenuItem(\"Reset\", reset);\n\n\tconst contextMenu = document.createElement(\"div\");\n\tcontextMenu.id = \"loopy-context-menu\";\n\tcontextMenu.innerHTML = `
    `;\n\tcontextMenu.style.position = \"absolute\";\n\tcontextMenu.firstElementChild.append(startBtn, endBtn, resetBtn);\n\tdocument.body.append(contextMenu);\n\tconst { height: contextMenuHeight } = contextMenu.getBoundingClientRect();\n\tcontextMenu.hidden = true;\n\twindow.addEventListener(\"click\", () => {\n\t\tcontextMenu.hidden = true;\n\t});\n\n\tprogressContainer.oncontextmenu = (event) => {\n\t\tconst { x, width } = bar.getBoundingClientRect();\n\t\tmouseOnBarPercent = Math.max(0, Math.min(1, (event.clientX - x) / width));\n\t\tcontextMenu.style.transform = `translate(${event.clientX}px,${event.clientY - contextMenuHeight}px)`;\n\t\tcontextMenu.hidden = false;\n\t\tevent.preventDefault();\n\t};\n})();\n" }, { "path": "Extensions/popupLyrics.js", "content": "// NAME: Popup Lyrics\n// AUTHOR: khanhas\n// Netease API parser and UI from https://github.com/mantou132/Spotify-Lyrics\n// DESCRIPTION: Pop lyrics up\n\n/// \n\nif (!navigator.serviceWorker) {\n\t// Worker code\n\t// When Spotify client is minimised, requestAnimationFrame does not call our tick function\n\t// setTimeout and setInterval are also throttled at 1 second.\n\t// Offload setInterval to a Worker to consistently call tick function.\n\tlet num = null;\n\t// biome-ignore lint/suspicious/noGlobalAssign: \n\tonmessage = (event) => {\n\t\tif (event.data === \"popup-lyric-request-update\") {\n\t\t\tconsole.warn(\"popup-lyric-request-update\");\n\t\t\tnum = setInterval(() => postMessage(\"popup-lyric-update-ui\"), 16.66);\n\t\t} else if (event.data === \"popup-lyric-stop-update\") {\n\t\t\tclearInterval(num);\n\t\t\tpostMessage(\"popup-lyric-update-ui\");\n\t\t\tnum = null;\n\t\t}\n\t};\n} else {\n\tPopupLyrics();\n}\n\nlet CACHE = {};\n\nfunction PopupLyrics() {\n\tconst { Player, CosmosAsync, LocalStorage, ContextMenu } = Spicetify;\n\n\tif (!CosmosAsync || !LocalStorage || !ContextMenu) {\n\t\tsetTimeout(PopupLyrics, 500);\n\t\treturn;\n\t}\n\n\tconst worker = new Worker(\"./extensions/popupLyrics.js\");\n\tworker.onmessage = (event) => {\n\t\tif (event.data === \"popup-lyric-update-ui\") {\n\t\t\ttick(userConfigs);\n\t\t}\n\t};\n\n\tlet workerIsRunning = null;\n\tdocument.addEventListener(\"visibilitychange\", (e) => {\n\t\tif (e.target.hidden) {\n\t\t\tif (!workerIsRunning) {\n\t\t\t\tworker.postMessage(\"popup-lyric-request-update\");\n\t\t\t\tworkerIsRunning = true;\n\t\t\t}\n\t\t} else {\n\t\t\tif (workerIsRunning) {\n\t\t\t\tworker.postMessage(\"popup-lyric-stop-update\");\n\t\t\t\tworkerIsRunning = false;\n\t\t\t}\n\t\t}\n\t});\n\n\tconst LyricUtils = {\n\t\tnormalize(s, emptySymbol = true) {\n\t\t\tconst result = s\n\t\t\t\t.replace(/ļ¼ˆ/g, \"(\")\n\t\t\t\t.replace(/ļ¼‰/g, \")\")\n\t\t\t\t.replace(/怐/g, \"[\")\n\t\t\t\t.replace(/怑/g, \"]\")\n\t\t\t\t.replace(/怂/g, \". \")\n\t\t\t\t.replace(/ļ¼›/g, \"; \")\n\t\t\t\t.replace(/ļ¼š/g, \": \")\n\t\t\t\t.replace(/ļ¼Ÿ/g, \"? \")\n\t\t\t\t.replace(/ļ¼/g, \"! \")\n\t\t\t\t.replace(/态|ļ¼Œ/g, \", \")\n\t\t\t\t.replace(/ā€˜|ā€™|ā€²|ļ¼‡/g, \"'\")\n\t\t\t\t.replace(/ā€œ|ā€/g, '\"')\n\t\t\t\t.replace(/怜/g, \"~\")\n\t\t\t\t.replace(/Ā·|惻/g, \"ā€¢\");\n\t\t\tif (emptySymbol) {\n\t\t\t\tresult.replace(/-/g, \" \").replace(/\\//g, \" \");\n\t\t\t}\n\t\t\treturn result.replace(/\\s+/g, \" \").trim();\n\t\t},\n\n\t\tremoveExtraInfo(s) {\n\t\t\treturn (\n\t\t\t\ts\n\t\t\t\t\t.replace(/-\\s+(feat|with|prod).*/i, \"\")\n\t\t\t\t\t.replace(/(\\(|\\[)(feat|with|prod)\\.?\\s+.*(\\)|\\])$/i, \"\")\n\t\t\t\t\t.replace(/\\s-\\s.*/, \"\")\n\t\t\t\t\t.trim() || s\n\t\t\t);\n\t\t},\n\n\t\tcapitalize(s) {\n\t\t\treturn s.replace(/^(\\w)/, ($1) => $1.toUpperCase());\n\t\t},\n\t};\n\n\tconst LyricProviders = {\n\t\tasync fetchSpotify(info) {\n\t\t\tconst baseURL = \"https://spclient.wg.spotify.com/color-lyrics/v2/track/\";\n\t\t\tconst id = info.uri.split(\":\")[2];\n\t\t\tconst body = await CosmosAsync.get(`${baseURL + id}?format=json&vocalRemoval=false&market=from_token`);\n\n\t\t\tconst lyricsData = body.lyrics;\n\t\t\tif (!lyricsData || lyricsData.syncType !== \"LINE_SYNCED\") {\n\t\t\t\treturn { error: \"No lyrics\" };\n\t\t\t}\n\n\t\t\tconst lines = lyricsData.lines;\n\t\t\tconst lyrics = lines.map((a) => ({\n\t\t\t\tstartTime: a.startTimeMs / 1000,\n\t\t\t\ttext: a.words,\n\t\t\t}));\n\n\t\t\treturn { lyrics };\n\t\t},\n\n\t\tasync fetchMusixmatch(info) {\n\t\t\tconst baseURL =\n\t\t\t\t\"https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_synched&subtitle_format=mxm&app_id=web-desktop-app-v1.0&\";\n\n\t\t\tconst durr = info.duration / 1000;\n\n\t\t\tconst params = {\n\t\t\t\tq_album: info.album,\n\t\t\t\tq_artist: info.artist,\n\t\t\t\tq_artists: info.artist,\n\t\t\t\tq_track: info.title,\n\t\t\t\ttrack_spotify_id: info.uri,\n\t\t\t\tq_duration: durr,\n\t\t\t\tf_subtitle_length: Math.floor(durr),\n\t\t\t\tusertoken: userConfigs.services.musixmatch.token,\n\t\t\t};\n\n\t\t\tconst finalURL =\n\t\t\t\tbaseURL +\n\t\t\t\tObject.keys(params)\n\t\t\t\t\t.map((key) => `${key}=${encodeURIComponent(params[key])}`)\n\t\t\t\t\t.join(\"&\");\n\n\t\t\ttry {\n\t\t\t\tlet body = await CosmosAsync.get(finalURL, null, {\n\t\t\t\t\tauthority: \"apic-desktop.musixmatch.com\",\n\t\t\t\t\tcookie: \"x-mxm-token-guid=\",\n\t\t\t\t});\n\n\t\t\t\tbody = body.message.body.macro_calls;\n\n\t\t\t\tif (body[\"matcher.track.get\"].message.header.status_code !== 200) {\n\t\t\t\t\tconst head = body[\"matcher.track.get\"].message.header;\n\t\t\t\t\treturn {\n\t\t\t\t\t\terror: `Requested error: ${head.status_code}: ${head.hint} - ${head.mode}`,\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tconst meta = body[\"matcher.track.get\"].message.body;\n\t\t\t\tconst hasSynced = meta.track.has_subtitles;\n\t\t\t\tconst isRestricted = body[\"track.lyrics.get\"].message.header.status_code === 200 && body[\"track.lyrics.get\"].message.body.lyrics.restricted;\n\t\t\t\tconst isInstrumental = meta.track.instrumental;\n\n\t\t\t\tif (isRestricted) return { error: \"Unfortunately we're not authorized to show these lyrics.\" };\n\t\t\t\tif (isInstrumental) return { error: \"Instrumental\" };\n\t\t\t\tif (hasSynced) {\n\t\t\t\t\tconst subtitle = body[\"track.subtitles.get\"].message.body.subtitle_list[0].subtitle;\n\n\t\t\t\t\tconst lyrics = JSON.parse(subtitle.subtitle_body).map((line) => ({\n\t\t\t\t\t\ttext: line.text || \"ā™Ŗ\",\n\t\t\t\t\t\tstartTime: line.time.total,\n\t\t\t\t\t}));\n\t\t\t\t\treturn { lyrics };\n\t\t\t\t}\n\n\t\t\t\treturn { error: \"No lyrics\" };\n\t\t\t} catch (err) {\n\t\t\t\treturn { error: err.message };\n\t\t\t}\n\t\t},\n\n\t\tasync fetchNetease(info) {\n\t\t\tconst searchURL = \"https://music.xianqiao.wang/neteaseapiv2/search?limit=10&type=1&keywords=\";\n\t\t\tconst lyricURL = \"https://music.xianqiao.wang/neteaseapiv2/lyric?id=\";\n\t\t\tconst requestHeader = {\n\t\t\t\t\"User-Agent\": \"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0\",\n\t\t\t};\n\n\t\t\tconst cleanTitle = LyricUtils.removeExtraInfo(LyricUtils.normalize(info.title));\n\t\t\tconst finalURL = searchURL + encodeURIComponent(`${cleanTitle} ${info.artist}`);\n\n\t\t\tconst searchResults = await CosmosAsync.get(finalURL, null, requestHeader);\n\t\t\tconst items = searchResults.result.songs;\n\t\t\tif (!items || !items.length) {\n\t\t\t\treturn { error: \"Cannot find track\" };\n\t\t\t}\n\n\t\t\tconst album = LyricUtils.capitalize(info.album);\n\t\t\tconst itemId = items.findIndex((val) => LyricUtils.capitalize(val.album.name) === album || Math.abs(info.duration - val.duration) < 1000);\n\t\t\tif (itemId === -1) return { error: \"Cannot find track\" };\n\n\t\t\tconst meta = await CosmosAsync.get(lyricURL + items[itemId].id, null, requestHeader);\n\t\t\tlet lyricStr = meta.lrc;\n\n\t\t\tif (!lyricStr || !lyricStr.lyric) {\n\t\t\t\treturn { error: \"No lyrics\" };\n\t\t\t}\n\t\t\tlyricStr = lyricStr.lyric;\n\n\t\t\tconst otherInfoKeys = [\n\t\t\t\t\"\\\\s?作?\\\\s*čƍ|\\\\s?作?\\\\s*ę›²|\\\\s?ē¼–\\\\s*ę›²?|\\\\s?ē›‘\\\\s*制?\",\n\t\t\t\t\".*ē¼–写|.*和音|.*和声|.*合声|.*ꏐē“|.*录|.*å·„ē؋|.*巄作室|.*č®¾č®”|.*å‰Ŗč¾‘|.*制作|.*å‘č”Œ|.*å‡ŗ品|.*åŽęœŸ|.*ę··éŸ³|.*ē¼©ę··\",\n\t\t\t\t\"原唱|ēæ»å”±|题字|ę–‡ę”ˆ|굷ꊄ|古ē­|äŗŒčƒ”|钢ē“|吉他|č“ę–Æ|ē¬›å­|鼓|弦乐\",\n\t\t\t\t\"lrc|publish|vocal|guitar|program|produce|write|mix\",\n\t\t\t];\n\t\t\tconst otherInfoRegexp = new RegExp(`^(${otherInfoKeys.join(\"|\")}).*(:|ļ¼š)`, \"i\");\n\n\t\t\tconst lines = lyricStr.split(/\\r?\\n/).map((line) => line.trim());\n\t\t\tlet noLyrics = false;\n\t\t\tconst lyrics = lines\n\t\t\t\t.flatMap((line) => {\n\t\t\t\t\t// [\"[ar:Beyond]\"]\n\t\t\t\t\t// [\"[03:10]\"]\n\t\t\t\t\t// [\"[03:10]\", \"ę°øčæœé«˜å”±ęˆ‘ę­Œ\"]\n\t\t\t\t\t// [\"ę°øčæœé«˜å”±ęˆ‘ę­Œ\"]\n\t\t\t\t\t// [\"[03:10]\", \"[03:10]\", \"ę°øčæœé«˜å”±ęˆ‘ę­Œ\"]\n\t\t\t\t\tconst matchResult = line.match(/(\\[.*?\\])|([^[\\]]+)/g) || [line];\n\t\t\t\t\tif (!matchResult.length || matchResult.length === 1) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst textIndex = matchResult.findIndex((slice) => !slice.endsWith(\"]\"));\n\t\t\t\t\tlet text = \"\";\n\t\t\t\t\tif (textIndex > -1) {\n\t\t\t\t\t\ttext = matchResult.splice(textIndex, 1)[0];\n\t\t\t\t\t\ttext = LyricUtils.capitalize(LyricUtils.normalize(text, false));\n\t\t\t\t\t}\n\t\t\t\t\tif (text === \"ēŗÆ音乐, čÆ·ę¬£čµ\") noLyrics = true;\n\t\t\t\t\treturn matchResult.map((slice) => {\n\t\t\t\t\t\tconst result = {};\n\t\t\t\t\t\tconst matchResult = slice.match(/[^[\\]]+/g);\n\t\t\t\t\t\tconst [key, value] = matchResult[0].split(\":\") || [];\n\t\t\t\t\t\tconst [min, sec] = [Number.parseFloat(key), Number.parseFloat(value)];\n\t\t\t\t\t\tif (!Number.isNaN(min) && !Number.isNaN(sec) && !otherInfoRegexp.test(text)) {\n\t\t\t\t\t\t\tresult.startTime = min * 60 + sec;\n\t\t\t\t\t\t\tresult.text = text || \"ā™Ŗ\";\n\t\t\t\t\t\t\treturn result;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn;\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t\t.sort((a, b) => {\n\t\t\t\t\tif (a.startTime === null) {\n\t\t\t\t\t\treturn 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (b.startTime === null) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn a.startTime - b.startTime;\n\t\t\t\t})\n\t\t\t\t.filter(Boolean);\n\n\t\t\tif (noLyrics) {\n\t\t\t\treturn { error: \"No lyrics\" };\n\t\t\t}\n\t\t\tif (!lyrics.length) {\n\t\t\t\treturn { error: \"No synced lyrics\" };\n\t\t\t}\n\n\t\t\treturn { lyrics };\n\t\t},\n\n\t\tasync fetchLrclib(info) {\n\t\t\tconst baseURL = \"https://lrclib.net/api/get\";\n\t\t\tconst durr = info.duration / 1000;\n\t\t\tconst params = {\n\t\t\t\ttrack_name: info.title,\n\t\t\t\tartist_name: info.artist,\n\t\t\t\talbum_name: info.album,\n\t\t\t\tduration: durr,\n\t\t\t};\n\n\t\t\tconst finalURL = `${baseURL}?${Object.keys(params)\n\t\t\t\t.map((key) => `${key}=${encodeURIComponent(params[key])}`)\n\t\t\t\t.join(\"&\")}`;\n\n\t\t\tconst body = await fetch(finalURL, {\n\t\t\t\theaders: {\n\t\t\t\t\t\"x-user-agent\": `spicetify v${Spicetify.Config.version} (https://github.com/spicetify/cli)`,\n\t\t\t\t},\n\t\t\t});\n\n\t\t\tif (body.status !== 200) {\n\t\t\t\treturn { error: \"Request error: Track wasn't found\" };\n\t\t\t}\n\n\t\t\tconst meta = await body.json();\n\t\t\tif (meta?.instrumental) {\n\t\t\t\treturn { error: \"Instrumental\" };\n\t\t\t}\n\t\t\tif (!meta?.syncedLyrics) {\n\t\t\t\treturn { error: \"No synced lyrics\" };\n\t\t\t}\n\n\t\t\t// Preprocess lyrics by removing [tags] and empty lines\n\t\t\tconst lines = meta?.syncedLyrics\n\t\t\t\t.replaceAll(/\\[[a-zA-Z]+:.+\\]/g, \"\")\n\t\t\t\t.trim()\n\t\t\t\t.split(\"\\n\");\n\n\t\t\tconst syncedTimestamp = /\\[([0-9:.]+)\\]/;\n\t\t\tconst isSynced = lines[0].match(syncedTimestamp);\n\n\t\t\tconst lyrics = lines.map((line) => {\n\t\t\t\tconst time = line.match(syncedTimestamp)?.[1];\n\t\t\t\tconst lyricContent = line.replace(syncedTimestamp, \"\").trim();\n\t\t\t\tconst lyric = lyricContent.replaceAll(/<([0-9:.]+)>/g, \"\").trim();\n\t\t\t\tconst [min, sec] = time.replace(/\\[\\]<>/, \"\").split(\":\");\n\n\t\t\t\tif (line.trim() !== \"\" && isSynced && time) {\n\t\t\t\t\treturn { text: lyric || \"ā™Ŗ\", startTime: Number(min) * 60 + Number(sec) };\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t});\n\n\t\t\treturn { lyrics };\n\t\t},\n\t};\n\n\tconst userConfigs = {\n\t\tsmooth: boolLocalStorage(\"popup-lyrics:smooth\"),\n\t\tcenterAlign: boolLocalStorage(\"popup-lyrics:center-align\"),\n\t\tshowCover: boolLocalStorage(\"popup-lyrics:show-cover\"),\n\t\tfontSize: Number(LocalStorage.get(\"popup-lyrics:font-size\")),\n\t\tblurSize: Number(LocalStorage.get(\"popup-lyrics:blur-size\")),\n\t\tfontFamily: LocalStorage.get(\"popup-lyrics:font-family\") || \"spotify-circular\",\n\t\tratio: LocalStorage.get(\"popup-lyrics:ratio\") || \"11\",\n\t\tdelay: Number(LocalStorage.get(\"popup-lyrics:delay\")),\n\t\tservices: {\n\t\t\tnetease: {\n\t\t\t\ton: boolLocalStorage(\"popup-lyrics:services:netease:on\"),\n\t\t\t\tcall: LyricProviders.fetchNetease,\n\t\t\t\tdesc: \"Crowdsourced lyrics provider ran by Chinese developers and users.\",\n\t\t\t},\n\t\t\tmusixmatch: {\n\t\t\t\ton: boolLocalStorage(\"popup-lyrics:services:musixmatch:on\"),\n\t\t\t\tcall: LyricProviders.fetchMusixmatch,\n\t\t\t\tdesc: \"Fully compatible with Spotify. Requires a token that can be retrieved from the official Musixmatch app. If you have problems with retrieving lyrics, try refreshing the token by clicking Refresh Token button.\",\n\t\t\t\ttoken: LocalStorage.get(\"popup-lyrics:services:musixmatch:token\") || \"2005218b74f939209bda92cb633c7380612e14cb7fe92dcd6a780f\",\n\t\t\t},\n\t\t\tspotify: {\n\t\t\t\ton: boolLocalStorage(\"popup-lyrics:services:spotify:on\"),\n\t\t\t\tcall: LyricProviders.fetchSpotify,\n\t\t\t\tdesc: \"Lyrics sourced from official Spotify API.\",\n\t\t\t},\n\t\t\tlrclib: {\n\t\t\t\ton: boolLocalStorage(\"popup-lyrics:services:lrclib:on\"),\n\t\t\t\tcall: LyricProviders.fetchLrclib,\n\t\t\t\tdesc: \"Lyrics sourced from lrclib.net. Supports both synced and unsynced lyrics. LRCLIB is a free and open-source lyrics provider.\",\n\t\t\t},\n\t\t},\n\t\tservicesOrder: [],\n\t};\n\n\tuserConfigs.fontSize = userConfigs.fontSize ? Number(userConfigs.fontSize) : 46;\n\ttry {\n\t\tconst rawServicesOrder = LocalStorage.get(\"popup-lyrics:services-order\");\n\t\tuserConfigs.servicesOrder = JSON.parse(rawServicesOrder);\n\n\t\tif (!Array.isArray(userConfigs.servicesOrder)) throw \"\";\n\n\t\tuserConfigs.servicesOrder = userConfigs.servicesOrder.filter((s) => userConfigs.services[s]); // Remove obsoleted services\n\n\t\tconst allServices = Object.keys(userConfigs.services);\n\t\tif (userConfigs.servicesOrder.length !== allServices.length) {\n\t\t\tfor (const s of allServices) {\n\t\t\t\tif (!userConfigs.servicesOrder.includes(s)) {\n\t\t\t\t\tuserConfigs.servicesOrder.push(s);\n\t\t\t\t}\n\t\t\t}\n\t\t\tLocalStorage.set(\"popup-lyrics:services-order\", JSON.stringify(userConfigs.servicesOrder));\n\t\t}\n\t} catch {\n\t\tuserConfigs.servicesOrder = Object.keys(userConfigs.services);\n\t\tLocalStorage.set(\"popup-lyrics:services-order\", JSON.stringify(userConfigs.servicesOrder));\n\t}\n\n\tconst lyricVideo = document.createElement(\"video\");\n\tlyricVideo.muted = true;\n\tlyricVideo.width = 600;\n\tswitch (userConfigs.ratio) {\n\t\tcase \"43\":\n\t\t\tlyricVideo.height = Math.round((lyricVideo.width * 3) / 4);\n\t\t\tbreak;\n\t\tcase \"169\":\n\t\t\tlyricVideo.height = Math.round((lyricVideo.width * 9) / 16);\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tlyricVideo.height = lyricVideo.width;\n\t\t\tbreak;\n\t}\n\n\tlet lyricVideoIsOpen = false;\n\tlyricVideo.onenterpictureinpicture = () => {\n\t\tlyricVideo.play();\n\t\tlyricVideoIsOpen = true;\n\t\ttick(userConfigs);\n\t\tupdateTrack();\n\t};\n\tlyricVideo.onleavepictureinpicture = () => {\n\t\tlyricVideoIsOpen = false;\n\t};\n\n\tconst lyricCanvas = document.createElement(\"canvas\");\n\tlyricCanvas.width = lyricVideo.width;\n\tlyricCanvas.height = lyricVideo.height;\n\n\tconst lyricCtx = lyricCanvas.getContext(\"2d\");\n\tlyricVideo.srcObject = lyricCanvas.captureStream();\n\tlyricCtx.fillRect(0, 0, 1, 1);\n\tlyricVideo.play();\n\n\tconst button = new Spicetify.Topbar.Button(\"Popup Lyrics\", \"lyrics\", () => {\n\t\tif (!lyricVideoIsOpen) {\n\t\t\tlyricVideo.requestPictureInPicture();\n\t\t} else {\n\t\t\tdocument.exitPictureInPicture();\n\t\t}\n\t});\n\tbutton.element.oncontextmenu = openConfig;\n\n\tconst coverCanvas = document.createElement(\"canvas\");\n\tcoverCanvas.width = lyricVideo.width;\n\tcoverCanvas.height = lyricVideo.width;\n\tconst coverCtx = coverCanvas.getContext(\"2d\");\n\n\tconst largeImage = new Image();\n\tlargeImage.onload = () => {\n\t\tcoverCtx.drawImage(largeImage, 0, 0, coverCtx.canvas.width, coverCtx.canvas.width);\n\t};\n\tuserConfigs.backgroundImage = coverCanvas;\n\n\tlet sharedData = {};\n\n\tPlayer.addEventListener(\"songchange\", () => {\n\t\tupdateTrack();\n\t});\n\n\tasync function updateTrack(refresh = false) {\n\t\tif (!lyricVideoIsOpen) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst meta = Player.data.item.metadata;\n\n\t\tif (!Spicetify.URI.isTrack(Player.data.item.uri) && !Spicetify.URI.isLocalTrack(Player.data.item.uri)) {\n\t\t\treturn;\n\t\t}\n\n\t\tlargeImage.src = meta.image_url;\n\t\tconst info = {\n\t\t\tduration: Number(meta.duration),\n\t\t\talbum: meta.album_title,\n\t\t\tartist: meta.artist_name,\n\t\t\ttitle: meta.title,\n\t\t\turi: Player.data.item.uri,\n\t\t};\n\n\t\tif (CACHE?.[info.uri]?.lyrics?.length && !refresh) {\n\t\t\tsharedData = CACHE[info.uri];\n\t\t} else {\n\t\t\tfor (const name of userConfigs.servicesOrder) {\n\t\t\t\tconst service = userConfigs.services[name];\n\t\t\t\tif (!service.on) continue;\n\t\t\t\tsharedData = { lyrics: [] };\n\n\t\t\t\ttry {\n\t\t\t\t\tconst data = await service.call(info);\n\t\t\t\t\tsharedData = data;\n\t\t\t\t\tCACHE[info.uri] = sharedData;\n\n\t\t\t\t\tif (!sharedData.error) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t} catch (err) {\n\t\t\t\t\tsharedData = { error: \"No lyrics\" };\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// simple word segmentation rules\n\tfunction getWords(str) {\n\t\tconst result = [];\n\t\tconst words = str.split(/(\\p{sc=Han}|\\p{sc=Katakana}|\\p{sc=Hiragana}|\\p{sc=Hang}|\\p{gc=Punctuation})|\\s+/gu);\n\t\tlet tempWord = \"\";\n\t\tfor (let word of words) {\n\t\t\tword ??= \" \";\n\t\t\tif (word) {\n\t\t\t\tif (tempWord && /(ā€œ|')$/.test(tempWord) && word !== \" \") {\n\t\t\t\t\t// End of line not allowed\n\t\t\t\t\ttempWord += word;\n\t\t\t\t} else if (/(,|\\.|\\?|:|;|'|ļ¼Œ|怂|ļ¼Ÿ|ļ¼š|ļ¼›|ā€)/.test(word) && tempWord !== \" \") {\n\t\t\t\t\t// Start of line not allowed\n\t\t\t\t\ttempWord += word;\n\t\t\t\t} else {\n\t\t\t\t\tif (tempWord) result.push(tempWord);\n\t\t\t\t\ttempWord = word;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tif (tempWord) result.push(tempWord);\n\t\treturn result;\n\t}\n\n\tfunction drawParagraph(ctx, str, options) {\n\t\tlet actualWidth = 0;\n\t\tconst maxWidth = ctx.canvas.width - options.left - options.right;\n\t\tconst words = getWords(str);\n\t\tconst lines = [];\n\t\tconst measures = [];\n\t\tlet tempLine = \"\";\n\t\tlet textMeasures = ctx.measureText(\"\");\n\t\tfor (let i = 0; i < words.length; i++) {\n\t\t\tconst word = words[i];\n\t\t\tconst line = tempLine + word;\n\t\t\tconst mea = ctx.measureText(line);\n\t\t\tconst isSpace = /\\s/.test(word);\n\t\t\tif (mea.width > maxWidth && tempLine && !isSpace) {\n\t\t\t\tactualWidth = Math.max(actualWidth, textMeasures.width);\n\t\t\t\tlines.push(tempLine);\n\t\t\t\tmeasures.push(textMeasures);\n\t\t\t\ttempLine = word;\n\t\t\t} else {\n\t\t\t\ttempLine = line;\n\t\t\t\tif (!isSpace) {\n\t\t\t\t\ttextMeasures = mea;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tif (tempLine !== \"\") {\n\t\t\tactualWidth = Math.max(actualWidth, textMeasures.width);\n\t\t\tlines.push(tempLine);\n\t\t\tmeasures.push(ctx.measureText(tempLine));\n\t\t}\n\n\t\tconst ascent = measures.length ? measures[0].actualBoundingBoxAscent : 0;\n\t\tconst body = measures.length ? options.lineHeight * (measures.length - 1) : 0;\n\t\tconst descent = measures.length ? measures[measures.length - 1].actualBoundingBoxDescent : 0;\n\t\tconst actualHeight = ascent + body + descent;\n\n\t\tlet startX = 0;\n\t\tlet startY = 0;\n\t\tlet translateX = 0;\n\t\tlet translateY = 0;\n\t\tif (options.hCenter) {\n\t\t\tstartX = (ctx.canvas.width - actualWidth) / 2;\n\t\t} else {\n\t\t\tstartX = options.left + translateX;\n\t\t}\n\n\t\tif (options.vCenter) {\n\t\t\tstartY = (ctx.canvas.height - actualHeight) / 2 + ascent;\n\t\t} else if (options.top) {\n\t\t\tstartY = options.top + ascent;\n\t\t} else if (options.bottom) {\n\t\t\tstartY = options.bottom - descent - body;\n\t\t}\n\n\t\tif (typeof options.translateX === \"function\") {\n\t\t\ttranslateX = options.translateX(actualWidth);\n\t\t}\n\t\tif (typeof options.translateX === \"number\") {\n\t\t\ttranslateX = options.translateX;\n\t\t}\n\t\tif (typeof options.translateY === \"function\") {\n\t\t\ttranslateY = options.translateY(actualHeight);\n\t\t}\n\t\tif (typeof options.translateY === \"number\") {\n\t\t\ttranslateY = options.translateY;\n\t\t}\n\t\tif (!options.measure) {\n\t\t\tlines.forEach((str, index) => {\n\t\t\t\tconst x = options.hCenter ? (ctx.canvas.width - measures[index].width) / 2 : startX;\n\t\t\t\tctx.fillText(str, x, startY + index * options.lineHeight + translateY);\n\t\t\t});\n\t\t}\n\t\treturn {\n\t\t\twidth: actualWidth,\n\t\t\theight: actualHeight,\n\t\t\tleft: startX + translateX,\n\t\t\tright: ctx.canvas.width - options.left - actualWidth + translateX,\n\t\t\ttop: startY - ascent + translateY,\n\t\t\tbottom: startY + body + descent + translateY,\n\t\t};\n\t}\n\n\tfunction drawBackground(ctx, image) {\n\t\tif (userConfigs.showCover) {\n\t\t\tconst { width, height } = ctx.canvas;\n\t\t\tctx.imageSmoothingEnabled = false;\n\t\t\tctx.save();\n\t\t\tconst blurSize = Number(userConfigs.blurSize);\n\t\t\tctx.filter = `blur(${blurSize}px)`;\n\t\t\tctx.drawImage(image, -blurSize * 2, -blurSize * 2 - (width - height) / 2, width + 4 * blurSize, width + 4 * blurSize);\n\t\t\tctx.restore();\n\t\t\tctx.fillStyle = \"#000000b0\";\n\t\t} else {\n\t\t\tctx.save();\n\t\t\tctx.fillStyle = \"#000000\";\n\t\t}\n\n\t\tctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\t\tctx.restore();\n\t}\n\n\tfunction drawText(ctx, text, color = \"white\") {\n\t\tdrawBackground(ctx, userConfigs.backgroundImage);\n\t\tconst fontSize = userConfigs.fontSize;\n\t\tctx.fillStyle = color;\n\t\tctx.font = `bold ${fontSize}px ${userConfigs.fontFamily}, sans-serif`;\n\t\tdrawParagraph(ctx, text, {\n\t\t\tvCenter: true,\n\t\t\thCenter: true,\n\t\t\tleft: 0,\n\t\t\tright: 0,\n\t\t\tlineHeight: fontSize,\n\t\t});\n\t\tctx.restore();\n\t}\n\n\tlet offscreenCanvas;\n\tlet offscreenCtx;\n\tlet gradient1;\n\tlet gradient2;\n\n\tfunction initOffscreenCtx(ctx) {\n\t\tif (!offscreenCtx) {\n\t\t\toffscreenCanvas = document.createElement(\"canvas\");\n\t\t\toffscreenCtx = offscreenCanvas.getContext(\"2d\");\n\t\t\tgradient1 = offscreenCtx.createLinearGradient(0, 0, 0, ctx.canvas.height);\n\t\t\tgradient1.addColorStop(0.08, \"transparent\");\n\t\t\tgradient1.addColorStop(0.15, \"white\");\n\t\t\tgradient1.addColorStop(0.85, \"white\");\n\t\t\tgradient1.addColorStop(0.92, \"transparent\");\n\t\t\tgradient2 = offscreenCtx.createLinearGradient(0, 0, 0, ctx.canvas.height);\n\t\t\tgradient2.addColorStop(0.0, \"white\");\n\t\t\tgradient2.addColorStop(0.7, \"white\");\n\t\t\tgradient2.addColorStop(0.925, \"transparent\");\n\t\t}\n\t\toffscreenCtx.canvas.width = ctx.canvas.width;\n\t\toffscreenCtx.canvas.height = ctx.canvas.height;\n\t\treturn {\n\t\t\toffscreenCtx,\n\t\t\tgradient1,\n\t\t\tgradient2,\n\t\t};\n\t}\n\n\t// Avoid drawing again when the same\n\t// Do not operate canvas again in other functions\n\tlet renderState;\n\n\tfunction isEqualState(state1, state2) {\n\t\tif (!state1 || !state2) return false;\n\t\treturn Object.keys(state1).reduce((p, c) => {\n\t\t\treturn p && state1[c] === state2[c];\n\t\t}, true);\n\t}\n\n\tfunction renderLyrics(ctx, lyrics, currentTime) {\n\t\tconst focusLineFontSize = userConfigs.fontSize;\n\t\tconst focusLineHeight = focusLineFontSize * 1.2;\n\t\tconst focusLineMargin = focusLineFontSize * 1;\n\t\tconst otherLineFontSize = focusLineFontSize * 1;\n\t\tconst otherLineHeight = otherLineFontSize * 1.2;\n\t\tconst otherLineMargin = otherLineFontSize * 1;\n\t\tconst otherLineOpacity = 0.35;\n\t\tconst marginWidth = ctx.canvas.width * 0.075;\n\t\tconst animateDuration = userConfigs.smooth ? 0.3 : 0;\n\t\tconst hCenter = userConfigs.centerAlign;\n\t\tconst fontFamily = `${userConfigs.fontFamily}, sans-serif`;\n\n\t\tlet currentIndex = -1;\n\t\tlet progress = 1;\n\t\tlyrics.forEach(({ startTime }, index) => {\n\t\t\tif (startTime && currentTime > startTime - animateDuration) {\n\t\t\t\tcurrentIndex = index;\n\t\t\t\tif (currentTime < startTime) {\n\t\t\t\t\tprogress = (currentTime - startTime + animateDuration) / animateDuration;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tif (currentIndex === -1) {\n\t\t\tdrawText(ctx, \"\");\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextState = {\n\t\t\t...userConfigs,\n\t\t\tcurrentIndex,\n\t\t\tlyrics,\n\t\t\tprogress,\n\t\t};\n\t\tif (isEqualState(nextState, renderState)) return;\n\t\trenderState = nextState;\n\n\t\tdrawBackground(ctx, userConfigs.backgroundImage);\n\n\t\tconst { offscreenCtx, gradient1 } = initOffscreenCtx(ctx);\n\t\toffscreenCtx.save();\n\n\t\t// focus line\n\t\tconst fFontSize = otherLineFontSize + progress * (focusLineFontSize - otherLineFontSize);\n\t\tconst fLineHeight = otherLineHeight + progress * (focusLineHeight - otherLineHeight);\n\t\tconst fLineOpacity = otherLineOpacity + progress * (1 - otherLineOpacity);\n\t\tconst otherRight = ctx.canvas.width - marginWidth - (otherLineFontSize / focusLineFontSize) * (ctx.canvas.width - 2 * marginWidth);\n\t\tconst progressRight = marginWidth + (1 - progress) * (otherRight - marginWidth);\n\t\toffscreenCtx.fillStyle = `rgba(255, 255, 255, ${fLineOpacity})`;\n\t\toffscreenCtx.font = `bold ${fFontSize}px ${fontFamily}`;\n\t\tconst prevLineFocusHeight = drawParagraph(offscreenCtx, lyrics[currentIndex - 1] ? lyrics[currentIndex - 1].text : \"\", {\n\t\t\tvCenter: true,\n\t\t\thCenter,\n\t\t\tleft: marginWidth,\n\t\t\tright: marginWidth,\n\t\t\tlineHeight: focusLineFontSize,\n\t\t\tmeasure: true,\n\t\t}).height;\n\n\t\tconst pos = drawParagraph(offscreenCtx, lyrics[currentIndex].text, {\n\t\t\tvCenter: true,\n\t\t\thCenter,\n\t\t\tleft: marginWidth,\n\t\t\tright: progressRight,\n\t\t\tlineHeight: fLineHeight,\n\t\t\ttranslateY: (selfHeight) => ((prevLineFocusHeight + selfHeight) / 2 + focusLineMargin) * (1 - progress),\n\t\t});\n\t\t// offscreenCtx.strokeRect(pos.left, pos.top, pos.width, pos.height);\n\n\t\t// prev line\n\t\tlet lastBeforePos = pos;\n\t\tfor (let i = 0; i < currentIndex; i++) {\n\t\t\tif (i === 0) {\n\t\t\t\tconst prevProgressLineFontSize = otherLineFontSize + (1 - progress) * (focusLineFontSize - otherLineFontSize);\n\t\t\t\tconst prevProgressLineOpacity = otherLineOpacity + (1 - progress) * (1 - otherLineOpacity);\n\t\t\t\toffscreenCtx.fillStyle = `rgba(255, 255, 255, ${prevProgressLineOpacity})`;\n\t\t\t\toffscreenCtx.font = `bold ${prevProgressLineFontSize}px ${fontFamily}`;\n\t\t\t} else {\n\t\t\t\toffscreenCtx.fillStyle = `rgba(255, 255, 255, ${otherLineOpacity})`;\n\t\t\t\toffscreenCtx.font = `bold ${otherLineFontSize}px ${fontFamily}`;\n\t\t\t}\n\t\t\tlastBeforePos = drawParagraph(offscreenCtx, lyrics[currentIndex - 1 - i].text, {\n\t\t\t\thCenter,\n\t\t\t\tbottom: i === 0 ? lastBeforePos.top - focusLineMargin : lastBeforePos.top - otherLineMargin,\n\t\t\t\tleft: marginWidth,\n\t\t\t\tright: i === 0 ? marginWidth + progress * (otherRight - marginWidth) : otherRight,\n\t\t\t\tlineHeight: i === 0 ? otherLineHeight + (1 - progress) * (focusLineHeight - otherLineHeight) : otherLineHeight,\n\t\t\t});\n\t\t\tif (lastBeforePos.top < 0) break;\n\t\t}\n\t\t// next line\n\t\toffscreenCtx.fillStyle = `rgba(255, 255, 255, ${otherLineOpacity})`;\n\t\toffscreenCtx.font = `bold ${otherLineFontSize}px ${fontFamily}`;\n\t\tlet lastAfterPos = pos;\n\t\tfor (let i = currentIndex + 1; i < lyrics.length; i++) {\n\t\t\tlastAfterPos = drawParagraph(offscreenCtx, lyrics[i].text, {\n\t\t\t\thCenter,\n\t\t\t\ttop: i === currentIndex + 1 ? lastAfterPos.bottom + focusLineMargin : lastAfterPos.bottom + otherLineMargin,\n\t\t\t\tleft: marginWidth,\n\t\t\t\tright: otherRight,\n\t\t\t\tlineHeight: otherLineHeight,\n\t\t\t});\n\t\t\tif (lastAfterPos.bottom > ctx.canvas.height) break;\n\t\t}\n\n\t\toffscreenCtx.globalCompositeOperation = \"source-in\";\n\t\toffscreenCtx.fillStyle = gradient1;\n\t\toffscreenCtx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\t\toffscreenCtx.restore();\n\t\tctx.drawImage(offscreenCtx.canvas, 0, 0);\n\n\t\tctx.restore();\n\t}\n\n\tlet timeout = null;\n\n\tasync function tick(options) {\n\t\tif (!lyricVideoIsOpen) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (timeout) clearTimeout(timeout);\n\n\t\tconst audio = {\n\t\t\tcurrentTime: (Player.getProgress() - Number(options.delay)) / 1000,\n\t\t\tduration: Player.getDuration() / 1000,\n\t\t};\n\n\t\tconst { error, lyrics } = sharedData;\n\n\t\tif (error) {\n\t\t\tif (error === \"Instrumental\") {\n\t\t\t\tdrawText(lyricCtx, error);\n\t\t\t} else {\n\t\t\t\tdrawText(lyricCtx, error, \"red\");\n\t\t\t}\n\t\t} else if (!lyrics) {\n\t\t\tdrawText(lyricCtx, \"No lyrics\");\n\t\t} else if (audio.duration && lyrics.length) {\n\t\t\trenderLyrics(lyricCtx, lyrics, audio.currentTime);\n\t\t} else if (!audio.duration || lyrics.length === 0) {\n\t\t\tdrawText(lyricCtx, audio.currentSrc ? \"Loading\" : \"Waiting\");\n\t\t}\n\n\t\tif (!lyrics?.length) {\n\t\t\ttimeout = setTimeout(tick, 1000, options);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!document.hidden) {\n\t\t\trequestAnimationFrame(() => tick(options));\n\t\t}\n\t}\n\n\tfunction boolLocalStorage(name, defaultVal = true) {\n\t\tconst value = LocalStorage.get(name);\n\t\treturn value ? value === \"true\" : defaultVal;\n\t}\n\n\tlet configContainer;\n\n\tfunction openConfig(event) {\n\t\tevent.preventDefault();\n\n\t\t// Reset on reopen\n\t\tif (configContainer) {\n\t\t\tresetTokenButton(configContainer);\n\t\t} else {\n\t\t\tconfigContainer = document.createElement(\"div\");\n\t\t\tconfigContainer.id = \"popup-config-container\";\n\t\t\tconst style = document.createElement(\"style\");\n\t\t\tstyle.innerHTML = `\n.setting-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.setting-row::after {\n content: \"\";\n display: table;\n clear: both;\n}\n.setting-row .col {\n display: flex;\n padding: 10px 0;\n align-items: center;\n}\n.setting-row .col.description {\n padding-right: 15px;\n cursor: default;\n width: 50%;\n}\n.setting-row .col.action {\n justify-content: flex-end;\n width: 50%;\n}\n.popup-config-col-margin {\n margin-top: 10px;\n}\nbutton.switch {\n align-items: center;\n border: 0px;\n border-radius: 50%;\n background-color: rgba(var(--spice-rgb-shadow), .7);\n color: var(--spice-text);\n cursor: pointer;\n display: flex;\n margin-inline-start: 12px;\n padding: 8px;\n}\nbutton.switch.disabled,\nbutton.switch[disabled] {\n color: rgba(var(--spice-rgb-text), .3);\n}\nbutton.switch.small {\n width: 22px;\n height: 22px;\n padding: 6px;\n}\nbutton.btn {\n font-weight: 700;\n display: block;\n background-color: rgba(var(--spice-rgb-shadow), .7);\n border-radius: 500px;\n transition-duration: 33ms;\n transition-property: background-color, border-color, color, box-shadow, filter, transform;\n padding-inline: 15px;\n border: 1px solid #727272;\n color: var(--spice-text);\n min-block-size: 32px;\n cursor: pointer;\n}\nbutton.btn:hover {\n transform: scale(1.04);\n border-color: var(--spice-text);\n}\nbutton.btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n#popup-config-container select {\n color: var(--spice-text);\n background: rgba(var(--spice-rgb-shadow), .7);\n border: 0;\n height: 32px;\n}\n#popup-config-container input {\n width: 100%;\n padding: 0 5px;\n height: 32px;\n border: 0;\n}\n#popup-lyrics-delay-input {\n background-color: rgba(var(--spice-rgb-shadow), .7);\n color: var(--spice-text);\n}\n`;\n\t\t\tconst optionHeader = document.createElement(\"h2\");\n\t\t\toptionHeader.innerText = \"Options\";\n\t\t\tconst smooth = createSlider(\"Smooth scrolling\", userConfigs.smooth, (state) => {\n\t\t\t\tuserConfigs.smooth = state;\n\t\t\t\tLocalStorage.set(\"popup-lyrics:smooth\", String(state));\n\t\t\t});\n\t\t\tconst center = createSlider(\"Center align\", userConfigs.centerAlign, (state) => {\n\t\t\t\tuserConfigs.centerAlign = state;\n\t\t\t\tLocalStorage.set(\"popup-lyrics:center-align\", String(state));\n\t\t\t});\n\t\t\tconst cover = createSlider(\"Show cover\", userConfigs.showCover, (state) => {\n\t\t\t\tuserConfigs.showCover = state;\n\t\t\t\tLocalStorage.set(\"popup-lyrics:show-cover\", String(state));\n\t\t\t});\n\t\t\tconst ratio = createOptions(\"Aspect ratio\", { 11: \"1:1\", 43: \"4:3\", 169: \"16:9\" }, userConfigs.ratio, (state) => {\n\t\t\t\tuserConfigs.ratio = state;\n\t\t\t\tLocalStorage.set(\"popup-lyrics:ratio\", state);\n\t\t\t\tlet value = lyricVideo.width;\n\t\t\t\tswitch (userConfigs.ratio) {\n\t\t\t\t\tcase \"11\":\n\t\t\t\t\t\tvalue = lyricVideo.width;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase \"43\":\n\t\t\t\t\t\tvalue = Math.round((lyricVideo.width * 3) / 4);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase \"169\":\n\t\t\t\t\t\tvalue = Math.round((lyricVideo.width * 9) / 16);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tlyricVideo.height = lyricCanvas.height = value;\n\t\t\t\toffscreenCtx = null;\n\t\t\t});\n\t\t\tconst fontSize = createOptions(\n\t\t\t\t\"Font size\",\n\t\t\t\t{\n\t\t\t\t\t30: \"30px\",\n\t\t\t\t\t34: \"34px\",\n\t\t\t\t\t38: \"38px\",\n\t\t\t\t\t42: \"42px\",\n\t\t\t\t\t46: \"46px\",\n\t\t\t\t\t50: \"50px\",\n\t\t\t\t\t54: \"54px\",\n\t\t\t\t\t58: \"58px\",\n\t\t\t\t},\n\t\t\t\tString(userConfigs.fontSize),\n\t\t\t\t(state) => {\n\t\t\t\t\tuserConfigs.fontSize = Number(state);\n\t\t\t\t\tLocalStorage.set(\"popup-lyrics:font-size\", state);\n\t\t\t\t}\n\t\t\t);\n\t\t\tconst blurSize = createOptions(\n\t\t\t\t\"Blur size\",\n\t\t\t\t{\n\t\t\t\t\t2: \"2px\",\n\t\t\t\t\t5: \"5px\",\n\t\t\t\t\t10: \"10px\",\n\t\t\t\t\t15: \"15px\",\n\t\t\t\t},\n\t\t\t\tString(userConfigs.blurSize),\n\t\t\t\t(state) => {\n\t\t\t\t\tuserConfigs.blurSize = Number(state);\n\t\t\t\t\tLocalStorage.set(\"popup-lyrics:blur-size\", state);\n\t\t\t\t}\n\t\t\t);\n\t\t\tconst delay = createOptionsInput(\"Delay\", String(userConfigs.delay), (state) => {\n\t\t\t\tuserConfigs.delay = Number(state);\n\t\t\t\tLocalStorage.set(\"popup-lyrics:delay\", state);\n\t\t\t});\n\t\t\tconst clearCache = descriptiveElement(\n\t\t\t\tcreateButton(\"Clear Memory Cache\", \"Clear Memory Cache\", () => {\n\t\t\t\t\tCACHE = {};\n\t\t\t\t\tupdateTrack();\n\t\t\t\t}),\n\t\t\t\t\"Loaded lyrics are cached in memory for faster reloading. Press this button to clear the cached lyrics from memory without restarting Spotify.\"\n\t\t\t);\n\n\t\t\tconst serviceHeader = document.createElement(\"h2\");\n\t\t\tserviceHeader.innerText = \"Services\";\n\n\t\t\tconst serviceContainer = document.createElement(\"div\");\n\n\t\t\tfunction stackServiceElements() {\n\t\t\t\tuserConfigs.servicesOrder.forEach((name, index) => {\n\t\t\t\t\tconst el = userConfigs.services[name].element;\n\n\t\t\t\t\tconst [up, down] = el.querySelectorAll(\"button\");\n\t\t\t\t\tif (index === 0) {\n\t\t\t\t\t\tup.disabled = true;\n\t\t\t\t\t\tdown.disabled = false;\n\t\t\t\t\t} else if (index === userConfigs.servicesOrder.length - 1) {\n\t\t\t\t\t\tup.disabled = false;\n\t\t\t\t\t\tdown.disabled = true;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tup.disabled = false;\n\t\t\t\t\t\tdown.disabled = false;\n\t\t\t\t\t}\n\n\t\t\t\t\tserviceContainer.append(el);\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tfunction switchCallback(el, state) {\n\t\t\t\tconst id = el.dataset.id;\n\t\t\t\tuserConfigs.services[id].on = state;\n\t\t\t\tLocalStorage.set(`popup-lyrics:services:${id}:on`, state);\n\t\t\t\tupdateTrack(true);\n\t\t\t}\n\n\t\t\tfunction posCallback(el, dir) {\n\t\t\t\tconst id = el.dataset.id;\n\t\t\t\tconst curPos = userConfigs.servicesOrder.findIndex((val) => val === id);\n\t\t\t\tconst newPos = curPos + dir;\n\n\t\t\t\tconst temp = userConfigs.servicesOrder[newPos];\n\t\t\t\tuserConfigs.servicesOrder[newPos] = userConfigs.servicesOrder[curPos];\n\t\t\t\tuserConfigs.servicesOrder[curPos] = temp;\n\n\t\t\t\tLocalStorage.set(\"popup-lyrics:services-order\", JSON.stringify(userConfigs.servicesOrder));\n\n\t\t\t\tstackServiceElements();\n\t\t\t\tupdateTrack(true);\n\t\t\t}\n\n\t\t\tfor (const name of userConfigs.servicesOrder) {\n\t\t\t\tuserConfigs.services[name].element = createServiceOption(name, userConfigs.services[name], switchCallback, posCallback);\n\t\t\t}\n\t\t\tstackServiceElements();\n\n\t\t\tconfigContainer.append(\n\t\t\t\tstyle,\n\t\t\t\toptionHeader,\n\t\t\t\tsmooth,\n\t\t\t\tcenter,\n\t\t\t\tcover,\n\t\t\t\tblurSize,\n\t\t\t\tfontSize,\n\t\t\t\tratio,\n\t\t\t\tdelay,\n\t\t\t\tclearCache,\n\t\t\t\tserviceHeader,\n\t\t\t\tserviceContainer\n\t\t\t);\n\t\t}\n\t\tSpicetify.PopupModal.display({\n\t\t\ttitle: \"Popup Lyrics\",\n\t\t\tcontent: configContainer,\n\t\t});\n\t}\n\n\tfunction createSlider(name, defaultVal, callback) {\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.innerHTML = `\n
    \n \n
    \n
    `;\n\n\t\tconst slider = container.querySelector(\"button\");\n\t\tslider.classList.toggle(\"disabled\", !defaultVal);\n\n\t\tslider.onclick = () => {\n\t\t\tconst state = slider.classList.contains(\"disabled\");\n\t\t\tslider.classList.toggle(\"disabled\");\n\t\t\tcallback(state);\n\t\t};\n\n\t\treturn container;\n\t}\n\tfunction createOptions(name, options, defaultValue, callback) {\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.innerHTML = `\n
    \n \n
    \n \n
    \n
    `;\n\n\t\tconst select = container.querySelector(\"select\");\n\t\tselect.value = defaultValue;\n\t\tselect.onchange = (e) => {\n\t\t\tcallback(e.target.value);\n\t\t};\n\n\t\treturn container;\n\t}\n\tfunction createOptionsInput(name, defaultValue, callback) {\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.innerHTML = `\n
    \n \n
    \n \n
    \n
    `;\n\n\t\tconst input = container.querySelector(\"#popup-lyrics-delay-input\");\n\t\tinput.value = defaultValue;\n\t\tinput.onchange = (e) => {\n\t\t\tcallback(e.target.value);\n\t\t};\n\n\t\treturn container;\n\t}\n\t// if name is null, the element can be used without a description.\n\tfunction createButton(name, defaultValue, callback) {\n\t\tlet container;\n\n\t\tif (name) {\n\t\t\tcontainer = document.createElement(\"div\");\n\t\t\tcontainer.innerHTML = `\n\t\t
    \n\t\t\n\t\t
    \n\t\t\t\n\t\t
    \n\t\t
    `;\n\n\t\t\tconst button = container.querySelector(\"#popup-lyrics-clickbutton\");\n\t\t\tbutton.onclick = () => {\n\t\t\t\tcallback();\n\t\t\t};\n\t\t} else {\n\t\t\tcontainer = document.createElement(\"button\");\n\t\t\tcontainer.innerHTML = defaultValue;\n\t\t\tcontainer.className = \"btn \";\n\n\t\t\tcontainer.onclick = () => {\n\t\t\t\tcallback();\n\t\t\t};\n\t\t}\n\n\t\treturn container;\n\t}\n\t// if name is null, the element can be used without a description.\n\tfunction createTextfield(name, defaultValue, placeholder, callback) {\n\t\tlet container;\n\n\t\tif (name) {\n\t\t\tcontainer = document.createElement(\"div\");\n\t\t\tcontainer.className = \"setting-column\";\n\t\t\tcontainer.innerHTML = `\n\t\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    `;\n\n\t\t\tconst textfield = container.querySelector(\"#popup-lyrics-textfield\");\n\t\t\ttextfield.onchange = () => {\n\t\t\t\tcallback();\n\t\t\t};\n\t\t} else {\n\t\t\tcontainer = document.createElement(\"input\");\n\t\t\tcontainer.placeholder = placeholder;\n\t\t\tcontainer.value = defaultValue;\n\n\t\t\tcontainer.onchange = (e) => {\n\t\t\t\tcallback(e.target.value);\n\t\t\t};\n\t\t}\n\n\t\treturn container;\n\t}\n\tfunction descriptiveElement(element, description) {\n\t\tconst desc = document.createElement(\"span\");\n\t\tdesc.innerHTML = description;\n\t\telement.append(desc);\n\t\treturn element;\n\t}\n\n\tfunction resetTokenButton(container) {\n\t\tconst button = container.querySelector(\"#popup-lyrics-refresh-token\");\n\t\tif (button) {\n\t\t\tbutton.innerHTML = \"Refresh token\";\n\t\t\tbutton.disabled = false;\n\t\t}\n\t}\n\n\tfunction musixmatchTokenElements(defaultVal, id) {\n\t\tconst button = createButton(null, \"Refresh token\", clickRefresh);\n\t\tbutton.className += \"popup-config-col-margin\";\n\t\tbutton.id = \"popup-lyrics-refresh-token\";\n\t\tconst textfield = createTextfield(null, defaultVal.token, `Place your ${id} token here`, changeTokenfield);\n\t\ttextfield.className += \"popup-config-col-margin\";\n\n\t\tfunction clickRefresh() {\n\t\t\tbutton.innerHTML = \"Refreshing token...\";\n\t\t\tbutton.disabled = true;\n\n\t\t\tSpicetify.CosmosAsync.get(\"https://apic-desktop.musixmatch.com/ws/1.1/token.get?app_id=web-desktop-app-v1.0\", null, {\n\t\t\t\tauthority: \"apic-desktop.musixmatch.com\",\n\t\t\t})\n\t\t\t\t.then(({ message: response }) => {\n\t\t\t\t\tif (response.header.status_code === 200 && response.body.user_token) {\n\t\t\t\t\t\tbutton.innerHTML = \"Token refreshed\";\n\t\t\t\t\t\ttextfield.value = response.body.user_token;\n\t\t\t\t\t\ttextfield.dispatchEvent(new Event(\"change\"));\n\t\t\t\t\t} else if (response.header.status_code === 401) {\n\t\t\t\t\t\tbutton.innerHTML = \"Too many attempts\";\n\t\t\t\t\t} else {\n\t\t\t\t\t\tbutton.innerHTML = \"Failed to refresh token\";\n\t\t\t\t\t\tconsole.error(\"Failed to refresh token\", response);\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tbutton.innerHTML = \"Failed to refresh token\";\n\t\t\t\t\tconsole.error(\"Failed to refresh token\", error);\n\t\t\t\t});\n\t\t}\n\n\t\tfunction changeTokenfield(value) {\n\t\t\tuserConfigs.services.musixmatch.token = value;\n\t\t\tLocalStorage.set(\"popup-lyrics:services:musixmatch:token\", value);\n\t\t\tupdateTrack(true);\n\t\t}\n\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.append(button);\n\t\tcontainer.append(textfield);\n\t\treturn container;\n\t}\n\n\tfunction createServiceOption(id, defaultVal, switchCallback, posCallback) {\n\t\tconst name = id.replace(/^./, (c) => c.toUpperCase());\n\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.dataset.id = id;\n\t\tcontainer.innerHTML = `\n
    \n

    ${name}

    \n
    \n \n \n \n
    \n
    \n${defaultVal.desc}`;\n\n\t\tif (id === \"musixmatch\") {\n\t\t\tcontainer.append(musixmatchTokenElements(defaultVal));\n\t\t}\n\n\t\tconst [up, down, slider] = container.querySelectorAll(\"button\");\n\n\t\tslider.classList.toggle(\"disabled\", !defaultVal.on);\n\t\tslider.onclick = () => {\n\t\t\tconst state = slider.classList.contains(\"disabled\");\n\t\t\tslider.classList.toggle(\"disabled\");\n\t\t\tswitchCallback(container, state);\n\t\t};\n\n\t\tup.onclick = () => posCallback(container, -1);\n\t\tdown.onclick = () => posCallback(container, 1);\n\n\t\treturn container;\n\t}\n}\n" }, { "path": "Extensions/shuffle+.js", "content": "// NAME: Shuffle+\n// AUTHORS: khanhas, Tetrax-10\n// DESCRIPTION: True shuffle with no bias.\n\n/// \n\n(async function shufflePlus() {\n\tif (!(Spicetify.CosmosAsync && Spicetify.Platform)) {\n\t\tsetTimeout(shufflePlus, 300);\n\t\treturn;\n\t}\n\n\tconst { React } = Spicetify;\n\tconst { useState } = React;\n\tlet playbarButton = null;\n\n\tfunction getConfig() {\n\t\ttry {\n\t\t\tconst parsed = JSON.parse(Spicetify.LocalStorage.get(\"shufflePlus:settings\"));\n\t\t\tif (parsed && typeof parsed === \"object\") {\n\t\t\t\treturn parsed;\n\t\t\t}\n\t\t\tthrow \"\";\n\t\t} catch {\n\t\t\tSpicetify.LocalStorage.set(\"shufflePlus:settings\", \"{}\");\n\t\t\treturn {\n\t\t\t\tartistMode: \"all\",\n\t\t\t\tartistNameMust: false,\n\t\t\t\tenableQueueButton: false,\n\t\t\t};\n\t\t}\n\t}\n\n\tconst CONFIG = getConfig();\n\tsaveConfig();\n\n\tfunction saveConfig() {\n\t\tSpicetify.LocalStorage.set(\"shufflePlus:settings\", JSON.stringify(CONFIG));\n\t}\n\n\tfunction settingsPage() {\n\t\tconst style = React.createElement(\n\t\t\t\"style\",\n\t\t\tnull,\n\t\t\t`.popup-row::after {\n\t\t\t\tcontent: \"\";\n\t\t\t\tdisplay: table;\n\t\t\t\tclear: both;\n\t\t\t}\n\t\t\t.popup-row .col {\n\t\t\t\tdisplay: flex;\n\t\t\t\tpadding: 10px 0;\n\t\t\t\talign-items: center;\n\t\t\t}\n\t\t\t.popup-row .col.description {\n\t\t\t\tfloat: left;\n\t\t\t\tpadding-right: 15px;\n\t\t\t}\n\t\t\t.popup-row .col.action {\n\t\t\t\tfloat: right;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\t\t\t.popup-row .div-title {\n\t\t\t\tcolor: var(--spice-text);\n\t\t\t}\n\t\t\t.popup-row .divider {\n\t\t\t\theight: 2px;\n\t\t\t\tborder-width: 0;\n\t\t\t\tbackground-color: var(--spice-button-disabled);\n\t\t\t}\n\t\t\tbutton.checkbox {\n\t\t\t\talign-items: center;\n\t\t\t\tborder: 0px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbackground-color: rgba(var(--spice-rgb-shadow), 0.7);\n\t\t\t\tcolor: var(--spice-text);\n\t\t\t\tcursor: pointer;\n\t\t\t\tdisplay: flex;\n\t\t\t\tmargin-inline-start: 12px;\n\t\t\t\tpadding: 8px;\n\t\t\t}\n\t\t\tbutton.checkbox.disabled {\n\t\t\t\tcolor: rgba(var(--spice-rgb-text), 0.3);\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tcolor: var(--spice-text);\n\t\t\t\tbackground: rgba(var(--spice-rgb-shadow), 0.7);\n\t\t\t\tborder: 0;\n\t\t\t\theight: 32px;\n\t\t\t}\n\t\t\t::-webkit-scrollbar {\n\t\t\t\twidth: 8px;\n\t\t\t}`\n\t\t);\n\n\t\tfunction DisplayIcon({ icon, size }) {\n\t\t\treturn React.createElement(\"svg\", {\n\t\t\t\twidth: size,\n\t\t\t\theight: size,\n\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\tfill: \"currentColor\",\n\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t__html: icon,\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\n\t\tfunction checkBoxItem({ name, field, onclickFun = () => {} }) {\n\t\t\tconst [value, setValue] = useState(CONFIG[field]);\n\t\t\treturn React.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: \"popup-row\" },\n\t\t\t\tReact.createElement(\"label\", { className: \"col description\" }, name),\n\t\t\t\tReact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ className: \"col action\" },\n\t\t\t\t\tReact.createElement(\n\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclassName: `checkbox${value ? \"\" : \" disabled\"}`,\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tCONFIG[field] = !value;\n\t\t\t\t\t\t\t\tsetValue(!value);\n\t\t\t\t\t\t\t\tsaveConfig();\n\t\t\t\t\t\t\t\tonclickFun();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\tReact.createElement(DisplayIcon, {\n\t\t\t\t\t\t\ticon: Spicetify.SVGIcons.check,\n\t\t\t\t\t\t\tsize: 16,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\tfunction dropDownItem({ name, field, options, onclickFun = () => {} }) {\n\t\t\tconst [value, setValue] = useState(CONFIG[field]);\n\t\t\treturn React.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: \"popup-row\" },\n\t\t\t\tReact.createElement(\"label\", { className: \"col description\" }, name),\n\t\t\t\tReact.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ className: \"col action\" },\n\t\t\t\t\tReact.createElement(\n\t\t\t\t\t\t\"select\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tonChange: (e) => {\n\t\t\t\t\t\t\t\tsetValue(e.target.value);\n\t\t\t\t\t\t\t\tCONFIG[field] = e.target.value;\n\t\t\t\t\t\t\t\tsaveConfig();\n\t\t\t\t\t\t\t\tonclickFun();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\tObject.keys(options).map((item) =>\n\t\t\t\t\t\t\tReact.createElement(\n\t\t\t\t\t\t\t\t\"option\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tvalue: item,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\toptions[item]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\tconst settingsDOMContent = React.createElement(\n\t\t\t\"div\",\n\t\t\tnull,\n\t\t\tstyle,\n\t\t\tReact.createElement(\"div\", { className: \"popup-row\" }, React.createElement(\"h3\", { className: \"div-title\" }, \"Artist Shuffle\")),\n\t\t\tReact.createElement(\"div\", { className: \"popup-row\" }, React.createElement(\"hr\", { className: \"divider\" }, null)),\n\t\t\tReact.createElement(dropDownItem, {\n\t\t\t\tname: \"Shuffle mode Artist Page\",\n\t\t\t\tfield: \"artistMode\",\n\t\t\t\toptions: {\n\t\t\t\t\tall: \"All\",\n\t\t\t\t\talbum: \"Albums\",\n\t\t\t\t\tsingle: \"Singles & EP\",\n\t\t\t\t\tlikedSongArtist: \"Artist's Liked Songs\",\n\t\t\t\t\ttopTen: \"Top 10 Songs\",\n\t\t\t\t},\n\t\t\t}),\n\t\t\tReact.createElement(checkBoxItem, {\n\t\t\t\tname: \"Chosen artist must be included\",\n\t\t\t\tfield: \"artistNameMust\",\n\t\t\t}),\n\t\t\tReact.createElement(checkBoxItem, {\n\t\t\t\tname: \"Enable Shuffle+ Queue Tracks button in Playbar\",\n\t\t\t\tfield: \"enableQueueButton\",\n\t\t\t\tonclickFun: () => renderQueuePlaybarButton(),\n\t\t\t})\n\t\t);\n\n\t\tSpicetify.PopupModal.display({\n\t\t\ttitle: \"Shuffle+\",\n\t\t\tcontent: settingsDOMContent,\n\t\t\tisLarge: true,\n\t\t});\n\t}\n\n\tnew Spicetify.Menu.Item(\"Shuffle+\", false, settingsPage, \"shuffle\").register();\n\n\tconst { Type } = Spicetify.URI;\n\n\tfunction shouldAddShufflePlus(uri) {\n\t\tif (uri.length === 1) {\n\t\t\tconst uriObj = Spicetify.URI.fromString(uri[0]);\n\t\t\tswitch (uriObj.type) {\n\t\t\t\tcase Type.PLAYLIST:\n\t\t\t\tcase Type.PLAYLIST_V2:\n\t\t\t\tcase Type.ALBUM:\n\t\t\t\tcase Type.ARTIST:\n\t\t\t\tcase Type.COLLECTION:\n\t\t\t\tcase Type.FOLDER:\n\t\t\t\tcase Type.SHOW:\n\t\t\t\t\treturn true;\n\t\t\t}\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n\n\tfunction shouldAddShufflePlusLiked(uri) {\n\t\tconst uriObj = Spicetify.URI.fromString(uri[0]);\n\t\tif (Spicetify.Platform.History.location.pathname === \"/collection/tracks\") {\n\t\t\tswitch (uriObj.type) {\n\t\t\t\tcase Type.TRACK:\n\t\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction shouldAddShufflePlusLocal(uri) {\n\t\tconst uriObj = Spicetify.URI.fromString(uri[0]);\n\t\tif (Spicetify.Platform.History.location.pathname === \"/collection/local-files\") {\n\t\t\tswitch (uriObj.type) {\n\t\t\t\tcase Type.TRACK:\n\t\t\t\tcase Type.LOCAL_TRACK:\n\t\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t\treturn false;\n\t}\n\n\tnew Spicetify.ContextMenu.Item(\n\t\t\"Play with Shuffle+\",\n\t\tasync (uri) => {\n\t\t\tif (uri.length === 1) {\n\t\t\t\tawait fetchAndPlay(uri[0]);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tawait fetchAndPlay(uri);\n\t\t},\n\t\tshouldAddShufflePlus,\n\t\t\"shuffle\"\n\t).register();\n\n\tnew Spicetify.ContextMenu.Item(\n\t\t\"Shuffle+ Liked Songs\",\n\t\tasync (uri) => {\n\t\t\tawait fetchAndPlay(uri[0]);\n\t\t},\n\t\tshouldAddShufflePlusLiked,\n\t\t\"heart-active\"\n\t).register();\n\n\tnew Spicetify.ContextMenu.Item(\n\t\t\"Shuffle+ Local Files\",\n\t\tasync (uri) => {\n\t\t\tawait fetchAndPlay(uri[0]);\n\t\t},\n\t\tshouldAddShufflePlusLocal,\n\t\t\"playlist-folder\"\n\t).register();\n\n\trenderQueuePlaybarButton();\n\tfunction renderQueuePlaybarButton() {\n\t\tif (!playbarButton) {\n\t\t\tplaybarButton = new Spicetify.Playbar.Button(\n\t\t\t\t\"Shuffle+ Queue Tracks\",\n\t\t\t\t\"enhance\",\n\t\t\t\tasync () => {\n\t\t\t\t\tawait fetchAndPlay(\"queue\");\n\t\t\t\t},\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t);\n\t\t}\n\n\t\tif (CONFIG.enableQueueButton) playbarButton.register();\n\t\telse playbarButton.deregister();\n\t}\n\n\tasync function fetchPlaylistTracks(uri) {\n\t\tconst res = await Spicetify.Platform.PlaylistAPI.getContents(`spotify:playlist:${uri}`, {\n\t\t\tlimit: 9999999,\n\t\t});\n\t\treturn res.items.filter((track) => track.isPlayable).map((track) => track.uri);\n\t}\n\n\tfunction searchFolder(rows, uri) {\n\t\tfor (const r of rows) {\n\t\t\tif (r.type !== \"folder\" || !r.items) continue;\n\n\t\t\tif (r.uri === uri) return r;\n\n\t\t\tconst found = searchFolder(r.items, uri);\n\t\t\tif (found) return found;\n\t\t}\n\t}\n\n\tasync function fetchFolderTracks(uri) {\n\t\tconst res = await Spicetify.Platform.RootlistAPI.getContents();\n\n\t\tconst requestFolder = searchFolder(res.items, uri);\n\t\tif (!requestFolder) throw \"Cannot find folder\";\n\n\t\tconst requestPlaylists = [];\n\t\tasync function fetchNested(folder) {\n\t\t\tif (!folder.items) return;\n\n\t\t\tfor (const i of folder.items) {\n\t\t\t\tif (i.type === \"playlist\") {\n\t\t\t\t\tconst uriObj = Spicetify.URI.fromString(i.uri);\n\t\t\t\t\tconst uri = uriObj._base62Id ?? uriObj.id;\n\t\t\t\t\trequestPlaylists.push(await fetchPlaylistTracks(uri));\n\t\t\t\t} else if (i.type === \"folder\") await fetchNested(i);\n\t\t\t}\n\t\t}\n\n\t\tawait fetchNested(requestFolder);\n\n\t\treturn requestPlaylists.flat();\n\t}\n\n\tasync function fetchAlbumTracks(uri, includeMetadata = false) {\n\t\tconst { queryAlbumTracks } = Spicetify.GraphQL.Definitions;\n\t\tconst { data, errors } = await Spicetify.GraphQL.Request(queryAlbumTracks, {\n\t\t\turi,\n\t\t\toffset: 0,\n\t\t\tlimit: 100,\n\t\t});\n\n\t\tif (errors) throw errors[0].message;\n\t\tif (data.albumUnion.playability.playable === false) throw \"Album is not playable\";\n\n\t\treturn (data.albumUnion?.tracksV2 ?? data.albumUnion?.tracks ?? []).items\n\t\t\t.filter(({ track }) => track.playability.playable)\n\t\t\t.map(({ track }) => (includeMetadata ? track : track.uri));\n\t}\n\n\tconst artistFetchTypeCount = { album: 0, single: 0 };\n\n\tasync function scanForTracksFromAlbums(res, artistName, type) {\n\t\tconst allTracks = [];\n\n\t\tfor (const album of res) {\n\t\t\tlet albumRes;\n\n\t\t\ttry {\n\t\t\t\talbumRes = await fetchAlbumTracks(album.uri, true);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(album, error);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tartistFetchTypeCount[type]++;\n\t\t\tSpicetify.showNotification(`${artistFetchTypeCount[type]} / ${res.length} ${type}s`);\n\n\t\t\tfor (const track of albumRes) {\n\t\t\t\tif (!CONFIG.artistNameMust || track.artists.items.some((artist) => artist.profile.name === artistName)) allTracks.push(track.uri);\n\t\t\t}\n\t\t}\n\n\t\treturn allTracks;\n\t}\n\n\tasync function fetchArtistTracks(uri) {\n\t\t// Definitions from older Spotify version\n\t\tconst queryArtistOverview = {\n\t\t\tname: \"queryArtistOverview\",\n\t\t\toperation: \"query\",\n\t\t\tsha256Hash: \"35648a112beb1794e39ab931365f6ae4a8d45e65396d641eeda94e4003d41497\",\n\t\t\tvalue: null,\n\t\t};\n\t\tconst queryArtistDiscographyAll = {\n\t\t\tname: \"queryArtistDiscographyAll\",\n\t\t\toperation: \"query\",\n\t\t\tsha256Hash: \"9380995a9d4663cbcb5113fef3c6aabf70ae6d407ba61793fd01e2a1dd6929b0\",\n\t\t\tvalue: null,\n\t\t};\n\n\t\tconst discography = await Spicetify.GraphQL.Request(queryArtistDiscographyAll, {\n\t\t\turi,\n\t\t\toffset: 0,\n\t\t\t// Limit 100 since GraphQL has resource limit\n\t\t\tlimit: 100,\n\t\t});\n\t\tif (discography.errors) throw discography.errors[0].message;\n\n\t\tconst overview = await Spicetify.GraphQL.Request(queryArtistOverview, {\n\t\t\turi,\n\t\t\tlocale: Spicetify.Locale.getLocale(),\n\t\t\tincludePrerelease: false,\n\t\t});\n\t\tif (overview.errors) throw overview.errors[0].message;\n\n\t\tconst artistName = overview.data.artistUnion.profile.name;\n\t\tconst releases = discography.data.artistUnion.discography.all.items.flatMap(({ releases }) => releases.items);\n\n\t\tconst artistAlbums = releases.filter((album) => album.type === \"ALBUM\");\n\t\tconst artistSingles = releases.filter((album) => album.type === \"SINGLE\" || album.type === \"EP\");\n\n\t\tif (artistAlbums.length === 0 && artistSingles.length === 0) throw \"Artist has no releases\";\n\n\t\tconst allArtistAlbumsTracks = CONFIG.artistMode !== \"single\" ? await scanForTracksFromAlbums(artistAlbums, artistName, \"album\") : [];\n\t\tconst allArtistSinglesTracks = CONFIG.artistMode !== \"album\" ? await scanForTracksFromAlbums(artistSingles, artistName, \"single\") : [];\n\n\t\treturn allArtistAlbumsTracks.concat(allArtistSinglesTracks);\n\t}\n\n\tasync function fetchArtistLikedTracks(uri) {\n\t\tconst artistRes = await Spicetify.CosmosAsync.get(`sp://core-collection/unstable/@/list/tracks/artist/${uri}?responseFormat=protobufJson`);\n\n\t\tconst allTracks = artistRes.item?.map((artistTrack) => {\n\t\t\tif (artistTrack.trackMetadata.playable) return artistTrack.trackMetadata.link;\n\t\t});\n\n\t\treturn allTracks ?? [];\n\t}\n\n\tasync function fetchArtistTopTenTracks(uri) {\n\t\tconst { queryArtistOverview } = Spicetify.GraphQL.Definitions;\n\t\tconst { data, errors } = await Spicetify.GraphQL.Request(queryArtistOverview, {\n\t\t\turi,\n\t\t\tlocale: Spicetify.Locale.getLocale(),\n\t\t\tincludePrerelease: false,\n\t\t});\n\t\tif (errors) throw errors[0].message;\n\t\treturn data.artistUnion.discography.topTracks.items.map(({ track }) => track.uri);\n\t}\n\n\tasync function fetchLikedTracks() {\n\t\tconst res = await Spicetify.CosmosAsync.get(\"sp://core-collection/unstable/@/list/tracks/all?responseFormat=protobufJson\");\n\n\t\treturn res.item.filter((track) => track.trackMetadata.playable).map((track) => track.trackMetadata.link);\n\t}\n\n\tasync function fetchLocalTracks() {\n\t\tconst res = await Spicetify.Platform.LocalFilesAPI.getTracks();\n\n\t\treturn res.map((track) => track.uri);\n\t}\n\n\tfunction fetchQueue() {\n\t\tconst { _queueState } = Spicetify.Platform.PlayerAPI._queue;\n\t\tconst nextUp = _queueState.nextUp.map((track) => track.uri);\n\t\tconst queued = _queueState.queued.map((track) => track.uri);\n\t\tconst array = [...new Set([...nextUp, ...queued])];\n\t\tconst current = _queueState.current?.uri;\n\t\tif (current) array.push(current);\n\t\treturn array;\n\t}\n\n\tasync function fetchCollection(uriObj) {\n\t\tconst { category, type } = uriObj;\n\t\tconst { pathname } = Spicetify.Platform.History.location;\n\n\t\tswitch (type) {\n\t\t\tcase Type.TRACK:\n\t\t\tcase Type.LOCAL_TRACK:\n\t\t\t\tswitch (pathname) {\n\t\t\t\t\tcase \"/collection/tracks\":\n\t\t\t\t\t\treturn await fetchLikedTracks();\n\t\t\t\t\tcase \"/collection/local-files\":\n\t\t\t\t\t\treturn await fetchLocalTracks();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase Type.COLLECTION:\n\t\t\t\tswitch (category) {\n\t\t\t\t\tcase \"tracks\":\n\t\t\t\t\t\treturn await fetchLikedTracks();\n\t\t\t\t\tcase \"local-files\":\n\t\t\t\t\t\treturn await fetchLocalTracks();\n\t\t\t\t}\n\t\t}\n\t}\n\n\tasync function fetchShows(uri) {\n\t\tconst res = await Spicetify.CosmosAsync.get(`sp://core-show/v1/shows/${uri}?responseFormat=protobufJson`);\n\t\treturn res.items.filter((track) => track.episodePlayState.isPlayable).map((track) => track.episodeMetadata.link);\n\t}\n\n\tfunction shuffle(array) {\n\t\tlet counter = array.length;\n\t\tif (counter <= 1) return array;\n\n\t\t// While there are elements in the array\n\t\twhile (counter > 0) {\n\t\t\t// Pick a random index\n\t\t\tconst index = Math.floor(Math.random() * counter);\n\n\t\t\t// Decrease counter by 1\n\t\t\tcounter--;\n\n\t\t\t// And swap the last element with it\n\t\t\tconst temp = array[counter];\n\t\t\tarray[counter] = array[index];\n\t\t\tarray[index] = temp;\n\t\t}\n\t\treturn array.filter(Boolean);\n\t}\n\n\tasync function Queue(list, context, type) {\n\t\tconst count = list.length;\n\n\t\t// Delimits the end of our list, as Spotify may add new context tracks to the queue\n\t\tlist.push(\"spotify:delimiter\");\n\n\t\tconst { _queue, _client } = Spicetify.Platform.PlayerAPI._queue;\n\t\tconst { prevTracks, queueRevision } = _queue;\n\n\t\t// Format tracks with default values\n\t\tconst nextTracks = list.map((uri) => ({\n\t\t\tcontextTrack: {\n\t\t\t\turi,\n\t\t\t\tuid: \"\",\n\t\t\t\tmetadata: {\n\t\t\t\t\tis_queued: \"false\",\n\t\t\t\t},\n\t\t\t},\n\t\t\tremoved: [],\n\t\t\tblocked: [],\n\t\t\tprovider: \"context\",\n\t\t}));\n\n\t\t// Lowest level setQueue method from vendor~xpui.js\n\t\t_client.setQueue({\n\t\t\tnextTracks,\n\t\t\tprevTracks,\n\t\t\tqueueRevision,\n\t\t});\n\n\t\tif (context) {\n\t\t\tconst { sessionId } = Spicetify.Platform.PlayerAPI.getState();\n\t\t\tSpicetify.Platform.PlayerAPI.updateContext(sessionId, {\n\t\t\t\turi: context,\n\t\t\t\turl: `context://${context}`,\n\t\t\t});\n\t\t}\n\n\t\tSpicetify.Player.next();\n\n\t\tswitch (type) {\n\t\t\tcase Type.ARTIST:\n\t\t\t\tif (CONFIG.artistMode === \"topTen\") {\n\t\t\t\t\tSpicetify.showNotification(`Shuffled Top ${count} Songs`);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tif (CONFIG.artistMode === \"likedSongArtist\") {\n\t\t\t\t\tSpicetify.showNotification(`Shuffled ${count} Liked Songs`);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tif (CONFIG.artistMode === \"single\") {\n\t\t\t\t\tSpicetify.showNotification(`Shuffled ${artistFetchTypeCount.single} Singles, Total of ${count} Songs`);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tif (CONFIG.artistMode === \"album\") {\n\t\t\t\t\tSpicetify.showNotification(`Shuffled ${artistFetchTypeCount.album} Albums, Total of ${count} Songs`);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tSpicetify.showNotification(`Shuffled ${artistFetchTypeCount.album} Albums, ${artistFetchTypeCount.single} Singles, Total of ${count} Songs`);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tSpicetify.showNotification(`Shuffled ${count} Songs`);\n\t\t}\n\n\t\tartistFetchTypeCount.album = 0;\n\t\tartistFetchTypeCount.single = 0;\n\t}\n\n\tasync function fetchAndPlay(rawUri) {\n\t\tlet list;\n\t\tlet context;\n\t\tlet type = null;\n\t\tlet uri;\n\n\t\ttry {\n\t\t\tif (rawUri === \"queue\") {\n\t\t\t\tlist = fetchQueue();\n\t\t\t\tcontext = null;\n\t\t\t} else if (typeof rawUri === \"object\") {\n\t\t\t\tlist = rawUri;\n\t\t\t\tcontext = null;\n\t\t\t} else {\n\t\t\t\tconst uriObj = Spicetify.URI.fromString(rawUri);\n\t\t\t\ttype = uriObj.type;\n\t\t\t\turi = uriObj._base62Id ?? uriObj.id;\n\n\t\t\t\tswitch (type) {\n\t\t\t\t\tcase Type.PLAYLIST:\n\t\t\t\t\tcase Type.PLAYLIST_V2:\n\t\t\t\t\t\tlist = await fetchPlaylistTracks(uri);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase Type.ALBUM:\n\t\t\t\t\t\tlist = await fetchAlbumTracks(rawUri);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase `${Type.ARTIST}`:\n\t\t\t\t\t\tif (CONFIG.artistMode === \"likedSongArtist\") {\n\t\t\t\t\t\t\tlist = await fetchArtistLikedTracks(uri);\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (CONFIG.artistMode === \"topTen\") {\n\t\t\t\t\t\t\tlist = await fetchArtistTopTenTracks(rawUri);\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlist = await fetchArtistTracks(rawUri);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase Type.TRACK:\n\t\t\t\t\tcase Type.LOCAL_TRACK:\n\t\t\t\t\tcase Type.COLLECTION:\n\t\t\t\t\t\tlist = await fetchCollection(uriObj);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase Type.FOLDER:\n\t\t\t\t\t\tlist = await fetchFolderTracks(rawUri);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase Type.SHOW:\n\t\t\t\t\t\tlist = await fetchShows(uri);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tif (!list?.length) {\n\t\t\t\t\tSpicetify.showNotification(\"Nothing to play\", true);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tcontext = rawUri;\n\t\t\t\tif (type === \"folder\" || type === \"collection\" || type === \"local\") {\n\t\t\t\t\tcontext = null;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tawait Queue(shuffle(list), context, type);\n\t\t} catch (error) {\n\t\t\tSpicetify.showNotification(String(error), true);\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n})();\n" }, { "path": "Extensions/trashbin.js", "content": "// NAME: Trashbin\n// AUTHOR: khanhas and OhItsTom\n// DESCRIPTION: Throw songs to trashbin and never hear it again.\n\n/// \n\n(function TrashBin() {\n\tconst skipBackBtn =\n\t\tdocument.querySelector(\".main-skipBackButton-button\") ??\n\t\tdocument.querySelector(\".player-controls__left > button[data-encore-id='buttonTertiary']\");\n\tif (!Spicetify.Player.data || !Spicetify.LocalStorage || !skipBackBtn) {\n\t\tsetTimeout(TrashBin, 1000);\n\t\treturn;\n\t}\n\n\tfunction createButton(text, description, callback) {\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.classList.add(\"setting-row\");\n\t\tcontainer.innerHTML = `\n\t\t\n\t\t
    \n\t\t`;\n\n\t\tconst button = container.querySelector(\"button.reset\");\n\t\tbutton.onclick = callback;\n\t\treturn container;\n\t}\n\n\tfunction createSlider(name, desc, defaultVal, callback) {\n\t\tconst container = document.createElement(\"div\");\n\t\tcontainer.classList.add(\"setting-row\");\n\t\tcontainer.innerHTML = `\n\t\t\t\n\t\t\t
    \n\t\t`;\n\n\t\tconst slider = container.querySelector(\"button.switch\");\n\t\tslider.classList.toggle(\"disabled\", !defaultVal);\n\n\t\tslider.onclick = () => {\n\t\t\tconst state = slider.classList.contains(\"disabled\");\n\t\t\tslider.classList.toggle(\"disabled\");\n\t\t\tSpicetify.LocalStorage.set(name, state);\n\t\t\tconsole.log(name, state);\n\t\t\tcallback(state);\n\t\t};\n\n\t\treturn container;\n\t}\n\n\tfunction settingsContent() {\n\t\t// Options\n\t\theader = document.createElement(\"h2\");\n\t\theader.innerText = \"Options\";\n\t\tcontent.appendChild(header);\n\n\t\tcontent.appendChild(createSlider(\"trashbin-enabled\", \"Enabled\", trashbinStatus, refreshEventListeners));\n\t\tcontent.appendChild(\n\t\t\tcreateSlider(\"TrashbinWidgetIcon\", \"Show Widget Icon\", enableWidget, (state) => {\n\t\t\t\tenableWidget = state;\n\t\t\t\tstate && trashbinStatus ? widget.register() : widget.deregister();\n\t\t\t})\n\t\t);\n\n\t\t// Local Storage\n\t\theader = document.createElement(\"h2\");\n\t\theader.innerText = \"Local Storage\";\n\t\tcontent.appendChild(header);\n\n\t\tcontent.appendChild(createButton(\"Copy\", \"Copy all items in trashbin to clipboard.\", copyItems));\n\t\tcontent.appendChild(createButton(\"Export\", \"Save all items in trashbin to a .json file.\", exportItems));\n\t\tcontent.appendChild(createButton(\"Import\", \"Overwrite all items in trashbin via .json file.\", importItems));\n\t\tcontent.appendChild(\n\t\t\tcreateButton(\"Clear \", \"Clear all items from trashbin (cannot be reverted).\", () => {\n\t\t\t\ttrashSongList = {};\n\t\t\t\ttrashArtistList = {};\n\t\t\t\tsetWidgetState(false);\n\t\t\t\tputDataLocal();\n\t\t\t\tSpicetify.showNotification(\"Trashbin cleared!\");\n\t\t\t})\n\t\t);\n\t}\n\n\tfunction styleSettings() {\n\t\tconst style = document.createElement(\"style\");\n\t\tstyle.innerHTML = `\n\t\t.main-trackCreditsModal-container {\n\t\t\twidth: auto !important;\n\t\t\tbackground-color: var(--spice-player) !important;\n\t\t}\n\n\t\t.setting-row::after {\n\t\t content: \"\";\n\t\t display: table;\n\t\t clear: both;\n\t\t}\n\t\t.setting-row {\n\t\t display: flex;\n\t\t padding: 10px 0;\n\t\t align-items: center;\n\t\t justify-content: space-between;\n\t\t}\n\t\t.setting-row .col.description {\n\t\t float: left;\n\t\t padding-right: 15px;\n\t\t width: 100%;\n\t\t}\n\t\t.setting-row .col.action {\n\t\t float: right;\n\t\t text-align: right;\n\t\t}\n\t\tbutton.switch {\n\t\t align-items: center;\n\t\t border: 0px;\n\t\t border-radius: 50%;\n\t\t background-color: rgba(var(--spice-rgb-shadow), .7);\n\t\t color: var(--spice-text);\n\t\t cursor: pointer;\n\t\t display: flex;\n\t\t margin-inline-start: 12px;\n\t\t padding: 8px;\n\t\t}\n\t\tbutton.switch.disabled,\n\t\tbutton.switch[disabled] {\n\t\t color: rgba(var(--spice-rgb-text), .3);\n\t\t}\n\t\tbutton.reset {\n\t\t font-weight: 700;\n\t\t font-size: medium;\n\t\t background-color: transparent;\n\t\t border-radius: 500px;\n\t\t transition-duration: 33ms;\n\t\t transition-property: background-color, border-color, color, box-shadow, filter, transform;\n\t\t padding-inline: 15px;\n\t\t border: 1px solid #727272;\n\t\t color: var(--spice-text);\n\t\t min-block-size: 32px;\n\t\t cursor: pointer;\n\t\t}\n\t\tbutton.reset:hover {\n\t\t transform: scale(1.04);\n\t\t border-color: var(--spice-text);\n\t\t}`;\n\t\tcontent.appendChild(style);\n\t}\n\n\tfunction initValue(item, defaultValue) {\n\t\ttry {\n\t\t\tconst value = JSON.parse(Spicetify.LocalStorage.get(item));\n\t\t\treturn value ?? defaultValue;\n\t\t} catch {\n\t\t\treturn defaultValue;\n\t\t}\n\t}\n\n\t// Settings Variables - Initial Values\n\tlet trashbinStatus = initValue(\"trashbin-enabled\", true);\n\tlet enableWidget = initValue(\"TrashbinWidgetIcon\", true);\n\n\t// Settings Menu Initialization\n\tconst content = document.createElement(\"div\");\n\tstyleSettings();\n\tsettingsContent();\n\n\tconst trashbinIcon =\n\t\t'';\n\n\tconst THROW_TEXT = \"Place in Trashbin\";\n\tconst UNTHROW_TEXT = \"Remove from Trashbin\";\n\n\tnew Spicetify.Menu.Item(\n\t\t\"Trashbin\",\n\t\tfalse,\n\t\t() => {\n\t\t\tSpicetify.PopupModal.display({\n\t\t\t\ttitle: \"Trashbin Settings\",\n\t\t\t\tcontent,\n\t\t\t});\n\t\t},\n\t\ttrashbinIcon\n\t).register();\n\n\tconst widget = new Spicetify.Playbar.Widget(\n\t\tTHROW_TEXT,\n\t\ttrashbinIcon,\n\t\t(self) => {\n\t\t\tconst uri = Spicetify.Player.data.item.uri;\n\t\t\tconst uriObj = Spicetify.URI.fromString(uri);\n\t\t\tconst type = uriObj.type;\n\n\t\t\tif (!trashSongList[uri]) {\n\t\t\t\ttrashSongList[uri] = true;\n\t\t\t\tif (shouldSkipCurrentTrack(uri, type)) Spicetify.Player.next();\n\t\t\t\tSpicetify.showNotification(\"Song added to trashbin\");\n\t\t\t} else {\n\t\t\t\tdelete trashSongList[uri];\n\t\t\t\tsetWidgetState(false);\n\t\t\t\tSpicetify.showNotification(\"Song removed from trashbin\");\n\t\t\t}\n\n\t\t\tputDataLocal();\n\t\t},\n\t\tfalse,\n\t\tfalse,\n\t\tenableWidget\n\t);\n\n\t// LocalStorage Setup\n\tlet trashSongList = initValue(\"TrashSongList\", {});\n\tlet trashArtistList = initValue(\"TrashArtistList\", {});\n\tlet userHitBack = false;\n\tconst eventListener = () => {\n\t\tuserHitBack = true;\n\t};\n\n\tputDataLocal();\n\trefreshEventListeners(trashbinStatus);\n\tsetWidgetState(\n\t\ttrashSongList[Spicetify.Player.data.item.uri],\n\t\tSpicetify.URI.fromString(Spicetify.Player.data.item.uri).type !== Spicetify.URI.Type.TRACK\n\t);\n\n\tfunction refreshEventListeners(state) {\n\t\ttrashbinStatus = state;\n\t\tif (state) {\n\t\t\tskipBackBtn.addEventListener(\"click\", eventListener);\n\t\t\tSpicetify.Player.addEventListener(\"songchange\", watchChange);\n\t\t\tenableWidget && widget.register();\n\t\t\twatchChange();\n\t\t} else {\n\t\t\tskipBackBtn.removeEventListener(\"click\", eventListener);\n\t\t\tSpicetify.Player.removeEventListener(\"songchange\", watchChange);\n\t\t\twidget.deregister();\n\t\t}\n\t}\n\n\tfunction setWidgetState(state, hidden = false) {\n\t\thidden ? widget.deregister() : enableWidget && widget.register();\n\t\twidget.active = !!state;\n\t\twidget.label = state ? UNTHROW_TEXT : THROW_TEXT;\n\t}\n\n\tfunction watchChange() {\n\t\tconst data = Spicetify.Player.data || Spicetify.Queue;\n\t\tif (!data) return;\n\n\t\tconst isBanned = trashSongList[data.item.uri];\n\t\tsetWidgetState(isBanned, Spicetify.URI.fromString(data.item.uri).type !== Spicetify.URI.Type.TRACK);\n\n\t\tif (userHitBack) {\n\t\t\tuserHitBack = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (isBanned) {\n\t\t\tSpicetify.Player.next();\n\t\t\treturn;\n\t\t}\n\n\t\tlet uriIndex = 0;\n\t\tlet artistUri = data.item.metadata.artist_uri;\n\n\t\twhile (artistUri) {\n\t\t\tif (trashArtistList[artistUri]) {\n\t\t\t\tSpicetify.Player.next();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\turiIndex++;\n\t\t\tartistUri = data.item.metadata[`artist_uri:${uriIndex}`];\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param {string} uri\n\t * @param {string} type\n\t * @returns {boolean}\n\t */\n\tfunction shouldSkipCurrentTrack(uri, type) {\n\t\tconst curTrack = Spicetify.Player.data.item;\n\t\tif (type === Spicetify.URI.Type.TRACK) {\n\t\t\tif (uri === curTrack.uri) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\n\t\tif (type === Spicetify.URI.Type.ARTIST) {\n\t\t\tlet count = 1;\n\t\t\tlet artUri = curTrack.metadata.artist_uri;\n\t\t\twhile (artUri) {\n\t\t\t\tif (uri === artUri) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tartUri = curTrack.metadata[`artist_uri:${count}`];\n\t\t\t\tcount++;\n\t\t\t}\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t *\n\t * @param {string[]} uris\n\t */\n\tfunction toggleThrow(uris) {\n\t\tconst uri = uris[0];\n\t\tconst uriObj = Spicetify.URI.fromString(uri);\n\t\tconst type = uriObj.type;\n\n\t\tconst list = type === Spicetify.URI.Type.TRACK ? trashSongList : trashArtistList;\n\n\t\tif (!list[uri]) {\n\t\t\tlist[uri] = true;\n\t\t\tif (shouldSkipCurrentTrack(uri, type)) Spicetify.Player.next();\n\t\t\tSpicetify.Player.data?.item.uri === uri && setWidgetState(true);\n\t\t\tSpicetify.showNotification(type === Spicetify.URI.Type.TRACK ? \"Song added to trashbin\" : \"Artist added to trashbin\");\n\t\t} else {\n\t\t\tdelete list[uri];\n\t\t\tSpicetify.Player.data?.item.uri === uri && setWidgetState(false);\n\t\t\tSpicetify.showNotification(type === Spicetify.URI.Type.TRACK ? \"Song removed from trashbin\" : \"Artist removed from trashbin\");\n\t\t}\n\n\t\tputDataLocal();\n\t}\n\n\t/**\n\t * Only accept one track or artist URI\n\t * @param {string[]} uris\n\t * @returns {boolean}\n\t */\n\tfunction shouldAddContextMenu(uris) {\n\t\tif (uris.length > 1 || !trashbinStatus) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst uri = uris[0];\n\t\tconst uriObj = Spicetify.URI.fromString(uri);\n\t\tif (uriObj.type === Spicetify.URI.Type.TRACK) {\n\t\t\tthis.name = trashSongList[uri] ? UNTHROW_TEXT : THROW_TEXT;\n\t\t\treturn true;\n\t\t}\n\n\t\tif (uriObj.type === Spicetify.URI.Type.ARTIST) {\n\t\t\tthis.name = trashArtistList[uri] ? UNTHROW_TEXT : THROW_TEXT;\n\t\t\treturn true;\n\t\t}\n\n\t\treturn false;\n\t}\n\n\tconst cntxMenu = new Spicetify.ContextMenu.Item(THROW_TEXT, toggleThrow, shouldAddContextMenu, trashbinIcon);\n\tcntxMenu.register();\n\n\tfunction putDataLocal() {\n\t\tSpicetify.LocalStorage.set(\"TrashSongList\", JSON.stringify(trashSongList));\n\t\tSpicetify.LocalStorage.set(\"TrashArtistList\", JSON.stringify(trashArtistList));\n\t}\n\n\tfunction copyItems() {\n\t\tconst data = {\n\t\t\tsongs: trashSongList,\n\t\t\tartists: trashArtistList,\n\t\t};\n\t\tSpicetify.Platform.ClipboardAPI.copy(JSON.stringify(data));\n\t\tSpicetify.showNotification(\"Copied to clipboard\");\n\t}\n\n\tasync function exportItems() {\n\t\tconst data = {\n\t\t\tsongs: trashSongList,\n\t\t\tartists: trashArtistList,\n\t\t};\n\n\t\ttry {\n\t\t\tconst handle = await window.showSaveFilePicker({\n\t\t\t\tsuggestedName: \"spicetify-trashbin.json\",\n\t\t\t\ttypes: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdescription: \"Spicetify trashbin backup\",\n\t\t\t\t\t\taccept: {\n\t\t\t\t\t\t\t\"application/json\": [\".json\"],\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t});\n\n\t\t\tconst writable = await handle.createWritable();\n\t\t\tawait writable.write(JSON.stringify(data));\n\t\t\tawait writable.close();\n\n\t\t\tSpicetify.showNotification(\"Backup saved succesfully.\");\n\t\t} catch {\n\t\t\tSpicetify.showNotification(\"Failed to save, try copying trashbin contents to clipboard and creating a backup manually.\");\n\t\t}\n\t}\n\n\tfunction importItems() {\n\t\tconst input = document.createElement(\"input\");\n\t\tinput.type = \"file\";\n\t\tinput.accept = \".json\";\n\t\tinput.onchange = (e) => {\n\t\t\tconst file = e.target.files[0];\n\t\t\tconst reader = new FileReader();\n\t\t\treader.onload = (e) => {\n\t\t\t\ttry {\n\t\t\t\t\tconst data = JSON.parse(e.target.result);\n\t\t\t\t\ttrashSongList = data.songs;\n\t\t\t\t\ttrashArtistList = data.artists;\n\t\t\t\t\tputDataLocal();\n\t\t\t\t\tSpicetify.showNotification(\"File Import Successful!\");\n\t\t\t\t} catch (e) {\n\t\t\t\t\tSpicetify.showNotification(\"File Import Failed!\", true);\n\t\t\t\t\tconsole.error(e);\n\t\t\t\t}\n\t\t\t};\n\t\t\treader.onerror = () => {\n\t\t\t\tSpicetify.showNotification(\"File Read Failed!\", true);\n\t\t\t\tconsole.error(reader.error);\n\t\t\t};\n\t\t\treader.readAsText(file);\n\t\t};\n\t\tinput.click();\n\t}\n})();\n" }, { "path": "Extensions/webnowplaying.js", "content": "// NAME: WebNowPlaying\n// AUTHOR: khanhas, keifufu (based on https://github.com/keifufu/WebNowPlaying-Redux)\n// DESCRIPTION: Provides media information and controls to WebNowPlaying-Redux-Rainmeter, but also supports WebNowPlaying for Rainmeter 0.5.0 and older.\n\n/// \n\n(function WebNowPlaying() {\n\tif (!Spicetify.CosmosAsync || !Spicetify.Platform.LibraryAPI) {\n\t\tsetTimeout(WebNowPlaying, 500);\n\t\treturn;\n\t}\n\n\tconst socket = new WNPReduxWebSocket();\n\twindow.addEventListener(\"beforeunload\", () => {\n\t\tsocket.close();\n\t});\n})();\n\nclass WNPReduxWebSocket {\n\t_ws = null;\n\tcache = new Map();\n\treconnectCount = 0;\n\tupdateInterval = null;\n\tcommunicationRevision = null;\n\tconnectionTimeout = null;\n\treconnectTimeout = null;\n\tisClosed = false;\n\tspicetifyInfo = {\n\t\tplayer: \"Spotify Desktop\",\n\t\tstate: \"STOPPED\",\n\t\ttitle: \"\",\n\t\tartist: \"\",\n\t\talbum: \"\",\n\t\tcover: \"\",\n\t\tduration: \"0:00\",\n\t\t// position and volume are fetched in sendUpdate()\n\t\tposition: \"0:00\",\n\t\tvolume: 100,\n\t\trating: 0,\n\t\trepeat: \"NONE\",\n\t\tshuffle: false,\n\t};\n\n\tconstructor() {\n\t\tthis.init();\n\n\t\tSpicetify.Player.addEventListener(\"songchange\", ({ data }) => this.updateSpicetifyInfo(data));\n\t\tSpicetify.Player.addEventListener(\"onplaypause\", ({ data }) => this.updateSpicetifyInfo(data));\n\t}\n\n\tupdateSpicetifyInfo(data) {\n\t\tif (!data?.item?.metadata) return;\n\t\tconst meta = data.item.metadata;\n\t\tthis.spicetifyInfo.title = meta.title;\n\t\tthis.spicetifyInfo.album = meta.album_title;\n\t\tthis.spicetifyInfo.duration = timeInSecondsToString(Math.round(Number.parseInt(meta.duration) / 1000));\n\t\tthis.spicetifyInfo.state = !data.isPaused ? \"PLAYING\" : \"PAUSED\";\n\t\tthis.spicetifyInfo.repeat = data.repeat === 2 ? \"ONE\" : data.repeat === 1 ? \"ALL\" : \"NONE\";\n\t\tthis.spicetifyInfo.shuffle = data.shuffle;\n\t\tthis.spicetifyInfo.artist = meta.artist_name;\n\t\tlet artistCount = 1;\n\t\twhile (meta[`artist_name:${artistCount}`]) {\n\t\t\tthis.spicetifyInfo.artist += `, ${meta[`artist_name:${artistCount}`]}`;\n\t\t\tartistCount++;\n\t\t}\n\t\tif (!this.spicetifyInfo.artist) this.spicetifyInfo.artist = meta.album_title; // Podcast\n\n\t\tSpicetify.Platform.LibraryAPI.contains(data.item.uri).then(([added]) => {\n\t\t\tthis.spicetifyInfo.rating = added ? 5 : 0;\n\t\t});\n\n\t\tconst cover = meta.image_xlarge_url;\n\t\tif (cover?.indexOf(\"localfile\") === -1) this.spicetifyInfo.cover = `https://i.scdn.co/image/${cover.substring(cover.lastIndexOf(\":\") + 1)}`;\n\t\telse this.spicetifyInfo.cover = \"\";\n\t}\n\n\tinit() {\n\t\ttry {\n\t\t\tthis._ws = new WebSocket(\"ws://localhost:8974\");\n\t\t\tthis._ws.onopen = this.onOpen.bind(this);\n\t\t\tthis._ws.onclose = this.onClose.bind(this);\n\t\t\tthis._ws.onerror = this.onError.bind(this);\n\t\t\tthis._ws.onmessage = this.onMessage.bind(this);\n\t\t} catch {\n\t\t\tthis.retry();\n\t\t}\n\t}\n\n\tclose(cleanupOnly = false) {\n\t\tif (!cleanupOnly) this.isClosed = true;\n\t\tthis.cache = new Map();\n\t\tthis.communicationRevision = null;\n\t\tif (this.reconnectTimeout) clearTimeout(this.reconnectTimeout);\n\t\tif (this.connectionTimeout) clearTimeout(this.connectionTimeout);\n\t\tif (this.ws) {\n\t\t\tthis.ws.onclose = null;\n\t\t\tthis.ws.close();\n\t\t}\n\t}\n\n\t// Clean up old variables and retry connection\n\tretry() {\n\t\tif (this.isClosed) return;\n\t\tthis.close(true);\n\t\t// Reconnects once per second for 30 seconds, then with a exponential backoff of (2^reconnectAttempts) up to 60 seconds\n\t\tthis.reconnectTimeout = setTimeout(\n\t\t\t() => {\n\t\t\t\tthis.init();\n\t\t\t\tthis.reconnectAttempts += 1;\n\t\t\t},\n\t\t\tMath.min(1000 * (this.reconnectAttempts <= 30 ? 1 : 2 ** (this.reconnectAttempts - 30)), 60000)\n\t\t);\n\t}\n\n\tsend(data) {\n\t\tif (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;\n\t\tthis._ws.send(data);\n\t}\n\n\tonOpen() {\n\t\tthis.reconnectCount = 0;\n\t\tthis.updateInterval = setInterval(this.sendUpdate.bind(this), 500);\n\t\t// If no communication revision is received within 1 second, assume it's WNP for Rainmeter < 0.5.0 (legacy)\n\t\tthis.connectionTimeout = setTimeout(() => {\n\t\t\tif (this.communicationRevision === null) this.communicationRevision = \"legacy\";\n\t\t}, 1000);\n\t}\n\n\tonClose() {\n\t\tthis.retry();\n\t}\n\n\tonError() {\n\t\tthis.retry();\n\t}\n\n\tonMessage(event) {\n\t\tif (this.communicationRevision) {\n\t\t\tswitch (this.communicationRevision) {\n\t\t\t\tcase \"legacy\":\n\t\t\t\t\tOnMessageLegacy(this, event.data);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"1\":\n\t\t\t\t\tOnMessageRev1(this, event.data);\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\t// Sending an update immediately would normally do nothing, as it takes some time for\n\t\t\t// spicetifyInfo to be updated via the Cosmos subscription. However, we try to\n\t\t\t// optimistically update spicetifyInfo after receiving events.\n\t\t\tthis.sendUpdate();\n\t\t} else {\n\t\t\tif (event.data.startsWith(\"Version:\")) {\n\t\t\t\t// 'Version:' WNP for Rainmeter 0.5.0 (legacy)\n\t\t\t\tthis.communicationRevision = \"legacy\";\n\t\t\t} else if (event.data.startsWith(\"ADAPTER_VERSION \")) {\n\t\t\t\t// Any WNPRedux adapter will send 'ADAPTER_VERSION ;WNPRLIB_REVISION ' after connecting\n\t\t\t\tthis.communicationRevision = event.data.split(\";\")[1].split(\" \")[1];\n\t\t\t} else {\n\t\t\t\t// The first message wasn't version related, so it's probably WNP for Rainmeter < 0.5.0 (legacy)\n\t\t\t\tthis.communicationRevision = \"legacy\";\n\t\t\t}\n\t\t}\n\t}\n\n\tsendUpdate() {\n\t\tif (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;\n\t\tswitch (this.communicationRevision) {\n\t\t\tcase \"legacy\":\n\t\t\t\tSendUpdateLegacy(this);\n\t\t\t\tbreak;\n\t\t\tcase \"1\":\n\t\t\t\tSendUpdateRev1(this);\n\t\t\t\tbreak;\n\t\t}\n\t}\n}\n\nfunction OnMessageLegacy(self, message) {\n\t// Quite lengthy functions because we optimistically update spicetifyInfo after receiving events.\n\ttry {\n\t\tconst [type, data] = message.toUpperCase().split(\" \");\n\t\tswitch (type) {\n\t\t\tcase \"PLAYPAUSE\": {\n\t\t\t\tSpicetify.Player.togglePlay();\n\t\t\t\tself.spicetifyInfo.state = self.spicetifyInfo.state === \"PLAYING\" ? \"PAUSED\" : \"PLAYING\";\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"NEXT\":\n\t\t\t\tSpicetify.Player.next();\n\t\t\t\tbreak;\n\t\t\tcase \"PREVIOUS\":\n\t\t\t\tSpicetify.Player.back();\n\t\t\t\tbreak;\n\t\t\tcase \"SETPOSITION\": {\n\t\t\t\t// Example string: SetPosition 34:SetProgress 0,100890207715134:\n\t\t\t\tconst [, positionPercentage] = message.toUpperCase().split(\":\")[1].split(\"SETPROGRESS \");\n\t\t\t\tSpicetify.Player.seek(Number.parseFloat(positionPercentage.replace(\",\", \".\")));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"SETVOLUME\":\n\t\t\t\tSpicetify.Player.setVolume(Number.parseInt(data) / 100);\n\t\t\t\tbreak;\n\t\t\tcase \"REPEAT\": {\n\t\t\t\tSpicetify.Player.toggleRepeat();\n\t\t\t\tself.spicetifyInfo.repeat = self.spicetifyInfo.repeat === \"NONE\" ? \"ALL\" : self.spicetifyInfo.repeat === \"ALL\" ? \"ONE\" : \"NONE\";\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"SHUFFLE\": {\n\t\t\t\tSpicetify.Player.toggleShuffle();\n\t\t\t\tself.spicetifyInfo.shuffle = !self.spicetifyInfo.shuffle;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"TOGGLETHUMBSUP\": {\n\t\t\t\tSpicetify.Player.toggleHeart();\n\t\t\t\tself.spicetifyInfo.rating = self.spicetifyInfo.rating === 5 ? 0 : 5;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\t// Spotify doesn't have a negative rating\n\t\t\t// case 'TOGGLETHUMBSDOWN': break\n\t\t\tcase \"RATING\": {\n\t\t\t\tconst rating = Number.parseInt(data);\n\t\t\t\tconst isLiked = self.spicetifyInfo.rating > 3;\n\t\t\t\tif (rating >= 3 && !isLiked) Spicetify.Player.toggleHeart();\n\t\t\t\telse if (rating < 3 && isLiked) Spicetify.Player.toggleHeart();\n\t\t\t\tself.spicetifyInfo.rating = rating;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t} catch (e) {\n\t\tself.send(`Error:Error sending event to ${self.spicetifyInfo.player}`);\n\t\tself.send(`ErrorD:${e}`);\n\t}\n}\n\nfunction SendUpdateLegacy(self) {\n\tif (!Spicetify.Player.data && cache.get(\"state\") !== 0) {\n\t\tcache.set(\"state\", 0);\n\t\tws.send(\"STATE:0\");\n\t\treturn;\n\t}\n\n\tself.spicetifyInfo.position = timeInSecondsToString(Math.round(Spicetify.Player.getProgress() / 1000));\n\tself.spicetifyInfo.volume = Math.round(Spicetify.Player.getVolume() * 100);\n\n\tfor (const key of Object.keys(self.spicetifyInfo)) {\n\t\ttry {\n\t\t\tlet value = self.spicetifyInfo[key];\n\t\t\t// For numbers, round it to an integer\n\t\t\tif (typeof value === \"number\") value = Math.round(value);\n\n\t\t\t// Conversion to legacy values\n\t\t\tif (key === \"state\") value = value === \"PLAYING\" ? 1 : value === \"PAUSED\" ? 2 : 0;\n\t\t\telse if (key === \"repeat\") value = value === \"ALL\" ? 2 : value === \"ONE\" ? 1 : 0;\n\t\t\telse if (key === \"shuffle\") value = value ? 1 : 0;\n\n\t\t\t// Check for null, and not just falsy, because 0 and '' are falsy\n\t\t\tif (value !== null && value !== self.cache.get(key)) {\n\t\t\t\tself.send(`${key.toUpperCase()}:${value}`);\n\t\t\t\tself.cache.set(key, value);\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tself.send(`Error: Error updating ${key} for ${self.spicetifyInfo.player}`);\n\t\t\tself.send(`ErrorD:${e}`);\n\t\t}\n\t}\n}\n\nfunction OnMessageRev1(self, message) {\n\t// Quite lengthy functions because we optimistically update spicetifyInfo after receiving events.\n\tconst [type, data] = message.split(\" \");\n\n\ttry {\n\t\tswitch (type) {\n\t\t\tcase \"TOGGLE_PLAYING\": {\n\t\t\t\tSpicetify.Player.togglePlay();\n\t\t\t\tself.spicetifyInfo.state = self.spicetifyInfo.state === \"PLAYING\" ? \"PAUSED\" : \"PLAYING\";\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"NEXT\":\n\t\t\t\tSpicetify.Player.next();\n\t\t\t\tbreak;\n\t\t\tcase \"PREVIOUS\":\n\t\t\t\tSpicetify.Player.back();\n\t\t\t\tbreak;\n\t\t\tcase \"SET_POSITION\": {\n\t\t\t\tconst [, positionPercentage] = data.split(\":\");\n\t\t\t\tSpicetify.Player.seek(Number.parseFloat(positionPercentage.replace(\",\", \".\")));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"SET_VOLUME\":\n\t\t\t\tSpicetify.Player.setVolume(Number.parseInt(data) / 100);\n\t\t\t\tbreak;\n\t\t\tcase \"TOGGLE_REPEAT\": {\n\t\t\t\tSpicetify.Player.toggleRepeat();\n\t\t\t\tself.spicetifyInfo.repeat = self.spicetifyInfo.repeat === \"NONE\" ? \"ALL\" : self.spicetifyInfo.repeat === \"ALL\" ? \"ONE\" : \"NONE\";\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"TOGGLE_SHUFFLE\": {\n\t\t\t\tSpicetify.Player.toggleShuffle();\n\t\t\t\tself.spicetifyInfo.shuffle = !self.spicetifyInfo.shuffle;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"TOGGLE_THUMBS_UP\": {\n\t\t\t\tSpicetify.Player.toggleHeart();\n\t\t\t\tself.spicetifyInfo.rating = self.spicetifyInfo.rating === 5 ? 0 : 5;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\t// Spotify doesn't have a negative rating\n\t\t\t// case 'TOGGLE_THUMBS_DOWN': break\n\t\t\tcase \"SET_RATING\": {\n\t\t\t\tconst rating = Number.parseInt(data);\n\t\t\t\tconst isLiked = self.spicetifyInfo.rating > 3;\n\t\t\t\tif (rating >= 3 && !isLiked) Spicetify.Player.toggleHeart();\n\t\t\t\telse if (rating < 3 && isLiked) Spicetify.Player.toggleHeart();\n\t\t\t\tself.spicetifyInfo.rating = rating;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t} catch (e) {\n\t\tself.send(`ERROR Error sending event to ${self.spicetifyInfo.player}`);\n\t\tself.send(`ERRORDEBUG ${e}`);\n\t}\n}\n\nfunction SendUpdateRev1(self) {\n\tif (!Spicetify.Player.data && cache.get(\"state\") !== \"STOPPED\") {\n\t\tcache.set(\"state\", \"STOPPED\");\n\t\tws.send(\"STATE STOPPED\");\n\t\treturn;\n\t}\n\n\tself.spicetifyInfo.position = timeInSecondsToString(Math.round(Spicetify.Player.getProgress() / 1000));\n\tself.spicetifyInfo.volume = Math.round(Spicetify.Player.getVolume() * 100);\n\n\tfor (const key of Object.keys(self.spicetifyInfo)) {\n\t\ttry {\n\t\t\tlet value = self.spicetifyInfo[key];\n\t\t\t// For numbers, round it to an integer\n\t\t\tif (typeof value === \"number\") value = Math.round(value);\n\t\t\t// Check for null, and not just falsy, because 0 and '' are falsy\n\t\t\tif (value !== null && value !== self.cache.get(key)) {\n\t\t\t\tself.send(`${key.toUpperCase()} ${value}`);\n\t\t\t\tself.cache.set(key, value);\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tself.send(`ERROR Error updating ${key} for ${self.spicetifyInfo.player}`);\n\t\t\tself.send(`ERRORDEBUG ${e}`);\n\t\t}\n\t}\n}\n\n// Convert seconds to a time string acceptable to Rainmeter\nfunction pad(num, size) {\n\treturn num.toString().padStart(size, \"0\");\n}\nfunction timeInSecondsToString(timeInSeconds) {\n\tconst timeInMinutes = Math.floor(timeInSeconds / 60);\n\tif (timeInMinutes < 60) return `${timeInMinutes}:${pad(Math.floor(timeInSeconds % 60), 2)}`;\n\n\treturn `${Math.floor(timeInMinutes / 60)}:${pad(Math.floor(timeInMinutes % 60), 2)}:${pad(Math.floor(timeInSeconds % 60), 2)}`;\n}\n" }, { "path": "LICENSE", "content": " GNU LESSER GENERAL PUBLIC LICENSE\n Version 2.1, February 1999\n\n Copyright (C) 1991, 1999 Free Software Foundation, Inc.\n 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA\n Everyone is permitted to copy and distribute verbatim copies\n of this license document, but changing it is not allowed.\n\n[This is the first released version of the Lesser GPL. It also counts\n as the successor of the GNU Library Public License, version 2, hence\n the version number 2.1.]\n\n Preamble\n\n The licenses for most software are designed to take away your\nfreedom to share and change it. By contrast, the GNU General Public\nLicenses are intended to guarantee your freedom to share and change\nfree software--to make sure the software is free for all its users.\n\n This license, the Lesser General Public License, applies to some\nspecially designated software packages--typically libraries--of the\nFree Software Foundation and other authors who decide to use it. You\ncan use it too, but we suggest you first think carefully about whether\nthis license or the ordinary General Public License is the better\nstrategy to use in any particular case, based on the explanations below.\n\n When we speak of free software, we are referring to freedom of use,\nnot price. Our General Public Licenses are designed to make sure that\nyou have the freedom to distribute copies of free software (and charge\nfor this service if you wish); that you receive source code or can get\nit if you want it; that you can change the software and use pieces of\nit in new free programs; and that you are informed that you can do\nthese things.\n\n To protect your rights, we need to make restrictions that forbid\ndistributors to deny you these rights or to ask you to surrender these\nrights. These restrictions translate to certain responsibilities for\nyou if you distribute copies of the library or if you modify it.\n\n For example, if you distribute copies of the library, whether gratis\nor for a fee, you must give the recipients all the rights that we gave\nyou. You must make sure that they, too, receive or can get the source\ncode. If you link other code with the library, you must provide\ncomplete object files to the recipients, so that they can relink them\nwith the library after making changes to the library and recompiling\nit. And you must show them these terms so they know their rights.\n\n We protect your rights with a two-step method: (1) we copyright the\nlibrary, and (2) we offer you this license, which gives you legal\npermission to copy, distribute and/or modify the library.\n\n To protect each distributor, we want to make it very clear that\nthere is no warranty for the free library. Also, if the library is\nmodified by someone else and passed on, the recipients should know\nthat what they have is not the original version, so that the original\nauthor's reputation will not be affected by problems that might be\nintroduced by others.\n\n Finally, software patents pose a constant threat to the existence of\nany free program. We wish to make sure that a company cannot\neffectively restrict the users of a free program by obtaining a\nrestrictive license from a patent holder. Therefore, we insist that\nany patent license obtained for a version of the library must be\nconsistent with the full freedom of use specified in this license.\n\n Most GNU software, including some libraries, is covered by the\nordinary GNU General Public License. This license, the GNU Lesser\nGeneral Public License, applies to certain designated libraries, and\nis quite different from the ordinary General Public License. We use\nthis license for certain libraries in order to permit linking those\nlibraries into non-free programs.\n\n When a program is linked with a library, whether statically or using\na shared library, the combination of the two is legally speaking a\ncombined work, a derivative of the original library. The ordinary\nGeneral Public License therefore permits such linking only if the\nentire combination fits its criteria of freedom. The Lesser General\nPublic License permits more lax criteria for linking other code with\nthe library.\n\n We call this license the \"Lesser\" General Public License because it\ndoes Less to protect the user's freedom than the ordinary General\nPublic License. It also provides other free software developers Less\nof an advantage over competing non-free programs. These disadvantages\nare the reason we use the ordinary General Public License for many\nlibraries. However, the Lesser license provides advantages in certain\nspecial circumstances.\n\n For example, on rare occasions, there may be a special need to\nencourage the widest possible use of a certain library, so that it becomes\na de-facto standard. To achieve this, non-free programs must be\nallowed to use the library. A more frequent case is that a free\nlibrary does the same job as widely used non-free libraries. In this\ncase, there is little to gain by limiting the free library to free\nsoftware only, so we use the Lesser General Public License.\n\n In other cases, permission to use a particular library in non-free\nprograms enables a greater number of people to use a large body of\nfree software. For example, permission to use the GNU C Library in\nnon-free programs enables many more people to use the whole GNU\noperating system, as well as its variant, the GNU/Linux operating\nsystem.\n\n Although the Lesser General Public License is Less protective of the\nusers' freedom, it does ensure that the user of a program that is\nlinked with the Library has the freedom and the wherewithal to run\nthat program using a modified version of the Library.\n\n The precise terms and conditions for copying, distribution and\nmodification follow. Pay close attention to the difference between a\n\"work based on the library\" and a \"work that uses the library\". The\nformer contains code derived from the library, whereas the latter must\nbe combined with the library in order to run.\n\n GNU LESSER GENERAL PUBLIC LICENSE\n TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION\n\n 0. This License Agreement applies to any software library or other\nprogram which contains a notice placed by the copyright holder or\nother authorized party saying it may be distributed under the terms of\nthis Lesser General Public License (also called \"this License\").\nEach licensee is addressed as \"you\".\n\n A \"library\" means a collection of software functions and/or data\nprepared so as to be conveniently linked with application programs\n(which use some of those functions and data) to form executables.\n\n The \"Library\", below, refers to any such software library or work\nwhich has been distributed under these terms. A \"work based on the\nLibrary\" means either the Library or any derivative work under\ncopyright law: that is to say, a work containing the Library or a\nportion of it, either verbatim or with modifications and/or translated\nstraightforwardly into another language. (Hereinafter, translation is\nincluded without limitation in the term \"modification\".)\n\n \"Source code\" for a work means the preferred form of the work for\nmaking modifications to it. For a library, complete source code means\nall the source code for all modules it contains, plus any associated\ninterface definition files, plus the scripts used to control compilation\nand installation of the library.\n\n Activities other than copying, distribution and modification are not\ncovered by this License; they are outside its scope. The act of\nrunning a program using the Library is not restricted, and output from\nsuch a program is covered only if its contents constitute a work based\non the Library (independent of the use of the Library in a tool for\nwriting it). Whether that is true depends on what the Library does\nand what the program that uses the Library does.\n\n 1. You may copy and distribute verbatim copies of the Library's\ncomplete source code as you receive it, in any medium, provided that\nyou conspicuously and appropriately publish on each copy an\nappropriate copyright notice and disclaimer of warranty; keep intact\nall the notices that refer to this License and to the absence of any\nwarranty; and distribute a copy of this License along with the\nLibrary.\n\n You may charge a fee for the physical act of transferring a copy,\nand you may at your option offer warranty protection in exchange for a\nfee.\n\n 2. You may modify your copy or copies of the Library or any portion\nof it, thus forming a work based on the Library, and copy and\ndistribute such modifications or work under the terms of Section 1\nabove, provided that you also meet all of these conditions:\n\n a) The modified work must itself be a software library.\n\n b) You must cause the files modified to carry prominent notices\n stating that you changed the files and the date of any change.\n\n c) You must cause the whole of the work to be licensed at no\n charge to all third parties under the terms of this License.\n\n d) If a facility in the modified Library refers to a function or a\n table of data to be supplied by an application program that uses\n the facility, other than as an argument passed when the facility\n is invoked, then you must make a good faith effort to ensure that,\n in the event an application does not supply such function or\n table, the facility still operates, and performs whatever part of\n its purpose remains meaningful.\n\n (For example, a function in a library to compute square roots has\n a purpose that is entirely well-defined independent of the\n application. Therefore, Subsection 2d requires that any\n application-supplied function or table used by this function must\n be optional: if the application does not supply it, the square\n root function must still compute square roots.)\n\nThese requirements apply to the modified work as a whole. If\nidentifiable sections of that work are not derived from the Library,\nand can be reasonably considered independent and separate works in\nthemselves, then this License, and its terms, do not apply to those\nsections when you distribute them as separate works. But when you\ndistribute the same sections as part of a whole which is a work based\non the Library, the distribution of the whole must be on the terms of\nthis License, whose permissions for other licensees extend to the\nentire whole, and thus to each and every part regardless of who wrote\nit.\n\nThus, it is not the intent of this section to claim rights or contest\nyour rights to work written entirely by you; rather, the intent is to\nexercise the right to control the distribution of derivative or\ncollective works based on the Library.\n\nIn addition, mere aggregation of another work not based on the Library\nwith the Library (or with a work based on the Library) on a volume of\na storage or distribution medium does not bring the other work under\nthe scope of this License.\n\n 3. You may opt to apply the terms of the ordinary GNU General Public\nLicense instead of this License to a given copy of the Library. To do\nthis, you must alter all the notices that refer to this License, so\nthat they refer to the ordinary GNU General Public License, version 2,\ninstead of to this License. (If a newer version than version 2 of the\nordinary GNU General Public License has appeared, then you can specify\nthat version instead if you wish.) Do not make any other change in\nthese notices.\n\n Once this change is made in a given copy, it is irreversible for\nthat copy, so the ordinary GNU General Public License applies to all\nsubsequent copies and derivative works made from that copy.\n\n This option is useful when you wish to copy part of the code of\nthe Library into a program that is not a library.\n\n 4. You may copy and distribute the Library (or a portion or\nderivative of it, under Section 2) in object code or executable form\nunder the terms of Sections 1 and 2 above provided that you accompany\nit with the complete corresponding machine-readable source code, which\nmust be distributed under the terms of Sections 1 and 2 above on a\nmedium customarily used for software interchange.\n\n If distribution of object code is made by offering access to copy\nfrom a designated place, then offering equivalent access to copy the\nsource code from the same place satisfies the requirement to\ndistribute the source code, even though third parties are not\ncompelled to copy the source along with the object code.\n\n 5. A program that contains no derivative of any portion of the\nLibrary, but is designed to work with the Library by being compiled or\nlinked with it, is called a \"work that uses the Library\". Such a\nwork, in isolation, is not a derivative work of the Library, and\ntherefore falls outside the scope of this License.\n\n However, linking a \"work that uses the Library\" with the Library\ncreates an executable that is a derivative of the Library (because it\ncontains portions of the Library), rather than a \"work that uses the\nlibrary\". The executable is therefore covered by this License.\nSection 6 states terms for distribution of such executables.\n\n When a \"work that uses the Library\" uses material from a header file\nthat is part of the Library, the object code for the work may be a\nderivative work of the Library even though the source code is not.\nWhether this is true is especially significant if the work can be\nlinked without the Library, or if the work is itself a library. The\nthreshold for this to be true is not precisely defined by law.\n\n If such an object file uses only numerical parameters, data\nstructure layouts and accessors, and small macros and small inline\nfunctions (ten lines or less in length), then the use of the object\nfile is unrestricted, regardless of whether it is legally a derivative\nwork. (Executables containing this object code plus portions of the\nLibrary will still fall under Section 6.)\n\n Otherwise, if the work is a derivative of the Library, you may\ndistribute the object code for the work under the terms of Section 6.\nAny executables containing that work also fall under Section 6,\nwhether or not they are linked directly with the Library itself.\n\n 6. As an exception to the Sections above, you may also combine or\nlink a \"work that uses the Library\" with the Library to produce a\nwork containing portions of the Library, and distribute that work\nunder terms of your choice, provided that the terms permit\nmodification of the work for the customer's own use and reverse\nengineering for debugging such modifications.\n\n You must give prominent notice with each copy of the work that the\nLibrary is used in it and that the Library and its use are covered by\nthis License. You must supply a copy of this License. If the work\nduring execution displays copyright notices, you must include the\ncopyright notice for the Library among them, as well as a reference\ndirecting the user to the copy of this License. Also, you must do one\nof these things:\n\n a) Accompany the work with the complete corresponding\n machine-readable source code for the Library including whatever\n changes were used in the work (which must be distributed under\n Sections 1 and 2 above); and, if the work is an executable linked\n with the Library, with the complete machine-readable \"work that\n uses the Library\", as object code and/or source code, so that the\n user can modify the Library and then relink to produce a modified\n executable containing the modified Library. (It is understood\n that the user who changes the contents of definitions files in the\n Library will not necessarily be able to recompile the application\n to use the modified definitions.)\n\n b) Use a suitable shared library mechanism for linking with the\n Library. A suitable mechanism is one that (1) uses at run time a\n copy of the library already present on the user's computer system,\n rather than copying library functions into the executable, and (2)\n will operate properly with a modified version of the library, if\n the user installs one, as long as the modified version is\n interface-compatible with the version that the work was made with.\n\n c) Accompany the work with a written offer, valid for at\n least three years, to give the same user the materials\n specified in Subsection 6a, above, for a charge no more\n than the cost of performing this distribution.\n\n d) If distribution of the work is made by offering access to copy\n from a designated place, offer equivalent access to copy the above\n specified materials from the same place.\n\n e) Verify that the user has already received a copy of these\n materials or that you have already sent this user a copy.\n\n For an executable, the required form of the \"work that uses the\nLibrary\" must include any data and utility programs needed for\nreproducing the executable from it. However, as a special exception,\nthe materials to be distributed need not include anything that is\nnormally distributed (in either source or binary form) with the major\ncomponents (compiler, kernel, and so on) of the operating system on\nwhich the executable runs, unless that component itself accompanies\nthe executable.\n\n It may happen that this requirement contradicts the license\nrestrictions of other proprietary libraries that do not normally\naccompany the operating system. Such a contradiction means you cannot\nuse both them and the Library together in an executable that you\ndistribute.\n\n 7. You may place library facilities that are a work based on the\nLibrary side-by-side in a single library together with other library\nfacilities not covered by this License, and distribute such a combined\nlibrary, provided that the separate distribution of the work based on\nthe Library and of the other library facilities is otherwise\npermitted, and provided that you do these two things:\n\n a) Accompany the combined library with a copy of the same work\n based on the Library, uncombined with any other library\n facilities. This must be distributed under the terms of the\n Sections above.\n\n b) Give prominent notice with the combined library of the fact\n that part of it is a work based on the Library, and explaining\n where to find the accompanying uncombined form of the same work.\n\n 8. You may not copy, modify, sublicense, link with, or distribute\nthe Library except as expressly provided under this License. Any\nattempt otherwise to copy, modify, sublicense, link with, or\ndistribute the Library is void, and will automatically terminate your\nrights under this License. However, parties who have received copies,\nor rights, from you under this License will not have their licenses\nterminated so long as such parties remain in full compliance.\n\n 9. You are not required to accept this License, since you have not\nsigned it. However, nothing else grants you permission to modify or\ndistribute the Library or its derivative works. These actions are\nprohibited by law if you do not accept this License. Therefore, by\nmodifying or distributing the Library (or any work based on the\nLibrary), you indicate your acceptance of this License to do so, and\nall its terms and conditions for copying, distributing or modifying\nthe Library or works based on it.\n\n 10. Each time you redistribute the Library (or any work based on the\nLibrary), the recipient automatically receives a license from the\noriginal licensor to copy, distribute, link with or modify the Library\nsubject to these terms and conditions. You may not impose any further\nrestrictions on the recipients' exercise of the rights granted herein.\nYou are not responsible for enforcing compliance by third parties with\nthis License.\n\n 11. If, as a consequence of a court judgment or allegation of patent\ninfringement or for any other reason (not limited to patent issues),\nconditions are imposed on you (whether by court order, agreement or\notherwise) that contradict the conditions of this License, they do not\nexcuse you from the conditions of this License. If you cannot\ndistribute so as to satisfy simultaneously your obligations under this\nLicense and any other pertinent obligations, then as a consequence you\nmay not distribute the Library at all. For example, if a patent\nlicense would not permit royalty-free redistribution of the Library by\nall those who receive copies directly or indirectly through you, then\nthe only way you could satisfy both it and this License would be to\nrefrain entirely from distribution of the Library.\n\nIf any portion of this section is held invalid or unenforceable under any\nparticular circumstance, the balance of the section is intended to apply,\nand the section as a whole is intended to apply in other circumstances.\n\nIt is not the purpose of this section to induce you to infringe any\npatents or other property right claims or to contest validity of any\nsuch claims; this section has the sole purpose of protecting the\nintegrity of the free software distribution system which is\nimplemented by public license practices. Many people have made\ngenerous contributions to the wide range of software distributed\nthrough that system in reliance on consistent application of that\nsystem; it is up to the author/donor to decide if he or she is willing\nto distribute software through any other system and a licensee cannot\nimpose that choice.\n\nThis section is intended to make thoroughly clear what is believed to\nbe a consequence of the rest of this License.\n\n 12. If the distribution and/or use of the Library is restricted in\ncertain countries either by patents or by copyrighted interfaces, the\noriginal copyright holder who places the Library under this License may add\nan explicit geographical distribution limitation excluding those countries,\nso that distribution is permitted only in or among countries not thus\nexcluded. In such case, this License incorporates the limitation as if\nwritten in the body of this License.\n\n 13. The Free Software Foundation may publish revised and/or new\nversions of the Lesser General Public License from time to time.\nSuch new versions will be similar in spirit to the present version,\nbut may differ in detail to address new problems or concerns.\n\nEach version is given a distinguishing version number. If the Library\nspecifies a version number of this License which applies to it and\n\"any later version\", you have the option of following the terms and\nconditions either of that version or of any later version published by\nthe Free Software Foundation. If the Library does not specify a\nlicense version number, you may choose any version ever published by\nthe Free Software Foundation.\n\n 14. If you wish to incorporate parts of the Library into other free\nprograms whose distribution conditions are incompatible with these,\nwrite to the author to ask for permission. For software which is\ncopyrighted by the Free Software Foundation, write to the Free\nSoftware Foundation; we sometimes make exceptions for this. Our\ndecision will be guided by the two goals of preserving the free status\nof all derivatives of our free software and of promoting the sharing\nand reuse of software generally.\n\n NO WARRANTY\n\n 15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO\nWARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.\nEXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR\nOTHER PARTIES PROVIDE THE LIBRARY \"AS IS\" WITHOUT WARRANTY OF ANY\nKIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR\nPURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE\nLIBRARY IS WITH YOU. SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME\nTHE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.\n\n 16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN\nWRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY\nAND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU\nFOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR\nCONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE\nLIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING\nRENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A\nFAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF\nSUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH\nDAMAGES.\n\n END OF TERMS AND CONDITIONS\n\n How to Apply These Terms to Your New Libraries\n\n If you develop a new library, and you want it to be of the greatest\npossible use to the public, we recommend making it free software that\neveryone can redistribute and change. You can do so by permitting\nredistribution under these terms (or, alternatively, under the terms of the\nordinary General Public License).\n\n To apply these terms, attach the following notices to the library. It is\nsafest to attach them to the start of each source file to most effectively\nconvey the exclusion of warranty; and each file should have at least the\n\"copyright\" line and a pointer to where the full notice is found.\n\n \n Copyright (C) \n\n This library is free software; you can redistribute it and/or\n modify it under the terms of the GNU Lesser General Public\n License as published by the Free Software Foundation; either\n version 2.1 of the License, or (at your option) any later version.\n\n This library is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\n Lesser General Public License for more details.\n\n You should have received a copy of the GNU Lesser General Public\n License along with this library; if not, write to the Free Software\n Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301\n USA\n\nAlso add information on how to contact you by electronic and paper mail.\n\nYou should also get your employer (if you work as a programmer) or your\nschool, if any, to sign a \"copyright disclaimer\" for the library, if\nnecessary. Here is a sample; alter the names:\n\n Yoyodyne, Inc., hereby disclaims all copyright interest in the\n library `Frob' (a library for tweaking knobs) written by James Random\n Hacker.\n\n , 1 April 1990\n Ty Coon, President of Vice\n\nThat's all there is to it!\n" }, { "path": "README.md", "content": "

    \n

    \n \n \n \n \n

    \n\n---\n\nCommand-line tool to customize the official Spotify client.\nSupports Windows, MacOS and Linux.\n\n\"img\"\n\n### Features\n\n- Change colors across the User Interface\n- Inject CSS for advanced customization\n- Inject Extensions to extend functionalities, manipulate UI and control player\n- Inject Custom Apps\n- Make yourself in control of the Spotify client\n\n### Links\n\n- [Installation](https://spicetify.app/docs/getting-started)\n- [Basic Usage](https://spicetify.app/docs/getting-started#basic-usage)\n\n---\n\n### Code Signing Policy\n\nFree code signing provided by [SignPath.io](https://signpath.io), certificate by [SignPath Foundation](https://signpath.org/).\n" }, { "path": "Themes/SpicetifyDefault/color.ini", "content": "; COLORS KEYS DESCRIPTION\n; text = Main field text; playlist names in main field and sidebar; headings.\n; subtext = Text in main sidebar buttons; playlist names in sidebar; artist names and mini infos.\n; main = Main field background.\n; main-elevated = Backgrounds for objects above the main field.\n; highlight = Highlight background for hovering over objects.\n; highlight-elevated = Highlight colors for objects above the main field.\n; sidebar = Sidebar background.\n; player = Player background.\n; card = Card background on hover; player area outline.\n; shadow = Card drop shadow; button background.\n; selected row = Color of selected song, scrollbar, caption and playlist details, download and options buttons.\n; button = Playlist button background in sidebar; drop-down menus; now playing song; play button background; like button.\n; button-active = Active play button background.\n; button-disabled = Seekbar and volume bar background.\n; tab-active = Tabbar active item background in header.\n; notification = Notification toast.\n; notification-error = Error notification toast.\n; misc = Miscellaneous.\n\n[green-dark]\n; Light green on Dark Blue background\ntext = FFFFFF\nsubtext = DEDEDE\nmain = 2E2837\nsidebar = 2E2837\nplayer = 2E2837\ncard = 483b5b\nshadow = 202020\nselected-row = cdcdcd\nbutton = 00e089\nbutton-active = 483b5b\nbutton-disabled = 535353\ntab-active = 483b5b\nnotification = 00e089\nnotification-error = e22134\nmisc = BFBFBF\n\n[nord-light]\ntext = 2E3440\nsubtext = 3b4252\nmain = ECEFF4\nsidebar = ECEFF4\nplayer = e5e9f0\ncard = 88c0d0\nshadow = eceff4\nselected-row = 9ea4af\nbutton = 88c0d0\nbutton-active = d8dee9\nbutton-disabled = c0c0c0\ntab-active = d8dee9\nnotification = 88c0d0\nnotification-error = e22134\nmisc = BFBFBF\n\n[nord-dark]\ntext = D8DEE9\nsubtext = ECEFF4\nmain = 2e3440\nsidebar = 2e3440\nplayer = 2e3440\ncard = 3b4252\nshadow = 4c566a\nselected-row = e5e9f0\nbutton = 5E81AC\nbutton-active = 434c5e\nbutton-disabled = 434c5e\ntab-active = 434c5e\nnotification = 5E81AC\nnotification-error = e22134\nmisc = BFBFBF\n\n[pink-white]\n; Pink on White background\ntext = 000000\nsubtext = 3D3D3D\nmain = FAFAFA\nsidebar = FAFAFA\nplayer = FAFAFA\ncard = FE6F61\nshadow = F0F0F0\nselected-row = 404040\nbutton = FE6F61\nbutton-active = e9e9e9\nbutton-disabled = 535353\ntab-active = e9e9e9\nnotification = FE6F61\nnotification-error = e22134\nmisc = BFBFBF\n\n[purple]\ntext = FFFFFF\nsubtext = F0F0F0\nmain = 0A0E14\nsidebar = 0A0E14\nplayer = 0A0E14\ncard = 6F3C89\nshadow = 1f1525\nselected-row = 909090\nbutton = 6F3C89\nbutton-active = 795b84\nbutton-disabled = 535353\ntab-active = 795b84\nnotification = 6F3C89\nnotification-error = e22134\nmisc = BFBFBF\n\n[dracula]\ntext = FFFFFF\nsubtext = d8dee9\nmain = 282a36\nsidebar = 282a36\nplayer = 282a36\ncard = 6272a4\nshadow = 44475a\nselected-row = F0F0F0\nbutton = ffb86c\nbutton-active = 44475a\nbutton-disabled = 535353\ntab-active = 44475a\nnotification = ffb86c\nnotification-error = e22134\nmisc = BFBFBF\n\n" }, { "path": "Themes/SpicetifyDefault/user.css", "content": ":root {\n\t--player-bar-height: 105px;\n}\n\n.main-rootlist-rootlistDividerGradient {\n\tbackground: unset;\n}\n\ninput {\n\tbackground-color: unset !important;\n\tborder-bottom: solid 1px var(--spice-text) !important;\n\tborder-radius: 0 !important;\n\tpadding: 6px 10px 6px 48px;\n\tcolor: var(--spice-text) !important;\n}\n\n.x-searchInput-searchInputSearchIcon,\n.x-searchInput-searchInputClearButton {\n\tcolor: var(--spice-text) !important;\n}\n\n.main-home-homeHeader,\n.x-entityHeader-overlay,\n.x-actionBarBackground-background,\n.main-actionBarBackground-background,\n.main-entityHeader-overlay,\n.main-entityHeader-backgroundColor {\n\tbackground-color: unset !important;\n\tbackground-image: unset !important;\n}\n\n.main-playButton-PlayButton.main-playButton-primary {\n\tcolor: white;\n}\n\n.connect-title,\n.connect-header {\n\tdisplay: none;\n}\n\n.connect-device-list {\n\tmargin: 0px -5px;\n}\n\n/* Remove Topbar background colour */\n.main-topBar-background {\n\tbackground-color: unset !important;\n}\n.main-topBar-overlay {\n\tbackground-color: var(--spice-main);\n}\n\n.main-entityHeader-shadow,\n.connect-device-list-container {\n\tbox-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.2);\n}\n\n.main-trackList-playingIcon {\n\tfilter: grayscale(1);\n}\n\n.main-trackList-trackListRow.main-trackList-active:hover .main-trackList-rowMarker,\n.main-trackList-trackListRow.main-trackList-active:hover .main-trackList-rowTitle,\n.main-trackList-trackListRow.main-trackList-active:focus-within .main-trackList-rowMarker,\n.main-trackList-trackListRow.main-trackList-active:focus-within .main-trackList-rowTitle {\n\tcolor: var(--spice-button);\n}\n\n.main-entityHeader-metaDataText,\n.main-duration-container {\n\tcolor: var(--spice-subtext);\n}\n\nspan.artist-artistVerifiedBadge-badge svg:nth-child(1) {\n\tfill: black;\n}\n\n/* Full window artist background */\n.main-entityHeader-background.main-entityHeader-gradient {\n\topacity: 0.3;\n}\n\n.main-entityHeader-container.main-entityHeader-withBackgroundImage,\n.main-entityHeader-background,\n.main-entityHeader-background.main-entityHeader-overlay:after {\n\theight: 100vh;\n}\n\n.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {\n\tjustify-content: center;\n}\n\n.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {\n\tpadding-left: 9%;\n}\n\n.main-entityHeader-background.main-entityHeader-overlay:after {\n\tbackground-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));\n}\n\n.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {\n\tfont-size: 175px !important;\n\tline-height: 175px !important;\n}\n\n/** Hightlight selected playlist */\n.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive {\n\tbackground: var(--spice-button);\n\tborder-radius: 4px;\n\tpadding: 0 10px;\n\tmargin: 0 5px 0 -10px;\n}\n\n.main-navBar-navBarLinkActive {\n\tbackground: var(--spice-button);\n}\n\ndiv.GlueDropTarget.personal-library > *.active {\n\tbackground: var(--spice-button) !important;\n}\n\n.main-contextMenu-menu {\n\tbackground-color: var(--spice-button-active);\n}\n\n.main-contextMenu-menuHeading,\n.main-contextMenu-menuItemButton,\n.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,\n.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {\n\tcolor: var(--spice-text);\n}\n\n.main-playPauseButton-button {\n\tbackground-color: var(--spice-button);\n\tcolor: white;\n}\n\n/** Queue page header */\n.queue-queue-title,\n.queue-playHistory-title {\n\tcolor: var(--spice-text) !important;\n}\n\n/** Cards */\n.main-cardImage-imageWrapper {\n\tbackground-color: transparent;\n}\n\n/** Sidebar */\n.main-rootlist-rootlistDivider {\n\tmargin-bottom: 8px;\n}\n\n.main-rootlist-rootlistPlaylistsScrollNode {\n\tpadding: 0;\n}\n\n#spicetify-playlist-list {\n\tpadding-top: 8px;\n}\n.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,\n.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText {\n\topacity: 1;\n}\n\n.link-subtle {\n\tcolor: var(--spice-text);\n}\n\n/** Player bar */\n.main-nowPlayingBar-nowPlayingBar {\n\theight: var(--player-bar-height);\n}\n\n/** Buddy bar */\n.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,\n.main-buddyFeed-activityMetadata .main-buddyFeed-username a,\n.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink {\n\tcolor: var(--spice-text);\n}\n" }, { "path": "biome.json", "content": "{\n\t\"$schema\": \"https://biomejs.dev/schemas/2.0.0/schema.json\",\n\t\"assist\": {\n\t\t\"actions\": {\n\t\t\t\"source\": {\n\t\t\t\t\"organizeImports\": \"on\"\n\t\t\t}\n\t\t}\n\t},\n\t\"linter\": {\n\t\t\"enabled\": true,\n\t\t\"rules\": {\n\t\t\t\"recommended\": true,\n\t\t\t\"suspicious\": {\n\t\t\t\t\"noExplicitAny\": \"off\",\n\t\t\t\t\"useIterableCallbackReturn\": \"off\"\n\t\t\t}\n\t\t}\n\t},\n\t\"formatter\": {\n\t\t\"enabled\": true,\n\t\t\"formatWithErrors\": true,\n\t\t\"indentStyle\": \"tab\",\n\t\t\"indentWidth\": 2,\n\t\t\"lineWidth\": 150\n\t},\n\t\"javascript\": {\n\t\t\"formatter\": {\n\t\t\t\"trailingCommas\": \"es5\",\n\t\t\t\"arrowParentheses\": \"always\"\n\t\t}\n\t},\n\t\"vcs\": {\n\t\t\"enabled\": true,\n\t\t\"clientKind\": \"git\",\n\t\t\"useIgnoreFile\": true,\n\t\t\"defaultBranch\": \"main\"\n\t}\n}\n" }, { "path": "css-map.json", "content": "{\n\t\"n8Bz0c0v17whD3KfMdOk\": \"album-albumPage-sectionWrapper\",\n\t\"HPNSn7d7aZf4nfre61sk\": \"artist-artistAbout-about\",\n\t\"xaeunxBdlShScWay5mQR\": \"artist-artistAbout-artistGridContainer\",\n\t\"RHlPX8sl9gW1cmKdm1E9\": \"artist-artistAbout-artistOverviewContainer\",\n\t\"TPcD_1UTh6DS32DfZxhA\": \"artist-artistAbout-artistOverviewContent\",\n\t\"Ev5jVfYlqmjaZh6ziail\": \"artist-artistAbout-artistShelfSpacer\",\n\t\"N3mpQyWevHz7lrgLkOBM\": \"artist-artistAbout-artistSides\",\n\t\"TxASgfgEtA4JmUkhkNUN\": \"artist-artistAbout-artistSidesBlock\",\n\t\"PAlX44btlstKkPJfe2uU\": \"artist-artistAbout-avatar\",\n\t\"k4MNlyGrhsL0qgnENxqh\": \"artist-artistAbout-backgroundImage\",\n\t\"DRXonbAbVN5Vg9anDL1X\": \"artist-artistAbout-backgroundImage\",\n\t\"CjnwbSTpODW56Gerg7X6\": \"artist-artistAbout-bio\",\n\t\"xbKOOJ_NjLijBvdpAudQ\": \"artist-artistAbout-bio\",\n\t\"TV2j1oIRIkKH_6D1xP82\": \"artist-artistAbout-bioContainer\",\n\t\"Fzu8dfizHyYedxyDjaQ2\": \"artist-artistAbout-bioContainer\",\n\t\"NPv26QCDgdnwsPOlYJmQ\": \"artist-artistAbout-cityBlock\",\n\t\"Q_OUHp7iDNLBcO2ZYI2x\": \"artist-artistAbout-cityBlock\",\n\t\"mKUj4tXOjumlcv0q9Qta\": \"artist-artistAbout-close\",\n\t\"MHIOvvlSYRmF7VAJDLWy\": \"artist-artistAbout-close\",\n\t\"y_GaLKy76zj71zPYkLrs\": \"artist-artistAbout-columnContainer\",\n\t\"ml8qANY77Ah3fx5VTjoe\": \"artist-artistAbout-columnContainer\",\n\t\"uhDzVbFHyCQDH6WrWZaC\": \"artist-artistAbout-container\",\n\t\"jW4eWdr_LUeOXwPpKhWG\": \"artist-artistAbout-container\",\n\t\"BPDHTIIFueJMvtDPZttw\": \"artist-artistAbout-content\",\n\t\"ejNsts52hRq0uZcc_NXi\": \"artist-artistAbout-content\",\n\t\"H3lKAypjVfPoxoQkkCJQ\": \"artist-artistAbout-events\",\n\t\"XbP5GUst__JF8uVtbozd\": \"artist-artistAbout-heading\",\n\t\"oMsgQk2LPTIE4yinSHOQ\": \"artist-artistAbout-image\",\n\t\"e2S7FcJ1QgVLlcUbl2Kn\": \"artist-artistAbout-merch\",\n\t\"Er5rIejLMh22M0OiF8wH\": \"artist-artistAbout-merchShelfContent\",\n\t\"iZ_BsoftrZBB78FRQ3Yq\": \"artist-artistAbout-merchSmall\",\n\t\"NiqTdDnFi5KAXoGukrdo\": \"artist-artistAbout-modal\",\n\t\"pSn5vOGhTHswAWTC_3tE\": \"artist-artistAbout-modal\",\n\t\"KUUFCMOavSKiLbBMXu0f\": \"artist-artistAbout-modalAfterOpen\",\n\t\"hIhnD0UMvYHG6TnluwnX\": \"artist-artistAbout-modalBase\",\n\t\"Xr7SnQlqJFl6FSMeiSsw\": \"artist-artistAbout-modalBeforeClose\",\n\t\"yzXX2lW3wGayC_cdup_m\": \"artist-artistAbout-overview\",\n\t\"fPw1FkQQDEJvxJwTalo5\": \"artist-artistAbout-popularTracks\",\n\t\"Apg1EshcUJs6y4ITDWwV\": \"artist-artistAbout-popularTracksBlock\",\n\t\"hdS8jsvbJhsJXHAZlWwz\": \"artist-artistAbout-postedBy\",\n\t\"OyLgnahIHw63684ABRBF\": \"artist-artistAbout-postedBy\",\n\t\"KguYS3oppxDrMNpTUJcB\": \"artist-artistAbout-postedByAvatar\",\n\t\"mM_me6VjRfHLPkqAMqEI\": \"artist-artistAbout-postedByAvatar\",\n\t\"tLjX9htIKD_OCmEX01UN\": \"artist-artistAbout-rank\",\n\t\"tQp8UOu8jGduQXUTcv0c\": \"artist-artistAbout-rank\",\n\t\"ZjfaJlGQZ42nCWjD3FDm\": \"artist-artistAbout-scrollbars\",\n\t\"pHrwZOFBdT8FNXnmcPPI\": \"artist-artistAbout-scrollbars\",\n\t\"y72RJ2LhCkAyAfZ8tzUt\": \"artist-artistAbout-sideBlock\",\n\t\"muHL0_3HjlqTZDoapgc9\": \"artist-artistAbout-social\",\n\t\"DVWIV41y6daOMjQKR8Zj\": \"artist-artistAbout-socialsWrapper\",\n\t\"TkEnV1bItcSb11Yb8h7h\": \"artist-artistAbout-stats\",\n\t\"upZIQtiBy1Tr0ZbvhnSL\": \"artist-artistAbout-stats\",\n\t\"T_AmQPlZ6wvE819I7A0D\": \"artist-artistAbout-statsContainer\",\n\t\"ndIZG_atdpv_tBZtqQhk\": \"artist-artistAbout-statsContainer\",\n\t\"GB_nwkJosBf_NLdZAgAx\": \"artist-artistDiscography-active\",\n\t\"cFKW94askf6sbyOYlRqe\": \"artist-artistDiscography-artistName\",\n\t\"Ihlsi5QU3AnIfSgnhorS\": \"artist-artistDiscography-button\",\n\t\"h8z21OhjsxoY1IvpR1QP\": \"artist-artistDiscography-cardGrid\",\n\t\"XJrBgo4PVAKtiOwymZAH\": \"artist-artistDiscography-cardGrid\",\n\t\"Rz6JI4bCxJVeSWe6LtEX\": \"artist-artistDiscography-firstAlbum\",\n\t\"mtGNWthH4lVSrpVPuOZh\": \"artist-artistDiscography-firstAlbum\",\n\t\"O61y0bIacmTFxhhbL1Bl\": \"artist-artistDiscography-headerButtons\",\n\t\"W4CDdWdxBiLFn6s7y3y4\": \"artist-artistDiscography-headerButtons\",\n\t\"fEvxx8vl3zTNWsuC8lpx\": \"artist-artistDiscography-headerContainer\",\n\t\"tMm_GLWkp1_AE8JeAU8l\": \"artist-artistDiscography-headerContainer\",\n\t\"n1EzbHQahSKztskTUAm3\": \"artist-artistDiscography-headerImage\",\n\t\"zHSMgfu24oyo70WbnxJh\": \"artist-artistDiscography-headerImage\",\n\t\"hyHkMMynp3uUsmEtOkSN\": \"artist-artistDiscography-headerMetadata\",\n\t\"dPZaWJR4cdScdIwM6Sjx\": \"artist-artistDiscography-headerMetadata\",\n\t\"kRb29P1Fo5blFMPRDSdq\": \"artist-artistDiscography-headerTitle\",\n\t\"tAFzDJjlr14lei2t_KYl\": \"artist-artistDiscography-headerTitle\",\n\t\"P7nfAtcLXgPiUCJrlUjA\": \"artist-artistDiscography-topBar\",\n\t\"EvQHNTBhaU3rGCRRlAWj\": \"artist-artistDiscography-topBar\",\n\t\"mxGhI8Lr7MoGOnFrbsUa\": \"artist-artistDiscography-topBar\",\n\t\"jOcv0cG2WD_3xsPvxwOe\": \"artist-artistDiscography-topBar\",\n\t\"QplCuuGSoV4updqTSLq9\": \"artist-artistDiscography-topBarScrolled\",\n\t\"oxpxKtAxG4E2DCK0AJo9\": \"artist-artistDiscography-tracklist\",\n\t\"JjWADiu6y90rHjdue6qI\": \"artist-artistDiscography-tracklist\",\n\t\"QQasfrfLlxtbcdiJP40s\": \"artist-artistOffers-description\",\n\t\"F6RR_jytWUwdg_jiv0Ss\": \"artist-artistOffers-icon\",\n\t\"TXVCwyY2iLFPRMSav251\": \"artist-artistOffers-info\",\n\t\"RmO04klyCgpCtMspkDMH\": \"artist-artistOffers-item\",\n\t\"crweb403jWwGSZngXpHU\": \"artist-artistOffers-name\",\n\t\"nMgXBztFcmHCjT0dRQDx\": \"artist-artistOffers-pic\",\n\t\"N5_bW94EwvHFbWWoRucu\": \"artist-artistOnTour-condensed\",\n\t\"gyHBzoYLUrTsDmijyGQ7\": \"artist-artistOnTour-date\",\n\t\"J8F7vs26LDSof1E_qwmN\": \"artist-artistOnTour-dateDay\",\n\t\"VbaPExA4ISCqk6SuSe2H\": \"artist-artistOnTour-dateMonth\",\n\t\"P5l28MUwDXvStz4OF0IE\": \"artist-artistOnTour-elevated\",\n\t\"rTTxX5loXbtazDI0NLAj\": \"artist-artistOnTour-eventName\",\n\t\"j1MetdstqbpfRVFl1W01\": \"artist-artistOnTour-info\",\n\t\"viRsT27AlJDd4bZyiH_k\": \"artist-artistOnTour-item\",\n\t\"h3FvLvcLCaK12strxe2F\": \"artist-artistOnTour-location\",\n\t\"ERcmpF077M1XT1X0fIxB\": \"artist-artistOnTour-metadata\",\n\t\"Oq3xjFrLaBAabx847xea\": \"artist-artistOnTour-onTourShelfGrid\",\n\t\"n46Gs0Xh2zys0a2KwSRS\": \"artist-artistOnTour-time\",\n\t\"IUF5ct6RQtva_f_DQqg0\": \"artist-artistOnTour-timeAndVenue\",\n\t\"dvPKZDevT0Llia4bmaJX\": \"artist-artistOnTour-timeAndVenueText\",\n\t\"RpOhZK9h4ccL8wsEgdwQ\": \"artist-artistOnTour-title\",\n\t\"kgR8s9v7IzY4G17ZtLbw\": \"artist-artistOverview-about\",\n\t\"Sl7tzXKh5stpn_y5prU5\": \"artist-artistOverview-artistOverviewContainer\",\n\t\"BL__GuO2JsHMR6RgNfwY\": \"artist-artistOverview-artistOverviewContent\",\n\t\"_7rRmILTMMuCiW77ERpvL\": \"artist-artistOverview-artistShelfRelatedVideos\",\n\t\"jJ1PYBjdJy5plPbVprT1\": \"artist-artistOverview-artistShelfSpacer\",\n\t\"EsgR8WWJIEa9L2wBAKxg\": \"artist-artistOverview-artistSides\",\n\t\"_yUo81yeoON6wNqCV_ud\": \"artist-artistOverview-artistSidesBlock\",\n\t\"qsfp4wSDOv6LBCbFApI1\": \"artist-artistOverview-events\",\n\t\"hLkn_NwPkY5VIAETCqCK\": \"artist-artistOverview-heading\",\n\t\"_7MwXzTGa7JMhVlJCeDJ9\": \"artist-artistOverview-merch\",\n\t\"NOFtFAj4dIAsXQgVHJcA\": \"artist-artistOverview-merchShelfContent\",\n\t\"ODvt8oN68o6Iy8nxwOuY\": \"artist-artistOverview-merchSmall\",\n\t\"NLaDALU71zxOtBUbsrfH\": \"artist-artistOverview-overview\",\n\t\"q9GR66ZTM4HH42Z_qroQ\": \"artist-artistOverview-popularTracks\",\n\t\"yTBLU_z7yk9Xp_oN48Q2\": \"artist-artistOverview-popularTracksBlock\",\n\t\"uVh80THccLWIzZYwgUaQ\": \"artist-artistOverview-sideBlock\",\n\t\"b0NcxAbHvRbqgs2S8QDg\": \"artist-artistVerifiedBadge-badge\",\n\t\"bn2UNQDs5GLY5rjp5Ljh\": \"artist-artistVerifiedBadge-fillColor\",\n\t\"CmR9tHJ5ta6oWJlKBm3k\": \"artist-artistVerifiedBadge-wrapper\",\n\t\"idI9vydtCzXVhU1BaKLw\": \"artist-followButton-button\",\n\t\"Qq16641w1flRfBavPaAn\": \"artist-followButton-disabled\",\n\t\"fEbcweEiUPPy2eaIaD3F\": \"artist-followButton-followed\",\n\t\"wi2HeHXOI471ZOh8ncCG\": \"artist-popularTrackList-seeMore\",\n\t\"YV8aNrRwNwFaMozM_Bfo\": \"collection-collection-adBarEnabled\",\n\t\"Hbwta1_s02edtdkgJ7qZ\": \"collection-collection-AddToPlaylistIcon\",\n\t\"nHGnfkVXCk9YYVitV6eu\": \"collection-collection-emptyStateContainer\",\n\t\"fLqEiE5HwKr9eFCbJgeu\": \"collection-collection-header\",\n\t\"tUg9tRrSVbtjHJ4WHnxw\": \"collection-collection-tabBar\",\n\t\"ZzUvBwE6uj5CAU2pjlQX\": \"collection-collectionEntityHeroCard-container\",\n\t\"xhPzQCyks9pfizJj_PVK\": \"collection-collectionEntityHeroCard-descriptionContainer\",\n\t\"DY2YrJ5MH3ddIhZGORBq\": \"collection-collectionEntityHeroCard-headerContainer\",\n\t\"NGSgqDuaOH2VDApkzoxN\": \"collection-collectionEntityHeroCard-likedSongs\",\n\t\"QoUF6etsDFiL979QR7aC\": \"collection-collectionEntityHeroCard-moreText\",\n\t\"d8ifuAZX8mK644AwlRZK\": \"collection-collectionEntityHeroCard-opacityText\",\n\t\"lBs1v3T3HAPrOxfyWemr\": \"collection-collectionEntityHeroCard-skeletonRow\",\n\t\"ZXOyJPokUIObMnvTOJvc\": \"collection-collectionEntityHeroCard-tracksContainer\",\n\t\"kST1INfbHSxzydJffBq_\": \"collection-collectionEntityHeroCard-yourEpisodes\",\n\t\"VuUpAVlUW_OfMfOcDEID\": \"collection-searchBar-searchBar\",\n\t\"Agho45p8dD6jGmTpdSlp\": \"cover-art\",\n\t\"H0HbpIM3UrcupWIAjLWu\": \"cover-art\",\n\t\"W0TACB7OY0iXtKVOtEhY\": \"cover-art-auto-height\",\n\t\"dyzKbJJHavNOBo6bGSpK\": \"cover-art-icon\",\n\t\"zmOtW0vqqn1qpZrtQ_w9\": \"cover-art-icon\",\n\t\"_bmrtgr4_Tgsoiaz4c85\": \"cover-art-image\",\n\t\"FqmFsMhuF4D0s35Z62Js\": \"cover-art-image\",\n\t\"tAcAbTTcWl8G7S0wL4E8\": \"desktopmodals-aboutSpotifyModal-closeButton\",\n\t\"GSFvITwD84dS2JA62Mtj\": \"desktopmodals-aboutSpotifyModal-closeButton\",\n\t\"DIO4lfVN1pwro7Yg360w\": \"desktopmodals-aboutSpotifyModal-container\",\n\t\"UnLGG6p932k7WyjkB9Vo\": \"desktopmodals-aboutSpotifyModal-container\",\n\t\"_h3KfYcbuvm0TopPfACQ\": \"desktopmodals-aboutSpotifyModal-content\",\n\t\"KlzblASEYfUfaykBFZgM\": \"desktopmodals-aboutSpotifyModal-content\",\n\t\"_Hx5g6RUtUkydJULdjOA\": \"desktopmodals-aboutSpotifyModal-copyright\",\n\t\"XF1XXenkrbdAK2rRoxoU\": \"desktopmodals-aboutSpotifyModal-copyright\",\n\t\"FNHhAAEYgKErDNsJevtS\": \"desktopmodals-aboutSpotifyModal-licensing\",\n\t\"Ifnz1lh1jjvqPqJ4KPo8\": \"desktopmodals-aboutSpotifyModal-licensing\",\n\t\"qsKpcFrhrA8KtuTVIN_y\": \"desktopmodals-licensesModal-buttonContainer\",\n\t\"uYKs_kQMPOziaeDj877B\": \"desktopmodals-licensesModal-container\",\n\t\"i8qeSJJVx4PXb7fsvOTd\": \"desktopmodals-licensesModal-content\",\n\t\"WhIzm3S3R6Ker3XvpYW6\": \"desktopmodals-licensesModal-licensesFrame\",\n\t\"dn48DOL23H8N3jN80yFW\": \"desktopmodals-versionStatus-container\",\n\t\"qi0hX8uXrbQyS6tvdDBt\": \"desktopmodals-versionStatus-container\",\n\t\"O7Pq_TuNMtSn0zigOncV\": \"desktopmodals-versionStatus-content\",\n\t\"WomzHWnDO_yFyjnkd49P\": \"desktopmodals-versionStatus-content\",\n\t\"sU_Wp3eWSzMrHnkUmbdI\": \"desktopmodals-versionStatus-copyButton\",\n\t\"R83hOohwVshnd6bEkDO4\": \"desktopmodals-versionStatus-copyButton\",\n\t\"YJMECPbMHWgMUs8RFdcV\": \"folder-folderPage-sectionWrapper\",\n\t\"zogFp9G1AEqb8AKOd5B0\": \"GenericModal\",\n\t\"I3zkdnuhFFrZ1Rr1BJhb\": \"GenericModal__overlay\",\n\t\"ISA4xMVe89BiwxjIENN1\": \"GenericModal__overlay\",\n\t\"cUwQnQoE3OqXqSYLT0hv\": \"link-subtle\",\n\t\"VUXMMFKWudUWE1kIXZoS\": \"link-subtle\",\n\t\"rC9xwL4gaksmshIjHbNn\": \"link-subtle\",\n\t\"iKgf4UDhbRTHxmZSuAEc\": \"lyrics-lyrics-adLeaderboardIsEnabled\",\n\t\"L9xhJOJnV2OL5Chm3Jew\": \"lyrics-lyrics-background\",\n\t\"o4GE4jG5_QICak2JK_bn\": \"lyrics-lyrics-background\",\n\t\"RFThkjLuWfPUO9shrMOZ\": \"lyrics-lyrics-background\",\n\t\"tr8V5eHsUaIkOYVw7eSG\": \"lyrics-lyrics-container\",\n\t\"FUYNhisXTCmbzt9IDxnT\": \"lyrics-lyrics-container\",\n\t\"lofIAg8Ixko3mfBrbfej\": \"lyrics-lyrics-container\",\n\t\"Q2RPoHcoxygOoPLXLMww\": \"lyrics-lyrics-contentContainer\",\n\t\"gqaWFmQeKNYnYD5gRv3x\": \"lyrics-lyrics-contentContainer\",\n\t\"_EzvsrEJ47TI8hxzRoKx\": \"lyrics-lyrics-contentContainer\",\n\t\"esRByMgBY3TiENAsbDHA\": \"lyrics-lyrics-contentWrapper\",\n\t\"_Wna90no0o0dta47Heiw\": \"lyrics-lyrics-contentWrapper\",\n\t\"t_dtt9KL1wnNRvRO_y5L\": \"lyrics-lyrics-contentWrapper\",\n\t\"iPBJpp5EVkRE24N6vmGA\": \"lyrics-lyrics-coverTopBar\",\n\t\"SaEkeiyzAoXnWVSDiTR7\": \"lyrics-lyrics-vocalRemoval\",\n\t\"arY01KDGhWNgzlAHlhpd\": \"lyrics-lyricsContent-active\",\n\t\"EhKgYshvOwpSrTv399Mw\": \"lyrics-lyricsContent-active\",\n\t\"_gZrl2ExJwyxPy1pEUG2\": \"lyrics-lyricsContent-active\",\n\t\"iq4cgi0YEKr6DGaTtzUj\": \"lyrics-lyricsContent-description\",\n\t\"MEjuIn9iTBQbnCqHpkoQ\": \"lyrics-lyricsContent-highlight\",\n\t\"aeO5D7ulxy19q4qNBrkk\": \"lyrics-lyricsContent-highlight\",\n\t\"ve52ddYhoAd3Xf27Zxfm\": \"lyrics-lyricsContent-highlight\",\n\t\"_LKG3z7SnerR0eigPCoK\": \"lyrics-lyricsContent-isInteractive\",\n\t\"vapgYYF2HMEeLJuOWGq5\": \"lyrics-lyricsContent-isInteractive\",\n\t\"FQYXZaa0aDIrse54YlYO\": \"lyrics-lyricsContent-isInteractive\",\n\t\"NiCdLCpp3o2z6nBrayOn\": \"lyrics-lyricsContent-lyric\",\n\t\"nw6rbs8R08fpPn7RWW2w\": \"lyrics-lyricsContent-lyric\",\n\t\"BJ1zQ_ReY3QPaS7SW46s\": \"lyrics-lyricsContent-lyric\",\n\t\"o69qODXrbOkf6Tv7fa51\": \"lyrics-lyricsContent-lyric\",\n\t\"kGR_hu4tdj9PnUlSPaRL\": \"lyrics-lyricsContent-provider\",\n\t\"LomBcMvfM8AEmZGquAdj\": \"lyrics-lyricsContent-provider\",\n\t\"adSF6zkjcpNDto9qhTdV\": \"lyrics-lyricsContent-provider\",\n\t\"A3ohAQNHsDIMv2EM3Ytp\": \"lyrics-lyricsContent-text\",\n\t\"BXlQFspJp_jq9SKhUSP3\": \"lyrics-lyricsContent-text\",\n\t\"MmIREVIj8A2aFVvBZ2Ev\": \"lyrics-lyricsContent-text\",\n\t\"HxblHEsl2WX2yhubfVIc\": \"lyrics-lyricsContent-unsynced\",\n\t\"SruqsAzX8rUtY2isUZDF\": \"lyrics-lyricsContent-unsynced\",\n\t\"E4q8ogfdWtye7YgotBlN\": \"main-actionBar-ActionBar\",\n\t\"AKrNYHB1rFTyzXauXAtQ\": \"main-actionBar-ActionBar\",\n\t\"eSg4ntPU2KQLfpLGXAww\": \"main-actionBar-ActionBarRow\",\n\t\"WWMs8ddvWoRMkjWcRY2W\": \"main-actionBar-ActionBarRow\",\n\t\"K06ol8ltPT_atXE_JjUP\": \"main-actionBar-exploreButton\",\n\t\"pRm6ynptw_JVaNIGT44l\": \"main-actionBar-exploreButton\",\n\t\"CoLO4pdSl8LGWyVZA00t\": \"main-actionBarBackground-background\",\n\t\"PkOz5g82CaoKk1J3GX0e\": \"main-actionBarBackground-background\",\n\t\"us5p2PlqI8IJvxWYakKj\": \"main-actionBarBackground-background\",\n\t\"GTAFfOA_w5vh_bDaGJAG\": \"main-actionButtons\",\n\t\"NPvLJSRWfv1Joo8dF0D8\": \"main-actionButtons\",\n\t\"POrR9X4pOmhyjTr88Eag\": \"main-actionButtons\",\n\t\"P83IYsmHg0RH_STU1ENU\": \"main-actionButtons\",\n\t\"WIGgdAaAzrXm7f_loaXi\": \"main-actionButtons-button\",\n\t\"rRF_r7EyCHjZv058JACi\": \"main-addButton-active\",\n\t\"SPC4uzYXJmknkCGKpxHw\": \"main-addButton-active\",\n\t\"Fm7C3gdh5Lsc9qSXrQwO\": \"main-addButton-button\",\n\t\"RbsCNNM9a0WkFCM2UzBA\": \"main-addButton-button\",\n\t\"nzUMgk_XBD4uFFgA_LOI\": \"main-addButton-disabled\",\n\t\"GolAZOzxNIKbfZdIApC_\": \"main-addButton-helmet\",\n\t\"LuK6ZGXdwxSW92X3FodG\": \"main-addButton-zoomInAnimation\",\n\t\"uKyQmBSHiTyLvZlrFHLE\": \"main-appShell-card\",\n\t\"fGX1fnzBkGAAMfMxDXDe\": \"main-appShell-cards\",\n\t\"uMdsIJ2RlIvMQObefThj\": \"main-appShell-cardsHeader\",\n\t\"ucE6L4XRyB9F_RXDPVuR\": \"main-appShell-cardsWrapper\",\n\t\"FKzolQvIeUcXEOsjtw8l\": \"main-appShell-container\",\n\t\"vIGYXwggXAn1Xc_qD5LA\": \"main-appShell-logo\",\n\t\"HMyLin1O_6Ae2odnit1u\": \"main-appShell-mainContent\",\n\t\"qqVgbIIvqVxAT7KPTjM6\": \"main-appShell-navItems\",\n\t\"D1z00v8mUgOxx_my43Yq\": \"main-appShell-playbackBar\",\n\t\"rLrSnwagmkEsLoI1InYT\": \"main-appShell-sideBar\",\n\t\"Fe4_ZnxnNSMxu7vzbntV\": \"main-appShell-topBar\",\n\t\"tp8rO9vtqBGPLOhwcdYv\": \"main-avatar-avatar\",\n\t\"LKfKy7bXKmlkMEANVJMS\": \"main-avatar-avatar\",\n\t\"_4JsFsdrKufWvrC44apn\": \"main-avatar-avatar\",\n\t\"Xz3tlahv16UpqKBW5HdK\": \"main-avatar-image\",\n\t\"Xgnpn7u01MvGEhekIGLT\": \"main-avatar-image\",\n\t\"yzLEMgdzXgAnIZZwMHO1\": \"main-avatar-piled\",\n\t\"ENopS3htmKy15q_QCR2j\": \"main-avatar-piledIcon\",\n\t\"m95Ymx847hCaxHjmyXKX\": \"main-avatar-placeholderTransparent\",\n\t\"KdxlBanhDJjzmHfqhP0X\": \"main-avatar-placeholderWrapper\",\n\t\"BzunmwrVMyWGpopPJRt2\": \"main-avatar-withBadge\",\n\t\"YEaaNScT6lyJCVBeQoxd\": \"main-buddyFeed-actions\",\n\t\"EaZyLTjK9Rd_s6A8aYVw\": \"main-buddyFeed-actions\",\n\t\"_Xe25F2aC59Kljgqyw3G\": \"main-buddyFeed-activityMetadata\",\n\t\"j7K7_Zly3G1HS9MlKoao\": \"main-buddyFeed-addFriendPlaceholder\",\n\t\"gY0qK1gmEdhq5idwQc8C\": \"main-buddyFeed-addFriendPlaceholderBtn\",\n\t\"cBPbfBWIIPDzhIT6i3ih\": \"main-buddyFeed-addFriendPlaceholderText\",\n\t\"mthrc5U9wb8F4zMBqlPy\": \"main-buddyFeed-artistAndTrackName\",\n\t\"dLg5WMgjh1kfYtZ_MnZz\": \"main-buddyFeed-avatarContainer\",\n\t\"ythYrlFSBm1P_ltHc8e1\": \"main-buddyFeed-buddyFeed\",\n\t\"t345U9kQY1pF704d79oY\": \"main-buddyFeed-closeButton\",\n\t\"fjCfUvlYgfexObyYQqFM\": \"main-buddyFeed-closeButton\",\n\t\"eZCD3dqbvZaABVAhIniT\": \"main-buddyFeed-closeContainer\",\n\t\"Uoc48ia3df_vZxWCLFDB\": \"main-buddyFeed-closeContainer\",\n\t\"AzO2ondhaHJntbGy_3_S\": \"main-buddyFeed-container\",\n\t\"NmPFqFYcYmtFfPShmtj3\": \"main-buddyFeed-container\",\n\t\"zuwPpHAEtIqahnB2u9NR\": \"main-buddyFeed-content\",\n\t\"dRp9nXvINyo7LOvJtuUC\": \"main-buddyFeed-content\",\n\t\"MObmOrMxbQpO10ebAtZA\": \"main-buddyFeed-emptyBuddyFeed\",\n\t\"gj9SOnCIzruGWAM5m3XO\": \"main-buddyFeed-friendActivity\",\n\t\"oWQvtc5QZlmB60A9ejJx\": \"main-buddyFeed-friendsFeedContainer\",\n\t\"nGInMrf62TCFD9MBnEzz\": \"main-buddyFeed-friendsList\",\n\t\"NdQkQZhcYIEcJnRdAYcQ\": \"main-buddyFeed-header\",\n\t\"vJNLkecIsGhwDaslvslX\": \"main-buddyFeed-header\",\n\t\"BeABJha8PrxMcJmlBzcH\": \"main-buddyFeed-headerTitle\",\n\t\"tli6RLZf7DdPtClCKK6_\": \"main-buddyFeed-link\",\n\t\"n6rSk6R7nfmSGSgTRR5_\": \"main-buddyFeed-loadingFriends\",\n\t\"VBQoaks4ZkfIknTKmxXZ\": \"main-buddyFeed-overlay\",\n\t\"ylTErJiI2Ir_LqmrsaXV\": \"main-buddyFeed-panelTransition\",\n\t\"kE5DI3BkNlo9zuO7K3aO\": \"main-buddyFeed-playbackContext\",\n\t\"dvb9y9hcP8sUfMhUASKO\": \"main-buddyFeed-playbackContextIcon\",\n\t\"hnEmEncF7kB2TnE_Uyja\": \"main-buddyFeed-playbackContextLink\",\n\t\"Irsd58UNEmDPxdhXKXCs\": \"main-buddyFeed-playIcon\",\n\t\"AWUxW13rbpNdQkvJJg13\": \"main-buddyFeed-scrollableArea\",\n\t\"v_YrAYQP6fHG_z0hyg7C\": \"main-buddyFeed-scrollBarContainer\",\n\t\"scnRZypJsyXH1tjPg6uM\": \"main-buddyFeed-scrollBarContainer\",\n\t\"gWUxbU2cIHAajHxsVLMZ\": \"main-buddyFeed-section\",\n\t\"WjW1oRtpaNrY37daDP6Y\": \"main-buddyFeed-sectionFadeEnter\",\n\t\"C3bqciZSM7rPG_L3ohdC\": \"main-buddyFeed-sectionFadeEnterActive\",\n\t\"T27BYdtZ9ugE_X_JpP1A\": \"main-buddyFeed-sectionFadeExit\",\n\t\"RLdiPAZ3grZgi7lfHjXA\": \"main-buddyFeed-sectionFadeExitActive\",\n\t\"LywlKLgNaEtHZzLM3EX5\": \"main-buddyFeed-timestamp\",\n\t\"Lcc_yFPFIr7HSbt6aQbQ\": \"main-buddyFeed-title\",\n\t\"cwcgvNz4amFDKqakIqxc\": \"main-buddyFeed-titleContainer\",\n\t\"ktMuChpoidaEvECE7y8f\": \"main-buddyFeed-username\",\n\t\"P7j2kCLc27vLybuzy5XB\": \"main-buddyFeed-usernameAndTimestamp\",\n\t\"LunqxlFIupJw_Dkx6mNx\": \"main-card-card\",\n\t\"_hPU2Qo7dicv7cnikDRl\": \"main-card-card\",\n\t\"aAYpzGljXQv1_zfopxaH\": \"main-card-cardContainer\",\n\t\"RKstfK7T5nPbsDOYT6sT\": \"main-card-cardContainer\",\n\t\"tsv7E_RBBw6v0XTQlcRo\": \"main-card-cardLink\",\n\t\"oboNtEJNVzUoiaCWZRti\": \"main-card-cardLink\",\n\t\"E1N1ByPFWo4AJLHovIBQ\": \"main-card-cardMetadata\",\n\t\"K2GmhKpSMGL9aDJbOJrD\": \"main-card-cardMetadata\",\n\t\"xHz124sSHSCYHecLCTfi\": \"main-card-cardTitle\",\n\t\"sq_3oR2TTWUK3HEVWaxx\": \"main-card-cardTitle\",\n\t\"w9Tpa4Y111UM5u1WMkEl\": \"main-card-DownloadStatusIndicator\",\n\t\"vCaVlmqbg5B36V6PzUsm\": \"main-card-DownloadStatusIndicator\",\n\t\"XiVwj5uoqqSFpS4cYOC6\": \"main-card-draggable\",\n\t\"kpO5z7v_Nr22lge440TY\": \"main-card-hero\",\n\t\"xBV4XgMq0gC5lQICFWY_\": \"main-card-imageContainer\",\n\t\"YnehZkoE2hpA5Tniju8J\": \"main-card-imageContainer\",\n\t\"NH6UaoYYe47eIHA2Rmal\": \"main-card-imageContainerOld\",\n\t\"xxLDW4qlPuNbzB9jIJKc\": \"main-card-imageContainerOld\",\n\t\"AYwATC_zEPwCkmO1yc8R\": \"main-card-imageContainerSkeleton\",\n\t\"DcLEXCfwMp91VNH5R4m9\": \"main-card-imageContainerSkeleton\",\n\t\"UB3cP9wsqoAMAHaeBGDt\": \"main-card-imagePlaceholder\",\n\t\"r9Oj1LabijReMkOyeUxw\": \"main-card-newEpisodeIndicator\",\n\t\"XpvI6Yl46lYYdMY6SnvK\": \"main-card-newEpisodeIndicator\",\n\t\"woJQ5t2YiaJhjTv_KE7p\": \"main-card-PlayButtonContainer\",\n\t\"EFrqkoAHdmfRItUj8H8H\": \"main-card-PlayButtonContainer\",\n\t\"zuKTW9yEI9rToECOcWG3\": \"main-card-PlayButtonContainerVisible\",\n\t\"_0rtnZ9bGhwcfS5kspzw\": \"main-card-PlayButtonContainerVisible\",\n\t\"iwsv8i7rNxA2c_VvC4CO\": \"main-card-type\",\n\t\"c6FJaCManaNcchyUwvoL\": \"main-card-withWaves\",\n\t\"MxnDSnm9KnJu4xcsinKh\": \"main-card-withWavesWrapper\",\n\t\"QO_OHdGt6X6luPH6_Lfg\": \"main-cardHeader-hasNewEpisodeIndicator\",\n\t\"Nqa6Cw3RkDMV8QnYreTr\": \"main-cardHeader-link\",\n\t\"nk6UgB4GUYNoAcPtAQaG\": \"main-cardHeader-text\",\n\t\"yYflTYbufy7rATGQiZfq\": \"main-cardImage-circular\",\n\t\"SKJSok3LfyedjZjujmFt\": \"main-cardImage-image\",\n\t\"g4PZpjkqEh5g7xDpCr2K\": \"main-cardImage-imageWrapper\",\n\t\"mKWCDBYvel1BrZvMNY09\": \"main-cardImage-imageWrapper\",\n\t\"qucSNjx66ofSGZDzCuEk\": \"main-cardSubHeader-isHero\",\n\t\"Za_uNH8nTZ0qCuIqbPLZ\": \"main-cardSubHeader-root\",\n\t\"RArlOXg8S6l3NgRKrGsO\": \"main-cardSubHeader-text\",\n\t\"r9YzlaAPnM2LGK97GSfa\": \"main-collectionLinkButton-collectionLinkButton\",\n\t\"ot6VAZq1Xfbw2Vh8Qt_A\": \"main-collectionLinkButton-collectionLinkText\",\n\t\"v1Gs5xaHy8aBhUMEobSn\": \"main-collectionLinkButton-dragEnter\",\n\t\"bFQ9NOIn1bDs8tTH0ebQ\": \"main-collectionLinkButton-icon\",\n\t\"GGx57b6ZwGgzUeTpynUw\": \"main-collectionLinkButton-iconWrapper\",\n\t\"zDK1f3nL_R49a1mOvaO1\": \"main-collectionLinkButton-selected\",\n\t\"MIsUJlamzLYuAlvPbmZz\": \"main-confirmDialog-button\",\n\t\"g9vSqjD_GCegXg2jn5pM\": \"main-confirmDialog-button\",\n\t\"X05XDhpQJ7THPHfgbUk1\": \"main-confirmDialog-buttonContainer\",\n\t\"HqYq0HYtZvHn1QGqPBoz\": \"main-confirmDialog-buttonContainer\",\n\t\"RVgHI2ejYct8LjT1AO7m\": \"main-confirmDialog-container\",\n\t\"f2wxfjDHQON3z6amVbrW\": \"main-confirmDialog-container\",\n\t\"m0yIuS1Q6XRA5R4PNEhl\": \"main-confirmDialog-overlay\",\n\t\"Z2BqWbMx6LJjXzVWDAbZ\": \"main-confirmDialog-overlay\",\n\t\"gQoa8JTSpjSmYyABcag2\": \"main-connectBar-connectBar\",\n\t\"UCkwzKM66KIIsICd6kew\": \"main-connectBar-connectBar\",\n\t\"T3hkVxXuSbCYOD2GIeQd\": \"main-connectBar-connected\",\n\t\"DOemiVbX4CbcfgSDqiiJ\": \"main-connectBar-connected\",\n\t\"GcHojieewpdN1c8vbtwk\": \"main-connectBar-connecting\",\n\t\"KL8t9WB65UfUEPuTFAhO\": \"main-content-view\",\n\t\"Cm3jbLBimhqdYEcNTVPj\": \"main-contextMenu-addToPlaylistSubtitle\",\n\t\"OVv1uDz67TLurN8o6LtQ\": \"main-contextMenu-addToPlaylistTitle\",\n\t\"EyDGMdJOp8ktTzmRFcQM\": \"main-contextMenu-clearButton\",\n\t\"pzkhLqffqF_4hucrVVQA\": \"main-contextMenu-disabled\",\n\t\"jJzb9peSGYsUDKbc5QBy\": \"main-contextMenu-disabled\",\n\t\"Y98_oiegQgSpY_o7hoKG\": \"main-contextMenu-disabled\",\n\t\"NmbeQabkSLXf0mTAhSLl\": \"main-contextMenu-dividerAfter\",\n\t\"pXsnH0sMlWUGBffe24cr\": \"main-contextMenu-dividerAfter\",\n\t\"yO0rvyTlM0Hu4iDIycZE\": \"main-contextMenu-dividerAfter\",\n\t\"baIGYewvFQfSAOWmZURZ\": \"main-contextMenu-dividerAfter\",\n\t\"QgtQw2NJz7giDZxap2BB\": \"main-contextMenu-dividerBefore\",\n\t\"hYwu7ZpcbQIP6iM5fzAu\": \"main-contextMenu-dividerBefore\",\n\t\"a18VwKy6bTWgj2tAWVmB\": \"main-contextMenu-dividerBefore\",\n\t\"jh5Yq5ylGtEpGtbz1UNg\": \"main-contextMenu-dividerBefore\",\n\t\"pc7Mq0FHh8Nlho4sOJH7\": \"main-contextMenu-expandButton\",\n\t\"IErtLy9qyhR17riTrzYh\": \"main-contextMenu-expanded\",\n\t\"qCnh1KNFmroitPazoXOc\": \"main-contextMenu-expandRight\",\n\t\"ycGdaksV3Z5Y7eav3ZyQ\": \"main-contextMenu-filterInput\",\n\t\"dJzYRtCWK2U6k08EtqAg\": \"main-contextMenu-filterInputContainer\",\n\t\"zfZEbT8RJbcAg13pTMDl\": \"main-contextMenu-filterInputFullWidth\",\n\t\"eG930DCaQXDFqjhxRGIs\": \"main-contextMenu-filterPlaylistSearch\",\n\t\"i8EjndRQjYlli0aLGYEm\": \"main-contextMenu-filterPlaylistSearchContainer\",\n\t\"M0E2Al6URHV3iyoDbvi_\": \"main-contextMenu-highlightedText\",\n\t\"uEPiT_llP0oFNDYu_QZR\": \"main-contextMenu-loadingContainer\",\n\t\"ibA08TpSVrM0wThmotVd\": \"main-contextMenu-loadingContainer\",\n\t\"SboKmDrCTZng7t4EgNoM\": \"main-contextMenu-menu\",\n\t\"k4sYYpEpX2f7RMAPHv3F\": \"main-contextMenu-menu\",\n\t\"NbcaczStd8vD2rHWwaKv\": \"main-contextMenu-menu\",\n\t\"wlb3dYO07PZuYfmNfmkS\": \"main-contextMenu-menu\",\n\t\"LJej9EszIMJShPMMExpj\": \"main-contextMenu-menu\",\n\t\"re2d5HDzt6T4XBgqcBhi\": \"main-contextMenu-menuHeading\",\n\t\"qUeWph4VP9DwR4xOfabh\": \"main-contextMenu-menuHeading\",\n\t\"DuEPSADpSwCcO880xjUG\": \"main-contextMenu-menuItem\",\n\t\"GqvHlGax1jo6vO9D0wHH\": \"main-contextMenu-menuItem\",\n\t\"rQ6LXqVlEOGZdGIG0LgP\": \"main-contextMenu-menuItem\",\n\t\"jzMBaEByD6M9xRmS9mv8\": \"main-contextMenu-menuItem\",\n\t\"ZTmkuXOdPbjhHuLg5How\": \"main-contextMenu-menuItem\",\n\t\"wC9sIed7pfp47wZbmU6m\": \"main-contextMenu-menuItemButton\",\n\t\"SN9k988q2Seb_joCaEny\": \"main-contextMenu-menuItemButton\",\n\t\"mWj8N7D_OlsbDgtQx5GW\": \"main-contextMenu-menuItemButton\",\n\t\"niXChlbt7kxslMUdfwu9\": \"main-contextMenu-menuItemButton\",\n\t\"dx1wWcqtuxz4HubHAyh_\": \"main-contextMenu-menuItemButton\",\n\t\"PDPsYDh4ntfQE3B4duUI\": \"main-contextMenu-menuItemLabel\",\n\t\"ctAknuakI8idqf_S9tvT\": \"main-contextMenu-menuItemLabel\",\n\t\"qUnVdUHbBFoYmLhT0_OC\": \"main-contextMenu-menuItemLabel\",\n\t\"llTZj1tjDr5ZnIOkKdHv\": \"main-contextMenu-menuItemStatic\",\n\t\"Cjga8q3TFvtKCu9qfm27\": \"main-contextMenu-menuItemStatic\",\n\t\"T2BaFHODss7KUUqG8Ryq\": \"main-contextMenu-overlay\",\n\t\"_PqnQJddudWUtaIxOzo7\": \"main-contextMenu-searchIcon\",\n\t\"dgc81JRAlkNQTsZae3Bz\": \"main-contextMenu-searchIconContainer\",\n\t\"iGw72tLfCJI5bdpgf7JQ\": \"main-contextMenu-subMenuIcon\",\n\t\"IJYRnAk_0OE4UPQABQcl\": \"main-contextMenu-subMenuIcon\",\n\t\"D7Eob912u_NzU8SZkYPA\": \"main-contextMenu-subMenuIcon\",\n\t\"twYA62xkZMNWmd5FXvqi\": \"main-contextMenu-subMenuIcon\",\n\t\"abJqsjKClbniwiTCZ7bC\": \"main-contextMenu-subMenuLeading\",\n\t\"wtEUrk4Sxa5e3QZhvbrs\": \"main-contextMenu-subMenuLeading\",\n\t\"X8yW2lJbFCQfV5GjoRwL\": \"main-contextMenu-tippy\",\n\t\"nYdM55iHFByRTzJUmx9X\": \"main-contextMenu-tippy\",\n\t\"wRjmZh6e7KCL09qchtC9\": \"main-contextMenu-tippy\",\n\t\"mph1R_QkS44EPi4lrhxd\": \"main-contextMenu-tippyEnter\",\n\t\"sNOxi993vqYCWYgo_N3H\": \"main-contextMenu-tippyEnter\",\n\t\"v5IUMJNPJgol0273zQXD\": \"main-contextMenu-tippyEnterActive\",\n\t\"z_29i58eLFLK50jAs_4a\": \"main-contextMenu-tippyEnterActive\",\n\t\"bkFQH4uasL3pXqN9eDSi\": \"main-contextMenu-tippyWrapper\",\n\t\"ExGt4YQfmcwvVFGM7tpN\": \"main-contextMenu-trigger\",\n\t\"rVxzkDirgkuRPv5V1HYF\": \"main-coverSlotCollapsed-container\",\n\t\"GQ5_gIWzIqAfBdmQm8yJ\": \"main-coverSlotCollapsed-container\",\n\t\"cOaOhDavcy4wvE4llkwl\": \"main-coverSlotCollapsed-container\",\n\t\"qWcH8e2laY9sYOuCsOAx\": \"main-coverSlotCollapsed-expandButton\",\n\t\"_9sCL61nGvQFXv2u02jXw\": \"main-coverSlotCollapsed-expandButton\",\n\t\"DUONoWRlKBDq3Ob0DXda\": \"main-coverSlotCollapsed-expandButton\",\n\t\"IcyWfMS5VkeOhaI7OWIx\": \"main-coverSlotCollapsed-navAltContainer\",\n\t\"pE08KWp56_bcLi_DddD9\": \"main-coverSlotCollapsed-navAltContainer\",\n\t\"jtRqaoDIpIR6fEATUTyY\": \"main-coverSlotExpanded-container\",\n\t\"LROBF2WtGaVryVpVbSOu\": \"main-coverSlotExpanded-containerExpanding\",\n\t\"FegbnTtU6poHbemMzmBP\": \"main-coverSlotExpanded-enter\",\n\t\"i1SMAJ9KRyK_muq63Pmg\": \"main-coverSlotExpanded-enterActive\",\n\t\"Q4cc5RktWgz2H8_vDrIS\": \"main-coverSlotExpanded-exitActive\",\n\t\"Fih6l1HD6F3NRrdCEMFE\": \"main-coverSlotExpanded-expanding\",\n\t\"g6ZgzRfiHjsTLskeyI0J\": \"main-coverSlotExpandedCollapseButton-collapseButton\",\n\t\"IPVjkkhh06nan7aZK7Bx\": \"main-createPlaylistButton-button\",\n\t\"q3ABXYJT9JZIzXOOtVuO\": \"main-createPlaylistButton-createPlaylistIcon\",\n\t\"Bwc9jlVb7HWs8JJupnBB\": \"main-createPlaylistButton-icon\",\n\t\"J4xXuqyaJnnwS6s2p3ZB\": \"main-createPlaylistButton-text\",\n\t\"PrhIVExjBkmjHt6Ea4XE\": \"main-devicePicker-button\",\n\t\"tyZF5iwaJ6J5raHWkxwu\": \"main-devicePicker-connectBarVisible\",\n\t\"IbmaxRtjqCjqTBpFwCgw\": \"main-devicePicker-connected\",\n\t\"l79vgNZqvs1q9nw6Q8A2\": \"main-devicePicker-connecting\",\n\t\"E3EJEgTSJdjF1NrDf9GB\": \"main-devicePicker-connectingIcon\",\n\t\"INitzTSjokOMEJOc6P2H\": \"main-devicePicker-controlButton\",\n\t\"hwP4Oum2PB765sb8jigI\": \"main-devicePicker-devices\",\n\t\"h3qSlLeqACMUaASiKDHa\": \"main-devicePicker-devicesHeading\",\n\t\"zFqMGX3h5z2CO3f2uEiL\": \"main-devicePicker-devicesList\",\n\t\"MMjN8VsyKsAlLjFw4RMa\": \"main-devicePicker-devicesOtherNetworksHeading\",\n\t\"AXkwHpGa_BG7Dy4v7o2V\": \"main-devicePicker-header\",\n\t\"ppzUk3Yw4Opnu95vCliV\": \"main-devicePicker-header\",\n\t\"tm3lCLoFzk25Q_df5g5K\": \"main-devicePicker-heading\",\n\t\"Zb1Lbll48zpXP9k_0m1N\": \"main-devicePicker-heading\",\n\t\"pXrRjiuo3ZpGwIvDAGzJ\": \"main-devicePicker-headingAction\",\n\t\"gz7xPnsQVKVMnQY2KjJs\": \"main-devicePicker-headingConnected\",\n\t\"SzZayhxQEuTPMFgNrLOG\": \"main-devicePicker-headingContent\",\n\t\"fCe03n0XPP2ljLlWgfh3\": \"main-devicePicker-headingContent\",\n\t\"TJ5Bjp6vgnWVbh6mGN0n\": \"main-devicePicker-headingSubtitle\",\n\t\"fMNrKmRiR7PwVComoqfb\": \"main-devicePicker-headingSubtitle\",\n\t\"YY5a3DPS6akIYNqJdwn3\": \"main-devicePicker-headingTechIcon\",\n\t\"E9qsFEgJZJnARk6hOCsj\": \"main-devicePicker-headingTitle\",\n\t\"wC7XHKBOz7EiENs4anj4\": \"main-devicePicker-headingTitle\",\n\t\"WFRr38dFOxh75JyzSTj5\": \"main-devicePicker-indicator\",\n\t\"ntdp2T_przGKYzhwYSGz\": \"main-devicePicker-menuOpen\",\n\t\"LVp1auH4vtD3hvb1s4gl\": \"main-devicePicker-moreButton\",\n\t\"uWvwXlS0Da1bWsRX6KOw\": \"main-devicePicker-nowPlayingActiveIcon\",\n\t\"KdGUk56d2SlrvrUsFjB1\": \"main-devicePicker-nowPlayingActiveIcon\",\n\t\"pUkuSEO5HGdvTiujyI6H\": \"main-devicePicker-section\",\n\t\"mkQEqlUoJ9kghcMfT49m\": \"main-devicePicker-section\",\n\t\"IdxmFS96lyE7c5uiTnLM\": \"main-devicePicker-sectionHeading\",\n\t\"Ci8IvJAESoDM_7t8FZWy\": \"main-devicePicker-sectionHeading\",\n\t\"HVCCFeUiHVwZVv74p34a\": \"main-devicePicker-sectionWrapper\",\n\t\"bk509U3ZhZc9YBJAmoPB\": \"main-devicePicker-tooltip\",\n\t\"YIJxiTuPgMQav316cRqP\": \"main-devicePicker-tooltip\",\n\t\"b46WEWO1Sc_P4WK5RTg0\": \"main-devicePicker-tooltipArrow\",\n\t\"ItaYxdM8MiuHsa2VXuGQ\": \"main-devicePicker-tooltipContent\",\n\t\"CgzneMEIFUgv7Gxkf_pM\": \"main-devicePicker-tooltipContent\",\n\t\"YUyFyiI58gL8VuLdbOD6\": \"main-devicePicker-troubleshooting\",\n\t\"bZ9fezHRckzRB7RKhQYv\": \"main-devicePicker-troubleshooting\",\n\t\"QClIatTm05fvjVzODr8X\": \"main-devicePicker-troubleshootingItemIcon\",\n\t\"gq10jri_eDZTLB32XBkA\": \"main-devicePicker-troubleshootingItemIcon\",\n\t\"OTuSSciCS3NJqFG8OKX2\": \"main-devicePicker-troubleshootingItemSubtitle\",\n\t\"cxUSS5WmBfLzDUfriVLA\": \"main-devicePicker-troubleshootingItemSubtitle\",\n\t\"AN2rvWrkrs7UsnY12hL8\": \"main-devicePicker-troubleshootingList\",\n\t\"L6IYWy6qSZEiOh0pp4ZX\": \"main-devicePicker-troubleshootingList\",\n\t\"Fyc_tPyPKyRIT_59VZ2B\": \"main-downloadClient-actionContainer\",\n\t\"Foyk_HJx16yh22JYmQ56\": \"main-downloadClient-container\",\n\t\"UalNRoO1omHtEEniypS5\": \"main-downloadClient-container\",\n\t\"_w3sHVCUhYgvQar5WNHw\": \"main-dragAndDrop-dndImage\",\n\t\"vb8kSzIiZbfkwqWZROkW\": \"main-dragAndDrop-dndImageShelter\",\n\t\"zrvvPyoxE6wQNqnu0yWA\": \"main-dropDown-dropDown\",\n\t\"FQupgLGfMkp1dOYvUeuQ\": \"main-dropDown-dropDown\",\n\t\"jmu6DFPvhxRl0wSfmv2O\": \"main-dropDown-isSafari\",\n\t\"dmKa90mTDwgspMBRMHNX\": \"main-dropDown-isSafari\",\n\t\"T596E9OFZtarwLZV_Opk\": \"main-duplicateTrackModal-buttonContainer\",\n\t\"AdF5F5BxQXGeWkfceg9A\": \"main-duplicateTrackModal-container\",\n\t\"XBJ5gUPLDUdlCFkWV7PZ\": \"main-duplicateTrackModal-description\",\n\t\"YDfNb_CMrwg2Z6FeLyNu\": \"main-duplicateTrackModal-title\",\n\t\"MF2rLXp4d_JPNs2t0bbj\": \"main-editImage-buttonContainer\",\n\t\"CRPBj66L4XSUXfKxADb5\": \"main-editImage-buttonContainer\",\n\t\"jN7ZUHc7IxpwvWsjb4jo\": \"main-editImageButton-copy\",\n\t\"vU48ZWHmoYvFFaF3r7US\": \"main-editImageButton-copy\",\n\t\"w3w0DS8atwcgOQJAKAV2\": \"main-editImageButton-icon\",\n\t\"L6kTuOfrnQA9bTuOLnhR\": \"main-editImageButton-icon\",\n\t\"xfQXUkj6ThzTYbfF8ilt\": \"main-editImageButton-image\",\n\t\"OxzbfYatnoSAuGKOF1Up\": \"main-editImageButton-image\",\n\t\"Usk1cPR7qbn7RudRN3td\": \"main-editImageButton-overlay\",\n\t\"VvRwJyaExuSefaBWg8FJ\": \"main-editImageButton-overlay\",\n\t\"CdHBSRh3RhPwBNIBQtkD\": \"main-editImageButton-rounded\",\n\t\"PvesGiAqdV7dazP6Qulv\": \"main-embedWidgetGenerator-active\",\n\t\"M05dfNqaFoVZSopsDt0p\": \"main-embedWidgetGenerator-active\",\n\t\"oBoIIlKrwQjxXpvOiOa0\": \"main-embedWidgetGenerator-closeBtn\",\n\t\"Yk_RYwNJgyasJs5coavS\": \"main-embedWidgetGenerator-closeBtn\",\n\t\"U_nX_1rJoqQSWPJRE6zb\": \"main-embedWidgetGenerator-code\",\n\t\"BHz0zyI26ES05fSpuj26\": \"main-embedWidgetGenerator-code\",\n\t\"uUYNnjSt8m3EqVjsnHgh\": \"main-embedWidgetGenerator-container\",\n\t\"JvgoJtzDPOYDcX4dX4V7\": \"main-embedWidgetGenerator-container\",\n\t\"IJHNf0vxPSbPE1egoG4N\": \"main-embedWidgetGenerator-content\",\n\t\"sBqvmlzlMok_45AcZJ0k\": \"main-embedWidgetGenerator-content\",\n\t\"dbKIqeJaR5jYCnOeeDJt\": \"main-embedWidgetGenerator-contentCode\",\n\t\"aOFEOf2KdtjWKoECSAtZ\": \"main-embedWidgetGenerator-contentCode\",\n\t\"VaChXV5vRmHB24UihCAG\": \"main-embedWidgetGenerator-contentFooter\",\n\t\"db7YZ348Hp38w1pBGvbo\": \"main-embedWidgetGenerator-contentFooter\",\n\t\"zwGMyD7hN0H1Xx8hV5MH\": \"main-embedWidgetGenerator-contentHeader\",\n\t\"ePALfjiwnEAylS2dC2Vi\": \"main-embedWidgetGenerator-contentHeader\",\n\t\"NYCZnquuE8_PvM2bxZ3r\": \"main-embedWidgetGenerator-contentIframe\",\n\t\"DCmP4sRAZe1WedTXGEoQ\": \"main-embedWidgetGenerator-contentIframe\",\n\t\"gIsqpLXuGzGw3zRTolrW\": \"main-embedWidgetGenerator-copyBtn\",\n\t\"cNyP6OMku0Y1k9V6I6YA\": \"main-embedWidgetGenerator-copyBtn\",\n\t\"MnqXew54JWlqw2TG7vDK\": \"main-embedWidgetGenerator-copyWrapper\",\n\t\"xJroturP3VLDmhMVmH2Q\": \"main-embedWidgetGenerator-copyWrapper\",\n\t\"LeDataq3AAGozahFmBJL\": \"main-embedWidgetGenerator-crossSep\",\n\t\"l5aQDGKG1Ri23cOttct6\": \"main-embedWidgetGenerator-crossSep\",\n\t\"XPFcOWyZPRej4gH_M5XQ\": \"main-embedWidgetGenerator-darkControl\",\n\t\"ASWMZEQeEdTpnEB1Fe9c\": \"main-embedWidgetGenerator-darkControl\",\n\t\"tWZ0D98BTxSAFIgp4_tP\": \"main-embedWidgetGenerator-dimensionField\",\n\t\"Ojyzxzemrirh385czlR6\": \"main-embedWidgetGenerator-dimensionField\",\n\t\"TSQvyxomq15adJzfCj3j\": \"main-embedWidgetGenerator-dimensionLabel\",\n\t\"Xw2qZXdaTtQmBi1C3EZW\": \"main-embedWidgetGenerator-dimensionLabel\",\n\t\"dNNjNzGLV8tjhIuats54\": \"main-embedWidgetGenerator-dimensionsContainer\",\n\t\"E4pMVn86RUX_bli2MFc8\": \"main-embedWidgetGenerator-dimensionsContainer\",\n\t\"bOIRpQiHUAEfp8ntStTo\": \"main-embedWidgetGenerator-header\",\n\t\"a7vBGhnLeEXqDyzDtLQm\": \"main-embedWidgetGenerator-header\",\n\t\"UrcPMgHLfxfJesFPrNvJ\": \"main-embedWidgetGenerator-loadingIndicator\",\n\t\"I95R5oKvjPlRocXK04uq\": \"main-embedWidgetGenerator-loadingIndicator\",\n\t\"nT444OUxO6Vammm8GUVl\": \"main-embedWidgetGenerator-startAt\",\n\t\"SfLe8NXeES5ls02VNodp\": \"main-embedWidgetGenerator-startAt\",\n\t\"wVDmvGlxMo4VisD89XUI\": \"main-embedWidgetGenerator-terms\",\n\t\"RONPdb2SVzKH9L0MI7m9\": \"main-embedWidgetGenerator-terms\",\n\t\"mKjr_3b27jFzEoJBJYQw\": \"main-embedWidgetGenerator-theme\",\n\t\"mA2povcLaNEMTwFkbkRA\": \"main-embedWidgetGenerator-theme\",\n\t\"gAlrxXSfi5DpMcVMiUsz\": \"main-embedWidgetGenerator-themeDescription\",\n\t\"dwoJTbHyEYJwtW9Sv_sL\": \"main-embedWidgetGenerator-themeDescription\",\n\t\"mBGUavHPMlD5mfAmiy5g\": \"main-embedWidgetGenerator-themeRadio\",\n\t\"aNmXQxrSRjmN6iz25rzV\": \"main-embedWidgetGenerator-themeRadio\",\n\t\"bps2gHcEE9dOV6djVLWF\": \"main-embedWidgetGenerator-timestampInput\",\n\t\"sd7sAILjjhbR8VcoTtD1\": \"main-embedWidgetGenerator-timestampInput\",\n\t\"h7qbIvm2yIiZVYqONyFG\": \"main-embedWidgetGenerator-tooltip\",\n\t\"fV9zaLzqxhNrDHsShUyv\": \"main-embedWidgetGenerator-tooltip\",\n\t\"xwNumE3szip6EhU74j3f\": \"main-embedWidgetGenerator-tooltipInitiator\",\n\t\"_zl1TqB0dymzANa9Mg38\": \"main-embedWidgetGenerator-tooltipInitiator\",\n\t\"ObwDQms6Cu8h_8FMWzAT\": \"main-embedWidgetGenerator-transControl\",\n\t\"itbtoqlEj6jmbrhNsVgo\": \"main-embedWidgetGenerator-transControl\",\n\t\"gB6AcMixPEmdr96SUSBM\": \"main-embedWidgetGenerator-visible\",\n\t\"_7n3LwjOANBxLFcGULJMg\": \"main-embedWidgetGenerator-visible\",\n\t\"P4iG24p5ttZDxkQJsiDb\": \"main-embedWidgetGenerator-widthField\",\n\t\"sP9LYlDy3KkYglIvABtL\": \"main-embedWidgetGenerator-widthField\",\n\t\"MyW8tKEekj9lKQsviDdP\": \"main-entityHeader-background\",\n\t\"i_kMOBXfnweAkv8s97Yc\": \"main-entityHeader-background\",\n\t\"wozXSN04ZBOkhrsuY5i2\": \"main-entityHeader-background\",\n\t\"gHImFiUWOg93pvTefeAD\": \"main-entityHeader-backgroundColor\",\n\t\"PeLrpasyfBW8ql_bmoAi\": \"main-entityHeader-backgroundColor\",\n\t\"XVz4BMGP5zAEE5p90mYK\": \"main-entityHeader-backgroundColor\",\n\t\"NIEO4GCY9P49NrtTWlhP\": \"main-entityHeader-backgroundColor\",\n\t\"LzVINwqiLdMt_bgS5psf\": \"main-entityHeader-backgroundColor\",\n\t\"H0vWBc23fJOetym6NudG\": \"main-entityHeader-bold\",\n\t\"ta4ePOlmGXjBYPTd90lh\": \"main-entityHeader-circle\",\n\t\"NXiYChVp4Oydfxd7rT5r\": \"main-entityHeader-container\",\n\t\"tmHIlrxw7_8S0lWnceeq\": \"main-entityHeader-container\",\n\t\"kuSGKO1BuKZ3fgas7_T7\": \"main-entityHeader-creatorButton\",\n\t\"NO_VO3MRVl9z3z56d8Lg\": \"main-entityHeader-creatorWrapper\",\n\t\"bMmO2GCdsRzxLgVMSGvM\": \"main-entityHeader-creatorWrapper\",\n\t\"Ydwa1P5GkCggtLlSvphs\": \"main-entityHeader-detailsText\",\n\t\"n4hTP7ZeAOT_UQEkRUR7\": \"main-entityHeader-divider\",\n\t\"k2I8B0MzXkAJ6_s8okM7\": \"main-entityHeader-gradient\",\n\t\"sv5suqIPUwjgUF_BzM41\": \"main-entityHeader-gradient\",\n\t\"XUwMufC5NCgIyRMyGXLD\": \"main-entityHeader-gradient\",\n\t\"PUIUCdIR_h05BC2EDgIP\": \"main-entityHeader-gray\",\n\t\"RP2rRchy4i8TIp1CTmb7\": \"main-entityHeader-headerText\",\n\t\"c55UACltdzzDDQVfoF18\": \"main-entityHeader-headerText\",\n\t\"CmkY1Ag0tJDfnFXbGgju\": \"main-entityHeader-image\",\n\t\"bFtVZZnZgTWjjyzkPA5k\": \"main-entityHeader-image\",\n\t\"_gLjHpwOxHFwo5nLM8hb\": \"main-entityHeader-imageContainer\",\n\t\"D0QehabsepiTU_FhDZOQ\": \"main-entityHeader-imageContainer\",\n\t\"GoU8CT9Vm_TP_LyYJTsf\": \"main-entityHeader-imageContainerClickable\",\n\t\"_osiFNXU9Cy1X0CYaU9Z\": \"main-entityHeader-imageContainerNew\",\n\t\"ylr6LvLf5L8yLiqErDES\": \"main-entityHeader-imageContainerNew\",\n\t\"MclJZ2TMkhjdlqqQfmQd\": \"main-entityHeader-imagePlaceholder\",\n\t\"C7eyib8lynZrycU2Eh_A\": \"main-entityHeader-large\",\n\t\"k9LEjzjnGgVaEm3BvhAb\": \"main-entityHeader-largeHeader\",\n\t\"Jnt9_XezZCMkZmtgBtlL\": \"main-entityHeader-medium\",\n\t\"bQy_F9QVENlCAL8Qan9_\": \"main-entityHeader-mermaidGradientOverlay\",\n\t\"Fb61sprjhh75aOITDnsJ\": \"main-entityHeader-metaData\",\n\t\"blfR_YJUsKUvdgTejBSb\": \"main-entityHeader-metaData\",\n\t\"JWDnag2Mepdf9QE0cNbg\": \"main-entityHeader-metaData\",\n\t\"Yc6ftz7mCqbsTN4ha_ke\": \"main-entityHeader-metaDataAuthor\",\n\t\"RANLXG3qKB61Bh33I0r2\": \"main-entityHeader-metaDataText\",\n\t\"NULzZTkd4w0TSVS4HKux\": \"main-entityHeader-metaDataText\",\n\t\"w1TBi3o5CTM7zW1EB3Bm\": \"main-entityHeader-metaDataTextSubdued\",\n\t\"gRs15KFAiBRH4FFbVvVr\": \"main-entityHeader-metaDataTextSubdued\",\n\t\"lD5bMttyrRNzsKch6ysa\": \"main-entityHeader-newEntityHeaders\",\n\t\"ByDYHUfzUKVgFwT5bTxp\": \"main-entityHeader-newEntriesIndicator\",\n\t\"RMDSGDMFrx8eXHpFphqG\": \"main-entityHeader-nonWrapped\",\n\t\"xYgjMpAjE5XT05aRIezb\": \"main-entityHeader-overlay\",\n\t\"I0bVSxvqA3rm5HvciMap\": \"main-entityHeader-overlay\",\n\t\"yhlH4Dsjqw56Z58EOwvQ\": \"main-entityHeader-overlay\",\n\t\"dhq75ObRGjfBoBlz6clW\": \"main-entityHeader-overlay\",\n\t\"ehHB7Xk2_FPwYofqZ9k2\": \"main-entityHeader-overlay\",\n\t\"YW4dYEf5ZuLzMfSjsqZk\": \"main-entityHeader-piled\",\n\t\"lp9Tfm4rsM9_pfbIE0zd\": \"main-entityHeader-pretitle\",\n\t\"K4l4RICNZv9cxx9ag0u5\": \"main-entityHeader-pretitle\",\n\t\"YbDIZ84mS7tzHr1tgWE9\": \"main-entityHeader-roundedCorners\",\n\t\"_EShSNaBK1wUIaZQFJJQ\": \"main-entityHeader-shadow\",\n\t\"VPnrctjNWVzCtyD7DZAG\": \"main-entityHeader-shadow\",\n\t\"D5X2O0j5dhTZJIkgH8mz\": \"main-entityHeader-small\",\n\t\"U1ypKorrS1qiWD1uQpAD\": \"main-entityHeader-smallHeader\",\n\t\"zjsGbrMpvbdA1HJ4rpfi\": \"main-entityHeader-smallMadeForIcon\",\n\t\"gSx70PISJg6PSRafbOXd\": \"main-entityHeader-subtitle\",\n\t\"YxJ3zwH0R8K8njVQgMcw\": \"main-entityHeader-subtitleButton\",\n\t\"RmWKJG2G0fTrx11zKv_j\": \"main-entityHeader-theyFollowUs\",\n\t\"rEN7ncpaUeSGL9z0NGQR\": \"main-entityHeader-title\",\n\t\"__NC_butOiOksXo2E3M1\": \"main-entityHeader-title\",\n\t\"wCkmVGEQh3je1hrbsFBY\": \"main-entityHeader-titleButton\",\n\t\"vamOGPv1eDxaQS4qflcg\": \"main-entityHeader-titleButton\",\n\t\"o4KVKZmeHsoRZ2Ltl078\": \"main-entityHeader-titleInner\",\n\t\"vdZMPj4FaYLWBoyRTzBQ\": \"main-entityHeader-titleInner\",\n\t\"HcA9WjbLc4x02X8Ty0uO\": \"main-entityHeader-topbarContent\",\n\t\"URymDGVda51vMGGEWsH1\": \"main-entityHeader-topbarContent\",\n\t\"lro6AjUrZFH6zxjmOGg0\": \"main-entityHeader-topbarContentFadeIn\",\n\t\"ITu7QAFWEP4R0HMkDOMU\": \"main-entityHeader-topbarContentFadeIn\",\n\t\"G7zO58ORUHxcUw0sXktM\": \"main-entityHeader-topbarTitle\",\n\t\"BOjeWsq7rAtXYUaR86bq\": \"main-entityHeader-topbarTitle\",\n\t\"E0MlERsQ_zvY3BX7ZzPp\": \"main-entityHeader-uppercase\",\n\t\"L29j6que7xOiNSH_EOvQ\": \"main-entityHeader-wavesBackground\",\n\t\"XPjEhsPyuOvMZ9NsDrxT\": \"main-entityHeader-withBackgroundImage\",\n\t\"DFuKwT5bvhKZoYr2gfZe\": \"main-entityHeader-withBackgroundImage\",\n\t\"KAZD28usA1vPz5GVpm63\": \"main-genericButton-button\",\n\t\"pJ7RQa2Lqdi9JOvfKGAA\": \"main-genericButton-button\",\n\t\"RK45o6dbvO1mb0wQtSwq\": \"main-genericButton-buttonActive\",\n\t\"eFrQ8hr8h9gs3tIFTSWV\": \"main-genericButton-buttonActive\",\n\t\"EHxL6K_6WWDlTCZP6x5w\": \"main-genericButton-buttonActiveDot\",\n\t\"WOIKebyj47byTnTaucoA\": \"main-genericButton-buttonActiveDot\",\n\t\"OomFKn3bsxs5JfNUoWhz\": \"main-globalNav-buddyFeed\",\n\t\"VizXsWMIuNfKGN5pMyox\": \"main-globalNav-historyButtons\",\n\t\"K1Ve0b6y28X7myMURsKS\": \"main-globalNav-historyButtons\",\n\t\"KkJlQWSJM6Cu2GJJSBQ7\": \"main-globalNav-historyButtons\",\n\t\"Z6t_8rA6LOBrX3huqRJG\": \"main-globalNav-historyButtonsContainer\",\n\t\"pIM9jg__39NIpOvXG89b\": \"main-globalNav-historyButtonsContainer\",\n\t\"VphhNp8Q7R2U552LryhP\": \"main-globalNav-historyButtonsContainer\",\n\t\"rBX1EWVZ2EaPwP4y1Gkd\": \"main-globalNav-icon\",\n\t\"jdlOKroADlFeZZQeTdp8\": \"main-globalNav-link-icon\",\n\t\"dIfr5oVr5kotAi0HsIsW\": \"main-globalNav-link-icon\",\n\t\"bWBqSiXEceAj1SnzqusU\": \"main-globalNav-navLink\",\n\t\"obd_bH64Snp1npdw29XM\": \"main-globalNav-navLink\",\n\t\"YEAFPNm87XbzS4sF5dDe\": \"main-globalNav-navLink\",\n\t\"voA9ZoTTlPFyLpckNw3S\": \"main-globalNav-navLinkActive\",\n\t\"ETjtwGvAB4lRVqSzm8nA\": \"main-globalNav-navLinkActive\",\n\t\"AonZ39aVKATRTjY28Uww\": \"main-globalNav-navLinkActive\",\n\t\"Ufz621LN174DTRDis7EY\": \"main-globalNav-navLinkActive\",\n\t\"QrpHSphgBSqzODEHqr_t\": \"main-globalNav-searchContainer\",\n\t\"lj0eGI6WEtfxFX7irC03\": \"main-globalNav-searchContainer\",\n\t\"v8JHoFMumOgbCn8vsTvC\": \"main-globalNav-searchContainer\",\n\t\"fksI89zEXwqKWm1O6sJm\": \"main-globalNav-searchInputContainer\",\n\t\"W9VXOkC43GP_7ULClgxQ\": \"main-globalNav-searchInputContainer\",\n\t\"b7r2WRiu5f9Q99qmyreh\": \"main-globalNav-searchInputContainer\",\n\t\"RpMCAf8TjF6HpQSI7hdx\": \"main-globalNav-searchInputContainer\",\n\t\"PvsV2JgJRDME1vDn6IJL\": \"main-globalNav-searchInputSection\",\n\t\"tDFP1X98EgqQIPaumxRt\": \"main-globalNav-searchInputSection\",\n\t\"_b3hhmbWtOY8_1M1mM1H\": \"main-globalNav-searchInputSection\",\n\t\"NykkfCmZVlyRYNAqZg35\": \"main-globalNav-searchInputSection\",\n\t\"W02pQCvfy5Bin7z4EAzo\": \"main-globalNav-searchSection\",\n\t\"gj5VcIUC9oD2p4BsxzGE\": \"main-globalNav-searchSection\",\n\t\"jGghIqFVK6VrBUP9FLIq\": \"main-globalNav-searchSection\",\n\t\"soGhxDX6VjS7dBxX9Hbd\": \"main-gridContainer-fixedWidth\",\n\t\"iKwGKEfAfW7Rkx2_Ba4E\": \"main-gridContainer-gridContainer\",\n\t\"dZZDxz44v5EOD33wbCZ3\": \"main-gridContainer-gridContainer\",\n\t\"PmW2UCL9vlTcNPD7J0KJ\": \"main-gridContainer-uniformRowHeight\",\n\t\"HkbHLcqgUfXruL5xVi28\": \"main-heroCard-card\",\n\t\"_gB1lxCfXeR8_Wze5Cx9\": \"main-heroCard-cardLink\",\n\t\"sm7ZnbOO1Zfg9cupYgPN\": \"main-heroCard-cardMetadata\",\n\t\"kVHQenQh3yKEk2n7Ere4\": \"main-heroCard-draggable\",\n\t\"NkDkQMd75JY5xes9xFVe\": \"main-heroCard-isDownloadable\",\n\t\"liYe8rZ0FEQBy8j8XGJH\": \"main-heroCard-isPlaying\",\n\t\"pgwIORyBdf4nbb4G5_Jx\": \"main-heroCard-PlayButtonContainer\",\n\t\"I3EivnXTjYMpSbPUiYEg\": \"main-home-content\",\n\t\"ZLSAuA1tn0bSdQRwhhj6\": \"main-home-content\",\n\t\"Le0q6vXGEvilJEjOqgF9\": \"main-home-content\",\n\t\"YDYIuDcqNWY3gq9hxh5P\": \"main-home-content\",\n\t\"zbU90jX5VWUhVlpUda7B\": \"main-home-filterChipsContainer\",\n\t\"cj6vRk3nFAi80HSVqX91\": \"main-home-filterChipsContainer\",\n\t\"c8Z2jJUocJTdV9g741cp\": \"main-home-filterChipsContainer\",\n\t\"rX_OmqCngvY5ZCoYBZgb\": \"main-home-filterChipsSection\",\n\t\"hIFR8WDm_54EEIa1gwpC\": \"main-home-filterChipsSection\",\n\t\"aBTcK0jHBextE7fGnKiw\": \"main-home-filterChipsSection\",\n\t\"uIJTvxFOg2izOY7aRRiU\": \"main-home-home\",\n\t\"HsbczDqu9qjcYr7EIdHR\": \"main-home-homeHeader\",\n\t\"S4OmZ_IZexmZ5dasPqW5\": \"main-home-homeHeader\",\n\t\"HnVkTECZ2a98QALFTkdq\": \"main-home-homeHeader\",\n\t\"DQRst2WAECYq2xsrsPRA\": \"main-home-isOffline\",\n\t\"QbD9zl7z3AhEQu_TGmo8\": \"main-home-subfeedSection\",\n\t\"_kVOt2H6WxXzURx2FRLM\": \"main-home-withAds\",\n\t\"LBM25IAoFtd0wh7k3EGM\": \"main-image-image\",\n\t\"mMx2LUixlnN_Fu45JpFB\": \"main-image-image\",\n\t\"Yn2Ei5QZn19gria6LjZj\": \"main-image-loaded\",\n\t\"PgTMmU2Gn7AESFMYhw4i\": \"main-image-loaded\",\n\t\"yOKoknIYYzAE90pe7_SE\": \"main-image-loading\",\n\t\"wcftliF4QjZKB1CYgEON\": \"main-imagePicker-fileInput\",\n\t\"IgNI7rYsyjJ5_Xtpap4a\": \"main-imagePicker-image\",\n\t\"IuU_JLhFTfKPXfDkmAaF\": \"main-keyboardShortcutsHelpModal-closeBtn\",\n\t\"YyxAoeTuu0BHU1OcahFK\": \"main-keyboardShortcutsHelpModal-container\",\n\t\"EhyK_jJzB2PcWXd5lg24\": \"main-keyboardShortcutsHelpModal-container\",\n\t\"e4ETsc5zxjzyF9nyb4LI\": \"main-keyboardShortcutsHelpModal-header\",\n\t\"hykQHtPI6EeFREwqRrOR\": \"main-keyboardShortcutsHelpModal-key\",\n\t\"ARw2f2PkF29n9Ek_eWu3\": \"main-keyboardShortcutsHelpModal-sectionHeading\",\n\t\"umavpIt6VOGqirdlUYWs\": \"main-keyboardShortcutsHelpModal-sectionItem\",\n\t\"dYBZmh_ZIyvBZfaoducd\": \"main-keyboardShortcutsHelpModal-sectionItemName\",\n\t\"KDlcc1SFTcA90eMUcn5P\": \"main-keyboardShortcutsHelpModal-sections\",\n\t\"cyXplMovoowBozEe4r2x\": \"main-keyboardShortcutsHelpModal-sectionsContainer\",\n\t\"X871RxPwx9V0MqpQdMom\": \"main-leaderboardComponent-container\",\n\t\"Nd_DeCpszONzyaLe5Wd1\": \"main-likedSongsButton-likedSongsIcon\",\n\t\"BuzoTjBZd1UqCn6DmFJr\": \"main-loadingIndicator-circle\",\n\t\"HKamyJi9H31s99erfVyG\": \"main-loadingIndicator-loadingIcon\",\n\t\"jM1dnq2_qjViaXxa6WD7\": \"main-loadingIndicator-loadingIcon\",\n\t\"K7fGF95OD9aI3zdYnFXg\": \"main-loadingPage-container\",\n\t\"AcuplATLhi6LNeu6_PK7\": \"main-loadingPage-container\",\n\t\"y7xcnM6yyOOrMwI77d5t\": \"main-lyricsCinema-container\",\n\t\"TITRkcJffQbL60GWevgh\": \"main-lyricsCinema-content\",\n\t\"xnPS9Fa6efctzBjM05O4\": \"main-lyricsCinema-controls\",\n\t\"AptbKyUcObu7QQ1sxqgb\": \"main-lyricsCinema-lyricsCinemaVisible\",\n\t\"YtsqA6txqmCqkKq0G2Ta\": \"main-lyricsCinema-nonDisplayedArea\",\n\t\"T0anrkk_QA4IAQL29get\": \"main-moreButton-button\",\n\t\"NyIynkmMpZXSoaE3XGhA\": \"main-navBar-banner\",\n\t\"WvLkmOVB2R2vzI2ibR_r\": \"main-navBar-downloadItem\",\n\t\"RSg3qFREWrqWCuUvDpJR\": \"main-navBar-entryPoints\",\n\t\"WJsKJXEbycxxq8OcGHM1\": \"main-navBar-logo\",\n\t\"sqKERfoKl4KwrtHqcKOd\": \"main-navBar-mainNav\",\n\t\"lYpiKR_qEjl1jGGyEvsA\": \"main-navBar-mainNav\",\n\t\"F2o99ns3FQFoDThE7QiV\": \"main-navBar-mainNav\",\n\t\"tUwyjggD2n5KvEtP5z1B\": \"main-navBar-navBar\",\n\t\"eNs6P3JYpf2LScgTDHc6\": \"main-navBar-navBarItem\",\n\t\"b2KVTiBUcXV1kT0OjL2p\": \"main-navBar-navBarItemDropTarget\",\n\t\"ATUzFKub89lzvkmvhpyE\": \"main-navBar-navBarLink\",\n\t\"moDRd9td0KtitPDzR7OJ\": \"main-navBar-navBarLinkActive\",\n\t\"GKnnhbExo0U9l7Jz2rdc\": \"main-navBar-premiumLink\",\n\t\"uhxXhw9alI7KR1YTc904\": \"main-navBar-premiumNavItem\",\n\t\"IebnAuNOhIG5mDVNJQ5M\": \"main-noConnection-isError\",\n\t\"N3juGUCH1EhEzmffNHAp\": \"main-noConnection-isNotice\",\n\t\"w3PliL6VjTaj2VfscF_k\": \"main-notificationBubble-closeIcon\",\n\t\"ZKFK00olAYy6LtYMjEIa\": \"main-notificationBubble-enter\",\n\t\"QlivAoYbLCn5nS3zU331\": \"main-notificationBubble-enterActive\",\n\t\"o_GEOPl4MEZXycGnTN69\": \"main-notificationBubble-exit\",\n\t\"oJET9u4Y7Vz69Mpp5syC\": \"main-notificationBubble-exitActive\",\n\t\"w_XZqc9pSOOjMMBej0c9\": \"main-notificationBubble-horizontal\",\n\t\"dvZM2BeYewZHdINeWuh6\": \"main-notificationBubble-isClickable\",\n\t\"_cDysv1Z9Ihw848shb92\": \"main-notificationBubble-isCloseable\",\n\t\"sgWxJyCSuqvdP5VZhqts\": \"main-notificationBubble-isError\",\n\t\"hmqCvVdVEXlW52i3efqa\": \"main-notificationBubble-isNotice\",\n\t\"vQNZsbpzoUFSW5fsFOAw\": \"main-notificationBubble-NotificationBubble\",\n\t\"mtmSGKkBYNwbd49V_8fS\": \"main-notificationBubble-withPointer\",\n\t\"zrZgCe7tURBRdKkFGc7S\": \"main-notificationBubble-withSidePointer\",\n\t\"a3nLBllaudGWnYzNTND_\": \"main-notificationBubble-withTopLeftPointer\",\n\t\"_XeODCkWznZi5csbdPAe\": \"main-notificationBubble-withTopRightPointer\",\n\t\"AOaoydTb5lrGytHbTAAy\": \"main-notificationBubbleContainer-NotificationBubbleContainer\",\n\t\"wh7q2LxxjhyXLJvxRQGG\": \"main-nowPlayingBar-buddyFeedIcon\",\n\t\"E526E3G50lCRjDpGVG5B\": \"main-nowPlayingBar-center\",\n\t\"P4eSEARM2h24PZxMHz1T\": \"main-nowPlayingBar-center\",\n\t\"sVv2OQORCQ4kf6iKfUTF\": \"main-nowPlayingBar-center\",\n\t\"fFvsrUhS_NiwbMFmj0fB\": \"main-nowPlayingBar-container\",\n\t\"GD2gbRtcs5dOjMGAM_Y4\": \"main-nowPlayingBar-container\",\n\t\"yglmI5m3fCc8baD1Kwdw\": \"main-nowPlayingBar-container\",\n\t\"RtrMo_s0acvzbSRLovVW\": \"main-nowPlayingBar-enter\",\n\t\"D4el1GTrNd7l_TFyRGO8\": \"main-nowPlayingBar-enterActive\",\n\t\"HOZJyu9UCJodOQSVvduV\": \"main-nowPlayingBar-enterDone\",\n\t\"mwpJrmCgLlVkJVtWjlI1\": \"main-nowPlayingBar-extraControls\",\n\t\"NClDR4CG_J8nuqy2uGn9\": \"main-nowPlayingBar-extraControls\",\n\t\"tT6x7wFZmjldiCeh6HzO\": \"main-nowPlayingBar-isAnonymous\",\n\t\"KkmXuF5h8DmzQUwGhT2u\": \"main-nowPlayingBar-left\",\n\t\"OgkbKIVYE_mrNpYESylB\": \"main-nowPlayingBar-left\",\n\t\"snFK6_ei0caqvFI6As9Q\": \"main-nowPlayingBar-left\",\n\t\"Xmv2oAnTB85QE4sqbK00\": \"main-nowPlayingBar-lyricsButton\",\n\t\"OB4Vm26X_3tYkgqkKrDm\": \"main-nowPlayingBar-lyricsButton\",\n\t\"DLwH4stkW06ZbHFstpq0\": \"main-nowPlayingBar-nowPlayingBar\",\n\t\"OCY4jHBlCVZEyGvtSv0J\": \"main-nowPlayingBar-nowPlayingBar\",\n\t\"udArIAqnfUQPQew2VAns\": \"main-nowPlayingBar-nowPlayingBar\",\n\t\"Y6soMMBElF7EQDbJv8Xb\": \"main-nowPlayingBar-right\",\n\t\"jOKLc29vP0Bz1K0TsDtX\": \"main-nowPlayingBar-right\",\n\t\"pLifNBuHRY8cZkZyEqwL\": \"main-nowPlayingBar-right\",\n\t\"uVRRxsH6RKj3Dzhl40Ok\": \"main-nowPlayingBar-topButton\",\n\t\"ExuDUBJ7bk8vT6INnm9F\": \"main-nowPlayingBar-volumeBar\",\n\t\"niz7IVQi5Id4arbkuPmM\": \"main-nowPlayingBar-volumeBar\",\n\t\"U3kNTAyv7lhF9nBuwgB6\": \"main-nowPlayingView-aboutArtist\",\n\t\"muTn937T_T9l0xqjlN8A\": \"main-nowPlayingView-aboutArtistBio\",\n\t\"Tk7SUvI_ULiUuC5gZsIx\": \"main-nowPlayingView-aboutArtistButton\",\n\t\"ldx08BCI74rTPhgD3vbj\": \"main-nowPlayingView-aboutArtistContent\",\n\t\"HISuyqmMLx0amzWHxgN1\": \"main-nowPlayingView-aboutArtistHasImage\",\n\t\"RJvcrFChbhxGRIi8mBXJ\": \"main-nowPlayingView-aboutArtistPlaceholderWrapper\",\n\t\"DjnRJuC2FcNrQ6Q6DerZ\": \"main-nowPlayingView-aboutArtistTextContent\",\n\t\"vbsB4OQJkFHLU8SbSGzS\": \"main-nowPlayingView-aboutArtistV2\",\n\t\"jLPxNlznfpZHUtITCFnb\": \"main-nowPlayingView-aboutArtistV2Avatar\",\n\t\"r9m6lHy7RyIPDzW1Youe\": \"main-nowPlayingView-aboutArtistV2Bio\",\n\t\"hd6a3g_3QyF8MFL0wWs1\": \"main-nowPlayingView-aboutArtistV2Button\",\n\t\"kVP43jHrJeS7afn8mOgX\": \"main-nowPlayingView-aboutArtistV2FollowButton\",\n\t\"z9CDQr2gnyXDtcc1uF05\": \"main-nowPlayingView-aboutArtistV2HasImage\",\n\t\"ouorHKa6NI5cm666H3tp\": \"main-nowPlayingView-aboutArtistV2Image\",\n\t\"GTmlByXpJj7V6AwVq0Vk\": \"main-nowPlayingView-aboutArtistV2ImageContainer\",\n\t\"iWpZp7Ab_9h7s_U1SsLN\": \"main-nowPlayingView-aboutArtistV2Listeners\",\n\t\"zhQX2DOI2muMo8EKsZ6h\": \"main-nowPlayingView-aboutArtistV2ListenersCount\",\n\t\"COJ84QbXPrd4jkO1HU2N\": \"main-nowPlayingView-aboutArtistV2Name\",\n\t\"yIPdY6L6pcwR4L5Xf0vY\": \"main-nowPlayingView-aboutArtistV2PlaceholderWrapper\",\n\t\"QkOkUShDYWFx5Cz40Bcn\": \"main-nowPlayingView-aboutArtistV2TextContent\",\n\t\"vkS_Ks0svKls4w2s2ppT\": \"main-nowPlayingView-aboutArtistV2Title\",\n\t\"IgTMXVbZtqtZwu3GZASd\": \"main-nowPlayingView-artistOnTour\",\n\t\"uvIvZ4XqfEFs88BAPaI8\": \"main-nowPlayingView-artistOnTourItem\",\n\t\"svHFeMC3Ef_TpSdRyvsM\": \"main-nowPlayingView-artistOnTourShowAll\",\n\t\"QIuMX9iPlMiflBPUkrEQ\": \"main-nowPlayingView-container\",\n\t\"jtqtOeRP46XAlHWx4C0D\": \"main-nowPlayingView-content\",\n\t\"aaFQbW0j0N40v_siz0kX\": \"main-nowPlayingView-contextItemInfo\",\n\t\"UUydeXMsXVZofB0YAOgm\": \"main-nowPlayingView-contextItemInfo\",\n\t\"j9I5h3Z4o0fKNgI1fIjb\": \"main-nowPlayingView-coverArt\",\n\t\"T5w6KXWFZ5aBsuquOADG\": \"main-nowPlayingView-coverArt\",\n\t\"zL6hQR4mukVUUQaa_7K1\": \"main-nowPlayingView-coverArtContainer\",\n\t\"pRIQxez4Q9UdpQsmrwGB\": \"main-nowPlayingView-coverArtContainer\",\n\t\"l2PpoXJouAgqFCuNT3iB\": \"main-nowPlayingView-credits\",\n\t\"G6WmxixPKmCYMNxmUNPT\": \"main-nowPlayingView-credits\",\n\t\"g5zF2gHZOarew6ApvZB6\": \"main-nowPlayingView-creditsGroup\",\n\t\"kUyRPckYBgHDaJp8bmXi\": \"main-nowPlayingView-creditsHeader\",\n\t\"bBldZtWu4QtzmrTfHOKm\": \"main-nowPlayingView-creditsShowAll\",\n\t\"PqjIyA05rhDaDg2S1qIQ\": \"main-nowPlayingView-creditsSource\",\n\t\"MPBLLykSgRJIlLSbQVgy\": \"main-nowPlayingView-gradient\",\n\t\"SfAYznqZyNk_AvvxIkUx\": \"main-nowPlayingView-header\",\n\t\"hzUuLPdH48AzgQun5NYQ\": \"main-nowPlayingView-lyricsContent\",\n\t\"KzMnBC9eFK8cAfcFTg9b\": \"main-nowPlayingView-lyricsControls\",\n\t\"I2WIloMMjsBeMaIS8H3v\": \"main-nowPlayingView-lyricsGradient\",\n\t\"N9Xjnxz8vGgWwbEBE5g7\": \"main-nowPlayingView-lyricsTitle\",\n\t\"wpJvLvrrnyP0_C7hLkqg\": \"main-nowPlayingView-merch\",\n\t\"n4_WcnoVeg2SeDJPWnKK\": \"main-nowPlayingView-nextInQueue\",\n\t\"cIUedsmg_cTnTxvOYTKR\": \"main-nowPlayingView-nowPlayingGrid\",\n\t\"XHoCGTR6RVHuq2o36icg\": \"main-nowPlayingView-nowPlayingGrid\",\n\t\"fIpDXK7M3W0Bn3FgLSRe\": \"main-nowPlayingView-nowPlayingWidget\",\n\t\"ehLi5oxIfUbTLk2NPPB4\": \"main-nowPlayingView-nowPlayingWidget\",\n\t\"PqL625rkFi7CBiMggYTP\": \"main-nowPlayingView-openQueue\",\n\t\"wkl1CJw1cTKpqlKDAiln\": \"main-nowPlayingView-panelOpenDiv\",\n\t\"byIN5OSjNcJHipcI9kuf\": \"main-nowPlayingView-playNext\",\n\t\"LT6lpp3S4Tx8VsbnPzuA\": \"main-nowPlayingView-playNextButton\",\n\t\"A4e013b7hUST0QPHFqKr\": \"main-nowPlayingView-playNextButtonIcon\",\n\t\"V6Fgup3wwQdhZVYVntrH\": \"main-nowPlayingView-playNextIcon\",\n\t\"qbOrWcMUhSri1nPkZLQA\": \"main-nowPlayingView-queue\",\n\t\"ccC6ZoV_TBWVmq_wdgzc\": \"main-nowPlayingView-queue\",\n\t\"Mj718TwbPAUi_iNAcsmz\": \"main-nowPlayingView-queueItem\",\n\t\"Nyxk_izrYbGecpgmtp91\": \"main-nowPlayingView-queueItemEntityImage\",\n\t\"Ai_McRq9wJEYK21w8nX_\": \"main-nowPlayingView-section\",\n\t\"gXpVKubH7jLZ4sQ2CUBn\": \"main-nowPlayingView-section\",\n\t\"EVqc6HChiM9pEqBYAiUE\": \"main-nowPlayingView-sectionHeader\",\n\t\"mdEMa1ZY6qt201KkKL0F\": \"main-nowPlayingView-sectionHeader\",\n\t\"gpDSOimnzH4zTJmE7UR5\": \"main-nowPlayingView-sectionHeaderSpacing\",\n\t\"zZdI03asKaUCNlbhjDAv\": \"main-nowPlayingView-sectionHeaderText\",\n\t\"BInqOrncCcclcBp4uBnY\": \"main-nowPlayingView-sectionHeaderText\",\n\t\"hfdkySA4kiUldFsPj9lD\": \"main-nowPlayingView-trackInfo\",\n\t\"fjCyBC5HnIDoDPrpbbv8\": \"main-nowPlayingView-trackInfo\",\n\t\"BFR9Zt3zpL8BATBMiwQB\": \"main-nowPlayingWidget-coverArt\",\n\t\"vBMZGgINJ_BbsQM82LhK\": \"main-nowPlayingWidget-coverArt\",\n\t\"bYHWD_eQ1jAh3sAKTHtr\": \"main-nowPlayingWidget-coverExpanded\",\n\t\"deomraqfhIAoSB3SgXpu\": \"main-nowPlayingWidget-nowPlaying\",\n\t\"OhVah4L2N7DWZ8VnPhea\": \"main-nowPlayingWidget-nowPlaying\",\n\t\"j96cpCtZAIdqxcDrYHPI\": \"main-nowPlayingWidget-trackInfo\",\n\t\"V98keH9h9rnepsa_qe_r\": \"main-nowPlayingWidget-trackInfo\",\n\t\"fFv7yCuLuIO1dAGZHcVf\": \"main-pageErrorTemplate-errorBody\",\n\t\"fDD5IxaW7WW8LZTlwzs4\": \"main-playbackBarRemainingTime-container\",\n\t\"npFSJSO1wsu3mEEGb5bh\": \"main-playbackBarRemainingTime-container\",\n\t\"kQqIrFPM5PjMWb5qUS56\": \"main-playbackBarRemainingTime-container\",\n\t\"f4XfIkH9v3tBTnI8AEDj\": \"main-playButton-lockIcon\",\n\t\"IeLnf2wUHVKqxhzBcBoM\": \"main-playButton-PlayButton\",\n\t\"PFgcCoJSWC3KjhZxHDYH\": \"main-playButton-PlayButton\",\n\t\"ix_8kg3iUb9VS5SmTnBY\": \"main-playButton-PlayButton\",\n\t\"vIRREgHGvNoc_fRsISih\": \"main-playButton-PlayButton\",\n\t\"KOoUMuC7IxI_1Pi4r4m5\": \"main-playButton-primary\",\n\t\"VgweZbpfbMSfOcTeGNj_\": \"main-playButton-secondary\",\n\t\"D7HQ50jRBGU8qaAGHRTw\": \"main-playButton-transparent\",\n\t\"ke5Pf1zkbk0eGnRWZYyg\": \"main-playlistEditDetailsModal-albumCover\",\n\t\"jBtrrjZB6NApIt7dtMQD\": \"main-playlistEditDetailsModal-albumCover\",\n\t\"CMQlNrl4E4TNHVowBoZ9\": \"main-playlistEditDetailsModal-characterCounter\",\n\t\"SHNkS_d5PbgJ6CgcYaUk\": \"main-playlistEditDetailsModal-characterCounter\",\n\t\"MQQEonum615k8mGkliT_\": \"main-playlistEditDetailsModal-closeBtn\",\n\t\"qNP5_KI5WgVdKUUrdOk6\": \"main-playlistEditDetailsModal-closeBtn\",\n\t\"PiyAiXdQULEnWAHP0tu1\": \"main-playlistEditDetailsModal-container\",\n\t\"UJRUb6VMsdk5NZboCmg4\": \"main-playlistEditDetailsModal-container\",\n\t\"CU0wnmWejIvyEsRRtSac\": \"main-playlistEditDetailsModal-content\",\n\t\"fIsU1JbqyjMITbYOgJph\": \"main-playlistEditDetailsModal-content\",\n\t\"_qRr3jb13hOiy1EvSL_r\": \"main-playlistEditDetailsModal-description\",\n\t\"aeeOEB8Rw3sgCRiOmHik\": \"main-playlistEditDetailsModal-description\",\n\t\"lXzpMHpJSt7uRB1DXwen\": \"main-playlistEditDetailsModal-descriptionCharacterCounter\",\n\t\"hrJ75E6d_5JE_s_w75dA\": \"main-playlistEditDetailsModal-descriptionCharacterCounter\",\n\t\"c0CddR8wF7kDxvU6uM8B\": \"main-playlistEditDetailsModal-descriptionTextarea\",\n\t\"s5cUBUk0EfYa2xMxSSPD\": \"main-playlistEditDetailsModal-descriptionTextarea\",\n\t\"B_4ndHDFJnCj4dxQmvKA\": \"main-playlistEditDetailsModal-descriptionTextareaWithPadding\",\n\t\"g4NoSm4nlTuArQvfAaDa\": \"main-playlistEditDetailsModal-disclaimer\",\n\t\"krfRqxdeDAttst7COcD0\": \"main-playlistEditDetailsModal-disclaimer\",\n\t\"R2w_sH83CJU9Yhnu0xyt\": \"main-playlistEditDetailsModal-header\",\n\t\"u91SehceIJM9fyoWEn3Q\": \"main-playlistEditDetailsModal-header\",\n\t\"UxrKbK6rUr4vmo6SmCab\": \"main-playlistEditDetailsModal-imageChangeButton\",\n\t\"ZKDvF1q4yO4yUkfI0rFS\": \"main-playlistEditDetailsModal-imageChangeButton\",\n\t\"mtGn3ylACuEcnBDCuR2g\": \"main-playlistEditDetailsModal-imageDropDownButton\",\n\t\"Y7_Q_VL5y7FKVYzILZlR\": \"main-playlistEditDetailsModal-imageDropDownButton\",\n\t\"i2x0uFyIEg3YN6njOngZ\": \"main-playlistEditDetailsModal-imageDropDownContainer\",\n\t\"hF2x3Nk34N0RVwSOfRqu\": \"main-playlistEditDetailsModal-imageDropDownContainer\",\n\t\"St_O5qpuAv8_Rt8xLueG\": \"main-playlistEditDetailsModal-imageLoadingContainer\",\n\t\"_rBnbQXOUaS8hxF05Vvj\": \"main-playlistEditDetailsModal-insertLinkButton\",\n\t\"Up_Ke_BKTraatSMY_Po_\": \"main-playlistEditDetailsModal-save\",\n\t\"EMwLV6xnTcOVTKEV2vaK\": \"main-playlistEditDetailsModal-save\",\n\t\"KHbA1pftwmeRxPgRj6XW\": \"main-playlistEditDetailsModal-sectionsContainer\",\n\t\"f0GjZQZc4c_bKpqdyKbq\": \"main-playlistEditDetailsModal-textElement\",\n\t\"CPK2Xj5o66p6ipEmsVqZ\": \"main-playlistEditDetailsModal-textElement\",\n\t\"UCj7uEr7vR_0DO3cQHcX\": \"main-playlistEditDetailsModal-textElementError\",\n\t\"JqI3LI5Df0M4YNOvUSCw\": \"main-playlistEditDetailsModal-textElementInfo\",\n\t\"rosHlzYfiO0UfpmOhP4I\": \"main-playlistEditDetailsModal-textElementLabel\",\n\t\"LibRpovtQwu0kbIGh9vK\": \"main-playlistEditDetailsModal-textElementLabel\",\n\t\"RLzMolC7kIdp65LyfQPb\": \"main-playlistEditDetailsModal-title\",\n\t\"HutS10br7QppJJ5_XHya\": \"main-playlistEditDetailsModal-title\",\n\t\"qOBo9jzgJoMkt2Ad8fur\": \"main-playlistEditDetailsModal-titleCharacterCounter\",\n\t\"ZfCG8e1oAWX1FroDbeFF\": \"main-playlistEditDetailsModal-titleCharacterCounter\",\n\t\"JaGLdeBa2UaUMBT44vqI\": \"main-playlistEditDetailsModal-titleInput\",\n\t\"ZSbwUhw8fvOgwrnjZSbv\": \"main-playlistEditDetailsModal-titleInput\",\n\t\"SuHDp5IvWoCq1P8yJQmo\": \"main-playlistEditDetailsModal-titleInputWithPadding\",\n\t\"AytCc2WKUld6N212Pcpu\": \"main-playlistRemoveMultipleModal-buttonContainer\",\n\t\"J0xJcBaKhwl9EIuzvhLg\": \"main-playlistRemoveMultipleModal-container\",\n\t\"tlBLfMv0fCxd31jPTQhL\": \"main-playlistRemoveMultipleModal-description\",\n\t\"ce3qMCnc2kDVSi7k74fh\": \"main-playlistRemoveMultipleModal-title\",\n\t\"vnCew8qzJq3cVGlYFXRI\": \"main-playPauseButton-button\",\n\t\"QavgDs_52SpJ2rw0LNYz\": \"main-popper-arrow\",\n\t\"aCtCKL9BxAoHeVZS0uRs\": \"main-popper-container\",\n\t\"kMVnZekiwoVgg0Vjd418\": \"main-progressRing-circleColor\",\n\t\"PcjBXoPwLAnvPiTQx79g\": \"main-progressRing-circleShadow\",\n\t\"tP0mccyU1WAa7I9PevC1\": \"main-repeatButton-active\",\n\t\"Vz6yjzttS0YlLcwrkoUR\": \"main-repeatButton-button\",\n\t\"qnYVzttodnzg9WdrVQ1p\": \"main-rootlist-bottomSentinel\",\n\t\"xkHiFJhykpOWcVMMPufq\": \"main-rootlist-dropIndicator\",\n\t\"I_aApN9pSlbGcpLtFQWw\": \"main-rootlist-expandArrow\",\n\t\"NTJM_mh36C5kJ5oO8eac\": \"main-rootlist-expandArrowActive\",\n\t\"LKgm9fCDTO7wqig_5U1q\": \"main-rootlist-rootlist\",\n\t\"EY6S7vlkxB7SF_OjjF_Y\": \"main-rootlist-rootlistContent\",\n\t\"FBPrcmuqo3yv5UfWSRl5\": \"main-rootlist-rootlistDivider\",\n\t\"McwcCfBLSuXa5UDU1IMw\": \"main-rootlist-rootlistDividerContainer\",\n\t\"Y8edH1Yjo4xrW_58czQj\": \"main-rootlist-rootlistDividerGradient\",\n\t\"whXv9jYuEgS1DPTmPCe_\": \"main-rootlist-rootlistItem\",\n\t\"utSR0FVkHnII_aL8TOcu\": \"main-rootlist-rootlistItemLink\",\n\t\"K8Rs3qAYirS8wJ1hR8gn\": \"main-rootlist-rootlistItemLinkActive\",\n\t\"AINMAUImkAYJd4ertQxy\": \"main-rootlist-rootlistItemOverlay\",\n\t\"tojGvx6tcIBmKlICMJAZ\": \"main-rootlist-rootlistPlaylistsScrollNode\",\n\t\"g_jOSq3pLY5p4tldskrw\": \"main-rootlist-statusIcons\",\n\t\"gtuJjD43VjwtP8ii3H3P\": \"main-rootlist-statusIcons\",\n\t\"VjIb8SfYTkc4wMpqqj3f\": \"main-rootlist-textWrapper\",\n\t\"lyVkg68L7ycnwyOcO3vj\": \"main-rootlist-topSentinel\",\n\t\"PVcM2tzEirZrUPGhsuaQ\": \"main-rootlist-topSentinel\",\n\t\"JUa6JJNj7R_Y3i4P8YUX\": \"main-rootlist-wrapper\",\n\t\"DeV0zPbzpbB31xcBc9gz\": \"main-rootlist-wrapper\",\n\t\"rKdWluhLAGpdUFBWN8sK\": \"main-seeAll-link\",\n\t\"MRfNcNMd_djj3KOg_VOB\": \"main-seekBackButton-button\",\n\t\"XGCdw_LcXQHrxmvpxjwi\": \"main-seekForwardButton-button\",\n\t\"r4Qmv_YM7IHogP2i1tmJ\": \"main-shelf-browseGridSection\",\n\t\"q8AZzDc_1BumBHZg0tZb\": \"main-shelf-header\",\n\t\"HOgue4Eg4UdBR58M0633\": \"main-shelf-seeAll\",\n\t\"QyANtc_r7ff_tqrf5Bvc\": \"main-shelf-shelf\",\n\t\"HVBIEiiVvehha3rRJA78\": \"main-shelf-shelf\",\n\t\"Z4InHgCs2uhk0MU93y_a\": \"main-shelf-shelfGrid\",\n\t\"KMMqgUnvRAqSSii6zn7L\": \"main-shelf-shelfGrid\",\n\t\"Sdmk6QLCvk5EuAP54IN5\": \"main-shelf-shelfGridResponsive\",\n\t\"PodseQtNc4pWHyOfGkgA\": \"main-shelf-shelfGridResponsiveMultiRows\",\n\t\"BtbiwMynlB4flsYu_hA2\": \"main-shelf-showAll\",\n\t\"WkSW1U6jr3HDz3vApM56\": \"main-shelf-skeletonShelf\",\n\t\"hWGxHSAKACFWXowXPDTP\": \"main-shelf-subHeader\",\n\t\"MfVrtIzQJ7iZXfRWg6eM\": \"main-shelf-title\",\n\t\"onVWL7MW4PW9FyVajBAc\": \"main-shelf-titleWrapper\",\n\t\"OMuRYOdpUbGif12_lRJl\": \"main-shelf-topRow\",\n\t\"OF_3F0SQCsBtL1jSTlTA\": \"main-shuffleButton-active\",\n\t\"KVKoQ3u4JpKTvSSFtd6J\": \"main-shuffleButton-button\",\n\t\"fn72ari9aEmKo4JcwteT\": \"main-skipBackButton-button\",\n\t\"mnipjT4SLDMgwiDCEnRC\": \"main-skipForwardButton-button\",\n\t\"d89qxCxbCRj4y1Woft8j\": \"main-smartShuffleButton-active\",\n\t\"kpGMQq1KFz620g_BD_dS\": \"main-tag-container\",\n\t\"T1xI1RTSFU7Wu94UuvE6\": \"main-topBar-background\",\n\t\"PfgTAe4hVhuNFZRuuKQG\": \"main-topBar-background\",\n\t\"IAyWaeDamLJLjxuPeVKw\": \"main-topBar-buddyFeed\",\n\t\"WtC1lGbmQRplD6JBhNFU\": \"main-topBar-buddyFeed\",\n\t\"pefa1_ZALRn90eYLANvw\": \"main-topBar-buddyFeed\",\n\t\"W0bXxvPV_DhyzwdJWRuU\": \"main-topBar-buddyFeedActive\",\n\t\"CE17OcVsW2svuK7ebBcx\": \"main-topBar-buddyFeedIcon\",\n\t\"ql0zZd7giPXSnPg75NR0\": \"main-topBar-button\",\n\t\"J6VTd7VdGN2PM_oXCAyH\": \"main-topBar-button\",\n\t\"qvXMfQh1CjESoKKX49Bl\": \"main-topBar-buttonActive\",\n\t\"facDIsOQo9q7kiWc4jSg\": \"main-topBar-container\",\n\t\"VCH3TJP5s27cQwnxWKnA\": \"main-topBar-container\",\n\t\"MIX_wd0K1tVHme_pwV2F\": \"main-topBar-contentArea\",\n\t\"BkpKedcdaMGbvgXMlmcg\": \"main-topBar-contentArea\",\n\t\"OOsg_GCQDERDXc1d0EmC\": \"main-topBar-entryPoints\",\n\t\"pfMoD1MbelMuF1m8QeMc\": \"main-topBar-forward\",\n\t\"Oq5wiHCwgjjMg_VYy068\": \"main-topBar-fullscreenHistoryButtons\",\n\t\"VgSbatGBB9XwTH2_dsxg\": \"main-topBar-historyButtons\",\n\t\"fWwn9sakqBBjgiNti7LD\": \"main-topBar-historyButtons\",\n\t\"IYDlXmBmmUKHveMzIPCF\": \"main-topBar-icon\",\n\t\"ou0osOf3R1ZRWQ1xzFd9\": \"main-topBar-icon\",\n\t\"cqO5c3gPyN6tXIddpWfr\": \"main-topBar-left\",\n\t\"qxbaGYC8rgMLfyOuYRCM\": \"main-topBar-loggedOut\",\n\t\"LKFFk88SIRC9QKKUWR5u\": \"main-topBar-loginButtons\",\n\t\"zuf9gCpkf86KkzzCtkJN\": \"main-topBar-navLink\",\n\t\"EvIR4O7jOSbNmxtMdIQ0\": \"main-topBar-overlay\",\n\t\"fKbzlgPXfvClLUUKYLxj\": \"main-topBar-overlay\",\n\t\"CWFTCu03cdDALodezHmA\": \"main-topBar-responsiveForward\",\n\t\"fl1Ov5aB9YCKnMkJYpEu\": \"main-topBar-right\",\n\t\"VGKBvschhennrwdTibUE\": \"main-topBar-rightSidebarVisible\",\n\t\"g3Xinb8x23n81ejvS9Uj\": \"main-topBar-searchBar\",\n\t\"CVuGEUIxLkNKpMds8AFS\": \"main-topBar-searchBar\",\n\t\"CFfhVwF52u3lETJ8lRWE\": \"main-topBar-searchBar\",\n\t\"btOYheZlYlaVEyO9iEBk\": \"main-topBar-sectionWrapper\",\n\t\"sibxBMlr_oxWTfBrEz2G\": \"main-topBar-signupButton\",\n\t\"eBrbJuUWgMoCkOgWs5uw\": \"main-topBar-topBarContainer\",\n\t\"qHWqOt_TYlFxiF0Dm2fD\": \"main-topBar-topbarContent\",\n\t\"SgtTbe7qcK0Rae6rXLWm\": \"main-topBar-topbarContent\",\n\t\"rwdnt1SmeRC_lhLVfIzg\": \"main-topBar-topbarContentRight\",\n\t\"VHvOWFJZz7l5Py6Vud3A\": \"main-topBar-topbarContentRight\",\n\t\"CuBx12mEGmMQ1XAXHZCs\": \"main-topBar-topbarContentRight\",\n\t\"rovbQsmAS_mwvpKHaVhQ\": \"main-topBar-topbarContentWrapper\",\n\t\"QoAE5SWKbvYt9ogonr6e\": \"main-topBar-topbarContentWrapper\",\n\t\"sNde2kloCY28V4GB9AvP\": \"main-topBar-topNavBarLinks\",\n\t\"k0vXhOdr0XE83lAQaJ1O\": \"main-topBar-topNavBarSeparator\",\n\t\"Upqw01TOXETOmR5Td7Dj\": \"main-topBar-UpgradeButton\",\n\t\"rqZoelG5u2vHb3kedEph\": \"main-topBar-UpgradeButton\",\n\t\"I4p8r1UNjIGk9yv3H2Ms\": \"main-topBar-whatsNewFeed\",\n\t\"t794tYAiOJib_IAmmdqq\": \"main-topBar-whatsNewFeedActive\",\n\t\"t93PZphItuM19kPhX7tC\": \"main-topBar-whatsNewFeedIcon\",\n\t\"RJGA3d0jzObTXwoMUH4p\": \"main-topBar-whatsNewFeedNotification\",\n\t\"kwTbLplLLsW6T_LrtR7_\": \"main-topBar-whatsNewFeedNotificationDot\",\n\t\"dmF7or26BvPJs5kQtYVH\": \"main-topBar-whatsNewFeedNotificationTitle\",\n\t\"coBkWVskipFo8KxLKief\": \"main-topBar-withBackgroundBlur\",\n\t\"g_OLJCea3ISA_OEZXMld\": \"main-topBarStatusIndicator-enter\",\n\t\"eUtkhxZmvSKe4G9vJbvG\": \"main-topBarStatusIndicator-enterActive\",\n\t\"y0CwI5JkA0h0OyLFf53Q\": \"main-topBarStatusIndicator-exitActive\",\n\t\"uObDRTsYYQmLhK7QzuFF\": \"main-topBarStatusIndicator-hasTooltip\",\n\t\"JbIx9RVHwxVXRbXAJaeN\": \"main-topBarStatusIndicator-notMinimized\",\n\t\"FannkPV_e2vWawF9QgVA\": \"main-topBarStatusIndicator-tooltipEnter\",\n\t\"CtNz_OQHOZ5Z0mJMHjzw\": \"main-topBarStatusIndicator-tooltipEnterActive\",\n\t\"rSvmoStBWe2Cft5bw9ya\": \"main-topBarStatusIndicator-tooltipIsError\",\n\t\"Y22srYwXssaWnfD1MXis\": \"main-topBarStatusIndicator-TopBarStatusIndicatorContainer\",\n\t\"mqZLFQb6fadgKQww5AFV\": \"main-trackCreditsModal-additionalCredits\",\n\t\"HJGB9Fo4Xs8h5BkBBeDu\": \"main-trackCreditsModal-additionalCredits\",\n\t\"xd9f6OsPqmyb6CefhTRR\": \"main-trackCreditsModal-clickableCreditsEntry\",\n\t\"XrHz4A9uD7ZGIKQsSyNQ\": \"main-trackCreditsModal-clickableCreditsEntry\",\n\t\"VKCcyYujazVPj6VkksPM\": \"main-trackCreditsModal-closeBtn\",\n\t\"QQ13a8MJiuYLu0q6rZ2A\": \"main-trackCreditsModal-closeBtn\",\n\t\"uV8q95GGAb2VDtL3gpYa\": \"main-trackCreditsModal-container\",\n\t\"KslWdQXWjQsaid2M3oM8\": \"main-trackCreditsModal-container\",\n\t\"IpshWHA6nc9nJxRssAlb\": \"main-trackCreditsModal-creditsEntry\",\n\t\"nv9qp4kKPjm8xaSYV1Of\": \"main-trackCreditsModal-creditsEntry\",\n\t\"beyOcd3p0PEzhrlKIbU1\": \"main-trackCreditsModal-creditsGroup\",\n\t\"PK1NwDda3K9m_l1F57mQ\": \"main-trackCreditsModal-creditsGroup\",\n\t\"pGU_qEtNT1qWKjrRbvan\": \"main-trackCreditsModal-header\",\n\t\"QsEMdNpWb7BvcopiZBY7\": \"main-trackCreditsModal-header\",\n\t\"Nw1INlIyra3LT1JjvoqH\": \"main-trackCreditsModal-mainSection\",\n\t\"VEh7w_UmdiXh8yRLKVmB\": \"main-trackCreditsModal-mainSection\",\n\t\"iGT1RlMPCwUlIiRPbOqg\": \"main-trackCreditsModal-originalCredits\",\n\t\"caPUJnD8oMW_y3rXBllV\": \"main-trackCreditsModal-originalCredits\",\n\t\"bpaf11XBuMN_hd95L9ol\": \"main-trackCreditsModal-sectionTitle\",\n\t\"syZlEQP36Qn7I50V6d4N\": \"main-trackCreditsModal-sectionTitle\",\n\t\"DAIH23Yj6NeioZ6jooQ6\": \"main-trackCreditsModal-sourceNames\",\n\t\"vK_WgBGfaNGiJjeNvajh\": \"main-trackCreditsModal-sourceNames\",\n\t\"gpNta6i8q3KYJC6WBZQC\": \"main-trackInfo-artists\",\n\t\"w_TTPh4y9H1YD6UrTMHa\": \"main-trackInfo-artists\",\n\t\"QKm_g41pGRkjUcr_2cIM\": \"main-trackInfo-artists\",\n\t\"ZcNcu7WZgOAz_Mkcoff3\": \"main-trackInfo-container\",\n\t\"iZrIHsls0lCEhoMDA9kc\": \"main-trackInfo-container\",\n\t\"QZfVz1fBRtwZIIrMKL6v\": \"main-trackInfo-container\",\n\t\"W5cB_o0XkkU7Q8tlTGxq\": \"main-trackInfo-contentContainer\",\n\t\"cpltqpeZsQmmXy7qZgb9\": \"main-trackInfo-contentContainer\",\n\t\"IkAuhlmCofCxyvdphgkv\": \"main-trackInfo-contentWrapper\",\n\t\"PGSe59fD1Hwc9yUM2d3U\": \"main-trackInfo-contentWrapper\",\n\t\"upgEerbOWZz66oZhE5G5\": \"main-trackInfo-contentWrapper\",\n\t\"s1jyNJBxq16eqkqCf6Ax\": \"main-trackInfo-enhanced\",\n\t\"p2ya1fQ3o9pY4alcW0o4\": \"main-trackInfo-enhanced\",\n\t\"LDY4KpSvSSGHG6jRU5QA\": \"main-trackInfo-enhanced\",\n\t\"y6bXimbi8JAcblOFxTap\": \"main-trackInfo-equalGradientWidth\",\n\t\"Q_174taY6n64ZGC3GsKj\": \"main-trackInfo-name\",\n\t\"l3ePjQ6SwNdQQCnLpywl\": \"main-trackInfo-name\",\n\t\"PcH6VnzkkDqD36P93i9Q\": \"main-trackInfo-name\",\n\t\"K9Nj3oI7bTNFh5AGp5GA\": \"main-trackInfo-name\",\n\t\"e_FyYW4DtJAcPdudjghs\": \"main-trackInfo-name\",\n\t\"FYny4fSXzbXG65hAD1Pn\": \"main-trackInfo-overlay\",\n\t\"eSMjmiD29Ox35O95waw6\": \"main-trackInfo-overlay\",\n\t\"ztTFEVvpDUywSVxJw4t7\": \"main-trackInfo-overlay\",\n\t\"aMhBfOqJxn4jKzFN07Lg\": \"main-trackInfo-rightToLeft\",\n\t\"Ty1q4GZz5EJ7Yl2jHs5I\": \"main-trackInfo-xsmallBadges\",\n\t\"MrkH0O1OzmNv_oCQdvI8\": \"main-trackInfo-xsmallBadges\",\n\t\"lvEvs7EuvpagAgPzLl_B\": \"main-trackInfo-xsmallBadges\",\n\t\"Ry7zokVNFKXaDxKp1Qf1\": \"main-trackList-actionsHeader\",\n\t\"iSbqnFdjb1SuyJ3uWydl\": \"main-trackList-active\",\n\t\"ZgAJecvDDVREPXktThbA\": \"main-trackList-active\",\n\t\"eWNJl03RSvGa9VsxkJ_7\": \"main-trackList-addedBy\",\n\t\"zxSdNpIMNoVh8g3F9fqt\": \"main-trackList-arrow\",\n\t\"wE9dp6W8uInhrlbWPMsR\": \"main-trackList-chartTrackList\",\n\t\"ASYv4mEu1lXEHVa04HqY\": \"main-trackList-column\",\n\t\"rGujAXjCLKEd_N6yTwds\": \"main-trackList-column\",\n\t\"Q3gtrgbIqUuVTw9350Us\": \"main-trackList-column\",\n\t\"r53kBgGOdrCYj2Jux0iN\": \"main-trackList-columnResizing\",\n\t\"Wn5NpEuR1Qw99DelnfxX\": \"main-trackList-concertTrackList\",\n\t\"KJeaWI3jCZemsmu4eYL3\": \"main-trackList-curationButton\",\n\t\"otqy2yIt_BVXLjoundpp\": \"main-trackList-curationButton\",\n\t\"SzsIJoBzlexhelPsHXnn\": \"main-trackList-delayedVisibility\",\n\t\"Ar1CZ7qjPHuIJY0cI56W\": \"main-trackList-disabled\",\n\t\"Unhd72dSzMriFEuvX2UU\": \"main-trackList-disabled\",\n\t\"UuAaE00MS64uibJyxXxK\": \"main-trackList-discRow\",\n\t\"xmIMj8Eo8ZixOkuRQWd3\": \"main-trackList-discTitle\",\n\t\"WTbn2dLWM9fMMb3O4uKZ\": \"main-trackList-dropTargetAfter\",\n\t\"xhgesf8qPsbyZY2NaYdH\": \"main-trackList-dropTargetBefore\",\n\t\"AgiCqnZUliKs_dafpdyi\": \"main-trackList-durationHeader\",\n\t\"kxxyFjKz2levImEvxq48\": \"main-trackList-durationHeader\",\n\t\"qcny9ih7ulue1dEOh48T\": \"main-trackList-durationHeader\",\n\t\"m6Bvw7PNXw2WXqruLOLE\": \"main-trackList-enhanced\",\n\t\"vr04lRmH66LzICUXnwCq\": \"main-trackList-eventDate\",\n\t\"OINF2mTM4cu2JjtkmPiz\": \"main-trackList-eventTicketIcon\",\n\t\"vL_PgycspyjCBwfFg9j9\": \"main-trackList-eventVenue\",\n\t\"dZiDwJihz32GwQunXhnB\": \"main-trackList-facepile\",\n\t\"uWYVhrrTnV2V_VYhThDl\": \"main-trackList-facepileAvatar\",\n\t\"FCzIz5e0Lpt4xa5zz2F1\": \"main-trackList-icon\",\n\t\"xEtoX9iOYS58uDtKLmzR\": \"main-trackList-icon\",\n\t\"vBFTtFW3Co9F_yJ_HjF4\": \"main-trackList-icon\",\n\t\"Ss6hr6HYpN4wjHJ9GHmi\": \"main-trackList-indexable\",\n\t\"oYS_3GP9pvVjqbFlh9tq\": \"main-trackList-indexable\",\n\t\"itxBsCHKFwTOvmERT1cg\": \"main-trackList-indexable\",\n\t\"Kb365Ykr7fUEvnvOH0vl\": \"main-trackList-isNextRowSelected\",\n\t\"dXWJ1DecZeg_dpXZUbHL\": \"main-trackList-isPreviousRowSelected\",\n\t\"vDk3w0iWhhczk8PS_K3B\": \"main-trackList-isRecommendedTrackListRow\",\n\t\"jDgf8MzZRbApYE6BW1qL\": \"main-trackList-isRecommendedTrackListRow\",\n\t\"HOP1JqKm27djuzPVbaRl\": \"main-trackList-nineteen\",\n\t\"w304euOUWkI5A8qAqFj8\": \"main-trackList-notificationDot\",\n\t\"VrRwdIZO0sRX1lsWxJBe\": \"main-trackList-number\",\n\t\"xNyTkXEncSjszLNI65Nq\": \"main-trackList-number\",\n\t\"YCOwZBWtN6TZawPOEVI9\": \"main-trackList-number\",\n\t\"nEZjuVeUuGSmYaQWgXTd\": \"main-trackList-ownedBySelf\",\n\t\"z0zJ798TVq97lZgdRT2_\": \"main-trackList-ownedBySelf\",\n\t\"Iy7vi9cVsy6pS6wF8Dud\": \"main-trackList-placeholder\",\n\t\"Dj9_CzXA7IbUFIz4wOsA\": \"main-trackList-placeholderEnd\",\n\t\"cF8vKdBGYRZs_SpaG0Yz\": \"main-trackList-placeholderIndex\",\n\t\"J0lnyV5H9q4Jj7FK0A72\": \"main-trackList-placeholderStart\",\n\t\"BciIfT5b6BSIPIr6feK4\": \"main-trackList-placeholderStartWithCoverImage\",\n\t\"noANc1fQSmaQNKYVDEDQ\": \"main-trackList-placeholderVariable\",\n\t\"n5XwsUqagSoVk8oMiw1x\": \"main-trackList-playingIcon\",\n\t\"DZJJ5SCypi2mREbjy5bx\": \"main-trackList-playingIcon\",\n\t\"TYVy_QqiFWgzw0WkUiHb\": \"main-trackList-playsHeader\",\n\t\"s6jK2TtsvpysB_LjjS7g\": \"main-trackList-playsHeader\",\n\t\"B2Dwok3Y07k2ttjGDssH\": \"main-trackList-queuePanelTracklist\",\n\t\"Bob5Qz4qd2ApsH6o1loA\": \"main-trackList-resizeHandle\",\n\t\"sQcIERaiZKFhOM1LrSmX\": \"main-trackList-rowBadges\",\n\t\"_7_yPy5jfb9kzk3gijq6A\": \"main-trackList-rowBadges\",\n\t\"UeRAfdSphrPaohh2HWmB\": \"main-trackList-rowCompactMode\",\n\t\"N7GZp8IuWPJvCPz_7dOg\": \"main-trackList-rowCompactMode\",\n\t\"Btg2qHSuepFGBG6X0yEN\": \"main-trackList-rowDuration\",\n\t\"l5CmSxiQaap8rWOOpEpk\": \"main-trackList-rowDuration\",\n\t\"bnolo3jJ8KBxI6jyN7bD\": \"main-trackList-rowFeedback\",\n\t\"U_mTGq4vzVyOrPrB3mx4\": \"main-trackList-rowFeedbackButton\",\n\t\"tGKwoPuvNBNK3TzCS5OH\": \"main-trackList-rowHeartButton\",\n\t\"GcODM2Bp3srQqJzi8Tzs\": \"main-trackList-rowHeartButton\",\n\t\"rkw8BWQi3miXqtlJhKg0\": \"main-trackList-rowImage\",\n\t\"IqDKYprOtD_EJR1WClPv\": \"main-trackList-rowImage\",\n\t\"GTdNqPsL1mHfybwJSeVz\": \"main-trackList-rowImage\",\n\t\"EfStVlHpnUDOJF3pM93I\": \"main-trackList-rowImageFallback\",\n\t\"tgCyNnKttOMQXfuqVuhI\": \"main-trackList-rowImageFallback\",\n\t\"RfidWIoz8FON2WhFoItU\": \"main-trackList-rowImagePlayButton\",\n\t\"j2s64Lz8y6VzBLB_V9Gm\": \"main-trackList-rowImagePlayButton\",\n\t\"y3wrMu2sPRR2DCdEpWlg\": \"main-trackList-rowImagePlayButton\",\n\t\"Qs11Fsr_XqTVFDFWWRkQ\": \"main-trackList-rowImagePlayPauseButton\",\n\t\"OXMPsUBpIQoIbOPIv7Bh\": \"main-trackList-rowImagePlayPauseButton\",\n\t\"DoIH4Mjt4sJFHkmAGs03\": \"main-trackList-rowImagePlayPauseButtonPlaying\",\n\t\"cxYjUh_DjUkRijOXGrOT\": \"main-trackList-rowImageVideo\",\n\t\"byLkljnIRd_DJeSMD3LM\": \"main-trackList-rowImageWithPlay\",\n\t\"gmuBAqsC6pcufUyP1VQW\": \"main-trackList-rowImageWithPlay\",\n\t\"iCQtmPqY0QvkumAOuCjr\": \"main-trackList-rowMainContent\",\n\t\"_iQpvk1c9OgRAc8KRTlH\": \"main-trackList-rowMainContent\",\n\t\"hb8C1VAjyUg0VMxrwpix\": \"main-trackList-rowMainContent\",\n\t\"gQnx5tArze5q1wfG6AWJ\": \"main-trackList-rowMainContentCompact\",\n\t\"ft6dUifK4i03829TBAqC\": \"main-trackList-rowMainContentCompact\",\n\t\"VpYFchIiPg3tPhBGyynT\": \"main-trackList-rowMarker\",\n\t\"ucB9avGYvzsmzXUOw0S7\": \"main-trackList-rowMarker\",\n\t\"UUe_W_6spimNc8vpdEEO\": \"main-trackList-rowMarker\",\n\t\"JxZLQbpnH3fFGJHB4XQG\": \"main-trackList-rowMarkerChartStatus\",\n\t\"t4yFt9Ch_ZCPxEEEoImE\": \"main-trackList-rowMarkerChartStatus\",\n\t\"mYN_ST1TsDdC6q1k1_xs\": \"main-trackList-rowMoreButton\",\n\t\"ObVor_8sQq5whKbtWs8a\": \"main-trackList-rowMoreButton\",\n\t\"nYg_xsOVmrVE_8qk1GCW\": \"main-trackList-rowPlayCount\",\n\t\"HxDMwNr5oCxTOyqt85gi\": \"main-trackList-rowPlayCount\",\n\t\"UIBT7E6ZYMcSDl1KL62g\": \"main-trackList-rowPlayPauseIcon\",\n\t\"zOsKPnD_9x3KJqQCSmAq\": \"main-trackList-rowPlayPauseIcon\",\n\t\"HcMOFLaukKJdK5LfdHh0\": \"main-trackList-rowSectionEnd\",\n\t\"PAqIqZXvse_3h6sDVxU0\": \"main-trackList-rowSectionEnd\",\n\t\"qszimzwbM7AdyZGTvofd\": \"main-trackList-rowSectionEnd\",\n\t\"NZAU7CsuZsMeMQB8zYUu\": \"main-trackList-rowSectionIndex\",\n\t\"fS0C4IgbHviZxIVGC736\": \"main-trackList-rowSectionIndex\",\n\t\"ZC9Da494kc24m9FG64Pf\": \"main-trackList-rowSectionIndex\",\n\t\"gvLrgQXBFVW6m9MscfFA\": \"main-trackList-rowSectionStart\",\n\t\"w46g_LQVSLE9xK399VYf\": \"main-trackList-rowSectionStart\",\n\t\"J_3tQnLWkbEcYffbaUL4\": \"main-trackList-rowSectionStart\",\n\t\"bfQ2S9bMXr_kJjqEfcwA\": \"main-trackList-rowSectionVariable\",\n\t\"_TH6YAXEzJtzSxhkGSqu\": \"main-trackList-rowSectionVariable\",\n\t\"qev2KFBSKCHkeXT4fDTl\": \"main-trackList-rowSectionVariable\",\n\t\"rq2VQ5mb9SDAFWbBIUIn\": \"main-trackList-rowSubTitle\",\n\t\"t_yrXoUO3qGsJS4Y6iXX\": \"main-trackList-rowTitle\",\n\t\"btE2c3IKaOXZ4VNAb8WQ\": \"main-trackList-rowTitle\",\n\t\"eRuZMo_HNLjb1IalIeRb\": \"main-trackList-selected\",\n\t\"JgERXNoqNav5zOHiZGfG\": \"main-trackList-selected\",\n\t\"FCqh1RprhBCx2nZeC2Xi\": \"main-trackList-showDisabledAsEnabled\",\n\t\"ZdBognHQ3X610bLWE3e3\": \"main-trackList-sortable\",\n\t\"Bh8ehD8at2hrINB7YMOg\": \"main-trackList-sortable\",\n\t\"blGAYwvDWndVkFDAQZ8A\": \"main-trackList-sortable\",\n\t\"vY_4na7XFQWMFH8phXCQ\": \"main-trackList-statusChangeDown\",\n\t\"NJMsWXHYQgISlxnPODAD\": \"main-trackList-statusChangeDown\",\n\t\"YAINlTb90ZejTPv7k1dH\": \"main-trackList-statusChangeNew\",\n\t\"OqarR9DPk9OgwzSAwR05\": \"main-trackList-statusChangeNew\",\n\t\"zbBdn49lgTKVccLVZBqE\": \"main-trackList-statusChangeUp\",\n\t\"VrcWCORvyjWWMoz4Mbpd\": \"main-trackList-statusChangeUp\",\n\t\"_3IwXr7oR_KZlfPfwMh7\": \"main-trackList-talkIcon\",\n\t\"y8YIxGr73OXUGacKKsWb\": \"main-trackList-talkSegmentDuration\",\n\t\"jsV182e49Puwz9SIYt2J\": \"main-trackList-text\",\n\t\"ShMHCGsT93epRGdxJp2w\": \"main-trackList-trackList\",\n\t\"oIeuP60w1eYpFaXESRSg\": \"main-trackList-trackList\",\n\t\"V3hMbl6JubddBUkF2XKw\": \"main-trackList-trackList\",\n\t\"ixZyJJ3SHxsSb3NHkhWn\": \"main-trackList-trackListCompactMode\",\n\t\"iHiqmESWdGRBwk5cS7ZZ\": \"main-trackList-trackListCompactMode\",\n\t\"koyeY6AgGRPmyPITi7yO\": \"main-trackList-trackListHeader\",\n\t\"IpXjqI9ouS_N5zi0WM88\": \"main-trackList-trackListHeader\",\n\t\"Y4EDvZXtKfdzwuoUAPwO\": \"main-trackList-trackListHeader\",\n\t\"dZPmmYYhskhqHJCAruvI\": \"main-trackList-trackListHeaderRow\",\n\t\"ePPpO_NuGDUxVRTw7y6W\": \"main-trackList-trackListHeaderRow\",\n\t\"U9A7_SGWn6IJ0vAM2oU7\": \"main-trackList-trackListHeaderRow\",\n\t\"qJOhHoRcFhHJpEQ2CwFT\": \"main-trackList-trackListHeaderStuck\",\n\t\"_2ajKWDiy6YvJu5wo8I1g\": \"main-trackList-trackListHeaderStuck\",\n\t\"h4HgbO_Uu1JYg5UGANeQ\": \"main-trackList-trackListRow\",\n\t\"IjYxRc5luMiDPhKhZVUH\": \"main-trackList-trackListRow\",\n\t\"UhOLa3blz2xoAxM2vRwz\": \"main-trackList-trackListRow\",\n\t\"wTUruPetkKdWAR1dd6w4\": \"main-trackList-trackListRowGrid\",\n\t\"UpiE7J6vPrJIa59qxts4\": \"main-trackList-trackListRowGrid\",\n\t\"vzvX6wzymW8rwI4hkYo0\": \"main-trackList-trackListRowGrid\",\n\t\"vOp2HlcPkxOHebo3If32\": \"main-useDropTarget-album\",\n\t\"O0AN8Ty_Cxd4iLwyKATB\": \"main-useDropTarget-album\",\n\t\"G_xEAccmp3ulqXjuviWK\": \"main-useDropTarget-album\",\n\t\"VNdHKKznHkpJ0VHoDmai\": \"main-useDropTarget-artist\",\n\t\"wQnUXn1m6Gy4PH8jhslb\": \"main-useDropTarget-artist\",\n\t\"zWWLnqWslTLHwq3wBgGB\": \"main-useDropTarget-audiobook\",\n\t\"ufICQKJq0XJE5iiIsZfj\": \"main-useDropTarget-base\",\n\t\"NxEINIJHGytq4gF1r2N1\": \"main-useDropTarget-base\",\n\t\"LLlfyKiKbOd8gfCmHcZX\": \"main-useDropTarget-base\",\n\t\"ETclQEbcAcQdGdSioHaJ\": \"main-useDropTarget-episode\",\n\t\"XNjgtSbyhshr7YQcVvry\": \"main-useDropTarget-episode\",\n\t\"LNzflW6HN3b7upl8Pt7w\": \"main-useDropTarget-episode\",\n\t\"cuH8l_VHkTiz_NYVslQe\": \"main-useDropTarget-folder\",\n\t\"mhuhir0ikRqXAPHU8ZZ1\": \"main-useDropTarget-folder\",\n\t\"aRyoyQFJkzhoSOnf2ERM\": \"main-useDropTarget-local\",\n\t\"odS2IW9wfNVHhkhc0l_X\": \"main-useDropTarget-local\",\n\t\"FQFIqbs9Ic3VDNohmxRp\": \"main-useDropTarget-local\",\n\t\"kXEKypZEUzxx9rNJy09C\": \"main-useDropTarget-playlist\",\n\t\"D8wJ9TPfJzLeLJYxnad2\": \"main-useDropTarget-playlist\",\n\t\"eZnAGhYcXE4Bt0a7958z\": \"main-useDropTarget-playlistV2\",\n\t\"pTvxY5yAQklZgb7VZFGS\": \"main-useDropTarget-pseudoPlaylist\",\n\t\"ratGUXdpLCkyXZNaJryg\": \"main-useDropTarget-show\",\n\t\"oE8LAmRhbeQqsZrQo4lb\": \"main-useDropTarget-show\",\n\t\"caTDfb6Oj7a5_8jBLUSo\": \"main-useDropTarget-track\",\n\t\"or84FBarW2zQhXfB9VFb\": \"main-useDropTarget-track\",\n\t\"HgSl1rNhQllYYZneaYji\": \"main-useDropTarget-track\",\n\t\"atsRVFhRDxRbOyXyFZjS\": \"main-userWidget-active\",\n\t\"odcjv30UQnjaTv4sylc0\": \"main-userWidget-box\",\n\t\"KAq2kDjXj2VS4eXrFL4i\": \"main-userWidget-box\",\n\t\"BsYNRaiIo2R6htfnZiuG\": \"main-userWidget-box\",\n\t\"Fxnb0xe6bL7I7W8V0p6C\": \"main-userWidget-boxCondensed\",\n\t\"SFgYidQmrqrFEVh65Zrg\": \"main-userWidget-boxCondensed\",\n\t\"eAXFT6yvz37fvS1lmt6k\": \"main-userWidget-chevron\",\n\t\"EeWTFG_vxLI5QJc1TH4F\": \"main-userWidget-displayName\",\n\t\"ERyo7m5f00o7ToFdGMCD\": \"main-userWidget-dropDownMenu\",\n\t\"pEG0W4wkbkrOYURhz82H\": \"main-userWidget-hasAvatar\",\n\t\"fw30p54zgXxgBdOMzayR\": \"main-userWidget-hasAvatar\",\n\t\"PrOCaGCRoGw7XaycfkTl\": \"main-userWidget-notificationDot\",\n\t\"EIrPk5CxH5DyLgcOY_yx\": \"main-userWidget-notificationIndicator\",\n\t\"y5mR1se0HqD3uewF5Eb6\": \"main-userWidget-screenReaderOnly\",\n\t\"YqPjzOfhtzbCf_QD3P1f\": \"main-userWidget-setupPlan\",\n\t\"RfdRTSGwulyQdDepLUTT\": \"main-userWidget-showDisplayName\",\n\t\"VdLuku6YQT4tNLT6ojlD\": \"main-userWidget-unableToUpdate\",\n\t\"NCgGw6P72qbffJyHR2Kj\": \"main-watchFeed-actionBodyWrapper\",\n\t\"SliTY9e8oKOiypDQdhlw\": \"main-watchFeed-actionBodyWrapper\",\n\t\"URPxbnUYki78KWvmWBQg\": \"main-watchFeed-actionFooterWrapper\",\n\t\"NazSI1w8xaruwFqTP3sS\": \"main-watchFeed-actionFooterWrapper\",\n\t\"_XbYNhRerNrxKQEmGVwG\": \"main-watchFeed-actionHeaderWrapper\",\n\t\"YmJS4xMTXdNQLvbP2VAt\": \"main-watchFeed-actionHeaderWrapper\",\n\t\"Ptj9KE7YszR48vu9smYv\": \"main-watchFeed-actionSection\",\n\t\"ji0qx5PBc5_4aMgNLGrp\": \"main-watchFeed-actionSection\",\n\t\"BLIxyum1wPNrFibaQ9wr\": \"main-watchFeed-addToPlaylistButton\",\n\t\"Q0Cupq3WCjD1pDiL4J7k\": \"main-watchFeed-addToPlaylistButton\",\n\t\"hrqpTk8XsoleocU2gWHD\": \"main-watchFeed-artistContainer\",\n\t\"dkbQiFBHMdijQeINl_ij\": \"main-watchFeed-artistContainer\",\n\t\"fufiJplKkge3AdhYG29S\": \"main-watchFeed-artistMetadataContainer\",\n\t\"bl3iefJaRs18m1sL93Eh\": \"main-watchFeed-artistMetadataContainer\",\n\t\"ZRW6APLCVeBbH7aeLrA6\": \"main-watchFeed-artistWrapper\",\n\t\"aiSwqZguOk1P52s9o9xP\": \"main-watchFeed-artistWrapper\",\n\t\"TfHga1ciYp079YpX_6OU\": \"main-watchFeed-background\",\n\t\"JXh51ebDftiwM49U49IA\": \"main-watchFeed-background\",\n\t\"MvqsNri2d99MH6SQlvcK\": \"main-watchFeed-backgroundPill\",\n\t\"V795GKOEZNiChr8dJcD4\": \"main-watchFeed-backgroundPill\",\n\t\"Ca5lXvgFoN6C5_gJDmEA\": \"main-watchFeed-backgroundSpacer\",\n\t\"EMcF5GoJ2mLzcp0t365T\": \"main-watchFeed-backgroundSpacer\",\n\t\"BPmQqb9D_rN4hvkCC0jg\": \"main-watchFeed-canvasContainer\",\n\t\"Ul_Er3t8veggCi1APkwp\": \"main-watchFeed-canvasContainer\",\n\t\"fhmiZPVDhaOYIlNd7Myq\": \"main-watchFeed-canvasWrapper\",\n\t\"rDA7A4UaktbiAD9VVIlB\": \"main-watchFeed-canvasWrapper\",\n\t\"F7Qc4Utwpa36JORtcEYl\": \"main-watchFeed-columnContainer\",\n\t\"JYvxp3Y58xF59FA7Mnaf\": \"main-watchFeed-columnContainer\",\n\t\"FP_XXx0FMQPJEu3WzfpM\": \"main-watchFeed-container\",\n\t\"xGrVCnYsA9aDj2f8VAj_\": \"main-watchFeed-container\",\n\t\"qgczwXDFdF_gy4gRs3LN\": \"main-watchFeed-content\",\n\t\"xvG1g4UaMyY0DW6j8XzX\": \"main-watchFeed-content\",\n\t\"cjZ23zZucJkKFMIrGZa4\": \"main-watchFeed-contentAnimation\",\n\t\"h6KcnSRTHGBMCEv288Ha\": \"main-watchFeed-contentAnimation\",\n\t\"sZNnIteDjcGaXSrb7t3W\": \"main-watchFeed-contentRow\",\n\t\"sJnarE2UKqyhLo0LFNqy\": \"main-watchFeed-contentRow\",\n\t\"MlmOtfMWMgfezN_a1qZJ\": \"main-watchFeed-contentSection\",\n\t\"ZRarvpz5og3ifOVHzGOv\": \"main-watchFeed-contentSection\",\n\t\"rCxYvbE1hq2_VEMOM6M_\": \"main-watchFeed-contentSelected\",\n\t\"yV_lauXr1J6WkogIH9dV\": \"main-watchFeed-contentSelected\",\n\t\"SySgdgYnGJ2mZyFM36JP\": \"main-watchFeed-contentWrapper\",\n\t\"YHeDUF3aquXRxYmKOs1A\": \"main-watchFeed-contentWrapper\",\n\t\"A2NgztD8CPHGPFRoT69o\": \"main-watchFeed-equalizerIcon\",\n\t\"IQsUjbPtrVLyyA5iu3zQ\": \"main-watchFeed-equalizerIcon\",\n\t\"CkAFt5XZgLBU8S0jXZgE\": \"main-watchFeed-flipContainer\",\n\t\"dErRUxXewpEkZd52uLTh\": \"main-watchFeed-flipContainer\",\n\t\"NsRfiZjjSCqTim4kM13p\": \"main-watchFeed-followButton\",\n\t\"g47sxYAVvWCq_6T4Ba5L\": \"main-watchFeed-followButton\",\n\t\"n_VwJ2YeUb7y3CHbJ3As\": \"main-watchFeed-genreContainer\",\n\t\"zrFS4My93WidFfSAb0u6\": \"main-watchFeed-genreContainer\",\n\t\"mENWYVW_PAl8OWp2Ut6e\": \"main-watchFeed-genreContent\",\n\t\"SaK6aqYnHAkgc3cG86ZW\": \"main-watchFeed-genreContent\",\n\t\"NtpYi46fEElnZKhNUPK4\": \"main-watchFeed-image\",\n\t\"iQnF1gu0Mg2rGsKVHIFn\": \"main-watchFeed-image\",\n\t\"oI9M0dyjtCBPoup_4Sxv\": \"main-watchFeed-imageWrapper\",\n\t\"bPMdcQr8gSb4AgWfkolx\": \"main-watchFeed-imageWrapper\",\n\t\"F5kvnqpgBwMGbM1mWjNS\": \"main-watchFeed-menuButton\",\n\t\"OGPXh73aLJDzhfFAdPvM\": \"main-watchFeed-menuButton\",\n\t\"Ri_fkzPuxQdOzKQf1tnw\": \"main-watchFeed-metadataSection\",\n\t\"hK5DaTfJaFpo2BJuoy5k\": \"main-watchFeed-metadataSection\",\n\t\"jlBmyjsruclK7z6ILay5\": \"main-watchFeed-metadataWrapper\",\n\t\"E0LdRRiYvrkUdZCmAXqQ\": \"main-watchFeed-metadataWrapper\",\n\t\"d9fVEV27N0lWaeQajcC2\": \"main-watchFeed-modal\",\n\t\"DJxOEatMU2PHk0cCYWoX\": \"main-watchFeed-modal\",\n\t\"RLx9IUmPpPeLH0cWnocs\": \"main-watchFeed-nextButtonInner\",\n\t\"kT3dFHdVmU0vyeE71IDE\": \"main-watchFeed-nextButtonInner\",\n\t\"iZJIqsY5Yy3szidvO6ig\": \"main-watchFeed-nextButtonWrapper\",\n\t\"XIKBfnA7TQOV1T8LLiAS\": \"main-watchFeed-nextButtonWrapper\",\n\t\"gWworaJ45IDWOdwjrZKh\": \"main-watchFeed-pillAnimationFour\",\n\t\"zs2yWiCDKxo__fskASpC\": \"main-watchFeed-pillAnimationFour\",\n\t\"wJA26c7NDa4pJmcd_khZ\": \"main-watchFeed-pillAnimationOne\",\n\t\"pGPb4TiSkhPdYEt8h2Av\": \"main-watchFeed-pillAnimationOne\",\n\t\"PAkFzXltdtGuaW_wVPZ4\": \"main-watchFeed-pillAnimationThree\",\n\t\"BWyVJ8XXZ0jRGpFaA9iW\": \"main-watchFeed-pillAnimationThree\",\n\t\"EinJaDeKltP49Pc_nCPh\": \"main-watchFeed-pillAnimationTwo\",\n\t\"FWBI05WNSb4HR8goMhai\": \"main-watchFeed-pillAnimationTwo\",\n\t\"GfTEPivZmrudh2ZLmUJE\": \"main-watchFeed-playerContainer\",\n\t\"omghgDzOcUFl6oOXYNHX\": \"main-watchFeed-playerContainer\",\n\t\"madaLABKCn3HDMHk7bBQ\": \"main-watchFeed-playerImage\",\n\t\"_bMlIQGXEMMBRZOVM71Z\": \"main-watchFeed-playerImage\",\n\t\"_C07RbGcQZqPjX3UZ9D9\": \"main-watchFeed-playlistTitle\",\n\t\"AkStH5UDLsXzudcPz_J_\": \"main-watchFeed-playlistTitle\",\n\t\"ksxwRgG3qxwghi5X7wvE\": \"main-watchFeed-progressBar\",\n\t\"edeYmiJw2Fd9EFB2SQZo\": \"main-watchFeed-progressBar\",\n\t\"w091W9_8qRMxTEGofEej\": \"main-watchFeed-queueButton\",\n\t\"d9bbNw4YiAXpQpjrSgBJ\": \"main-watchFeed-queueButton\",\n\t\"oyVGfynGkVn_6VcTnd6h\": \"main-watchFeed-scrollToBottomButton\",\n\t\"bsYqS4l_sJOvBGGeudDj\": \"main-watchFeed-scrollToBottomButton\",\n\t\"fCykqEza3WtgKmxjL0C1\": \"main-watchFeed-scrollToTopButton\",\n\t\"OcwUYvKcnj9kvPBwybGI\": \"main-watchFeed-scrollToTopButton\",\n\t\"lu2vixiUgcBKQZ3WxslE\": \"main-watchFeed-shareButton\",\n\t\"pvGZ831aNzHTQMZ8CA_u\": \"main-watchFeed-shareButton\",\n\t\"VAO32xudyOddSHyKq31b\": \"main-watchFeed-showBackground\",\n\t\"IId345zLSrSuzIWtN4Sd\": \"main-watchFeed-showBackground\",\n\t\"X6BLCPn79TtvdLQLuSEn\": \"main-watchFeed-songArtist\",\n\t\"Cypiobiw1yGi5E9N48gJ\": \"main-watchFeed-songArtist\",\n\t\"HLY280CnQhfcMxgRsmhx\": \"main-watchFeed-songArtistListeners\",\n\t\"q2y15bQqkJDcBixyP5oa\": \"main-watchFeed-songArtistListeners\",\n\t\"IJgMYRGDiAtQjDaMNfIf\": \"main-watchFeed-songTitle\",\n\t\"kJqlixofqKau1v1r3YSE\": \"main-watchFeed-songTitle\",\n\t\"LHdDNVCKKrK088dZzmuy\": \"main-watchFeed-songTitleWrapper\",\n\t\"yJJKqce9DPVQnrFseKKU\": \"main-watchFeed-songTitleWrapper\",\n\t\"x2geOlp2y1nFZSOcBBlg\": \"main-watchFeed-soundButtonWrapper\",\n\t\"Qtx4b7Wc1c7NEX49CMeH\": \"main-watchFeed-soundButtonWrapper\",\n\t\"QY_q7DYy8V1MLOWFwSdn\": \"main-watchFeed-willChange\",\n\t\"TaaunKIj990MWZKrBWHW\": \"main-watchFeed-willChange\",\n\t\"kzlksKUC9aLBM62Bckxo\": \"main-whatsNewFeed-actions\",\n\t\"bcU463yG4LHEtlBCOa8Q\": \"main-whatsNewFeed-buttonAlwaysVisible\",\n\t\"n5y3jDsz8siC0JsxtS83\": \"main-whatsNewFeed-buttonVisibleOnHover\",\n\t\"h8Dik_naJfcSoNM_4FKX\": \"main-whatsNewFeed-content\",\n\t\"lgo_zhUnwxG2Qan4WLBY\": \"main-whatsNewFeed-dateAndTime\",\n\t\"CONFZNJkrMwpneVuYWXC\": \"main-whatsNewFeed-description\",\n\t\"eyWbmr17oov600GluVsy\": \"main-whatsNewFeed-divider\",\n\t\"Z1qkHjt67N3DaWqnEM0w\": \"main-whatsNewFeed-imageContainer\",\n\t\"j45TgktnaHqgEqeO3eXI\": \"main-whatsNewFeed-largeImage\",\n\t\"pNM_LHG1Yp9WV_mBN6du\": \"main-whatsNewFeed-list\",\n\t\"nQTI7556vneVslJT_fJv\": \"main-whatsNewFeed-listContent\",\n\t\"BQD_pE0Nva_z6z7CvZww\": \"main-whatsNewFeed-listEpisodeBody\",\n\t\"ymzFgL9iToSvtRvCWY3b\": \"main-whatsNewFeed-listExplicitIcon\",\n\t\"TTFwcgaxN1VxbkjC80_Z\": \"main-whatsNewFeed-listFallbackIcon\",\n\t\"nHEYUQKiBurmQ7SD4uzF\": \"main-whatsNewFeed-listFooter\",\n\t\"LLxSqFbzfI5SPTK_22ZU\": \"main-whatsNewFeed-listHeader\",\n\t\"GBycF4NUOkA5ZUHneLYa\": \"main-whatsNewFeed-listImageWrapper\",\n\t\"LXfpmhx6aZ9YVV8x4PEI\": \"main-whatsNewFeed-listPlayButton\",\n\t\"MCctbQkmLVbJyz3NSbq2\": \"main-whatsNewFeed-listRow\",\n\t\"_MBf1tVqzfo2AefcuHwv\": \"main-whatsNewFeed-listRow\",\n\t\"ThG4UqWk7ASXCMm69Opn\": \"main-whatsNewFeed-listSubtitleLink\",\n\t\"zKLP_l7gmiomI7kW3BMw\": \"main-whatsNewFeed-listTimeAgo\",\n\t\"uuqowKOQLu0zbk4zguPM\": \"main-whatsNewFeed-medium\",\n\t\"Z3LszrbA1M2fpLsEhlQT\": \"main-whatsNewFeed-progressBar\",\n\t\"uSj66OUSURBfFwFhD7Ed\": \"main-whatsNewFeed-separator\",\n\t\"sQnWbTOGnPZBNn3lZTtI\": \"main-whatsNewFeed-separatorAlbum\",\n\t\"nzZgeVfx1Y6nZe7Z9DsA\": \"main-whatsNewFeed-showImage\",\n\t\"oezNMICqWdJHdR3QV9La\": \"main-yourEpisodes-coverContainer\",\n\t\"ioDnN5QkrvTdd8oOrl2h\": \"main-yourEpisodes-coverIcon\",\n\t\"U_iGRN8gxm_rKG_w2EzR\": \"main-yourEpisodes-yourEpisodesCard\",\n\t\"vCaNVEuqazhZFQNcVHZj\": \"main-yourEpisodesButton-yourEpisodesIcon\",\n\t\"OMCDc2F7g_AufJAtaKfL\": \"main-yourLibraryX-button\",\n\t\"cljOO1tpzixzXctKJucK\": \"main-yourLibraryX-button\",\n\t\"prGqQr33U0mG14TJ5V8a\": \"main-yourLibraryX-collapseButton\",\n\t\"FTiXRW7kAldHmLaxVQ2N\": \"main-yourLibraryX-collapseButton\",\n\t\"e_r3VdhCt6ZHTRmscHgh\": \"main-yourLibraryX-collapseButton\",\n\t\"BhKGkKPprp2wm9bvfRKG\": \"main-yourLibraryX-collapseButtonIsCollapsed\",\n\t\"RAWO6AczuDMOTI0qAc0a\": \"main-yourLibraryX-collapseButtonWrapper\",\n\t\"i_FRcsaqNCEJmoyObIP0\": \"main-yourLibraryX-collapseButtonWrapper\",\n\t\"ksmcxhImUuj3_s1lcIm0\": \"main-yourLibraryX-createButton\",\n\t\"EZFyDnuQnx5hw78phLqP\": \"main-yourLibraryX-entryPoints\",\n\t\"lHJd4oSttKLxkxuoZ0Lr\": \"main-yourLibraryX-entryPoints\",\n\t\"OR9izNpUGviUYBP_yQR2\": \"main-yourLibraryX-entryPoints\",\n\t\"wBsWS202aGdsul2kEGUf\": \"main-yourLibraryX-filterArea\",\n\t\"paiZmlAHHhmZonuGJRAr\": \"main-yourLibraryX-filterArea\",\n\t\"rjsuxO8gqIyaiYTHNpOQ\": \"main-yourLibraryX-filterArea\",\n\t\"MLbFLVC33caOj3FgSQMC\": \"main-yourLibraryX-filters\",\n\t\"msaOP0MYt3paJGpbdeJs\": \"main-yourLibraryX-filters\",\n\t\"UvXqRORKQr_N3jlgGTcS\": \"main-yourLibraryX-header\",\n\t\"HjPqU_UW2egr14mRSom9\": \"main-yourLibraryX-header\",\n\t\"tyMY5Nyfm8lQMRQ3NF8c\": \"main-yourLibraryX-header\",\n\t\"j8iKBDzqTDtnDv4XbmrK\": \"main-yourLibraryX-headerContent\",\n\t\"tAfozCQs48q1JYdphYXi\": \"main-yourLibraryX-headerContent\",\n\t\"IKza_DZb6poXFThFwlFt\": \"main-yourLibraryX-headerContent\",\n\t\"O2Vp_sNHMLHUcgMPVnOA\": \"main-yourLibraryX-headerIsCollapsed\",\n\t\"iYP0xuQiJCgi7gx1jUPJ\": \"main-yourLibraryX-headerIsCollapsed\",\n\t\"qR4uulT7QiScqfhJKJ2K\": \"main-yourLibraryX-headerIsCollapsed\",\n\t\"TxO7Ee8iwqBpkgznKHsd\": \"main-yourLibraryX-iconOnly\",\n\t\"TiJahFhH6KZaibhRtEOA\": \"main-yourLibraryX-isFlattened\",\n\t\"y2UicQnlTq148rL8Y0jp\": \"main-yourLibraryX-isScrolled\",\n\t\"hjb8tUL3rpUa0ez4ZtAj\": \"main-yourLibraryX-library\",\n\t\"wM72343CksOCaL3bZvKK\": \"main-yourLibraryX-library\",\n\t\"doInDAjF8E_MHAPBv9fb\": \"main-yourLibraryX-library\",\n\t\"g581mszC8syz99uMMWsr\": \"main-yourLibraryX-libraryAfterDrop\",\n\t\"tXkgloQ88DHF_inQE69J\": \"main-yourLibraryX-libraryBeforeDrop\",\n\t\"PpUTJL2NIYDUnmfzVIbE\": \"main-yourLibraryX-libraryContainer\",\n\t\"hgJel0bLlS_1Uf0EIfSA\": \"main-yourLibraryX-libraryContainer\",\n\t\"vlH99nxvCKwDGQrD0B0M\": \"main-yourLibraryX-libraryContainer\",\n\t\"_0FuodatXU4_fToYAuYtY\": \"main-yourLibraryX-libraryFilter\",\n\t\"uBqliBvyhxGsiql8_OJv\": \"main-yourLibraryX-libraryFilter\",\n\t\"KluIYRb68APBNGHHItUz\": \"main-yourLibraryX-libraryFilter\",\n\t\"dNphEfQzPRaQufS04jUm\": \"main-yourLibraryX-libraryIsCollapsed\",\n\t\"kJ_Q4aphh_uCJCZdzPpD\": \"main-yourLibraryX-libraryIsExpanded\",\n\t\"_XBlEstA77PgWTJzWbe1\": \"main-yourLibraryX-libraryItem\",\n\t\"_K79lE9KrIAkl_bUSSUM\": \"main-yourLibraryX-libraryItemContainer\",\n\t\"WxM1eb7qnneSkMiT4dvw\": \"main-yourLibraryX-libraryItemContainer\",\n\t\"IfMCntz4HO4NOjoFdO2v\": \"main-yourLibraryX-libraryItemContainer\",\n\t\"oLOECYtBhVmBtyisKwew\": \"main-yourLibraryX-libraryOnDrop\",\n\t\"ifVI2CEdOZGgMWIUN2Cw\": \"main-yourLibraryX-libraryRootlist\",\n\t\"_W_0W9Uld1vxrRfsgdQR\": \"main-yourLibraryX-libraryRootlist\",\n\t\"lJ0crV7IZJ8PxJZPA8x6\": \"main-yourLibraryX-libraryRootlist\",\n\t\"RGofdOZulhL2p9MRA5hg\": \"main-yourLibraryX-librarySort\",\n\t\"XZRX_ea9eNn4rOLpNGLp\": \"main-yourLibraryX-librarySortWrapper\",\n\t\"GG5skerNjHXAO6tXyyY0\": \"main-yourLibraryX-librarySortWrapper\",\n\t\"qEiVyQ28VnOKb0LeijqL\": \"main-yourLibraryX-listItem\",\n\t\"vSC5QuwmzUhqUNWdMTJ5\": \"main-yourLibraryX-listItem\",\n\t\"lCgfN9VxRRQtVKTLxWn4\": \"main-yourLibraryX-listItem\",\n\t\"ojrThQm1wxR2gZ6GntJB\": \"main-yourLibraryX-listItemGroup\",\n\t\"Dtr130mQSR0j8k7bu5KS\": \"main-yourLibraryX-listItemGroupCompact\",\n\t\"nZSNG58XEPTX69mkNi9n\": \"main-yourLibraryX-listRowEntityImage\",\n\t\"G7aCptcOZswI1fN6dGkO\": \"main-yourLibraryX-listRowIcon\",\n\t\"o_wMyH9_LbAmIwlVqsF0\": \"main-yourLibraryX-listRowIconWrapper\",\n\t\"d33vqKRxohS9RxzCic1D\": \"main-yourLibraryX-listRowLink\",\n\t\"LSrBzBljgLeDhcm3Soye\": \"main-yourLibraryX-listRowSubtitle\",\n\t\"HdTF8gsRm5MgWvEYlokG\": \"main-yourLibraryX-listRowSubtitleLeadingWrapper\",\n\t\"gj1L_SVM_H8GteWMdEF_\": \"main-yourLibraryX-listRowTitleLink\",\n\t\"LU0q0itTx2613uiATSig\": \"main-yourLibraryX-navItem\",\n\t\"KAcp7QFuEYSouAsuC5i_\": \"main-yourLibraryX-navItem\",\n\t\"AlqlOMBoMUPbFmLmkhhg\": \"main-yourLibraryX-navItemOffline\",\n\t\"fFvRIGtMIgsOLVSq_JNS\": \"main-yourLibraryX-navItems\",\n\t\"QuHe04rU4bj0Z5U9E2Tk\": \"main-yourLibraryX-navItems\",\n\t\"UYeKN11KAw61rZoyjcgZ\": \"main-yourLibraryX-navLink\",\n\t\"hNvCMxbfz7HwgzLjt3IZ\": \"main-yourLibraryX-navLink\",\n\t\"DzWw3g4E_66wu9ktqn36\": \"main-yourLibraryX-navLinkActive\",\n\t\"Bh3b80dIrbc0keQ9kdso\": \"main-yourLibraryX-navLinkActive\",\n\t\"ep0_ry7CLwf91E1rN6Cv\": \"main-yourLibraryX-pulse\",\n\t\"B_HdWVSEWPHaOf9LQAtC\": \"main-yourLibraryX-rowCover\",\n\t\"Gw7E7MkWci1ttQhb4EK0\": \"npv-exitFullScreenButton-button\",\n\t\"gIobRDHAxkAvUaF4_OOL\": \"npv-nowPlayingBar-center\",\n\t\"tr1hDrJgoPSbMXlXU_sl\": \"npv-nowPlayingBar-container\",\n\t\"mbUrqWP55sK6zhspiR72\": \"npv-nowPlayingBar-controls\",\n\t\"N5cWYDvyLrfnyMZuqQHo\": \"npv-nowPlayingBar-left\",\n\t\"FTi9QEhetf4Q4__5sb4S\": \"npv-nowPlayingBar-right\",\n\t\"SVGHXIQcH9HYU7uGITw5\": \"npv-nowPlayingBar-section\",\n\t\"pn5V0OzovI9p6b8nWq8p\": \"playback-bar\",\n\t\"KfxBdL0Zay0br7dCfxbV\": \"playback-bar\",\n\t\"IPbBrI6yF4zhaizFmrg6\": \"playback-bar__progress-time-elapsed\",\n\t\"SRm6aI_til4K8p38XAxv\": \"playback-bar__progress-time-elapsed\",\n\t\"p1ULRzPc4bD8eQ4T_wyp\": \"playback-progressbar\",\n\t\"fDGGPFmD54w05ut8Ns4S\": \"playback-progressbar\",\n\t\"MFyTjrF4GU5ab2BrrOds\": \"playback-progressbar\",\n\t\"B1vgcMXBqOxgMxXh5j1f\": \"playback-progressbar-container\",\n\t\"tNhfHQhWhj9RoA1rfwY5\": \"playback-progressbar-container\",\n\t\"DFtdzavKSbEhwKYkPTa6\": \"playback-progressbar-isInteractive\",\n\t\"WFFDxnFUICVFNvvNU1IE\": \"playback-progressbar-isInteractive\",\n\t\"OEbZDzXdU1OUQactz3ZA\": \"playback-progressbar-isInteractive\",\n\t\"gItY2hnfCB4TsDJCkPiO\": \"player-controls\",\n\t\"O56NBOTLyueNotL56zJt\": \"player-controls\",\n\t\"XrZ1iHVHAPMya3jkB2sa\": \"player-controls__buttons\",\n\t\"fYf41RQrFiGX4KJcSq_5\": \"player-controls__buttons\",\n\t\"NKUrT1GciYXAEEUtagN1\": \"player-controls__left\",\n\t\"GcbM2tnkJCvKOjRfp8RQ\": \"player-controls__left\",\n\t\"Qt226Z4rBQs53aedRQBQ\": \"player-controls__right\",\n\t\"bCCN4Fy0V1eENMKmu7pM\": \"player-controls__right\",\n\t\"JzyZE2R09wq7xtjECDeR\": \"playlist-inlineSearchBox-clearButton\",\n\t\"FeWwGSRANj36qpOBoxdx\": \"playlist-inlineSearchBox-filterInput\",\n\t\"YAYCVnYpPvmYV4JyTmn5\": \"playlist-inlineSearchBox-filterInputContainer\",\n\t\"_h5mio6VqcL_fmiXAb1S\": \"playlist-inlineSearchBox-overlay\",\n\t\"sgZ_MgcS1NlccH19fYsa\": \"playlist-inlineSearchBox-searchIcon\",\n\t\"Hfgj4Zbb2ijt8g54MlCA\": \"playlist-inlineSearchBox-searchIconContainer\",\n\t\"Bdcf5g__Rug3TGqSdbiy\": \"playlist-playlist-actionBarBackground-background\",\n\t\"CeSZLCa3sD6XCrx_ld6S\": \"playlist-playlist-actionBarBackground-background\",\n\t\"rARdlCShKVQsvuXamFOX\": \"playlist-playlist-artistResultListTitle\",\n\t\"a4FkPOXWBc0nK4yzsJCf\": \"playlist-playlist-concertsFooter\",\n\t\"IWWS0F3oiajJG7nlrjXj\": \"playlist-playlist-ctaLink\",\n\t\"mWbx87vgssexrOs2tx4I\": \"playlist-playlist-disclaimerContainer\",\n\t\"_Z2TnFjt8GB5ryOtvyti\": \"playlist-playlist-emptySearchTermContainer\",\n\t\"Bl_kg24BjWgcXPokgEKy\": \"playlist-playlist-emptyStateContainer\",\n\t\"yP3JLuwUNDIQHxRFilK3\": \"playlist-playlist-header\",\n\t\"QD13ZfPiO5otS0PU89wG\": \"playlist-playlist-heading\",\n\t\"tzeKawjOOKFw1KfQ34mG\": \"playlist-playlist-icon\",\n\t\"KzOZOlCPgREEBCJH1Ieg\": \"playlist-playlist-leadingSlot\",\n\t\"ZbLneLRe2x_OBOYZMX3M\": \"playlist-playlist-list\",\n\t\"rjdQaIDkSgcGmxkdI2vU\": \"playlist-playlist-listItem\",\n\t\"u9KYiVXeDRQDGlTDH6rM\": \"playlist-playlist-noBooklistSupportContainer\",\n\t\"umouqjSkMUbvF4I_Xz6r\": \"playlist-playlist-paragraph\",\n\t\"dZ3U5sTGUTdanNamXe1z\": \"playlist-playlist-playlist\",\n\t\"rezqw3Q4OEPB1m4rmwfw\": \"playlist-playlist-playlistContent\",\n\t\"YdoIqRxigDKvBm7a7GSq\": \"playlist-playlist-playlistContent\",\n\t\"xgmjVLxjqfcXK5BV_XyN\": \"playlist-playlist-playlistDescription\",\n\t\"fUYMR7LuRXv0KJWFvRZA\": \"playlist-playlist-playlistDescription\",\n\t\"lykOktr3YIn79xOvVQtS\": \"playlist-playlist-playlistDescription\",\n\t\"oq1ci28WPaRsWkvRiB_J\": \"playlist-playlist-playlistImageContainer\",\n\t\"hVcUafGrnsA6nD1dJzc5\": \"playlist-playlist-playlistInlineCurationBackButton\",\n\t\"FC40AOSbVM9LXjVi7bjO\": \"playlist-playlist-playlistInlineCurationCloseButton\",\n\t\"Ykd_JWqkR9gSLHISDBwP\": \"playlist-playlist-playlistInlineCurationSection\",\n\t\"SMJIXlalPk_TESlyt2pC\": \"playlist-playlist-playlistInlineCurationTitle\",\n\t\"g9xHCCSXDR8S5NvTbfwL\": \"playlist-playlist-playlistInlineCurationWrapper\",\n\t\"pbkk9BuHlY36lmWvEmbg\": \"playlist-playlist-promoImage\",\n\t\"DWkbhLMcDefEZwJ5jXCq\": \"playlist-playlist-promoRow\",\n\t\"byOUxNEoiJOtBN6xTY24\": \"playlist-playlist-promoTitle\",\n\t\"kwe0I8sSNMv3gYBjkRYP\": \"playlist-playlist-recommendedTrackList\",\n\t\"QmGi2oa43BTcEZ5MCr9T\": \"playlist-playlist-refreshButton\",\n\t\"KodyK77Gzjb8NqPGpcgw\": \"playlist-playlist-searchBoxContainer\",\n\t\"Wss0KoPtWlohVbZKp8n3\": \"playlist-playlist-searchBoxContainer\",\n\t\"sAPXlA_oxu_8x1Cn0NTC\": \"playlist-playlist-searchResultListContainer\",\n\t\"STDuzt77yRCueC4Ohenl\": \"playlist-playlist-seeMore\",\n\t\"NCKSUYdZaTMrobq8ilkc\": \"playlist-playlist-subtitle\",\n\t\"PZkwbwJD1afoCmJkGt8w\": \"playlist-playlist-top\",\n\t\"jpVuvMOCbpaRr_6FLf3W\": \"playlist-playlist-whiteOpacity\",\n\t\"kHu_FTRgoBLSLeAJtyKY\": \"profile-editImage-editImageButtonContainer\",\n\t\"vASn9mcl4gxUuplIX9Xy\": \"profile-editImage-editImageButtonContainer\",\n\t\"Ws8Ec3GREpT5PAUesr9b\": \"profile-editImage-imageContainer\",\n\t\"wCWKq_kJnqpBX20J2047\": \"profile-editImage-imageContainer\",\n\t\"zHeo4VUxytwm6Ptr0QyA\": \"profile-userEditDetails-closeButton\",\n\t\"bGC0b5iP1T6jelgvzJi6\": \"profile-userEditDetails-closeButton\",\n\t\"XwNfIrI6_hCa_9_T2cQB\": \"profile-userEditDetails-container\",\n\t\"D5Oc01xtlfhXQZqrlFzQ\": \"profile-userEditDetails-container\",\n\t\"so0bdX3oZH6YW5_nGxIR\": \"profile-userEditDetails-content\",\n\t\"pGEUqO9v_snvTufHtvLg\": \"profile-userEditDetails-content\",\n\t\"zGbjZMZ1DTx4futEbN9l\": \"profile-userEditDetails-disclaimer\",\n\t\"DD5nCHAWIgFQ7W7xUYkK\": \"profile-userEditDetails-disclaimer\",\n\t\"aM3plU4zzDqjWlvUHGYb\": \"profile-userEditDetails-header\",\n\t\"JjuNUgcpU5G8mP9fPFVx\": \"profile-userEditDetails-header\",\n\t\"F8_EX1AeKxXNSeh1qiHq\": \"profile-userEditDetails-image\",\n\t\"E_XIT3yw1mv2SGH9DwBO\": \"profile-userEditDetails-image\",\n\t\"wvLAEV5wF5C5ej6rvimT\": \"profile-userEditDetails-label\",\n\t\"P_Wd3HXMzT3JT4ftZ53c\": \"profile-userEditDetails-label\",\n\t\"gAQfzAUp1FuSXODeZJfP\": \"profile-userEditDetails-labelText\",\n\t\"zalgOdcLXMnwsiv2gej1\": \"profile-userEditDetails-labelText\",\n\t\"uj7hczcCH1dZpse8Kfmi\": \"profile-userEditDetails-name\",\n\t\"X6ndokDuE6CDp3667Fl1\": \"profile-userEditDetails-name\",\n\t\"oN9QVvJKEtdTH3HGfCu1\": \"profile-userEditDetails-nameInput\",\n\t\"DnJD_wCahoYkGOVQPqxf\": \"profile-userEditDetails-nameInput\",\n\t\"MDb7QhAtHeyM4gKj8j8t\": \"profile-userEditDetails-saveButton\",\n\t\"xNF0wfUgjZElohP3dgiS\": \"profile-userEditDetails-saveButton\",\n\t\"umiKMm5NVr5UeBJCHS6U\": \"profile-userOverview-container\",\n\t\"wDIZ2yYKjfGI68I4cZ98\": \"profile-userOverview-header\",\n\t\"rMpf7sfaPDcj387_52fA\": \"profile-userOverview-imageContainer\",\n\t\"jzhwZKbfx4vrC_MYd_7c\": \"profile-userOverview-section\",\n\t\"MWWPQQjbjRfoGdPD8D68\": \"profile-userOverview-subPage\",\n\t\"uJxNEI2k7x8UCDdMKELt\": \"profile-userOverview-title\",\n\t\"kWCnF32FrVtGHmTy8QeV\": \"profile-userOverview-topTrackSubPage\",\n\t\"TywOcKZEqNynWecCiATc\": \"progress-bar\",\n\t\"NP0jD9fPfkH_VmIJ4hEg\": \"progress-bar\",\n\t\"LS6q7yFFlYCqXoVxEETT\": \"progress-bar\",\n\t\"Vis45PPawTyED7Lt2_LI\": \"progress-bar__slider\",\n\t\"A9z4_R9gegKhgs_3D7Os\": \"progress-bar__slider\",\n\t\"sUkzLbFQJMcD0k4CVDRl\": \"progress-bar__slider\",\n\t\"DuvrswZugGajIFNXObAr\": \"progress-bar--isDragging\",\n\t\"gTvMl6pwfRD9PobMSB5x\": \"queue-queuePage-emptyContainer\",\n\t\"hNAQG0TAe2WFYyf_iZEB\": \"queue-queuePage-emptyContainerTitle\",\n\t\"Zhzrb2k9nQRActS2lp4U\": \"queue-queuePage-findSomething\",\n\t\"DG9CsoFIptJhAneKoo_F\": \"queue-queuePage-header\",\n\t\"H3Puuvc2nV0GoZRrfpRS\": \"queue-queuePage-nextFrom\",\n\t\"HckHyQocDDePWQL2baOY\": \"queue-queuePage-nextInQueue\",\n\t\"rHpv7osDRvs3SUPMpQ_g\": \"queue-queuePage-queuePage\",\n\t\"jf2HafzDEI9jn7Yo05eM\": \"queue-queuePage-subHeader\",\n\t\"oaNVBli46GtVjaQKB15g\": \"queue-tabBar-active\",\n\t\"FvDsfgxSvLvL3q8d7nQv\": \"queue-tabBar-chevron\",\n\t\"Nts_ArOCGeROTDZND3M6\": \"queue-tabBar-header\",\n\t\"muYk5XIwKmqR9iNibk_f\": \"queue-tabBar-headerIsCentered\",\n\t\"OEFWODerafYHGp09iLlA\": \"queue-tabBar-headerItem\",\n\t\"JdlKTdpMquftpMwwegZo\": \"queue-tabBar-headerItemLink\",\n\t\"m20ShRDiGGDpJ5LSABTi\": \"queue-tabBar-moreButton\",\n\t\"Hvv0e7WKQ4kyftgSQJhg\": \"queue-tabBar-moreButtonActive\",\n\t\"vhW0kRN8JJD5UwW4TdXi\": \"queue-tabBar-nav\",\n\t\"QdB2YtfEq0ks5O4QbtwX\": \"Root__cinema-view\",\n\t\"IiNKULzwo9JgYzlYVmhH\": \"Root__cinema-view\",\n\t\"FWlHsHhD0hSw1ldIXnOF\": \"Root__cinema-view--controls-hidden\",\n\t\"D8hDVfDlaGGt34V4nDGA\": \"Root__cinema-view--controls-hidden\",\n\t\"nRSfonXHVr6utXYgk2Ui\": \"Root__globalNav\",\n\t\"wp7mZFPzV7Qmo51F0NA_\": \"Root__globalNav\",\n\t\"wgtzoAN2iFV0pENAqJko\": \"Root__globalNav\",\n\t\"jEMA2gVoLgPQqAFrPhFw\": \"Root__main-view\",\n\t\"HD6RiDXIzzF9i4Bx26AE\": \"Root__main-view\",\n\t\"mMjg1Gizg9kYk8ILoTdp\": \"Root__main-view-overlay\",\n\t\"BdcvqBAid96FaHAmPYw_\": \"Root__nav-bar\",\n\t\"WBFaUw_oOfN2m4aTxggt\": \"Root__nav-bar\",\n\t\"JG5J9NWJkaUO9fiKECMA\": \"Root__now-playing-bar\",\n\t\"f9pLH3HRZQxdDLzNqKjE\": \"Root__now-playing-bar\",\n\t\"OTfMDdomT5S7B5dbYTT8\": \"Root__right-sidebar\",\n\t\"lAtoMFm8vg4yAlGztUxI\": \"Root__right-sidebar\",\n\t\"PHgyArRLVFknlaOm31ID\": \"Root__top-bar\",\n\t\"ZQftYELq0aOsg6tPbVbV\": \"Root__top-container\",\n\t\"POZtIm1wHFiwlxZY5i0a\": \"Root__top-container\",\n\t\"H1bRFdpa3qfekTVTeDwC\": \"Root__top-container--has-notice-bar\",\n\t\"WIPpgUp9J37Dwd0ZJnv0\": \"Root__top-container--right-sidebar-hidden\",\n\t\"lPapCDz3v_LipgXwe8gi\": \"Root__top-container--right-sidebar-hidden\",\n\t\"EBaPq6VUr6kjeHD9Wf2s\": \"Root__top-container--transition-enter\",\n\t\"nxyZPOEjDd5ToiXtSgdA\": \"Root__top-container--transition-exit\",\n\t\"v8nEufWSPrv1ql9ZdMko\": \"search-modal-emptySearchTermContainer\",\n\t\"sFFh5DkVxeEcgBGFOvUE\": \"search-modal-emptyStateContainer\",\n\t\"AnelgzgI75Dckf_LHUiK\": \"search-modal-entityImage\",\n\t\"aIWRvSjvEN4rTMCIi4vG\": \"search-modal-hasResults\",\n\t\"kn5N6aKpq6ebWinhrPPK\": \"search-modal-hidden\",\n\t\"v2oO4ItuH_0zk3OFj5dh\": \"search-modal-input\",\n\t\"QWeCmvys_7VINTbfUmGB\": \"search-modal-input\",\n\t\"kQ22nY00NOOrZjfmRP5J\": \"search-modal-inputContainer\",\n\t\"sKrYQkHlFOyAc0bM142q\": \"search-modal-isSelected\",\n\t\"EieXgtfUJKc4XQugVglV\": \"search-modal-key\",\n\t\"NU8xwWC0RWBRh_PBJdJe\": \"search-modal-keyboard-accessibility-bar\",\n\t\"SUOB9gChfkiToLTPl9Bc\": \"search-modal-listbox\",\n\t\"DoibN62ZFcOCvZ0f6xK5\": \"search-modal-modalAfterOpen\",\n\t\"_ZcO2wuO5d8P3TbjEukA\": \"search-modal-modalBase\",\n\t\"s75RW4QQV6LZ_NCdFtag\": \"search-modal-modalBeforeClose\",\n\t\"_p8ywioveAdTZ8yZmPfr\": \"search-modal-modalWrapper\",\n\t\"kUkjSLUuPyag37OAbVPH\": \"search-modal-resultItem\",\n\t\"ssvI7dCe2ZiLKChmS8tG\": \"search-modal-resultItem\",\n\t\"zi377dMLSwXnFiejYnRa\": \"search-modal-searchBar\",\n\t\"TQb3mB9R6qGsxvPnCurA\": \"search-modal-searchBar\",\n\t\"HN_3fmk5t15DGlzDbx1_\": \"search-modal-searchIcon\",\n\t\"NG1F0VTHk73cEJ8TNfOn\": \"search-modal-searchIcon\",\n\t\"wIyyGaSPOHR78wksX3Us\": \"search-modal-searchModalInstructions\",\n\t\"I9yJ0MC3kmodVJJlA6iq\": \"search-modal-searchResultRow\",\n\t\"tz3aYeI1uG6kMzJOPWr6\": \"search-modal-searchResultTitle\",\n\t\"TAHnl8KATdqiQLuz2TLv\": \"search-modal-searchResultType\",\n\t\"xol36rXFgZ_biOcw6Czk\": \"search-recentSearches-narrowPage\",\n\t\"khkfPsJuVBQyL_5cLT7y\": \"search-recentSearches-searchPageGrid\",\n\t\"a7lvtXATo3HALtrsOHtO\": \"search-recentSearches-seeAll\",\n\t\"rvvoAdb7aaUPYRasW7sK\": \"search-searchBrowse-browseAllContainer\",\n\t\"UdXTcsz1eiiInKThkfYp\": \"search-searchBrowse-browseAllWrapper\",\n\t\"M7LKuAFiIKaigK0fVguF\": \"search-searchBrowse-browseAllWrapper\",\n\t\"CCi1L2OQvgdZvxkRHeKE\": \"search-searchBrowse-SearchBrowse\",\n\t\"ijZQH9pePkbB2MbJHCJV\": \"search-searchCategory-carousel\",\n\t\"efpPrkQXWhVHykZxOGCQ\": \"search-searchCategory-carousel\",\n\t\"XTk61Y8OkBdUT6Wj4F6i\": \"search-searchCategory-carouselButton\",\n\t\"bsdZjMeYT0eYpTXrGNaH\": \"search-searchCategory-carouselButton\",\n\t\"VfDGbMWaJe9rcefizTNk\": \"search-searchCategory-carouselButtonVisible\",\n\t\"Nd2dSpwo9xYae8YuQIkb\": \"search-searchCategory-carouselButtonVisible\",\n\t\"KjPUGV8uMbl_0bvk9ePv\": \"search-searchCategory-categoryGrid\",\n\t\"TGtxFIzyLG46VAEOCaiI\": \"search-searchCategory-categoryGrid\",\n\t\"RXEjGtcNKiPQFxo613jX\": \"search-searchCategory-categoryGrid\",\n\t\"ZWI7JsjzJaR_G8Hy4W6J\": \"search-searchCategory-categoryGridItem\",\n\t\"UnwG2v9ISmcUhnjKj22Y\": \"search-searchCategory-categoryGridItem\",\n\t\"e179_Eg8r7Ub6yjjxctr\": \"search-searchCategory-container\",\n\t\"XAwhJzXeTM5Iv2jLMCEj\": \"search-searchCategory-container\",\n\t\"bMurPtRDRv5LuN78MTVG\": \"search-searchCategory-contentArea\",\n\t\"JDUqvfRssLaT4MgywPx0\": \"search-searchCategory-contentArea\",\n\t\"fVB_YDdnaDlztX7CcWTA\": \"search-searchCategory-SearchCategory\",\n\t\"qG4q41T8PJl0SkVgUeJc\": \"search-searchCategory-SearchCategory\",\n\t\"VIeVCUUETJyYPCDpsBif\": \"search-searchCategory-wrapper\",\n\t\"IDNDdMa6ACThrEsGWsXX\": \"search-searchCategory-wrapper\",\n\t\"nGARy02O1AklvHT7OBLA\": \"search-searchResult-searchResultGrid\",\n\t\"iGyMsGo7FgYQQThBj2y9\": \"search-searchResult-topResult\",\n\t\"eITFAR9yPwhjL_2gxB09\": \"search-searchResult-topResultCard\",\n\t\"Lj3brgOJmjcq6MQ22XKq\": \"search-searchResult-tracklist\",\n\t\"QVIrLvegL13F9cEdMqfT\": \"search-searchResult-tracklistContainer\",\n\t\"rP1oFnzzvss0GV6VPgGG\": \"search-searchResult-tracklistHeader\",\n\t\"PW9eULMYYH14XQgoJ0ui\": \"search-searchResult-tracklistHeaderText\",\n\t\"XQakH0M0GDc6g6JKeyds\": \"search-searchResult-tracklistHeaderWrapper\",\n\t\"rjgEnbv42_EUDbaiZnA2\": \"search-searchResult-tracklistLong\",\n\t\"EbZrO5qZMclA_AaI3NV8\": \"search-searchResult-tracklistShort\",\n\t\"DbMYFmOEEz9PH1h1zK9n\": \"show-episodeBlock-actions\",\n\t\"LbePDApGej12_NyRphHu\": \"show-episodeBlock-description\",\n\t\"upo8sAflD1byxWObSkgn\": \"show-episodeBlock-descriptionContainer\",\n\t\"hTRqaN61SDG95erQGMmx\": \"show-episodeBlock-episodeBlock\",\n\t\"V0pEigrddg3VxP_sTdAJ\": \"show-episodeBlock-header\",\n\t\"ij5_Bi2LfqgWwHzQBXJS\": \"show-episodeBlock-imageContainer\",\n\t\"y9kEPjDek0J80YRf8JJw\": \"show-episodeBlock-metadata\",\n\t\"o_TP9z7A8LQvMXujJC7N\": \"show-episodeBlock-showImage\",\n\t\"bG5fSAAS6rRL8xxU5iyG\": \"show-episodeBlock-title\",\n\t\"HLixBI5DbVZNC6lrUbAB\": \"show-episodeBlock-titleContainer\",\n\t\"g5gZaZVzR0tGT4pK6iEU\": \"show-episodeBlock-titleLink\",\n\t\"jtfSxoRam9rzTtdXIjzc\": \"show-show-episodesFilter\",\n\t\"ghfuv80I8uW_ymG_jfx9\": \"show-show-episodesFilter\",\n\t\"kR0M2WSYVUj4cohADSFM\": \"show-show-episodesHeader\",\n\t\"OodUnm1iCEZTUeL6X1gj\": \"show-show-moreButton\",\n\t\"aQMtxnKeiJqZ9XCcDuZ7\": \"show-showPage-sectionWrapper\",\n\t\"g3f_cI5usQX7ZOQyDtA9\": \"view-homeShortcutsGrid-draggable\",\n\t\"BKloN2GNmpktpuW0mQAs\": \"view-homeShortcutsGrid-draggable\",\n\t\"vpQWUBWS_lXRLZMRJT7w\": \"view-homeShortcutsGrid-episodeExtraContent\",\n\t\"GSv7K805J9Jw7LB9tn2A\": \"view-homeShortcutsGrid-episodeProgressBar\",\n\t\"jxXIarsEHgz2HoaVCVzA\": \"view-homeShortcutsGrid-equaliser\",\n\t\"nlOU1unbFAd7ZHyeSMTH\": \"view-homeShortcutsGrid-grid\",\n\t\"w0blQbt2NXnWLPlDFpNm\": \"view-homeShortcutsGrid-grid\",\n\t\"jdqzCrz9SoQp3ZUsU08w\": \"view-homeShortcutsGrid-gridOf4Columns\",\n\t\"gsCK1co9enL8tv4h7Cqe\": \"view-homeShortcutsGrid-gridOf4Columns\",\n\t\"ima0EKmsnCNUG08T82EM\": \"view-homeShortcutsGrid-iconDownloaded\",\n\t\"WWDxafTPs4AgThdcX5jN\": \"view-homeShortcutsGrid-image\",\n\t\"iXePCai5atydcl7RL5Mn\": \"view-homeShortcutsGrid-image\",\n\t\"jvWzgRWM_y_9FFTYRCcB\": \"view-homeShortcutsGrid-imageContainer\",\n\t\"w8fgcKCl6FoFioBbV4Zk\": \"view-homeShortcutsGrid-imageContainer\",\n\t\"zXwER4Lsqq_e7fVVaPkZ\": \"view-homeShortcutsGrid-imageWrapper\",\n\t\"KE9MrtvlIuoKtYKVr2wy\": \"view-homeShortcutsGrid-imageWrapper\",\n\t\"Tzzq1pG_inwo_oSOdyjb\": \"view-homeShortcutsGrid-main\",\n\t\"ICqWxTlKOkm9mUl_fSgS\": \"view-homeShortcutsGrid-main\",\n\t\"JFDEiqT_8B5zeG_CDSdK\": \"view-homeShortcutsGrid-name\",\n\t\"RidYQJ8faceMVnFLBEMC\": \"view-homeShortcutsGrid-name\",\n\t\"EzRmGRncgnv1zFgF4dqE\": \"view-homeShortcutsGrid-name\",\n\t\"lr4c5HqnzSyhBz8Y68M0\": \"view-homeShortcutsGrid-nameContainer\",\n\t\"TbrIq3NG2VYFoAUMSmp9\": \"view-homeShortcutsGrid-nameWrapper\",\n\t\"uy0HA5m_ehOLwt1y44DS\": \"view-homeShortcutsGrid-nameWrapper\",\n\t\"vq0lsCoYrDUDvkuUIaRg\": \"view-homeShortcutsGrid-playButton\",\n\t\"wvTlGX9H5RlvLD9JmMFD\": \"view-homeShortcutsGrid-playButton\",\n\t\"Kcb74zm1aMqGfPxTwO5s\": \"view-homeShortcutsGrid-PlayButtonContainer\",\n\t\"iuJndmfe5nTDK5FQch9C\": \"view-homeShortcutsGrid-PlayButtonContainer\",\n\t\"s9c9x_mJq197U2hBzGtV\": \"view-homeShortcutsGrid-PlayButtonContainerVisible\",\n\t\"DqAHiYCkcPCcDorezUKI\": \"view-homeShortcutsGrid-recentlyPlayedShortcutIcon\",\n\t\"Z35BWOA10YGn5uc9YgAp\": \"view-homeShortcutsGrid-shortcut\",\n\t\"mFip2ELQbL3MKPkNpa2R\": \"view-homeShortcutsGrid-shortcut\",\n\t\"jb9xD5ECTqKFK02qe3HZ\": \"view-homeShortcutsGrid-shortcutLink\",\n\t\"pE62MKOt7O7y8dGnTySw\": \"view-homeShortcutsGrid-shortcutLink\",\n\t\"bPmmKmSPLKMhtJSaUJRX\": \"view-homeShortcutsGrid-shortcutNewEpisodeIndicator\",\n\t\"rPV8BmHZXaGIGT2HwvBB\": \"view-homeShortcutsGrid-shortcuts\",\n\t\"Y89c1_2SAoZFkICK7WVp\": \"view-homeShortcutsGrid-shortcuts\",\n\t\"sLw5dxB32cAxVxqiar7J\": \"view-homeShortcutsGrid-title\",\n\t\"lt7UxuNqHQBCO6IWyA_G\": \"view-homeShortcutsGrid-trailingIndicator\",\n\t\"WPGf6HbizJpLXHLbETa5\": \"view-homeShortcutsGrid-trailingIndicator\",\n\t\"Z9WJyI5OCGSXF82DxhOH\": \"view-homeShortcutsGrid-trailingIndicator\",\n\t\"eEZSnYlv7__34b2yulfm\": \"volume-bar\",\n\t\"lhIRi4qz54GmbEZahPwS\": \"volume-bar\",\n\t\"G4n5bTzWUvlftzDwrFVG\": \"volume-bar\",\n\t\"FZhaXNtbN3Crwrgd0TA7\": \"volume-bar__icon-button\",\n\t\"rT09bwCEwXECMbLbX_7A\": \"volume-bar__icon-button\",\n\t\"GI7bVF6DBlyfIpWQKQs1\": \"volume-bar__icon-button\",\n\t\"eyxRppgmsuUUNbazkw3q\": \"volume-bar__slider-container\",\n\t\"x1jWng8HDweDS840aiIA\": \"volume-bar__slider-container\",\n\t\"tIr7C6B0Pt6YKdOnqaqj\": \"volume-bar__slider-container\",\n\t\"M_nS5sMI0NvZNLeFgFVa\": \"watchFeed-pillFour-keyframe\",\n\t\"jVGLy9ny4f46DxxtuC9z\": \"watchFeed-pillOne-keyframe\",\n\t\"DNVx4QdehkJ8two0tNVO\": \"watchFeed-pillThree-keyframe\",\n\t\"WUOx_rJjDlJ0yebh23UI\": \"watchFeed-pillTwo-keyframe\",\n\t\"fLS8v3_EfBadEerbGVoR\": \"x-album-releasesDropdown\",\n\t\"iqDYHLUedgX8y1eM1zep\": \"x-carousel-button\",\n\t\"ge8K7iQqLE77g0FDGfDn\": \"x-carousel-carousel\",\n\t\"Em2LrSSfvrgXQoajs6cm\": \"x-categoryCard-CategoryCard\",\n\t\"jXeqeqkxEBVeFjA2YydA\": \"x-categoryCard-CategoryCard\",\n\t\"tV9cjMpTPaykKsn2OVsw\": \"x-categoryCard-image\",\n\t\"Op2n2H4o1iY0Xo2wAUH9\": \"x-categoryCard-image\",\n\t\"i2yp6pOoZpYZLd5QWguN\": \"x-categoryCard-title\",\n\t\"bQthUEx0_U98DJkT1saO\": \"x-categoryCard-title\",\n\t\"jMg2yhvAA3YfgM1Ix5GL\": \"x-contributorButton-button\",\n\t\"X1lXSiVj0pzhQCUo_72A\": \"x-contributorButton-ContributorButton\",\n\t\"HbKLiGoYM4dpuK8L4TMX\": \"x-downloadButton-button\",\n\t\"VmwiDoU6RpqyzK_n7XRO\": \"x-downloadButton-cancelDownload\",\n\t\"l_MW0G9qeeCKlVJwBykT\": \"x-downloadButton-cancelDownloadButton\",\n\t\"BKsbV2Xl786X9a09XROH\": \"x-downloadButton-DownloadButton\",\n\t\"GWCBhKJqeZal3n5tCQwl\": \"x-downloadButton-DownloadButton\",\n\t\"rEx3EYgBzS8SoY7dmC6x\": \"x-downloadButton-progress\",\n\t\"_APVWqivXc4YqgsnpFkP\": \"x-downloadButton-removeDownload\",\n\t\"OadpZJiOaGfX6Qp4j6n5\": \"x-entityImage-circle\",\n\t\"AeEoI6ueagbJtaHl2cRd\": \"x-entityImage-defaultSize\",\n\t\"iJp40IxKg6emF6KYJ414\": \"x-entityImage-image\",\n\t\"vreceNX3ABcxyddeS83B\": \"x-entityImage-imageContainer\",\n\t\"lKuMkIKSZanMIK6aQWfx\": \"x-entityImage-imageContainer\",\n\t\"Ozitxbqs1vcOukDz3GDw\": \"x-entityImage-imagePlaceholder\",\n\t\"Toq4yy4bj8GGMSF5oWbj\": \"x-entityImage-imagePlaceholder\",\n\t\"SBpny8HrUTBzSjk7Vtk1\": \"x-entityImage-large\",\n\t\"H71KtIrytVayf_dFofu7\": \"x-entityImage-medium\",\n\t\"O5_0cReFdHe81E0xFAD1\": \"x-entityImage-small\",\n\t\"CxurIfvXVb_TqGF4q8Yf\": \"x-entityImage-square\",\n\t\"g3kBhX1E4EYEC2NFhhxG\": \"x-entityImage-xsmall\",\n\t\"hn6wKYDgRJLk3ObMeArw\": \"x-entityImage-xsmall\",\n\t\"SgFtsvn3upY_tG6mnt4n\": \"x-explicit-icon\",\n\t\"zUF7IRW3lpivOZHjWRko\": \"x-explicit-icon\",\n\t\"Ps9zgW56WZaBVLo1n3cg\": \"x-explicit-label\",\n\t\"CBiDL2Ry7eHHcTjB4SME\": \"x-explicit-label\",\n\t\"EsqEJ_NPrHsPkTbX4FW8\": \"x-filterBox-clearButton\",\n\t\"wCl7pMTEE68v1xuZeZiB\": \"x-filterBox-expandButton\",\n\t\"kFl3NAPY_5yenNQk7VpZ\": \"x-filterBox-expandButton\",\n\t\"t6HIrX67Lp80Nj6tGauz\": \"x-filterBox-expandedOrHasFilter\",\n\t\"_quDRjKzF4E0L6Qv0l_F\": \"x-filterBox-expandedOrHasFilter\",\n\t\"KAydWoHSkQRqhQ1vkVwK\": \"x-filterBox-expandRight\",\n\t\"QZhV0hWVKlExlKr266jo\": \"x-filterBox-filterInput\",\n\t\"A1ZtjTtf0TzOYLOBjaQe\": \"x-filterBox-filterInput\",\n\t\"JzZyf6OGCGtdscOZGt8Y\": \"x-filterBox-filterInputContainer\",\n\t\"CNJRzwGSOPxBBfje5FEK\": \"x-filterBox-filterInputContainer\",\n\t\"iiNt4l0UwY2wL42vyBc2\": \"x-filterBox-fullWidth\",\n\t\"uAJxc_psYWeimY8N9bH9\": \"x-filterBox-overlay\",\n\t\"nt15x8uJhSbH9flWJ8r6\": \"x-filterBox-overlay\",\n\t\"CIVozJ8XNPJ60uMN23Yg\": \"x-filterBox-searchIcon\",\n\t\"AFy8ta8zNE0nUMR7Dwdk\": \"x-filterBox-searchIcon\",\n\t\"_bjbHn5TABOW2s5LsEGX\": \"x-filterBox-searchIconContainer\",\n\t\"_oM_IwFBK0iLCBHKYvEp\": \"x-filterBox-searchIconContainer\",\n\t\"epWhU7hHGktzlO_dop6z\": \"x-progressBar-fillColor\",\n\t\"pghDjOdspOgysFT72xOx\": \"x-progressBar-fillColor\",\n\t\"JZ3wV4Y5GgAD0UFsQpE7\": \"x-progressBar-fillColor\",\n\t\"NoOAOv6U6vtqj_ybS1Cd\": \"x-progressBar-progressBarBg\",\n\t\"BDW4CFlIaMu9sHJRFCCg\": \"x-progressBar-progressBarBg\",\n\t\"NuZQwzwm2yKxIGrFO_y4\": \"x-progressBar-progressBarBg\",\n\t\"w699O0LgQRghXyl3bs9u\": \"x-progressBar-sliderArea\",\n\t\"JRShuZ9K3QC6x8Nl0FMu\": \"x-progressBar-sliderArea\",\n\t\"nfLzZOKzyFjyut6toQIa\": \"x-progressBar-sliderArea\",\n\t\"SfuwkNwMOfcRX0KF6cPa\": \"x-progressBar-wrapper\",\n\t\"ENGp3mqoFqfGLHott9_k\": \"x-progressBar-enabled\",\n\t\"eVonGEFHbUE9S2xfVA8d\": \"x-progressBar-progressBar\",\n\t\"jLzAN9dQidF6eUHqVFk_\": \"x-progressBar-background\",\n\t\"uVRQz1zaxSUQVQ0s06iw\": \"x-progressBar-foregroundWrapper\",\n\t\"Xm6MvwqQLnIU1TANX6Rt\": \"x-progressBar-middleground\",\n\t\"vSotTDmUOWTotCYudlgI\": \"x-progressBar-foreground\",\n\t\"snYg67O_WNutGrCsqzIZ\": \"x-progressBar-tooltipAnchor\",\n\t\"REMgVhoMClSNRZve5xaJ\": \"x-progressBar-handle\",\n\t\"SjP3wobd2iE2kK8vEIsg\": \"x-progressBar-progressAnimatable\",\n\t\"_DrNS3e4ylFBzHyCWDF0\": \"x-progressBar-disableProgressAnimatable\",\n\t\"edMDVHlUyeCR51HK_LGe\": \"x-progressBar-progressBarActive\",\n\t\"UHDS6Tgm15et79EOkj_9\": \"x-progressBar-saberEnabled\",\n\t\"mKfEQ7SMFopnDLydx4HP\": \"x-progressBar-chapterHoverOverlay\",\n\t\"AavUTirpKSAHapguSAy0\": \"x-proxySettings-fullWidth\",\n\t\"qfjicQPaTTPrLWJWRxMQ\": \"x-proxySettings-horizontalPair\",\n\t\"YZUWpDgQNo3KQwdRQHh3\": \"x-proxySettings-horizontalPair\",\n\t\"acVhMt5pELcXQyLaaPuV\": \"x-proxySettings-ProxySettings\",\n\t\"k5yrn4bTRFh4dMUyEtX2\": \"x-proxySettings-ProxySettings\",\n\t\"fOEOTcOAgPryvbYRYfOo\": \"x-searchHistoryEntries-clearSingleSearchHistory\",\n\t\"bONdaZB1x9i_WIeOBxEC\": \"x-searchHistoryEntries-clearSingleSearchHistory\",\n\t\"xmJl0s8mcJ3bfhtnoaP1\": \"x-searchHistoryEntries-clearSingleSearchHistoryButton\",\n\t\"fTpRygNKlEhmZyrgy6hD\": \"x-searchHistoryEntries-clearSingleSearchHistoryButton\",\n\t\"ADri2r8kq8LVqSsNNvIr\": \"x-searchHistoryEntries-searchHistoryEntry\",\n\t\"rKHLepPL9WCKR7yfqS1s\": \"x-searchHistoryEntries-searchHistoryEntry\",\n\t\"ZtY42R4YSo_W7VMeAg9m\": \"x-searchInput-searchInputClearButton\",\n\t\"LWugd2SlihapRT0PX8K3\": \"x-searchInput-searchInputClearButton\",\n\t\"mOLTJ2mxkzHJj6Y9_na_\": \"x-searchInput-searchInputClearIcon\",\n\t\"t2K4_iLmAyDtH7mcT5Wy\": \"x-searchInput-searchInputIconContainer\",\n\t\"lJ81QkQ1Aw5AK50afb9c\": \"x-searchInput-searchInputIconContainer\",\n\t\"QO9loc33XC50mMRUCIvf\": \"x-searchInput-searchInputInput\",\n\t\"NtkAQg9R1r5CjuP0XHwl\": \"x-searchInput-searchInputInput\",\n\t\"Mx356zpxhMqMxje_7QXv\": \"x-searchInput-searchInputInput\",\n\t\"XD3TMuMHmKsfbqieC6q_\": \"x-searchInput-searchInputOnSearch\",\n\t\"H6jh9Xd7DNOq3NsLDmCB\": \"x-searchInput-searchInputSearchIcon\",\n\t\"aCQCOVyiFROs_qr_DvQ4\": \"x-searchInput-searchInputSearchIcon\",\n\t\"MpoH5sdgCUbPL5LCl3Cy\": \"x-searchInput-searchInputSearchIcon\",\n\t\"rFFJg1UIumqUUFDgo6n7\": \"x-settings-button\",\n\t\"l_pugTMA53sS_K65iEiW\": \"x-settings-button\",\n\t\"LOsH9AUZc2uFRlhqtpRT\": \"x-settings-container\",\n\t\"xQ33L7BC8Xbpdjo1gCAU\": \"x-settings-container\",\n\t\"xbm3VfL2kntDlxtyDKwj\": \"x-settings-crossFadeContainer\",\n\t\"gO8pl5RByZlVaPDbaAVu\": \"x-settings-crossFadeContainer\",\n\t\"gv7Rcc2ouDRSd0pto7Df\": \"x-settings-equalizerPanelCanvas\",\n\t\"i9YYQi3sdgQiftnT0G7l\": \"x-settings-equalizerPanelCanvas\",\n\t\"zrn877LGjVA_oYp2IKeu\": \"x-settings-equalizerPanelFilter\",\n\t\"KBoHP10jGFBIjRt0TilW\": \"x-settings-equalizerPanelFilter\",\n\t\"aOnWJeLmOj8plFB5QPSt\": \"x-settings-equalizerPanelFilters\",\n\t\"yApUWWS53HH6f8UXAOrD\": \"x-settings-equalizerPanelFilters\",\n\t\"L9sAZBDUVTnJLn7TqR1E\": \"x-settings-equalizerPanelGainLabel\",\n\t\"DgABXUkFFAu6h3dxMlER\": \"x-settings-equalizerPanelGainLabel\",\n\t\"aPIPHZU8F7TMi6LEw_Yq\": \"x-settings-equalizerPanelGainLabelDown\",\n\t\"W5vAyrwphGDgfEcVvWCG\": \"x-settings-equalizerPanelGainLabelDown\",\n\t\"YKGOZh1y8HVOqQgbJB9F\": \"x-settings-equalizerPanelGainLabelUp\",\n\t\"L6g4d49oWcb89EH_UvI1\": \"x-settings-equalizerPanelGainLabelUp\",\n\t\"KGnDzV9IPjGQ8Ude8Cgl\": \"x-settings-equalizerPanelInput\",\n\t\"N4bVba_JCN915eH2yz7O\": \"x-settings-equalizerPanelInput\",\n\t\"NWmefh0djDBBQmHr_mdf\": \"x-settings-equalizerPanelLabel\",\n\t\"LpIve1Boio_yH1npDnzz\": \"x-settings-equalizerPanelLabel\",\n\t\"PumO62RLWafcexCJx0oe\": \"x-settings-equalizerPanelPreset\",\n\t\"HGN6qJ4noxOV2YSJWj3g\": \"x-settings-equalizerPanelWrapper\",\n\t\"S20UWmwnvAky4mj2zHXQ\": \"x-settings-equalizerPanelWrapper\",\n\t\"j7cPtD65ArW8eWnGNrUo\": \"x-settings-equalizerPresetsContainer\",\n\t\"xPMt4zCAUHum2VzFuHhR\": \"x-settings-equalizerPresetsContainer\",\n\t\"ZzNb8P1Bz1VHtlhimIWM\": \"x-settings-equalizerPresetsLabel\",\n\t\"mJOG8oySLSgkKcRKQEcw\": \"x-settings-equalizerPresetsLabel\",\n\t\"PiFWoUIRceOm8SHTCakS\": \"x-settings-equalizerResetButtonWrapper\",\n\t\"p5IaREhBZJIUrqcK5ifE\": \"x-settings-equalizerResetButtonWrapper\",\n\t\"xK6HEWejcSHKyWfhNiJc\": \"x-settings-equalizerSection\",\n\t\"PZqn_zrcjFHRxNwlhrCY\": \"x-settings-equalizerSection\",\n\t\"FulR95cAh4QPdw6wUeRw\": \"x-settings-equalizerWrapper\",\n\t\"hdG4NraLUWvgQWKmA3PQ\": \"x-settings-equalizerWrapper\",\n\t\"GMGmbx5FRBd6DOVvzSgk\": \"x-settings-firstColumn\",\n\t\"g2SG95QPZfbn5RINccth\": \"x-settings-firstColumn\",\n\t\"lfXDZUXLhhKhFPjDO8by\": \"x-settings-firstColumn\",\n\t\"NnDXf1J9xlVM5AUuqVt1\": \"x-settings-header\",\n\t\"Euj6Lot2A7ir5T4xBiTf\": \"x-settings-header\",\n\t\"DQ9fp5DjBJxKHeHqtFwC\": \"x-settings-headerContainer\",\n\t\"lcSvuotO0TXX8S7X6D_A\": \"x-settings-headerContainer\",\n\t\"V4Bh2Ch7KvYUdn2s9ZdX\": \"x-settings-hidden\",\n\t\"SkbGMKYv49KtJNB5XxdX\": \"x-settings-input\",\n\t\"QDmFXu7LLdLf6M3BASsu\": \"x-settings-input\",\n\t\"gvcgOXnAiNKEe_z92_lw\": \"x-settings-restartAppButton\",\n\t\"gdRu9OyPL_MvmSMgE042\": \"x-settings-restartAppButton\",\n\t\"weV_qxFz4gF5sPotO10y\": \"x-settings-row\",\n\t\"BMtRRwqaJD_95vJFMFD0\": \"x-settings-row\",\n\t\"eguwzH_QWTBXry7hiNj3\": \"x-settings-row\",\n\t\"yNitN64xoLNhzJlkfzOh\": \"x-settings-secondColumn\",\n\t\"rtzkwMH3kqwgnS_BxP_t\": \"x-settings-secondColumn\",\n\t\"jKCZodyn7H2Trr7dhvGm\": \"x-settings-secondColumn\",\n\t\"c6TyNYOUJRIsjYZJZofy\": \"x-settings-section\",\n\t\"k6GFKyOKVR5Ruofj3aTQ\": \"x-settings-section\",\n\t\"YtAW7cQal8op8H9JkJ8T\": \"x-settings-section\",\n\t\"GuwMf98GUBSpCDgf8KRA\": \"x-settings-tooltip\",\n\t\"NLh3bMez5RC2mwsYOf2g\": \"x-settings-tooltip\",\n\t\"nW1RKQOkzcJcX6aDCZB4\": \"x-settings-tooltipIcon\",\n\t\"RDrhzf8eX7cW85q3CuCw\": \"x-settings-tooltipIcon\",\n\t\"qBZYab2T7Yc4O5Nh0mjA\": \"x-settings-tooltipIconWrapper\",\n\t\"m8DaD7yVdc8BD9wWBC2Z\": \"x-settings-tooltipIconWrapper\",\n\t\"l35q2le3C8eAxw1TKELD\": \"x-settings-wordBreakAll\",\n\t\"w6j_vX6SF5IxSXrrkYw5\": \"x-sortBox-sortDropdown\",\n\t\"fvlp70y1LlEYYjgC8yEs\": \"x-sortBox-sortDropdown\",\n\t\"es9mguuOfkp6pBe1Bjlw\": \"x-toggle-indicator\",\n\t\"sxTbfT6ioOgvOvHzaBE7\": \"x-toggle-indicator\",\n\t\"Js64TOfWtHksI6TQ6knT\": \"x-toggle-indicatorWrapper\",\n\t\"Qb0gCQFXpstteRqnAF9q\": \"x-toggle-indicatorWrapper\",\n\t\"n8tsDTs8wDH73kejYfXs\": \"x-toggle-input\",\n\t\"Smo4wLHtFoFOOsJP0evo\": \"x-toggle-input\",\n\t\"ztL0S6Lyoye5upzDS_yU\": \"x-toggle-wrapper\",\n\t\"JWYoNAyrIIdW30u4PSGE\": \"x-toggle-wrapper\"\n}\n" }, { "path": "globals.d.ts", "content": "declare namespace Spicetify {\n\ttype Icon =\n\t\t| \"album\"\n\t\t| \"artist\"\n\t\t| \"block\"\n\t\t| \"brightness\"\n\t\t| \"car\"\n\t\t| \"chart-down\"\n\t\t| \"chart-up\"\n\t\t| \"check\"\n\t\t| \"check-alt-fill\"\n\t\t| \"chevron-left\"\n\t\t| \"chevron-right\"\n\t\t| \"chromecast-disconnected\"\n\t\t| \"clock\"\n\t\t| \"collaborative\"\n\t\t| \"computer\"\n\t\t| \"copy\"\n\t\t| \"download\"\n\t\t| \"downloaded\"\n\t\t| \"edit\"\n\t\t| \"enhance\"\n\t\t| \"exclamation-circle\"\n\t\t| \"external-link\"\n\t\t| \"facebook\"\n\t\t| \"follow\"\n\t\t| \"fullscreen\"\n\t\t| \"gamepad\"\n\t\t| \"grid-view\"\n\t\t| \"heart\"\n\t\t| \"heart-active\"\n\t\t| \"instagram\"\n\t\t| \"laptop\"\n\t\t| \"library\"\n\t\t| \"list-view\"\n\t\t| \"location\"\n\t\t| \"locked\"\n\t\t| \"locked-active\"\n\t\t| \"lyrics\"\n\t\t| \"menu\"\n\t\t| \"minimize\"\n\t\t| \"minus\"\n\t\t| \"more\"\n\t\t| \"new-spotify-connect\"\n\t\t| \"offline\"\n\t\t| \"pause\"\n\t\t| \"phone\"\n\t\t| \"play\"\n\t\t| \"playlist\"\n\t\t| \"playlist-folder\"\n\t\t| \"plus-alt\"\n\t\t| \"plus2px\"\n\t\t| \"podcasts\"\n\t\t| \"projector\"\n\t\t| \"queue\"\n\t\t| \"repeat\"\n\t\t| \"repeat-once\"\n\t\t| \"search\"\n\t\t| \"search-active\"\n\t\t| \"shuffle\"\n\t\t| \"skip-back\"\n\t\t| \"skip-back15\"\n\t\t| \"skip-forward\"\n\t\t| \"skip-forward15\"\n\t\t| \"soundbetter\"\n\t\t| \"speaker\"\n\t\t| \"spotify\"\n\t\t| \"subtitles\"\n\t\t| \"tablet\"\n\t\t| \"ticket\"\n\t\t| \"twitter\"\n\t\t| \"visualizer\"\n\t\t| \"voice\"\n\t\t| \"volume\"\n\t\t| \"volume-off\"\n\t\t| \"volume-one-wave\"\n\t\t| \"volume-two-wave\"\n\t\t| \"watch\"\n\t\t| \"x\";\n\ttype Variant =\n\t\t| \"bass\"\n\t\t| \"forte\"\n\t\t| \"brio\"\n\t\t| \"altoBrio\"\n\t\t| \"alto\"\n\t\t| \"canon\"\n\t\t| \"celloCanon\"\n\t\t| \"cello\"\n\t\t| \"ballad\"\n\t\t| \"balladBold\"\n\t\t| \"viola\"\n\t\t| \"violaBold\"\n\t\t| \"mesto\"\n\t\t| \"mestoBold\"\n\t\t| \"metronome\"\n\t\t| \"finale\"\n\t\t| \"finaleBold\"\n\t\t| \"minuet\"\n\t\t| \"minuetBold\";\n\ttype SemanticColor =\n\t\t| \"textBase\"\n\t\t| \"textSubdued\"\n\t\t| \"textBrightAccent\"\n\t\t| \"textNegative\"\n\t\t| \"textWarning\"\n\t\t| \"textPositive\"\n\t\t| \"textAnnouncement\"\n\t\t| \"essentialBase\"\n\t\t| \"essentialSubdued\"\n\t\t| \"essentialBrightAccent\"\n\t\t| \"essentialNegative\"\n\t\t| \"essentialWarning\"\n\t\t| \"essentialPositive\"\n\t\t| \"essentialAnnouncement\"\n\t\t| \"decorativeBase\"\n\t\t| \"decorativeSubdued\"\n\t\t| \"backgroundBase\"\n\t\t| \"backgroundHighlight\"\n\t\t| \"backgroundPress\"\n\t\t| \"backgroundElevatedBase\"\n\t\t| \"backgroundElevatedHighlight\"\n\t\t| \"backgroundElevatedPress\"\n\t\t| \"backgroundTintedBase\"\n\t\t| \"backgroundTintedHighlight\"\n\t\t| \"backgroundTintedPress\"\n\t\t| \"backgroundUnsafeForSmallTextBase\"\n\t\t| \"backgroundUnsafeForSmallTextHighlight\"\n\t\t| \"backgroundUnsafeForSmallTextPress\";\n\ttype ColorSet =\n\t\t| \"base\"\n\t\t| \"brightAccent\"\n\t\t| \"negative\"\n\t\t| \"warning\"\n\t\t| \"positive\"\n\t\t| \"announcement\"\n\t\t| \"invertedDark\"\n\t\t| \"invertedLight\"\n\t\t| \"mutedAccent\"\n\t\t| \"overMedia\";\n\ttype ColorSetBackgroundColors = {\n\t\tbase: string;\n\t\thighlight: string;\n\t\tpress: string;\n\t};\n\ttype ColorSetNamespaceColors = {\n\t\tannouncement: string;\n\t\tbase: string;\n\t\tbrightAccent: string;\n\t\tnegative: string;\n\t\tpositive: string;\n\t\tsubdued: string;\n\t\twarning: string;\n\t};\n\ttype ColorSetBody = {\n\t\tbackground: ColorSetBackgroundColors & {\n\t\t\televated: ColorSetBackgroundColors;\n\t\t\ttinted: ColorSetBackgroundColors;\n\t\t\tunsafeForSmallText: ColorSetBackgroundColors;\n\t\t};\n\t\tdecorative: {\n\t\t\tbase: string;\n\t\t\tsubdued: string;\n\t\t};\n\t\tessential: ColorSetNamespaceColors;\n\t\ttext: ColorSetNamespaceColors;\n\t};\n\ttype Metadata = Partial>;\n\ttype ContextTrack = {\n\t\turi: string;\n\t\tuid?: string;\n\t\tmetadata?: Metadata;\n\t};\n\ttype PlayerState = {\n\t\ttimestamp: number;\n\t\tcontext: PlayerContext;\n\t\tindex: PlayerIndex;\n\t\titem: PlayerTrack;\n\t\tshuffle: boolean;\n\t\tsmartShuffle: boolean;\n\t\trepeat: number;\n\t\tspeed: number;\n\t\tpositionAsOfTimestamp: number;\n\t\tduration: number;\n\t\thasContext: boolean;\n\t\tisPaused: boolean;\n\t\tisBuffering: boolean;\n\t\trestrictions: Restrictions;\n\t\tpreviousItems?: PlayerTrack[];\n\t\tnextItems?: PlayerTrack[];\n\t\tplaybackQuality: PlaybackQuality;\n\t\tplaybackId: string;\n\t\tsessionId: string;\n\t\tsignals?: any[];\n\t};\n\ttype PlayerContext = {\n\t\turi: string;\n\t\turl: string;\n\t\tmetadata: {\n\t\t\t\"player.arch\": string;\n\t\t};\n\t};\n\ttype PlayerIndex = {\n\t\tpageURI?: string | null;\n\t\tpageIndex: number;\n\t\titemIndex: number;\n\t};\n\ttype PlayerTrack = {\n\t\ttype: string;\n\t\turi: string;\n\t\tuid: string;\n\t\tname: string;\n\t\tmediaType: string;\n\t\tduration: {\n\t\t\tmilliseconds: number;\n\t\t};\n\t\talbum: Album;\n\t\tartists?: ArtistsEntity[];\n\t\tisLocal: boolean;\n\t\tisExplicit: boolean;\n\t\tis19PlusOnly: boolean;\n\t\tprovider: string;\n\t\tmetadata: TrackMetadata;\n\t\timages?: ImagesEntity[];\n\t};\n\ttype TrackMetadata = {\n\t\tartist_uri: string;\n\t\tentity_uri: string;\n\t\titeration: string;\n\t\ttitle: string;\n\t\t\"collection.is_banned\": string;\n\t\t\"artist_uri:1\": string;\n\t\t\"collection.in_collection\": string;\n\t\timage_small_url: string;\n\t\t\"collection.can_ban\": string;\n\t\tis_explicit: string;\n\t\talbum_disc_number: string;\n\t\talbum_disc_count: string;\n\t\ttrack_player: string;\n\t\talbum_title: string;\n\t\t\"canvas.artist.avatar\": string;\n\t\t\"canvas.artist.name\": string;\n\t\t\"canvas.artist.uri\": string;\n\t\t\"canvas.canvasUri\": string;\n\t\t\"canvas.entityUri\": string;\n\t\t\"canvas.explicit\": string;\n\t\t\"canvas.fileId\": string;\n\t\t\"canvas.id\": string;\n\t\t\"canvas.type\": string;\n\t\t\"canvas.uploadedBy\": string;\n\t\t\"canvas.url\": string;\n\t\t\"collection.can_add\": string;\n\t\timage_large_url: string;\n\t\t\"actions.skipping_prev_past_track\": string;\n\t\tpage_instance_id: string;\n\t\timage_xlarge_url: string;\n\t\tmarked_for_download: string;\n\t\t\"actions.skipping_next_past_track\": string;\n\t\tcontext_uri: string;\n\t\t\"artist_name:1\": string;\n\t\thas_lyrics: string;\n\t\tinteraction_id: string;\n\t\timage_url: string;\n\t\talbum_uri: string;\n\t\talbum_artist_name: string;\n\t\talbum_track_number: string;\n\t\tartist_name: string;\n\t\tduration: string;\n\t\talbum_track_count: string;\n\t\tpopularity: string;\n\t\tassociated_video_id: string;\n\t\tvideo_association: string;\n\t\tvideo_association_image: string;\n\t\tvideo_association_image_height: string;\n\t\tvideo_association_image_height_large: string;\n\t\tvideo_association_image_height_xxlarge: string;\n\t\tvideo_association_image_large: string;\n\t\tvideo_association_image_width: string;\n\t\tvideo_association_image_width_large: string;\n\t\tvideo_association_image_width_xxlarge: string;\n\t\tvideo_association_image_xxlarge: string;\n\t\t[key: string]: string;\n\t};\n\ttype Album = {\n\t\ttype: string;\n\t\turi: string;\n\t\tname: string;\n\t\timages?: ImagesEntity[];\n\t};\n\ttype ImagesEntity = {\n\t\turl: string;\n\t\tlabel: string;\n\t};\n\ttype ArtistsEntity = {\n\t\ttype: string;\n\t\turi: string;\n\t\tname: string;\n\t};\n\ttype Restrictions = {\n\t\tcanPause: boolean;\n\t\tcanResume: boolean;\n\t\tcanSeek: boolean;\n\t\tcanSkipPrevious: boolean;\n\t\tcanSkipNext: boolean;\n\t\tcanToggleRepeatContext: boolean;\n\t\tcanToggleRepeatTrack: boolean;\n\t\tcanToggleShuffle: boolean;\n\t\tdisallowPausingReasons?: string[];\n\t\tdisallowResumingReasons?: string[];\n\t\tdisallowSeekingReasons?: string[];\n\t\tdisallowSkippingPreviousReasons?: string[];\n\t\tdisallowSkippingNextReasons?: string[];\n\t\tdisallowTogglingRepeatContextReasons?: string[];\n\t\tdisallowTogglingRepeatTrackReasons?: string[];\n\t\tdisallowTogglingShuffleReasons?: string[];\n\t\tdisallowTransferringPlaybackReasons?: string[];\n\t};\n\ttype PlaybackQuality = {\n\t\tbitrateLevel: number;\n\t\tstrategy: number;\n\t\ttargetBitrateLevel: number;\n\t\ttargetBitrateAvailable: boolean;\n\t\thifiStatus: number;\n\t};\n\tnamespace Player {\n\t\t/**\n\t\t *\n\t\t * Contains vast array of internal APIs.\n\t\t * Please explore in Devtool Console.\n\t\t */\n\t\tconst origin: any;\n\t\t/**\n\t\t * Register a listener `type` on Spicetify.Player.\n\t\t *\n\t\t * On default, `Spicetify.Player` always dispatch:\n\t\t * - `songchange` type when player changes track.\n\t\t * - `onplaypause` type when player plays or pauses.\n\t\t * - `onprogress` type when track progress changes.\n\t\t * - `appchange` type when user changes page.\n\t\t */\n\t\tfunction addEventListener(type: string, callback: (event?: Event) => void): void;\n\t\tfunction addEventListener(type: \"songchange\", callback: (event?: Event & { data: PlayerState }) => void): void;\n\t\tfunction addEventListener(type: \"onplaypause\", callback: (event?: Event & { data: PlayerState }) => void): void;\n\t\tfunction addEventListener(type: \"onprogress\", callback: (event?: Event & { data: number }) => void): void;\n\t\tfunction addEventListener(\n\t\t\ttype: \"appchange\",\n\t\t\tcallback: (\n\t\t\t\tevent?: Event & {\n\t\t\t\t\tdata: {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * App href path\n\t\t\t\t\t\t */\n\t\t\t\t\t\tpath: string;\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * App container\n\t\t\t\t\t\t */\n\t\t\t\t\t\tcontainer: HTMLElement;\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t) => void\n\t\t): void;\n\t\t/**\n\t\t * Skip to previous track.\n\t\t */\n\t\tfunction back(): void;\n\t\t/**\n\t\t * An object contains all information about current track and player.\n\t\t */\n\t\tconst data: PlayerState;\n\t\t/**\n\t\t * Decrease a small amount of volume.\n\t\t */\n\t\tfunction decreaseVolume(): void;\n\t\t/**\n\t\t * Dispatches an event at `Spicetify.Player`.\n\t\t *\n\t\t * On default, `Spicetify.Player` always dispatch\n\t\t * - `songchange` type when player changes track.\n\t\t * - `onplaypause` type when player plays or pauses.\n\t\t * - `onprogress` type when track progress changes.\n\t\t * - `appchange` type when user changes page.\n\t\t */\n\t\tfunction dispatchEvent(event: Event): void;\n\t\tconst eventListeners: {\n\t\t\t[key: string]: Array<(event?: Event) => void>;\n\t\t};\n\t\t/**\n\t\t * Convert milisecond to `mm:ss` format\n\t\t * @param milisecond\n\t\t */\n\t\tfunction formatTime(milisecond: number): string;\n\t\t/**\n\t\t * Return song total duration in milisecond.\n\t\t */\n\t\tfunction getDuration(): number;\n\t\t/**\n\t\t * Return mute state\n\t\t */\n\t\tfunction getMute(): boolean;\n\t\t/**\n\t\t * Return elapsed duration in milisecond.\n\t\t */\n\t\tfunction getProgress(): number;\n\t\t/**\n\t\t * Return elapsed duration in percentage (0 to 1).\n\t\t */\n\t\tfunction getProgressPercent(): number;\n\t\t/**\n\t\t * Return current Repeat state (No repeat = 0/Repeat all = 1/Repeat one = 2).\n\t\t */\n\t\tfunction getRepeat(): number;\n\t\t/**\n\t\t * Return current shuffle state.\n\t\t */\n\t\tfunction getShuffle(): boolean;\n\t\t/**\n\t\t * Return track heart state.\n\t\t */\n\t\tfunction getHeart(): boolean;\n\t\t/**\n\t\t * Return current volume level (0 to 1).\n\t\t */\n\t\tfunction getVolume(): number;\n\t\t/**\n\t\t * Increase a small amount of volume.\n\t\t */\n\t\tfunction increaseVolume(): void;\n\t\t/**\n\t\t * Return a boolean whether player is playing.\n\t\t */\n\t\tfunction isPlaying(): boolean;\n\t\t/**\n\t\t * Skip to next track.\n\t\t */\n\t\tfunction next(): void;\n\t\t/**\n\t\t * Pause track.\n\t\t */\n\t\tfunction pause(): void;\n\t\t/**\n\t\t * Resume track.\n\t\t */\n\t\tfunction play(): void;\n\t\t/**\n\t\t * Play a track, playlist, album, etc. immediately\n\t\t * @param uri Spotify URI\n\t\t * @param context\n\t\t * @param options\n\t\t */\n\t\tfunction playUri(uri: string, context?: any, options?: any): Promise;\n\t\t/**\n\t\t * Unregister added event listener `type`.\n\t\t * @param type\n\t\t * @param callback\n\t\t */\n\t\tfunction removeEventListener(type: string, callback: (event?: Event) => void): void;\n\t\t/**\n\t\t * Seek track to position.\n\t\t * @param position can be in percentage (0 to 1) or in milisecond.\n\t\t */\n\t\tfunction seek(position: number): void;\n\t\t/**\n\t\t * Turn mute on/off\n\t\t * @param state\n\t\t */\n\t\tfunction setMute(state: boolean): void;\n\t\t/**\n\t\t * Change Repeat mode\n\t\t * @param mode `0` No repeat. `1` Repeat all. `2` Repeat one track.\n\t\t */\n\t\tfunction setRepeat(mode: number): void;\n\t\t/**\n\t\t * Turn shuffle on/off.\n\t\t * @param state\n\t\t */\n\t\tfunction setShuffle(state: boolean): void;\n\t\t/**\n\t\t * Set volume level\n\t\t * @param level 0 to 1\n\t\t */\n\t\tfunction setVolume(level: number): void;\n\t\t/**\n\t\t * Seek to previous `amount` of milisecond\n\t\t * @param amount in milisecond. Default: 15000.\n\t\t */\n\t\tfunction skipBack(amount?: number): void;\n\t\t/**\n\t\t * Seek to next `amount` of milisecond\n\t\t * @param amount in milisecond. Default: 15000.\n\t\t */\n\t\tfunction skipForward(amount?: number): void;\n\t\t/**\n\t\t * Toggle Heart (Favourite) track state.\n\t\t */\n\t\tfunction toggleHeart(): void;\n\t\t/**\n\t\t * Toggle Mute/No mute.\n\t\t */\n\t\tfunction toggleMute(): void;\n\t\t/**\n\t\t * Toggle Play/Pause.\n\t\t */\n\t\tfunction togglePlay(): void;\n\t\t/**\n\t\t * Toggle No repeat/Repeat all/Repeat one.\n\t\t */\n\t\tfunction toggleRepeat(): void;\n\t\t/**\n\t\t * Toggle Shuffle/No shuffle.\n\t\t */\n\t\tfunction toggleShuffle(): void;\n\t}\n\t/**\n\t * Adds a track or array of tracks to prioritized queue.\n\t */\n\tfunction addToQueue(uri: ContextTrack[]): Promise;\n\t/**\n\t * @deprecated\n\t */\n\tconst BridgeAPI: any;\n\t/**\n\t * @deprecated\n\t */\n\tconst CosmosAPI: any;\n\t/**\n\t * Async wrappers of CosmosAPI\n\t */\n\tnamespace CosmosAsync {\n\t\ttype Method = \"DELETE\" | \"GET\" | \"HEAD\" | \"PATCH\" | \"POST\" | \"PUT\" | \"SUB\";\n\t\tinterface Error {\n\t\t\tcode: number;\n\t\t\terror: string;\n\t\t\tmessage: string;\n\t\t\tstack?: string;\n\t\t}\n\n\t\ttype Headers = Record;\n\t\ttype Body = Record;\n\n\t\tinterface Response {\n\t\t\tbody: any;\n\t\t\theaders: Headers;\n\t\t\tstatus: number;\n\t\t\turi?: string;\n\t\t}\n\n\t\tfunction head(url: string, headers?: Headers): Promise;\n\t\tfunction get(url: string, body?: Body, headers?: Headers): Promise;\n\t\tfunction post(url: string, body?: Body, headers?: Headers): Promise;\n\t\tfunction put(url: string, body?: Body, headers?: Headers): Promise;\n\t\tfunction del(url: string, body?: Body, headers?: Headers): Promise;\n\t\tfunction patch(url: string, body?: Body, headers?: Headers): Promise;\n\t\tfunction sub(\n\t\t\turl: string,\n\t\t\tcallback: (b: Response[\"body\"]) => void,\n\t\t\tonError?: (e: Error) => void,\n\t\t\tbody?: Body,\n\t\t\theaders?: Headers\n\t\t): Promise;\n\t\tfunction postSub(\n\t\t\turl: string,\n\t\t\tbody: Body | null,\n\t\t\tcallback: (b: Response[\"body\"]) => void,\n\t\t\tonError?: (e: Error) => void\n\t\t): Promise;\n\t\tfunction request(method: Method, url: string, body?: Body, headers?: Headers): Promise;\n\t\tfunction resolve(method: Method, url: string, body?: Body, headers?: Headers): Promise;\n\t}\n\t/**\n\t * Fetch interesting colors from URI.\n\t * @param uri Any type of URI that has artwork (playlist, track, album, artist, show, ...)\n\t */\n\tfunction colorExtractor(uri: string): Promise<{\n\t\tDARK_VIBRANT: string;\n\t\tDESATURATED: string;\n\t\tLIGHT_VIBRANT: string;\n\t\tPROMINENT: string;\n\t\tVIBRANT: string;\n\t\tVIBRANT_NON_ALARMING: string;\n\t}>;\n\t/**\n\t * @deprecated\n\t */\n\tfunction getAblumArtColors(): any;\n\t/**\n\t * Fetch track analyzed audio data.\n\t * Beware, not all tracks have audio data.\n\t * @param uri is optional. Leave it blank to get current track\n\t * or specify another track uri.\n\t */\n\tfunction getAudioData(uri?: string): Promise;\n\t/**\n\t * Set of APIs method to register, deregister hotkeys/shortcuts\n\t */\n\tnamespace Keyboard {\n\t\ttype ValidKey =\n\t\t\t| \"BACKSPACE\"\n\t\t\t| \"TAB\"\n\t\t\t| \"ENTER\"\n\t\t\t| \"SHIFT\"\n\t\t\t| \"CTRL\"\n\t\t\t| \"ALT\"\n\t\t\t| \"CAPS\"\n\t\t\t| \"ESCAPE\"\n\t\t\t| \"SPACE\"\n\t\t\t| \"PAGE_UP\"\n\t\t\t| \"PAGE_DOWN\"\n\t\t\t| \"END\"\n\t\t\t| \"HOME\"\n\t\t\t| \"ARROW_LEFT\"\n\t\t\t| \"ARROW_UP\"\n\t\t\t| \"ARROW_RIGHT\"\n\t\t\t| \"ARROW_DOWN\"\n\t\t\t| \"INSERT\"\n\t\t\t| \"DELETE\"\n\t\t\t| \"A\"\n\t\t\t| \"B\"\n\t\t\t| \"C\"\n\t\t\t| \"D\"\n\t\t\t| \"E\"\n\t\t\t| \"F\"\n\t\t\t| \"G\"\n\t\t\t| \"H\"\n\t\t\t| \"I\"\n\t\t\t| \"J\"\n\t\t\t| \"K\"\n\t\t\t| \"L\"\n\t\t\t| \"M\"\n\t\t\t| \"N\"\n\t\t\t| \"O\"\n\t\t\t| \"P\"\n\t\t\t| \"Q\"\n\t\t\t| \"R\"\n\t\t\t| \"S\"\n\t\t\t| \"T\"\n\t\t\t| \"U\"\n\t\t\t| \"V\"\n\t\t\t| \"W\"\n\t\t\t| \"X\"\n\t\t\t| \"Y\"\n\t\t\t| \"Z\"\n\t\t\t| \"WINDOW_LEFT\"\n\t\t\t| \"WINDOW_RIGHT\"\n\t\t\t| \"SELECT\"\n\t\t\t| \"NUMPAD_0\"\n\t\t\t| \"NUMPAD_1\"\n\t\t\t| \"NUMPAD_2\"\n\t\t\t| \"NUMPAD_3\"\n\t\t\t| \"NUMPAD_4\"\n\t\t\t| \"NUMPAD_5\"\n\t\t\t| \"NUMPAD_6\"\n\t\t\t| \"NUMPAD_7\"\n\t\t\t| \"NUMPAD_8\"\n\t\t\t| \"NUMPAD_9\"\n\t\t\t| \"MULTIPLY\"\n\t\t\t| \"ADD\"\n\t\t\t| \"SUBTRACT\"\n\t\t\t| \"DECIMAL_POINT\"\n\t\t\t| \"DIVIDE\"\n\t\t\t| \"F1\"\n\t\t\t| \"F2\"\n\t\t\t| \"F3\"\n\t\t\t| \"F4\"\n\t\t\t| \"F5\"\n\t\t\t| \"F6\"\n\t\t\t| \"F7\"\n\t\t\t| \"F8\"\n\t\t\t| \"F9\"\n\t\t\t| \"F10\"\n\t\t\t| \"F11\"\n\t\t\t| \"F12\"\n\t\t\t| \";\"\n\t\t\t| \"=\"\n\t\t\t| \" | \"\n\t\t\t| \"-\"\n\t\t\t| \".\"\n\t\t\t| \"/\"\n\t\t\t| \"`\"\n\t\t\t| \"[\"\n\t\t\t| \"\\\\\"\n\t\t\t| \"]\"\n\t\t\t| '\"'\n\t\t\t| \"~\"\n\t\t\t| \"!\"\n\t\t\t| \"@\"\n\t\t\t| \"#\"\n\t\t\t| \"$\"\n\t\t\t| \"%\"\n\t\t\t| \"^\"\n\t\t\t| \"&\"\n\t\t\t| \"*\"\n\t\t\t| \"(\"\n\t\t\t| \")\"\n\t\t\t| \"_\"\n\t\t\t| \"+\"\n\t\t\t| \":\"\n\t\t\t| \"<\"\n\t\t\t| \">\"\n\t\t\t| \"?\"\n\t\t\t| \"|\";\n\t\ttype KeysDefine =\n\t\t\t| string\n\t\t\t| {\n\t\t\t\t\tkey: string;\n\t\t\t\t\tctrl?: boolean;\n\t\t\t\t\tshift?: boolean;\n\t\t\t\t\talt?: boolean;\n\t\t\t\t\tmeta?: boolean;\n\t\t\t };\n\t\tconst KEYS: Record;\n\t\tfunction registerShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void): void;\n\t\tfunction registerIsolatedShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void): void;\n\t\tfunction registerImportantShortcut(keys: KeysDefine, callback: (event: KeyboardEvent) => void): void;\n\t\tfunction _deregisterShortcut(keys: KeysDefine): void;\n\t\tfunction deregisterImportantShortcut(keys: KeysDefine): void;\n\t\tfunction changeShortcut(keys: KeysDefine, newKeys: KeysDefine): void;\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\tconst LiveAPI: any;\n\n\tnamespace LocalStorage {\n\t\t/**\n\t\t * Empties the list associated with the object of all key/value pairs, if there are any.\n\t\t */\n\t\tfunction clear(): void;\n\t\t/**\n\t\t * Get key value\n\t\t */\n\t\tfunction get(key: string): string | null;\n\t\t/**\n\t\t * Delete key\n\t\t */\n\t\tfunction remove(key: string): void;\n\t\t/**\n\t\t * Set new value for key\n\t\t */\n\t\tfunction set(key: string, value: string): void;\n\t}\n\t/**\n\t * To create and prepend custom menu item in profile menu.\n\t */\n\tnamespace Menu {\n\t\t/**\n\t\t * Create a single toggle.\n\t\t */\n\t\tclass Item {\n\t\t\tconstructor(name: string, isEnabled: boolean, onClick: (self: Item) => void, icon?: Icon | string);\n\t\t\tname: string;\n\t\t\tisEnabled: boolean;\n\t\t\t/**\n\t\t\t * Change item name\n\t\t\t */\n\t\t\tsetName(name: string): void;\n\t\t\t/**\n\t\t\t * Change item enabled state.\n\t\t\t * Visually, item would has a tick next to it if its state is enabled.\n\t\t\t */\n\t\t\tsetState(isEnabled: boolean): void;\n\t\t\t/**\n\t\t\t * Change icon\n\t\t\t */\n\t\t\tsetIcon(icon: Icon | string): void;\n\t\t\t/**\n\t\t\t * Item is only available in Profile menu when method \"register\" is called.\n\t\t\t */\n\t\t\tregister(): void;\n\t\t\t/**\n\t\t\t * Stop item to be prepended into Profile menu.\n\t\t\t */\n\t\t\tderegister(): void;\n\t\t}\n\n\t\t/**\n\t\t * Create a sub menu to contain Item toggles.\n\t\t * `Item`s in `subItems` array shouldn't be registered.\n\t\t */\n\t\tclass SubMenu {\n\t\t\tconstructor(name: string, subItems: Item[]);\n\t\t\tname: string;\n\t\t\t/**\n\t\t\t * Change SubMenu name\n\t\t\t */\n\t\t\tsetName(name: string): void;\n\t\t\t/**\n\t\t\t * Add an item to sub items list\n\t\t\t */\n\t\t\taddItem(item: Item): void;\n\t\t\t/**\n\t\t\t * Remove an item from sub items list\n\t\t\t */\n\t\t\tremoveItem(item: Item): void;\n\t\t\t/**\n\t\t\t * SubMenu is only available in Profile menu when method \"register\" is called.\n\t\t\t */\n\t\t\tregister(): void;\n\t\t\t/**\n\t\t\t * Stop SubMenu to be prepended into Profile menu.\n\t\t\t */\n\t\t\tderegister(): void;\n\t\t}\n\t}\n\n\t/**\n\t * Keyboard shortcut library\n\t *\n\t * Documentation: https://craig.is/killing/mice v1.6.5\n\t *\n\t * Spicetify.Keyboard is wrapper of this library to be compatible with legacy Spotify,\n\t * so new extension should use this library instead.\n\t */\n\tfunction Mousetrap(element?: any): void;\n\n\t/**\n\t * Contains vast array of internal APIs.\n\t * Please explore in Devtool Console.\n\t */\n\tconst Platform: any;\n\t/**\n\t * Queue object contains list of queuing tracks,\n\t * history of played tracks and current track metadata.\n\t */\n\tconst Queue: {\n\t\tnextTracks: any[];\n\t\tprevTracks: any[];\n\t\tqueueRevision: string;\n\t\ttrack: any;\n\t};\n\t/**\n\t * Remove a track or array of tracks from current queue.\n\t */\n\tfunction removeFromQueue(uri: ContextTrack[]): Promise;\n\t/**\n\t * Display a bubble of notification. Useful for a visual feedback.\n\t * @param message Message to display. Can use inline HTML for styling.\n\t * @param isError If true, bubble will be red. Defaults to false.\n\t * @param msTimeout Time in milliseconds to display the bubble. Defaults to Spotify's value.\n\t */\n\tfunction showNotification(message: React.ReactNode, isError?: boolean, msTimeout?: number): void;\n\t/**\n\t * Set of APIs method to parse and validate URIs.\n\t */\n\tclass URI {\n\t\tconstructor(type: string, props: any);\n\t\tpublic type: string;\n\t\tpublic hasBase62Id: boolean;\n\n\t\tpublic id?: string;\n\t\tpublic disc?: any;\n\t\tpublic args?: any;\n\t\tpublic category?: string;\n\t\tpublic username?: string;\n\t\tpublic track?: string;\n\t\tpublic artist?: string;\n\t\tpublic album?: string;\n\t\tpublic duration?: number;\n\t\tpublic query?: string;\n\t\tpublic country?: string;\n\t\tpublic global?: boolean;\n\t\tpublic context?: string | typeof URI | null;\n\t\tpublic anchor?: string;\n\t\tpublic play?: any;\n\t\tpublic toplist?: any;\n\n\t\t/**\n\t\t *\n\t\t * @return The URI representation of this uri.\n\t\t */\n\t\ttoURI(): string;\n\n\t\t/**\n\t\t *\n\t\t * @return The URI representation of this uri.\n\t\t */\n\t\ttoString(): string;\n\n\t\t/**\n\t\t * Get the URL path of this uri.\n\t\t *\n\t\t * @param opt_leadingSlash True if a leading slash should be prepended.\n\t\t * @return The path of this uri.\n\t\t */\n\t\ttoURLPath(opt_leadingSlash: boolean): string;\n\n\t\t/**\n\t\t *\n\t\t * @param origin The origin to use for the URL.\n\t\t * @return The URL string for the uri.\n\t\t */\n\t\ttoURL(origin?: string): string;\n\n\t\t/**\n\t\t * Clones a given SpotifyURI instance.\n\t\t *\n\t\t * @return An instance of URI.\n\t\t */\n\t\tclone(): URI | null;\n\n\t\t/**\n\t\t * Gets the path of the URI object by removing all hash and query parameters.\n\t\t *\n\t\t * @return The path of the URI object.\n\t\t */\n\t\tgetPath(): string;\n\n\t\t/**\n\t\t * The various URI Types.\n\t\t *\n\t\t * Note that some of the types in this enum are not real URI types, but are\n\t\t * actually URI particles. They are marked so.\n\t\t *\n\t\t */\n\t\tstatic Type: {\n\t\t\tAD: string;\n\t\t\tALBUM: string;\n\t\t\tGENRE: string;\n\t\t\tQUEUE: string;\n\t\t\tAPPLICATION: string;\n\t\t\tARTIST: string;\n\t\t\tARTIST_TOPLIST: string;\n\t\t\tARTIST_CONCERTS: string;\n\t\t\tAUDIO_FILE: string;\n\t\t\tCOLLECTION: string;\n\t\t\tCOLLECTION_ALBUM: string;\n\t\t\tCOLLECTION_ARTIST: string;\n\t\t\tCOLLECTION_MISSING_ALBUM: string;\n\t\t\tCOLLECTION_TRACK_LIST: string;\n\t\t\tCONCERT: string;\n\t\t\tCONTEXT_GROUP: string;\n\t\t\tDAILY_MIX: string;\n\t\t\tEMPTY: string;\n\t\t\tEPISODE: string;\n\t\t\t/** URI particle; not an actual URI. */\n\t\t\tFACEBOOK: string;\n\t\t\tFOLDER: string;\n\t\t\tFOLLOWERS: string;\n\t\t\tFOLLOWING: string;\n\t\t\tIMAGE: string;\n\t\t\tINBOX: string;\n\t\t\tINTERRUPTION: string;\n\t\t\tLIBRARY: string;\n\t\t\tLIVE: string;\n\t\t\tROOM: string;\n\t\t\tEXPRESSION: string;\n\t\t\tLOCAL: string;\n\t\t\tLOCAL_TRACK: string;\n\t\t\tLOCAL_ALBUM: string;\n\t\t\tLOCAL_ARTIST: string;\n\t\t\tMERCH: string;\n\t\t\tMOSAIC: string;\n\t\t\tPLAYLIST: string;\n\t\t\tPLAYLIST_V2: string;\n\t\t\tPRERELEASE: string;\n\t\t\tPROFILE: string;\n\t\t\tPUBLISHED_ROOTLIST: string;\n\t\t\tRADIO: string;\n\t\t\tROOTLIST: string;\n\t\t\tSEARCH: string;\n\t\t\tSHOW: string;\n\t\t\tSOCIAL_SESSION: string;\n\t\t\tSPECIAL: string;\n\t\t\tSTARRED: string;\n\t\t\tSTATION: string;\n\t\t\tTEMP_PLAYLIST: string;\n\t\t\tTOPLIST: string;\n\t\t\tTRACK: string;\n\t\t\tTRACKSET: string;\n\t\t\tUSER_TOPLIST: string;\n\t\t\tUSER_TOP_TRACKS: string;\n\t\t\tUNKNOWN: string;\n\t\t\tMEDIA: string;\n\t\t\tQUESTION: string;\n\t\t\tPOLL: string;\n\t\t};\n\n\t\t/**\n\t\t * Creates a new URI object from a parsed string argument.\n\t\t *\n\t\t * @param str The string that will be parsed into a URI object.\n\t\t * @throws TypeError If the string argument is not a valid URI, a TypeError will\n\t\t * be thrown.\n\t\t * @return The parsed URI object.\n\t\t */\n\t\tstatic fromString(str: string): URI;\n\n\t\t/**\n\t\t * Parses a given object into a URI instance.\n\t\t *\n\t\t * Unlike URI.fromString, this function could receive any kind of value. If\n\t\t * the value is already a URI instance, it is simply returned.\n\t\t * Otherwise the value will be stringified before parsing.\n\t\t *\n\t\t * This function also does not throw an error like URI.fromString, but\n\t\t * instead simply returns null if it can't parse the value.\n\t\t *\n\t\t * @param value The value to parse.\n\t\t * @return The corresponding URI instance, or null if the\n\t\t * passed value is not a valid value.\n\t\t */\n\t\tstatic from(value: any): URI | null;\n\n\t\t/**\n\t\t * Checks whether two URI:s refer to the same thing even though they might\n\t\t * not necessarily be equal.\n\t\t *\n\t\t * These two Playlist URIs, for example, refer to the same playlist:\n\t\t *\n\t\t * spotify:user:napstersean:playlist:3vxotOnOGDlZXyzJPLFnm2\n\t\t * spotify:playlist:3vxotOnOGDlZXyzJPLFnm2\n\t\t *\n\t\t * @param baseUri The first URI to compare.\n\t\t * @param refUri The second URI to compare.\n\t\t * @return Whether they shared idenitity\n\t\t */\n\t\tstatic isSameIdentity(baseUri: URI | string, refUri: URI | string): boolean;\n\n\t\t/**\n\t\t * Returns the hex representation of a Base62 encoded id.\n\t\t *\n\t\t * @param id The base62 encoded id.\n\t\t * @return The hex representation of the base62 id.\n\t\t */\n\t\tstatic idToHex(id: string): string;\n\n\t\t/**\n\t\t * Returns the base62 representation of a hex encoded id.\n\t\t *\n\t\t * @param hex The hex encoded id.\n\t\t * @return The base62 representation of the id.\n\t\t */\n\t\tstatic hexToId(hex: string): string;\n\n\t\t/**\n\t\t * Creates a new 'album' type URI.\n\t\t *\n\t\t * @param id The id of the album.\n\t\t * @param disc The disc number of the album.\n\t\t * @return The album URI.\n\t\t */\n\t\tstatic albumURI(id: string, disc: number): URI;\n\n\t\t/**\n\t\t * Creates a new 'application' type URI.\n\t\t *\n\t\t * @param id The id of the application.\n\t\t * @param args An array containing the arguments to the app.\n\t\t * @return The application URI.\n\t\t */\n\t\tstatic applicationURI(id: string, args: string[]): URI;\n\n\t\t/**\n\t\t * Creates a new 'artist' type URI.\n\t\t *\n\t\t * @param id The id of the artist.\n\t\t * @return The artist URI.\n\t\t */\n\t\tstatic artistURI(id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'collection' type URI.\n\t\t *\n\t\t * @param username The non-canonical username of the rootlist owner.\n\t\t * @param category The category of the collection.\n\t\t * @return The collection URI.\n\t\t */\n\t\tstatic collectionURI(username: string, category: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'collection-album' type URI.\n\t\t *\n\t\t * @param username The non-canonical username of the rootlist owner.\n\t\t * @param id The id of the album.\n\t\t * @return The collection album URI.\n\t\t */\n\t\tstatic collectionAlbumURI(username: string, id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'collection-artist' type URI.\n\t\t *\n\t\t * @param username The non-canonical username of the rootlist owner.\n\t\t * @param id The id of the artist.\n\t\t * @return The collection artist URI.\n\t\t */\n\t\tstatic collectionAlbumURI(username: string, id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'concert' type URI.\n\t\t *\n\t\t * @param id The id of the concert.\n\t\t * @return The concert URI.\n\t\t */\n\t\tstatic concertURI(id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'episode' type URI.\n\t\t *\n\t\t * @param id The id of the episode.\n\t\t * @return The episode URI.\n\t\t */\n\t\tstatic episodeURI(id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'folder' type URI.\n\t\t *\n\t\t * @param id The id of the folder.\n\t\t * @return The folder URI.\n\t\t */\n\t\tstatic folderURI(id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'local-album' type URI.\n\t\t *\n\t\t * @param artist The artist of the album.\n\t\t * @param album The name of the album.\n\t\t * @return The local album URI.\n\t\t */\n\t\tstatic localAlbumURI(artist: string, album: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'local-artist' type URI.\n\t\t *\n\t\t * @param artist The name of the artist.\n\t\t * @return The local artist URI.\n\t\t */\n\t\tstatic localArtistURI(artist: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'playlist-v2' type URI.\n\t\t *\n\t\t * @param id The id of the playlist.\n\t\t * @return The playlist URI.\n\t\t */\n\t\tstatic playlistV2URI(id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'prerelease' type URI.\n\t\t *\n\t\t * @param id The id of the prerelease.\n\t\t * @return The prerelease URI.\n\t\t */\n\t\tstatic prereleaseURI(id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'profile' type URI.\n\t\t *\n\t\t * @param username The non-canonical username of the rootlist owner.\n\t\t * @param args A list of arguments.\n\t\t * @return The profile URI.\n\t\t */\n\t\tstatic profileURI(username: string, args: string[]): URI;\n\n\t\t/**\n\t\t * Creates a new 'search' type URI.\n\t\t *\n\t\t * @param query The unencoded search query.\n\t\t * @return The search URI\n\t\t */\n\t\tstatic searchURI(query: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'show' type URI.\n\t\t *\n\t\t * @param id The id of the show.\n\t\t * @return The show URI.\n\t\t */\n\t\tstatic showURI(id: string): URI;\n\n\t\t/**\n\t\t * Creates a new 'station' type URI.\n\t\t *\n\t\t * @param args An array of arguments for the station.\n\t\t * @return The station URI.\n\t\t */\n\t\tstatic stationURI(args: string[]): URI;\n\n\t\t/**\n\t\t * Creates a new 'track' type URI.\n\t\t *\n\t\t * @param id The id of the track.\n\t\t * @param anchor The point in the track formatted as mm:ss\n\t\t * @param context An optional context URI\n\t\t * @param play Toggles autoplay\n\t\t * @return The track URI.\n\t\t */\n\t\tstatic trackURI(id: string, anchor: string, context?: string, play?: boolean): URI;\n\n\t\t/**\n\t\t * Creates a new 'user-toplist' type URI.\n\t\t *\n\t\t * @param username The non-canonical username of the toplist owner.\n\t\t * @param toplist The toplist type.\n\t\t * @return The user-toplist URI.\n\t\t */\n\t\tstatic userToplistURI(username: string, toplist: string): URI;\n\n\t\tstatic isAd(uri: URI | string): boolean;\n\t\tstatic isAlbum(uri: URI | string): boolean;\n\t\tstatic isGenre(uri: URI | string): boolean;\n\t\tstatic isQueue(uri: URI | string): boolean;\n\t\tstatic isApplication(uri: URI | string): boolean;\n\t\tstatic isArtist(uri: URI | string): boolean;\n\t\tstatic isArtistToplist(uri: URI | string): boolean;\n\t\tstatic isArtistConcerts(uri: URI | string): boolean;\n\t\tstatic isAudioFile(uri: URI | string): boolean;\n\t\tstatic isCollection(uri: URI | string): boolean;\n\t\tstatic isCollectionAlbum(uri: URI | string): boolean;\n\t\tstatic isCollectionArtist(uri: URI | string): boolean;\n\t\tstatic isCollectionMissingAlbum(uri: URI | string): boolean;\n\t\tstatic isCollectionTrackList(uri: URI | string): boolean;\n\t\tstatic isConcert(uri: URI | string): boolean;\n\t\tstatic isContextGroup(uri: URI | string): boolean;\n\t\tstatic isDailyMix(uri: URI | string): boolean;\n\t\tstatic isEmpty(uri: URI | string): boolean;\n\t\tstatic isEpisode(uri: URI | string): boolean;\n\t\tstatic isFacebook(uri: URI | string): boolean;\n\t\tstatic isFolder(uri: URI | string): boolean;\n\t\tstatic isFollowers(uri: URI | string): boolean;\n\t\tstatic isFollowing(uri: URI | string): boolean;\n\t\tstatic isImage(uri: URI | string): boolean;\n\t\tstatic isInbox(uri: URI | string): boolean;\n\t\tstatic isInterruption(uri: URI | string): boolean;\n\t\tstatic isLibrary(uri: URI | string): boolean;\n\t\tstatic isLive(uri: URI | string): boolean;\n\t\tstatic isRoom(uri: URI | string): boolean;\n\t\tstatic isExpression(uri: URI | string): boolean;\n\t\tstatic isLocal(uri: URI | string): boolean;\n\t\tstatic isLocalTrack(uri: URI | string): boolean;\n\t\tstatic isLocalAlbum(uri: URI | string): boolean;\n\t\tstatic isLocalArtist(uri: URI | string): boolean;\n\t\tstatic isMerch(uri: URI | string): boolean;\n\t\tstatic isMosaic(uri: URI | string): boolean;\n\t\tstatic isPlaylist(uri: URI | string): boolean;\n\t\tstatic isPlaylistV2(uri: URI | string): boolean;\n\t\tstatic isPrerelease(uri: URI | string): boolean;\n\t\tstatic isProfile(uri: URI | string): boolean;\n\t\tstatic isPublishedRootlist(uri: URI | string): boolean;\n\t\tstatic isRadio(uri: URI | string): boolean;\n\t\tstatic isRootlist(uri: URI | string): boolean;\n\t\tstatic isSearch(uri: URI | string): boolean;\n\t\tstatic isShow(uri: URI | string): boolean;\n\t\tstatic isSocialSession(uri: URI | string): boolean;\n\t\tstatic isSpecial(uri: URI | string): boolean;\n\t\tstatic isStarred(uri: URI | string): boolean;\n\t\tstatic isStation(uri: URI | string): boolean;\n\t\tstatic isTempPlaylist(uri: URI | string): boolean;\n\t\tstatic isToplist(uri: URI | string): boolean;\n\t\tstatic isTrack(uri: URI | string): boolean;\n\t\tstatic isTrackset(uri: URI | string): boolean;\n\t\tstatic isUserToplist(uri: URI | string): boolean;\n\t\tstatic isUserTopTracks(uri: URI | string): boolean;\n\t\tstatic isUnknown(uri: URI | string): boolean;\n\t\tstatic isMedia(uri: URI | string): boolean;\n\t\tstatic isQuestion(uri: URI | string): boolean;\n\t\tstatic isPoll(uri: URI | string): boolean;\n\t\tstatic isPlaylistV1OrV2(uri: URI | string): boolean;\n\t}\n\n\t/**\n\t * Create custom menu item and prepend to right click context menu\n\t */\n\tnamespace ContextMenu {\n\t\ttype OnClickCallback = (uris: string[], uids?: string[], contextUri?: string) => void;\n\t\ttype ShouldAddCallback = (uris: string[], uids?: string[], contextUri?: string) => boolean;\n\n\t\t// Single context menu item\n\t\tclass Item {\n\t\t\t/**\n\t\t\t * List of valid icons to use.\n\t\t\t */\n\t\t\tstatic readonly iconList: Icon[];\n\t\t\tconstructor(name: string, onClick: OnClickCallback, shouldAdd?: ShouldAddCallback, icon?: Icon, disabled?: boolean);\n\t\t\tname: string;\n\t\t\ticon: Icon | string;\n\t\t\tdisabled: boolean;\n\t\t\t/**\n\t\t\t * A function returning boolean determines whether item should be prepended.\n\t\t\t */\n\t\t\tshouldAdd: ShouldAddCallback;\n\t\t\t/**\n\t\t\t * A function to call when item is clicked\n\t\t\t */\n\t\t\tonClick: OnClickCallback;\n\t\t\t/**\n\t\t\t * Item is only available in Context Menu when method \"register\" is called.\n\t\t\t */\n\t\t\tregister: () => void;\n\t\t\t/**\n\t\t\t * Stop Item to be prepended into Context Menu.\n\t\t\t */\n\t\t\tderegister: () => void;\n\t\t}\n\n\t\t/**\n\t\t * Create a sub menu to contain `Item`s.\n\t\t * `Item`s in `subItems` array shouldn't be registered.\n\t\t */\n\t\tclass SubMenu {\n\t\t\tconstructor(name: string, subItems: Iterable, shouldAdd?: ShouldAddCallback, disabled?: boolean);\n\t\t\tname: string;\n\t\t\tdisabled: boolean;\n\t\t\t/**\n\t\t\t * A function returning boolean determines whether item should be prepended.\n\t\t\t */\n\t\t\tshouldAdd: ShouldAddCallback;\n\t\t\taddItem: (item: Item) => void;\n\t\t\tremoveItem: (item: Item) => void;\n\t\t\t/**\n\t\t\t * SubMenu is only available in Context Menu when method \"register\" is called.\n\t\t\t */\n\t\t\tregister: () => void;\n\t\t\t/**\n\t\t\t * Stop SubMenu to be prepended into Context Menu.\n\t\t\t */\n\t\t\tderegister: () => void;\n\t\t}\n\t}\n\n\t/**\n\t * Popup Modal\n\t */\n\tnamespace PopupModal {\n\t\tinterface Content {\n\t\t\ttitle: string;\n\t\t\t/**\n\t\t\t * You can specify a string for simple text display\n\t\t\t * or a HTML element for interactive config/setting menu,\n\t\t\t * or a React JSX element for React-based components\n\t\t\t */\n\t\t\tcontent: string | Element | React.JSX.Element;\n\t\t\t/**\n\t\t\t * Bigger window\n\t\t\t */\n\t\t\tisLarge?: boolean;\n\t\t}\n\n\t\tfunction display(e: Content): void;\n\t\tfunction hide(): void;\n\t}\n\n\t/** React instance to create components */\n\tconst React: any;\n\t/** React DOM instance to render and mount components */\n\tconst ReactDOM: any;\n\t/** React DOM Server instance to render components to string */\n\tconst ReactDOMServer: any;\n\t/** React JSX runtime instance to transform JSX elements */\n\tconst ReactJSX: any;\n\n\t/** Stock React components exposed from Spotify library */\n\tnamespace ReactComponent {\n\t\ttype ContextMenuProps = {\n\t\t\t/**\n\t\t\t * Decide whether to use the global singleton context menu (rendered in )\n\t\t\t * or a new inline context menu (rendered in a sibling\n\t\t\t * element to `children`)\n\t\t\t */\n\t\t\trenderInline?: boolean;\n\t\t\t/**\n\t\t\t * Determins what will trigger the context menu. For example, a click, or a right-click\n\t\t\t */\n\t\t\ttrigger?: \"click\" | \"right-click\";\n\t\t\t/**\n\t\t\t * Determins is the context menu should open or toggle when triggered\n\t\t\t */\n\t\t\taction?: \"toggle\" | \"open\";\n\t\t\t/**\n\t\t\t * The preferred placement of the context menu when it opens.\n\t\t\t * Relative to trigger element.\n\t\t\t */\n\t\t\tplacement?:\n\t\t\t\t| \"top\"\n\t\t\t\t| \"top-start\"\n\t\t\t\t| \"top-end\"\n\t\t\t\t| \"right\"\n\t\t\t\t| \"right-start\"\n\t\t\t\t| \"right-end\"\n\t\t\t\t| \"bottom\"\n\t\t\t\t| \"bottom-start\"\n\t\t\t\t| \"bottom-end\"\n\t\t\t\t| \"left\"\n\t\t\t\t| \"left-start\"\n\t\t\t\t| \"left-end\";\n\t\t\t/**\n\t\t\t * The x and y offset distances at which the context menu should open.\n\t\t\t * Relative to trigger element and `position`.\n\t\t\t */\n\t\t\toffset?: [number, number];\n\t\t\t/**\n\t\t\t * Will stop the client from scrolling while the context menu is open\n\t\t\t */\n\t\t\tpreventScrollingWhileOpen?: boolean;\n\t\t\t/**\n\t\t\t * The menu UI to render inside of the context menu.\n\t\t\t */\n\t\t\tmenu:\n\t\t\t\t| typeof Spicetify.ReactComponent.Menu\n\t\t\t\t| typeof Spicetify.ReactComponent.AlbumMenu\n\t\t\t\t| typeof Spicetify.ReactComponent.PodcastShowMenu\n\t\t\t\t| typeof Spicetify.ReactComponent.ArtistMenu\n\t\t\t\t| typeof Spicetify.ReactComponent.PlaylistMenu;\n\t\t\t/**\n\t\t\t * A child of the context menu. Should be ``;\n\n\t\t\tconst slider = container.querySelector(\"button.switch\");\n\t\t\tslider.classList.toggle(\"disabled\", !defaultVal);\n\n\t\t\tslider.onclick = () => {\n\t\t\t\tconst state = slider.classList.contains(\"disabled\");\n\t\t\t\tslider.classList.toggle(\"disabled\");\n\t\t\t\tchangeValue(name, state);\n\t\t\t};\n\n\t\t\treturn container;\n\t\t}\n\n\t\tfunction createDropdown(name, desc, defaultVal, options) {\n\t\t\tconst container = document.createElement(\"div\");\n\t\t\tcontainer.classList.add(\"setting-row\");\n\t\t\tcontainer.id = name;\n\t\t\tcontainer.innerHTML = `\n\n
    \n\n
    `;\n\t\t\tconst dropdown = container.querySelector(\"select\");\n\t\t\tdropdown.value = defaultVal;\n\n\t\t\tdropdown.onchange = () => {\n\t\t\t\tchangeValue(name, dropdown.value);\n\t\t\t};\n\n\t\t\treturn container;\n\t\t}\n\n\t\tconst searchBar = document.createElement(\"div\");\n\t\tsearchBar.classList.add(\"setting-row\");\n\t\tsearchBar.id = \"search\";\n\t\tsearchBar.innerHTML = `\n
    \n
    \n\n${Spicetify.SVGIcons.search}\n\n\n
    \n
    `;\n\t\tconst search = searchBar.querySelector(\"input.search\");\n\n\t\tsearch.oninput = () => {\n\t\t\tconst query = search.value.toLowerCase();\n\t\t\tconst rows = content.querySelectorAll(\".setting-row\");\n\t\t\tfor (const row of rows) {\n\t\t\t\tif (row.id === \"search\" || row.id === \"reset\") continue;\n\t\t\t\trow.style.display = row.textContent.trim().toLowerCase().includes(query) || row.id.toLowerCase().includes(query) ? \"flex\" : \"none\";\n\t\t\t}\n\t\t};\n\n\t\tconst resetButton = document.createElement(\"div\");\n\t\tresetButton.classList.add(\"setting-row\");\n\t\tresetButton.id = \"reset\";\n\t\tresetButton.innerHTML += `\n\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t
    `;\n\t\tconst resetBtn = resetButton.querySelector(\"button.reset\");\n\t\tresetBtn.onclick = () => {\n\t\t\tlocalStorage.removeItem(\"spicetify-exp-features\");\n\t\t\twindow.location.reload();\n\t\t};\n\n\t\tcontent.appendChild(searchBar);\n\n\t\tfor (const name of Object.keys(overrideList)) {\n\t\t\tif (!prevSessionOverrideList.includes(name) && remoteConfiguration.values.has(name)) {\n\t\t\t\tconst currentValue = remoteConfiguration.values.get(name);\n\t\t\t\toverrideList[name].value = currentValue;\n\t\t\t\tlocalStorage.setItem(\"spicetify-exp-features\", JSON.stringify(overrideList));\n\n\t\t\t\tfeatureMap[name] = currentValue;\n\t\t\t\tsetOverrides({ [name]: currentValue });\n\t\t\t}\n\n\t\t\tconst feature = overrideList[name];\n\t\t\tif (!overrideList[name]?.description) continue;\n\n\t\t\tif (overrideList[name].values) {\n\t\t\t\tcontent.appendChild(createDropdown(name, feature.description, feature.value, feature.values));\n\t\t\t} else content.appendChild(createSlider(name, feature.description, feature.value));\n\n\t\t\tfeatureMap[name] = feature.value;\n\t\t}\n\n\t\tcontent.appendChild(resetButton);\n\t})();\n\n\tawait new Promise((res) => Spicetify.Events.webpackLoaded.on(res));\n\n\tnew Spicetify.Menu.Item(\n\t\t\"Experimental features\",\n\t\tfalse,\n\t\t() => {\n\t\t\tSpicetify.PopupModal.display({\n\t\t\t\ttitle: \"Experimental features\",\n\t\t\t\tcontent,\n\t\t\t\tisLarge: true,\n\t\t\t});\n\t\t\tif (!isFallback) return;\n\n\t\t\tconst closeButton = document.querySelector(\"body > generic-modal button.main-trackCreditsModal-closeBtn\");\n\t\t\tconst modalOverlay = document.querySelector(\"body > generic-modal > div\");\n\n\t\t\tif (closeButton && modalOverlay) {\n\t\t\t\tcloseButton.onclick = () => location.reload();\n\t\t\t\tmodalOverlay.onclick = (e) => {\n\t\t\t\t\t// If clicked on overlay, also reload\n\t\t\t\t\tif (e.target === modalOverlay) {\n\t\t\t\t\t\tlocation.reload();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t},\n\t\t``\n\t).register();\n})();\n" }, { "path": "jsHelper/homeConfig.js", "content": "SpicetifyHomeConfig = {};\n\n(async () => {\n\t// Status enum\n\tconst NORMAL = 0;\n\tconst STICKY = 1;\n\tconst LOWERED = 2;\n\t// List of sections' metadata\n\tlet list;\n\t// Store sections' statuses\n\tconst statusDic = {};\n\tlet mounted = false;\n\n\tSpicetifyHomeConfig.arrange = (sections) => {\n\t\tmounted = true;\n\t\tif (list) {\n\t\t\treturn list;\n\t\t}\n\t\tconst stickList = (localStorage.getItem(\"spicetify-home-config:stick\") || \"\").split(\",\");\n\t\tconst lowList = (localStorage.getItem(\"spicetify-home-config:low\") || \"\").split(\",\");\n\t\tconst stickSections = [];\n\t\tconst lowSections = [];\n\t\tfor (const uri of stickList) {\n\t\t\tconst index = sections.findIndex((a) => a?.uri === uri || a?.item?.uri === uri);\n\t\t\tif (index !== -1) {\n\t\t\t\tconst item = sections[index];\n\t\t\t\tconst uri = item.item.uri || item.uri;\n\t\t\t\tstatusDic[uri] = STICKY;\n\t\t\t\tstickSections.push(item);\n\t\t\t\tsections[index] = undefined;\n\t\t\t}\n\t\t}\n\t\tfor (const uri of lowList) {\n\t\t\tconst index = sections.findIndex((a) => a?.uri === uri || a?.item?.uri === uri);\n\t\t\tif (index !== -1) {\n\t\t\t\tconst item = sections[index];\n\t\t\t\tconst uri = item.item.uri || item.uri;\n\t\t\t\tstatusDic[uri] = LOWERED;\n\t\t\t\tlowSections.push(item);\n\t\t\t\tsections[index] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tlist = [...stickSections, ...sections.filter(Boolean), ...lowSections];\n\t\treturn list;\n\t};\n\n\tconst up = document.createElement(\"button\");\n\tup.innerText = \"Up\";\n\tconst down = document.createElement(\"button\");\n\tdown.innerText = \"Down\";\n\tconst lower = document.createElement(\"button\");\n\tconst stick = document.createElement(\"button\");\n\tconst sectionStyle = document.createElement(\"style\");\n\tsectionStyle.innerHTML = `\n.main-home-content section {\n\torder: 0 !important;\n}\n`;\n\tconst containerStyle = document.createElement(\"style\");\n\tcontainerStyle.innerHTML = `\n#spicetify-home-config {\n position: relative;\n width: 100%;\n height: 0;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n gap: 5px;\n z-index: 9999;\n}\n#spicetify-home-config button {\n min-width: 60px;\n height: 40px;\n border-radius: 3px;\n background-color: var(--spice-main);\n color: var(--spice-text);\n border: 1px solid var(--spice-text);\n}\n#spicetify-home-config button:disabled {\n color: var(--spice-button-disabled);\n}\n`;\n\n\tconst container = document.createElement(\"div\");\n\tcontainer.id = \"spicetify-home-config\";\n\tcontainer.append(containerStyle, up, down, lower, stick);\n\tdocument.head.append(sectionStyle);\n\tlet elem = [];\n\n\tfunction injectInteraction() {\n\t\tconst main = document.querySelector(\".main-home-content\");\n\t\telem = [...main.querySelectorAll(\"section\")];\n\t\tfor (const [index, item] of elem.entries()) {\n\t\t\titem.dataset.uri = list[index]?.uri ?? list[index].item?.uri;\n\t\t}\n\n\t\tfunction appendItems() {\n\t\t\tconst stick = [];\n\t\t\tconst low = [];\n\t\t\tconst normal = [];\n\t\t\tfor (const el of elem) {\n\t\t\t\tif (statusDic[el.dataset.uri] === STICKY) stick.push(el);\n\t\t\t\telse if (statusDic[el.dataset.uri] === LOWERED) low.push(el);\n\t\t\t\telse normal.push(el);\n\t\t\t}\n\n\t\t\tlocalStorage.setItem(\n\t\t\t\t\"spicetify-home-config:stick\",\n\t\t\t\tstick.map((a) => a.dataset.uri)\n\t\t\t);\n\t\t\tlocalStorage.setItem(\n\t\t\t\t\"spicetify-home-config:low\",\n\t\t\t\tlow.map((a) => a.dataset.uri)\n\t\t\t);\n\n\t\t\telem = [...stick, ...normal, ...low];\n\t\t\tmain.append(...elem);\n\t\t}\n\n\t\tfunction onSwap(item, dir) {\n\t\t\tcontainer.remove();\n\t\t\tconst curPos = elem.findIndex((e) => e === item);\n\t\t\tconst newPos = curPos + dir;\n\t\t\tif (newPos < 0 || newPos > elem.length - 1) return;\n\n\t\t\t[elem[curPos], elem[newPos]] = [elem[newPos], elem[curPos]];\n\t\t\t[list[curPos], list[newPos]] = [list[newPos], list[curPos]];\n\t\t\tappendItems();\n\t\t}\n\n\t\tfunction onChangeStatus(item, status) {\n\t\t\tcontainer.remove();\n\t\t\tconst isToggle = statusDic[item.dataset.uri] === status;\n\t\t\tstatusDic[item.dataset.uri] = isToggle ? NORMAL : status;\n\t\t\tappendItems();\n\t\t}\n\n\t\tfor (const el of elem) {\n\t\t\tel.onmouseover = () => {\n\t\t\t\tconst status = statusDic[el.dataset.uri];\n\t\t\t\tconst index = elem.findIndex((a) => a === el);\n\n\t\t\t\tif (!status || index === 0 || status !== statusDic[elem[index - 1]?.dataset.uri]) {\n\t\t\t\t\tup.disabled = true;\n\t\t\t\t} else {\n\t\t\t\t\tup.disabled = false;\n\t\t\t\t\tup.onclick = () => onSwap(el, -1);\n\t\t\t\t}\n\n\t\t\t\tif (!status || index === elem.length - 1 || status !== statusDic[elem[index + 1]?.dataset.uri]) {\n\t\t\t\t\tdown.disabled = true;\n\t\t\t\t} else {\n\t\t\t\t\tdown.disabled = false;\n\t\t\t\t\tdown.onclick = () => onSwap(el, 1);\n\t\t\t\t}\n\n\t\t\t\tstick.innerText = status === STICKY ? \"Unstick\" : \"Stick\";\n\t\t\t\tlower.innerText = status === LOWERED ? \"Unlower\" : \"Lower\";\n\t\t\t\tlower.onclick = () => onChangeStatus(el, LOWERED);\n\t\t\t\tstick.onclick = () => onChangeStatus(el, STICKY);\n\n\t\t\t\tel.prepend(container);\n\t\t\t};\n\t\t}\n\t}\n\n\tfunction removeInteraction() {\n\t\tcontainer.remove();\n\t\tfor (const a of elem) {\n\t\t\ta.onmouseover = undefined;\n\t\t}\n\t}\n\n\tawait new Promise((res) => Spicetify.Events.webpackLoaded.on(res));\n\n\tSpicetifyHomeConfig.menu = new Spicetify.Menu.Item(\n\t\t\"Home config\",\n\t\tfalse,\n\t\t(self) => {\n\t\t\tself.setState(!self.isEnabled);\n\t\t\tif (self.isEnabled) {\n\t\t\t\tinjectInteraction();\n\t\t\t} else {\n\t\t\t\tremoveInteraction();\n\t\t\t}\n\t\t},\n\t\tSpicetify.SVGIcons[\"grid-view\"]\n\t);\n\n\tSpicetifyHomeConfig.addToMenu = () => {\n\t\tSpicetifyHomeConfig.menu.register();\n\t};\n\tSpicetifyHomeConfig.removeMenu = () => {\n\t\tSpicetifyHomeConfig.menu.setState(false);\n\t\tSpicetifyHomeConfig.menu.deregister();\n\t};\n\n\tawait new Promise((res) => Spicetify.Events.platformLoaded.on(res));\n\t// Init\n\tif (Spicetify.Platform.History.location.pathname === \"/\") {\n\t\tSpicetifyHomeConfig.addToMenu();\n\t}\n\n\tSpicetify.Platform.History.listen(({ pathname }) => {\n\t\tif (pathname === \"/\") {\n\t\t\tSpicetifyHomeConfig.addToMenu();\n\t\t} else {\n\t\t\tSpicetifyHomeConfig.removeMenu();\n\t\t}\n\t});\n})();\n" }, { "path": "jsHelper/sidebarConfig.js", "content": "(function SidebarConfig() {\n\tconst sidebar = document.querySelector(\".Root__nav-bar\");\n\tif (!sidebar) return setTimeout(SidebarConfig, 100);\n\tlet isGlobalNavbar = false;\n\t// Status enum\n\tconst HIDDEN = 0;\n\tconst SHOW = 1;\n\tconst STICKY = 2;\n\t// Store sidebar buttons elements\n\tlet appItems;\n\tlet list;\n\tlet hiddenList;\n\n\tlet YLXSidebarState = 0;\n\n\t// Store sidebar buttons\n\tlet buttons = [];\n\tlet ordered = [];\n\n\tfunction arrangeItems(storage) {\n\t\tconst newButtons = [...buttons];\n\t\tconst orderedButtons = [];\n\t\tfor (const ele of storage) {\n\t\t\tconst index = newButtons.findIndex((a) => ele[0] === a?.dataset.id);\n\t\t\tif (index !== -1) {\n\t\t\t\torderedButtons.push([newButtons[index], ele[1]]);\n\t\t\t\tnewButtons[index] = undefined;\n\t\t\t}\n\t\t}\n\t\tfor (const button of newButtons) {\n\t\t\tif (button) orderedButtons.push([button, SHOW]);\n\t\t}\n\t\tordered = orderedButtons;\n\t}\n\n\tfunction appendItems() {\n\t\tconst toShow = [];\n\t\tconst toHide = [];\n\t\tconst toStick = [];\n\t\tfor (const el of ordered) {\n\t\t\tconst [item, status] = el;\n\t\t\tif (status === STICKY) {\n\t\t\t\tappItems.append(item);\n\t\t\t\ttoStick.push(el);\n\t\t\t} else if (status === SHOW) {\n\t\t\t\tlist.append(item);\n\t\t\t\ttoShow.push(el);\n\t\t\t} else {\n\t\t\t\thiddenList.append(item);\n\t\t\t\ttoHide.push(el);\n\t\t\t}\n\t\t}\n\t\tordered = [...toStick, ...toShow, ...toHide];\n\t}\n\n\tfunction writeStorage() {\n\t\tconst array = ordered.map((a) => [a[0].dataset.id, a[1]]);\n\n\t\treturn localStorage.setItem(\"spicetify-sidebar-config:ylx\", JSON.stringify(array));\n\t}\n\n\tconst container = document.createElement(\"div\");\n\tcontainer.id = \"spicetify-sidebar-config\";\n\tconst up = document.createElement(\"button\");\n\tup.innerText = \"Up\";\n\tconst down = document.createElement(\"button\");\n\tdown.innerText = \"Down\";\n\tconst hide = document.createElement(\"button\");\n\tconst stick = document.createElement(\"button\");\n\tconst style = document.createElement(\"style\");\n\tstyle.innerHTML = `\n#spicetify-hidden-list {\nbackground-color: rgba(var(--spice-rgb-main), .3);\n}\n#spicetify-sidebar-config {\nposition: relative;\nwidth: 100%;\nheight: 0;\ndisplay: flex;\njustify-content: space-evenly;\nalign-items: center;\ntop: -20px;\nleft: 0;\n}\n#spicetify-sidebar-config button {\nmin-width: 60px;\nborder-radius: 3px;\nbackground-color: var(--spice-main);\ncolor: var(--spice-text);\nborder: 1px solid var(--spice-text);\n}\n#spicetify-sidebar-config button:disabled {\ncolor: var(--spice-button-disabled);\n}\n`;\n\tcontainer.append(style, up, down, hide, stick);\n\n\tfunction injectInteraction() {\n\t\tfunction onSwap(item, dir) {\n\t\t\tcontainer.remove();\n\t\t\tconst curPos = ordered.findIndex((e) => e[0] === item);\n\t\t\tconst newPos = curPos + dir;\n\t\t\tif (newPos < 0 || newPos > ordered.length - 1) return;\n\n\t\t\t[ordered[curPos], ordered[newPos]] = [ordered[newPos], ordered[curPos]];\n\t\t\tappendItems();\n\t\t}\n\n\t\tfunction onChangeStatus(item, status) {\n\t\t\tcontainer.remove();\n\t\t\tconst curPos = ordered.findIndex((e) => e[0] === item);\n\t\t\tordered[curPos][1] = ordered[curPos][1] === status ? SHOW : status;\n\t\t\tappendItems();\n\t\t}\n\n\t\tYLXSidebarState = Spicetify.Platform.LocalStorageAPI.getItem(\"ylx-sidebar-state\");\n\t\tif (YLXSidebarState === 1) document.querySelector(\".main-yourLibraryX-collapseButton > button\")?.click();\n\n\t\tdocument.documentElement.style.setProperty(\"--nav-bar-width\", \"280px\");\n\n\t\thiddenList.classList.remove(\"hidden-visually\");\n\t\tfor (const el of ordered) {\n\t\t\tel[0].onmouseover = () => {\n\t\t\t\tconst [item, status] = el;\n\t\t\t\tconst index = ordered.findIndex((a) => a === el);\n\t\t\t\tif (index === 0 || ordered[index][1] !== ordered[index - 1][1]) {\n\t\t\t\t\tup.disabled = true;\n\t\t\t\t} else {\n\t\t\t\t\tup.disabled = false;\n\t\t\t\t\tup.onclick = () => onSwap(item, -1);\n\t\t\t\t}\n\t\t\t\tif (index === ordered.length - 1 || ordered[index][1] !== ordered[index + 1][1]) {\n\t\t\t\t\tdown.disabled = true;\n\t\t\t\t} else {\n\t\t\t\t\tdown.disabled = false;\n\t\t\t\t\tdown.onclick = () => onSwap(item, 1);\n\t\t\t\t}\n\n\t\t\t\tstick.innerText = status === STICKY ? \"Unstick\" : \"Stick\";\n\t\t\t\thide.innerText = status === HIDDEN ? \"Unhide\" : \"Hide\";\n\t\t\t\thide.onclick = () => onChangeStatus(item, HIDDEN);\n\t\t\t\tstick.onclick = () => onChangeStatus(item, STICKY);\n\n\t\t\t\titem.append(container);\n\t\t\t};\n\t\t}\n\t}\n\n\tfunction removeInteraction() {\n\t\thiddenList.classList.add(\"hidden-visually\");\n\t\tcontainer.remove();\n\t\tfor (const a of ordered) {\n\t\t\ta[0].onmouseover = undefined;\n\t\t}\n\t\tif (YLXSidebarState === 1) document.querySelector(\".main-yourLibraryX-collapseButton > button\")?.click();\n\t\telse\n\t\t\tdocument.documentElement.style.setProperty(\n\t\t\t\t\"--nav-bar-width\",\n\t\t\t\t`${Spicetify.Platform.LocalStorageAPI.getItem(\n\t\t\t\t\tYLXSidebarState === 2 ? \"ylx-expanded-state-nav-bar-width\" : \"ylx-default-state-nav-bar-width\"\n\t\t\t\t)}px`\n\t\t\t);\n\t\twriteStorage();\n\t}\n\n\t(async () => {\n\t\tawait new Promise((res) => Spicetify.Events.webpackLoaded.on(res));\n\n\t\twhile (!Spicetify.Snackbar?.enqueueCustomSnackbar) {\n\t\t\tawait new Promise((resolve) => setTimeout(resolve, 10));\n\t\t}\n\n\t\tif (document.querySelector(\".Root__globalNav\")) {\n\t\t\tconst content = Spicetify.React.createElement(\"div\", {\n\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t__html:\n\t\t\t\t\t\t\"Sidebar config is not supported when Global Navbar is enabled.
    In your terminal, please run spicetify config sidebar_config 0 command and then re-apply spicetify with spicetify apply.\",\n\t\t\t\t},\n\t\t\t\tstyle: {\n\t\t\t\t\t\"text-size\": \"12px\",\n\t\t\t\t},\n\t\t\t});\n\n\t\t\tSpicetify.Snackbar?.enqueueCustomSnackbar(\"sidebar-config\", {\n\t\t\t\tkeyPrefix: \"sidebar-config\",\n\t\t\t\tautoHideDuration: 7500,\n\t\t\t\tchildren: Spicetify.ReactComponent.Snackbar.wrapper({\n\t\t\t\t\tchildren: Spicetify.React.createElement(Spicetify.ReactComponent.Snackbar.simpleLayout, {\n\t\t\t\t\t\tcenter: content,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t\tdragMetadata: {},\n\t\t\t\t\t}),\n\t\t\t\t}),\n\t\t\t});\n\t\t\tisGlobalNavbar = true;\n\t\t}\n\n\t\tif (!isGlobalNavbar) {\n\t\t\tnew Spicetify.Menu.Item(\n\t\t\t\t\"Sidebar config\",\n\t\t\t\tfalse,\n\t\t\t\t(self) => {\n\t\t\t\t\tself.setState(!self.isEnabled);\n\t\t\t\t\tif (self.isEnabled) {\n\t\t\t\t\t\tinjectInteraction();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tremoveInteraction();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t``\n\t\t\t).register();\n\t\t}\n\t})();\n\n\tfunction initConfig() {\n\t\tconst libraryX = document.querySelector(\".main-yourLibraryX-navItems\");\n\n\t\tif (!libraryX) {\n\t\t\tsetTimeout(initConfig, 300);\n\t\t\treturn;\n\t\t}\n\n\t\tInitSidebarXConfig();\n\t}\n\n\tfunction InitSidebarXConfig() {\n\t\t// STICKY container\n\t\tconst YLXAppItems = document.querySelector(\".main-yourLibraryX-navItems\");\n\t\tconst libraryItems = document.querySelector(\".main-yourLibraryX-library\");\n\n\t\tif (!YLXAppItems || !libraryItems?.querySelector(\"ul\")) {\n\t\t\tsetTimeout(InitSidebarXConfig, 300);\n\t\t\treturn;\n\t\t}\n\n\t\tappItems = YLXAppItems;\n\t\tbuttons = [];\n\t\tordered = [];\n\n\t\tappItems.id = \"spicetify-sticky-list\";\n\t\t// SHOW container\n\t\tlist = document.createElement(\"ul\");\n\t\tlist.id = \"spicetify-show-list\";\n\t\t// HIDDEN container\n\t\thiddenList = document.createElement(\"ul\");\n\t\thiddenList.id = \"spicetify-hidden-list\";\n\t\thiddenList.classList.add(\"hidden-visually\");\n\t\tconst playlistList = libraryItems.querySelector(\"ul\");\n\t\tplaylistList.id = \"spicetify-playlist-list\";\n\t\tlibraryItems.prepend(list, hiddenList);\n\n\t\tfor (const ele of appItems.children) {\n\t\t\tele.dataset.id = ele.querySelector(\"a\").pathname;\n\t\t\tbuttons.push(ele);\n\t\t}\n\n\t\tlet storage = [];\n\t\ttry {\n\t\t\tstorage = JSON.parse(localStorage.getItem(\"spicetify-sidebar-config:ylx\"));\n\t\t\tif (!Array.isArray(storage)) throw \"\";\n\t\t} catch {\n\t\t\tstorage = buttons.map((el) => [el.dataset.id, STICKY]);\n\t\t}\n\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tfor (const mutation of mutations) {\n\t\t\t\tif (mutation.type === \"childList\" && mutation.addedNodes.length) {\n\t\t\t\t\tmutation.addedNodes[0].id = \"spicetify-playlist-list\";\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tobserver.observe(playlistList.parentElement, { childList: true });\n\n\t\tarrangeItems(storage);\n\t\tappendItems();\n\t}\n\n\tinitConfig();\n\n\tconst customButtonStyle = document.createElement(\"style\");\n\tcustomButtonStyle.innerHTML = `\ndiv.GlueDropTarget.personal-library {\npadding: 0 8px;\n}\ndiv.GlueDropTarget.personal-library >* {\npadding: 0 16px;\nheight: 40px;\nborder-radius: 4px;\n}\ndiv.GlueDropTarget.personal-library >*.active {\nbackground: var(--spice-card);\n}\n.main-rootlist-rootlist {\nmargin-top: 0;\n}\n.Root__nav-bar :not(.main-yourLibraryX-entryPoints) > #spicetify-show-list >* {\npadding: 0 24px 0 8px;\n}\n.main-yourLibraryX-entryPoints #spicetify-show-list,\n.main-yourLibraryX-entryPoints #spicetify-hidden-list {\npadding: 0 12px;\n}\n`;\n\tdocument.head.append(customButtonStyle);\n})();\n" }, { "path": "jsHelper/spicetifyWrapper.js", "content": "window.Spicetify = {\n\tPlayer: {\n\t\taddEventListener: (type, callback) => {\n\t\t\tif (!(type in Spicetify.Player.eventListeners)) {\n\t\t\t\tSpicetify.Player.eventListeners[type] = [];\n\t\t\t}\n\t\t\tSpicetify.Player.eventListeners[type].push(callback);\n\t\t},\n\t\tdispatchEvent: (event) => {\n\t\t\tif (!(event.type in Spicetify.Player.eventListeners)) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tconst stack = Spicetify.Player.eventListeners[event.type];\n\t\t\tfor (let i = 0; i < stack.length; i++) {\n\t\t\t\tif (typeof stack[i] === \"function\") {\n\t\t\t\t\tstack[i](event);\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t},\n\t\teventListeners: {},\n\t\tseek: (p) => {\n\t\t\tconst duration = p <= 1 ? Math.round(p * Spicetify.Player.origin._state.duration) : p;\n\t\t\tSpicetify.Player.origin.seekTo(duration);\n\t\t},\n\t\tgetProgress: () =>\n\t\t\t(Spicetify.Player.origin._state.isPaused ? 0 : Date.now() - Spicetify.Player.origin._state.timestamp) +\n\t\t\tSpicetify.Player.origin._state.positionAsOfTimestamp,\n\t\tgetProgressPercent: () => Spicetify.Player.getProgress() / Spicetify.Player.origin._state.duration,\n\t\tgetDuration: () => Spicetify.Player.origin._state.duration,\n\t\tsetVolume: (v) => {\n\t\t\tSpicetify.Platform.PlaybackAPI.setVolume(v);\n\t\t},\n\t\tincreaseVolume: () => {\n\t\t\tSpicetify.Platform.PlaybackAPI.raiseVolume();\n\t\t},\n\t\tdecreaseVolume: () => {\n\t\t\tSpicetify.Platform.PlaybackAPI.lowerVolume();\n\t\t},\n\t\tgetVolume: () => Spicetify.Platform.PlaybackAPI._volume,\n\t\tnext: () => {\n\t\t\tSpicetify.Player.origin.skipToNext();\n\t\t},\n\t\tback: () => {\n\t\t\tSpicetify.Player.origin.skipToPrevious();\n\t\t},\n\t\ttogglePlay: () => {\n\t\t\tSpicetify.Player.isPlaying() ? Spicetify.Player.pause() : Spicetify.Player.play();\n\t\t},\n\t\tisPlaying: () => !Spicetify.Player.origin._state.isPaused,\n\t\ttoggleShuffle: () => {\n\t\t\tSpicetify.Player.origin.setShuffle(!Spicetify.Player.origin._state.shuffle);\n\t\t},\n\t\tgetShuffle: () => Spicetify.Player.origin._state.shuffle,\n\t\tsetShuffle: (b) => {\n\t\t\tSpicetify.Player.origin.setShuffle(b);\n\t\t},\n\t\ttoggleRepeat: () => {\n\t\t\tSpicetify.Player.origin.setRepeat((Spicetify.Player.origin._state.repeat + 1) % 3);\n\t\t},\n\t\tgetRepeat: () => Spicetify.Player.origin._state.repeat,\n\t\tsetRepeat: (r) => {\n\t\t\tSpicetify.Player.origin.setRepeat(r);\n\t\t},\n\t\tgetMute: () => Spicetify.Player.getVolume() === 0,\n\t\ttoggleMute: () => {\n\t\t\tSpicetify.Player.setMute(!Spicetify.Player.getMute());\n\t\t},\n\t\tsetMute: (b) => {\n\t\t\tif (b !== Spicetify.Player.getMute()) {\n\t\t\t\tdocument.querySelector(\".volume-bar__icon-button\")?.click();\n\t\t\t}\n\t\t},\n\t\tformatTime: (ms) => {\n\t\t\tlet seconds = Math.floor(ms / 1e3);\n\t\t\tconst minutes = Math.floor(seconds / 60);\n\t\t\tseconds -= minutes * 60;\n\t\t\treturn `${minutes}:${seconds > 9 ? \"\" : \"0\"}${String(seconds)}`;\n\t\t},\n\t\tgetHeart: () => Spicetify.Player.origin._state.item.metadata[\"collection.in_collection\"] === \"true\",\n\t\tpause: () => {\n\t\t\tSpicetify.Player.origin.pause();\n\t\t},\n\t\tplay: () => {\n\t\t\tSpicetify.Player.origin.resume();\n\t\t},\n\t\tplayUri: async (uri, context = {}, options = {}) => {\n\t\t\treturn await Spicetify.Player.origin.play({ uri: uri }, context, options);\n\t\t},\n\t\tremoveEventListener: (type, callback) => {\n\t\t\tif (!(type in Spicetify.Player.eventListeners)) return;\n\t\t\tconst stack = Spicetify.Player.eventListeners[type];\n\t\t\tfor (let i = 0; i < stack.length; i++) {\n\t\t\t\tif (stack[i] === callback) {\n\t\t\t\t\tstack.splice(i, 1);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tskipBack: (amount = 15e3) => {\n\t\t\tSpicetify.Player.origin.seekBackward(amount);\n\t\t},\n\t\tskipForward: (amount = 15e3) => {\n\t\t\tSpicetify.Player.origin.seekForward(amount);\n\t\t},\n\t\tsetHeart: (b) => {\n\t\t\tconst uris = [Spicetify.Player.origin._state.item.uri];\n\t\t\tif (b) {\n\t\t\t\tSpicetify.Platform.LibraryAPI.add({ uris });\n\t\t\t} else {\n\t\t\t\tSpicetify.Platform.LibraryAPI.remove({ uris });\n\t\t\t}\n\t\t},\n\t\ttoggleHeart: () => {\n\t\t\tSpicetify.Player.setHeart(!Spicetify.Player.getHeart());\n\t\t},\n\t},\n\ttest: () => {\n\t\tfunction checkObject(object) {\n\t\t\tconst { objectToCheck, methods, name } = object;\n\t\t\tlet count = methods.size;\n\n\t\t\tfor (const method of methods) {\n\t\t\t\tif (objectToCheck[method] === undefined || objectToCheck[method] === null) {\n\t\t\t\t\tconsole.error(`${name}.${method} is not available. Please open an issue in the Spicetify repository to inform us about it.`);\n\t\t\t\t\tcount--;\n\t\t\t\t}\n\t\t\t}\n\t\t\tconsole.log(`${count}/${methods.size} ${name} methods and objects are OK.`);\n\n\t\t\tfor (const key of Object.keys(objectToCheck)) {\n\t\t\t\tif (!methods.has(key)) {\n\t\t\t\t\tconsole.warn(`${name} method ${key} exists but is not in the method list. Consider adding it.`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst objectsToCheck = new Set([\n\t\t\t{\n\t\t\t\tobjectToCheck: Spicetify,\n\t\t\t\tname: \"Spicetify\",\n\t\t\t\tmethods: new Set([\n\t\t\t\t\t\"Player\",\n\t\t\t\t\t\"addToQueue\",\n\t\t\t\t\t\"CosmosAsync\",\n\t\t\t\t\t\"getAudioData\",\n\t\t\t\t\t\"Keyboard\",\n\t\t\t\t\t\"URI\",\n\t\t\t\t\t\"LocalStorage\",\n\t\t\t\t\t\"Queue\",\n\t\t\t\t\t\"removeFromQueue\",\n\t\t\t\t\t\"showNotification\",\n\t\t\t\t\t\"Menu\",\n\t\t\t\t\t\"ContextMenu\",\n\t\t\t\t\t\"React\",\n\t\t\t\t\t\"Mousetrap\",\n\t\t\t\t\t\"Locale\",\n\t\t\t\t\t\"ReactDOM\",\n\t\t\t\t\t\"Topbar\",\n\t\t\t\t\t\"ReactComponent\",\n\t\t\t\t\t\"PopupModal\",\n\t\t\t\t\t\"SVGIcons\",\n\t\t\t\t\t\"colorExtractor\",\n\t\t\t\t\t\"test\",\n\t\t\t\t\t\"Platform\",\n\t\t\t\t\t\"_platform\",\n\t\t\t\t\t\"Config\",\n\t\t\t\t\t\"expFeatureOverride\",\n\t\t\t\t\t\"createInternalMap\",\n\t\t\t\t\t\"RemoteConfigResolver\",\n\t\t\t\t\t\"Playbar\",\n\t\t\t\t\t\"Tippy\",\n\t\t\t\t\t\"_getStyledClassName\",\n\t\t\t\t\t\"GraphQL\",\n\t\t\t\t\t\"ReactHook\",\n\t\t\t\t\t\"AppTitle\",\n\t\t\t\t\t\"_reservedPanelIds\",\n\t\t\t\t\t\"ReactFlipToolkit\",\n\t\t\t\t\t\"classnames\",\n\t\t\t\t\t\"ReactQuery\",\n\t\t\t\t\t\"Color\",\n\t\t\t\t\t\"extractColorPreset\",\n\t\t\t\t\t\"ReactDOMServer\",\n\t\t\t\t\t\"Snackbar\",\n\t\t\t\t\t\"ContextMenuV2\",\n\t\t\t\t\t\"ReactJSX\",\n\t\t\t\t\t\"_renderNavLinks\",\n\t\t\t\t\t\"Events\",\n\t\t\t\t]),\n\t\t\t},\n\t\t\t{\n\t\t\t\tobjectToCheck: Spicetify.Player,\n\t\t\t\tname: \"Spicetify.Player\",\n\t\t\t\tmethods: new Set([\n\t\t\t\t\t\"addEventListener\",\n\t\t\t\t\t\"back\",\n\t\t\t\t\t\"data\",\n\t\t\t\t\t\"decreaseVolume\",\n\t\t\t\t\t\"dispatchEvent\",\n\t\t\t\t\t\"eventListeners\",\n\t\t\t\t\t\"formatTime\",\n\t\t\t\t\t\"getDuration\",\n\t\t\t\t\t\"getHeart\",\n\t\t\t\t\t\"getMute\",\n\t\t\t\t\t\"getProgress\",\n\t\t\t\t\t\"getProgressPercent\",\n\t\t\t\t\t\"getRepeat\",\n\t\t\t\t\t\"getShuffle\",\n\t\t\t\t\t\"getVolume\",\n\t\t\t\t\t\"increaseVolume\",\n\t\t\t\t\t\"isPlaying\",\n\t\t\t\t\t\"next\",\n\t\t\t\t\t\"pause\",\n\t\t\t\t\t\"play\",\n\t\t\t\t\t\"removeEventListener\",\n\t\t\t\t\t\"seek\",\n\t\t\t\t\t\"setMute\",\n\t\t\t\t\t\"setRepeat\",\n\t\t\t\t\t\"setShuffle\",\n\t\t\t\t\t\"setVolume\",\n\t\t\t\t\t\"skipBack\",\n\t\t\t\t\t\"skipForward\",\n\t\t\t\t\t\"toggleHeart\",\n\t\t\t\t\t\"toggleMute\",\n\t\t\t\t\t\"togglePlay\",\n\t\t\t\t\t\"toggleRepeat\",\n\t\t\t\t\t\"toggleShuffle\",\n\t\t\t\t\t\"origin\",\n\t\t\t\t\t\"playUri\",\n\t\t\t\t\t\"setHeart\",\n\t\t\t\t]),\n\t\t\t},\n\t\t\t{\n\t\t\t\tobjectToCheck: Spicetify.ReactComponent,\n\t\t\t\tname: \"Spicetify.ReactComponent\",\n\t\t\t\tmethods: new Set([\n\t\t\t\t\t\"RightClickMenu\",\n\t\t\t\t\t\"ContextMenu\",\n\t\t\t\t\t\"Menu\",\n\t\t\t\t\t\"MenuItem\",\n\t\t\t\t\t\"AlbumMenu\",\n\t\t\t\t\t\"PodcastShowMenu\",\n\t\t\t\t\t\"ArtistMenu\",\n\t\t\t\t\t\"PlaylistMenu\",\n\t\t\t\t\t\"TrackMenu\",\n\t\t\t\t\t\"TooltipWrapper\",\n\t\t\t\t\t\"TextComponent\",\n\t\t\t\t\t\"IconComponent\",\n\t\t\t\t\t\"ConfirmDialog\",\n\t\t\t\t\t\"Slider\",\n\t\t\t\t\t\"RemoteConfigProvider\",\n\t\t\t\t\t\"ButtonPrimary\",\n\t\t\t\t\t\"ButtonSecondary\",\n\t\t\t\t\t\"ButtonTertiary\",\n\t\t\t\t\t\"Snackbar\",\n\t\t\t\t\t\"Chip\",\n\t\t\t\t\t\"Toggle\",\n\t\t\t\t\t\"Cards\",\n\t\t\t\t\t\"Router\",\n\t\t\t\t\t\"Routes\",\n\t\t\t\t\t\"Route\",\n\t\t\t\t\t\"StoreProvider\",\n\t\t\t\t\t\"PlatformProvider\",\n\t\t\t\t\t\"Dropdown\",\n\t\t\t\t\t\"MenuSubMenuItem\",\n\t\t\t\t\t\"Navigation\",\n\t\t\t\t\t\"ScrollableContainer\",\n\t\t\t\t]),\n\t\t\t},\n\t\t\t{\n\t\t\t\tobjectToCheck: Spicetify.ReactComponent.Cards,\n\t\t\t\tname: \"Spicetify.ReactComponent.Cards\",\n\t\t\t\tmethods: new Set([\n\t\t\t\t\t\"Default\",\n\t\t\t\t\t\"Hero\",\n\t\t\t\t\t\"CardImage\",\n\t\t\t\t\t\"Album\",\n\t\t\t\t\t\"Artist\",\n\t\t\t\t\t\"Audiobook\",\n\t\t\t\t\t\"Episode\",\n\t\t\t\t\t\"Playlist\",\n\t\t\t\t\t\"Profile\",\n\t\t\t\t\t\"Show\",\n\t\t\t\t\t\"Track\",\n\t\t\t\t\t\"FeatureCard\",\n\t\t\t\t]),\n\t\t\t},\n\t\t\t{\n\t\t\t\tobjectToCheck: Spicetify.ReactHook,\n\t\t\t\tname: \"Spicetify.ReactHook\",\n\t\t\t\tmethods: new Set([\"DragHandler\", \"useExtractedColor\"]),\n\t\t\t},\n\t\t]);\n\n\t\tfor (const object of objectsToCheck) {\n\t\t\tcheckObject(object);\n\t\t}\n\t},\n\tGraphQL: {\n\t\tDefinitions: {},\n\t},\n\tReactComponent: {},\n\tReactHook: {},\n\tReactFlipToolkit: {},\n\tSnackbar: {},\n\tPlatform: {},\n};\n\n(function waitForPlatform() {\n\tif (!Spicetify._platform) {\n\t\tsetTimeout(waitForPlatform, 50);\n\t\treturn;\n\t}\n\tconst { _platform } = Spicetify;\n\tfor (const key of Object.keys(_platform)) {\n\t\tif (key.startsWith(\"get\") && typeof _platform[key] === \"function\") {\n\t\t\tSpicetify.Platform[key.slice(3)] = _platform[key]();\n\t\t} else {\n\t\t\tSpicetify.Platform[key] = _platform[key];\n\t\t}\n\t}\n})();\n\n(function addMissingPlatformAPIs() {\n\tif (!Spicetify.Platform?.version && !Spicetify.Platform?.Registry) {\n\t\tsetTimeout(addMissingPlatformAPIs, 50);\n\t\treturn;\n\t}\n\tconst os = Spicetify.Platform.operatingSystem;\n\tconst version = Spicetify.Platform.version.split(\".\").map((i) => Number.parseInt(i, 10));\n\tif (version[0] === 1 && version[1] === 2 && version[2] < 38) return;\n\n\tfor (const [key, _] of Spicetify.Platform.Registry._map.entries()) {\n\t\tif (typeof key?.description !== \"string\" || !key?.description.endsWith(\"API\")) continue;\n\t\tconst symbolName = key.description;\n\t\tif (symbolName === \"ExclusiveModeAPI\" && os === \"Linux\") continue;\n\t\tif (Object.hasOwn(Spicetify.Platform, symbolName)) continue;\n\t\ttry {\n\t\t\tconst resolvedAPI = Spicetify.Platform.Registry.resolve(key);\n\t\t\tSpicetify.Platform[symbolName] = resolvedAPI;\n\n\t\t\tconsole.debug(`[spicetifyWrapper] Resolved PlatformAPI from Registry: ${symbolName}`);\n\t\t} catch (err) {\n\t\t\tconsole.error(`[spicetifyWrapper] Error resolving PlatformAPI from Registry: ${symbolName}`, err);\n\t\t}\n\t}\n})();\n\n// Based on https://blog.aziz.tn/2025/01/spotify-fix-lagging-issue-on-scrolling.html\nfunction applyScrollingFix() {\n\tif (!Spicetify.Platform?.version) {\n\t\tsetTimeout(applyScrollingFix, 50);\n\t\treturn;\n\t}\n\n\t// Run only for 1.2.56 and lower\n\tconst version = Spicetify.Platform.version.split(\".\").map((i) => Number.parseInt(i, 10));\n\tif (version[1] >= 2 && version[2] >= 57) return;\n\n\tconst scrollableElements = Array.from(document.querySelectorAll(\"*\")).filter((el) => {\n\t\tif (\n\t\t\tel.id === \"context-menu\" ||\n\t\t\tel.closest(\"#context-menu\") ||\n\t\t\tel.getAttribute(\"role\") === \"dialog\" ||\n\t\t\tel.classList.contains(\"popup\") ||\n\t\t\tel.getAttribute(\"aria-haspopup\") === \"true\"\n\t\t)\n\t\t\treturn false;\n\n\t\tconst style = window.getComputedStyle(el);\n\t\treturn style.overflow === \"auto\" || style.overflow === \"scroll\" || style.overflowY === \"auto\" || style.overflowY === \"scroll\";\n\t});\n\n\tfor (const el of scrollableElements) {\n\t\tif (!el.hasAttribute(\"data-scroll-optimized\")) {\n\t\t\tel.style.willChange = \"transform\";\n\t\t\tel.style.transform = \"translate3d(0, 0, 0)\";\n\t\t\tel.setAttribute(\"data-scroll-optimized\", \"true\");\n\t\t}\n\t}\n}\n\nconst observer = new MutationObserver(applyScrollingFix);\n\nobserver.observe(document.body, {\n\tchildList: true,\n\tsubtree: true,\n\tattributes: false,\n});\n\nconst originalPushState = history.pushState;\nhistory.pushState = function (...args) {\n\toriginalPushState.apply(this, args);\n\tsetTimeout(applyScrollingFix, 100);\n};\n\nwindow.addEventListener(\"popstate\", () => {\n\tsetTimeout(applyScrollingFix, 100);\n});\n\napplyScrollingFix();\n\n(async function addProxyCosmos() {\n\tif (!Spicetify.Player.origin?._cosmos && !Spicetify.Platform?.Registry) {\n\t\tsetTimeout(addProxyCosmos, 50);\n\t\treturn;\n\t}\n\n\tconst _cosmos = Spicetify.Player.origin?._cosmos ?? Spicetify.Platform?.Registry.resolve(Symbol.for(\"Cosmos\"));\n\n\tconst allowedMethodsMap = {\n\t\tget: \"get\",\n\t\tpost: \"post\",\n\t\tdel: \"delete\",\n\t\tput: \"put\",\n\t\tpatch: \"patch\",\n\t};\n\tconst allowedMethodsSet = new Set(Object.keys(allowedMethodsMap));\n\tconst internalEndpoints = new Set([\"sp:\", \"wg:\"]);\n\n\tconst handler = {\n\t\tget: (target, prop, receiver) => {\n\t\t\tconst internalFetch = Reflect.get(target, prop, receiver);\n\n\t\t\tif (typeof internalFetch !== \"function\" || !allowedMethodsSet.has(prop)) return internalFetch;\n\t\t\tconst version = Spicetify.Platform.version.split(\".\").map((i) => Number.parseInt(i));\n\t\t\tif (version[1] >= 2 && version[2] < 31) return internalFetch;\n\n\t\t\treturn async function (url, body) {\n\t\t\t\tconst urlObj = new URL(url);\n\n\t\t\t\tconst corsProxyURLTemplate = window.localStorage.getItem(\"spicetify:corsProxyTemplate\") ?? \"https://cors-proxy.spicetify.app/{url}\";\n\t\t\t\tconst isWebAPI = urlObj.hostname === \"api.spotify.com\";\n\t\t\t\tconst isSpClientAPI = urlObj.hostname.includes(\"spotify.com\") && urlObj.hostname.includes(\"spclient\");\n\t\t\t\tconst isInternalURL = internalEndpoints.has(urlObj.protocol);\n\t\t\t\tif (isInternalURL) return internalFetch.apply(this, [url, body]);\n\n\t\t\t\tconst shouldUseCORSProxy = !isWebAPI && !isSpClientAPI && !isInternalURL;\n\n\t\t\t\tconst method = allowedMethodsMap[prop.toLowerCase()];\n\t\t\t\tconst headers = {\n\t\t\t\t\t\"Content-Type\": \"application/json\",\n\t\t\t\t};\n\n\t\t\t\tconst options = {\n\t\t\t\t\tmethod,\n\t\t\t\t\theaders,\n\t\t\t\t\ttimeout: 1000 * 15,\n\t\t\t\t};\n\n\t\t\t\tlet finalURL = urlObj.toString();\n\t\t\t\tif (body) {\n\t\t\t\t\tif (method === \"get\") {\n\t\t\t\t\t\tconst params = new URLSearchParams(body);\n\t\t\t\t\t\tconst useSeparator = shouldUseCORSProxy && new URL(finalURL).search.startsWith(\"?\");\n\t\t\t\t\t\tfinalURL += `${useSeparator ? \"&\" : \"?\"}${params.toString()}`;\n\t\t\t\t\t} else options.body = !Array.isArray(body) && typeof body === \"object\" ? JSON.stringify(body) : body;\n\t\t\t\t}\n\t\t\t\tif (shouldUseCORSProxy) {\n\t\t\t\t\tfinalURL = corsProxyURLTemplate.replace(/{url}/, finalURL);\n\t\t\t\t\ttry {\n\t\t\t\t\t\tnew URL(finalURL);\n\t\t\t\t\t} catch {\n\t\t\t\t\t\tconsole.error(\"[spicetifyWrapper] Invalid CORS Proxy URL template\");\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tconst Authorization = `Bearer ${Spicetify.Platform.AuthorizationAPI.getState().token.accessToken}`;\n\t\t\t\tlet injectedHeaders = {};\n\t\t\t\tif (isWebAPI) injectedHeaders = { Authorization };\n\t\t\t\tif (isSpClientAPI) {\n\t\t\t\t\tinjectedHeaders = {\n\t\t\t\t\t\tAuthorization,\n\t\t\t\t\t\t\"Spotify-App-Version\": Spicetify.Platform.version,\n\t\t\t\t\t\t\"App-Platform\": Spicetify.Platform.PlatformData.app_platform,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tObject.assign(options.headers, injectedHeaders);\n\n\t\t\t\ttry {\n\t\t\t\t\treturn fetch(finalURL, options).then((res) => {\n\t\t\t\t\t\tif (!res.ok) return { code: res.status, error: res.statusText, message: \"Failed to fetch\", stack: undefined };\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\treturn res.clone().json();\n\t\t\t\t\t\t} catch {\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\treturn res.clone().blob();\n\t\t\t\t\t\t\t} catch {\n\t\t\t\t\t\t\t\treturn res.clone().text();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t} catch (e) {\n\t\t\t\t\tconsole.error(e);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t};\n\n\twhile (!Spicetify.Player.origin) await new Promise((r) => setTimeout(r, 50));\n\tSpicetify.Player.origin._cosmos = new Proxy(_cosmos, handler);\n\tObject.defineProperty(Spicetify, \"CosmosAsync\", {\n\t\tget: () => {\n\t\t\treturn Spicetify.Player.origin?._cosmos;\n\t\t},\n\t});\n})();\n\nconst fnStr = (f) => {\n\ttry {\n\t\treturn f.toString();\n\t} catch {\n\t\ttry {\n\t\t\treturn Function.prototype.toString.call(f);\n\t\t} catch {\n\t\t\treturn \"\";\n\t\t}\n\t}\n};\n\n(async function hotloadWebpackModules() {\n\twhile (!window?.webpackChunkclient_web) {\n\t\tawait new Promise((r) => setTimeout(r, 50));\n\t}\n\n\t// Force all webpack modules to load\n\tconst require = webpackChunkclient_web.push([[Symbol()], {}, (re) => re]);\n\twhile (!require.m) await new Promise((r) => setTimeout(r, 50));\n\tconsole.log(\"[spicetifyWrapper] Waiting for required webpack modules to load\");\n\tlet webpackDidCallback = false;\n\t// https://github.com/webpack/webpack/blob/main/lib/runtime/OnChunksLoadedRuntimeModule.js\n\trequire.O(\n\t\tnull,\n\t\t[],\n\t\t() => {\n\t\t\twebpackDidCallback = true;\n\t\t},\n\t\t1\n\t);\n\n\tlet chunks = Object.entries(require.m);\n\tlet cache = Object.keys(require.m).map((id) => require(id));\n\n\t// For _renderNavLinks to work\n\tSpicetify.React = cache.find((m) => m?.useMemo);\n\n\twhile (!webpackDidCallback) {\n\t\tawait new Promise((r) => setTimeout(r, 100));\n\t}\n\tconsole.log(\"[spicetifyWrapper] All required webpack modules loaded\");\n\tchunks = Object.entries(require.m);\n\tcache = Object.keys(require.m).map((id) => require(id));\n\tSpicetify.Events.platformLoaded.fire();\n\n\tconst modules = cache\n\t\t.filter((module) => typeof module === \"object\")\n\t\t.flatMap((module) => {\n\t\t\ttry {\n\t\t\t\treturn Object.values(module);\n\t\t\t} catch {}\n\t\t});\n\t// polyfill for chromium <117\n\tconst groupBy = (values, keyFinder) => {\n\t\tif (typeof Object.groupBy === \"function\") return Object.groupBy(values, keyFinder);\n\t\treturn values.reduce((a, b) => {\n\t\t\tconst key = typeof keyFinder === \"function\" ? keyFinder(b) : b[keyFinder];\n\t\t\ta[key] = a[key] ? [...a[key], b] : [b];\n\t\t\treturn a;\n\t\t}, {});\n\t};\n\tconst webpackFactories = new Set(Object.values(require.m));\n\tconst functionModules = modules.flatMap((module) =>\n\t\ttypeof module === \"function\"\n\t\t\t? [module]\n\t\t\t: typeof module === \"object\" && module\n\t\t\t\t? Object.values(module).filter((v) => typeof v === \"function\" && !webpackFactories.has(v))\n\t\t\t\t: []\n\t);\n\tconst exportedReactObjects = groupBy(modules.filter(Boolean), (x) => x.$$typeof);\n\tconst exportedMemos = exportedReactObjects[Symbol.for(\"react.memo\")];\n\tconst exportedForwardRefs = exportedReactObjects[Symbol.for(\"react.forward_ref\")];\n\tconst exportedMemoFRefs = exportedMemos.filter((m) => m.type.$$typeof === Symbol.for(\"react.forward_ref\"));\n\tconst exposeReactComponentsUI = ({ modules, functionModules, exportedForwardRefs }) => {\n\t\tconst componentNames = Object.keys(modules.filter(Boolean).find((e) => e.BrowserDefaultFocusStyleProvider));\n\t\tconst componentRegexes = componentNames.map((n) => new RegExp(`\"data-encore-id\":(?:[a-zA-Z_$][w$]*\\\\.){2}${n}\\\\b`));\n\t\tconst componentPairs = [functionModules.map((f) => [f, f]), exportedForwardRefs.map((f) => [f.render, f])]\n\t\t\t.flat()\n\t\t\t.map(([s, f]) => [componentNames.find((_, i) => fnStr(s)?.match(componentRegexes[i])), f]);\n\n\t\treturn Object.fromEntries(componentPairs);\n\t};\n\tconst reactComponentsUI = exposeReactComponentsUI({ modules, functionModules, exportedForwardRefs });\n\n\tconst knownMenuTypes = [\"album\", \"show\", \"artist\", \"track\", \"playlist\"];\n\tconst menus = modules\n\t\t.map((m) => {\n\t\t\tconst valueMatch = (m?.type ? fnStr(m.type) : \"\").match(/value:\"([\\w-]+)\"/);\n\t\t\tif (valueMatch) return [m, valueMatch[1]];\n\t\t\tconst typeMatch = (m?.type ? fnStr(m.type) : \"\").match(/type:[\\w$]+\\.[\\w$]+\\.([A-Z_]+)/);\n\t\t\tif (typeMatch) return [m, typeMatch[1].toLowerCase()];\n\t\t\treturn null;\n\t\t})\n\t\t.filter(Boolean)\n\t\t.filter((m) => m[1] !== 'value:\"row\"')\n\t\t.map(([module, type]) => {\n\t\t\ttype = type.match(/value:\"([\\w-]+)\"/)?.[1] ?? type;\n\n\t\t\tif (!knownMenuTypes.includes(type)) return;\n\t\t\tif (type === \"show\") type = \"podcast-show\";\n\n\t\t\ttype = `${type\n\t\t\t\t.split(\"-\")\n\t\t\t\t.map((str) => str[0].toUpperCase() + str.slice(1))\n\t\t\t\t.join(\"\")}Menu`;\n\t\t\treturn [type, module];\n\t\t})\n\t\t.filter(Boolean);\n\n\tconst cardTypesToFind = [\"album\", \"artist\", \"audiobook\", \"episode\", \"playlist\", \"profile\", \"show\", \"track\"];\n\tconst cards = [\n\t\t...functionModules\n\t\t\t.flatMap((m) => {\n\t\t\t\treturn cardTypesToFind.map((type) => {\n\t\t\t\t\tif (fnStr(m).includes(`featureIdentifier:\"${type}\"`)) {\n\t\t\t\t\t\tcardTypesToFind.splice(cardTypesToFind.indexOf(type), 1);\n\t\t\t\t\t\treturn [type[0].toUpperCase() + type.slice(1), m];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t})\n\t\t\t.filter(Boolean),\n\t\t...modules\n\t\t\t.flatMap((m) => {\n\t\t\t\treturn cardTypesToFind.map((type) => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tif ((m?.type ? fnStr(m.type) : \"\").includes(`featureIdentifier:\"${type}\"`)) {\n\t\t\t\t\t\t\tcardTypesToFind.splice(cardTypesToFind.indexOf(type), 1);\n\t\t\t\t\t\t\treturn [type[0].toUpperCase() + type.slice(1), m];\n\t\t\t\t\t\t}\n\t\t\t\t\t} catch {}\n\t\t\t\t});\n\t\t\t})\n\t\t\t.filter(Boolean),\n\t];\n\n\tconst _ScrollableContainer = (() => {\n\t\tconst SHOW_BUTTONS = { NEVER: \"never\", ALWAYS: \"always\", ON_HOVER: \"on-hover\" };\n\t\tconst SCROLLING_METHOD = { BY_RATIO: \"by-ratio\", SNAP: \"snap\" };\n\t\tconst EDGE_GRADIENTS = { NONE: \"none\", MASK: \"mask\", LINEAR_GRADIENT: \"linear-gradient\" };\n\t\tconst DIRECTION = { START: -1, END: 1 };\n\n\t\tconst CHEVRON_LEFT = '';\n\t\tconst CHEVRON_RIGHT = '';\n\t\tlet stylesInjected = false;\n\n\t\tfunction injectStyles() {\n\t\t\tif (stylesInjected) return;\n\t\t\tstylesInjected = true;\n\t\t\tconst style = document.createElement(\"style\");\n\t\t\tstyle.className = \"spicetify-scrollable-container\";\n\t\t\tstyle.textContent = `\n.spicetify-sc-contentArea { overflow: hidden; position: relative; }\n.spicetify-sc-scroller { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; width: 100%; -ms-overflow-style: none; overscroll-behavior-x: contain; will-change: transform; }\n@media (prefers-reduced-motion: no-preference) { .spicetify-sc-scroller { scroll-behavior: smooth; } }\n.spicetify-sc-scroller::-webkit-scrollbar { display: none; }\n.spicetify-sc-scroller.spicetify-sc-snap { scroll-snap-type: inline mandatory; }\n.spicetify-sc-scroller.spicetify-sc-snap .spicetify-sc-snapCenter [data-carousel-item] { scroll-snap-align: center; }\n.spicetify-sc-scroller.spicetify-sc-snap .spicetify-sc-snapStart [data-carousel-item] { scroll-snap-align: start; }\n.spicetify-sc-scroller.spicetify-sc-wheelEnabled { overscroll-behavior: contain; }\n.spicetify-sc-scroller.spicetify-sc-maskGradient { --sc-start-color: #000; --sc-end-color: #000; -webkit-mask-composite: source-in, xor; mask-composite: intersect; -webkit-mask-image: linear-gradient(90deg, var(--sc-start-color) 0, #000 120px), linear-gradient(90deg, #000 calc(100% - 120px), var(--sc-end-color) 100%); mask-image: linear-gradient(90deg, var(--sc-start-color) 0, #000 120px), linear-gradient(90deg, #000 calc(100% - 120px), var(--sc-end-color) 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }\n.spicetify-sc-scroller.spicetify-sc-maskGradient.spicetify-sc-maskStart { --sc-start-color: transparent; }\n.spicetify-sc-scroller.spicetify-sc-maskGradient.spicetify-sc-maskEnd { --sc-end-color: transparent; }\n.spicetify-sc-linearGradient::before, .spicetify-sc-linearGradient::after { bottom: 0; content: \"\"; height: 100%; opacity: 0; pointer-events: none; position: absolute; top: 0; transition: opacity .15s ease-out; width: 120px; z-index: 2; }\n.spicetify-sc-linearGradient::before { background: linear-gradient(90deg, var(--carousel-start-chevron-gradient, var(--spice-main)) 0, transparent 100%); inset-inline-start: 0; }\n.spicetify-sc-linearGradient::after { background: linear-gradient(-90deg, var(--carousel-end-chevron-gradient, var(--spice-main)) 0, transparent 100%); inset-inline-end: 0; }\n.spicetify-sc-linearGradient.spicetify-sc-lgStart::before { opacity: 1; }\n.spicetify-sc-linearGradient.spicetify-sc-lgEnd::after { opacity: 1; }\n.spicetify-sc-carousel { bottom: 0; left: 0; position: absolute; right: 0; top: 0; justify-content: space-between; align-items: center; display: flex; pointer-events: none; }\n.spicetify-sc-chevronBtn { display: flex; border: none; border-radius: 50%; cursor: pointer; justify-content: center; align-items: center; backdrop-filter: var(--chevrons-button-backdrop-filter, none); background: transparent; background-color: var(--chevrons-button-color, var(--background-elevated-base)); height: 24px; opacity: 0; position: relative; transition: color .15s ease-out, opacity .15s ease-out, background-color .15s ease-out, translate .15s ease-out; translate: 0; width: 24px; z-index: 3; pointer-events: none; color: var(--text-base, #fff); }\n.spicetify-sc-chevronBtn > * { opacity: .7; z-index: 2; }\n.spicetify-sc-chevronBtn:hover { background-color: var(--chevrons-button-hover-color, var(--background-elevated-highlight)); }\n.spicetify-sc-chevronBtn:hover > * { opacity: 1; }\n.spicetify-sc-chevronBtn.spicetify-sc-chevronVisible { opacity: 1; pointer-events: auto; }\n.spicetify-sc-onHover .spicetify-sc-chevronBtn { opacity: 0; }\n.spicetify-sc-contentArea:hover .spicetify-sc-onHover .spicetify-sc-chevronBtn.spicetify-sc-chevronVisible { opacity: 1; }\n.spicetify-sc-contentArea:hover .spicetify-sc-onHover .spicetify-sc-chevronStart.spicetify-sc-chevronVisible { translate: 8px; }\n.spicetify-sc-contentArea:hover .spicetify-sc-onHover .spicetify-sc-chevronEnd.spicetify-sc-chevronVisible { translate: -8px; }\nbody[data-dragging-uri-type] .spicetify-sc-chevronBtn { pointer-events: none; }`;\n\t\t\tdocument.head.appendChild(style);\n\t\t}\n\n\t\tfunction useDragToScroll({ isDisabled = true } = {}) {\n\t\t\tconst { useRef, useCallback } = Spicetify.React;\n\t\t\tconst frameRef = useRef(0);\n\t\t\tconst savedBehavior = useRef(null);\n\t\t\tconst savedSnapType = useRef(null);\n\n\t\t\treturn useCallback(\n\t\t\t\tisDisabled\n\t\t\t\t\t? () => {}\n\t\t\t\t\t: ({ currentTarget, clientX }) => {\n\t\t\t\t\t\t\tif (!(currentTarget instanceof HTMLElement)) return;\n\t\t\t\t\t\t\tconst el = currentTarget;\n\n\t\t\t\t\t\t\tconst restore = () => {\n\t\t\t\t\t\t\t\tel.style.removeProperty(\"user-select\");\n\t\t\t\t\t\t\t\tif (savedBehavior.current !== null) el.style.scrollBehavior = savedBehavior.current;\n\t\t\t\t\t\t\t\tif (savedSnapType.current !== null) el.style.scrollSnapType = savedSnapType.current;\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tconst fullCleanup = () => {\n\t\t\t\t\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t\t\t\t\t\trestore();\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tfullCleanup();\n\t\t\t\t\t\t\tconst computed = window.getComputedStyle(el);\n\t\t\t\t\t\t\tsavedBehavior.current = computed.scrollBehavior;\n\t\t\t\t\t\t\tsavedSnapType.current = computed.scrollSnapType;\n\t\t\t\t\t\t\tel.style.userSelect = \"none\";\n\t\t\t\t\t\t\tel.style.scrollBehavior = \"auto\";\n\t\t\t\t\t\t\tel.style.scrollSnapType = \"none\";\n\n\t\t\t\t\t\t\tlet dragged = false;\n\t\t\t\t\t\t\tconst startScroll = el.scrollLeft;\n\t\t\t\t\t\t\tconst startX = clientX;\n\t\t\t\t\t\t\tlet velocity = 0;\n\n\t\t\t\t\t\t\tconst coast = () => {\n\t\t\t\t\t\t\t\tel.scrollLeft += velocity;\n\t\t\t\t\t\t\t\tvelocity *= 0.95;\n\t\t\t\t\t\t\t\tif (Math.abs(velocity) > 0.5) frameRef.current = requestAnimationFrame(coast);\n\t\t\t\t\t\t\t\telse fullCleanup();\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst onMove = (e) => {\n\t\t\t\t\t\t\t\tconst dx = e.clientX - startX;\n\t\t\t\t\t\t\t\tif (Math.abs(dx) > 10) dragged = true;\n\t\t\t\t\t\t\t\tconst prev = el.scrollLeft;\n\t\t\t\t\t\t\t\tel.scrollLeft = startScroll - dx;\n\t\t\t\t\t\t\t\tvelocity = el.scrollLeft - prev;\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tdocument.addEventListener(\"mousemove\", onMove);\n\t\t\t\t\t\t\tdocument.addEventListener(\n\t\t\t\t\t\t\t\t\"mouseup\",\n\t\t\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\t\t\tif (dragged) {\n\t\t\t\t\t\t\t\t\t\tconst block = (e) => {\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\te.stopImmediatePropagation();\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\tel.addEventListener(\"click\", block, { once: true, capture: true });\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => el.removeEventListener(\"click\", block, { capture: true }));\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdocument.removeEventListener(\"mousemove\", onMove);\n\t\t\t\t\t\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t\t\t\t\t\t\tframeRef.current = requestAnimationFrame(coast);\n\t\t\t\t\t\t\t\t\tdocument.addEventListener(\"wheel\", fullCleanup, { once: true });\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t},\n\t\t\t\t[isDisabled]\n\t\t\t);\n\t\t}\n\n\t\tfunction useWheelScroll(onlyHorizontalWheel) {\n\t\t\tconst { useRef, useCallback } = Spicetify.React;\n\t\t\tconst isFirst = useRef(true);\n\t\t\tconst savedBehavior = useRef(null);\n\t\t\tconst timer = useRef(null);\n\n\t\t\treturn useCallback(\n\t\t\t\t(e) => {\n\t\t\t\t\tif (!e.deltaY) return;\n\t\t\t\t\tif (onlyHorizontalWheel && Math.abs(e.deltaY) > Math.abs(e.deltaX)) return;\n\t\t\t\t\tconst el = e.currentTarget;\n\t\t\t\t\tif (isFirst.current) {\n\t\t\t\t\t\tisFirst.current = false;\n\t\t\t\t\t\tsavedBehavior.current = el.style.scrollBehavior;\n\t\t\t\t\t\tel.style.scrollBehavior = \"auto\";\n\t\t\t\t\t}\n\n\t\t\t\t\tel.scrollLeft += e.deltaY + e.deltaX;\n\t\t\t\t\tclearTimeout(timer.current);\n\t\t\t\t\ttimer.current = setTimeout(() => {\n\t\t\t\t\t\tisFirst.current = true;\n\t\t\t\t\t\tel.style.scrollBehavior = savedBehavior.current ?? \"\";\n\t\t\t\t\t}, 100);\n\t\t\t\t},\n\t\t\t\t[onlyHorizontalWheel]\n\t\t\t);\n\t\t}\n\n\t\tfunction useScrollState(scrollerRef, contentRef) {\n\t\t\tconst { useState, useCallback, useEffect } = Spicetify.React;\n\t\t\tconst [canGoStart, setCanGoStart] = useState(false);\n\t\t\tconst [canGoEnd, setCanGoEnd] = useState(false);\n\n\t\t\tconst update = useCallback(() => {\n\t\t\t\tconst el = scrollerRef.current;\n\t\t\t\tconst child = contentRef.current;\n\t\t\t\tif (!el || !child) return;\n\t\t\t\tconst maxScroll = el.scrollWidth - el.clientWidth;\n\t\t\t\tconst pos = Math.abs(el.scrollLeft);\n\t\t\t\tconst rounded = pos < 1 ? Math.floor(pos) : Math.ceil(pos);\n\t\t\t\tconst overflows = child.offsetWidth > el.clientWidth;\n\t\t\t\tsetCanGoStart(overflows && rounded !== 0);\n\t\t\t\tsetCanGoEnd(overflows && rounded < maxScroll);\n\t\t\t}, [scrollerRef, contentRef]);\n\n\t\t\tuseEffect(() => {\n\t\t\t\tconst el = scrollerRef.current;\n\t\t\t\tconst child = contentRef.current;\n\t\t\t\tif (!el || !child) return;\n\n\t\t\t\tupdate();\n\t\t\t\tel.addEventListener(\"scroll\", update);\n\t\t\t\tconst ro = new ResizeObserver(update);\n\t\t\t\tro.observe(el);\n\t\t\t\tro.observe(child);\n\t\t\t\treturn () => {\n\t\t\t\t\tel.removeEventListener(\"scroll\", update);\n\t\t\t\t\tro.disconnect();\n\t\t\t\t};\n\t\t\t}, [update, scrollerRef, contentRef]);\n\n\t\t\treturn { canGoStart, canGoEnd };\n\t\t}\n\n\t\tfunction ScrollableContainerComponent(props) {\n\t\t\tconst { useRef, useCallback, useMemo } = Spicetify.React;\n\t\t\tconst h = Spicetify.ReactJSX.jsx;\n\t\t\tconst hsf = Spicetify.ReactJSX.jsxs;\n\t\t\tconst cn = Spicetify.classnames;\n\n\t\t\tconst {\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tchevronsClassName,\n\t\t\t\tshowButtons = SHOW_BUTTONS.ALWAYS,\n\t\t\t\tariaLabel,\n\t\t\t\tonlyHorizontalWheel = false,\n\t\t\t\twheelScrollEnabled = true,\n\t\t\t\tscrollContentClassName,\n\t\t\t\tscrollerClassName,\n\t\t\t\tscrollRatio = 0.9,\n\t\t\t\tscrollingMethod = SCROLLING_METHOD.BY_RATIO,\n\t\t\t\tscrollPadding,\n\t\t\t\tscrollSnapAlign,\n\t\t\t\tscrollSnapByItems = 1,\n\t\t\t\tedgeGradients = EDGE_GRADIENTS.MASK,\n\t\t\t\tdragToScrollOptions = { isDisabled: true },\n\t\t\t\tonScroll,\n\t\t\t\tactiveElementThreshold = 10,\n\t\t\t\tonNavigationClick,\n\t\t\t\trole = \"list\",\n\t\t\t} = props;\n\n\t\t\tinjectStyles();\n\n\t\t\tconst scrollerRef = useRef(null);\n\t\t\tconst contentRef = useRef(null);\n\t\t\tconst lastIndex = useRef(-1);\n\n\t\t\tconst { canGoStart, canGoEnd } = useScrollState(scrollerRef, contentRef);\n\t\t\tconst dragHandler = useDragToScroll(dragToScrollOptions);\n\t\t\tconst wheelHandler = useWheelScroll(onlyHorizontalWheel);\n\t\t\tconst isRtl = useMemo(() => document.documentElement.dir === \"rtl\", []);\n\n\t\t\tconst getActiveIndex = useCallback(() => {\n\t\t\t\tconst scrollPos = Math.abs(scrollerRef.current?.scrollLeft ?? 0);\n\t\t\t\tlet index = -1;\n\t\t\t\tif (contentRef.current?.children) {\n\t\t\t\t\tlet idx = -1;\n\t\t\t\t\tfor (const child of contentRef.current.children) {\n\t\t\t\t\t\tif (child instanceof HTMLElement) {\n\t\t\t\t\t\t\tidx++;\n\t\t\t\t\t\t\tif (Math.abs(child.offsetLeft - scrollPos) <= child.offsetWidth / activeElementThreshold) index = idx;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn index;\n\t\t\t}, [activeElementThreshold]);\n\n\t\t\tconst fireScroll = useCallback(() => {\n\t\t\t\tif (!onScroll) return;\n\t\t\t\tconst index = getActiveIndex();\n\t\t\t\tif (lastIndex.current !== index) {\n\t\t\t\t\tlastIndex.current = index;\n\t\t\t\t\tonScroll(index);\n\t\t\t\t}\n\t\t\t}, [getActiveIndex, onScroll]);\n\n\t\t\tconst navigate = useCallback(\n\t\t\t\t(direction) => {\n\t\t\t\t\tif (!scrollerRef.current) return;\n\t\t\t\t\tconst dir = isRtl ? -1 : 1;\n\n\t\t\t\t\tif (scrollingMethod === SCROLLING_METHOD.SNAP) {\n\t\t\t\t\t\tconst item = contentRef.current?.querySelector(\"[data-carousel-item]\");\n\t\t\t\t\t\tif (!item) return;\n\t\t\t\t\t\tscrollerRef.current.scrollBy({ left: dir * scrollSnapByItems * item.getBoundingClientRect().width * direction });\n\t\t\t\t\t} else scrollerRef.current.scrollBy({ left: dir * direction * scrollerRef.current.clientWidth * scrollRatio });\n\n\t\t\t\t\tfireScroll();\n\t\t\t\t\tonNavigationClick?.(direction);\n\t\t\t\t},\n\t\t\t\t[scrollingMethod, fireScroll, isRtl, scrollSnapByItems, scrollRatio, onNavigationClick]\n\t\t\t);\n\n\t\t\tconst isSnap = scrollingMethod === SCROLLING_METHOD.SNAP;\n\t\t\tconst isMask = edgeGradients === EDGE_GRADIENTS.MASK;\n\t\t\tconst isLinearGradient = edgeGradients === EDGE_GRADIENTS.LINEAR_GRADIENT;\n\n\t\t\tconst makeChevron = (svgPath, position, visible, dir) =>\n\t\t\t\th(\"div\", {\n\t\t\t\t\tclassName: cn(\"spicetify-sc-chevronBtn\", `spicetify-sc-chevron${position}`, { \"spicetify-sc-chevronVisible\": visible }),\n\t\t\t\t\tonClick: (e) => {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tnavigate(dir);\n\t\t\t\t\t},\n\t\t\t\t\t\"aria-hidden\": \"true\",\n\t\t\t\t\tchildren: h(\"svg\", { height: 12, width: 12, viewBox: \"0 0 16 16\", fill: \"currentColor\", dangerouslySetInnerHTML: { __html: svgPath } }),\n\t\t\t\t});\n\n\t\t\treturn hsf(\"div\", {\n\t\t\t\tclassName: cn(\"spicetify-sc-contentArea\", className, {\n\t\t\t\t\t\"spicetify-sc-linearGradient\": isLinearGradient,\n\t\t\t\t\t\"spicetify-sc-lgStart\": isLinearGradient && canGoStart,\n\t\t\t\t\t\"spicetify-sc-lgEnd\": isLinearGradient && canGoEnd,\n\t\t\t\t}),\n\t\t\t\tchildren: [\n\t\t\t\t\th(\"div\", {\n\t\t\t\t\t\tref: scrollerRef,\n\t\t\t\t\t\tclassName: cn(\"spicetify-sc-scroller\", scrollerClassName, {\n\t\t\t\t\t\t\t\"spicetify-sc-snap\": isSnap,\n\t\t\t\t\t\t\t\"spicetify-sc-maskGradient\": isMask,\n\t\t\t\t\t\t\t\"spicetify-sc-wheelEnabled\": wheelScrollEnabled,\n\t\t\t\t\t\t\t\"spicetify-sc-maskStart\": isMask && canGoStart,\n\t\t\t\t\t\t\t\"spicetify-sc-maskEnd\": isMask && canGoEnd,\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tonScroll: onScroll ? fireScroll : undefined,\n\t\t\t\t\t\tonMouseDownCapture: dragHandler,\n\t\t\t\t\t\tonWheel: wheelScrollEnabled ? wheelHandler : undefined,\n\t\t\t\t\t\trole,\n\t\t\t\t\t\t\"aria-label\": ariaLabel,\n\t\t\t\t\t\tstyle: isSnap ? { scrollPadding } : undefined,\n\t\t\t\t\t\tchildren: h(\"div\", {\n\t\t\t\t\t\t\tref: contentRef,\n\t\t\t\t\t\t\trole: \"presentation\",\n\t\t\t\t\t\t\tclassName: cn(scrollContentClassName, {\n\t\t\t\t\t\t\t\t\"spicetify-sc-snapStart\": scrollSnapAlign === \"start\",\n\t\t\t\t\t\t\t\t\"spicetify-sc-snapCenter\": scrollSnapAlign === \"center\",\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t}),\n\t\t\t\t\t}),\n\t\t\t\t\tshowButtons !== SHOW_BUTTONS.NEVER &&\n\t\t\t\t\t\thsf(\"div\", {\n\t\t\t\t\t\t\tclassName: cn(\"spicetify-sc-carousel\", chevronsClassName, {\n\t\t\t\t\t\t\t\t\"spicetify-sc-onHover\": showButtons === SHOW_BUTTONS.ON_HOVER,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tchildren: [makeChevron(CHEVRON_LEFT, \"Start\", canGoStart, DIRECTION.START), makeChevron(CHEVRON_RIGHT, \"End\", canGoEnd, DIRECTION.END)],\n\t\t\t\t\t\t}),\n\t\t\t\t],\n\t\t\t});\n\t\t}\n\n\t\tScrollableContainerComponent.SHOW_BUTTONS = SHOW_BUTTONS;\n\t\tScrollableContainerComponent.SCROLLING_METHOD = SCROLLING_METHOD;\n\t\tScrollableContainerComponent.EDGE_GRADIENTS = EDGE_GRADIENTS;\n\t\tScrollableContainerComponent.DIRECTION = DIRECTION;\n\n\t\treturn ScrollableContainerComponent;\n\t})();\n\n\tObject.assign(Spicetify, {\n\t\tReact: cache.find((m) => m?.useMemo),\n\t\tReactJSX: cache.find((m) => m?.jsx),\n\t\tReactDOM: cache.find((m) => m?.createPortal),\n\t\tReactDOMServer: cache.find((m) => m?.renderToString),\n\t\t// https://github.com/JedWatson/classnames/\n\t\tclassnames: chunks\n\t\t\t.filter(([_, v]) => v.toString().includes(\"[native code]\"))\n\t\t\t.map(([i]) => require(i))\n\t\t\t.find((e) => typeof e === \"function\"),\n\t\tColor: functionModules.find((m) => fnStr(m).includes(\"static fromHex\") || fnStr(m).includes(\"this.rgb\")),\n\t\tPlayer: {\n\t\t\t...Spicetify.Player,\n\t\t\tget origin() {\n\t\t\t\treturn Spicetify.Platform?.PlayerAPI;\n\t\t\t},\n\t\t},\n\t\tGraphQL: {\n\t\t\t...Spicetify.GraphQL,\n\t\t\tget Request() {\n\t\t\t\treturn Spicetify.Platform?.GraphQLLoader || Spicetify.GraphQL.Handler?.(Spicetify.GraphQL.Context);\n\t\t\t},\n\t\t\tContext: functionModules.find((m) => fnStr(m).includes(\"subscription\") && fnStr(m).includes(\"mutation\")),\n\t\t\tHandler: functionModules.find((m) => fnStr(m).includes(\"GraphQL subscriptions are not supported\")),\n\t\t},\n\t\tReactComponent: {\n\t\t\t...Spicetify.ReactComponent,\n\t\t\tTextComponent: modules.find((m) => m?.h1 && m?.render),\n\t\t\tMenu: functionModules.find((m) => fnStr(m).includes(\"getInitialFocusElement\") && fnStr(m).includes(\"children\")),\n\t\t\tMenuItem: functionModules.find((m) => fnStr(m).includes(\"handleMouseEnter\") && fnStr(m).includes(\"onClick\")),\n\t\t\tMenuSubMenuItem: functionModules.find((f) => fnStr(f).includes(\"subMenuIcon\")),\n\t\t\tSlider: wrapProvider(functionModules.find((m) => fnStr(m).includes(\"progressBarRef\"))),\n\t\t\tRemoteConfigProvider: functionModules.find((m) => fnStr(m).includes(\"resolveSuspense\") && fnStr(m).includes(\"configuration\")),\n\t\t\tRightClickMenu: functionModules.find(\n\t\t\t\t(m) => fnStr(m).includes(\"action\") && fnStr(m).includes(\"open\") && fnStr(m).includes(\"trigger\") && fnStr(m).includes(\"right-click\")\n\t\t\t),\n\t\t\tTooltipWrapper: functionModules.find((m) => fnStr(m).includes(\"renderInline\") && fnStr(m).includes(\"showDelay\")),\n\t\t\tButtonPrimary: reactComponentsUI.ButtonPrimary,\n\t\t\tButtonSecondary: reactComponentsUI.ButtonSecondary,\n\t\t\tButtonTertiary: reactComponentsUI.ButtonTertiary,\n\t\t\tSnackbar: {\n\t\t\t\twrapper: functionModules.find((m) => fnStr(m).includes(\"encore-light-theme\") && fnStr(m).includes(\"elevated\")),\n\t\t\t\tsimpleLayout: functionModules.find((m) => [\"leading\", \"center\", \"trailing\"].every((keyword) => fnStr(m).includes(keyword))),\n\t\t\t\tctaText: functionModules.find((m) => fnStr(m).includes(\"ctaText\")),\n\t\t\t\tstyledImage: functionModules.find((m) => fnStr(m).includes(\"placeholderSrc\")),\n\t\t\t},\n\t\t\tChip: reactComponentsUI.Chip,\n\t\t\tToggle: functionModules.find((m) => fnStr(m).includes(\"onSelected\") && fnStr(m).includes('type:\"checkbox\"')),\n\t\t\tCards: {\n\t\t\t\tDefault: reactComponentsUI.Card,\n\t\t\t\tFeatureCard: functionModules.find(\n\t\t\t\t\t(m) => fnStr(m).includes(\"?highlight\") && fnStr(m).includes(\"headerText\") && fnStr(m).includes(\"imageContainer\")\n\t\t\t\t),\n\t\t\t\tHero: functionModules.find((m) => fnStr(m).includes('\"herocard-click-handler\"')),\n\t\t\t\tCardImage: functionModules.find(\n\t\t\t\t\t(m) =>\n\t\t\t\t\t\tfnStr(m).includes(\"isHero\") && (fnStr(m).includes(\"withWaves\") || fnStr(m).includes(\"isCircular\")) && fnStr(m).includes(\"imageWrapper\")\n\t\t\t\t),\n\t\t\t\t...Object.fromEntries(cards),\n\t\t\t},\n\t\t\tRouter: functionModules.find((m) => fnStr(m).includes(\"navigationType\") && fnStr(m).includes(\"static\")),\n\t\t\tRoutes: functionModules.find((m) => fnStr(m).match(/\\([\\w$]+\\)\\{let\\{children:[\\w$]+,location:[\\w$]+\\}=[\\w$]+/)),\n\t\t\tRoute: functionModules.find((m) => fnStr(m).match(/^function [\\w$]+\\([\\w$]+\\)\\{\\(0,[\\w$]+\\.[\\w$]+\\)\\(!1\\)\\}$/)),\n\t\t\tStoreProvider: functionModules.find((m) => fnStr(m).includes(\"notifyNestedSubs\") && fnStr(m).includes(\"serverState\")),\n\t\t\tScrollableContainer: _ScrollableContainer,\n\t\t\tIconComponent: reactComponentsUI.Icon,\n\t\t\t...Object.fromEntries(menus),\n\t\t},\n\t\tReactHook: {\n\t\t\tDragHandler: functionModules.find((m) => fnStr(m).includes(\"dataTransfer\") && fnStr(m).includes(\"data-dragging\")),\n\t\t\tuseExtractedColor: functionModules.find(\n\t\t\t\t(m) => fnStr(m).includes(\"extracted-color\") || (fnStr(m).includes(\"colorRaw\") && fnStr(m).includes(\"useEffect\"))\n\t\t\t),\n\t\t},\n\t\t// React Query\n\t\t// https://github.com/TanStack/query\n\t\t// v3 until Spotify v1.2.29\n\t\t// v5 since Spotify v1.2.30\n\t\tReactQuery: cache.find((module) => module.useQuery) || {\n\t\t\tPersistQueryClientProvider: functionModules.find((m) => fnStr(m).includes(\"persistOptions\")),\n\t\t\tQueryClient: functionModules.find((m) => fnStr(m).includes(\"defaultMutationOptions\")),\n\t\t\tQueryClientProvider: functionModules.find((m) => fnStr(m).includes(\"use QueryClientProvider\")),\n\t\t\tnotifyManager: modules.find((m) => m?.setBatchNotifyFunction),\n\t\t\tuseMutation: functionModules.find((m) => fnStr(m).includes(\"mutateAsync\")),\n\t\t\tuseQuery: functionModules.find((m) =>\n\t\t\t\tfnStr(m).match(/^function [\\w_$]+\\(([\\w_$]+),([\\w_$]+)\\)\\{return\\(0,[\\w_$]+\\.[\\w_$]+\\)\\(\\1,[\\w_$]+\\.[\\w_$]+,\\2\\)\\}$/)\n\t\t\t),\n\t\t\tuseQueryClient: functionModules.find((m) => fnStr(m).includes(\"client\") && fnStr(m).includes(\"Provider\") && fnStr(m).includes(\"mount\")),\n\t\t\tuseSuspenseQuery: functionModules.find(\n\t\t\t\t(m) => fnStr(m).includes(\"throwOnError\") && fnStr(m).includes(\"suspense\") && fnStr(m).includes(\"enabled\")\n\t\t\t),\n\t\t},\n\t\tReactFlipToolkit: {\n\t\t\t...Spicetify.ReactFlipToolkit,\n\t\t\tFlipper: functionModules.find((m) => m?.prototype?.getSnapshotBeforeUpdate),\n\t\t\tFlipped: functionModules.find((m) => m.displayName === \"Flipped\"),\n\t\t},\n\t\t_reservedPanelIds: modules.find((m) => m?.BuddyFeed),\n\t\tMousetrap: cache.find((m) => m?.addKeycodes),\n\t\tLocale: modules.find((m) => m?._dictionary),\n\t});\n\n\tif (!Spicetify.ContextMenuV2._context) Spicetify.ContextMenuV2._context = Spicetify.React.createContext({});\n\tif (!Spicetify.ReactComponent.Navigation)\n\t\tSpicetify.ReactComponent.Navigation = exportedMemoFRefs.find((m) => fnStr(m.type.render).includes(\"navigationalRoot\"));\n\n\t(function waitForChunks() {\n\t\tconst listOfComponents = [\n\t\t\t\"Slider\",\n\t\t\t\"Dropdown\",\n\t\t\t\"Toggle\",\n\t\t\t// \"Cards.Artist\",\n\t\t\t// \"Cards.Audiobook\",\n\t\t\t// \"Cards.Profile\",\n\t\t\t// \"Cards.Show\",\n\t\t\t// \"Cards.Track\",\n\t\t];\n\t\tif (listOfComponents.every((component) => component.split(\".\").reduce((o, k) => o?.[k], Spicetify.ReactComponent) !== undefined)) return;\n\t\tconst cache = Object.keys(require.m).map((id) => require(id));\n\t\tconst modules = cache\n\t\t\t.filter((module) => typeof module === \"object\")\n\t\t\t.flatMap((module) => {\n\t\t\t\ttry {\n\t\t\t\t\treturn Object.values(module);\n\t\t\t\t} catch {}\n\t\t\t});\n\t\tconst functionModules = modules.flatMap((module) =>\n\t\t\ttypeof module === \"function\"\n\t\t\t\t? [module]\n\t\t\t\t: typeof module === \"object\" && module\n\t\t\t\t\t? Object.values(module).filter((v) => typeof v === \"function\" && !webpackFactories.has(v))\n\t\t\t\t\t: []\n\t\t);\n\t\tconst exportedMemos = modules.filter((m) => m?.$$typeof === Symbol.for(\"react.memo\"));\n\t\tconst cardTypesToFind = [\"artist\", \"audiobook\", \"profile\", \"show\", \"track\"];\n\t\t// const cards = [\n\t\t// \t...functionModules\n\t\t// \t\t.flatMap((m) => {\n\t\t// \t\t\treturn cardTypesToFind.map((type) => {\n\t\t// \t\t\t\tif (m.toString().includes(`featureIdentifier:\"${type}\"`)) {\n\t\t// \t\t\t\t\tcardTypesToFind.splice(cardTypesToFind.indexOf(type), 1);\n\t\t// \t\t\t\t\treturn [type[0].toUpperCase() + type.slice(1), m];\n\t\t// \t\t\t\t}\n\t\t// \t\t\t});\n\t\t// \t\t})\n\t\t// \t\t.filter(Boolean),\n\t\t// \t...modules\n\t\t// \t\t.flatMap((m) => {\n\t\t// \t\t\treturn cardTypesToFind.map((type) => {\n\t\t// \t\t\t\ttry {\n\t\t// \t\t\t\t\tif (m?.type?.toString().includes(`featureIdentifier:\"${type}\"`)) {\n\t\t// \t\t\t\t\t\tcardTypesToFind.splice(cardTypesToFind.indexOf(type), 1);\n\t\t// \t\t\t\t\t\treturn [type[0].toUpperCase() + type.slice(1), m];\n\t\t// \t\t\t\t\t}\n\t\t// \t\t\t\t} catch {}\n\t\t// \t\t\t});\n\t\t// \t\t})\n\t\t// \t\t.filter(Boolean),\n\t\t// ];\n\n\t\tSpicetify.ReactComponent.Slider = wrapProvider(functionModules.find((m) => fnStr(m).includes(\"progressBarRef\")));\n\t\tSpicetify.ReactComponent.Toggle = functionModules.find((m) => fnStr(m).includes(\"onSelected\") && fnStr(m).includes('type:\"checkbox\"'));\n\t\t// Object.assign(Spicetify.ReactComponent.Cards, Object.fromEntries(cards));\n\n\t\t// chunks\n\t\tconst dropdownChunk = chunks.find(([, value]) => fnStr(value).includes(\"dropDown\") && fnStr(value).includes(\"isSafari\"));\n\t\tif (dropdownChunk) {\n\t\t\tSpicetify.ReactComponent.Dropdown =\n\t\t\t\tObject.values(require(dropdownChunk[0]))?.[0]?.render ?? Object.values(require(dropdownChunk[0])).find((m) => typeof m === \"function\");\n\t\t}\n\n\t\tconst toggleChunk = chunks.find(([, value]) => fnStr(value).includes(\"onSelected\") && fnStr(value).includes('type:\"checkbox\"'));\n\t\tif (toggleChunk && !Spicetify.ReactComponent.Toggle) {\n\t\t\tSpicetify.ReactComponent.Toggle = Object.values(require(toggleChunk[0]))[0].render;\n\t\t}\n\n\t\tif (!listOfComponents.every((component) => component.split(\".\").reduce((o, k) => o?.[k], Spicetify.ReactComponent) !== undefined)) {\n\t\t\tsetTimeout(waitForChunks, 100);\n\t\t\treturn;\n\t\t}\n\n\t\tif (Spicetify.ReactComponent.ScrollableContainer) setTimeout(refreshNavLinks, 100);\n\t})();\n\n\t(function waitForSnackbar() {\n\t\tif (!Object.keys(Spicetify.Snackbar).length) {\n\t\t\tsetTimeout(waitForSnackbar, 100);\n\t\t\treturn;\n\t\t}\n\t\t// Snackbar notifications\n\t\t// https://github.com/iamhosseindhv/notistack\n\t\tSpicetify.Snackbar = {\n\t\t\t...Spicetify.Snackbar,\n\t\t\tSnackbarProvider: functionModules.find((m) => fnStr(m).includes(\"enqueueSnackbar called with invalid argument\")),\n\t\t\tuseSnackbar: functionModules.find((m) => fnStr(m).match(/^function\\(\\)\\{return\\(0,[\\w$]+\\.useContext\\)\\([\\w$]+\\)\\}$/)),\n\t\t};\n\t})();\n\n\tconst localeModule = modules.find((m) => m?.getTranslations);\n\tif (localeModule) {\n\t\tconst createUrlLocale = functionModules.find((m) => fnStr(m).includes(\"has\") && fnStr(m).includes(\"baseName\") && fnStr(m).includes(\"language\"));\n\t\tSpicetify.Locale = {\n\t\t\tget _relativeTimeFormat() {\n\t\t\t\treturn localeModule._relativeTimeFormat;\n\t\t\t},\n\t\t\tget _dateTimeFormats() {\n\t\t\t\treturn localeModule._dateTimeFormats;\n\t\t\t},\n\t\t\tget _locale() {\n\t\t\t\treturn localeModule._localeForTranslation.baseName;\n\t\t\t},\n\t\t\tget _urlLocale() {\n\t\t\t\treturn localeModule._localeForURLPath;\n\t\t\t},\n\t\t\tget _dictionary() {\n\t\t\t\treturn localeModule._translations;\n\t\t\t},\n\t\t\tformatDate: (date, options) => localeModule.formatDate(date, options),\n\t\t\tformatRelativeTime: (date, options) => localeModule.formatRelativeDate(date, options),\n\t\t\tformatNumber: (number, options) => localeModule.formatNumber(number, options),\n\t\t\tformatNumberCompact: (number, options) => localeModule.formatNumberCompact(number, options),\n\t\t\tget: (key, children) => localeModule.get(key, children),\n\t\t\tgetDateTimeFormat: (options) => localeModule.getDateTimeFormat(options),\n\t\t\tgetDictionary: () => localeModule.getTranslations(),\n\t\t\tgetLocale: () => localeModule._localeForTranslation.baseName,\n\t\t\tgetSmartlingLocale: () => localeModule.getLocaleForSmartling(),\n\t\t\tgetUrlLocale: () => localeModule.getLocaleForURLPath(),\n\t\t\tgetRelativeTimeFormat: () => localeModule.getRelativeTimeFormat(),\n\t\t\tgetSeparator: () => localeModule.getSeparator(),\n\t\t\tsetLocale: (locale) => {\n\t\t\t\treturn localeModule.initialize({\n\t\t\t\t\tlocaleForTranslation: locale,\n\t\t\t\t\tlocaleForFormatting: localeModule._localeForFormatting.baseName,\n\t\t\t\t\ttranslations: localeModule._translations,\n\t\t\t\t});\n\t\t\t},\n\t\t\tsetUrlLocale: (locale) => {\n\t\t\t\tif (createUrlLocale) localeModule._localeForURLPath = createUrlLocale(locale);\n\t\t\t},\n\t\t\tsetDictionary: (dictionary) => {\n\t\t\t\treturn localeModule.initialize({\n\t\t\t\t\tlocaleForTranslation: localeModule._localeForTranslation.baseName,\n\t\t\t\t\tlocaleForFormatting: localeModule._localeForFormatting.baseName,\n\t\t\t\t\ttranslations: dictionary,\n\t\t\t\t});\n\t\t\t},\n\t\t\ttoLocaleLowerCase: (text) => localeModule.toLocaleLowerCase(text),\n\t\t\ttoLocaleUpperCase: (text) => localeModule.toLocaleUpperCase(text),\n\t\t};\n\t}\n\n\tif (Spicetify.Locale) Spicetify.Locale._supportedLocales = cache.find((m) => typeof m?.ja === \"string\");\n\n\tObject.defineProperty(Spicetify, \"Queue\", {\n\t\tget() {\n\t\t\treturn Spicetify.Player.origin?._queue?._state ?? Spicetify.Player.origin?._queue?._queue;\n\t\t},\n\t});\n\n\tconst confirmDialogChunk = chunks.find(\n\t\t([, value]) =>\n\t\t\tvalue.toString().includes(\"main-confirmDialog-container\") ||\n\t\t\t(value.toString().includes(\"confirmDialog\") && value.toString().includes(\"shouldCloseOnEsc\") && value.toString().includes(\"isOpen\"))\n\t);\n\tif (!Spicetify.ReactComponent?.ConfirmDialog && confirmDialogChunk) {\n\t\tSpicetify.ReactComponent.ConfirmDialog = Object.values(require(confirmDialogChunk[0])).find((m) => typeof m === \"object\");\n\t} else {\n\t\tSpicetify.ReactComponent.ConfirmDialog = functionModules.find(\n\t\t\t(m) => fnStr(m).includes(\"isOpen\") && fnStr(m).includes(\"shouldCloseOnEsc\") && fnStr(m).includes(\"onClose\")\n\t\t);\n\t}\n\n\tconst contextMenuChunk = chunks.find(([, value]) => value.toString().includes(\"handleContextMenu\"));\n\tif (contextMenuChunk) {\n\t\tSpicetify.ReactComponent.ContextMenu = Object.values(require(contextMenuChunk[0])).find((m) => typeof m === \"function\");\n\t}\n\n\tconst playlistMenuChunk = chunks.find(\n\t\t([, value]) => value.toString().includes('value:\"playlist\"') && value.toString().includes(\"canView\") && value.toString().includes(\"permissions\")\n\t);\n\tif (playlistMenuChunk && !Spicetify.ReactComponent?.PlaylistMenu) {\n\t\tSpicetify.ReactComponent.PlaylistMenu = Object.values(require(playlistMenuChunk[0])).find(\n\t\t\t(m) => typeof m === \"function\" || typeof m === \"object\"\n\t\t);\n\t}\n\n\tconst infiniteQueryChunk = chunks.find(\n\t\t([_, value]) => value.toString().includes(\"fetchPreviousPage\") && value.toString().includes(\"getOptimisticResult\")\n\t);\n\tif (infiniteQueryChunk) {\n\t\tSpicetify.ReactQuery.useInfiniteQuery = Object.values(require(infiniteQueryChunk[0])).find((m) => typeof m === \"function\");\n\t}\n\n\tif (Spicetify.Color) Spicetify.Color.CSSFormat = modules.find((m) => m?.RGBA);\n\n\t// Combine snackbar and notification\n\t(function bindShowNotification() {\n\t\tif (!Spicetify.Snackbar?.enqueueSnackbar && !Spicetify.showNotification) {\n\t\t\tsetTimeout(bindShowNotification, 250);\n\t\t\treturn;\n\t\t}\n\n\t\tif (Spicetify.Snackbar?.enqueueSnackbar) {\n\t\t\tSpicetify.showNotification = (message, isError, msTimeout) => {\n\t\t\t\tSpicetify.Snackbar.enqueueSnackbar(message, {\n\t\t\t\t\tvariant: isError ? \"error\" : \"default\",\n\t\t\t\t\tautoHideDuration: msTimeout,\n\t\t\t\t});\n\t\t\t};\n\n\t\t\treturn;\n\t\t}\n\n\t\tSpicetify.Snackbar.enqueueSnackbar = (message, { variant = \"default\", autoHideDuration } = {}) => {\n\t\t\tisError = variant === \"error\";\n\t\t\tSpicetify.showNotification(message, isError, autoHideDuration);\n\t\t};\n\t})();\n\n\t// Image color extractor\n\t(async function bindColorExtractor() {\n\t\tif (!Spicetify.GraphQL.Request) {\n\t\t\tsetTimeout(bindColorExtractor, 10);\n\t\t\treturn;\n\t\t}\n\t\tlet imageAnalysis = functionModules.find((m) => m.toString().match(/![\\w$]+\\.isFallback|\\{extractColor/g));\n\t\tconst fallbackPreset = modules.find((m) => m?.colorDark);\n\n\t\t// Search chunk in Spotify 1.2.13 or much older because it is impossible to find any distinguishing features\n\t\tif (!imageAnalysis) {\n\t\t\tlet chunk = chunks.find(\n\t\t\t\t([, value]) =>\n\t\t\t\t\t(value.toString().match(/[\\w$]+\\.isFallback/g) || value.toString().includes(\"colorRaw:\")) && value.toString().match(/.extractColor/g)\n\t\t\t);\n\t\t\tif (!chunk) {\n\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 100));\n\t\t\t\tchunk = chunks.find(([, value]) => value.toString().match(/[\\w$]+\\.isFallback/g) && value.toString().match(/.extractColor/g));\n\t\t\t}\n\t\t\timageAnalysis = Object.values(require(chunk[0])).find((m) => typeof m === \"function\");\n\t\t}\n\n\t\tSpicetify.extractColorPreset = async (image) => {\n\t\t\tconst analysis = await imageAnalysis(Spicetify.GraphQL.Request, image);\n\t\t\tfor (const result of analysis) {\n\t\t\t\tif (\"isFallback\" in result === false) result.isFallback = fallbackPreset === result;\n\t\t\t}\n\n\t\t\treturn analysis;\n\t\t};\n\t})();\n\n\tfunction wrapProvider(component) {\n\t\tif (!component) return null;\n\t\treturn (props) =>\n\t\t\tSpicetify.React.createElement(\n\t\t\t\tSpicetify.ReactComponent.RemoteConfigProvider,\n\t\t\t\t{ configuration: Spicetify.Platform.RemoteConfiguration },\n\t\t\t\tSpicetify.React.createElement(component, props)\n\t\t\t);\n\t}\n\n\t(function waitForURI() {\n\t\tif (!Spicetify.URI) {\n\t\t\tsetTimeout(waitForURI, 10);\n\t\t\treturn;\n\t\t}\n\n\t\t// Ignore on versions older than 1.2.4\n\t\tif (Spicetify.URI.Type) return;\n\n\t\tconst URIChunk = cache\n\t\t\t.filter((module) => typeof module === \"object\")\n\t\t\t.find((m) => {\n\t\t\t\t// Avoid creating 2 arrays of the same values\n\t\t\t\ttry {\n\t\t\t\t\tconst values = Object.values(m);\n\t\t\t\t\treturn values.some((m) => typeof m === \"function\") && values.some((m) => m?.PLAYLIST_V2);\n\t\t\t\t} catch {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t});\n\t\tconst URIModules = Object.values(URIChunk);\n\n\t\t// URI.Type\n\t\tSpicetify.URI.Type = URIModules.find((m) => m?.PLAYLIST_V2);\n\n\t\t// Parse functions\n\t\tSpicetify.URI.from = URIModules.find((m) => typeof m === \"function\" && m.toString().includes(\"allowedTypes\"));\n\t\tSpicetify.URI.fromString = URIModules.find((m) => typeof m === \"function\" && m.toString().includes(\"Argument `uri`\"));\n\n\t\t// createURI functions\n\t\tconst createURIFunctions = URIModules.filter((m) => typeof m === \"function\" && m.toString().match(/\\([\\w$]+\\./));\n\t\tfor (const type of Object.keys(Spicetify.URI.Type)) {\n\t\t\tconst func = createURIFunctions.find((m) => m.toString().match(new RegExp(`\\\\([\\\\w$]+\\\\.${type}(?!_)`)));\n\t\t\tif (!func) continue;\n\n\t\t\tconst camelCaseType = type\n\t\t\t\t.toLowerCase()\n\t\t\t\t.split(\"_\")\n\t\t\t\t.map((word, index) => {\n\t\t\t\t\tif (index === 0) return word;\n\t\t\t\t\treturn word[0].toUpperCase() + word.slice(1);\n\t\t\t\t})\n\t\t\t\t.join(\"\");\n\t\t\tSpicetify.URI[`${camelCaseType}URI`] = func;\n\t\t}\n\n\t\t// isURI functions\n\t\tconst isURIFUnctions = URIModules.filter((m) => typeof m === \"function\" && m.toString().match(/=[\\w$]+\\./));\n\t\tfor (const type of Object.keys(Spicetify.URI.Type)) {\n\t\t\tconst func = isURIFUnctions.find((m) => m.toString().match(new RegExp(`===[\\\\w$]+\\\\.${type}(?!_)\\\\}`)));\n\t\t\tconst camelCaseType = type\n\t\t\t\t.toLowerCase()\n\t\t\t\t.split(\"_\")\n\t\t\t\t.map((word) => word[0].toUpperCase() + word.slice(1))\n\t\t\t\t.join(\"\");\n\n\t\t\t// Fill in missing functions, only serves as placebo as they cannot be as accurate as the original functions\n\t\t\tSpicetify.URI[`is${camelCaseType}`] =\n\t\t\t\tfunc ??\n\t\t\t\t((uri) => {\n\t\t\t\t\tlet uriObj;\n\t\t\t\t\ttry {\n\t\t\t\t\t\turiObj = Spicetify.URI.from?.(uri) ?? Spicetify.URI.fromString?.(uri);\n\t\t\t\t\t} catch {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\t\t\t\t\tif (!uriObj) return false;\n\t\t\t\t\treturn uriObj.type === Spicetify.URI.Type[type];\n\t\t\t\t});\n\t\t}\n\n\t\tSpicetify.URI.isPlaylistV1OrV2 = (uri) => Spicetify.URI.isPlaylist(uri) || Spicetify.URI.isPlaylistV2(uri);\n\n\t\t// Conversion functions\n\t\tSpicetify.URI.idToHex = URIModules.find((m) => typeof m === \"function\" && m.toString().includes(\"22===\"));\n\t\tSpicetify.URI.hexToId = URIModules.find((m) => typeof m === \"function\" && m.toString().includes(\"32===\"));\n\n\t\t// isSameIdentity\n\t\tSpicetify.URI.isSameIdentity = URIModules.find((m) => typeof m === \"function\" && m.toString().match(/[\\w$]+\\.id===[\\w$]+\\.id/));\n\t})();\n\n\tSpicetify.Events.webpackLoaded.fire();\n\trefreshNavLinks?.();\n})();\n\nSpicetify.Events = (() => {\n\tclass Event {\n\t\tcallbacks = [];\n\t\ton(callback) {\n\t\t\tif (!this.callbacks) return void callback();\n\t\t\tthis.callbacks.push(callback);\n\t\t}\n\t\tfire() {\n\t\t\tfor (const callback of this.callbacks) callback();\n\t\t\tthis.callbacks = undefined;\n\t\t}\n\t}\n\n\treturn { webpackLoaded: new Event(), platformLoaded: new Event() };\n})();\n\n// Wait for Spicetify.Player.origin._state before adding following APIs\n(function waitOrigins() {\n\tif (!Spicetify?.Player?.origin?._state) {\n\t\tsetTimeout(waitOrigins, 10);\n\t\treturn;\n\t}\n\n\tconst playerState = {\n\t\tcache: null,\n\t\tcurrent: null,\n\t};\n\n\tconst interval = setInterval(() => {\n\t\tif (!Spicetify.Player.origin._state?.item) return;\n\t\tSpicetify.Player.data = Spicetify.Player.origin._state;\n\t\tplayerState.cache = Spicetify.Player.data;\n\t\tclearInterval(interval);\n\t}, 10);\n\n\tSpicetify.Player.origin._events.addListener(\"update\", ({ data: playerEventData }) => {\n\t\tplayerState.current = playerEventData.item ? playerEventData : null;\n\t\tSpicetify.Player.data = playerState.current;\n\n\t\tif (playerState.cache?.item?.uri !== playerState.current?.item?.uri) {\n\t\t\tconst event = new Event(\"songchange\");\n\t\t\tevent.data = Spicetify.Player.data;\n\t\t\tSpicetify.Player.dispatchEvent(event);\n\t\t}\n\n\t\tif (playerState.cache?.isPaused !== playerState.current?.isPaused) {\n\t\t\tconst event = new Event(\"onplaypause\");\n\t\t\tevent.data = Spicetify.Player.data;\n\t\t\tSpicetify.Player.dispatchEvent(event);\n\t\t}\n\n\t\tplayerState.cache = playerState.current;\n\t});\n\n\t(function waitProductStateAPI() {\n\t\tif (!Spicetify.Platform?.UserAPI) {\n\t\t\tsetTimeout(waitProductStateAPI, 100);\n\t\t\treturn;\n\t\t}\n\n\t\tconst productState = Spicetify.Platform.UserAPI._product_state || Spicetify.Platform.UserAPI._product_state_service;\n\t\tif (productState) return;\n\t\tif (!Spicetify.Platform?.ProductStateAPI) {\n\t\t\tsetTimeout(waitProductStateAPI, 100);\n\t\t\treturn;\n\t\t}\n\n\t\tconst productStateApi = Spicetify.Platform.ProductStateAPI.productStateApi;\n\t\tSpicetify.Platform.UserAPI._product_state_service = productStateApi;\n\t})();\n\n\t(async function setButtonsHeight() {\n\t\twhile (!Spicetify.CosmosAsync) {\n\t\t\tawait new Promise((res) => setTimeout(res, 100));\n\t\t}\n\t\tconst expFeatures = JSON.parse(localStorage.getItem(\"spicetify-exp-features\") || \"{}\");\n\t\tconst isGlobalNavbar = expFeatures?.enableGlobalNavBar?.value;\n\n\t\tif (typeof isGlobalNavbar !== \"undefined\" && isGlobalNavbar === \"control\") {\n\t\t\tawait Spicetify.CosmosAsync.post(\"sp://messages/v1/container/control\", {\n\t\t\t\ttype: \"update_titlebar\",\n\t\t\t\theight: Spicetify.Platform.PlatformData.os_name === \"osx\" ? \"42\" : \"40\",\n\t\t\t});\n\t\t}\n\t})();\n\n\tsetInterval(() => {\n\t\tif (playerState.cache?.isPaused === false) {\n\t\t\tconst event = new Event(\"onprogress\");\n\t\t\tevent.data = Spicetify.Player.getProgress();\n\t\t\tSpicetify.Player.dispatchEvent(event);\n\t\t}\n\t}, 100);\n\n\tSpicetify.addToQueue = (uri) => {\n\t\treturn Spicetify.Player.origin._queue.addToQueue(uri);\n\t};\n\tSpicetify.removeFromQueue = (uri) => {\n\t\treturn Spicetify.Player.origin._queue.removeFromQueue(uri);\n\t};\n})();\n\nSpicetify.getAudioData = async (uri) => {\n\tconst providedURI = uri || Spicetify.Player.data.item.uri;\n\tconst uriObj = Spicetify.URI.from?.(providedURI) ?? Spicetify.URI.fromString?.(providedURI);\n\tif (!uriObj || (uriObj.Type || uriObj.type) !== Spicetify.URI.Type.TRACK) {\n\t\tthrow \"URI is invalid.\";\n\t}\n\n\treturn await Spicetify.CosmosAsync.get(\n\t\t`https://spclient.wg.spotify.com/audio-attributes/v1/audio-analysis/${uriObj.getBase62Id?.() ?? uriObj.id}?format=json`\n\t);\n};\n\nSpicetify.colorExtractor = async (uri) => {\n\tconst body = await Spicetify.CosmosAsync.get(`https://spclient.wg.spotify.com/colorextractor/v1/extract-presets?uri=${uri}&format=json`);\n\n\tif (body.entries?.length) {\n\t\tconst list = {};\n\t\tfor (const color of body.entries[0].color_swatches) {\n\t\t\tlist[color.preset] = `#${color.color?.toString(16).padStart(6, \"0\")}`;\n\t\t}\n\t\treturn list;\n\t}\n\treturn null;\n};\n\nSpicetify.LocalStorage = {\n\tclear: () => localStorage.clear(),\n\tget: (key) => localStorage.getItem(key),\n\tremove: (key) => localStorage.removeItem(key),\n\tset: (key, value) => localStorage.setItem(key, value),\n};\n\nSpicetify._getStyledClassName = (args, component) => {\n\tconst includedKeys = [\n\t\t\"role\",\n\t\t\"variant\",\n\t\t\"semanticColor\",\n\t\t\"iconColor\",\n\t\t\"color\",\n\t\t\"weight\",\n\t\t\"buttonSize\",\n\t\t\"iconSize\",\n\t\t\"position\",\n\t\t\"data-encore-id\",\n\t\t\"$size\",\n\t\t\"$iconColor\",\n\t\t\"$variant\",\n\t\t\"$semanticColor\",\n\t\t\"$buttonSize\",\n\t\t\"$position\",\n\t\t\"$iconSize\",\n\t\t\"$lineClamp\",\n\t];\n\tconst customKeys = [\"blocksize\"];\n\tconst customExactKeys = [\"$padding\", \"$paddingBottom\", \"paddingBottom\", \"padding\"];\n\n\tconst element = Array.from(args).find(\n\t\t(e) =>\n\t\t\te?.children ||\n\t\t\te?.dangerouslySetInnerHTML ||\n\t\t\ttypeof e?.className !== \"undefined\" ||\n\t\t\tincludedKeys.some((key) => typeof e?.[key] !== \"undefined\") ||\n\t\t\tcustomExactKeys.some((key) => typeof e?.[key] !== \"undefined\") ||\n\t\t\tcustomKeys.some((key) => Object.keys(e).some((k) => k.toLowerCase().includes(key)))\n\t);\n\n\tif (!element) return;\n\n\tlet className = /(?:\\w+__)?(\\w+)-[\\w-]+/.exec(component.componentId)?.[1];\n\n\tfor (const key of includedKeys) {\n\t\tif ((typeof element[key] === \"string\" && element[key].length) || typeof element[key] === \"number\") {\n\t\t\tclassName += `-${element[key]}`;\n\t\t}\n\t}\n\n\tconst excludedKeys = [\"children\", \"className\", \"style\", \"dir\", \"key\", \"ref\", \"as\", \"$autoMirror\", \"autoMirror\", \"$hasFocus\", \"\"];\n\tconst excludedPrefix = [\"aria-\"];\n\n\tconst childrenProps = [\"iconLeading\", \"iconTrailing\", \"iconOnly\", \"$iconOnly\", \"$iconLeading\", \"$iconTrailing\"];\n\n\tfor (const key of childrenProps) {\n\t\tconst sanitizedKey = key.startsWith(\"$\") ? key.slice(1) : key;\n\t\tif (element[key]) className += `-${sanitizedKey}`;\n\t}\n\n\tconst booleanKeys = Object.keys(element).filter((key) => typeof element[key] === \"boolean\" && element[key]);\n\n\tfor (const key of booleanKeys) {\n\t\tif (excludedKeys.includes(key)) continue;\n\t\tif (excludedPrefix.some((prefix) => key.startsWith(prefix))) continue;\n\t\tconst sanitizedKey = key.startsWith(\"$\") ? key.slice(1) : key;\n\t\tclassName += `-${sanitizedKey}`;\n\t}\n\n\tconst customEntries = Object.entries(element).filter(\n\t\t([key, value]) =>\n\t\t\t(customKeys.some((k) => key.toLowerCase().includes(k)) || customExactKeys.some((k) => key === k)) && typeof value === \"string\" && value.length\n\t);\n\n\tfor (const [key, value] of customEntries) {\n\t\tconst sanitizedKey = key.startsWith(\"$\") ? key.slice(1) : key;\n\t\tclassName += `-${sanitizedKey}_${value.replace(/[^a-z0-9]/gi, \"_\")}`;\n\t}\n\n\treturn className;\n};\n\n(function waitMouseTrap() {\n\tif (!Spicetify.Mousetrap) {\n\t\tsetTimeout(waitMouseTrap, 10);\n\t\treturn;\n\t}\n\tconst KEYS = {\n\t\tBACKSPACE: \"backspace\",\n\t\tTAB: \"tab\",\n\t\tENTER: \"enter\",\n\t\tSHIFT: \"shift\",\n\t\tCTRL: \"ctrl\",\n\t\tALT: \"alt\",\n\t\tCAPS: \"capslock\",\n\t\tESCAPE: \"esc\",\n\t\tSPACE: \"space\",\n\t\tPAGE_UP: \"pageup\",\n\t\tPAGE_DOWN: \"pagedown\",\n\t\tEND: \"end\",\n\t\tHOME: \"home\",\n\t\tARROW_LEFT: \"left\",\n\t\tARROW_UP: \"up\",\n\t\tARROW_RIGHT: \"right\",\n\t\tARROW_DOWN: \"down\",\n\t\tINSERT: \"ins\",\n\t\tDELETE: \"del\",\n\t\tA: \"a\",\n\t\tB: \"b\",\n\t\tC: \"c\",\n\t\tD: \"d\",\n\t\tE: \"e\",\n\t\tF: \"f\",\n\t\tG: \"g\",\n\t\tH: \"h\",\n\t\tI: \"i\",\n\t\tJ: \"j\",\n\t\tK: \"k\",\n\t\tL: \"l\",\n\t\tM: \"m\",\n\t\tN: \"n\",\n\t\tO: \"o\",\n\t\tP: \"p\",\n\t\tQ: \"q\",\n\t\tR: \"r\",\n\t\tS: \"s\",\n\t\tT: \"t\",\n\t\tU: \"u\",\n\t\tV: \"v\",\n\t\tW: \"w\",\n\t\tX: \"x\",\n\t\tY: \"y\",\n\t\tZ: \"z\",\n\t\tWINDOW_LEFT: \"meta\",\n\t\tWINDOW_RIGHT: \"meta\",\n\t\tSELECT: \"meta\",\n\t\tNUMPAD_0: \"0\",\n\t\tNUMPAD_1: \"1\",\n\t\tNUMPAD_2: \"2\",\n\t\tNUMPAD_3: \"3\",\n\t\tNUMPAD_4: \"4\",\n\t\tNUMPAD_5: \"5\",\n\t\tNUMPAD_6: \"6\",\n\t\tNUMPAD_7: \"7\",\n\t\tNUMPAD_8: \"8\",\n\t\tNUMPAD_9: \"9\",\n\t\tMULTIPLY: \"*\",\n\t\tADD: \"+\",\n\t\tSUBTRACT: \"-\",\n\t\tDECIMAL_POINT: \".\",\n\t\tDIVIDE: \"/\",\n\t\tF1: \"f1\",\n\t\tF2: \"f2\",\n\t\tF3: \"f3\",\n\t\tF4: \"f4\",\n\t\tF5: \"f5\",\n\t\tF6: \"f6\",\n\t\tF7: \"f7\",\n\t\tF8: \"f8\",\n\t\tF9: \"f9\",\n\t\tF10: \"f10\",\n\t\tF11: \"f11\",\n\t\tF12: \"f12\",\n\t\t\";\": \";\",\n\t\t\"=\": \"=\",\n\t\t\",\": \",\",\n\t\t\"-\": \"-\",\n\t\t\".\": \".\",\n\t\t\"/\": \"/\",\n\t\t\"`\": \"`\",\n\t\t\"[\": \"[\",\n\t\t\"\\\\\": \"\\\\\",\n\t\t\"]\": \"]\",\n\t\t// biome-ignore lint/suspicious/noDuplicateObjectKeys: Not an issue\n\t\t'\"': '\"',\n\t\t\"~\": \"`\",\n\t\t\"!\": \"1\",\n\t\t\"@\": \"2\",\n\t\t\"#\": \"3\",\n\t\t$: \"4\",\n\t\t\"%\": \"5\",\n\t\t\"^\": \"6\",\n\t\t\"&\": \"7\",\n\t\t\"*\": \"8\",\n\t\t\"(\": \"9\",\n\t\t\")\": \"0\",\n\t\t_: \"-\",\n\t\t\"+\": \"=\",\n\t\t\":\": \";\",\n\t\t'\"': \"'\",\n\t\t\"<\": \",\",\n\t\t\">\": \".\",\n\t\t\"?\": \"/\",\n\t\t\"|\": \"\\\\\",\n\t};\n\n\tfunction formatKeys(keys) {\n\t\tlet keystroke = \"\";\n\t\tif (typeof keys === \"object\") {\n\t\t\tif (!keys.key || !Object.values(KEYS).includes(keys.key)) {\n\t\t\t\tthrow `Spicetify.Keyboard.registerShortcut: Invalid key ${keys.key}`;\n\t\t\t}\n\t\t\tif (keys.ctrl) keystroke += \"mod+\";\n\t\t\tif (keys.meta) keystroke += \"meta+\";\n\t\t\tif (keys.alt) keystroke += \"alt+\";\n\t\t\tif (keys.shift) keystroke += \"shift+\";\n\t\t\tkeystroke += keys.key;\n\t\t} else if (typeof keys === \"string\" && Object.values(KEYS).includes(keys)) {\n\t\t\tkeystroke = keys;\n\t\t} else {\n\t\t\tthrow `Spicetify.Keyboard.registerShortcut: Invalid keys ${keys}`;\n\t\t}\n\t\treturn keystroke;\n\t}\n\n\tSpicetify.Keyboard = {\n\t\tKEYS,\n\t\tregisterShortcut: (keys, callback) => {\n\t\t\tSpicetify.Mousetrap.bind(formatKeys(keys), callback);\n\t\t},\n\t\t_deregisterShortcut: (keys) => {\n\t\t\tSpicetify.Mousetrap.unbind(formatKeys(keys));\n\t\t},\n\t\tchangeShortcut: (keys, newKeys) => {\n\t\t\tif (!keys || !newKeys) throw \"Spicetify.Keyboard.changeShortcut: Invalid keys\";\n\n\t\t\tconst callback = Object.keys(Spicetify.Mousetrap.trigger()._directMap).find((key) => key.startsWith(formatKeys(keys)));\n\t\t\tif (!callback) throw \"Spicetify.Keyboard.changeShortcut: Shortcut not found\";\n\n\t\t\tSpicetify.Keyboard.registerShortcut(newKeys, Spicetify.Mousetrap.trigger()._directMap[callback]);\n\t\t\tSpicetify.Keyboard._deregisterShortcut(keys);\n\t\t},\n\t};\n\tSpicetify.Keyboard.registerIsolatedShortcut = Spicetify.Keyboard.registerShortcut;\n\tSpicetify.Keyboard.registerImportantShortcut = Spicetify.Keyboard.registerShortcut;\n\tSpicetify.Keyboard.deregisterImportantShortcut = Spicetify.Keyboard._deregisterShortcut;\n})();\n\nSpicetify.SVGIcons = {\n\tcollaborative:\n\t\t'',\n\talbum:\n\t\t'',\n\tartist:\n\t\t'',\n\tblock:\n\t\t'',\n\tbrightness:\n\t\t'',\n\tcar: '',\n\t\"chart-down\": '',\n\t\"chart-up\": '',\n\tcheck: '',\n\t\"check-alt-fill\":\n\t\t'',\n\t\"chevron-left\": '',\n\t\"chevron-right\": '',\n\t\"chromecast-disconnected\":\n\t\t'',\n\tclock:\n\t\t'',\n\tcomputer:\n\t\t'',\n\tcopy: '',\n\tdownload:\n\t\t'',\n\tdownloaded:\n\t\t'',\n\tedit: '',\n\tenhance:\n\t\t'',\n\t\"exclamation-circle\":\n\t\t'',\n\t\"external-link\": '',\n\tfacebook:\n\t\t'',\n\tfollow:\n\t\t'',\n\tfullscreen:\n\t\t'',\n\tgamepad:\n\t\t'',\n\t\"grid-view\": '',\n\theart:\n\t\t'',\n\t\"heart-active\":\n\t\t'',\n\tinstagram:\n\t\t'',\n\tlaptop:\n\t\t'',\n\tlibrary:\n\t\t'',\n\t\"list-view\": '',\n\tlocation:\n\t\t'',\n\tlocked:\n\t\t'',\n\t\"locked-active\":\n\t\t'',\n\tlyrics:\n\t\t'',\n\tmenu: '',\n\tminimize:\n\t\t'',\n\tminus: '',\n\tmore: '',\n\t\"new-spotify-connect\":\n\t\t'',\n\toffline:\n\t\t'',\n\tpause: '',\n\tphone:\n\t\t'',\n\tplay: '',\n\tplaylist: '',\n\t\"playlist-folder\":\n\t\t'',\n\tplus2px: '',\n\t\"plus-alt\":\n\t\t'',\n\tpodcasts:\n\t\t'',\n\tprojector:\n\t\t'',\n\tqueue:\n\t\t'',\n\trepeat:\n\t\t'',\n\t\"repeat-once\":\n\t\t'',\n\tsearch:\n\t\t'',\n\t\"search-active\":\n\t\t'',\n\tshuffle:\n\t\t'',\n\t\"skip-back\": '',\n\t\"skip-back15\":\n\t\t'',\n\t\"skip-forward\": '',\n\t\"skip-forward15\":\n\t\t'',\n\tsoundbetter:\n\t\t'',\n\tspeaker:\n\t\t'',\n\tspotify:\n\t\t'',\n\tsubtitles: '',\n\ttablet:\n\t\t'',\n\tticket:\n\t\t'',\n\ttwitter:\n\t\t'',\n\tvisualizer: '',\n\tvoice:\n\t\t'',\n\tvolume:\n\t\t'',\n\t\"volume-off\":\n\t\t'',\n\t\"volume-one-wave\":\n\t\t'',\n\t\"volume-two-wave\":\n\t\t'',\n\twatch:\n\t\t'',\n\tx: '',\n};\n\n(async function waitUserAPI() {\n\tif (!Spicetify.Platform?.UserAPI) {\n\t\tsetTimeout(waitUserAPI, 1000);\n\t\treturn;\n\t}\n\n\tlet subRequest;\n\n\t// product_state was renamed to product_state_service in Spotify 1.2.21\n\tconst productState =\n\t\tSpicetify.Platform.UserAPI?._product_state ||\n\t\tSpicetify.Platform.UserAPI?._product_state_service ||\n\t\tSpicetify.Platform?.ProductStateAPI.productStateApi;\n\n\tSpicetify.AppTitle = {\n\t\tset: async (name) => {\n\t\t\tif (subRequest) subRequest.cancel();\n\t\t\tawait productState.putOverridesValues({ pairs: { name } });\n\t\t\tsubRequest = productState.subValues({ keys: [\"name\"] }, ({ pairs }) => {\n\t\t\t\tif (pairs.name !== name) {\n\t\t\t\t\tproductState.putOverridesValues({ pairs: { name } }); // Restore name\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn subRequest;\n\t\t},\n\t\tget: async () => {\n\t\t\tconst value = await productState.getValues();\n\t\t\treturn value.pairs.name;\n\t\t},\n\t\treset: async () => {\n\t\t\tif (subRequest) subRequest.cancel();\n\t\t\tawait productState.delOverridesValues({ keys: [\"name\"] });\n\t\t},\n\t\tsub: (callback) => {\n\t\t\treturn productState.subValues({ keys: [\"name\"] }, ({ pairs }) => {\n\t\t\t\tcallback(pairs.name);\n\t\t\t});\n\t\t},\n\t};\n})();\n\nfunction parseIcon(icon, size = 16) {\n\tif (icon && Spicetify.SVGIcons[icon]) {\n\t\treturn `${Spicetify.SVGIcons[icon]}`;\n\t}\n\treturn icon || \"\";\n}\n\nfunction createIconComponent(icon, size = 16) {\n\treturn Spicetify.React.createElement(\n\t\tSpicetify.ReactComponent.IconComponent,\n\t\t{\n\t\t\ticonSize: size,\n\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t__html: parseIcon(icon),\n\t\t\t},\n\t\t},\n\t\tnull\n\t);\n}\n\nSpicetify.ContextMenuV2 = (() => {\n\tconst registeredItems = new Map();\n\n\tfunction parseProps(props) {\n\t\tif (!props) return;\n\n\t\tconst uri = props.uri ?? props.item?.uri ?? props.reference?.uri;\n\t\tconst uris = props.uris ?? (uri ? [uri] : undefined);\n\t\tif (!uris) return;\n\n\t\tconst uid = props.uid ?? props.item?.uid;\n\t\tconst uids = props.uids ?? (uid ? [uid] : undefined);\n\n\t\tconst contextUri = props.contextUri ?? props.context?.uri;\n\n\t\treturn [uris, uids, contextUri];\n\t}\n\n\t// these classes bridge the gap between react and js, insuring reactivity\n\tclass Item {\n\t\tconstructor({ children, disabled = false, leadingIcon, trailingIcon, divider, onClick, shouldAdd = () => true }) {\n\t\t\t// maybe use a props object and a setProps\n\t\t\tthis.shouldAdd = shouldAdd;\n\n\t\t\tthis._children = children;\n\t\t\tthis._disabled = disabled;\n\t\t\tthis._leadingIcon = leadingIcon;\n\t\t\tthis._trailingIcon = trailingIcon;\n\t\t\tthis._divider = divider;\n\n\t\t\tthis._element = Spicetify.ReactJSX.jsx(() => {\n\t\t\t\tconst [_children, setChildren] = Spicetify.React.useState(this._children);\n\t\t\t\tconst [_disabled, setDisabled] = Spicetify.React.useState(this._disabled);\n\t\t\t\tconst [_leadingIcon, setLeadingIcon] = Spicetify.React.useState(this._leadingIcon);\n\t\t\t\tconst [_trailingIcon, setTrailingIcon] = Spicetify.React.useState(this._trailingIcon);\n\t\t\t\tconst [_divider, setDivider] = Spicetify.React.useState(this._divider);\n\n\t\t\t\tSpicetify.React.useEffect(() => {\n\t\t\t\t\tthis._setChildren = setChildren;\n\t\t\t\t\tthis._setDisabled = setDisabled;\n\t\t\t\t\tthis._setIcon = setLeadingIcon;\n\t\t\t\t\tthis._setTrailingIcon = setTrailingIcon;\n\t\t\t\t\tthis._setDivider = setDivider;\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tthis._setChildren = undefined;\n\t\t\t\t\t\tthis._setDisabled = undefined;\n\t\t\t\t\t\tthis._setIcon = undefined;\n\t\t\t\t\t\tthis._setTrailingIcon = undefined;\n\t\t\t\t\t\tthis._setDivider = undefined;\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\tconst context = Spicetify.React.useContext(Spicetify.ContextMenuV2._context) ?? {};\n\n\t\t\t\treturn Spicetify.React.createElement(Spicetify.ReactComponent.MenuItem, {\n\t\t\t\t\tdisabled: _disabled,\n\t\t\t\t\tdivider: _divider,\n\t\t\t\t\tonClick: (e) => {\n\t\t\t\t\t\tonClick(context, this, e);\n\t\t\t\t\t},\n\t\t\t\t\tleadingIcon: _leadingIcon && createIconComponent(_leadingIcon),\n\t\t\t\t\ttrailingIcon: _trailingIcon && createIconComponent(_trailingIcon),\n\t\t\t\t\tchildren: _children,\n\t\t\t\t});\n\t\t\t}, {});\n\t\t}\n\n\t\tset children(children) {\n\t\t\tthis._children = children;\n\t\t\tthis._setChildren?.(this._children);\n\t\t}\n\t\tget children() {\n\t\t\treturn this._children;\n\t\t}\n\n\t\tset disabled(bool) {\n\t\t\tthis._disabled = bool;\n\t\t\tthis._setDisabled?.(this._disabled);\n\t\t}\n\t\tget disabled() {\n\t\t\treturn this._disabled;\n\t\t}\n\n\t\tset leadingIcon(name) {\n\t\t\tthis._leadingIcon = name;\n\t\t\tthis._setIcon?.(this._leadingIcon);\n\t\t}\n\t\tget leadingIcon() {\n\t\t\treturn this._leadingIcon;\n\t\t}\n\n\t\tset trailingIcon(name) {\n\t\t\tthis._trailingIcon = name;\n\t\t\tthis._setTrailingIcon?.(this._trailingIcon);\n\t\t}\n\t\tget trailingIcon() {\n\t\t\treturn this._trailingIcon;\n\t\t}\n\n\t\tset divider(divider) {\n\t\t\tthis._divider = divider;\n\t\t\tthis._setDivider?.(this._divider);\n\t\t}\n\t\tget divider() {\n\t\t\treturn this._divider;\n\t\t}\n\n\t\tregister() {\n\t\t\tSpicetify.ContextMenuV2.registerItem(this._element, this.shouldAdd);\n\t\t}\n\t\tderegister() {\n\t\t\tSpicetify.ContextMenuV2.unregisterItem(this._element);\n\t\t}\n\t}\n\n\tclass ItemSubMenu {\n\t\tstatic itemsToComponents(items, props, trigger, target, parentDepth = 1) {\n\t\t\treturn items\n\t\t\t\t.filter((item) => (item.shouldAdd || (() => true))?.(props, trigger, target))\n\t\t\t\t.map((item) => {\n\t\t\t\t\tif (item instanceof ItemSubMenu) item.depth = parentDepth + 1;\n\t\t\t\t\treturn item._element;\n\t\t\t\t});\n\t\t}\n\n\t\tconstructor({ text, disabled = false, leadingIcon, divider, items, depth = 1, shouldAdd = () => true }) {\n\t\t\tthis.shouldAdd = shouldAdd;\n\n\t\t\tthis._text = text;\n\t\t\tthis._disabled = disabled;\n\t\t\tthis._leadingIcon = leadingIcon;\n\t\t\tthis._divider = divider;\n\t\t\tthis._items = items;\n\t\t\tthis._depth = depth;\n\t\t\tthis._element = Spicetify.ReactJSX.jsx(() => {\n\t\t\t\tconst [_text, setText] = Spicetify.React.useState(this._text);\n\t\t\t\tconst [_disabled, setDisabled] = Spicetify.React.useState(this._disabled);\n\t\t\t\tconst [_leadingIcon, setLeadingIcon] = Spicetify.React.useState(this._leadingIcon);\n\t\t\t\tconst [_divider, setDivider] = Spicetify.React.useState(this._divider);\n\t\t\t\tconst [_items, setItems] = Spicetify.React.useState(this._items);\n\t\t\t\tconst [_depth, setDepth] = Spicetify.React.useState(this._depth);\n\n\t\t\t\tSpicetify.React.useEffect(() => {\n\t\t\t\t\tthis._setText = setText;\n\t\t\t\t\tthis._setDisabled = setDisabled;\n\t\t\t\t\tthis._setLeadingIcon = setLeadingIcon;\n\t\t\t\t\tthis._setDivider = setDivider;\n\t\t\t\t\tthis._setItems = setItems;\n\t\t\t\t\tthis._setDepth = setDepth;\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tthis._setText = undefined;\n\t\t\t\t\t\tthis._setDisabled = undefined;\n\t\t\t\t\t\tthis._setLeadingIcon = undefined;\n\t\t\t\t\t\tthis._setDivider = undefined;\n\t\t\t\t\t\tthis._setItems = undefined;\n\t\t\t\t\t\tthis._setDepth = undefined;\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\tconst context = Spicetify.React.useContext(Spicetify.ContextMenuV2._context) ?? {};\n\t\t\t\tconst { props, trigger, target } = context;\n\n\t\t\t\treturn Spicetify.React.createElement(Spicetify.ReactComponent.MenuSubMenuItem, {\n\t\t\t\t\tdisplayText: _text,\n\t\t\t\t\tdivider: _divider,\n\t\t\t\t\tdepth: _depth,\n\t\t\t\t\tplacement: \"right-start\",\n\t\t\t\t\tonOpenChange: () => undefined,\n\t\t\t\t\tonClick: () => undefined,\n\t\t\t\t\tdisabled: _disabled,\n\t\t\t\t\tleadingIcon: _leadingIcon && createIconComponent(_leadingIcon),\n\t\t\t\t\tchildren: ItemSubMenu.itemsToComponents(_items, props, trigger, target, _depth),\n\t\t\t\t});\n\t\t\t}, {});\n\t\t}\n\n\t\tset text(text) {\n\t\t\tthis._text = text;\n\t\t\tthis._setText?.(this._text);\n\t\t}\n\t\tget text() {\n\t\t\treturn this._text;\n\t\t}\n\n\t\tset disabled(bool) {\n\t\t\tthis._disabled = bool;\n\t\t\tthis._setDisabled?.(this._disabled);\n\t\t}\n\t\tget disabled() {\n\t\t\treturn this._disabled;\n\t\t}\n\n\t\tset leadingIcon(name) {\n\t\t\tthis._leadingIcon = name;\n\t\t\tthis._setIcon?.(this._leadingIcon);\n\t\t}\n\t\tget leadingIcon() {\n\t\t\treturn this._leadingIcon;\n\t\t}\n\n\t\tset divider(divider) {\n\t\t\tthis._divider = divider;\n\t\t\tthis._setDivider?.(this._divider);\n\t\t}\n\t\tget divider() {\n\t\t\treturn this._divider;\n\t\t}\n\n\t\tset depth(value) {\n\t\t\tthis._depth = value;\n\t\t\tthis._setDepth?.(this._depth);\n\t\t}\n\t\tget depth() {\n\t\t\treturn this._depth;\n\t\t}\n\n\t\taddItem(item) {\n\t\t\tthis._items.add(item);\n\t\t\tthis._setItems?.(this._items);\n\t\t}\n\t\tremoveItem(item) {\n\t\t\tthis._items.delete(item);\n\t\t\tthis._setItems?.(this._items);\n\t\t}\n\n\t\tregister() {\n\t\t\tregisterItem(this._element, this.shouldAdd);\n\t\t}\n\t\tderegister() {\n\t\t\tunregisterItem(this._element);\n\t\t}\n\t}\n\n\tfunction registerItem(item, shouldAdd = () => true) {\n\t\tregisteredItems.set(item, shouldAdd);\n\t}\n\n\tfunction unregisterItem(item) {\n\t\tregisteredItems.delete(item);\n\t}\n\n\tconst renderItems = () => {\n\t\tconst { props, trigger, target } = Spicetify.React.useContext(Spicetify.ContextMenuV2._context) ?? {};\n\n\t\treturn Array.from(registeredItems.entries())\n\t\t\t.map(([item, shouldAdd]) => shouldAdd?.(props, trigger, target) && item)\n\t\t\t.filter(Boolean);\n\t};\n\n\treturn { parseProps, Item, ItemSubMenu, registerItem, unregisterItem, renderItems };\n})();\n\nSpicetify.Menu = (() => {\n\tconst shouldAdd = (_, trigger, target) =>\n\t\ttrigger === \"click\" && (target.classList.contains(\"main-userWidget-boxCondensed\") || target.classList.contains(\"main-userWidget-box\"));\n\n\tclass Item extends Spicetify.ContextMenuV2.Item {\n\t\tconstructor(children, isEnabled, onClick, leadingIcon) {\n\t\t\tsuper({ children, leadingIcon, onClick: (_, self) => onClick(self), shouldAdd });\n\n\t\t\tthis.isEnabled = isEnabled;\n\t\t}\n\n\t\tsetState(state) {\n\t\t\tthis.isEnabled = state;\n\t\t}\n\n\t\tset isEnabled(bool) {\n\t\t\tthis._isEnabled = bool;\n\t\t\tthis.trailingIcon = this.isEnabled ? \"check\" : \"\";\n\t\t}\n\t\tget isEnabled() {\n\t\t\treturn this._isEnabled;\n\t\t}\n\t}\n\n\tclass SubMenu extends Spicetify.ContextMenuV2.ItemSubMenu {\n\t\tconstructor(text, items, leadingIcon) {\n\t\t\tsuper({ text, leadingIcon, items, shouldAdd });\n\t\t}\n\n\t\tset name(text) {\n\t\t\tthis.text = text;\n\t\t}\n\t\tget name() {\n\t\t\treturn this.text;\n\t\t}\n\n\t\tset icon(icon) {\n\t\t\tthis.leadingIcon = icon;\n\t\t}\n\t\tget icon() {\n\t\t\treturn this.leadingIcon;\n\t\t}\n\t}\n\n\treturn { Item, SubMenu };\n})();\n\nSpicetify.ContextMenu = (() => {\n\tconst iconList = Object.keys(Spicetify.SVGIcons);\n\n\tclass Item extends Spicetify.ContextMenuV2.Item {\n\t\tstatic iconList = iconList;\n\n\t\tconstructor(name, onClick, shouldAdd = () => true, icon = undefined, trailingIcon = undefined, disabled = false) {\n\t\t\tsuper({\n\t\t\t\tchildren: name,\n\t\t\t\tdisabled,\n\t\t\t\tleadingIcon: icon,\n\t\t\t\ttrailingIcon,\n\t\t\t\tonClick: (context) => {\n\t\t\t\t\tconst [uris, uids, contextUri] = Spicetify.ContextMenuV2.parseProps(context.props);\n\t\t\t\t\tonClick(uris, uids, contextUri);\n\t\t\t\t},\n\t\t\t\tshouldAdd: (props) => {\n\t\t\t\t\tconst parsedProps = Spicetify.ContextMenuV2.parseProps(props);\n\t\t\t\t\treturn parsedProps && shouldAdd(...parsedProps);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\n\t\tset name(name) {\n\t\t\tthis.children = name;\n\t\t}\n\t\tget name() {\n\t\t\treturn this.children;\n\t\t}\n\n\t\tset icon(name) {\n\t\t\tthis.leadingIcon = name;\n\t\t}\n\t\tget icon() {\n\t\t\treturn this.leadingIcon;\n\t\t}\n\t}\n\n\tclass SubMenu extends Spicetify.ContextMenuV2.ItemSubMenu {\n\t\tstatic iconList = iconList;\n\n\t\tconstructor(name, items, shouldAdd, disabled = false, icon = undefined) {\n\t\t\tsuper({\n\t\t\t\ttext: name,\n\t\t\t\tdisabled,\n\t\t\t\tleadingIcon: icon,\n\t\t\t\titems,\n\t\t\t\tshouldAdd: (props) => {\n\t\t\t\t\tconst parsedProps = Spicetify.ContextMenuV2.parseProps(props);\n\t\t\t\t\treturn parsedProps && shouldAdd(...parsedProps);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\n\t\tset name(name) {\n\t\t\tthis.text = name;\n\t\t}\n\t\tget name() {\n\t\t\treturn this.text;\n\t\t}\n\t}\n\n\treturn { Item, SubMenu };\n})();\n\nlet navLinkFactoryCtx = null;\nlet refreshNavLinks = null;\n\nSpicetify._renderNavLinks = (list, isTouchScreenUi) => {\n\tconst [refreshCount, refresh] = Spicetify.React.useReducer((x) => x + 1, 0);\n\trefreshNavLinks = refresh;\n\n\tif (\n\t\t!Spicetify.ReactComponent.ButtonTertiary ||\n\t\t!Spicetify.ReactComponent.Navigation ||\n\t\t!Spicetify.ReactComponent.TooltipWrapper ||\n\t\t!Spicetify.ReactComponent.ScrollableContainer ||\n\t\t!Spicetify.Platform.History ||\n\t\t!Spicetify.Platform.LocalStorageAPI\n\t)\n\t\treturn;\n\n\tconst navLinkFactory = isTouchScreenUi ? NavLinkGlobal : NavLinkSidebar;\n\n\tif (!navLinkFactoryCtx) navLinkFactoryCtx = Spicetify.React.createContext(null);\n\tconst registered = [];\n\n\tfor (const app of list) {\n\t\tlet manifest;\n\t\ttry {\n\t\t\tconst request = new XMLHttpRequest();\n\t\t\trequest.open(\"GET\", `spicetify-routes-${app}.json`, false);\n\t\t\trequest.send(null);\n\t\t\tmanifest = JSON.parse(request.responseText);\n\t\t} catch {\n\t\t\tmanifest = {};\n\t\t}\n\n\t\tlet appProper = manifest.name;\n\t\tif (typeof appProper === \"object\") {\n\t\t\tappProper = appProper[Spicetify.Locale?.getLocale()] || appProper.en;\n\t\t}\n\t\tif (!appProper) {\n\t\t\tappProper = app[0].toUpperCase() + app.slice(1);\n\t\t}\n\t\tconst icon = manifest.icon || \"\";\n\t\tconst activeIcon = manifest[\"active-icon\"] || icon;\n\t\tconst appRoutePath = `/${app}`;\n\t\tregistered.push({ appProper, appRoutePath, icon, activeIcon });\n\t}\n\n\t(function addStyling() {\n\t\tif (document.querySelector(\"style.spicetify-navlinks\")) return;\n\t\tconst style = document.createElement(\"style\");\n\t\tstyle.className = \"spicetify-navlinks\";\n\t\tstyle.innerHTML = `\n\t:root {\n\t\t--max-custom-navlink-count: 4;\n\t}\n\n\t.custom-navlinks-scrollable_container {\n\t\tmax-width: calc(48px * var(--max-custom-navlink-count) + 8px * (var(--max-custom-navlink-count) - 1));\n\t\t-webkit-app-region: no-drag;\n\t}\n\n\t.custom-navlinks-scrollable_container div[role=\"presentation\"] > *:not(:last-child) {\n\t\tmargin-inline-end: 8px;\n\t}\n\n\t.custom-navlinks-scrollable_container div[role=\"presentation\"] {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\t.custom-navlink {\n\t\t-webkit-app-region: unset;\n\t}\n\t\t`;\n\t\tdocument.head.appendChild(style);\n\t})();\n\n\tconst wrapScrollableContainer = (element) =>\n\t\tSpicetify.React.createElement(\n\t\t\t\"div\",\n\t\t\t{ className: \"custom-navlinks-scrollable_container\" },\n\t\t\tSpicetify.React.createElement(Spicetify.ReactComponent.ScrollableContainer, null, element)\n\t\t);\n\n\tconst NavLinks = () =>\n\t\tSpicetify.React.createElement(\n\t\t\tnavLinkFactoryCtx.Provider,\n\t\t\t{ value: navLinkFactory },\n\t\t\tregistered.map((NavLinkElement) => Spicetify.React.createElement(NavLink, NavLinkElement, null))\n\t\t);\n\n\treturn isTouchScreenUi ? wrapScrollableContainer(NavLinks()) : NavLinks();\n};\n\nconst NavLink = ({ appProper, appRoutePath, icon, activeIcon }) => {\n\tconst isActive = Spicetify.Platform.History.location.pathname?.startsWith(appRoutePath);\n\tconst createIcon = () => createIconComponent(isActive ? activeIcon : icon, 24);\n\n\tconst NavLinkFactory = Spicetify.React.useContext(navLinkFactoryCtx);\n\n\treturn NavLinkFactory && Spicetify.React.createElement(NavLinkFactory, { appProper, appRoutePath, createIcon, isActive }, null);\n};\n\nconst NavLinkSidebar = ({ appProper, appRoutePath, createIcon, isActive }) => {\n\tconst isSidebarCollapsed = Spicetify.Platform.LocalStorageAPI.getItem(\"ylx-sidebar-state\") === 1;\n\n\treturn Spicetify.React.createElement(\n\t\t\"li\",\n\t\t{ className: \"main-yourLibraryX-navItem InvalidDropTarget\" },\n\t\tSpicetify.React.createElement(\n\t\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t\t{ label: isSidebarCollapsed ? appProper : null, disabled: !isSidebarCollapsed, placement: \"right\" },\n\t\t\tSpicetify.React.createElement(\n\t\t\t\tSpicetify.ReactComponent.Navigation,\n\t\t\t\t{\n\t\t\t\t\tto: appRoutePath,\n\t\t\t\t\treferrer: \"other\",\n\t\t\t\t\tclassName: Spicetify.classnames(\"link-subtle\", \"main-yourLibraryX-navLink\", {\n\t\t\t\t\t\t\"main-yourLibraryX-navLinkActive\": isActive,\n\t\t\t\t\t}),\n\t\t\t\t\tonClick: () => undefined,\n\t\t\t\t\t\"aria-label\": appProper,\n\t\t\t\t},\n\t\t\t\tcreateIcon(),\n\t\t\t\t!isSidebarCollapsed && Spicetify.React.createElement(Spicetify.ReactComponent.TextComponent, { variant: \"balladBold\" }, appProper)\n\t\t\t)\n\t\t)\n\t);\n};\n\nconst NavLinkGlobal = ({ appProper, appRoutePath, createIcon, isActive }) => {\n\treturn Spicetify.React.createElement(\n\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t{ label: appProper },\n\t\tSpicetify.React.createElement(Spicetify.ReactComponent.ButtonTertiary, {\n\t\t\ticonOnly: createIcon,\n\t\t\tclassName: Spicetify.classnames(\"link-subtle\", \"main-globalNav-navLink\", \"main-globalNav-link-icon\", \"custom-navlink\", {\n\t\t\t\t\"main-globalNav-navLinkActive\": isActive,\n\t\t\t}),\n\t\t\t\"aria-label\": appProper,\n\t\t\tonClick: () => Spicetify.Platform.History.push(appRoutePath),\n\t\t})\n\t);\n};\n\nclass _HTMLGenericModal extends HTMLElement {\n\thide() {\n\t\tSpicetify.ReactDOM.unmountComponentAtNode(this.querySelector(\"main\"));\n\t\tthis.remove();\n\t}\n\n\tdisplay({ title, content, isLarge = false }) {\n\t\tthis.innerHTML = `\n
    \n\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t

    ${title}

    \n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t
    \n
    `;\n\n\t\tthis.querySelector(\"button\").onclick = this.hide.bind(this);\n\t\tconst main = this.querySelector(\"main\");\n\n\t\tconst hidePopup = this.hide.bind(this);\n\n\t\t// Listen for click events on Overlay\n\t\tthis.querySelector(\".GenericModal__overlay\").addEventListener(\"click\", (event) => {\n\t\t\tif (!this.querySelector(\".GenericModal\").contains(event.target)) hidePopup();\n\t\t});\n\n\t\tif (Spicetify.React.isValidElement(content)) {\n\t\t\tSpicetify.ReactDOM.render(content, main);\n\t\t} else if (typeof content === \"string\") {\n\t\t\tmain.innerHTML = content;\n\t\t} else {\n\t\t\tmain.append(content);\n\t\t}\n\t\tdocument.body.append(this);\n\t}\n}\ncustomElements.define(\"generic-modal\", _HTMLGenericModal);\nSpicetify.PopupModal = new _HTMLGenericModal();\n\nObject.defineProperty(Spicetify, \"TippyProps\", {\n\tvalue: {\n\t\tdelay: [200, 0],\n\t\tanimation: true,\n\t\trender(instance) {\n\t\t\tconst popper = document.createElement(\"div\");\n\t\t\tconst box = document.createElement(\"div\");\n\n\t\t\tpopper.id = \"context-menu\";\n\t\t\tpopper.appendChild(box);\n\n\t\t\tbox.className = \"main-contextMenu-tippy\";\n\t\t\tbox[instance.props.allowHTML ? \"innerHTML\" : \"textContent\"] = instance.props.content;\n\n\t\t\tfunction onUpdate(prevProps, nextProps) {\n\t\t\t\tif (prevProps.content !== nextProps.content) {\n\t\t\t\t\tif (nextProps.allowHTML) box.innerHTML = nextProps.content;\n\t\t\t\t\telse box.textContent = nextProps.content;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn { popper, onUpdate };\n\t\t},\n\t\tonShow(instance) {\n\t\t\tinstance.popper.firstChild.classList.add(\"main-contextMenu-tippyEnter\");\n\t\t},\n\t\tonMount(instance) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tinstance.popper.firstChild.classList.remove(\"main-contextMenu-tippyEnter\");\n\t\t\t\tinstance.popper.firstChild.classList.add(\"main-contextMenu-tippyEnterActive\");\n\t\t\t});\n\t\t},\n\t\tonHide(instance) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tinstance.popper.firstChild.classList.remove(\"main-contextMenu-tippyEnterActive\");\n\t\t\t\tinstance.unmount();\n\t\t\t});\n\t\t},\n\t},\n\twritable: false,\n});\n\nSpicetify.Topbar = (() => {\n\tlet leftGeneratedClassName;\n\tlet rightGeneratedClassName;\n\tlet leftContainer;\n\tlet rightContainer;\n\tconst leftButtonsStash = new Set();\n\tconst rightButtonsStash = new Set();\n\n\tclass Button {\n\t\tconstructor(label, icon, onClick, disabled = false, isRight = false) {\n\t\t\tthis.element = document.createElement(\"div\");\n\t\t\tthis.button = document.createElement(\"button\");\n\t\t\tthis.icon = icon;\n\t\t\tthis.onClick = onClick;\n\t\t\tthis.disabled = disabled;\n\t\t\tthis.tippy = Spicetify.Tippy?.(this.element, {\n\t\t\t\tcontent: label,\n\t\t\t\t...Spicetify.TippyProps,\n\t\t\t});\n\t\t\tthis.label = label;\n\n\t\t\tthis.element.appendChild(this.button);\n\t\t\tif (isRight) {\n\t\t\t\tthis.button.className = rightGeneratedClassName;\n\t\t\t\trightButtonsStash.add(this.element);\n\t\t\t\trightContainer?.prepend(this.element);\n\t\t\t} else {\n\t\t\t\tthis.button.className = leftGeneratedClassName;\n\t\t\t\tleftButtonsStash.add(this.element);\n\t\t\t\tleftContainer?.append(this.element);\n\t\t\t}\n\t\t}\n\t\tget label() {\n\t\t\treturn this._label;\n\t\t}\n\t\tset label(text) {\n\t\t\tthis._label = text;\n\t\t\tthis.button.setAttribute(\"aria-label\", text);\n\t\t\tif (!this.tippy) this.button.setAttribute(\"title\", text);\n\t\t\telse this.tippy.setContent(text);\n\t\t}\n\t\tget icon() {\n\t\t\treturn this._icon;\n\t\t}\n\t\tset icon(input) {\n\t\t\tlet newInput = input;\n\t\t\tif (newInput && Spicetify.SVGIcons[newInput]) {\n\t\t\t\tnewInput = `${Spicetify.SVGIcons[newInput]}`;\n\t\t\t}\n\t\t\tthis._icon = newInput;\n\t\t\tthis.button.innerHTML = newInput;\n\t\t}\n\t\tget onClick() {\n\t\t\treturn this._onClick;\n\t\t}\n\t\tset onClick(func) {\n\t\t\tthis._onClick = func;\n\t\t\tthis.button.onclick = () => this._onClick(this);\n\t\t}\n\t\tget disabled() {\n\t\t\treturn this._disabled;\n\t\t}\n\t\tset disabled(bool) {\n\t\t\tthis._disabled = bool;\n\t\t\tthis.button.disabled = bool;\n\t\t\tthis.button.classList.toggle(\"disabled\", bool);\n\t\t}\n\t}\n\n\tfunction waitForTopbarMounted() {\n\t\tconst globalHistoryButtons = document.querySelector(\".main-globalNav-historyButtons\");\n\t\tleftGeneratedClassName = document.querySelector(\n\t\t\t\".main-topBar-historyButtons .main-topBar-button, .main-globalNav-historyButtons .main-globalNav-icon, .main-globalNav-historyButtons [data-encore-id='buttonTertiary']\"\n\t\t)?.className;\n\t\trightGeneratedClassName = document.querySelector(\n\t\t\t\".main-topBar-container .main-topBar-buddyFeed, .main-actionButtons .main-topBar-buddyFeed, .main-actionButtons .main-globalNav-buddyFeed\"\n\t\t)?.className;\n\t\tleftContainer = document.querySelector(\".main-topBar-historyButtons\") ?? globalHistoryButtons;\n\t\trightContainer = document.querySelector(\".main-actionButtons\");\n\t\tif (!leftContainer || !rightContainer || !leftGeneratedClassName || !rightGeneratedClassName) {\n\t\t\tsetTimeout(waitForTopbarMounted, 100);\n\t\t\treturn;\n\t\t}\n\n\t\tif (globalHistoryButtons) globalHistoryButtons.style = \"gap: 4px; padding-inline: 4px 4px\";\n\t\tfor (const button of leftButtonsStash) {\n\t\t\tif (button.parentNode) button.parentNode.removeChild(button);\n\n\t\t\tconst buttonElement = button.querySelector(\"button\");\n\t\t\tbuttonElement.className = leftGeneratedClassName;\n\t\t}\n\t\tleftContainer.append(...leftButtonsStash);\n\t\tfor (const button of rightButtonsStash) {\n\t\t\tif (button.parentNode) button.parentNode.removeChild(button);\n\n\t\t\tconst buttonElement = button.querySelector(\"button\");\n\t\t\tbuttonElement.className = rightGeneratedClassName;\n\t\t}\n\t\trightContainer.prepend(...rightButtonsStash);\n\t}\n\n\twaitForTopbarMounted();\n\t(function waitForPlatform() {\n\t\tif (!Spicetify.Platform?.History) {\n\t\t\tsetTimeout(waitForPlatform, 100);\n\t\t\treturn;\n\t\t}\n\n\t\tSpicetify.Platform.History.listen(() => waitForTopbarMounted());\n\t})();\n\n\treturn { Button };\n})();\n\nSpicetify.Playbar = (() => {\n\tlet rightContainer;\n\tlet sibling;\n\tconst buttonsStash = new Set();\n\n\tclass Button {\n\t\tconstructor(label, icon, onClick = () => {}, disabled = false, active = false, registerOnCreate = true) {\n\t\t\tthis.element = document.createElement(\"button\");\n\t\t\tthis.element.classList.add(\"main-genericButton-button\");\n\t\t\tthis.iconElement = document.createElement(\"span\");\n\t\t\tthis.iconElement.classList.add(\"Wrapper-sm-only\", \"Wrapper-small-only\");\n\t\t\tthis.element.appendChild(this.iconElement);\n\t\t\tthis.icon = icon;\n\t\t\tthis.onClick = onClick;\n\t\t\tthis.disabled = disabled;\n\t\t\tthis.active = active;\n\t\t\taddClassname(this.element);\n\t\t\tthis.tippy = Spicetify.Tippy?.(this.element, {\n\t\t\t\tcontent: label,\n\t\t\t\t...Spicetify.TippyProps,\n\t\t\t});\n\t\t\tthis.label = label;\n\t\t\tregisterOnCreate && this.register();\n\t\t}\n\t\tget label() {\n\t\t\treturn this._label;\n\t\t}\n\t\tset label(text) {\n\t\t\tthis._label = text;\n\t\t\tif (!this.tippy) this.element.setAttribute(\"title\", text);\n\t\t\telse this.tippy.setContent(text);\n\t\t}\n\t\tget icon() {\n\t\t\treturn this._icon;\n\t\t}\n\t\tset icon(input) {\n\t\t\tlet newInput = input;\n\t\t\tif (newInput && Spicetify.SVGIcons[newInput]) {\n\t\t\t\tnewInput = `${Spicetify.SVGIcons[newInput]}`;\n\t\t\t}\n\t\t\tthis._icon = newInput;\n\t\t\tthis.iconElement.innerHTML = newInput;\n\t\t}\n\t\tget onClick() {\n\t\t\treturn this._onClick;\n\t\t}\n\t\tset onClick(func) {\n\t\t\tthis._onClick = func;\n\t\t\tthis.element.onclick = () => this._onClick(this);\n\t\t}\n\t\tget disabled() {\n\t\t\treturn this._disabled;\n\t\t}\n\t\tset disabled(bool) {\n\t\t\tthis._disabled = bool;\n\t\t\tthis.element.disabled = bool;\n\t\t\tthis.element.classList.toggle(\"disabled\", bool);\n\t\t}\n\t\tset active(bool) {\n\t\t\tthis._active = bool;\n\t\t\tthis.element.classList.toggle(\"main-genericButton-buttonActive\", bool);\n\t\t\tthis.element.classList.toggle(\"main-genericButton-buttonActiveDot\", bool);\n\t\t}\n\t\tget active() {\n\t\t\treturn this._active;\n\t\t}\n\t\tregister() {\n\t\t\tbuttonsStash.add(this.element);\n\t\t\trightContainer?.prepend(this.element);\n\t\t}\n\t\tderegister() {\n\t\t\tbuttonsStash.delete(this.element);\n\t\t\tthis.element.remove();\n\t\t}\n\t}\n\n\t(function waitForPlaybarMounted() {\n\t\trightContainer = document.querySelector(\".main-nowPlayingBar-right > div\");\n\t\tif (!rightContainer) {\n\t\t\tsetTimeout(waitForPlaybarMounted, 300);\n\t\t\treturn;\n\t\t}\n\t\tfor (const button of buttonsStash) {\n\t\t\taddClassname(button);\n\t\t}\n\t\trightContainer.prepend(...buttonsStash);\n\t})();\n\n\tfunction addClassname(element) {\n\t\tsibling = document.querySelector(\".main-nowPlayingBar-right .main-genericButton-button\");\n\t\tif (!sibling) {\n\t\t\tsetTimeout(addClassname, 300, element);\n\t\t\treturn;\n\t\t}\n\t\tfor (const className of Array.from(sibling.classList)) {\n\t\t\tif (!className.startsWith(\"main-genericButton\")) element.classList.add(className);\n\t\t}\n\t}\n\n\tconst widgetStash = new Set();\n\tlet nowPlayingWidget;\n\n\tclass Widget {\n\t\tconstructor(label, icon, onClick = () => {}, disabled = false, active = false, registerOnCreate = true) {\n\t\t\tthis.element = document.createElement(\"button\");\n\t\t\tthis.element.className = \"main-addButton-button control-button control-button-heart\";\n\t\t\tthis.icon = icon;\n\t\t\tthis.onClick = onClick;\n\t\t\tthis.disabled = disabled;\n\t\t\tthis.active = active;\n\t\t\tthis.tippy = Spicetify.Tippy?.(this.element, {\n\t\t\t\tcontent: label,\n\t\t\t\t...Spicetify.TippyProps,\n\t\t\t});\n\t\t\tthis.label = label;\n\t\t\tregisterOnCreate && this.register();\n\t\t}\n\t\tget label() {\n\t\t\treturn this._label;\n\t\t}\n\t\tset label(text) {\n\t\t\tthis._label = text;\n\t\t\tif (!this.tippy) this.element.setAttribute(\"title\", text);\n\t\t\telse this.tippy.setContent(text);\n\t\t}\n\t\tget icon() {\n\t\t\treturn this._icon;\n\t\t}\n\t\tset icon(input) {\n\t\t\tlet newInput = input;\n\t\t\tif (newInput && Spicetify.SVGIcons[newInput]) {\n\t\t\t\tnewInput = `${Spicetify.SVGIcons[newInput]}`;\n\t\t\t}\n\t\t\tthis._icon = newInput;\n\t\t\tthis.element.innerHTML = newInput;\n\t\t}\n\t\tget onClick() {\n\t\t\treturn this._onClick;\n\t\t}\n\t\tset onClick(func) {\n\t\t\tthis._onClick = func;\n\t\t\tthis.element.onclick = () => this._onClick(this);\n\t\t}\n\t\tget disabled() {\n\t\t\treturn this._disabled;\n\t\t}\n\t\tset disabled(bool) {\n\t\t\tthis._disabled = bool;\n\t\t\tthis.element.disabled = bool;\n\t\t\tthis.element.classList.toggle(\"main-addButton-disabled\", bool);\n\t\t\tthis.element.ariaDisabled = bool;\n\t\t}\n\t\tset active(bool) {\n\t\t\tthis._active = bool;\n\t\t\tthis.element.classList.toggle(\"main-addButton-active\", bool);\n\t\t\tthis.element.ariaChecked = bool;\n\t\t}\n\t\tget active() {\n\t\t\treturn this._active;\n\t\t}\n\t\tregister() {\n\t\t\twidgetStash.add(this.element);\n\t\t\tnowPlayingWidget?.append(this.element);\n\t\t}\n\t\tderegister() {\n\t\t\twidgetStash.delete(this.element);\n\t\t\tthis.element.remove();\n\t\t}\n\t}\n\n\tfunction waitForWidgetMounted() {\n\t\tnowPlayingWidget = document.querySelector(\".main-nowPlayingWidget-nowPlaying\");\n\t\tif (!nowPlayingWidget) {\n\t\t\tsetTimeout(waitForWidgetMounted, 300);\n\t\t\treturn;\n\t\t}\n\t\tnowPlayingWidget.append(...widgetStash);\n\t}\n\n\t(function attachObserver() {\n\t\tconst leftPlayer = document.querySelector(\".main-nowPlayingBar-left\");\n\t\tif (!leftPlayer) {\n\t\t\tsetTimeout(attachObserver, 300);\n\t\t\treturn;\n\t\t}\n\t\twaitForWidgetMounted();\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tfor (const mutation of mutations) {\n\t\t\t\tif (mutation.removedNodes.length > 0) {\n\t\t\t\t\tnowPlayingWidget = null;\n\t\t\t\t\twaitForWidgetMounted();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tobserver.observe(leftPlayer, { childList: true });\n\t})();\n\n\treturn { Button, Widget };\n})();\n\n(async function checkForUpdate() {\n\tif (!Spicetify.Config) {\n\t\tsetTimeout(checkForUpdate, 300);\n\t\treturn;\n\t}\n\tconst { check_spicetify_update, version } = Spicetify.Config;\n\t// Skip checking if upgrade check is disabled, or version is Dev/version is not set\n\tif (!check_spicetify_update || !version || version === \"Dev\") return;\n\t// Fetch latest version from GitHub\n\ttry {\n\t\tlet changelog;\n\t\tconst res = await fetch(\"https://api.github.com/repos/spicetify/cli/releases/latest\");\n\t\tconst { tag_name, html_url, body } = await res.json();\n\t\tconst semver = tag_name.slice(1);\n\t\tconst changelogRawDataOld = body.match(/## What's Changed([\\s\\S]*?)\\r\\n\\r/)?.[1];\n\t\tif (changelogRawDataOld) {\n\t\t\tchangelog = [...changelogRawDataOld.matchAll(/\\r\\n\\*\\s(.+?)\\sin\\shttps/g)]\n\t\t\t\t.map((match) => {\n\t\t\t\t\tconst featureData = match[1].split(\"@\");\n\t\t\t\t\tconst feature = featureData[0];\n\t\t\t\t\tconst committerID = featureData[1];\n\t\t\t\t\treturn `
  • ${feature}${committerID}
    • `;\n\t\t\t\t})\n\t\t\t\t.join(\"\\n\");\n\t\t} else {\n\t\t\tconst sections = body.split(\"\\n## \");\n\t\t\tconst filteredSections = sections.filter((section) => !section.startsWith(\"Compatibility\"));\n\t\t\tconst filteredText = filteredSections.join(\"\\n## \");\n\t\t\tchangelog = [...filteredText.matchAll(/- (?:\\*\\*(.+?)\\*\\*:? )?(.+?) \\(\\[(.+?)\\]\\((.+?)\\)\\)/g)]\n\t\t\t\t.map((match) => {\n\t\t\t\t\tconst feature = match[1];\n\t\t\t\t\tconst description = match[2];\n\t\t\t\t\tconst prNumber = match[3];\n\t\t\t\t\tconst prLink = match[4];\n\t\t\t\t\tlet text = \"
  • \";\n\t\t\t\t\tif (feature) text += `${feature}${!feature.endsWith(\":\") ? \": \" : \" \"}`;\n\t\t\t\t\ttext += `${description} (${prNumber})
    • `;\n\t\t\t\t\treturn text;\n\t\t\t\t})\n\t\t\t\t.join(\"\\n\");\n\t\t}\n\n\t\tif (semver !== version) {\n\t\t\tconst content = document.createElement(\"div\");\n\t\t\tcontent.id = \"spicetify-update\";\n\t\t\tcontent.innerHTML = `\n\t\t\t\t\n\t\t\t\t

    Update Spicetify to receive new features and bug fixes.

    \n\t\t\t\t

    Current version: ${version}

    \n\t\t\t\t

    Latest version:\n\t\t\t\t\t\n\t\t\t\t\t\t${semver}\n\t\t\t\t\t\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t

    What's Changed

    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\tSee changelog\n\t\t\t\t\t\n\t\t\t\t\t
      \n\t\t\t\t\t\t${changelog}\n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t

    Guide

    \n\t\t\t\t

    Run these commands in the terminal:

    \n\t\t\t\t
      \n\t\t\t\t\t
    1. Update Spicetify CLI
      2. \n\t\t\t\t\t
      spicetify update
      \n\t\t\t\t\t

      Spicetify will automatically apply changes to Spotify after upgrading to the latest version.

      \n\t\t\t\t\t

      If you installed Spicetify via a package manager, update using said package manager.

      \n\t\t\t\t
    \n\t\t\t`;\n\n\t\t\t(function waitForTippy() {\n\t\t\t\tif (!Spicetify.Tippy) {\n\t\t\t\t\tsetTimeout(waitForTippy, 300);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst tippy = Spicetify.Tippy(content.querySelectorAll(\"pre\"), {\n\t\t\t\t\tcontent: \"Click to copy\",\n\t\t\t\t\thideOnClick: false,\n\t\t\t\t\t...Spicetify.TippyProps,\n\t\t\t\t});\n\n\t\t\t\tfor (const instance of tippy) {\n\t\t\t\t\tinstance.reference.addEventListener(\"click\", () => {\n\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(instance.reference.textContent);\n\t\t\t\t\t\tinstance.setContent(\"Copied!\");\n\t\t\t\t\t\tsetTimeout(() => instance.setContent(\"Click to copy\"), 1000);\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t})();\n\n\t\t\tconst updateModal = {\n\t\t\t\ttitle: \"Update Spicetify\",\n\t\t\t\tcontent,\n\t\t\t\tisLarge: true,\n\t\t\t};\n\n\t\t\tnew Spicetify.Topbar.Button(\n\t\t\t\t\"Update Spicetify\",\n\t\t\t\t``,\n\t\t\t\t() => Spicetify.PopupModal.display(updateModal)\n\t\t\t);\n\t\t}\n\t} catch (err) {\n\t\tconsole.error(err);\n\t}\n})();\n" }, { "path": "manifest.json", "content": "[\n\t{\n\t\t\"name\": \"Auto Skip Videos\",\n\t\t\"description\": \"Videos are unable to play in some regions because of Spotify's policy. Instead of jumping to next song in playlist, it just stops playing. And it's kinda annoying to open up the client to manually click next every times it happens. Use this extension to skip them automatically.\",\n\t\t\"preview\": null,\n\t\t\"main\": \"Extensions/autoSkipVideo.js\"\n\t},\n\t{\n\t\t\"name\": \"Bookmark\",\n\t\t\"description\": \"Easily store and browse pages, play tracks or tracks in specific time. Useful for who wants to check out an artist, album later without following them or writing their name down.\",\n\t\t\"preview\": \"https://i.imgur.com/isgU4TS.png\",\n\t\t\"main\": \"Extensions/bookmark.js\"\n\t},\n\t{\n\t\t\"name\": \"Christian Spotify\",\n\t\t\"description\": \"Auto skip explicit tracks. Toggle option is in Profile menu (top right button).\",\n\t\t\"preview\": \"https://i.imgur.com/5reGrBb.png\",\n\t\t\"main\": \"Extensions/autoSkipExplicit.js\"\n\t},\n\t{\n\t\t\"name\": \"Keyboard Shortcut\",\n\t\t\"description\": \"Register some useful keybinds to support keyboard-driven navigation in Spotify client. Less time touching the mouse.\",\n\t\t\"preview\": \"https://i.imgur.com/evkGv9q.png\",\n\t\t\"main\": \"Extensions/keyboardShortcut.js\"\n\t},\n\t{\n\t\t\"name\": \"Loopy Loop\",\n\t\t\"description\": \"Provide ability to mark start and end points on progress bar and automatically loop over that track portion.\",\n\t\t\"preview\": \"https://i.imgur.com/YEkbjLC.png\",\n\t\t\"main\": \"Extensions/loopyLoop.js\"\n\t},\n\t{\n\t\t\"name\": \"Shuffle+\",\n\t\t\"description\": \"Shuffles using Fisherā€“Yates algorithm with zero bias. After installing extensions, right click album/playlist/artist item, there will be an option \\\"Play with Shuffle+\\\". You can also multiple select tracks and choose to \\\"Play with Shuffle+\\\". Moreover, enable option \\\"Auto Shuffle+\\\" in Profile menu to inject Shuffle+ into every play buttons, no need to right click anymore.\",\n\t\t\"preview\": \"https://i.imgur.com/gxbnqSN.png\",\n\t\t\"main\": \"Extensions/shuffle+.js\"\n\t},\n\t{\n\t\t\"name\": \"Trash Bin\",\n\t\t\"description\": \"Throw songs/artists to trash bin and never hear them again (automatically skip). This extension will append a Throw to Trashbin option in tracks and artists link right click menu.\",\n\t\t\"preview\": \"https://i.imgur.com/ZFTy5Rm.png\",\n\t\t\"main\": \"Extensions/trashbin.js\"\n\t}\n]\n" }, { "path": "spicetify.go", "content": "package main\n\nimport (\n\t\"errors\"\n\t\"io\"\n\t\"log\"\n\t\"os\"\n\t\"os/exec\"\n\t\"path/filepath\"\n\t\"runtime\"\n\t\"slices\"\n\t\"strings\"\n\t\"sync\"\n\n\tcolorable \"github.com/mattn/go-colorable\"\n\t\"github.com/pterm/pterm\"\n\t\"github.com/spicetify/cli/src/cmd\"\n\tspotifystatus \"github.com/spicetify/cli/src/status/spotify\"\n\t\"github.com/spicetify/cli/src/utils\"\n\t\"github.com/spicetify/cli/src/utils/isAdmin\"\n)\n\nvar (\n\tversion string\n)\n\nvar (\n\tflags = []string{}\n\tcommands = []string{}\n\tquiet = false\n\textensionFocus = false\n\tappFocus = false\n\tstyleFocus = false\n\tnoRestart = false\n\tliveRefresh = false\n\tbypassAdminCheck = false\n)\n\nfunc init() {\n\tif runtime.GOOS != \"windows\" &&\n\t\truntime.GOOS != \"darwin\" &&\n\t\truntime.GOOS != \"linux\" {\n\t\tutils.PrintError(\"Unsupported OS.\")\n\t\tos.Exit(1)\n\t}\n\tif version == \"\" {\n\t\tversion = \"Dev\"\n\t}\n\n\tlog.SetFlags(0)\n\t// Supports print color output for Windows\n\tlog.SetOutput(colorable.NewColorableStdout())\n\n\t// Separates flags and commands\n\tfor _, v := range os.Args[1:] {\n\t\tif len(v) > 0 && v[0] == '-' {\n\t\t\tif len(v) > 2 && v[1] != '-' {\n\t\t\t\tfor _, char := range v[1:] {\n\t\t\t\t\tflags = append(flags, \"-\"+string(char))\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tflags = append(flags, v)\n\t\t\t}\n\t\t} else {\n\t\t\tcommands = append(commands, v)\n\t\t}\n\t}\n\n\tfor _, v := range flags {\n\t\tswitch v {\n\t\tcase \"--bypass-admin\":\n\t\t\tbypassAdminCheck = true\n\t\tcase \"-c\", \"--config\":\n\t\t\tlog.Println(cmd.GetConfigPath())\n\t\t\tos.Exit(0)\n\t\tcase \"-h\", \"--help\":\n\t\t\tkind := \"\"\n\t\t\tif len(commands) > 0 {\n\t\t\t\tkind = commands[0]\n\t\t\t}\n\t\t\tif kind == \"config\" {\n\t\t\t\thelpConfig()\n\t\t\t} else {\n\t\t\t\thelp()\n\t\t\t}\n\n\t\t\tos.Exit(0)\n\t\tcase \"-v\", \"--version\":\n\t\t\tlog.Println(version)\n\t\t\tos.Exit(0)\n\t\tcase \"-e\", \"--extension\":\n\t\t\textensionFocus = true\n\t\t\tliveRefresh = true\n\t\tcase \"-a\", \"--app\":\n\t\t\tappFocus = true\n\t\t\tliveRefresh = true\n\t\tcase \"-q\", \"--quiet\":\n\t\t\tquiet = true\n\t\tcase \"-n\", \"--no-restart\":\n\t\t\tnoRestart = true\n\t\tcase \"-s\", \"--style\":\n\t\t\tstyleFocus = true\n\t\t\tliveRefresh = true\n\t\tcase \"-l\", \"--live-refresh\":\n\t\t\textensionFocus = true\n\t\t\tappFocus = true\n\t\t\tstyleFocus = true\n\t\t\tliveRefresh = true\n\t\t}\n\t}\n\n\tif quiet {\n\t\tlog.SetOutput(io.Discard)\n\t\tos.Stdout = nil\n\t\tpterm.DisableOutput()\n\t}\n\n\tif isAdmin.Check(bypassAdminCheck) {\n\t\tutils.PrintError(\"Spicetify should NOT be run with administrator or root privileges\")\n\t\tutils.PrintError(\"Doing so can cause Spotify to show a black/blank window after applying!\")\n\t\tutils.PrintError(\"This happens because Spotify (running as a normal user) can't access files modified with admin privileges\")\n\t\tutils.PrintInfo(\"If you understand the risks and need to continue, you can use the '--bypass-admin' flag.\")\n\t\tos.Exit(1)\n\t}\n\n\tfor i, flag := range flags {\n\t\tif flag == \"--bypass-admin\" {\n\t\t\tflags = append(flags[:i], flags[i+1:]...)\n\t\t\tbreak\n\t\t}\n\t}\n\n\tutils.MigrateConfigFolder()\n\tutils.MigrateFolders()\n\tcmd.InitConfig(quiet)\n\n\tif len(commands) < 1 {\n\t\thelp()\n\t\tcmd.CheckUpdate(version)\n\t\tos.Exit(0)\n\t}\n}\n\nfunc main() {\n\tif slices.Contains(commands, \"config-dir\") {\n\t\tcmd.ShowConfigDirectory()\n\t\treturn\n\t}\n\n\t// Unchainable commands\n\tswitch commands[0] {\n\tcase \"config\":\n\t\tcommands = commands[1:]\n\t\tif len(commands) == 0 {\n\t\t\tcmd.DisplayAllConfig()\n\t\t} else if len(commands) == 1 {\n\t\t\tcmd.DisplayConfig(commands[0])\n\t\t} else {\n\t\t\tcmd.EditConfig(commands)\n\t\t}\n\t\treturn\n\n\tcase \"color\":\n\t\tcommands = commands[1:]\n\t\tif len(commands) == 0 {\n\t\t\tcmd.DisplayColors()\n\t\t} else {\n\t\t\tcmd.EditColor(commands)\n\t\t}\n\t\treturn\n\n\tcase \"spotify-updates\":\n\t\tcmd.InitPaths()\n\t\tcommands = commands[1:]\n\t\tif len(commands) == 0 {\n\t\t\tutils.PrintError(\"No parameter given. It has to be \\\"block\\\" or \\\"unblock\\\".\")\n\t\t\treturn\n\t\t}\n\t\tparam := commands[0]\n\t\tswitch param {\n\t\tcase \"block\":\n\t\t\tcmd.BlockSpotifyUpdates(true)\n\t\tcase \"unblock\":\n\t\t\tcmd.BlockSpotifyUpdates(false)\n\t\tdefault:\n\t\t\tutils.PrintError(\"Invalid parameter. It has to be \\\"block\\\" or \\\"unblock\\\".\")\n\t\t}\n\t\treturn\n\n\tcase \"path\":\n\t\tcmd.InitPaths()\n\t\tcommands = commands[1:]\n\t\tpath, err := (func() (string, error) {\n\t\t\tif styleFocus {\n\t\t\t\tif len(commands) == 0 {\n\t\t\t\t\treturn cmd.ThemeAllAssetsPath()\n\t\t\t\t}\n\t\t\t\treturn cmd.ThemeAssetPath(commands[0])\n\t\t\t} else if extensionFocus {\n\t\t\t\tif len(commands) == 0 {\n\t\t\t\t\treturn cmd.ExtensionAllPath()\n\t\t\t\t}\n\t\t\t\treturn cmd.ExtensionPath(commands[0])\n\t\t\t} else if appFocus {\n\t\t\t\tif len(commands) == 0 {\n\t\t\t\t\treturn cmd.AppAllPath()\n\t\t\t\t}\n\t\t\t\treturn cmd.AppPath(commands[0])\n\t\t\t} else {\n\t\t\t\tfor _, v := range flags {\n\t\t\t\t\tif v != \"-e\" && v != \"-c\" && v != \"-a\" && v != \"-s\" {\n\t\t\t\t\t\treturn \"\", errors.New(\"invalid option\\navailable options: -e, -c, -a, -s\")\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif len(commands) == 0 && len(flags) == 0 {\n\t\t\t\t\treturn utils.GetExecutableDir(), nil\n\t\t\t\t} else if commands[0] == \"all\" {\n\t\t\t\t\treturn cmd.AllPaths()\n\t\t\t\t} else if commands[0] == \"userdata\" {\n\t\t\t\t\treturn utils.GetSpicetifyFolder(), nil\n\t\t\t\t}\n\t\t\t\treturn \"\", errors.New(\"invalid option\\navailable options: all, userdata\")\n\t\t\t}\n\t\t})()\n\n\t\tif err != nil {\n\t\t\tutils.Fatal(err)\n\t\t}\n\n\t\tlog.Println(path)\n\t\treturn\n\n\tcase \"watch\":\n\t\tcmd.InitPaths()\n\n\t\tvar name []string\n\t\tif len(commands) > 1 {\n\t\t\tname = commands[1:]\n\t\t}\n\n\t\tvar watchGroup sync.WaitGroup\n\n\t\tif extensionFocus {\n\t\t\twatchGroup.Add(1)\n\t\t\tgo func(name []string, liveUpdate bool) {\n\t\t\t\tdefer watchGroup.Done()\n\t\t\t\tcmd.WatchExtensions(name, liveUpdate)\n\t\t\t}(name, liveRefresh)\n\t\t}\n\n\t\tif appFocus {\n\t\t\twatchGroup.Add(1)\n\t\t\tgo func(name []string, liveUpdate bool) {\n\t\t\t\tdefer watchGroup.Done()\n\t\t\t\tcmd.WatchCustomApp(name, liveUpdate)\n\t\t\t}(name, liveRefresh)\n\t\t}\n\n\t\tif styleFocus {\n\t\t\twatchGroup.Add(1)\n\t\t\tgo func(liveUpdate bool) {\n\t\t\t\tdefer watchGroup.Done()\n\t\t\t\tcmd.Watch(liveUpdate)\n\t\t\t}(liveRefresh)\n\t\t}\n\n\t\twatchGroup.Wait()\n\t\treturn\n\t}\n\n\tcmd.InitPaths()\n\n\tutils.PrintBold(\"spicetify v\" + version)\n\tif slices.Contains(commands, \"upgrade\") || slices.Contains(commands, \"update\") {\n\t\tupdateStatus := cmd.Update(version)\n\t\tspotifyPath := filepath.Join(cmd.GetSpotifyPath(), \"Apps\")\n\t\tex, err := os.Executable()\n\t\tif err != nil {\n\t\t\tex = \"spicetify\"\n\t\t}\n\n\t\tif updateStatus {\n\t\t\tspotStat := spotifystatus.Get(spotifyPath)\n\t\t\tcmds := []string{\"backup\", \"apply\"}\n\t\t\tif !spotStat.IsBackupable() {\n\t\t\t\tcmds = append([]string{\"restore\"}, cmds...)\n\t\t\t}\n\n\t\t\tcmd := exec.Command(ex, cmds...)\n\t\t\tutils.CmdScanner(cmd)\n\n\t\t\tcmd = exec.Command(ex, strings.Join(commands[:], \" \"))\n\t\t\tutils.CmdScanner(cmd)\n\t\t}\n\n\t\tspotStat := spotifystatus.Get(spotifyPath)\n\t\tif spotStat.IsBackupable() {\n\t\t\tutils.PrintNote(\"spicetify is up-to-date! If you ran this because spicetify disappeared after Spotify updated, we'll attempt to fix it for you right now.\")\n\t\t\tcmd.Backup(version, true)\n\t\t\tcmd.CheckStates()\n\t\t\tcmd.InitSetting()\n\t\t\tcmd.Apply(version)\n\t\t\tif !noRestart {\n\t\t\t\tcmd.SpotifyRestart()\n\t\t\t}\n\t\t}\n\n\t\treturn\n\t} else {\n\t\tcmd.CheckUpdate(version)\n\t}\n\n\tvar shouldRestart bool = false\n\t// Chainable commands\n\tfor _, v := range commands {\n\t\tswitch v {\n\t\tcase \"backup\":\n\t\t\tcmd.Backup(version, slices.Contains(commands, \"apply\"))\n\n\t\tcase \"clear\":\n\t\t\tcmd.Clear()\n\n\t\tcase \"apply\":\n\t\t\tcmd.CheckStates()\n\t\t\tcmd.InitSetting()\n\t\t\tcmd.Apply(version)\n\t\t\tshouldRestart = true\n\n\t\tcase \"refresh\":\n\t\t\tcmd.CheckStates()\n\t\t\tcmd.InitSetting()\n\t\t\tif extensionFocus {\n\t\t\t\tcmd.RefreshExtensions()\n\t\t\t} else if appFocus {\n\t\t\t\tcmd.RefreshApps()\n\t\t\t} else {\n\t\t\t\tcmd.RefreshTheme()\n\t\t\t}\n\n\t\tcase \"restore\":\n\t\t\tcmd.Restore()\n\t\t\tshouldRestart = true\n\n\t\tcase \"enable-devtools\":\n\t\t\tcmd.EnableDevTools()\n\t\t\tshouldRestart = true\n\n\t\tcase \"restart\":\n\t\t\tcmd.SpotifyRestart()\n\n\t\tcase \"auto\":\n\t\t\tcmd.Auto(version)\n\t\t\tshouldRestart = true\n\n\t\tdefault:\n\t\t\tutils.Fatal(errors.New(`Command \"` + v + `\" not found.\nRun \"spicetify -h\" for a list of valid commands.`))\n\t\t}\n\t}\n\n\tif !noRestart && !slices.Contains(commands, \"restart\") && shouldRestart {\n\t\tcmd.SpotifyRestart()\n\t}\n}\n\nfunc help() {\n\tutils.PrintBold(\"spicetify v\" + version)\n\tlog.Println(utils.Bold(\"USAGE\") + \"\\n\" +\n\t\t\"spicetify [-q] [-e] [-a] \\x1B[4mcommand\\033[0m...\\n\" +\n\t\t\"spicetify {-c | --config} | {-v | --version} | {-h | --help}\\n\\n\" +\n\t\tutils.Bold(\"DESCRIPTION\") + \"\\n\" +\n\t\t\"Customize Spotify client UI and functionality\\n\\n\" +\n\t\tutils.Bold(\"CHAINABLE COMMANDS\") + `\nbackup Start backup and preprocessing of app files.\n\napply Apply customization.\n\nrefresh Refresh the theme's CSS, JS, colors, and assets.\n Use with flag \"-e\" to update extensions or with flag \"-a\" to update custom apps.\n\nrestore Restore Spotify to original state.\n\nclear Clear current backup files.\n\nenable-devtools Enable Spotify's developer tools.\n Press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (macOS) in the Spotify client to open.\n\nwatch Enter watch mode.\n To update on change, use with any combination of the following flags:\n \"-e\" (for extensions),\n \"-a\" (for custom apps),\n \"-s\" (for the active theme; color.ini, user.css, theme.js, and assets)\n \"-l\" (for all of the above)\n\n\nrestart Restart Spotify client.\n\n` + utils.Bold(\"NON-CHAINABLE COMMANDS\") + `\nspotify-updates Block Spotify updates by patching spotify executable.\n Accepts \"block\" or \"unblock\" as the parameter.\n\npath Print path of Spotify's executable, userdata, and more.\n 1. Print executable path:\n spicetify path\n\n 2. Print userdata path:\n spicetify path userdata\n\n 3. Print all paths:\n spicetify path all\n\n 4. Toggle focus with flags:\n spicetify path