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

Compare commits

base: brandon:bd5845dd04c77923aa82834eabf05532837c4089
Branches Tags
brandon:master
...
compare: brandon:master
Branches Tags
brandon:master

10 Commits
bd5845dd04 ... master

Author SHA1 Message Date
Brandon4466
6ba4ac0ea6 added left side pane with transition, content to be added 2024-05-13 17:01:57 -07:00
brandon
cfdf406f6c background fades to new color, new left side menu (WIP) 2024-05-12 21:18:59 -07:00
brandon
7adb79881e Revert "revert 49cd2b87355a0031b1376f1842d894c19f0f0d67" 
This reverts commit d3a4e97180.

redoing previous revert
 2024-05-08 14:57:45 -07:00
brandon
b0f8467a5e added file to .gitignore 2024-05-08 14:44:39 -07:00
brandon
7eff3f8d78 add 2024-05-08 14:16:52 -07:00
Brandon Brunson
d3a4e97180 revert 49cd2b8735 
undoing accidental merge
 2024-05-08 14:15:06 -07:00
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
brandon
0050b22a7b Merge branch 'master' of https://git.bbrunson.com/brandon/spotify-gui.js 2024-05-02 11:51:50 -07:00
brandon
5a1710be1b added files to gitignore 2024-05-02 11:49:03 -07:00
7 changed files with 134 additions and 84 deletions
Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -2,3 +2,7 @@ client_id
client_secret client_secret
code code
spotify-gui.js.code-workspace spotify-gui.js.code-workspace
.syncedlyrics/musixmatch_token.json
__pycache__/_canvas.cpython-310.pyc
protos/__pycache__/canvas_pb2.cpython-310.pyc
__pycache__/_canvas.cpython-310.pyc

2
.syncedlyrics/musixmatch_token.json
View File

@@ -1 +1 @@
{"token": "240425a54f5df91735a14b241dcfb1e5df28f942d95b9cad8ea6a4", "expiration_time": 1714086845} {"token": "2405132d7b80d1a072129196642e3c2675e8f036f7663fa58037a0", "expiration_time": 1715576057}

BIN
__pycache__/_canvas.cpython-310.pyc
View File

Binary file not shown.

BIN
protos/__pycache__/canvas_pb2.cpython-310.pyc
View File

Binary file not shown.

13
spotifycontroller.py
View File

