Jacopo De Gattis

Jacopo De Gattis

// Name: spotify-playing
// Description: Show currently playing spotify track
// Author: Jacopo De Gattis
import "@johnlindquist/kit"
import { WidgetAPI } from "@johnlindquist/kit/types/pro";
const spotify = await npm("spotify-node-applescript")
const playing = false;
const state: Playback = {
name: "",
artist: "",
artwork_url: ""
}
interface Playback {
name: string,
artist: string,
artwork_url: string,
}
const wgt: WidgetAPI = await widget(`
<div class="px-1 flex flex-row w-full justify-between">
<div class="cover-img" v-bind:style="{'backgroundImage': state.artwork_url ? 'url(' + state.artwork_url + ')' : 'url(' + fallback_icon + ')' }"></div>
<div class="flex flex-row justify-start track-infos left-container">
<div class="flex flex-col ml-4 justify-center">
<pre class="font-inter">{{state.name ? state.name : "No music playing"}}</pre>
<pre class="text-xs">{{state.artist && state.artist}}</pre>
</div>
</div>
<div class="flex justify-center items-center btn-container">
<button v-if="state.name" id="play-pause" class="play-pause-btn flex justify-center items-center">
<img id="play-pause-img" v-bind:src="playing ? pause_icon : play_icon" />
</button>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;700&display=swap');
* {
user-select: none;
}
.cover-img {
width: 75px;
height: 75px;
border-radius: 10px;
box-shadow: 7px 7px 5px black;
background-size: 100%;
transition: background-image 1s ease-in;
}
.left-container {
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 20px;
}
.track-infos img {
border-radius: 10px;
box-shadow: 7px 7px 5px black;
}
pre:first-child {
font-family: 'Inter';
font-weight: bold;
font-size: 100%;
}
pre:last-child {
font-family: 'Inter';
font-weight: light;
font-size: 3.0vw;
}
svg {
margin-top: 20px;
}
.btn-container {
margin-right: 20px;
}
.play-pause-btn {
padding: 5px;
background-color: #1ED760;
border-radius: 70%;
height: 50px;
width: 50px;
transition-duration: 0.3s;
box-shadow: 7px 7px 5px black;
}
.play-pause-btn:hover {
transform: scale(1.05);
}
</style>
`, {
state: {
pause_icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAHRJREFUSEtjZKAxYKSx+QwDasFzBgYGCSQfZjAwMMyE8kHs6UhyLxgYGCSxhQY+H/xH09DIwMDQABUD0fVo8ljNGrUAOZRGg4hhNBVh5MPRjAYOktGiYnAXFfgqnHQGBoYZSM4HqZUitcKhSnU9oHUyVXwAAOhlOBlZoVRaAAAAAElFTkSuQmCC",
play_icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAMlJREFUSEvV1UFqAkEQRuHP0+kRvIR7CYiucgUXEcG48hSCRxA8ggQXbgK6SUAZ6AZFcRzHQux9v0dVV//VEHwawXwvEbQwwQif2NWp8loFA/QTdI0PfD8qKRNk7hwdrKqK7hUU3D8M0cPvvaIqgsz8QRdTHMpEjwgyc5HatrwlqSMouP8Yp0HYXhPVFWTmJrWtGO+ztj1LkEVtzE4reRtBWItCHzlsTMM+WmhUhIVdSFw3U/5/pYWzLwu0qllUh3dx9yU7+akVHAG+vzwZybfc1AAAAABJRU5ErkJggg==",
fallback_icon: "https://community.spotify.com/t5/image/serverpage/image-id/55829iC2AD64ADB887E2A5/image-size/large?v=v2&px=999"
}
})
wgt.onClick((event: any) => {
if (["play-pause", "play-pause-img"].includes(event.targetId)) {
spotify.playPause((a) => {
wgt.setState({ playing: !playing })
});
}
})
const loop = () => {
wgt.setSize(400, 85)
setInterval(async () => {
spotify.isRunning((err, isRunning) => {
if (!isRunning) return
spotify.getTrack((err: any, track: any) => {
if (err) return
spotify.getState((err, state) => {
if (err) return
wgt.setState({
state: track,
playing: state.state === "playing" ? true : false
})
})
})
})
}, 1000)
}
wgt.onResized(() => wgt.setSize(400, 85))
loop()