Fix lag caused by poorly written CSS rules (#3198)

Co-authored-by: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
This commit is contained in:
v 2025-02-02 01:37:54 +01:00 committed by GitHub
parent 4f5ebec4bb
commit 6cccb54ffc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 270 additions and 330 deletions

View file

@ -19,6 +19,7 @@
import "./spotifyStyles.css";
import { Settings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Flex } from "@components/Flex";
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { debounce } from "@shared/debounce";
@ -28,7 +29,7 @@ import { ContextMenuApi, FluxDispatcher, Forms, Menu, React, useEffect, useState
import { SpotifyStore, Track } from "./SpotifyStore";
const cl = (className: string) => `vc-spotify-${className}`;
const cl = classNameFactory("vc-spotify-");
function msToHuman(ms: number) {
const minutes = ms / 1000 / 60;
@ -40,7 +41,7 @@ function msToHuman(ms: number) {
function Svg(path: string, label: string) {
return () => (
<svg
className={classes(cl("button-icon"), cl(label))}
className={cl("button-icon", label)}
height="24"
width="24"
viewBox="0 0 24 24"
@ -126,7 +127,7 @@ function Controls() {
return (
<Flex className={cl("button-row")} style={{ gap: 0 }}>
<Button
className={classes(cl("button"), cl(shuffle ? "shuffle-on" : "shuffle-off"))}
className={classes(cl("button"), cl("shuffle"), cl(shuffle ? "shuffle-on" : "shuffle-off"))}
onClick={() => SpotifyStore.setShuffle(!shuffle)}
>
<Shuffle />
@ -143,7 +144,7 @@ function Controls() {
<SkipNext />
</Button>
<Button
className={classes(cl("button"), cl(repeatClassName))}
className={classes(cl("button"), cl("repeat"), cl(repeatClassName))}
onClick={() => SpotifyStore.setRepeat(nextRepeat)}
style={{ position: "relative" }}
>
@ -285,11 +286,12 @@ function Info({ track }: { track: Track; }) {
</>
);
if (coverExpanded && img) return (
<div id={cl("album-expanded-wrapper")}>
{i}
</div>
);
if (coverExpanded && img)
return (
<div id={cl("album-expanded-wrapper")}>
{i}
</div>
);
return (
<div id={cl("info-wrapper")}>