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

added left side pane with transition, content to be added

Browse Source
This commit is contained in:
Brandon4466
2024-05-13 17:01:57 -07:00
parent cfdf406f6c
commit 6ba4ac0ea6
3 changed files with 53 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.syncedlyrics/musixmatch_token.json
View File

@@ -1 +1 @@
{"token": "2405094b2701c575f2a99e2a27bcc795a1413ae719c296da64cae9", "expiration_time": 1715289885}
{"token": "2405132d7b80d1a072129196642e3c2675e8f036f7663fa58037a0", "expiration_time": 1715576057}

81
templates/webapp.html
View File

@@ -8,9 +8,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<style>
.animated-background {
transition: background-color 1s ease-in-out; /* add a transition effect */
transition: background-color 1s ease-in-out, margin-left 0.5s; /* add a transition effect */
background-color: var(--color); /* initial background color */
transition: margin-left 0.5s; /* add a transition effect */
}
.progress-container {
position: fixed;
@@ -102,39 +101,45 @@
</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>
</div>
<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>
<div class="buttons">
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous.png" class="buttons-individual"></a>
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play.png" class="buttons-individual"></a>
<a><img id="next" src="http://127.0.0.1:8888/icons/next.png" class="buttons-individual"></a>
<a><img id="like" src="http://127.0.0.1:8888/icons/heart.png" class="buttons-individual" style="display:none;"></a>
<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">
<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>
</div>
<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>
<div class="buttons">
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous.png" class="buttons-individual"></a>
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play.png" class="buttons-individual"></a>
<a><img id="next" src="http://127.0.0.1:8888/icons/next.png" class="buttons-individual"></a>
<a><img id="like" src="http://127.0.0.1:8888/icons/heart.png" class="buttons-individual" style="display:none;"></a>
</div>
</p>
</div>
<div class="right">
<p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
</div>
</p>
</div>
<div class="right">
<p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
</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>
let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
// Function to update the values every second
@@ -276,16 +281,19 @@
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) {
songText.style.color = 'black';
artistText.style.color = 'black';
buttonsDiv.style.filter = 'invert(100%)';
lyricsDiv.style.color = 'black';
darkColor = [color[0] - 75, color[1] - 75, color[2] - 75]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')';
} else {
songText.style.color = 'white';
artistText.style.color = 'white';
buttonsDiv.style.filter = '';
lyricsDiv.style.color = 'white';
lightColor = [color[0] + 75, color[1] + 75, color[2] + 75]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
}
@@ -362,4 +370,11 @@
});
</script>
</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>

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
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.