From aa7d40f7a0d93a923bd4a23dbd137a82d3c69437 Mon Sep 17 00:00:00 2001
From: EduardSkibidiEdger <eduard@prigoana.com>
Date: Sat, 18 Jan 2025 20:20:55 +0200
Subject: [PATCH] s

---
 .gitignore                 |   3 +
 app.py                     |  16 +++--
 requirements.txt           |   1 +
 run.bat                    |   2 +-
 templates/index.html       | 121 +++++++++++++++++++++++++------------
 templates/queue_table.html |  79 ++++++++----------------
 6 files changed, 122 insertions(+), 100 deletions(-)
 create mode 100644 .gitignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fc7c9cc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+
+.env
+.cache
diff --git a/app.py b/app.py
index 5d65c49..fa42e6f 100644
--- a/app.py
+++ b/app.py
@@ -1,13 +1,18 @@
-from flask import Flask, render_template, request, redirect, url_for, jsonify
+from flask import Flask, render_template, request, jsonify
 from spotipy import Spotify
 from spotipy.oauth2 import SpotifyOAuth
+from dotenv import load_dotenv
+import os
+
+# Load environment variables from .env file
+load_dotenv()
 
 # Flask app
 app = Flask(__name__)
 
-# Spotify API credentials
-CLIENT_ID = "f7f2841e0c26492681499a53b4eca29f"
-CLIENT_SECRET = "8e1a973438214682939b175bb9f1ed1d"
+# Spotify API credentials from environment variables
+CLIENT_ID = os.getenv("CLIENT_ID")
+CLIENT_SECRET = os.getenv("CLIENT_SECRET")
 REDIRECT_URI = "http://localhost:80/callback"
 SCOPE = "user-modify-playback-state user-read-playback-state"
 
