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> <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<style> <style>
.animated-background { .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 */ background-color: var(--color); /* initial background color */
transition: margin-left 0.5s; /* add a transition effect */
} }
.progress-container { .progress-container {
position: fixed; position: fixed;
@@ -102,39 +101,45 @@
</head> </head>
<body class="animated-background"> <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"> <div class="leftside" id="leftpage">
<a href="javascript:void(0)" onclick="closeNav()">Close</a> <a href="javascript:void(0)" onclick="closeNav()">Close</a>
</div> <div class="total">
<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%;"> </div>
<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 class="middle">
</div> <input type="range" id="volume">
<div class="middle"> </div>
<p id="name" class="song-text">{{ data['name'] }}</p> <div class="right">
<p id="artist" class="artist-text">{{ data['artist'] }}</p>
<!-- <p id="album" class="song-info">{{ data['album'] }}</p> </div>
<p id="progress_ms">{{ data['progress_ms'] }}</p> </div>
<p id="duration_ms">{{ data['duration_ms'] }}</p> --> </div>
<p> <span onclick="openNav()">Swipe</span>
<div class="buttons"> <div class="left">
<a><img id="previous" src="http://127.0.0.1:8888/icons/previous.png" class="buttons-individual"></a> <img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 330px; padding-left: 25%;">
<a><img id="playpause" src="http://127.0.0.1:8888/icons/play.png" class="buttons-individual"></a> <video width="330" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none; padding-left: 10%;"></video>
<a><img id="next" src="http://127.0.0.1:8888/icons/next.png" class="buttons-individual"></a> </div>
<a><img id="like" src="http://127.0.0.1:8888/icons/heart.png" class="buttons-individual" style="display:none;"></a> <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> </div>
</p>
</div> </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> <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
@@ -276,16 +281,19 @@
songText = document.querySelector('.song-text'); songText = document.querySelector('.song-text');
artistText = document.querySelector('.artist-text'); artistText = document.querySelector('.artist-text');
buttonsDiv = document.querySelector('.buttons'); 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) {
songText.style.color = 'black'; songText.style.color = 'black';
artistText.style.color = 'black'; artistText.style.color = 'black';
buttonsDiv.style.filter = 'invert(100%)'; buttonsDiv.style.filter = 'invert(100%)';
lyricsDiv.style.color = 'black';
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 {
songText.style.color = 'white'; songText.style.color = 'white';
artistText.style.color = 'white'; artistText.style.color = 'white';
buttonsDiv.style.filter = ''; buttonsDiv.style.filter = '';
lyricsDiv.style.color = 'white';
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 + ')';
} }
@@ -362,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>

5
todo.txt
View File

@@ -14,4 +14,7 @@ to js app, but maybe have js app do it from album art, explore which is better.
CANT GET LYRICS VAR TO BE ACCESSED OUTSIDE OF FUNCTION. AHHHH 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.