feat(SpotifyControls): prettier design (#194)

Co-authored-by: afn <hey@afn.lol>
Co-authored-by: KraXen72 <DPELECH1@GMAil.com>
Co-authored-by: Ven <vendicated@riseup.net>

3 files changed, 158 insertions, 67 deletions

diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 15a7ef9..7972835 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -20,7 +20,7 @@ import ErrorBoundary from "../../components/ErrorBoundary";
 import { Flex } from "../../components/Flex";
 import { debounce } from "../../utils/debounce";
 import { classes, LazyComponent, lazyWebpack } from "../../utils/misc";
-import { ContextMenu, FluxDispatcher, Forms, Menu, React, Tooltip } from "../../webpack/common";
+import { ContextMenu, FluxDispatcher, Forms, Menu, React } from "../../webpack/common";
 import { filters, find } from "../../webpack/webpack";
 import { SpotifyStore, Track } from "./SpotifyStore";
 
@@ -47,7 +47,7 @@ function Svg(path: string, label: string) {
             className={classes(cl("button-icon"), cl(label))}
             height="24"
             width="24"
-            viewBox="0 0 48 48"
+            viewBox="0 0 24 24"
             fill="currentColor"
             aria-label={label}
             focusable={false}
@@ -57,15 +57,15 @@ function Svg(path: string, label: string) {
     );
 }
 
-// https://fonts.google.com/icons
-const PlayButton = Svg("M16 37.85v-28l22 14Zm3-14Zm0 8.55 13.45-8.55L19 15.3Z", "play");
-const PauseButton = Svg("M28.25 38V10H36v28ZM12 38V10h7.75v28Z", "pause");
-const SkipPrev = Svg("M11 36V12h3v24Zm26 0L19.7 24 37 12Zm-3-12Zm0 6.25v-12.5L24.95 24Z", "previous");
-const SkipNext = Svg("M34 36V12h3v24Zm-23 0V12l17.3 12Zm3-12Zm0 6.25L23.05 24 14 17.75Z", "next");
-// const Like = Svg("m24 41.95-2.05-1.85q-5.3-4.85-8.75-8.375-3.45-3.525-5.5-6.3T4.825 20.4Q4 18.15 4 15.85q0-4.5 3.025-7.525Q10.05 5.3 14.5 5.3q2.85 0 5.275 1.35Q22.2 8 24 10.55q2.1-2.7 4.45-3.975T33.5 5.3q4.45 0 7.475 3.025Q44 11.35 44 15.85q0 2.3-.825 4.55T40.3 25.425q-2.05 2.775-5.5 6.3T26.05 40.1ZM24 38q5.05-4.65 8.325-7.975 3.275-3.325 5.2-5.825 1.925-2.5 2.7-4.45.775-1.95.775-3.9 0-3.3-2.1-5.425T33.5 8.3q-2.55 0-4.75 1.575T25.2 14.3h-2.45q-1.3-2.8-3.5-4.4-2.2-1.6-4.75-1.6-3.3 0-5.4 2.125Q7 12.55 7 15.85q0 1.95.775 3.925.775 1.975 2.7 4.5Q12.4 26.8 15.7 30.1 19 33.4 24 38Zm0-14.85Z", "like");
-// const LikeOn = Svg("m24 41.95-2.05-1.85q-5.3-4.85-8.75-8.375-3.45-3.525-5.5-6.3T4.825 20.4Q4 18.15 4 15.85q0-4.5 3.025-7.525Q10.05 5.3 14.5 5.3q2.85 0 5.275 1.35Q22.2 8 24 10.55q2.1-2.7 4.45-3.975T33.5 5.3q4.45 0 7.475 3.025Q44 11.35 44 15.85q0 2.3-.825 4.55T40.3 25.425q-2.05 2.775-5.5 6.3T26.05 40.1ZM24 38q5.05-4.65 8.325-7.975 3.275-3.325 5.2-5.825 1.925-2.5 2.7-4.45.775-1.95.775-3.9 0-3.3-2.1-5.425T33.5 8.3q-2.55 0-4.75 1.575T25.2 14.3h-2.45q-1.3-2.8-3.5-4.4-2.2-1.6-4.75-1.6-3.3 0-5.4 2.125Q7 12.55 7 15.85q0 1.95.775 3.925.775 1.975 2.7 4.5Q12.4 26.8 15.7 30.1 19 33.4 24 38Zm0-14.85Z", "liked");
-const Repeat = Svg("m14 44-8-8 8-8 2.1 2.2-4.3 4.3H35v-8h3v11H11.8l4.3 4.3Zm-4-22.5v-11h26.2l-4.3-4.3L34 4l8 8-8 8-2.1-2.2 4.3-4.3H13v8Z", "repeat");
-const Shuffle = Svg("M29.05 40.5v-3h6.25l-9.2-9.15 2.1-2.15 9.3 9.2v-6.35h3V40.5Zm-19.45 0-2.1-2.15 27.9-27.9h-6.35v-3H40.5V18.9h-3v-6.3Zm10.15-18.7L7.5 9.6l2.15-2.15 12.25 12.2Z", "shuffle");
+// KraXen's icons :yesyes:
+// from https://fonts.google.com/icons?icon.style=Rounded&icon.set=Material+Icons
+// older material icon style, but still really good
+const PlayButton = Svg("M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z", "play");
+const PauseButton = Svg("M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2zm6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2z", "pause");
+const SkipPrev = Svg("M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm3.66 6.82l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z", "previous");
+const SkipNext = Svg("M7.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L7.58 7.11C6.91 6.65 6 7.12 6 7.93v8.14c0 .81.91 1.28 1.58.82zM16 7v10c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z", "next");
+const Repeat = Svg("M7 7h10v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36V5H6c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1V7zm10 10H7v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.31.31.85.09.85-.36V19h11c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v3z", "repeat");
+const Shuffle = Svg("M10.59 9.17L6.12 4.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.46 4.46 1.42-1.4zm4.76-4.32l1.19 1.19L4.7 17.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L17.96 7.46l1.19 1.19c.31.31.85.09.85-.36V4.5c0-.28-.22-.5-.5-.5h-3.79c-.45 0-.67.54-.36.85zm-.52 8.56l-1.41 1.41 3.13 3.13-1.2 1.2c-.31.31-.09.85.36.85h3.79c.28 0 .5-.22.5-.5v-3.79c0-.45-.54-.67-.85-.35l-1.19 1.19-3.13-3.14z", "shuffle");
 
 function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
     return (
@@ -78,23 +78,6 @@ function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
     );
 }
 
