Spicetify Plugins

fancyLyrics.js

// NAME: fancyLyrics
// AUTHOR: fallsimpy
// DESCRIPTION: Fancy background for lyrics
/// <reference path="../globals.d.ts" />
(() => {
	const sel = { lyricRoot: `div[style*="--lyrics-color"]` } 
	const rootEl = () => document.querySelector(sel.lyricRoot)
	const update = () => !!rootEl && rootEl()?.style.setProperty("--lyrics-image", `url(${Spicetify.Player.data.track.metadata.image_large_url})`)

	const style = `
		${sel.lyricRoot} > :first-child {
			background: center / cover var(--lyrics-image);
			z-index: -1;
			overflow: hidden;
			filter: blur(20px);
		}
		${sel.lyricRoot} > :first-child::before {
			display: block;
			width: 100%;
			height: 100%;
			content: "";
			background: var(--lyrics-color-background);
			opacity: .6
		}
	`

	document.head.insertAdjacentHTML("beforeend", `<style fancyLyrics>${style}</style>`);

	(function waitForStart () {
		(Spicetify.Platform?.History.location.pathname.includes("lyrics") && !!rootEl()) 
			? update() : setTimeout(waitForStart, 100)
	})()
	
	Spicetify.Player.addEventListener("songchange", update)
	Spicetify.Player.addEventListener("appchange", update)
})()

fullscreen.js

// NAME: fullscreen
// AUTHOR: fallsimpy
// DESCRIPTION: Support fullscreen apps
/// <reference path="../globals.d.ts" />
(() => {
	const sel = { 
		appRoot: `.main-view-container__scroll-node-child`,
		button: `button.control-button[title="Full screen"]`
	}

	const style = `
		${sel.appRoot}:fullscreen {
			height: 100% !important;
			padding-bottom: 0 !important;
		}
		${sel.appRoot}:fullscreen > div {
			height: 100% !important;
			margin: 0;
		}
	`
	document.head.insertAdjacentHTML("beforeend", `<style fullscreen>${style}</style>`)

	let goFullscreen = () => Spicetify.Platform.History.location.pathname.includes("lyrics")
		? document.querySelector(sel.appRoot).requestFullscreen()
		: document.querySelector(sel.button).click()

	let toggleFullscreen = () => (!document.fullscreenElement)
		? goFullscreen()
		: document.exitFullscreen()

	const button = new Spicetify.Topbar.Button("Fullscreen", "fullscreen", toggleFullscreen)

	setTimeout(() => {
		Spicetify.Mousetrap.addKeycodes({ 122: "f11" })
		Spicetify.Mousetrap.bind("escape", () => document.exitFullscreen())
		Spicetify.Mousetrap.bind("f11", () => toggleFullscreen())
	}, 500)
})()