From 555dae121c50d72413a8ec0db684a781bebaa30b Mon Sep 17 00:00:00 2001
From: Brandon4466 <spongebob.brandon@gmail.com>
Date: Tue, 30 Apr 2024 16:36:47 -0700
Subject: [PATCH] layout adjustments

---
 .gitignore            |   1 +
 templates/webapp.html | 122 ++++++++++++++++++++++++++++++------------
 2 files changed, 89 insertions(+), 34 deletions(-)
diff --git a/.gitignore b/.gitignore
index 90b4010..5536393 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 client_id
 client_secret
 code
+spotify-gui.js.code-workspace
diff --git a/templates/webapp.html b/templates/webapp.html
index 0468739..0724ecb 100644
--- a/templates/webapp.html
+++ b/templates/webapp.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="cursor: none;">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,12 +8,14 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
 <style>
     .progress-container {
+        position: fixed;
+        bottom: 8px;
         width: 100%;
         background-color: #ddd;
     }
     .progress-bar {
         width: 0%;
-        height: 4px;
+        height: 10px;
         background-color: #d734e9;
         text-align: center;
         line-height: 4px;
@@ -21,49 +23,71 @@
     }
     .song-text {
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        font-size: 25px;
+        font-size: 36px;
         font-weight: bold;
         text-align: center;
         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: 20px;
+        font-size: 29px;
         text-align: center;
         margin-top: 5px;
     }
     .middle {
+        position: relative;
+        flex: 1;
+        display: flex;
+        text-align: center;
+        display: inline-block;
+        vertical-align: center;
+        height: 100%;
+        width: 33%;
+    }
+    .right {
         flex: 1;
         text-align: center;
         display: inline-block;
-        vertical-align: top;
-    }
-    .right {
-        height: 100%;
-        display: inline-block;
+        vertical-align: center;
         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;
+        font-size: 36px;
         text-align: center;
     }
     .buttons {
-        display: initial;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+    .buttons-individual {
         padding-top: 10%;
         /* mix-blend-mode: difference; */
     }
     .total {
+        position: relative;
         display: flex;
         align-items: center;
+        height: 94vh;
+    }
+    .left {
+        flex: 1;
+        text-align: center;
+        display: inline-block;
+        vertical-align: center;
+        width: 33%;
     }
 </style>
 </head>
 <body>
     <!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
     <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="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>
@@ -71,10 +95,12 @@
             <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>
+            <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">
@@ -82,10 +108,10 @@
         </div>
     </div>
     <div style="padding-top: 5px;">
-        <div class="progress-container">
+        <div id="progress_container" class="progress-container">
             <div id="progress_bar" class="progress-bar"></div>
         </div>
-        </div>
+    </div>
     <script>
         let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
         // Function to update the values every second
@@ -130,23 +156,23 @@
 
                     if (is_playing) {
                     // Change button to play icon
-                        document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/pause-black.png';
+                        document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/pause.png';
                     } else {
                     // Change button to pause icon
-                        document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/play-black.png';
+                        document.getElementById('playpause').src = 'http://127.0.0.1:8888/icons/play.png';
                     }
                     if (is_liked) {
                         // Change button to unlike text
-                        document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-on-black.png';
+                        document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-on.png';
                     } else {
                         // Change button to like text
-                        document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart-black.png';
+                        document.getElementById('like').src = 'http://127.0.0.1:8888/icons/heart.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 = "";
+                        document.getElementById('image').style.display = "flex";
                     }
                     getColors(data['image'])
                     getLyrics(data['name'], data['artist'], data['progress_ms'], data['fetchlyrics'])
@@ -169,7 +195,7 @@
                     canvas_url = canvas_data['canvas_url'];
                 } else {
                     document.getElementById('canvas_url').style.display = "none";
-                    document.getElementById('image').style.display = "";
+                    document.getElementById('image').style.display = "flex";
                 }
             }
             });
@@ -207,27 +233,55 @@
             if (img.complete) {
                 const color = colorThief.getColor(img);
                 document.body.style.backgroundColor = 'rgb(' + color + ')';
+                getLuminance(color);
+                document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
+                lightColor = [color[0] + 50, color[1] + 50, color[2] + 50]
+                document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
             } else {
                 img.addEventListener('load', function() {
                     const color = colorThief.getColor(img);
                     document.body.style.backgroundColor = 'rgb(' + color + ')';
+                    getLuminance(color);
+                    document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
+                    lightColor = [color[0] + 50, color[1] + 50, color[2] + 50]
+                    document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
                 });
             }
         }
+        function getLuminance(color) {
+            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%)';
+            } 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 = '';
+            }
+        }
         // function getLuminance() {
 
         // }
         // BUTTONS
         $('#playpause').click(function() {
-            $.ajax({
-                type: 'POST',
-                url: '/control',
-                data: {command: (is_playing ? 'pause' : 'play')}, // Predefined command
-                success: function(response) {
-                    $('#is_playing').text(response['is_playing']);
-                    is_playing = response['is_playing'];
-                }
-            });
+            location.reload();
+            // $.ajax({
+            //     type: 'POST',
+            //     url: '/control',
+            //     data: {command: (is_playing ? 'pause' : 'play')}, // Predefined command
+            //     success: function(response) {
+            //         $('#is_playing').text(response['is_playing']);
+            //         is_playing = response['is_playing'];
+            //     }
+            // });
         });
         $('#pause').click(function() {
             $.ajax({
