The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
update spotify page to show curr playback
+21
-14
+13
-13
app/profile/spotify/page.tsx
+13
-13
app/profile/spotify/page.tsx
···
1
1
"use client";
2
+
import Image from "next/image";
2
3
import Link from "next/link";
3
4
import { useEffect, useState } from "react";
4
5
import { BsSpotify } from "react-icons/bs";
5
6
import { HiIdentification } from "react-icons/hi";
6
7
7
8
import { userStore } from "@/common/user";
9
+
import Box from "@/components/box";
8
10
import Highlight from "@/components/discord/markdown";
9
11
import DiscordMessage from "@/components/discord/message";
10
12
import { ScreenMessage } from "@/components/screen-message";
···
106
108
107
109
<div className="w-full border-b dark:border-wamellow-light border-wamellow-100-light md:hidden mt-6" />
108
110
109
-
<div className="my-6 flex flex-col gap-6 md:dark:bg-wamellow md:bg-wamellow-100 rounded-xl md:p-6 overflow-hidden">
111
+
<Box className="mt-6 flex flex-col gap-6 overflow-hidden" small>
110
112
111
113
<DiscordMessage
112
114
mode={"DARK"}
···
117
119
}}
118
120
>
119
121
120
-
<Highlight mode={"DARK"} text="wm play [https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT]()" />
122
+
<Highlight mode={"DARK"} text={`wm play [https://open.spotify.com/track/${spotify.playing?.id || "4cOdK2wGLETKBW3PvgPWqT"}](#)`} />
121
123
122
124
</DiscordMessage>
123
125
<DiscordMessage
···
129
131
}}
130
132
>
131
133
132
-
<div className="flex gap-1.5 h-3 mt-2 cursor-text">
133
-
<div className="dark:bg-neutral-600/90 bg-neutral-400/90 h-full w-12 rounded-full" />
134
-
<div className="dark:bg-neutral-600/90 bg-neutral-400/90 h-full w-24 rounded-full" />
135
-
<div className="dark:bg-blue-600/90 bg-blue-400/90 h-full w-20 rounded-full" />
136
-
<div className="dark:bg-neutral-600/90 bg-neutral-400/90 h-full w-8 rounded-full" />
137
-
<div className="dark:bg-neutral-500/90 h-full w-16 rounded-full" />
134
+
<div className="flex items-center gap-1">
135
+
<Image src="https://cdn.discordapp.com/emojis/845043307351900183.gif?size=44&quality=lossless" height={18} width={18} alt="" />
136
+
<Highlight mode={"DARK"} text={`@${user.username} now playing [${spotify.playing?.name || "Never Gonna Give You Up"}](#) for **${spotify.playing?.duration || "3 minutes 33 seconds"}**`} />
138
137
</div>
138
+
139
139
<div className="flex flex-row gap-1.5 h-8 mt-3">
140
140
<div className="dark:border-neutral-600/90 border-neutral-400/90 border-2 h-full w-32 py-2.5 px-4 rounded-md flex items-center justify-center cursor-pointer">
141
141
<div className="dark:bg-neutral-600/90 bg-neutral-400/90 h-full w-full rounded-full" />
···
171
171
}}
172
172
>
173
173
174
-
<div className="flex flex-row gap-1.5 h-3 mt-2 cursor-text">
175
-
<div className="dark:bg-neutral-700/90 bg-neutral-300/90 h-full w-12 rounded-full" />
176
-
<div className="dark:bg-neutral-700/90 bg-neutral-300/90 h-full w-20 rounded-full" />
177
-
<div className="dark:bg-blue-600/90 bg-blue-400/90 h-full w-20 rounded-full" />
174
+
<div className="flex items-center gap-1">
175
+
<Image src="https://cdn.discordapp.com/emojis/845043307351900183.gif?size=44&quality=lossless" height={18} width={18} alt="" />
176
+
<Highlight mode={"DARK"} text={`@${user.username} is playing [${spotify.playing?.name || "Never Gonna Give You Up"}](#) by ${spotify.playing?.artists || "[Rick Astley]()"}`} />
178
177
</div>
178
+
179
179
<div className="flex gap-1.5 h-8 mt-3">
180
180
<div className="dark:border-neutral-700/90 border-neutral-300/90 border-2 h-full w-32 py-2.5 px-4 rounded-md flex items-center justify-center cursor-pointer">
181
181
<div className="dark:bg-neutral-700/90 bg-neutral-300/90 h-full w-full rounded-full" />
···
190
190
191
191
</DiscordMessage>
192
192
193
-
</div>
193
+
</Box>
194
194
195
195
</>
196
196
}
+2
-1
components/box.tsx
+2
-1
components/box.tsx
···
12
12
export default function Box({
13
13
children,
14
14
className,
15
+
small = false,
15
16
border = true,
16
17
...props
17
18
}: Props): JSX.Element {
18
19
return (
19
20
<div
20
-
className={cn("bg-wamellow rounded-lg py-6 px-8 md:py-10 md:px-16", border && "border-wamellow-alpha border", className)}
21
+
className={cn("bg-wamellow rounded-lg py-6 px-8 md:py-10 md:px-16", small && "py-4 px-6 md:py-8 md:px-10", border && "border-wamellow-alpha border", className)}
21
22
{...props}
22
23
>
23
24
{children}
+6
typings.ts
+6
typings.ts
···
291
291
export interface ApiV1UsersMeConnectionsSpotifyGetResponse {
292
292
displayName: string;
293
293
avatar: string | null;
294
+
playing: {
295
+
name: string;
296
+
id: string;
297
+
artists: string;
298
+
duration: string;
299
+
} | undefined;
294
300
}
295
301
296
302
export interface ApiV1GuildsModulesTagsGetResponse {