mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-06-21 20:37:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Visual Refresh

Browse source 
Co-Authored-By: sadan4 <117494111+sadan4@users.noreply.github.com>
Co-Authored-By: doyle31 <abacubabacus@gmail.com>
Co-Authored-By: iilwy <iilwy@omg.games>
Co-Authored-By: Noa <164402463+nroggendorff@users.noreply.github.com>
Co-Authored-By: rini c <rini@rinici.de>
Co-Authored-By: Cassie <37855219+codef53@users.noreply.github.com>
Co-Authored-By: jamesbt365 <moxy@mothoxi.de>
Co-Authored-By: khcrysalis <97859147+khcrysalis@users.noreply.github.com>
Co-Authored-By: nin0dev <75569739+nin0-dev@users.noreply.github.com>
This commit is contained in:
thororen1234 2025-03-31 17:36:21 -04:00
parent fce4ffaabb
commit ca4b63c386
No known key found for this signature in database
23 changed files with 283 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@
*/
import "./spotifyStyles.css";
import "./visualRefreshSpotifyStyles.css"; // TODO: merge with spotifyStyles.css and remove when old UI is discontinued
import { Settings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
@ -307,7 +308,8 @@ function Info({ track }: { track: Track; }) {
{track.name}
</Forms.FormText>
{track.artists.some(a => a.name) && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
<Forms.FormText variant="text-sm/normal" className={cl(["ellipoverflow", "secondary-song-info"])}>
<span className={cl("song-info-prefix")}>by&nbsp;</span>
by&nbsp;
{track.artists.map((a, i) => (
<React.Fragment key={a.name}>
@ -325,7 +327,8 @@ function Info({ track }: { track: Track; }) {
</Forms.FormText>
)}
{track.album.name && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
<Forms.FormText variant="text-sm/normal" className={cl(["ellipoverflow", "secondary-song-info"])}>
<span className={cl("song-info-prefix")}>on&nbsp;</span>
on&nbsp;
<span
id={cl("album-title")}

2
src/plugins/spotifyControls/index.tsx
View file

@ -32,7 +32,7 @@ function toggleHoverControls(value: boolean) {
export default definePlugin({
name: "SpotifyControls",
description: "Adds a Spotify player above the account panel",
authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000],
authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000, Devs.nin0dev],
options: {
hoverControls: {
description: "Show controls on hover",

4
src/plugins/spotifyControls/spotifyStyles.css
View file

@ -3,7 +3,9 @@
padding: 0.375rem 0.5rem;
border-bottom: 1px solid var(--background-modifier-accent);
--vc-spotify-green: #1db954; /* so custom themes can easily change it */
--vc-spotify-green: var(--spotify, #1db954); /* so custom themes can easily change it */
--vc-spotify-green-90: color-mix(in hsl, var(--vc-spotify-green), transparent 90%);
--vc-spotify-green-80: color-mix(in hsl, var(--vc-spotify-green), transparent 80%);
}
.theme-light #vc-spotify-player {

82
src/plugins/spotifyControls/visualRefreshSpotifyStyles.css Normal file
View file

@ -0,0 +1,82 @@
/* TODO: merge with spotifyStyles.css and remove when old UI is discontinued */
.visual-refresh {
#vc-spotify-player {
padding: 12px;
background: var(--bg-overlay-floating, var(--background-base-low, var(--background-secondary-alt)));
margin: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.vc-spotify-song-info-prefix {
display: none;
}
.vc-spotify-artist,
.vc-spotify-album {
color: var(--header-primary);
}
.vc-spotify-secondary-song-info {
font-size: 12px;
}
#vc-spotify-progress-bar {
position: relative;
color: var(--text-normal);
width: 100%;
}
#vc-spotify-progress-bar>[class^="slider"] {
flex-grow: 1;
width: 100%;
padding: 0 !important;
}
#vc-spotify-progress-bar>[class^="slider"] [class^="bar"] {
height: 3px !important;
top: calc(12px - 4px / 2 + var(--bar-offset));
}
#vc-spotify-progress-bar>[class^="slider"] [class^="barFill"] {
background-color: var(--interactive-active);
}
#vc-spotify-progress-bar>[class^="slider"]:hover [class^="barFill"] {
background-color: var(--vc-spotify-green);
}
#vc-spotify-progress-bar>[class^="slider"] [class^="grabber"] {
background-color: var(--interactive-active);
width: 16px !important;
height: 16px !important;
margin-top: calc(17px/-2 + var(--bar-offset)/2);
margin-left: -0.5px;
}
.vc-spotify-progress-time {
margin-top: 8px;
font-family: var(--font-code);
}
.vc-spotify-button-row {
margin-top: 14px;
}
.vc-spotify-button {
margin: 0 2px;
border-radius: var(--radius-sm);
}
.vc-spotify-repeat-context,
.vc-spotify-repeat-track,
.vc-spotify-shuffle-on {
background-color: var(--vc-spotify-green-90);
}
.vc-spotify-repeat-context:hover,
.vc-spotify-repeat-track:hover,
.vc-spotify-shuffle-on:hover {
background-color: var(--vc-spotify-green-80);
}
}