├── .gitignore
├── next-env.d.ts
├── package.json
├── postcss.config.js
├── src
├── hooks
│ └── throttle.ts
├── layouts
│ └── centered.tsx
├── pages
│ ├── [id].tsx
│ └── _app.tsx
└── styles
│ └── globals.css
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | .env
4 | dist
5 | .DS_Store
6 | .idea
7 | .vscode
8 | yarn-error.log
9 | hop.yml
10 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "obs-spotify",
3 | "version": "1.0.0",
4 | "repository": "git@github.com:alii/obs-spotify.git",
5 | "author": "Alistair Smith ",
6 | "scripts": {
7 | "dev": "next",
8 | "build": "next build",
9 | "start": "next start"
10 | },
11 | "dependencies": {
12 | "next": "^12.2.5",
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-spinners": "^0.13.4",
16 | "use-lanyard": "^1.2.0",
17 | "zod": "^3.19.0"
18 | },
19 | "devDependencies": {
20 | "@types/node": "^18.7.16",
21 | "@types/react-dom": "^18.0.6",
22 | "autoprefixer": "^10.4.8",
23 | "postcss": "^8.4.16",
24 | "tailwindcss": "^3.1.8",
25 | "typescript": "^4.8.2"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/src/hooks/throttle.ts:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useEffect } from "react";
2 |
3 | export function useThrottle(value: T, limit = 1000) {
4 | const [throttledValue, setThrottledValue] = useState(value);
5 | const lastRan = useRef(Date.now());
6 |
7 | useEffect(() => {
8 | const handler = setTimeout(() => {
9 | if (Date.now() - lastRan.current >= limit) {
10 | setThrottledValue(value);
11 | lastRan.current = Date.now();
12 | }
13 | }, limit - (Date.now() - lastRan.current));
14 |
15 | return () => {
16 | clearTimeout(handler);
17 | };
18 | }, [value, limit]);
19 |
20 | return throttledValue;
21 | }
22 |
--------------------------------------------------------------------------------
/src/layouts/centered.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren } from "react";
2 |
3 | export function Centered({ children }: PropsWithChildren) {
4 | return {children}
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/[id].tsx:
--------------------------------------------------------------------------------
1 | import { GetServerSideProps } from "next";
2 | import { z } from "zod";
3 | import { useLanyardWs } from "use-lanyard";
4 | import { RotateLoader } from "react-spinners";
5 | import { useThrottle } from "../hooks/throttle";
6 | import { Centered } from "../layouts/centered";
7 | import { useEffect, useState } from "react";
8 |
9 | interface Props {
10 | userId: string;
11 | }
12 |
13 | function IndexPage(props: Props) {
14 | const data = useThrottle(useLanyardWs(props.userId));
15 | const [, rerender] = useState({});
16 |
17 | useEffect(() => {
18 | const interval = setInterval(() => {
19 | rerender({});
20 | }, 1000);
21 |
22 | return () => {
23 | clearInterval(interval);
24 | };
25 | }, []);
26 |
27 | if (!data) {
28 | // Loading state
29 | return (
30 |
31 |
32 |
33 | );
34 | }
35 |
36 | if (!data.spotify) {
37 | return null;
38 | }
39 |
40 | const total = data.spotify.timestamps.end - data.spotify.timestamps.start;
41 | const progress = 100 - (100 * (data.spotify.timestamps.end - new Date().getTime())) / total;
42 |
43 | return (
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
{data.spotify.song}
53 |
{data.spotify.artist}
54 |
55 |
56 |
63 |
64 |
65 |