Discord Presence

1"use client";
2 
3import * as ProgressPrimitive from "@radix-ui/react-progress";
4 
5import React, { useEffect, useState } from "react";
6 
7import Image from "next/image";
8import { cn } from "@/lib/utils";
9 
10type TDiscord = {
11  userId: string;
12  userName: string;
13  activityDetailClass?: string;
14  activityDescriptionClass?: string;
15  activityImageClassName?: string;
16  progressBarClassName?: string;
17  localTimeClass?: string;
18};
19 
20type TActivityImage = {
21  largeActivityImage: string;
22  smallActivityImage: string;
23  isActivity: boolean;
24  isSpotifyPlaying: boolean;
25};
26 
27/**
28 * visual studio code activity
29 */
30type TActivity = {
31  application_id: string;
32  assets: {
33    large_image: string;
34    large_text: string;
35    small_image: string;
36    small_text: string;
37  };
38  details: string;
39  id: string;
40  name: string;
41  state: string;
42};
43 
44type TDiscordUser = {
45  details: string;
46  discord_status: string;
47  username: string;
48  avatar: string;
49  id: string;
50};
51 
52type TSpotifyData = {
53  album: string;
54  album_art_url: string;
55  artist: string;
56  song: string;
57  timestamps: {
58    start: number;
59    end: number;
60  };
61  track_id: string;
62};
63 
64type TActivityDetail = {
65  detail: string;
66  description: string;
67};
68 
69export const DiscordComponent: React.FC<TDiscord> = ({
70  userId,
71  userName,
72  activityDescriptionClass,
73  activityImageClassName,
74  activityDetailClass,
75  progressBarClassName,
76  localTimeClass,
77}: TDiscord) => {
78  const [isLoading, setIsLoading] = useState<boolean>(true);
79  const [activityImage, setActivityImage] = useState<TActivityImage>({
80    largeActivityImage: "",
81    smallActivityImage: "",
82    isActivity: true,
83    isSpotifyPlaying: false,
84  });
85  const [activityDetais, setActivityDetails] = useState<TActivityDetail>({
86    detail: "",
87    description: "",
88  });
89 
90  const [progress, setProgress] = useState<number>(0);
91  function musicProgress(spotify: Pick<TSpotifyData, "timestamps">) {
92    const totalTime = spotify.timestamps.end - spotify.timestamps.start;
93    const progress =
94      100 - (100 * (spotify.timestamps.end - new Date().getTime())) / totalTime;
95    setProgress(progress);
96  }
97   useDiscord({
98    userId,
99    setIsLoading,
100    setActivityImage,
101    musicProgress,
102    setActivityDetails,
103  });
104 
105  return (
106    <div className="my-6">
107      {isLoading ? (
108        <DiscordSkeleton />
109      ) : (
110        <div className="flex gap-2">
111          <ImageCont
112            activityImage={activityImage}
113            activityImageClassName={activityImageClassName}
114// … truncated