Skip to content

Commit

Permalink
minor fix for pause state, fix typing
Browse files Browse the repository at this point in the history
  • Loading branch information
@akellbl4
akellbl4 committed Jun 22, 2022
1 parent 54dee22 commit 2df69f1
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 57 deletions.
9 changes: 5 additions & 4 deletions components/Pause.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { h, Fragment } from "preact";
import { h, Fragment } from 'preact'

export default function Pause() {
return (
Expand All @@ -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,
Expand All @@ -26,5 +27,5 @@ export default function Pause() {
`}</style>
<div className="pause" />
</Fragment>
);
)
}
73 changes: 33 additions & 40 deletions components/Player.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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;
Expand All @@ -61,7 +52,6 @@ export default function Player(props: Props) {
.frame-body {
display: flex;
width: 100%;
overflow: hidden;
flex-wrap: wrap;
align-items: center;
}
Expand All @@ -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);
Expand Down Expand Up @@ -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>
);
)
}
13 changes: 7 additions & 6 deletions components/TrackInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>{`
Expand Down Expand Up @@ -31,5 +32,5 @@ export default function TrackInfo({
<span className="track-info-artist">{` – ${artist}`}</span>
</div>
</Fragment>
);
)
}
23 changes: 16 additions & 7 deletions lib/spotify.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 }
}
Expand Down Expand Up @@ -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') {
Expand Down

1 comment on commit 2df69f1

@vercel
Copy link

@vercel vercel bot commented on 2df69f1 Jun 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

spotify-badge – ./

spotify-badge-akellbl4.vercel.app
spotify-badge.vercel.app
spotify-badge-git-main-akellbl4.vercel.app

Please sign in to comment.