|
|
@ -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>
|
|
|
|