@@ -4,7 +4,6 @@ from urllib.parse import urlencode
import base64 import base64
import os import os
import _canvas as SpotifyCanvas import _canvas as SpotifyCanvas
import time
import syncedlyrics import syncedlyrics
dev = 0 dev = 0
@@ -92,7 +91,6 @@ def callback():
@app.route('/appdata') @app.route('/appdata')
def appdata(): def appdata():
global access_token global access_token
stime = time.time()
try: try:
user_headers = { user_headers = {
"Authorization": "Bearer " + access_token, "Authorization": "Bearer " + access_token,
@@ -103,13 +101,13 @@ 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)
# needs to add an if statement that says if song is not playing then, becuase when nothing is playing the json response is different.
if currently_playing.content: if currently_playing.content:
if "is_playing" in currently_playing.json():
if currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] == request.args.get('id'): if currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] == request.args.get('id'):
print("QUICK" + str(time.time() - stime))
return { 'progress_ms': currently_playing.json()["progress_ms"], 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'): 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"], return { 'id': currently_playing.json()["item"]["id"],
'name': currently_playing.json()["item"]["name"], 'name': currently_playing.json()["item"]["name"],
'artist': currently_playing.json()["item"]["artists"][0]["name"], 'artist': currently_playing.json()["item"]["artists"][0]["name"],
@@ -120,7 +118,7 @@ def appdata():
'duration_ms': currently_playing.json()["item"]["duration_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], '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, 'canvas': False,
'fetchlyrics': 'fetch' 'gofetch': 'fetch'
} }
elif currently_playing.json()["is_playing"] is False: elif currently_playing.json()["is_playing"] is False:
return { 'is_playing': False return { 'is_playing': False
@@ -169,7 +167,6 @@ def icons(filename):
@app.route('/canvas') @app.route('/canvas')
def canvas(): def canvas():
print("CANVAS")
id = request.args.get('id') id = request.args.get('id')
try: try:
return { 'canvas_url': SpotifyCanvas.get_canvas_for_track(SpotifyCanvas.get_access_token(), id) } return { 'canvas_url': SpotifyCanvas.get_canvas_for_track(SpotifyCanvas.get_access_token(), id) }
@@ -182,10 +179,10 @@ def lyrics():
artist = request.args.get('artist') artist = request.args.get('artist')
if name and artist is not None: if name and artist is not None:
full_lyrics = syncedlyrics.search("[" + name + "] [" + artist + "]") full_lyrics = syncedlyrics.search("[" + name + "] [" + artist + "]")
else:
return { 'lyrics': '' }
if full_lyrics is None: if full_lyrics is None:
return { 'lyrics': "no lyrics" } return { 'lyrics': "no lyrics" }
else:
return { 'lyrics': '' }
return { 'lyrics': full_lyrics } return { 'lyrics': full_lyrics }
if __name__ == '__main__': if __name__ == '__main__':

106
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,16 +7,20 @@
<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, margin-left 0.5s; /* add a transition effect */
background-color: var(--color); /* initial background color */
}
.progress-container { .progress-container {
position: fixed; position: fixed;
bottom: 8px; bottom: 8px;
width: 100%; width: 100%;
background-color: #ddd; transition: background-color 1s ease-in-out; /* add a transition effect */
background-color: var(--color);
} }
.progress-bar { .progress-bar {
width: 0%; width: 0%;
height: 10px; height: 10px;
background-color: #d734e9;
text-align: center; text-align: center;
line-height: 4px; line-height: 4px;
color: white; color: white;
@@ -27,12 +31,14 @@
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin-bottom: 5px; margin-bottom: 5px;
transition: color 1s ease-in-out; /* add a transition effect */
} }
.artist-text { .artist-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 29px; font-size: 29px;
text-align: center; text-align: center;
margin-top: 5px; margin-top: 5px;
transition: color 1s ease-in-out; /* add a transition effect */
} }
.middle { .middle {
position: relative; position: relative;
@@ -57,6 +63,7 @@
text-align: center; text-align: center;
} }
.buttons { .buttons {
transition: filter 1s ease-in-out; /* add a transition effect */
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -79,11 +86,37 @@
vertical-align: center; vertical-align: center;
width: 33%; width: 33%;
} }
/* LEFT SIDE SWIPE PAGE */
.leftside {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: var(--color);
overflow-x: hidden;
transition: 0.5s;
}
</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="leftside" id="leftpage">
<a href="javascript:void(0)" onclick="closeNav()">Close</a>
<div class="total">
<div class="left">
</div>
<div class="middle">
<input type="range" id="volume">
</div>
<div class="right">
</div>
</div>
</div>
<span onclick="openNav()">Swipe</span>
<div class="left"> <div class="left">
<img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 330px; padding-left: 25%;"> <img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 330px; padding-left: 25%;">
<video width="330" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none; padding-left: 10%;"></video> <video width="330" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none; padding-left: 10%;"></video>
@@ -107,11 +140,6 @@
<p id="lyric" class="lyrics">{{ data['lyric'] }}</p> <p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
</div> </div>
</div> </div>
<div style="padding-top: 5px;">
<div id="progress_container" class="progress-container">
<div id="progress_bar" class="progress-bar"></div>
</div>
</div>
<script> <script>
let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms; let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
// Function to update the values every second // Function to update the values every second
@@ -174,8 +202,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";
} }
if (data['gofetch'] !== undefined) {
getColors(data['image']) getColors(data['image'])
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics']) }
getLyrics(data['name'], data['artist'], data['progress_ms'], data['gofetch'])
} }
}); });
} }
@@ -200,8 +230,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,44 +259,53 @@
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');
progressContainer = document.querySelector('.progress-container');
//get property
if (img.complete) { if (img.complete) {
const color = colorThief.getColor(img); const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')'; animatedBackground.style.setProperty('--color', 'rgb(' + color + ')');
progressContainer.style.setProperty('--color', 'rgb(' + 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 + ')'; animatedBackground.style.setProperty('--color', 'rgb(' + color + ')');
progressContainer.style.setProperty('--color', 'rgb(' + color + ')');
getLuminance(color); getLuminance(color);
}); });
} }
} }
function getLuminance(color) { function getLuminance(color) {
songText = document.querySelector('.song-text');
artistText = document.querySelector('.artist-text');
buttonsDiv = document.querySelector('.buttons');
lyricsDiv = document.querySelector('.lyrics');
if (Math.sqrt(0.299 * (color[0] ** 2) + 0.587 * (color[1] ** 2) + 0.114 * (color[2] ** 2)) > 170) { if (Math.sqrt(0.299 * (color[0] ** 2) + 0.587 * (color[1] ** 2) + 0.114 * (color[2] ** 2)) > 170) {
document.getElementById('name').style.color = 'black'; songText.style.color = 'black';
document.getElementById('artist').style.color = 'black'; artistText.style.color = 'black';
document.getElementById('lyric').style.color = 'black'; buttonsDiv.style.filter = 'invert(100%)';
document.getElementById('previous').style.filter = 'invert(100%)'; lyricsDiv.style.color = 'black';
document.getElementById('playpause').style.filter = 'invert(100%)';
document.getElementById('next').style.filter = 'invert(100%)';
document.getElementById('like').style.filter = 'invert(100%)';
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
darkColor = [color[0] - 75, color[1] - 75, color[2] - 75] darkColor = [color[0] - 75, color[1] - 75, color[2] - 75]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')'; document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')';
} else { } else {
document.getElementById('name').style.color = 'white'; songText.style.color = 'white';
document.getElementById('artist').style.color = 'white'; artistText.style.color = 'white';
document.getElementById('lyric').style.color = 'white'; buttonsDiv.style.filter = '';
document.getElementById('previous').style.filter = ''; lyricsDiv.style.color = 'white';
document.getElementById('playpause').style.filter = '';
document.getElementById('next').style.filter = '';
document.getElementById('like').style.filter = '';
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
lightColor = [color[0] + 75, color[1] + 75, color[2] + 75] lightColor = [color[0] + 75, color[1] + 75, color[2] + 75]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')'; document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
} }
} }
function openNav() {
document.getElementById('leftpage').style.width = "100%";
document.querySelector('.animated-background').style.marginLeft = "100%";
}
function closeNav() {
document.getElementById('leftpage').style.width = "0";
document.querySelector('.animated-background').style.marginLeft = "0";
}
// function getLuminance() { // function getLuminance() {
// } // }
@@ -331,4 +370,11 @@
}); });
</script> </script>
</body> </body>
<footer>
<div style="padding-top: 5px;">
<div id="progress_container" class="progress-container">
<div id="progress_bar" class="progress-bar"></div>
</div>
</div>
</footer>
</html> </html>

3
todo.txt
View File

@@ -15,3 +15,6 @@ CANT GET LYRICS VAR TO BE ACCESSED OUTSIDE OF FUNCTION. AHHHH
MAKE album/canvas 33.3%, middle 33.3%, lyrics 33.3% to make sure nothing MAKE album/canvas 33.3%, middle 33.3%, lyrics 33.3% to make sure nothing
moves around if the album switches to a canvas moves around if the album switches to a canvas
have animation for going to left side page not push content to the right, have it
move the content (album, controls, song info, etc.) to the bottom with a nice animation.