From 2df69f12f9a0a2a06e4dc66ecb9e9bc9a45429de Mon Sep 17 00:00:00 2001
From: Paul Mineev <paul@mineev.me>
Date: Tue, 21 Jun 2022 23:32:29 -0700
Subject: [PATCH] minor fix for pause state, fix typing

---
 components/Pause.tsx     |  9 ++---
 components/Player.tsx    | 73 ++++++++++++++++++----------------------
 components/TrackInfo.tsx | 13 +++----
 lib/spotify.ts           | 23 +++++++++----
 4 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/components/Pause.tsx b/components/Pause.tsx
index de4eb53..f8b1d3f 100644
--- a/components/Pause.tsx
+++ b/components/Pause.tsx
@@ -1,4 +1,4 @@
-import { h, Fragment } from "preact";
+import { h, Fragment } from 'preact'
 
 export default function Pause() {
 	return (
@@ -10,8 +10,9 @@ export default function Pause() {
 					align-items: center;
 					box-sizing: border-box;
 					border: 1px solid #ccc;
-					width: 100%;
-					height: 100%;
+					width: 22px;
+					height: 22px;
+					margin: -1px;
 					border-radius: 50%;
 				}
 				.pause:before,
@@ -26,5 +27,5 @@ export default function Pause() {
 			`}</style>
 			<div className="pause" />
 		</Fragment>
-	);
+	)
 }
diff --git a/components/Player.tsx b/components/Player.tsx
index a59d9ac..c740e66 100644
--- a/components/Player.tsx
+++ b/components/Player.tsx
@@ -1,30 +1,21 @@
-import { Fragment, h } from "preact";
+import { h } from 'preact'
 
-import Pause from "./Pause";
-import Cover from "./Cover";
-import Progress from "./Progress";
-import Equalizer from "./Equalizer";
-import TrackInfo from "./TrackInfo";
-import SpotifyLogo from "./SpotifyLogo";
-import { RefreshIcon } from "./RefreshIcon";
+import Pause from './Pause'
+import Cover from './Cover'
+import Progress from './Progress'
+import Equalizer from './Equalizer'
+import TrackInfo from './TrackInfo'
+import SpotifyLogo from './SpotifyLogo'
+import { RefreshIcon } from './RefreshIcon'
+import { TrackInfo as TTrackInfo } from '../lib/spotify'
 
-const width = 540;
-const height = 52;
+const width = 540
+const height = 52
 
-export type Props = {
-	track?: string;
-	artist?: string;
-	duration?: number;
-	progress?: number | null;
-	isPlaying?: boolean;
-	coverUrl?: string;
-};
+export type Props = TTrackInfo | ({ isPlaying: false } & Partial<Omit<TTrackInfo, 'isPlaying'>>)
 
-export default function Player(props: Props) {
-	const { track, artist, coverUrl, progress, duration } = props;
-	const hasTrack = track && artist;
-	const isPlaying = Boolean(props.isPlaying);
-	const hasProgress = isPlaying && typeof progress === "number" && typeof duration === "number";
+export default function Player(p: Props) {
+	const hasTrack = typeof p.artist === 'string' && typeof p.track === 'string'
 
 	return (
 		<svg
@@ -37,7 +28,7 @@ export default function Player(props: Props) {
 			<foreignObject width={width} height={height}>
 				<style>{`
 					.frame {
-						--delay: ${hasProgress ? duration - progress : 0}ms;
+						--delay: ${p.isPlaying ? p.duration - p.progress : 0}ms;
 
 						display: flex;
 						box-sizing: border-box;
@@ -61,7 +52,6 @@ export default function Player(props: Props) {
 					.frame-body {
 						display: flex;
 						width: 100%;
-						overflow: hidden;
 						flex-wrap: wrap;
 						align-items: center;
 					}
@@ -75,14 +65,16 @@ export default function Player(props: Props) {
 						animation: shift-5 0.2s;
 						animation-fill-mode: forwards;
 						animation-delay: var(--delay);
-						animation-play-state: ${hasProgress ? "running" : "paused"};
+						animation-play-state: ${p.isPlaying ? 'running' : 'paused'};
 					}
 					.frame-body-status {
 						margin-left: 12px;
 						width: 20px;
 						height: 20px;
-						overflow: hidden;
 						flex-shrink: 0;
+					}
+					.frame-body-status_playing {
+						overflow: hidden;
 						animation: shift-5 0.2s;
 						animation-fill-mode: forwards;
 						animation-delay: var(--delay);
@@ -127,34 +119,35 @@ export default function Player(props: Props) {
 						}
 					}
 				`}</style>
-				<div className="frame" {...{ xmlns: "http://www.w3.org/1999/xhtml" }}>
+				<div className="frame" {...{ xmlns: 'http://www.w3.org/1999/xhtml' }}>
 					<div className="frame-image">
-						{coverUrl ? <Cover playing={isPlaying} src={coverUrl} /> : <SpotifyLogo />}
+						{p.coverUrl ? <Cover playing={p.isPlaying} src={p.coverUrl} /> : <SpotifyLogo />}
 					</div>
 					<div className="frame-body">
 						<div className="frame-body-content">
-							<TrackInfo artist={artist} track={track} />
+							<TrackInfo artist={p.artist} track={p.track} />
 						</div>
-						{hasTrack && (
-							<div className="frame-body-status">
-								{isPlaying ? (
+						{hasTrack &&
+							(p.isPlaying ? (
+								<div className="frame-body-status frame-body-status_playing">
 									<div className="frame-body-status-playing">
 										<RefreshIcon />
 										<Equalizer />
 									</div>
-								) : (
+								</div>
+							) : (
+								<div className="frame-body-status">
 									<Pause />
-								)}
-							</div>
-						)}
-						{hasProgress && (
+								</div>
+							))}
+						{p.isPlaying && (
 							<div className="frame-progress">
-								<Progress playing={isPlaying} progress={progress} duration={duration} />
+								<Progress playing={p.isPlaying} progress={p.progress} duration={p.duration} />
 							</div>
 						)}
 					</div>
 				</div>
 			</foreignObject>
 		</svg>
-	);
+	)
 }
diff --git a/components/TrackInfo.tsx b/components/TrackInfo.tsx
index 43616df..0415533 100644
--- a/components/TrackInfo.tsx
+++ b/components/TrackInfo.tsx
@@ -1,9 +1,10 @@
-import { h, Fragment } from "preact";
+import { h, Fragment } from 'preact'
 
-export default function TrackInfo({
-	track = "Not playing",
-	artist = "Spotify",
-}) {
+type Props = {
+	track?: string
+	artist?: string
+}
+export default function TrackInfo({ track = 'Not playing', artist = 'Spotify' }: Props) {
 	return (
 		<Fragment>
 			<style>{`
@@ -31,5 +32,5 @@ export default function TrackInfo({
 				<span className="track-info-artist">{` – ${artist}`}</span>
 			</div>
 		</Fragment>
-	);
+	)
 }
diff --git a/lib/spotify.ts b/lib/spotify.ts
index 7adce23..5c1a3e0 100644
--- a/lib/spotify.ts
+++ b/lib/spotify.ts
@@ -8,8 +8,8 @@ import {
 	CLIENT_SECRET,
 } from '../consts'
 
-type TrackInfo = {
-	progress: number | null
+export type TrackInfo = {
+	progress: number
 	duration: number
 	track: string
 	artist: string
@@ -40,16 +40,23 @@ async function getAccessToken() {
 }
 
 function formatTrackInfo(trackInfo: SpotifyApi.CurrentlyPlayingResponse): TrackInfo | null {
-	const { progress_ms: progress, item, is_playing: isPlaying = false } = trackInfo
+	const { progress_ms, item, is_playing: isPlaying = false, currently_playing_type } = trackInfo
 
-	if (item === null) {
+	if (item === null || currently_playing_type !== 'track') {
 		return null
 	}
 
-	const { duration_ms: duration, name: track, artists = [], album, external_urls } = item
+	const {
+		duration_ms: duration,
+		name: track,
+		artists = [],
+		album,
+		external_urls,
+	} = item as SpotifyApi.TrackObjectFull
 	const artist = artists.map(({ name }) => name).join(', ')
 	const coverUrl = album.images[album.images.length - 1]?.url
 	const url = external_urls.spotify
+	const progress = progress_ms ?? 0
 
 	return { progress, duration, track, artist, isPlaying, coverUrl, url }
 }
@@ -81,11 +88,13 @@ async function getCoverBase64(url: string) {
 
 export async function getNowPlaying(
 	{ coverFormat }: { coverFormat: 'url' | 'base64' } = { coverFormat: 'url' }
-) {
+): Promise<TrackInfo | { isPlaying: false }> {
 	const track = await getCurrentTrack()
 
 	if (track === null) {
-		return {}
+		return {
+			isPlaying: false,
+		}
 	}
 
 	if (coverFormat === 'base64') {