SpotifyControls: improve open in app capabilities & styles
This commit is contained in:
parent
994c3b3c92
commit
93482ac2a5
@ -21,7 +21,6 @@ import "./spotifyStyles.css";
|
|||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { Flex } from "@components/Flex";
|
import { Flex } from "@components/Flex";
|
||||||
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
|
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
|
||||||
import { Link } from "@components/Link";
|
|
||||||
import { debounce } from "@utils/debounce";
|
import { debounce } from "@utils/debounce";
|
||||||
import { openImageModal } from "@utils/discord";
|
import { openImageModal } from "@utils/discord";
|
||||||
import { classes, copyWithToast } from "@utils/misc";
|
import { classes, copyWithToast } from "@utils/misc";
|
||||||
@ -254,6 +253,16 @@ function AlbumContextMenu({ track }: { track: Track; }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function makeLinkProps(name: string, condition: unknown, path: string) {
|
||||||
|
if (!condition) return {};
|
||||||
|
|
||||||
|
return {
|
||||||
|
role: "link",
|
||||||
|
onClick: () => SpotifyStore.openExternal(path),
|
||||||
|
onContextMenu: makeContextMenu(name, path)
|
||||||
|
} satisfies React.HTMLAttributes<HTMLElement>;
|
||||||
|
}
|
||||||
|
|
||||||
function Info({ track }: { track: Track; }) {
|
function Info({ track }: { track: Track; }) {
|
||||||
const img = track?.album?.image;
|
const img = track?.album?.image;
|
||||||
|
|
||||||
@ -289,12 +298,8 @@ function Info({ track }: { track: Track; }) {
|
|||||||
variant="text-sm/semibold"
|
variant="text-sm/semibold"
|
||||||
id={cl("song-title")}
|
id={cl("song-title")}
|
||||||
className={cl("ellipoverflow")}
|
className={cl("ellipoverflow")}
|
||||||
role={track.id ? "link" : undefined}
|
|
||||||
title={track.name}
|
title={track.name}
|
||||||
onClick={track.id ? () => {
|
{...makeLinkProps("Song", track.id, `/track/${track.id}`)}
|
||||||
SpotifyStore.openExternal(`/track/${track.id}`);
|
|
||||||
} : void 0}
|
|
||||||
onContextMenu={track.id ? makeContextMenu("Song", `/track/${track.id}`) : void 0}
|
|
||||||
>
|
>
|
||||||
{track.name}
|
{track.name}
|
||||||
</Forms.FormText>
|
</Forms.FormText>
|
||||||
@ -303,16 +308,14 @@ function Info({ track }: { track: Track; }) {
|
|||||||
by
|
by
|
||||||
{track.artists.map((a, i) => (
|
{track.artists.map((a, i) => (
|
||||||
<React.Fragment key={a.name}>
|
<React.Fragment key={a.name}>
|
||||||
<Link
|
<span
|
||||||
className={cl("artist")}
|
className={cl("artist")}
|
||||||
disabled={!a.id}
|
|
||||||
href={`https://open.spotify.com/artist/${a.id}`}
|
|
||||||
style={{ fontSize: "inherit" }}
|
style={{ fontSize: "inherit" }}
|
||||||
title={a.name}
|
title={a.name}
|
||||||
onContextMenu={makeContextMenu("Artist", `/artist/${a.id}`)}
|
{...makeLinkProps("Artist", a.id, `/artist/${a.id}`)}
|
||||||
>
|
>
|
||||||
{a.name}
|
{a.name}
|
||||||
</Link>
|
</span>
|
||||||
{i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>}
|
{i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
@ -321,17 +324,15 @@ function Info({ track }: { track: Track; }) {
|
|||||||
{track.album.name && (
|
{track.album.name && (
|
||||||
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
|
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
|
||||||
on
|
on
|
||||||
<Link id={cl("album-title")}
|
<span
|
||||||
href={`https://open.spotify.com/album/${track.album.id}`}
|
id={cl("album-title")}
|
||||||
target="_blank"
|
|
||||||
className={cl("album")}
|
className={cl("album")}
|
||||||
disabled={!track.album.id}
|
|
||||||
style={{ fontSize: "inherit" }}
|
style={{ fontSize: "inherit" }}
|
||||||
title={track.album.name}
|
title={track.album.name}
|
||||||
onContextMenu={makeContextMenu("Album", `/album/${track.album.id}`)}
|
{...makeLinkProps("Album", track.album.id, `/album/${track.album.id}`)}
|
||||||
>
|
>
|
||||||
{track.album.name}
|
{track.album.name}
|
||||||
</Link>
|
</span>
|
||||||
</Forms.FormText>
|
</Forms.FormText>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -131,8 +131,8 @@
|
|||||||
color: var(--header-secondary);
|
color: var(--header-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vc-spotify-artist:hover,
|
.vc-spotify-artist[role="link"]:hover,
|
||||||
#vc-spotify-album-title:hover,
|
#vc-spotify-album-title[role="link"]:hover,
|
||||||
#vc-spotify-song-title[role="link"]:hover {
|
#vc-spotify-song-title[role="link"]:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
Loading…
Reference in New Issue
Block a user