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

background fades to new color, new left side menu (WIP)

Browse Source
This commit is contained in:
Brandon Brunson
2024-05-12 21:18:59 -07:00
parent 7adb79881e
commit cfdf406f6c
6 changed files with 49 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -3,3 +3,6 @@ client_secret
code
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

6
.syncedlyrics/musixmatch_token.json
View File

@@ -1,5 +1 @@
<<<<<<< HEAD
{"token": "240508682dd31a29b369cb3e363b37522b3f583074e0a18384854b", "expiration_time": 1715204997}
=======
{"token": "240507dc1c1d721b422f329d191594415da1e4aec72fa0405c547e", "expiration_time": 1715112558}
>>>>>>> parent of d3a4e97 (revert 49cd2b87355a0031b1376f1842d894c19f0f0d67)
{"token": "2405094b2701c575f2a99e2a27bcc795a1413ae719c296da64cae9", "expiration_time": 1715289885}

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.

9
spotifycontroller.py
View File

@@ -4,7 +4,6 @@ from urllib.parse import urlencode
import base64
import os
import _canvas as SpotifyCanvas
import time
import syncedlyrics
dev = 0
@@ -92,7 +91,6 @@ def callback():
@app.route('/appdata')
def appdata():
global access_token
stime = time.time()
try:
user_headers = {
"Authorization": "Bearer " + access_token,
@@ -107,11 +105,9 @@ def appdata():
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'):
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"],
@@ -171,7 +167,6 @@ def icons(filename):
@app.route('/canvas')
def canvas():
print("CANVAS")
id = request.args.get('id')
try:
return { 'canvas_url': SpotifyCanvas.get_canvas_for_track(SpotifyCanvas.get_access_token(), id) }
@@ -184,10 +179,10 @@ def lyrics():
artist = request.args.get('artist')
if name and artist is not None:
full_lyrics = syncedlyrics.search("[" + name + "] [" + artist + "]")
else:
return { 'lyrics': '' }
if full_lyrics is None:
return { 'lyrics': "no lyrics" }
else:
return { 'lyrics': '' }
return { 'lyrics': full_lyrics }
if __name__ == '__main__':

80
templates/webapp.html
View File

@@ -9,26 +9,19 @@
<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 */
}
background-color: var(--color); /* initial background color */
transition: margin-left 0.5s; /* add a transition effect */
}
.progress-container {
position: fixed;
bottom: 8px;
width: 100%;
background-color: #ddd;
transition: background-color 1s ease-in-out; /* add a transition effect */
background-color: var(--color);
}
.progress-bar {
width: 0%;
height: 10px;
background-color: #d734e9;
text-align: center;
line-height: 4px;
color: white;
@@ -39,12 +32,14 @@
font-weight: bold;
text-align: center;
margin-bottom: 5px;
transition: color 1s ease-in-out; /* add a transition effect */
}
.artist-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 29px;
text-align: center;
margin-top: 5px;
transition: color 1s ease-in-out; /* add a transition effect */
}
.middle {
position: relative;
@@ -69,6 +64,7 @@
text-align: center;
}
.buttons {
transition: filter 1s ease-in-out; /* add a transition effect */
position: absolute;
bottom: 0;
left: 0;
@@ -91,11 +87,26 @@
vertical-align: center;
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>
</head>
<body class="animated-background">
<!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
<div class="total">
<div class="leftside" id="leftpage">
<a href="javascript:void(0)" onclick="closeNav()">Close</a>
</div>
<span onclick="openNav()">Swipe</span>
<div class="left">
<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>
@@ -244,56 +255,49 @@
const img = document.getElementById('image');
img.crossOrigin = 'Anonymous';
animatedBackground = document.querySelector('.animated-background');
document.documentElement.style
.setProperty('--my-variable-name', '100px');
progressContainer = document.querySelector('.progress-container');
//get property
getComputedStyle(document.documentElement)
.getPropertyValue('--my-variable-name'); // returns value
if (img.complete) {
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');
progressContainer.style.setProperty('--color', 'rgb(' + color + ')');
getLuminance(color);
} else {
img.addEventListener('load', function() {
const color = colorThief.getColor(img);
// document.body.style.backgroundColor = 'rgb(' + color + ')';
animatedBackground.style.setProperty('--color', 'rgb(' + color + ')');
animatedBackground.classList.add('update-color');
progressContainer.style.setProperty('--color', 'rgb(' + color + ')');
getLuminance(color);
});
}
}
function getLuminance(color) {
songText = document.querySelector('.song-text');
artistText = document.querySelector('.artist-text');
buttonsDiv = document.querySelector('.buttons');
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';
document.getElementById('artist').style.color = 'black';
document.getElementById('lyric').style.color = 'black';
document.getElementById('previous').style.filter = 'invert(100%)';
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 + ')';
songText.style.color = 'black';
artistText.style.color = 'black';
buttonsDiv.style.filter = 'invert(100%)';
darkColor = [color[0] - 75, color[1] - 75, color[2] - 75]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')';
} else {
document.getElementById('name').style.color = 'white';
document.getElementById('artist').style.color = 'white';
document.getElementById('lyric').style.color = 'white';
document.getElementById('previous').style.filter = '';
document.getElementById('playpause').style.filter = '';
document.getElementById('next').style.filter = '';
document.getElementById('like').style.filter = '';
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
songText.style.color = 'white';
artistText.style.color = 'white';
buttonsDiv.style.filter = '';
lightColor = [color[0] + 75, color[1] + 75, color[2] + 75]
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() {
// }