45 |
48 | )
49 | }
50 |
51 | // Loading
52 | return Error:
46 |{state.error}
47 | Loading...
53 | } 54 | 55 | export default Callback 56 | -------------------------------------------------------------------------------- /pages/components/Error.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Error = () => ( 4 |
5 |
10 | )
11 |
12 | export default Error
13 |
--------------------------------------------------------------------------------
/pages/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Footer = () => (
4 |
6 |
9 | Sorry
I am not currently listening to music, come back a bit later 7 | or visit my Github. 8 |Built with 💖 in Nice, France 🌴
5 | )
6 |
7 | export default Footer
8 |
--------------------------------------------------------------------------------
/pages/components/Loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Loading = () => (
4 |
5 |
7 | )
8 |
9 | export default Loading
10 |
--------------------------------------------------------------------------------
/pages/components/Progress.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const formatTime = (ms: number) => {
4 | var minutes = Math.floor(ms / 60000)
5 | var seconds = Number(((ms % 60000) / 1000).toFixed(0))
6 | return minutes + ':' + (seconds < 10 ? '0' : '') + seconds
7 | }
8 |
9 | type Props = {
10 | progress: number
11 | progressMs: number
12 | durationMs: number
13 | }
14 |
15 | const Progress = ({ progress, progressMs, durationMs }: Props) => (
16 | Loading...
6 |
17 |
18 |
23 | )
24 |
25 | export default Progress
26 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { NextPageContext } from 'next'
3 | import Head from 'next/head'
4 | import fetch from 'isomorphic-unfetch'
5 | import GithubCorner from 'react-github-corner'
6 |
7 | import Footer from './components/Footer'
8 | import Error from './components/Error'
9 | import Loading from './components/Loading'
10 | import Progress from './components/Progress'
11 |
12 | import { useInterval } from '../util/hooks'
13 | import { Song } from '../typings/song'
14 |
15 | type Props = {
16 | song: Song
17 | isError: boolean
18 | progressMs: number
19 | }
20 |
21 | const getInitialProgress = (
22 | timestamp: number,
23 | progress_ms: number,
24 | isPlaying: boolean
25 | ) => {
26 | if (!isPlaying) return 0
27 | const time_diff = new Date().getTime() - new Date(timestamp).getTime()
28 | return time_diff + progress_ms
29 | }
30 |
31 | const Home = (props: Props) => {
32 | const [isLoading, setIsLoading] = React.useState(false)
33 | const [isError, setIsError] = React.useState(props.isError)
34 | const [song, setSong] = React.useState(props.song)
35 | const [progressMs, setProgressMs] = React.useState(props.progressMs)
36 | const [progress, setProgress] = React.useState(0)
37 |
38 | const getPlayingSong = React.useCallback(async (): Promise<
39 | | {
40 | error: boolean
41 | song?: Song
42 | progressMs?: number
43 | }
44 | | undefined
45 | > => {
46 | try {
47 | const data = await fetch('/api/get-spotify-current')
48 | .then((res) => res.json())
49 | .then((data) => {
50 | return {
51 | ...data,
52 | // expire_at: new Date(data.expire_at),
53 | } as Song
54 | })
55 |
56 | if (data.isPlaying) {
57 | return {
58 | error: false,
59 | song: data,
60 | progressMs: getInitialProgress(
61 | data.timestamp,
62 | data.progress_ms,
63 | data.isPlaying
64 | ),
65 | }
66 | }
67 | } catch (err) {
68 | return { error: true }
69 | }
70 | }, [])
71 |
72 | useInterval(() => {
73 | if (!song || !song.isPlaying) return
74 |
75 | if (progressMs < song.duration_ms) {
76 | setProgressMs(
77 | getInitialProgress(song.timestamp, song.progress_ms, song.isPlaying)
78 | )
79 | }
80 | }, 1000)
81 |
82 | React.useEffect(() => {
83 | if (song) {
84 | setProgress(Math.ceil((100 * progressMs) / song.duration_ms))
85 | }
86 | }, [song, progressMs])
87 |
88 | React.useEffect(() => {
89 | if (progress >= 100) {
90 | setIsError(false)
91 | setIsLoading(true)
92 | if (isLoading) return
93 |
94 | getPlayingSong().then((data) => {
95 | if (data) {
96 | setIsError(data.error)
97 | data.song && setSong(data.song)
98 | setProgressMs(data.progressMs || 0)
99 | }
100 | setIsLoading(false)
101 | })
102 | }
103 | }, [getPlayingSong, progress, isLoading])
104 |
105 | if (isError) return
19 |
22 | {formatTime(progressMs)}
20 | {formatTime(durationMs)}
21 |
123 |
141 |
147 |
148 | )
149 | }
150 |
151 | Home.getInitialProps = async ({ req }: NextPageContext) => {
152 | try {
153 | const protocol = req?.headers['x-forwarded-proto'] || 'http'
154 | const baseUrl = req ? `${protocol}://${req.headers.host}` : ''
155 | const song = await fetch(baseUrl + '/api/get-spotify-current')
156 | .then((res) => res.json())
157 | .then((data) => {
158 | return {
159 | ...data,
160 | // expire_at: new Date(data.expire_at),
161 | } as Song
162 | })
163 |
164 | return {
165 | song,
166 | progressMs: getInitialProgress(
167 | song.timestamp,
168 | song.progress_ms,
169 | song.isPlaying
170 | ),
171 | }
172 | } catch (err) {
173 | return { isLoading: false, isError: true }
174 | }
175 | }
176 |
177 | export default Home
178 |
--------------------------------------------------------------------------------
/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Link from 'next/link'
3 |
4 | type State = {
5 | loginUrl: string
6 | loading: boolean
7 | error: string | null
8 | }
9 |
10 | const Login = () => {
11 | const [state, setState] = React.useState
124 |
125 | 
126 |
127 |
139 |
140 |
128 |
138 | {song.name}
129 | {song.artist}
130 | {song.isPlaying && (
131 |
136 | )}
137 |
43 |
46 | )
47 | }
48 |
49 | // Main
50 | return (
51 | Error:
44 |{state.error}
45 |
52 | {state.loading ? (
53 |
60 | )
61 | }
62 |
63 | export default Login
64 |
--------------------------------------------------------------------------------
/pages/styles/index.scss:
--------------------------------------------------------------------------------
1 | $maxSmall: 200px;
2 | $minSmall: 321px;
3 | $spacingMd: 8px;
4 | $spacingLg: 12px;
5 |
6 | body {
7 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
8 | Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
9 | Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
10 | line-height: 1.1;
11 | letter-spacing: -0.05em;
12 | margin: 0;
13 | }
14 |
15 | .background {
16 | z-index: -1;
17 | position: absolute;
18 | top: 0;
19 | width: 100vw;
20 | min-height: 100vh;
21 | opacity: 0.4;
22 | background-repeat: repeat;
23 | background: rgba(0, 0, 0, 0) url('/white_carbon.png');
24 | transition: background-color 1s;
25 | }
26 |
27 | .background:before {
28 | z-index: 0;
29 | position: absolute;
30 | top: 0;
31 | right: 0;
32 | bottom: 0;
33 | left: 0;
34 | background-color: inherit;
35 | content: ' ';
36 | }
37 |
38 | .github-corner {
39 | z-index: 1;
40 | }
41 |
42 | .container {
43 | z-index: 1;
44 | display: flex;
45 | flex-direction: column;
46 | justify-content: center;
47 | align-items: center;
48 | height: 100vh;
49 | text-align: center;
50 | }
51 |
52 | .image-container {
53 | z-index: 1;
54 | display: flex;
55 | flex-direction: column;
56 | text-align: left;
57 | justify-content: flex-start;
58 | }
59 |
60 | .image {
61 | width: 100%;
62 | min-width: 320px;
63 | transition: transform 0.01s;
64 | transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
65 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
66 | @media screen and (min-width: $minSmall) {
67 | width: 320px;
68 | }
69 |
70 | &:hover {
71 | cursor: pointer;
72 | transform: scale(1.05);
73 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
74 | }
75 | }
76 |
77 | .info {
78 | text-align: center;
79 | width: 100%;
80 | min-width: 320px;
81 | @media screen and (min-width: $minSmall) {
82 | width: 320px;
83 | }
84 | }
85 |
86 | .name {
87 | margin-top: $spacingLg;
88 | font-weight: bold;
89 | font-size: 18px;
90 | }
91 |
92 | .artist {
93 | margin-top: $spacingMd;
94 | font-size: 16px;
95 | }
96 |
97 | .progress-container {
98 | border-radius: 2px;
99 | margin-top: 2 * $spacingLg;
100 | width: 100%;
101 | height: 3px;
102 | background-color: gray;
103 | }
104 |
105 | .progress {
106 | border-radius: 2px;
107 | height: 3px;
108 | background-color: white;
109 | transition: width 1s linear;
110 | }
111 |
112 | .timer {
113 | margin-top: $spacingMd;
114 | display: flex;
115 | flex-flow: wrap;
116 | justify-content: space-between;
117 | }
118 |
119 | .footer {
120 | position: absolute;
121 | z-index: 1;
122 | bottom: 2 * $spacingLg;
123 | font-size: 1.2em;
124 | font-weight: 400;
125 | margin: 10vmin 0 0;
126 | }
127 |
128 | .login {
129 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
130 | padding: 0;
131 | display: flex;
132 | justify-content: center;
133 | align-items: center;
134 | height: 100vh;
135 | }
136 |
137 | .loginLink {
138 | background-color: #1db954;
139 | box-shadow: 0 5px 0 #137736;
140 | color: white;
141 | padding: 1em 1.5em;
142 | position: relative;
143 | text-decoration: none;
144 | text-transform: uppercase;
145 |
146 | &:hover {
147 | background-color: #0f612c;
148 | }
149 |
150 | &:active {
151 | box-shadow: none;
152 | top: 5px;
153 | }
154 | }
155 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raed667/spotify-nextjs-currently-playing/3e40b6747c57de757a42c28ea697f5bdad5699c3/public/favicon.ico
--------------------------------------------------------------------------------
/public/static/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Raed's Spotify",
3 | "theme_color": "#9091d0",
4 | "background_color": "#2196f3",
5 | "display": "browser",
6 | "scope": "/",
7 | "start_url": "/"
8 | }
--------------------------------------------------------------------------------
/public/white_carbon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raed667/spotify-nextjs-currently-playing/3e40b6747c57de757a42c28ea697f5bdad5699c3/public/white_carbon.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "jsx": "preserve",
20 | "incremental": true
21 | },
22 | "exclude": [
23 | "node_modules"
24 | ],
25 | "include": [
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/typings/song.ts:
--------------------------------------------------------------------------------
1 | export type RawSong = {
2 | currently_playing_type: string
3 | progress_ms: number
4 | item: {
5 | id: string
6 | name: string
7 | duration_ms: number
8 | external_urls: {
9 | spotify: string
10 | }
11 | preview_url: string
12 | artists: {
13 | name: string
14 | }[]
15 | album: {
16 | images: {
17 | url: string
18 | }[]
19 | }
20 | }
21 | }
22 |
23 | export type Song = {
24 | id: string
25 | name: string
26 | progress_ms: number
27 | duration_ms: number
28 | url: string
29 | preview_url: string
30 | artist: string
31 | image: string
32 | expire_at: Date | string
33 | timestamp: number
34 | backgroundColor: string
35 | isPlaying: boolean
36 | }
37 |
--------------------------------------------------------------------------------
/util/helpers.ts:
--------------------------------------------------------------------------------
1 | import memoize from 'lodash.memoize'
2 |
3 | export const idToColor = memoize((id) => {
4 | let hash = 0
5 | if (id.length === 0) return '#FFF'
6 | for (let i = 0; i < id.length; i++) {
7 | hash = id.charCodeAt(i) + ((hash << 5) - hash)
8 | hash = hash & hash
9 | }
10 | const rgb = [0, 0, 0]
11 | for (let i = 0; i < 3; i++) {
12 | rgb[i] = (hash >> (i * 8)) & 255
13 | }
14 | return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.2)`
15 | })
16 |
--------------------------------------------------------------------------------
/util/hooks.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const useInterval = (callback: Function, delay: number) => {
4 | const savedCallback = React.useRefLoading...
54 | ) : ( 55 | 56 | LOG IN 57 | 58 | )} 59 |