From 4e57ae66f149ca343933b2db23f7803d864f6e8d Mon Sep 17 00:00:00 2001 From: afn Date: Tue, 8 Nov 2022 11:31:36 -0500 Subject: [PATCH] feat(SpotifyControls): prettier design (#194) Co-authored-by: afn Co-authored-by: KraXen72 Co-authored-by: Ven --- .../spotifyControls/PlayerComponent.tsx | 85 ++++++----- src/plugins/spotifyControls/index.tsx | 12 +- src/plugins/spotifyControls/styles.css | 132 +++++++++++++----- 3 files changed, 160 insertions(+), 69 deletions(-) diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx index 15a7ef91..79728352 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) { return ( @@ -78,23 +78,6 @@ function Button(props: React.ButtonHTMLAttributes) { ); } -function TooltipText(props: React.HtmlHTMLAttributes) { - return ( - - {({ onMouseLeave, onMouseEnter }) => ( -

- {props.children} -

- )} -
- ); -} - 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 ( @@ -171,7 +156,13 @@ function SeekBar() { return (
- {msToHuman(position)} + + {msToHuman(position)} + - {msToHuman(duration)} + + {msToHuman(duration)} +
); } @@ -257,26 +254,44 @@ function Info({ track }: { track: Track; }) {
{i}
- SpotifyStore.openExternal(`/track/${track.id}`)} > {track.name} - - + + + by  {track.artists.map((a, i) => ( {a.name} {i !== track.artists.length - 1 && {", "}} ))} - + + + on  + + {track.album.name} + +
); diff --git a/src/plugins/spotifyControls/index.tsx b/src/plugins/spotifyControls/index.tsx index b5cd5c09..18bced9e 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 b6e1aa22..ee704a7b 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; -.vc-spotify-button:hover { - filter: brightness(1.3); -} - -.vc-spotify-shuffle-on, -.vc-spotify-repeat-context, -.vc-spotify-repeat-track { - color: #1db954; -} - -/* Hack to stack icon and bullet */ -.vc-spotify-repeat-track { - display: grid; + border-radius: 100%; + display: flex; justify-content: center; align-items: center; } -.vc-spotify-repeat-track * { - grid-column: 1; - grid-row: 1; +.vc-spotify-button:hover { + color: var(--interactive-hover); + background-color: var(--background-modifier-selected); +} + +.vc-spotify-button svg { + height: 24px; + width: 24px; +} +[class*="vc-spotify-shuffle"] > svg, +[class*="vc-spotify-repeat"] > svg { + width: 22px; + height: 22px; +} +.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; }