nathanwoodburn/spotifyd-webui
1
0
Fork 0
generated from nathanwoodburn/python-webserver-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add initial spotify restart app
All checks were successful
Build Docker / BuildImage (push) Successful in 2m10s
Details

Browse Source
This commit is contained in:
Nathan Woodburn
2025-07-08 22:49:53 +10:00
parent 9cf1ff4126
commit 43c0f83b57
3 changed files with 37 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
server.py
View File

@@ -74,9 +74,24 @@ def wellknown(path):
# region Main routes
@app.route("/")
def index():
# Get current time in the format "dd MMM YYYY hh:mm AM/PM"
current_datetime = datetime.now().strftime("%d %b %Y %I:%M %p")
return render_template("index.html", datetime=current_datetime)
return render_template("index.html")
@app.route("/restart")
def restart():
"""
Restart the server by redirecting to the same URL.
This is a simple way to restart the server without needing to stop it manually.
"""
# Execute a `pkill spotifyd` command to stop the spotifyd process
status = os.system("pkill spotifyd")
# Start with a new process
os.system("spotifyd -d 'Family Room'")
return redirect('/')
@app.route("/<path:path>")

16
templates/assets/css/index.css
View File

@@ -39,3 +39,19 @@ a:hover {
line-height: 1.6;
margin-bottom: 15px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #ffffff;
color: #000000;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
border: 1px solid #ffffff;
}
.button:hover {
background-color: #000000;
color: #ffffff;
border: 1px solid #ffffff;
}

41
templates/index.html
View File

@@ -12,48 +12,11 @@
<body>
<div class="spacer"></div>
<div class="centre">
<h1>Nathan.Woodburn/</h1>
<span>The current date and time is {{datetime}}</span>
<h1>Spotify Player</h1>
<a href="/restart" class="button">Restart</a>
</div>
<div class="spacer"></div>
<div class="centre">
<h2 id="test-content-header">Pulling data</h2>
<span class="test-content">This is a test content area that will be updated with data from the server.</span>
<br>
<br>
<span class="test-content-timestamp">Timestamp: Waiting to pull data</span>
</div>
<script>
function fetchData() {
// Fetch the data from the server
fetch('/api/v1/data')
.then(response => response.json())
.then(data => {
// Get the data header element
const dataHeader = document.getElementById('test-content-header');
// Update the header with the fetched data
dataHeader.textContent = data.header;
// Get the test content element
const testContent = document.querySelector('.test-content');
// Update the content with the fetched data
testContent.textContent = data.content;
// Get the timestamp element
const timestampElement = document.querySelector('.test-content-timestamp');
// Update the timestamp with the fetched data
timestampElement.textContent = `Timestamp: ${data.timestamp}`;
})
.catch(error => console.error('Error fetching data:', error));
}
// Initial fetch after 2 seconds
setTimeout(fetchData, 2000);
// Then fetch every 2 seconds
setInterval(fetchData, 2000);
</script>
</body>