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

auto syncing lyrics, canvas replaces album art (if available), fixed layout (margins, padding, etc.), refactored some code

Browse Source
This commit is contained in:
Brandon Brunson
2024-04-25 16:11:17 -07:00
parent eb837080fa
commit ad989ad50b
11 changed files with 236 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
templates/webapp.html
View File

@@ -21,49 +21,72 @@
}
.song-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 20px;
font-size: 25px;
font-weight: bold;
text-align: center;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 5px;
}
.artist-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
font-size: 20px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
margin-top: 5px;
}
.middle {
flex: 1;
text-align: center;
display: inline-block;
vertical-align: top;
padding-left: 20px;
padding-right: 20px;
}
.right {
height: 100%;
display: inline-block;
width: 33%;
}
.lyrics {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 32px;
text-align: center;
}
.buttons {
display: initial;
padding-top: 10%;
}
.total {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
<img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;">
<div class="middle">
<p id="name" class="song-text">{{ data['name'] }}</p>
<p id="artist" class="artist-text">{{ data['artist'] }}</p>
<!-- <p id="album" class="song-info">{{ data['album'] }}</p>
<p id="progress_ms">{{ data['progress_ms'] }}</p>
<p id="duration_ms">{{ data['duration_ms'] }}</p> -->
<p>
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous-black.png" style="width:96px;height:96px;"></a>
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play-black.png" style="width:96px;height:96px;"></a>
<a><img id="next" src="http://127.0.0.1:8888/icons/next-black.png" style="width:96px;height:96px;"></a>
<a><img id="like" src="http://127.0.0.1:8888/icons/heart-black.png" style="width:96px;height:96px;"></a>
</p>
</div>
<div class="progress-container">
<div id="progress_bar" class="progress-bar"></div>
<div class="total">
<img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 300px; max-height: 300px;">
<video wdith="300" height="300" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none;"></video>
<div class="middle">
<p id="name" class="song-text">{{ data['name'] }}</p>
<p id="artist" class="artist-text">{{ data['artist'] }}</p>
<!-- <p id="album" class="song-info">{{ data['album'] }}</p>
<p id="progress_ms">{{ data['progress_ms'] }}</p>
<p id="duration_ms">{{ data['duration_ms'] }}</p> -->
<p>
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous-black.png" class="buttons"></a>
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play-black.png" class="buttons"></a>
<a><img id="next" src="http://127.0.0.1:8888/icons/next-black.png" class="buttons"></a>
<a><img id="like" src="http://127.0.0.1:8888/icons/heart-black.png" class="buttons" style="display:none;"></a>
</p>
</div>
<div class="right">
<p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
</div>
</div>
<div style="padding-top: 5px;">
<div class="progress-container">
<div id="progress_bar" class="progress-bar"></div>
</div>
</div>
<script>
let id, is_playing, is_liked, duration_ms;
let id, is_playing, is_liked, duration_ms, canvas_url, lyrics;
// Function to update the values every second
function updateValues() {
$.ajax({
@@ -77,11 +100,10 @@
$('#is_playing').text(data['is_playing']);
$('#progress_ms').text(data['progress_ms']);
$('#duration_ms').text(data['duration_ms']);
// $('#progress_min').text(Math.floor(data['progress_ms'] / (1000 * 60)) % 60);
// $('#progress_sec').text(Math.floor((data['progress_ms'] / 1000) % 60));
// $('#duration_min').text(Math.floor(data['duration_ms'] / (1000 * 60) % 60));
// $('#duration_sec').text(Math.floor(data['duration_ms'] / 1000) % 60);
$('#is_liked').text(data['is_liked']);
$('#canvas').attr('src', data['canvas']);
if (data['id'] !== undefined) {
id = data['id'];
@@ -113,12 +135,62 @@
// Change button to like text
document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-black.png';
}
if (data['canvas'] !== undefined) {
getCanvas(data['id']);
} else if (canvas_url == undefined) {
document.getElementById('canvas_url').style.display = "none";
document.getElementById('image').style.display = "";
}
getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
}
});
}
// Update values every second
setInterval(updateValues, 3000);
setInterval(updateValues, 1000);
// Function to run alongside the looped function if a variable is true
function getCanvas(id) {
$.ajax({
url: '/canvas',
data: { id: id },
success: function(canvas_data) {
if (canvas_data['canvas_url'] !== undefined) {
$('#canvas_url').attr('src', canvas_data['canvas_url']);
document.getElementById('canvas_url').style.display = "";
document.getElementById('image').style.display = "none";
canvas_url = canvas_data['canvas_url'];
} else {
document.getElementById('canvas_url').style.display = "none";
document.getElementById('image').style.display = "";
}
}
});
}
function getLyrics(name, artist, progress_ms, fetchlyrics) {
if (lyrics == undefined || fetchlyrics !== undefined && name !== undefined) {
$('#lyric').text('');
$.ajax({
url: '/lyrics',
data: {name: name, artist: artist},
success: function(lyrics_data) {
lyrics = lyrics_data['lyrics'];
}
});
} else if (lyrics == 'no lyrics') {
} else {
progressMin = Math.floor(progress_ms / (1000 * 60)) % 60
progressSec = Math.floor((progress_ms / 1000) % 60)
const progressFormatted = `${progressMin}:${String(progressSec).padStart(2, '0')}`;
const lines = lyrics.split('\n');
for (const line of lines) {
if (line.includes(progressFormatted)) {
lyric = (line.split(']')[1])
$('#lyric').text(lyric);
}
}
}
}
// BUTTONS
$('#playpause').click(function() {
$.ajax({