brandon/spotify-gui.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: brandon:0050b22a7b3c68b3969093ee52b190ca4e0b600c
Branches Tags
brandon:master
..
compare: brandon:d65c436e1eeb500b45d7f43ceb4447a42542e292
Branches Tags
brandon:master

2 Commits
0050b22a7b ... d65c436e1e

Author SHA1 Message Date
Brandon4466
d65c436e1e Merge branch 'master' of https://git.bbrunson.com/brandon/spotify-gui.js 2024-05-07 13:07:45 -07:00
Brandon4466
49cd2b8735 added animated fading background 2024-05-07 13:06:21 -07:00
3 changed files with 54 additions and 33 deletions
Expand all files Collapse all files

2
.syncedlyrics/musixmatch_token.json
View File

@@ -1 +1 @@
{"token": "240425a54f5df91735a14b241dcfb1e5df28f942d95b9cad8ea6a4", "expiration_time": 1714086845} {"token": "240507dc1c1d721b422f329d191594415da1e4aec72fa0405c547e", "expiration_time": 1715112558}

49
spotifycontroller.py
View File

@@ -104,31 +104,32 @@ def appdata():
currently_playing = requests.get("https://api.spotify.com/v1/me/player/currently-playing", headers=user_headers) currently_playing = requests.get("https://api.spotify.com/v1/me/player/currently-playing", headers=user_headers)
if currently_playing.content: if currently_playing.content:
if currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] == request.args.get('id'): if "is_playing" in currently_playing.json():
print("QUICK" + str(time.time() - stime)) if currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] == request.args.get('id'):
return { 'progress_ms': currently_playing.json()["progress_ms"], print("QUICK" + str(time.time() - stime))
return { 'progress_ms': currently_playing.json()["progress_ms"],
}
elif currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] != request.args.get('id'):
print("FULL" + str(time.time() - stime))
return { 'id': currently_playing.json()["item"]["id"],
'name': currently_playing.json()["item"]["name"],
'artist': currently_playing.json()["item"]["artists"][0]["name"],
'album': currently_playing.json()["item"]["album"]["name"],
'image': currently_playing.json()["item"]["album"]["images"][0]["url"],
'is_playing': currently_playing.json()["is_playing"],
'progress_ms': currently_playing.json()["progress_ms"],
'duration_ms': currently_playing.json()["item"]["duration_ms"],
'is_liked': requests.get("https://api.spotify.com/v1/me/tracks/contains?ids=" + currently_playing.json()["item"]["id"], headers=user_headers).json()[0],
'canvas': False,
'gofetch': 'fetch'
}
elif currently_playing.json()["is_playing"] is False:
return { 'is_playing': False
}
else:
return { 'name': "Error",
'artist': "Error"
} }
elif currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] != request.args.get('id'):
print("FULL" + str(time.time() - stime))
return { 'id': currently_playing.json()["item"]["id"],
'name': currently_playing.json()["item"]["name"],
'artist': currently_playing.json()["item"]["artists"][0]["name"],
'album': currently_playing.json()["item"]["album"]["name"],
'image': currently_playing.json()["item"]["album"]["images"][0]["url"],
'is_playing': currently_playing.json()["is_playing"],
'progress_ms': currently_playing.json()["progress_ms"],
'duration_ms': currently_playing.json()["item"]["duration_ms"],
'is_liked': requests.get("https://api.spotify.com/v1/me/tracks/contains?ids=" + currently_playing.json()["item"]["id"], headers=user_headers).json()[0],
'canvas': False,
'fetchlyrics': 'fetch'
}
elif currently_playing.json()["is_playing"] is False:
return { 'is_playing': False
}
else:
return { 'name': "Error",
'artist': "Error"
}
else: else:
return { 'is_playing': False return { 'is_playing': False
} }

36
templates/webapp.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" style="cursor: none;"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +7,18 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<style> <style>
.animated-background {
transition: background-color 1s ease-in-out; /* add a transition effect */
background-color: #fff; /* initial background color */
}
.animated-background.update-color {
background-color: var(--color); /* change the background color to black */
}
@keyframes fade-in {
to {
background-color: var(--color); /* change the background color to black */
}
}
.progress-container { .progress-container {
position: fixed; position: fixed;
bottom: 8px; bottom: 8px;
@@ -81,7 +93,7 @@
} }
</style> </style>
</head> </head>
<body> <body class="animated-background">
<!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> --> <!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
<div class="total"> <div class="total">
<div class="left"> <div class="left">
@@ -174,8 +186,10 @@
document.getElementById('canvas_url').style.display = "none"; document.getElementById('canvas_url').style.display = "none";
document.getElementById('image').style.display = "flex"; document.getElementById('image').style.display = "flex";
} }
getColors(data['image']) if (data['gofetch'] !== undefined) {
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics']) getColors(data['image'])
}
getLyrics(data['name'], data['artist'], data['progress_ms'], data['gofetch'])
} }
}); });
} }
@@ -200,8 +214,8 @@
} }
}); });
} }
function getLyrics(name, artist, progress_ms, fetchlyrics) { function getLyrics(name, artist, progress_ms, gofetch) {
if (lyrics == undefined || fetchlyrics !== undefined && name !== undefined) { if (lyrics == undefined || gofetch !== undefined && name !== undefined) {
$('#lyric').text(''); $('#lyric').text('');
$.ajax({ $.ajax({
url: '/lyrics', url: '/lyrics',
@@ -229,15 +243,21 @@
const colorThief = new ColorThief(); const colorThief = new ColorThief();
const img = document.getElementById('image'); const img = document.getElementById('image');
img.crossOrigin = 'Anonymous'; img.crossOrigin = 'Anonymous';
animatedBackground = document.querySelector('.animated-background');
if (img.complete) { if (img.complete) {
const color = colorThief.getColor(img); const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')'; // document.body.style.backgroundColor = 'rgb(' + color + ')';
// document.body.style.backgroundColor = 'rgb(' + color + ')';
animatedBackground.style.setProperty('--color', 'rgb(' + color + ')');
animatedBackground.classList.add('update-color');
getLuminance(color); getLuminance(color);
} else { } else {
img.addEventListener('load', function() { img.addEventListener('load', function() {
const color = colorThief.getColor(img); const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')'; // document.body.style.backgroundColor = 'rgb(' + color + ')';
animatedBackground.style.setProperty('--color', 'rgb(' + color + ')');
animatedBackground.classList.add('update-color');
getLuminance(color); getLuminance(color);
}); });
} }