first
This commit is contained in:
@@ -0,0 +1,764 @@
|
||||
// @ts-check
|
||||
// NAME: Full App Display
|
||||
// AUTHOR: khanhas
|
||||
// VERSION: 1.0
|
||||
// DESCRIPTION: Fancy artwork and track status display.
|
||||
|
||||
/// <reference path="../globals.d.ts" />
|
||||
(function FullAppDisplay() {
|
||||
if (!Spicetify.Keyboard || !Spicetify.React || !Spicetify.ReactDOM) {
|
||||
setTimeout(FullAppDisplay, 200);
|
||||
return;
|
||||
}
|
||||
|
||||
const { React: react, ReactDOM: reactDOM } = Spicetify;
|
||||
const { useState, useEffect } = react;
|
||||
|
||||
const CONFIG = getConfig();
|
||||
let updateVisual;
|
||||
|
||||
const style = document.createElement("style");
|
||||
const styleBase = `
|
||||
#full-app-display {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
#fad-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
#fad-body {
|
||||
height: 100vh;
|
||||
}
|
||||
#fad-foreground {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(var(--fad-scale));
|
||||
}
|
||||
#fad-art-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 100%;
|
||||
border-radius: 15px;
|
||||
background-size: cover;
|
||||
}
|
||||
#fad-art-inner {
|
||||
position: absolute;
|
||||
left: 3%;
|
||||
bottom: 0;
|
||||
width: 94%;
|
||||
height: 94%;
|
||||
z-index: -1;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
#fad-progress-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#fad-progress {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background-color: #ffffff50;
|
||||
overflow: hidden;
|
||||
}
|
||||
#fad-progress-inner {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
#fad-duration {
|
||||
margin-left: 10px;
|
||||
}
|
||||
#fad-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -2;
|
||||
}
|
||||
body.fad-activated #full-app-display {
|
||||
display: block
|
||||
}
|
||||
.fad-background-fade {
|
||||
transition: background-image 1s linear;
|
||||
}
|
||||
body.video-full-screen.video-full-screen--hide-ui {
|
||||
cursor: auto;
|
||||
}
|
||||
#fad-controls button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: currentColor;
|
||||
padding: 0 5px;
|
||||
}
|
||||
#fad-artist svg, #fad-album svg {
|
||||
display: inline-block;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleChoices = [
|
||||
`
|
||||
#fad-foreground {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
}
|
||||
#fad-art {
|
||||
width: calc(100vw - 840px);
|
||||
min-width: 200px;
|
||||
max-width: 340px;
|
||||
}
|
||||
#fad-details {
|
||||
padding-left: 50px;
|
||||
line-height: initial;
|
||||
max-width: 70%;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#fad-title {
|
||||
font-size: 87px;
|
||||
font-weight: var(--glue-font-weight-black);
|
||||
}
|
||||
#fad-artist, #fad-album {
|
||||
font-size: 54px;
|
||||
font-weight: var(--glue-font-weight-medium);
|
||||
}
|
||||
#fad-artist svg, #fad-album svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
#fad-status {
|
||||
display: flex;
|
||||
min-width: 400px;
|
||||
max-width: 400px;
|
||||
align-items: center;
|
||||
}
|
||||
#fad-status.active {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#fad-controls {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#fad-elapsed {
|
||||
min-width: 52px;
|
||||
}`,
|
||||
`
|
||||
#fad-art {
|
||||
width: calc(100vh - 400px);
|
||||
max-width: 340px;
|
||||
}
|
||||
#fad-foreground {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
#fad-details {
|
||||
padding-top: 50px;
|
||||
line-height: initial;
|
||||
max-width: 70%;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#fad-title {
|
||||
font-size: 54px;
|
||||
font-weight: var(--glue-font-weight-black);
|
||||
}
|
||||
#fad-artist, #fad-album {
|
||||
font-size: 33px;
|
||||
font-weight: var(--glue-font-weight-medium);
|
||||
}
|
||||
#fad-artist svg, #fad-album svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#fad-status {
|
||||
display: flex;
|
||||
min-width: 400px;
|
||||
max-width: 400px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
#fad-status.active {
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
#fad-controls {
|
||||
margin-top: 20px;
|
||||
order: 2
|
||||
}
|
||||
#fad-elapsed {
|
||||
min-width: 56px;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
}`,
|
||||
];
|
||||
|
||||
const lyricsPlusBase = `
|
||||
#fad-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#fad-foreground {
|
||||
padding: 0 50px 0 100px;
|
||||
width: 50vw;
|
||||
}
|
||||
#fad-lyrics-plus-container {
|
||||
width: 50vw;
|
||||
}
|
||||
`;
|
||||
const lyricsPlusStyleChoices = [
|
||||
`
|
||||
#fad-title {
|
||||
font-size: 54px;
|
||||
}
|
||||
#fad-art {
|
||||
max-width: 210px;
|
||||
margin-left: 50px;
|
||||
}`,
|
||||
``,
|
||||
];
|
||||
updateStyle();
|
||||
|
||||
const DisplayIcon = ({ icon, size }) => {
|
||||
return react.createElement("svg", {
|
||||
width: size,
|
||||
height: size,
|
||||
viewBox: "0 0 16 16",
|
||||
fill: "currentColor",
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: icon,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const SubInfo = ({ text, id, icon }) => {
|
||||
return react.createElement(
|
||||
"div",
|
||||
{
|
||||
id,
|
||||
},
|
||||
CONFIG.icons && react.createElement(DisplayIcon, { icon, size: 35 }),
|
||||
react.createElement("span", null, text)
|
||||
);
|
||||
};
|
||||
|
||||
const ButtonIcon = ({ icon, onClick }) => {
|
||||
return react.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick,
|
||||
},
|
||||
react.createElement(DisplayIcon, { icon, size: 20 })
|
||||
);
|
||||
};
|
||||
|
||||
const ProgressBar = () => {
|
||||
const [value, setValue] = useState(Spicetify.Player.getProgress());
|
||||
useEffect(() => {
|
||||
const update = ({ data }) => setValue(data);
|
||||
Spicetify.Player.addEventListener("onprogress", update);
|
||||
return () => Spicetify.Player.removeEventListener("onprogress", update);
|
||||
});
|
||||
const duration = Spicetify.Platform.PlayerAPI._state.duration;
|
||||
return react.createElement(
|
||||
"div",
|
||||
{ id: "fad-progress-container" },
|
||||
react.createElement("span", { id: "fad-elapsed" }, Spicetify.Player.formatTime(value)),
|
||||
react.createElement(
|
||||
"div",
|
||||
{ id: "fad-progress" },
|
||||
react.createElement("div", {
|
||||
id: "fad-progress-inner",
|
||||
style: {
|
||||
width: (value / duration) * 100 + "%",
|
||||
},
|
||||
})
|
||||
),
|
||||
react.createElement("span", { id: "fad-duration" }, Spicetify.Player.formatTime(duration))
|
||||
);
|
||||
};
|
||||
|
||||
const PlayerControls = () => {
|
||||
const [value, setValue] = useState(Spicetify.Player.isPlaying());
|
||||
useEffect(() => {
|
||||
const update = ({ data }) => setValue(!data.is_paused);
|
||||
Spicetify.Player.addEventListener("onplaypause", update);
|
||||
return () => Spicetify.Player.removeEventListener("onplaypause", update);
|
||||
});
|
||||
return react.createElement(
|
||||
"div",
|
||||
{ id: "fad-controls" },
|
||||
react.createElement(ButtonIcon, {
|
||||
icon: Spicetify.SVGIcons["skip-back"],
|
||||
onClick: Spicetify.Player.back,
|
||||
}),
|
||||
react.createElement(ButtonIcon, {
|
||||
icon: Spicetify.SVGIcons[value ? "pause" : "play"],
|
||||
onClick: Spicetify.Player.togglePlay,
|
||||
}),
|
||||
react.createElement(ButtonIcon, {
|
||||
icon: Spicetify.SVGIcons["skip-forward"],
|
||||
onClick: Spicetify.Player.next,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
class FAD extends react.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
title: "",
|
||||
artist: "",
|
||||
album: "",
|
||||
cover: "",
|
||||
};
|
||||
this.currTrackImg = new Image();
|
||||
this.nextTrackImg = new Image();
|
||||
this.mousetrap = new Spicetify.Mousetrap();
|
||||
}
|
||||
|
||||
async getAlbumDate(uri) {
|
||||
const id = uri.replace("spotify:album:", "");
|
||||
const albumInfo = await Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${id}/desktop`);
|
||||
|
||||
const albumDate = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0);
|
||||
const recentDate = new Date();
|
||||
recentDate.setMonth(recentDate.getMonth() - 6);
|
||||
return albumDate.toLocaleString("default", albumDate > recentDate ? { year: "numeric", month: "short" } : { year: "numeric" });
|
||||
}
|
||||
|
||||
async fetchInfo() {
|
||||
const meta = Spicetify.Player.data.track.metadata;
|
||||
|
||||
// prepare title
|
||||
let rawTitle = meta.title;
|
||||
if (CONFIG.trimTitle) {
|
||||
rawTitle = rawTitle
|
||||
.replace(/\(.+?\)/g, "")
|
||||
.replace(/\[.+?\]/g, "")
|
||||
.replace(/\s\-\s.+?$/, "")
|
||||
.trim();
|
||||
}
|
||||
|
||||
// prepare artist
|
||||
let artistName;
|
||||
if (CONFIG.showAllArtists) {
|
||||
artistName = Object.keys(meta)
|
||||
.filter((key) => key.startsWith("artist_name"))
|
||||
.sort()
|
||||
.map((key) => meta[key])
|
||||
.join(", ");
|
||||
} else {
|
||||
artistName = meta.artist_name;
|
||||
}
|
||||
|
||||
// prepare album
|
||||
let albumText = meta.album_title || "";
|
||||
if (CONFIG.showAlbum) {
|
||||
const albumURI = meta.album_uri;
|
||||
if (albumURI?.startsWith("spotify:album:")) {
|
||||
albumText += " • " + (await this.getAlbumDate(albumURI));
|
||||
}
|
||||
}
|
||||
|
||||
if (meta.image_xlarge_url === this.currTrackImg.src) {
|
||||
this.setState({
|
||||
title: rawTitle || "",
|
||||
artist: artistName || "",
|
||||
album: albumText || "",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Pre-load next track
|
||||
// Wait until next track image is downloaded then update UI text and images
|
||||
const previousImg = this.currTrackImg.cloneNode();
|
||||
this.currTrackImg.src = meta.image_xlarge_url;
|
||||
this.currTrackImg.onload = () => {
|
||||
const bgImage = `url("${this.currTrackImg.src}")`;
|
||||
|
||||
this.animateCanvas(previousImg, this.currTrackImg);
|
||||
this.setState({
|
||||
title: rawTitle || "",
|
||||
artist: artistName || "",
|
||||
album: albumText || "",
|
||||
cover: bgImage,
|
||||
});
|
||||
};
|
||||
this.currTrackImg.onerror = () => {
|
||||
// Placeholder
|
||||
this.currTrackImg.src =
|
||||
"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB4PSIwIiB5PSIwIiAvPgogIDxwYXRoIGZpbGw9IiNCM0IzQjMiIGQ9Ik0yNi4yNSAxNi4xNjJMMjEuMDA1IDEzLjEzNEwyMS4wMTIgMjIuNTA2QzIwLjU5NCAyMi4xOTIgMjAuMDgxIDIxLjk5OSAxOS41MTkgMjEuOTk5QzE4LjE0MSAyMS45OTkgMTcuMDE5IDIzLjEyMSAxNy4wMTkgMjQuNDk5QzE3LjAxOSAyNS44NzggMTguMTQxIDI2Ljk5OSAxOS41MTkgMjYuOTk5QzIwLjg5NyAyNi45OTkgMjIuMDE5IDI1Ljg3OCAyMi4wMTkgMjQuNDk5QzIyLjAxOSAyNC40MjIgMjIuMDA2IDE0Ljg2NyAyMi4wMDYgMTQuODY3TDI1Ljc1IDE3LjAyOUwyNi4yNSAxNi4xNjJaTTE5LjUxOSAyNS45OThDMTguNjkyIDI1Ljk5OCAxOC4wMTkgMjUuMzI1IDE4LjAxOSAyNC40OThDMTguMDE5IDIzLjY3MSAxOC42OTIgMjIuOTk4IDE5LjUxOSAyMi45OThDMjAuMzQ2IDIyLjk5OCAyMS4wMTkgMjMuNjcxIDIxLjAxOSAyNC40OThDMjEuMDE5IDI1LjMyNSAyMC4zNDYgMjUuOTk4IDE5LjUxOSAyNS45OThaIi8+Cjwvc3ZnPgo=";
|
||||
};
|
||||
}
|
||||
|
||||
animateCanvas(prevImg, nextImg) {
|
||||
const { innerWidth: width, innerHeight: height } = window;
|
||||
this.back.width = width;
|
||||
this.back.height = height;
|
||||
const dim = width > height ? width : height;
|
||||
|
||||
const ctx = this.back.getContext("2d");
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
ctx.filter = `blur(30px) brightness(0.6)`;
|
||||
const blur = 30;
|
||||
|
||||
if (!CONFIG.enableFade) {
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.drawImage(nextImg, -blur * 2, -blur * 2 - (width - height) / 2, dim + 4 * blur, dim + 4 * blur);
|
||||
return;
|
||||
}
|
||||
|
||||
let factor = 0.0;
|
||||
const animate = () => {
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.drawImage(prevImg, -blur * 2, -blur * 2 - (width - height) / 2, dim + 4 * blur, dim + 4 * blur);
|
||||
ctx.globalAlpha = Math.sin((Math.PI / 2) * factor);
|
||||
ctx.drawImage(nextImg, -blur * 2, -blur * 2 - (width - height) / 2, dim + 4 * blur, dim + 4 * blur);
|
||||
|
||||
if (factor < 1.0) {
|
||||
factor += 0.016;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateInfo = this.fetchInfo.bind(this);
|
||||
Spicetify.Player.addEventListener("songchange", this.updateInfo);
|
||||
this.updateInfo();
|
||||
|
||||
updateVisual = () => {
|
||||
updateStyle();
|
||||
this.fetchInfo();
|
||||
};
|
||||
|
||||
this.onQueueChange = async (queue) => {
|
||||
queue = queue.data;
|
||||
let nextTrack;
|
||||
if (queue.queued.length) {
|
||||
nextTrack = queue.queued[0];
|
||||
} else {
|
||||
nextTrack = queue.nextUp[0];
|
||||
}
|
||||
this.nextTrackImg.src = nextTrack.metadata.image_xlarge_url;
|
||||
};
|
||||
|
||||
const scaleLimit = { min: 0.1, max: 4, step: 0.05 };
|
||||
this.onScaleChange = (event) => {
|
||||
if (!event.ctrlKey) return;
|
||||
let dir = event.deltaY < 0 ? 1 : -1;
|
||||
let temp = (CONFIG["scale"] || 1) + dir * scaleLimit.step;
|
||||
if (temp < scaleLimit.min) {
|
||||
temp = scaleLimit.min;
|
||||
} else if (temp > scaleLimit.max) {
|
||||
temp = scaleLimit.max;
|
||||
}
|
||||
CONFIG["scale"] = temp;
|
||||
saveConfig();
|
||||
updateVisual();
|
||||
};
|
||||
|
||||
Spicetify.Platform.PlayerAPI._events.addListener("queue_update", this.onQueueChange);
|
||||
this.mousetrap.bind("esc", deactivate);
|
||||
window.dispatchEvent(new Event("fad-request"));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Spicetify.Player.removeEventListener("songchange", this.updateInfo);
|
||||
Spicetify.Platform.PlayerAPI._events.removeListener("queue_update", this.onQueueChange);
|
||||
this.mousetrap.unbind("esc");
|
||||
}
|
||||
|
||||
render() {
|
||||
return react.createElement(
|
||||
"div",
|
||||
{
|
||||
id: "full-app-display",
|
||||
className: "Video VideoPlayer--fullscreen VideoPlayer--landscape",
|
||||
onDoubleClick: deactivate,
|
||||
onContextMenu: openConfig,
|
||||
},
|
||||
react.createElement("canvas", {
|
||||
id: "fad-background",
|
||||
ref: (el) => (this.back = el),
|
||||
}),
|
||||
react.createElement("div", { id: "fad-header" }),
|
||||
react.createElement(
|
||||
"div",
|
||||
{ id: "fad-body" },
|
||||
react.createElement(
|
||||
"div",
|
||||
{
|
||||
id: "fad-foreground",
|
||||
style: {
|
||||
"--fad-scale": CONFIG["scale"] || 1,
|
||||
},
|
||||
ref: (el) => {
|
||||
if (!el) return;
|
||||
el.onmousewheel = this.onScaleChange;
|
||||
},
|
||||
},
|
||||
react.createElement(
|
||||
"div",
|
||||
{ id: "fad-art" },
|
||||
react.createElement(
|
||||
"div",
|
||||
{
|
||||
id: "fad-art-image",
|
||||
className: CONFIG.enableFade && "fad-background-fade",
|
||||
style: {
|
||||
backgroundImage: this.state.cover,
|
||||
},
|
||||
},
|
||||
react.createElement("div", { id: "fad-art-inner" })
|
||||
)
|
||||
),
|
||||
react.createElement(
|
||||
"div",
|
||||
{ id: "fad-details" },
|
||||
react.createElement("div", { id: "fad-title" }, this.state.title),
|
||||
react.createElement(SubInfo, {
|
||||
id: "fad-artist",
|
||||
text: this.state.artist,
|
||||
icon: Spicetify.SVGIcons.artist,
|
||||
}),
|
||||
CONFIG.showAlbum &&
|
||||
react.createElement(SubInfo, {
|
||||
id: "fad-album",
|
||||
text: this.state.album,
|
||||
icon: Spicetify.SVGIcons.album,
|
||||
}),
|
||||
react.createElement(
|
||||
"div",
|
||||
{
|
||||
id: "fad-status",
|
||||
className: (CONFIG.enableControl || CONFIG.enableProgress) && "active",
|
||||
},
|
||||
CONFIG.enableControl && react.createElement(PlayerControls),
|
||||
CONFIG.enableProgress && react.createElement(ProgressBar)
|
||||
)
|
||||
)
|
||||
),
|
||||
CONFIG.lyricsPlus &&
|
||||
react.createElement("div", {
|
||||
id: "fad-lyrics-plus-container",
|
||||
style: {
|
||||
"--lyrics-color-active": "#ffffff",
|
||||
"--lyrics-color-inactive": "#ffffff50",
|
||||
},
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const classes = ["video", "video-full-screen", "video-full-window", "video-full-screen--hide-ui", "fad-activated"];
|
||||
|
||||
const container = document.createElement("div");
|
||||
container.id = "fad-main";
|
||||
let lastApp;
|
||||
|
||||
async function toggleFullscreen() {
|
||||
if (CONFIG.enableFullscreen) {
|
||||
await document.documentElement.requestFullscreen();
|
||||
} else if (document.webkitIsFullScreen) {
|
||||
await document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
async function activate() {
|
||||
await toggleFullscreen();
|
||||
|
||||
document.body.classList.add(...classes);
|
||||
document.body.append(style, container);
|
||||
reactDOM.render(react.createElement(FAD), container);
|
||||
|
||||
requestLyricsPlus();
|
||||
}
|
||||
|
||||
function deactivate() {
|
||||
if (CONFIG.enableFullscreen || document.webkitIsFullScreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
document.body.classList.remove(...classes);
|
||||
reactDOM.unmountComponentAtNode(container);
|
||||
style.remove();
|
||||
container.remove();
|
||||
window.dispatchEvent(new Event("fad-request"));
|
||||
|
||||
if (lastApp && lastApp !== "/lyrics-plus") {
|
||||
Spicetify.Platform.History.push(lastApp);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFad() {
|
||||
if (document.body.classList.contains("fad-activated")) {
|
||||
deactivate();
|
||||
} else {
|
||||
activate();
|
||||
}
|
||||
}
|
||||
|
||||
function updateStyle() {
|
||||
style.innerHTML =
|
||||
styleBase +
|
||||
styleChoices[CONFIG.vertical ? 1 : 0] +
|
||||
(CONFIG.lyricsPlus ? lyricsPlusBase + lyricsPlusStyleChoices[CONFIG.vertical ? 1 : 0] : "");
|
||||
}
|
||||
|
||||
function requestLyricsPlus() {
|
||||
if (CONFIG.lyricsPlus) {
|
||||
lastApp = Spicetify.Platform.History.location.pathname;
|
||||
if (lastApp !== "/lyrics-plus") {
|
||||
Spicetify.Platform.History.push("/lyrics-plus");
|
||||
}
|
||||
}
|
||||
window.dispatchEvent(new Event("fad-request"));
|
||||
}
|
||||
|
||||
function getConfig() {
|
||||
try {
|
||||
const parsed = JSON.parse(Spicetify.LocalStorage.get("full-app-display-config"));
|
||||
if (parsed && typeof parsed === "object") {
|
||||
return parsed;
|
||||
}
|
||||
throw "";
|
||||
} catch {
|
||||
Spicetify.LocalStorage.set("full-app-display-config", "{}");
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function saveConfig() {
|
||||
Spicetify.LocalStorage.set("full-app-display-config", JSON.stringify(CONFIG));
|
||||
}
|
||||
|
||||
const ConfigItem = ({ name, field, func }) => {
|
||||
const [value, setValue] = useState(CONFIG[field]);
|
||||
return react.createElement(
|
||||
"div",
|
||||
{ className: "setting-row" },
|
||||
react.createElement("label", { className: "col description" }, name),
|
||||
react.createElement(
|
||||
"div",
|
||||
{ className: "col action" },
|
||||
react.createElement(
|
||||
"button",
|
||||
{
|
||||
className: "switch" + (value ? "" : " disabled"),
|
||||
onClick: () => {
|
||||
const state = !value;
|
||||
CONFIG[field] = state;
|
||||
setValue(state);
|
||||
saveConfig();
|
||||
func();
|
||||
},
|
||||
},
|
||||
react.createElement(DisplayIcon, { icon: Spicetify.SVGIcons.check, size: 16 })
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
function openConfig(event) {
|
||||
event.preventDefault();
|
||||
const style = react.createElement("style", {
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: `
|
||||
.setting-row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.setting-row .col {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
.setting-row .col.description {
|
||||
float: left;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.setting-row .col.action {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
button.switch {
|
||||
align-items: center;
|
||||
border: 0px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(var(--spice-rgb-shadow), .7);
|
||||
color: var(--spice-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin-inline-start: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
button.switch.disabled {
|
||||
color: rgba(var(--spice-rgb-text), .3);
|
||||
}
|
||||
`,
|
||||
},
|
||||
});
|
||||
let configContainer = react.createElement(
|
||||
"div",
|
||||
null,
|
||||
style,
|
||||
react.createElement(ConfigItem, {
|
||||
name: "Enable Lyrics Plus integration",
|
||||
field: "lyricsPlus",
|
||||
func: () => {
|
||||
updateVisual();
|
||||
requestLyricsPlus();
|
||||
},
|
||||
}),
|
||||
react.createElement(ConfigItem, { name: "Enable progress bar", field: "enableProgress", func: updateVisual }),
|
||||
react.createElement(ConfigItem, { name: "Enable controls", field: "enableControl", func: updateVisual }),
|
||||
react.createElement(ConfigItem, { name: "Trim title", field: "trimTitle", func: updateVisual }),
|
||||
react.createElement(ConfigItem, { name: "Show album", field: "showAlbum", func: updateVisual }),
|
||||
react.createElement(ConfigItem, { name: "Show all artists", field: "showAllArtists", func: updateVisual }),
|
||||
react.createElement(ConfigItem, { name: "Show icons", field: "icons", func: updateVisual }),
|
||||
react.createElement(ConfigItem, { name: "Vertical mode", field: "vertical", func: updateStyle }),
|
||||
react.createElement(ConfigItem, { name: "Enable fullscreen", field: "enableFullscreen", func: toggleFullscreen }),
|
||||
react.createElement(ConfigItem, { name: "Enable song change animation", field: "enableFade", func: updateVisual })
|
||||
);
|
||||
Spicetify.PopupModal.display({
|
||||
title: "Full App Display",
|
||||
content: configContainer,
|
||||
});
|
||||
}
|
||||
|
||||
// Add activator on top bar
|
||||
new Spicetify.Topbar.Button(
|
||||
"Full App Display",
|
||||
`<svg role="img" height="16" width="16" viewBox="0 0 16 16" fill="currentColor">${Spicetify.SVGIcons.projector}</svg>`,
|
||||
activate
|
||||
);
|
||||
|
||||
Spicetify.Mousetrap.bind("f11", toggleFad);
|
||||
})();
|
||||
Reference in New Issue
Block a user