765 lines
24 KiB
JavaScript
765 lines
24 KiB
JavaScript
|
// @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);
|
||
|
|
})();
|