-function TooltipText(props: React.HtmlHTMLAttributes<HTMLParagraphElement>) {
-    return (
-        <Tooltip text={props.children}>
-            {({ onMouseLeave, onMouseEnter }) => (
-                <p
-                    className={cl("tooltip-text")}
-                    {...props}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                >
-                    {props.children}
-                </p >
-            )}
-        </Tooltip>
-    );
-}
-
 function Controls() {
     const [isPlaying, shuffle, repeat] = useStateFromStores(
         [SpotifyStore],
@@ -110,6 +93,7 @@ function Controls() {
         }
     })();
 
+    // the 1 is using position absolute so it does not make the button jump around
     return (
         <Flex className={cl("button-row")} style={{ gap: 0 }}>
             <Button
@@ -130,8 +114,9 @@ function Controls() {
             <Button
                 className={classes(cl("button"), cl(repeatClassName))}
                 onClick={() => SpotifyStore.setRepeat(nextRepeat)}
+                style={{ position: "relative" }}
             >
-                {repeat === "track" && <span style={{ fontSize: "70%" }}>1</span>}
+                {repeat === "track" && <span className={cl("repeat-1")}>1</span>}
                 <Repeat />
             </Button>
         </Flex>
@@ -171,7 +156,13 @@ function SeekBar() {
 
     return (
         <div id={cl("progress-bar")}>
-            <span className={cl("progress-time")} aria-label="Progress">{msToHuman(position)}</span>
+            <Forms.FormText
+                variant="text-xs/medium"
+                className={cl("progress-time") + " " + cl("time-left")}
+                aria-label="Progress"
+            >
+                {msToHuman(position)}
+            </Forms.FormText>
             <Slider
                 minValue={0}
                 maxValue={duration}
@@ -183,7 +174,13 @@ function SeekBar() {
                 }}
                 renderValue={msToHuman}
             />
-            <span className={cl("progress-time")} aria-label="Total Duration">{msToHuman(duration)}</span>
+            <Forms.FormText
+                variant="text-xs/medium"
+                className={cl("progress-time") + " " + cl("time-right")}
+                aria-label="Total Duration"
+            >
+                {msToHuman(duration)}
+            </Forms.FormText>
         </div>
     );
 }
@@ -257,26 +254,44 @@ function Info({ track }: { track: Track; }) {
         <div id={cl("info-wrapper")}>
             {i}
             <div id={cl("titles")}>
-                <TooltipText
+                <Forms.FormText
+                    variant="text-sm/semibold"
                     id={cl("song-title")}
+                    className={cl("ellipoverflow")}
+                    title={track.name}
                     onClick={() => SpotifyStore.openExternal(`/track/${track.id}`)}
                 >
                     {track.name}
-                </TooltipText>
-                <TooltipText>
+                </Forms.FormText>
+                <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
+                    by&nbsp;
                     {track.artists.map((a, i) => (
                         <React.Fragment key={a.id}>
                             <a
                                 className={cl("artist")}
                                 href={`https://open.spotify.com/artist/${a.id}`}
                                 target="_blank"
+                                style={{ fontSize: "inherit" }}
+                                title={a.name}
                             >
                                 {a.name}
                             </a>
                             {i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>}
                         </React.Fragment>
                     ))}
-                </TooltipText>
+                </Forms.FormText>
+                <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
+                    on&nbsp;
+                    <a id={cl("album-title")}
+                        href={`https://open.spotify.com/album/${track.album.id}`}
+                        target="_blank"
+                        className={cl("album")}
+                        style={{ fontSize: "inherit" }}
+                        title={track.album.name}
+                    >
+                        {track.album.name}
+                    </a>
+                </Forms.FormText>
             </div>
         </div>
     );
diff --git a/src/plugins/spotifyControls/index.tsx b/src/plugins/spotifyControls/index.tsx
index b5cd5c0..18bced9 100644
--- a/src/plugins/spotifyControls/index.tsx
+++ b/src/plugins/spotifyControls/index.tsx
@@ -23,7 +23,17 @@ import { Player } from "./PlayerComponent";
 export default definePlugin({
     name: "SpotifyControls",
     description: "Spotify Controls",
-    authors: [Devs.Ven],
+    authors: [
+        Devs.Ven,
+        {
+            id: 420043923822608384n,
+            name: "afn",
+        },
+        {
+            id: 379304073515499530n,
+            name: "KraXen72"
+        }
+    ],
     dependencies: ["MenuItemDeobfuscatorApi"],
     patches: [
         {
diff --git a/src/plugins/spotifyControls/styles.css b/src/plugins/spotifyControls/styles.css
index b6e1aa2..ee704a7 100644
--- a/src/plugins/spotifyControls/styles.css
+++ b/src/plugins/spotifyControls/styles.css
@@ -1,28 +1,49 @@
+#vc-spotify-player {
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid var(--background-modifier-accent);
+    --vc-spotify-green: #1db954; /* so cusotm themes can easily change it */
+}
 .vc-spotify-button {
-    height: 100%;
     background: none;
     color: var(--interactive-normal);
-}
+    padding: 0;
+    width: 32px;
+    height: 32px;
 
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .vc-spotify-button:hover {
-    filter: brightness(1.3);
+    color: var(--interactive-hover);
+    background-color: var(--background-modifier-selected);
 }
 
-.vc-spotify-shuffle-on,
-.vc-spotify-repeat-context,
-.vc-spotify-repeat-track {
-    color: #1db954;
+.vc-spotify-button svg {
+    height: 24px;
+    width: 24px;
 }
-
-/* Hack to stack icon and bullet */
-.vc-spotify-repeat-track {
-    display: grid;
-    justify-content: center;
-    align-items: center;
+[class*="vc-spotify-shuffle"] > svg,
+[class*="vc-spotify-repeat"] > svg {
+    width: 22px;
+    height: 22px;
 }
-.vc-spotify-repeat-track * {
-    grid-column: 1;
-    grid-row: 1;
+.vc-spotify-button svg path {
+    width: 100%;
+    height: 100%;
+}
+/* .vc-spotify-button:hover {
+    filter: brightness(1.3);
+} */
+
+.vc-spotify-shuffle-on,
+.vc-spotify-repeat-context,
+.vc-spotify-repeat-track,
+.vc-spotify-shuffle-on:hover,
+.vc-spotify-repeat-context:hover,
+.vc-spotify-repeat-track:hover {
+    color: var(--vc-spotify-green);
 }
 
 .vc-spotify-tooltip-text {
@@ -31,6 +52,13 @@
     padding-right: 0.2em;
     max-width: 100%;
 }
+.vc-spotify-repeat-1 {
+    font-size: 70%;
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
 
 .vc-spotify-button-row {
     justify-content: center;
@@ -39,13 +67,13 @@
 #vc-spotify-info-wrapper {
     display: flex;
     flex-direction: row;
+    align-items: center;
     height: 3em;
-    flex-direction: row;
-    gap: 0.2em;
+    gap: 0.5em;
 }
 
 #vc-spotify-info-wrapper img {
-    height: 100%;
+    height: 90%;
     object-fit: contain;
 }
 
@@ -57,7 +85,7 @@
 #vc-spotify-titles {
     display: flex;
     flex-direction: column;
-    padding: 0.2em;
+    padding: 0.2rem;
     justify-content: center;
     align-items: flex-start;
     align-content: flex-start;
@@ -70,9 +98,19 @@
 
 #vc-spotify-song-title {
     color: var(--header-primary);
+    font-size: 14px;
+    font-weight: 600;
+}
+.vc-spotify-ellipoverflow {
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
 }
 
-.vc-spotify-artist {
+.vc-spotify-artist,
+.vc-spotify-album {
+    font-size: 12px;
     text-decoration: none;
     color: var(--header-secondary);
 }
@@ -82,34 +120,62 @@
 }
 
 .vc-spotify-artist:hover,
+#vc-spotify-album-title:hover,
 #vc-spotify-song-title:hover {
     text-decoration: underline;
-    color: var(--interactive-active);
     cursor: pointer;
 }
 
+#vc-spotify-album-image {
+    border-radius: 3px;
+}
+
 #vc-spotify-album-image:hover {
     filter: brightness(1.2);
     cursor: pointer;
 }
 
 #vc-spotify-progress-bar {
-    display: flex;
-    flex-direction: row;
-    color: var(--text-normal);
+    position: relative;
 
-    width: calc(100% - 1em);
-    margin: 0.5em;
-    margin-bottom: 0;
+    color: var(--text-normal);
+    width: 100%;
+    margin: 0.5em 0;
+    margin-bottom: 5px;
 }
 
 #vc-spotify-progress-bar > [class^="slider"] {
     flex-grow: 1;
+    width: 100%;
+    padding: 0 !important;
+}
+
+#vc-spotify-progress-bar > [class^="slider"] [class^="bar-"] {
+    height: 4px !important;
+}
+#vc-spotify-progress-bar > [class^="slider"] [class^="grabber"] {
+    /* these importants are neccessary, it applies a width and height through inline styles */
+    height: 10px !important;
+    width: 10px !important;
+    background-color: var(--interactive-normal);
+    border-color: var(--interactive-normal);
+    color: var(--interactive-normal);
 }
 
 #vc-spotify-progress-text {
     margin: 0;
-    font-size: 80%;
-    /* need to fix or it will constantly grow/shrink due to character width differences */
-    width: 20%;
+}
+
+.vc-spotify-progress-time {
+    font-size: 12px;
+
+    top: 10px;
+    position: absolute;
+}
+
+.vc-spotify-time-left {
+    left: 0;
+}
+.vc-spotify-time-right {
+    right: 0;
 }