@@ -23,6 +28,7 @@ sp = Spotify(auth_manager=SpotifyOAuth(
 @app.route("/")
 def home():
     return render_template("index.html")
+    
 
 @app.route("/add", methods=["GET"])
 def add_song():
@@ -58,7 +64,7 @@ def queue_table():
             queue.append({"track": track_name, "artist": artist_name})
     current = None
     if queue_data["currently_playing"]:
-        current = {"track":queue_data["currently_playing"]["name"], "artist":queue_data["currently_playing"]["artists"][0]["name"]}
+        current = {"track": queue_data["currently_playing"]["name"], "artist": queue_data["currently_playing"]["artists"][0]["name"]}
     return render_template("queue_table.html", queue=queue, length=len(queue), now_playing=current)
 
 # Run the Flask app
diff --git a/requirements.txt b/requirements.txt
index 4244895..b214db3 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,2 +1,3 @@
 Flask
 spotipy
+python-dotenv
\ No newline at end of file
diff --git a/run.bat b/run.bat
index f273830..316a7cb 100644
--- a/run.bat
+++ b/run.bat
@@ -1 +1 @@
-python app.py
\ No newline at end of file
+cmd /K python -m app
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index fed1883..9fcb5bf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+    >
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Spotify Queue Manager</title>
@@ -10,13 +14,9 @@
             text-align: center;
             margin: 0;
             padding: 20px;
-            background-color: #f0f0f0;
-        }
-        h1 {
-            color: #000000;
         }
         form {
-            margin: 20px auto;
+            width: 100%;
         }
         input[type="text"] {
             width: 80%;
@@ -25,34 +25,49 @@
             border: 1px solid #ccc;
             border-radius: 5px;
         }
-        button {
-            background-color: #000000;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
+        .loading-spinner {
+            display: none;
+            text-align: center;
+            padding: 10px;
+            font-size: 16px;
+            color: #555;
         }
-        button:hover {
-            background-color: #000000;
+        .loading-spinner.active {
+            display: block;
         }
+
+        /* Styling for the iframe to stretch to bottom and hide scrollbar */
         iframe {
             width: 100%;
+            height: calc(100vh); /* Adjusted to leave space for other content */
             border: none;
-            margin-top: 20px;
-            overflow: hidden;
+            overflow: hidden; /* Hide the scrollbar */
+            transition: height 0.3s ease-in-out;
+        }
+        /* Optional: Smooth fade on iframe content changes */
+        iframe.content {
+            transition: opacity 0.5s ease-in-out;
+            opacity: 1;
         }
     </style>
 </head>
 <body>
     <h1>Queue</h1>
     <form id="addSongForm" onsubmit="addSong(event)">
-        <input type="text" id="songInput" name="song_name" placeholder="Adauga melodie sau artist   " required>
-        <button type="submit">Adauga</button>
+        <input type="text" id="songInput" name="song_name" placeholder="Add song or artist" required>
+        <button style="width: 10%;" class="contrast" type="submit">Add</button>
     </form>
     <div class="message" id="message"></div>
-    <!-- Queue Table Embedded in an iframe -->
-    <iframe src="/queue_table" id="queueIframe"></iframe>
+    <!-- Now Playing Widget -->
+    <p>Now Playing:</p>
+    <div class="now-playing" id="nowPlaying">
+        <div id="nowPlayingInfo">
+            Loading now playing...
+        </div>
+    </div>
+
+    <iframe id="queueTable" src="/queue_table" scrolling="no" seamless="seamless"></iframe>
+
     <script>
         // Function to handle song addition via GET request
         async function addSong(event) {
@@ -86,28 +101,56 @@
                 songInput.value = "";
             }
 
-            // Reload the iframe to reflect the updated queue
-            document.getElementById("queueIframe").contentWindow.location.reload();
-
-            setTimeout(() => {
-                messageDiv.textContent = "";
-            }, 3000)
-        }
-        // Adjust the iframe height dynamically to avoid scrollbars
-        function resizeIframe() {
-            const iframe = document.getElementById('queueIframe');
-            iframe.style.height = iframe.contentWindow.document.body.scrollHeight+20 + 'px';
+            // Show loading spinner
+            const loadingSpinner = document.getElementById("loadingSpinner");
+            loadingSpinner.classList.add("active");
         }
 
-        // Resize iframe after it loads and periodically refresh the iframe
-        const iframe = document.getElementById('queueIframe');
-        iframe.onload = resizeIframe;
-        setInterval(() => {
-            iframe.contentWindow.location.reload();
-        }, 15000);
+        // Function to fetch "Now Playing" information
+        async function fetchNowPlaying() {
+            try {
+                const response = await fetch('https://lastplayed.prigoana.com/Labirint84/');
+                const data = await response.json();
+
+                const track = data.track;
+                if (track && track["@attr"] && track["@attr"].nowplaying === "true") {
+                    const nowPlayingInfo = document.getElementById('nowPlayingInfo');
+                    const nowPlayingImage = document.getElementById('nowPlayingImage');
+
+                    nowPlayingInfo.innerHTML = `${track.name} by ${track.artist["#text"]}`;
+                    nowPlayingImage.innerHTML = `<img src="${track.image[2]["#text"]}" alt="${track.name}">`;
+                }
+            } catch (error) {
+                console.error('Error fetching now playing:', error);
+            }
+        }
+
+        // Call fetchNowPlaying on page load
+        fetchNowPlaying();
+
+        // Set an interval to fetch now playing every 3 seconds
+        setInterval(fetchNowPlaying, 3000);
+
+        // Function to update iframe content
+        async function updateIframeContent() {
+            try {
+                const iframe = document.getElementById("queueTable");
+                const response = await fetch('/queue_table');
+                const html = await response.text();
+
+                // Replace iframe content with smooth transition
+                iframe.srcdoc = html;
+
+                // Optionally: Apply smooth fade in for iframe content
+                iframe.classList.add('content');
+            } catch (error) {
+                console.error('Error updating iframe:', error);
+            }
+        }
+
+        // Update iframe content every 3 seconds
+        setInterval(updateIframeContent, 3000);
 
-        // Add event listener for resize events
-        window.addEventListener('resize', resizeIframe);
     </script>
 </body>
 </html>
diff --git a/templates/queue_table.html b/templates/queue_table.html
index fd4e40b..2f377cf 100644
--- a/templates/queue_table.html
+++ b/templates/queue_table.html
@@ -1,63 +1,32 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                font-family: Arial, sans-serif;
-            }
-            h2 {
-                color: #000000;
-                margin: 10px 0;
-            }
-            .now-playing {
-                text-align: center;
-                margin: 20px 0;
-                font-size: 1.2em;
-            }
-            table {
-                border-collapse: collapse;
-                margin: 0;
-                font-size: 1em;
-                font-family: Arial, sans-serif;
-            }
-            th, td {
-                padding: 12px;
-                border: 1px solid #ddd;
-                text-align: left;
-            }
-            th {
-                background-color: #000000;
-                color: white;
-            }
-            body {
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
+<!doctype html>
+<html lang="en" class="pico">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark" />
+    <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fuchsia.min.css"
+  >
+    <title>table</title>
+  </head>
 <body>
-    <center>
-        <table>
-            <thead>
-                <tr>
-                    <th>#</th>
-                    <th>Track</th>
-                    <th>Artist</th>
+    <center>    <main class="container">
+        <table class="striped" style="table-layout: fixed; overflow: hidden;">
+            <thead style="  text-align: center;">
+                <tr style="  text-align: center;">
+                    <th scope="row" style="  text-align: center;">Track</th>
+                    <th style="  text-align: center;">Artist</th>
                 </tr>
-            </thead>
-            <tbody>
+            </thead style="  text-align: center;">
+            <tbody style="  text-align: center;">
                 {% for i in range(length) %}
-                <tr>
-                    <td>{{ i+1 }}</td>
-                    <td>{{ queue[i].track }}</td>
-                    <td>{{ queue[i].artist }}</td>
+                <tr style="  text-align: center;">
+                    <td style="  text-align: center;">{{ queue[i].track }}</td>
+                    <td style="  text-align: center;">{{ queue[i].artist }}</td>
                 </tr>
                 {% endfor %}
             </tbody>
-        </table></center>
+        </table></center></main>
 </body>
 </html>

Track	Artist
{{ i+1 }}	{{ queue[i].track }}	{{ queue[i].artist }}
{{ queue[i].track }}	{{ queue[i].artist }}