mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-02-21 15:48:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

feat(SpotifyControls): dummy color control

Browse source
This commit is contained in:
Panniku 2024-05-03 15:31:32 +04:00
parent 19bef62aad
commit 3a38e02679
1 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/plugins/spotifyControls/PlayerComponent.tsx
View file

@ -23,6 +23,7 @@ import { Flex } from "@components/Flex";
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { debounce } from "@shared/debounce";
import { openImageModal } from "@utils/discord";
import { Logger } from "@utils/Logger";
import { classes, copyWithToast } from "@utils/misc";
import { ContextMenuApi, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
@ -340,6 +341,25 @@ function Info({ track }: { track: Track; }) {
);
}
async function getDominantColor(imageUrl: any) {
if (imageUrl) {
const ctx = await document.createElement("canvas").getContext("2d", { willReadFrequently: true })!;
const src = imageUrl;
imageUrl = new Image();
imageUrl.crossOrigin = "";
imageUrl.src = src;
ctx.imageSmoothingEnabled = true;
ctx.drawImage(imageUrl, 0, 0, 1, 1);
return ctx.getImageData(0, 0, 1, 1).data.slice(0, 3);
} else {
return [0, 0, 0];
}
}
function rgbToHex(r: number, g: number, b: number) {
return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
}
export function Player() {
const track = useStateFromStores(
[SpotifyStore],
@ -371,8 +391,15 @@ export function Player() {
if (!track || !device?.is_active || shouldHide)
return null;
const exportTrackImageStyle = {
const rgbColors = getDominantColor(track?.album?.image?.url);
const dominantColor = rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);
new Logger("SpotifyControls", "#1db954").log(dominantColor);
// console.log(typeof rgbColors, rgbColors, rgbColors[0], rgbColors[1], rgbColors[2]);
const exportTrackVariables = {
"--vc-spotify-track-image": `url(${track?.album?.image?.url || ""})`,
"--vc-spotify-dominant-color": `${(dominantColor !== "#000000") ? dominantColor : "var(--brand-experiment)"}`
} as React.CSSProperties;
return (
@ -382,7 +409,7 @@ export function Player() {
<p >Check the console for errors</p>
</div>
)}>
<div id={cl("player")} style={exportTrackImageStyle}>
<div id={cl("player")} style={exportTrackVariables}>
<Info track={track} />
<SeekBar />
<Controls />