added left side pane with transition, content to be added

background fades to new color, new left side menu (WIP)
Revert "revert 49cd2b87355a0031b1376f1842d894c19f0f0d67"
2024-05-13 17:01:57 -07:00 · 2024-05-12 21:18:59 -07:00 · 2024-05-08 14:57:45 -07:00 · 2024-05-08 14:44:39 -07:00 · 2024-05-08 14:16:52 -07:00 · 2024-05-08 14:15:06 -07:00
7 changed files with 133 additions and 84 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -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
--- a/.syncedlyrics/musixmatch_token.json
+++ b/.syncedlyrics/musixmatch_token.json
@@ -1 +1 @@
-{"token": "240425a54f5df91735a14b241dcfb1e5df28f942d95b9cad8ea6a4", "expiration_time": 1714086845}
+{"token": "2405132d7b80d1a072129196642e3c2675e8f036f7663fa58037a0", "expiration_time": 1715576057}
--- a/pycache/_canvas.cpython-310.pyc
+++ b/pycache/_canvas.cpython-310.pyc
--- a/protos/pycache/canvas_pb2.cpython-310.pyc
+++ b/protos/pycache/canvas_pb2.cpython-310.pyc
--- a/spotifycontroller.py
+++ b/spotifycontroller.py
@@ -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,
@@ -103,13 +101,13 @@ def appdata():

    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 "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"],
@@ -120,7 +118,7 @@ def appdata():
                        '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],
                        'canvas': False,
-                    'fetchlyrics': 'fetch'
+                        'gofetch': 'fetch'
                        }
            elif currently_playing.json()["is_playing"] is False:
                return { 'is_playing': False
@@ -169,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) }
@@ -182,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__':
--- a/templates/webapp.html
+++ b/templates/webapp.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="cursor: none;">
+<html lang="en">
 <head>
    <meta charset="UTF-8">
    <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://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, margin-left 0.5s; /* add a transition effect */
+        background-color: var(--color); /* initial background color */
+    }
    .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;
@@ -27,12 +31,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;
@@ -57,6 +63,7 @@
        text-align: center;
    }
    .buttons {
+        transition: filter 1s ease-in-out; /* add a transition effect */
        position: absolute;
        bottom: 0;
        left: 0;
@@ -79,11 +86,37 @@
        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>
+<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 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>
@@ -107,11 +140,6 @@
                <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
@@ -174,8 +202,10 @@
                        document.getElementById('canvas_url').style.display = "none";
                        document.getElementById('image').style.display = "flex";
                    }
+                    if (data['gofetch'] !== undefined) {
                        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) {
-            if (lyrics == undefined || fetchlyrics !== undefined && name !== undefined) {
+        function getLyrics(name, artist, progress_ms, gofetch) {
+            if (lyrics == undefined || gofetch !== undefined && name !== undefined) {
                $('#lyric').text('');
                $.ajax({
                    url: '/lyrics',
@@ -229,44 +259,53 @@
            const colorThief = new ColorThief();
            const img = document.getElementById('image');
            img.crossOrigin = 'Anonymous';
+            animatedBackground = document.querySelector('.animated-background');
+            progressContainer = document.querySelector('.progress-container');

+//get property
            if (img.complete) {
                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);
            } else {
                img.addEventListener('load', function() {
                    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);
                });
            }
        }
        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) {
-                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%)';
+                lyricsDiv.style.color = 'black';
                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 = '';
+                lyricsDiv.style.color = 'white';
                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() {

        // }
@@ -331,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>
--- a/todo.txt
+++ b/todo.txt
@@ -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.
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