mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
Added new "Now Playing" widget
This commit is contained in:
nutty
@@ -0,0 +1,28 @@
|
|||||||
|
// ==========================================
|
||||||
|
// WINDOWS SMTC API CONSTANTS (IMMUTABLE)
|
||||||
|
// ==========================================
|
||||||
|
|
||||||
|
// Playback Status (session.playback_info.PlaybackStatus)
|
||||||
|
const PlaybackStatus = Object.freeze({
|
||||||
|
CLOSED: 0, // Engine uninitialized or empty
|
||||||
|
OPENED: 1, // Pipeline loaded but idling
|
||||||
|
CHANGING: 2, // Buffering, track skipping, or seeking
|
||||||
|
STOPPED: 3, // Track queued but fully stopped (at 0:00)
|
||||||
|
PLAYING: 4, // Audio actively streaming (Run dead reckoning)
|
||||||
|
PAUSED: 5 // Audio frozen (Halt dead reckoning)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Playback Type (session.playback_info.PlaybackType)
|
||||||
|
const PlaybackType = Object.freeze({
|
||||||
|
UNKNOWN: 0, // Generic audio wrapper
|
||||||
|
MUSIC: 1, // Pure audio pipeline (Spotify, iTunes, etc.)
|
||||||
|
VIDEO: 2, // Visual media feed (Chrome/Firefox YouTube/Twitch tabs)
|
||||||
|
IMAGE: 3 // Static slideshow presentation hook
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto Repeat Mode (session.playback_info.AutoRepeatMode)
|
||||||
|
const AutoRepeatMode = Object.freeze({
|
||||||
|
NONE: 0, // Plays queue through and terminates
|
||||||
|
TRACK: 1, // Single active song looping indefinitely
|
||||||
|
LIST: 2 // Parent playlist/album looping indefinitely
|
||||||
|
});
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Now Playing</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="shortcut icon" href="#" />
|
||||||
|
<link rel="stylesheet" href="./style.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main-container">
|
||||||
|
<div id="standard-layout">
|
||||||
|
<div id="album-art-container">
|
||||||
|
<div id="album-art-layer"></div>
|
||||||
|
<div id="album-art-transition-layer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="song-info-container">
|
||||||
|
<div id="background-layer"></div>
|
||||||
|
<div id="background-transition-layer"></div>
|
||||||
|
|
||||||
|
<div id="song-info-wrapper">
|
||||||
|
<div id="track-label" class="text-label"> </div>
|
||||||
|
<div id="artist-label" class="text-label"> </div>
|
||||||
|
|
||||||
|
<div id="progress-container">
|
||||||
|
<div id="progress-bar-track">
|
||||||
|
<div id="progress-bar-fill"></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="time-container">
|
||||||
|
<div id="current-time">0:00</div>
|
||||||
|
<div id="duration">0:00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script src="/.common/utils/helpers.js"></script>
|
||||||
|
<script src="/.common/enums/smtc-enums.js"></script>
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
@echo off
|
||||||
|
echo Starting Media Bridge...
|
||||||
|
python smtc-bridge.py
|
||||||
|
pause
|
||||||
@@ -0,0 +1,271 @@
|
|||||||
|
////////////////
|
||||||
|
// PARAMETERS //
|
||||||
|
////////////////
|
||||||
|
|
||||||
|
const queryString = window.location.search;
|
||||||
|
const urlParams = new URLSearchParams(queryString);
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////
|
||||||
|
// PAGE ELEMENTS //
|
||||||
|
///////////////////
|
||||||
|
|
||||||
|
const standardLayout = document.getElementById('standard-layout');
|
||||||
|
const albumArtContainer = document.getElementById('album-art-container');
|
||||||
|
const songInfoContainer = document.getElementById('song-info-container');
|
||||||
|
const albumArtLayer = document.getElementById('album-art-layer');
|
||||||
|
const albumArtTransition = document.getElementById('album-art-transition-layer');
|
||||||
|
const backgroundLayer = document.getElementById('background-layer');
|
||||||
|
const backgroundTransitionLayer = document.getElementById('background-transition-layer');
|
||||||
|
const trackLabel = document.getElementById('track-label');
|
||||||
|
const artistLabel = document.getElementById('artist-label');
|
||||||
|
const progressContainer = document.getElementById('progress-container');
|
||||||
|
const progressBarFill = document.getElementById('progress-bar-fill');
|
||||||
|
const currentTimeLabel = document.getElementById('current-time');
|
||||||
|
const durationLabel = document.getElementById('duration');
|
||||||
|
|
||||||
|
/////////////////
|
||||||
|
// GLOBAL VARS //
|
||||||
|
/////////////////
|
||||||
|
|
||||||
|
let CurrentPlaybackStatus;
|
||||||
|
let CurrentSong;
|
||||||
|
|
||||||
|
/////////////
|
||||||
|
// OPTIONS //
|
||||||
|
/////////////
|
||||||
|
|
||||||
|
const theme = urlParams.get('theme') || 'standard';
|
||||||
|
const font = urlParams.get("font") || "";
|
||||||
|
const fontSize = GetIntParam("fontSize", 20);
|
||||||
|
const width = GetIntParam("width", 500);
|
||||||
|
const albumArt = urlParams.get('albumArt') || 'show';
|
||||||
|
const showProgressBar = GetBooleanParam("showProgressBar", true);
|
||||||
|
|
||||||
|
const targetApplication = urlParams.get('targetApplication') || '';
|
||||||
|
const autoHide = GetBooleanParam("autoHide", false);
|
||||||
|
const displayDuration = GetIntParam("displayDuration", 5);
|
||||||
|
const showAnimation = urlParams.get('showAnimation') || 'fade';
|
||||||
|
const hideAnimation = urlParams.get('hideAnimation') || 'fade';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
////////////////
|
||||||
|
// PAGE SETUP //
|
||||||
|
////////////////
|
||||||
|
|
||||||
|
// Set fonts for the widget
|
||||||
|
document.body.style.fontFamily = font;
|
||||||
|
document.body.style.fontSize = `${fontSize}px`;
|
||||||
|
standardLayout.style.width = `${width}px`;
|
||||||
|
|
||||||
|
// Set album art style
|
||||||
|
switch (albumArt)
|
||||||
|
{
|
||||||
|
case 'none':
|
||||||
|
albumArtContainer.style.display = 'none';
|
||||||
|
break;
|
||||||
|
case 'show':
|
||||||
|
albumArtContainer.style.display = '';
|
||||||
|
break;
|
||||||
|
case 'spinny':
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set progress bar visibility
|
||||||
|
if (!showProgressBar)
|
||||||
|
progressContainer.style.display = 'none';
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////
|
||||||
|
// NOW PLAYING //
|
||||||
|
/////////////////
|
||||||
|
|
||||||
|
async function FetchMedia() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://localhost:5000/now-playing');
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Update the UI with the received data
|
||||||
|
console.log(data);
|
||||||
|
UpdateUI(data);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to connect to Flask media server:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function UpdateUI(data) {
|
||||||
|
// Check if the user has provided a specific app in the settings
|
||||||
|
const isFiltering = targetApplication && targetApplication.trim() !== "";
|
||||||
|
|
||||||
|
// Decide which ID to look for
|
||||||
|
const sessionToFind = isFiltering ? targetApplication : data.current_session_id;
|
||||||
|
|
||||||
|
// Now perform the find
|
||||||
|
let targetSession = data.sessions.find(s => {
|
||||||
|
// If filtering, check if the source_app_id matches the user's string
|
||||||
|
if (isFiltering) {
|
||||||
|
return s.source_app_id.toLowerCase() === targetApplication.toLowerCase();
|
||||||
|
}
|
||||||
|
// Otherwise, match the system's current active session ID
|
||||||
|
return s.source_app_id === sessionToFind;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (targetSession) {
|
||||||
|
// Extract the relevant properties from the session
|
||||||
|
const playbackInfo = targetSession.playback_info;
|
||||||
|
const mediaProps = targetSession.media_properties;
|
||||||
|
const timelineProps = targetSession.timeline_properties;
|
||||||
|
|
||||||
|
// Check if playback status has changed and update visibility accordingly
|
||||||
|
if (playbackInfo.PlaybackStatus !== CurrentPlaybackStatus) {
|
||||||
|
if (playbackInfo.PlaybackStatus === PlaybackStatus.PLAYING)
|
||||||
|
SetVisibility(true);
|
||||||
|
else
|
||||||
|
SetVisibility(false);
|
||||||
|
CurrentPlaybackStatus = playbackInfo.PlaybackStatus;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save current media properties - we can use this to detect track changes and trigger transition animations in the future
|
||||||
|
const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
|
||||||
|
if (newTrackKey !== CurrentSong) {
|
||||||
|
ChangeTrack(mediaProps); // Now trigger your cross-fade logic here!
|
||||||
|
CurrentSong = newTrackKey; // Update the tracker with the string key
|
||||||
|
}
|
||||||
|
|
||||||
|
if (timelineProps)
|
||||||
|
{
|
||||||
|
// Parse the Windows timestamp into a JavaScript time object
|
||||||
|
const lastUpdateAnchor = Date.parse(timelineProps.LastUpdatedTime.replace(' ', 'T'));
|
||||||
|
|
||||||
|
// Calculate the drift: how many milliseconds have passed since Windows last spoke?
|
||||||
|
const driftMs = Date.now() - lastUpdateAnchor;
|
||||||
|
|
||||||
|
// Add that drift to the reported Position
|
||||||
|
// Only add drift if the status is 4 (Playing)
|
||||||
|
const isPlaying = (targetSession.playback_info.PlaybackStatus === 4);
|
||||||
|
const currentPositionMs = isPlaying && timelineProps.EndTime > 0 ? timelineProps.Position + driftMs : timelineProps.Position;
|
||||||
|
|
||||||
|
// Update the label using your naming convention
|
||||||
|
currentTimeLabel.innerText =
|
||||||
|
ConvertMillisecondsToMinutesSoThatItLooksBetterOnTheOverlay(currentPositionMs);
|
||||||
|
|
||||||
|
durationLabel.innerText =
|
||||||
|
ConvertMillisecondsToMinutesSoThatItLooksBetterOnTheOverlay(timelineProps.EndTime);
|
||||||
|
|
||||||
|
// Set progressbar
|
||||||
|
// Ensure we don't divide by zero or exceed 100%
|
||||||
|
const durationMs = timelineProps.EndTime;
|
||||||
|
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
|
||||||
|
progressPercent = Math.min(100, Math.max(0, progressPercent));
|
||||||
|
progressBarFill.style.width = `${progressPercent}%`;
|
||||||
|
progressBarFill.style.setProperty('--accent-color', mediaProps.AccentColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
standardLayout.style.opacity = "0";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start polling every 1000 milliseconds
|
||||||
|
setInterval(FetchMedia, 1000);
|
||||||
|
|
||||||
|
// Run once immediately on script load
|
||||||
|
FetchMedia();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//////////////////////
|
||||||
|
// HELPER FUNCTIONS //
|
||||||
|
//////////////////////
|
||||||
|
|
||||||
|
let hideTimeout = null; // Store the timer in a global/outer variable
|
||||||
|
|
||||||
|
function SetVisibility(visible) {
|
||||||
|
// Always clear any pending hide timers whenever we change visibility
|
||||||
|
if (hideTimeout) {
|
||||||
|
clearTimeout(hideTimeout);
|
||||||
|
hideTimeout = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (visible) {
|
||||||
|
standardLayout.style.animation = `${showAnimation} 0.5s ease-out forwards`;
|
||||||
|
|
||||||
|
// Only set a new timer if autoHide is enabled
|
||||||
|
if (autoHide) {
|
||||||
|
hideTimeout = setTimeout(() => {
|
||||||
|
SetVisibility(false);
|
||||||
|
}, displayDuration * 1000);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
standardLayout.style.animation = `${hideAnimation} 0.5s ease-out forwards`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function ChangeTrack(mediaProps) {
|
||||||
|
// Fade in the overlay (shows the new text)
|
||||||
|
trackLabel.style.opacity = "0";
|
||||||
|
artistLabel.style.opacity = "0";
|
||||||
|
backgroundLayer.style.opacity = "0";
|
||||||
|
albumArtLayer.style.opacity = "0";
|
||||||
|
|
||||||
|
// Wait for fade (0.5s), then swap the real text and hide overlay
|
||||||
|
setTimeout(() => {
|
||||||
|
trackLabel.innerText = mediaProps.Title;
|
||||||
|
artistLabel.innerText = mediaProps.Artist;
|
||||||
|
|
||||||
|
// Extract the image source string (use fallback if Windows has no art)
|
||||||
|
const newArtUrl = mediaProps.Base64Image;
|
||||||
|
const accent = mediaProps.AccentColor || "#ffffff";
|
||||||
|
|
||||||
|
// Set the image
|
||||||
|
backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
|
||||||
|
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
|
||||||
|
|
||||||
|
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
|
||||||
|
// 'rgba(0,0,0,0.6)' ensures the text stays readable
|
||||||
|
backgroundLayer.style.backgroundColor = accent + "80"; // 80 is 50% opacity in hex
|
||||||
|
|
||||||
|
trackLabel.style.opacity = "";
|
||||||
|
artistLabel.style.opacity = "";
|
||||||
|
backgroundLayer.style.opacity = "";
|
||||||
|
albumArtLayer.style.opacity = "";
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// Set the image
|
||||||
|
backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
|
||||||
|
albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`;
|
||||||
|
|
||||||
|
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
|
||||||
|
// 'rgba(0,0,0,0.6)' ensures the text stays readable
|
||||||
|
backgroundTransitionLayer.style.backgroundColor = accent + "80"; // 80 is 50% opacity in hex
|
||||||
|
|
||||||
|
SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
|
||||||
|
}, 250);
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', syncHeights);
|
||||||
|
syncHeights();
|
||||||
|
|
||||||
|
function syncHeights() {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
const height = songInfoContainer.offsetHeight;
|
||||||
|
console.log(height);
|
||||||
|
if (height > 0) {
|
||||||
|
albumArtContainer.style.height = `${height}px`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function ConvertMillisecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) {
|
||||||
|
if (isNaN(time) || time <= 0) return "0:00";
|
||||||
|
|
||||||
|
const totalSeconds = Math.floor(time / 1000);
|
||||||
|
const minutes = Math.floor(totalSeconds / 60);
|
||||||
|
const seconds = totalSeconds % 60;
|
||||||
|
|
||||||
|
return `${minutes}:${('0' + seconds).slice(-2)}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" href="/.common/resources/logo.png" type="image/png">
|
||||||
|
<title>nutty</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
background: #181818;
|
||||||
|
}
|
||||||
|
|
||||||
|
#widgetContainer {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
border-width: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<iframe id="widgetContainer"></iframe>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
const widgetContainer = document.getElementById('widgetContainer');
|
||||||
|
|
||||||
|
const settingsPageURL = '/.common/core/settings-core';
|
||||||
|
|
||||||
|
const currentURL = window.location.href;
|
||||||
|
|
||||||
|
let settingsJSON;
|
||||||
|
let baseURL = currentURL;
|
||||||
|
|
||||||
|
if (baseURL.endsWith("index.html"))
|
||||||
|
baseURL = baseURL.replace("index.html", "");
|
||||||
|
|
||||||
|
settingsJSON = "?settingsJson=" + baseURL + "settings.json";
|
||||||
|
|
||||||
|
const lastSlashIndex = baseURL.lastIndexOf("/");
|
||||||
|
let widgetURL = "&widgetURL=" + baseURL.replace("/settings", "");
|
||||||
|
|
||||||
|
console.debug("Window Ref: " + window.location.href);
|
||||||
|
console.debug("Base URL: " + baseURL);
|
||||||
|
console.debug("Settings JSON: " + settingsJSON);
|
||||||
|
console.debug("Widget URL: " + widgetURL);
|
||||||
|
|
||||||
|
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
|
||||||
@@ -0,0 +1,172 @@
|
|||||||
|
{
|
||||||
|
"settings": [
|
||||||
|
{
|
||||||
|
"id": "theme",
|
||||||
|
"label": "Theme",
|
||||||
|
"description": "",
|
||||||
|
"type": "select",
|
||||||
|
"options": [
|
||||||
|
{
|
||||||
|
"value": "standard",
|
||||||
|
"label": "Standard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "compact",
|
||||||
|
"label": "Compact"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "simple",
|
||||||
|
"label": "Simple"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "card",
|
||||||
|
"label": "Card"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"defaultValue": "standard",
|
||||||
|
"group": "Appearance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "font",
|
||||||
|
"label": "Font",
|
||||||
|
"description": "",
|
||||||
|
"type": "text",
|
||||||
|
"defaultValue": "",
|
||||||
|
"group": "Appearance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "fontSize",
|
||||||
|
"label": "Font Size",
|
||||||
|
"description": "",
|
||||||
|
"type": "number",
|
||||||
|
"defaultValue": 20,
|
||||||
|
"group": "Appearance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "width",
|
||||||
|
"label": "Width",
|
||||||
|
"description": "",
|
||||||
|
"type": "number",
|
||||||
|
"defaultValue": 500,
|
||||||
|
"group": "Appearance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "albumArt",
|
||||||
|
"label": "Album Art",
|
||||||
|
"description": "",
|
||||||
|
"type": "select",
|
||||||
|
"options": [
|
||||||
|
{
|
||||||
|
"value": "none",
|
||||||
|
"label": "Don't display"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "show",
|
||||||
|
"label": "Show"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "spinny",
|
||||||
|
"label": "Spinny disc thingy cause that looks dope as hell"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"defaultValue": "none",
|
||||||
|
"group": "Appearance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "showProgressBar",
|
||||||
|
"label": "Show Progress Bar",
|
||||||
|
"description": "Some apps do not display progress info correctly.",
|
||||||
|
"type": "checkbox",
|
||||||
|
"defaultValue": true,
|
||||||
|
"group": "General"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "targetApplication",
|
||||||
|
"label": "Target Application",
|
||||||
|
"description": "Specific app to track. Leave empty to automatically follow the active player.<br><a href='http://127.0.0.1:5000/sessions' target='_blank' style='color: #4da6ff; text-decoration: underline;'>View active sources</a>",
|
||||||
|
"type": "text",
|
||||||
|
"placeholder": "e.g., Spotify.exe",
|
||||||
|
"defaultValue": "",
|
||||||
|
"group": "General"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "autoHide",
|
||||||
|
"label": "Auto-Hide on Track Change",
|
||||||
|
"description": "If enabled, the widget will show for a set duration whenever a new track starts.",
|
||||||
|
"type": "checkbox",
|
||||||
|
"defaultValue": false,
|
||||||
|
"group": "General"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "displayDuration",
|
||||||
|
"label": "Display Duration (seconds)",
|
||||||
|
"description": "How long the widget should remain visible.",
|
||||||
|
"type": "number",
|
||||||
|
"min": 1,
|
||||||
|
"max": 60,
|
||||||
|
"defaultValue": 5,
|
||||||
|
"showIf": "autoHide",
|
||||||
|
"group": "General"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "showAnimation",
|
||||||
|
"label": "Show Animation",
|
||||||
|
"description": "",
|
||||||
|
"type": "select",
|
||||||
|
"options": [
|
||||||
|
{
|
||||||
|
"value": "fade-in",
|
||||||
|
"label": "Fade In"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-in-from-top",
|
||||||
|
"label": "Slide In From Top"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-in-from-bottom",
|
||||||
|
"label": "Slide In From Bottom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-in-from-left",
|
||||||
|
"label": "Slide In From Left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-in-from-right",
|
||||||
|
"label": "Slide In From Right"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"defaultValue": "slide-in-from-bottom",
|
||||||
|
"group": "General"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "hideAnimation",
|
||||||
|
"label": "Hide Animation",
|
||||||
|
"description": "",
|
||||||
|
"type": "select",
|
||||||
|
"options": [
|
||||||
|
{
|
||||||
|
"value": "fade-out",
|
||||||
|
"label": "Fade Out"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-out-top",
|
||||||
|
"label": "Slide Out Top"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-out-bottom",
|
||||||
|
"label": "Slide Out Down"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-out-left",
|
||||||
|
"label": "Slide Out Left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "slide-out-right",
|
||||||
|
"label": "Slide Out Right"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"defaultValue": "slide-out-bottom",
|
||||||
|
"group": "General"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
import sys
|
||||||
|
import subprocess
|
||||||
|
|
||||||
|
# --- SELF-HEALING DEPENDENCY CHECK ---
|
||||||
|
def check_dependencies():
|
||||||
|
required = {'flask': 'flask', 'flask_cors': 'flask_cors', 'winsdk': 'winsdk', 'PIL': 'Pillow'}
|
||||||
|
for mod, pkg in required.items():
|
||||||
|
try:
|
||||||
|
__import__(mod)
|
||||||
|
except ImportError:
|
||||||
|
print(f"--- Missing dependency: {pkg}. Installing now... ---")
|
||||||
|
try:
|
||||||
|
subprocess.check_call([sys.executable, "-m", "pip", "install", pkg])
|
||||||
|
except subprocess.CalledProcessError:
|
||||||
|
print(f"--- Failed to install {pkg}. Please install it manually. ---")
|
||||||
|
sys.exit(0)
|
||||||
|
|
||||||
|
check_dependencies()
|
||||||
|
|
||||||
|
import asyncio
|
||||||
|
import json
|
||||||
|
import base64
|
||||||
|
import io
|
||||||
|
from PIL import Image
|
||||||
|
from flask import Flask, jsonify
|
||||||
|
from flask_cors import CORS
|
||||||
|
from winsdk.windows.media.control import GlobalSystemMediaTransportControlsSessionManager as SMTC
|
||||||
|
from winsdk.windows.storage.streams import DataReader
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
CORS(app)
|
||||||
|
|
||||||
|
# --- GLOBAL MEMORY CACHE ---
|
||||||
|
ARTWORK_CACHE = {}
|
||||||
|
|
||||||
|
def get_smart_accent(img):
|
||||||
|
"""Sorts pixels by saturation to find the most vibrant color."""
|
||||||
|
thumb = img.copy()
|
||||||
|
thumb.thumbnail((20, 20)) # Higher sample rate than 1x1
|
||||||
|
pixels = list(thumb.getdata())
|
||||||
|
|
||||||
|
# Sort by saturation: (max_channel - min_channel)
|
||||||
|
pixels.sort(key=lambda p: max(p) - min(p), reverse=True)
|
||||||
|
best_rgb = pixels[0]
|
||||||
|
|
||||||
|
# Safety boost: ensure it's readable and vibrant
|
||||||
|
min_val = 80
|
||||||
|
rgb = [max(c, min_val) for c in best_rgb]
|
||||||
|
rgb = [min(int(c * 1.2), 255) for c in rgb]
|
||||||
|
|
||||||
|
return '#{:02x}{:02x}{:02x}'.format(*rgb)
|
||||||
|
|
||||||
|
async def get_all_media_info():
|
||||||
|
global ARTWORK_CACHE
|
||||||
|
import winsdk._winrt
|
||||||
|
try:
|
||||||
|
winsdk._winrt.init_apartment(1)
|
||||||
|
except Exception:
|
||||||
|
pass
|
||||||
|
|
||||||
|
try:
|
||||||
|
manager = await SMTC.request_async()
|
||||||
|
if not manager:
|
||||||
|
return {"current_session_id": None, "sessions": []}
|
||||||
|
|
||||||
|
current_focused = manager.get_current_session()
|
||||||
|
current_session_id = current_focused.source_app_user_model_id if current_focused else None
|
||||||
|
|
||||||
|
all_sessions = manager.get_sessions()
|
||||||
|
sessions_list = []
|
||||||
|
|
||||||
|
for session in all_sessions:
|
||||||
|
app_id = session.source_app_user_model_id
|
||||||
|
raw_playback = session.get_playback_info()
|
||||||
|
raw_timeline = session.get_timeline_properties()
|
||||||
|
raw_media = await session.try_get_media_properties_async()
|
||||||
|
|
||||||
|
playback_data = {
|
||||||
|
"PlaybackStatus": raw_playback.playback_status.value if (raw_playback and raw_playback.playback_status) else 0,
|
||||||
|
"PlaybackType": raw_playback.playback_type.value if (raw_playback and raw_playback.playback_type) else 0,
|
||||||
|
}
|
||||||
|
|
||||||
|
timeline_data = {
|
||||||
|
"Position": int(raw_timeline.position.total_seconds() * 1000) if raw_timeline.position else 0,
|
||||||
|
"EndTime": int(raw_timeline.end_time.total_seconds() * 1000) if raw_timeline.end_time else 0,
|
||||||
|
"LastUpdatedTime": str(raw_timeline.last_updated_time) if raw_timeline.last_updated_time else None
|
||||||
|
}
|
||||||
|
|
||||||
|
title = raw_media.title if raw_media else "Unknown"
|
||||||
|
artist = raw_media.artist if raw_media else "Unknown"
|
||||||
|
track_key = f"{title} - {artist}"
|
||||||
|
|
||||||
|
media_data = {"Title": title, "Artist": artist, "Base64Image": None, "AccentColor": "#ffffff"}
|
||||||
|
|
||||||
|
if app_id in ARTWORK_CACHE and ARTWORK_CACHE[app_id]["track_key"] == track_key:
|
||||||
|
media_data["Base64Image"] = ARTWORK_CACHE[app_id]["base64"]
|
||||||
|
media_data["AccentColor"] = ARTWORK_CACHE[app_id]["accent"]
|
||||||
|
|
||||||
|
elif raw_media and raw_media.thumbnail:
|
||||||
|
try:
|
||||||
|
stream_ref = raw_media.thumbnail
|
||||||
|
stream = await stream_ref.open_read_async()
|
||||||
|
reader = DataReader(stream.get_input_stream_at(0))
|
||||||
|
await reader.load_async(stream.size)
|
||||||
|
buffer = bytearray(stream.size)
|
||||||
|
reader.read_bytes(buffer)
|
||||||
|
|
||||||
|
img = Image.open(io.BytesIO(buffer))
|
||||||
|
hex_color = get_smart_accent(img)
|
||||||
|
base64_art = f"data:image/png;base64,{base64.b64encode(buffer).decode('utf-8')}"
|
||||||
|
|
||||||
|
ARTWORK_CACHE[app_id] = {"track_key": track_key, "base64": base64_art, "accent": hex_color}
|
||||||
|
media_data["Base64Image"] = base64_art
|
||||||
|
media_data["AccentColor"] = hex_color
|
||||||
|
except Exception:
|
||||||
|
pass
|
||||||
|
|
||||||
|
sessions_list.append({
|
||||||
|
"source_app_id": app_id,
|
||||||
|
"playback_info": playback_data,
|
||||||
|
"timeline_properties": timeline_data,
|
||||||
|
"media_properties": media_data
|
||||||
|
})
|
||||||
|
|
||||||
|
return {"current_session_id": current_session_id, "sessions": sessions_list}
|
||||||
|
except Exception as e:
|
||||||
|
return {"current_session_id": None, "sessions": [], "error": str(e)}
|
||||||
|
|
||||||
|
@app.route('/now-playing')
|
||||||
|
def now_playing():
|
||||||
|
loop = asyncio.new_event_loop()
|
||||||
|
asyncio.set_event_loop(loop)
|
||||||
|
try:
|
||||||
|
return jsonify(loop.run_until_complete(get_all_media_info()))
|
||||||
|
finally:
|
||||||
|
loop.close()
|
||||||
|
|
||||||
|
@app.route('/sessions', methods=['GET'])
|
||||||
|
def get_sessions():
|
||||||
|
loop = asyncio.new_event_loop()
|
||||||
|
asyncio.set_event_loop(loop)
|
||||||
|
|
||||||
|
async def fetch():
|
||||||
|
manager = await SMTC.request_async()
|
||||||
|
if not manager: return []
|
||||||
|
return list(set([s.source_app_user_model_id for s in manager.get_sessions()]))
|
||||||
|
|
||||||
|
try:
|
||||||
|
sessions = loop.run_until_complete(fetch())
|
||||||
|
|
||||||
|
# Wrapped in a <body> tag with a dark background and some padding
|
||||||
|
html_list = """
|
||||||
|
<body style='background-color: #121212; color: white; font-family: sans-serif; padding: 20px;'>
|
||||||
|
<h3 style='margin-top: 0;'>Active Audio Sources:</h3>
|
||||||
|
<ul>
|
||||||
|
"""
|
||||||
|
|
||||||
|
if not sessions:
|
||||||
|
html_list += "<li style='color: #888;'>No active audio sources found.</li>"
|
||||||
|
else:
|
||||||
|
for s in sessions:
|
||||||
|
html_list += f"<li style='margin-bottom: 8px; font-size: 1.1em;'>{s}</li>"
|
||||||
|
|
||||||
|
html_list += "</ul></body>"
|
||||||
|
return html_list
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
return f"<body style='background-color: #121212; color: #ff5555;'>Error: {str(e)}</body>"
|
||||||
|
finally:
|
||||||
|
loop.close()
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.run(port=5000, threaded=True)
|
||||||
@@ -0,0 +1,303 @@
|
|||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh; /* Full viewport height */
|
||||||
|
}
|
||||||
|
|
||||||
|
#standard-layout {
|
||||||
|
width: 500px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
/* This forces both containers to be the same height */
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#album-art-container {
|
||||||
|
/* 1. Tell it to maintain a 1:1 square ratio */
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 1em;
|
||||||
|
position: relative;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-layer,
|
||||||
|
#art-transition-layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-layer {
|
||||||
|
z-index: 1;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-transition-layer {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-info-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 1em;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The background now fills the frame */
|
||||||
|
#background-layer,
|
||||||
|
#background-transition-layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
background-blend-mode: overlay; /* Or 'soft-light' for a subtler effect */
|
||||||
|
filter: blur(0px) brightness(0.3);
|
||||||
|
transform: scale(1.1); /* Slightly zoom in to cover edges when blurred */
|
||||||
|
}
|
||||||
|
|
||||||
|
#background-layer {
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#background-transition-layer {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The content sits on top */
|
||||||
|
#song-info-wrapper {
|
||||||
|
position: relative; /* Keeps it in the document flow */
|
||||||
|
z-index: 2; /* Sits above the background-layer */
|
||||||
|
|
||||||
|
padding: 1em 1.75em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#track-label {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
#artist-label {
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: 300;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-label {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
|
||||||
|
-webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
|
||||||
|
transition: opacity 0.25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2em;
|
||||||
|
margin-top: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress-bar-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.4em;
|
||||||
|
border-radius: 1em;
|
||||||
|
background-color: #ffffff3a;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%; /* JS will control this */
|
||||||
|
border-radius: 1em;
|
||||||
|
background-color: var(--accent-color, #ffffff);
|
||||||
|
transition: width 1s ease-in-out, background-color 1s ease-in-out;
|
||||||
|
|
||||||
|
/* This makes the handle track the end of the bar */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress-bar-fill::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -6px; /* Adjust to center the circle on the end of the bar */
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
|
||||||
|
width: 0.8em; /* Diameter of your circle */
|
||||||
|
height: 0.8em;
|
||||||
|
background-color: var(--accent-color, #ffffff);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: brightness(1.4);
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
|
||||||
|
|
||||||
|
/* Optional: Hide it if the width is too small */
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the handle when the progress bar is active */
|
||||||
|
#progress-bar-track:hover #progress-bar-fill::after,
|
||||||
|
#progress-bar-fill:not([style*="width: 0%"])::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#time-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.7em;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-out {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}@keyframes slide-in-from-top {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-in-from-top {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-out-top {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(-1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-in-from-bottom {
|
||||||
|
0% {
|
||||||
|
transform: translateY(1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-out-bottom {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-in-from-left {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-out-left {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-in-from-right {
|
||||||
|
0% {
|
||||||
|
transform: translateX(1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-out-right {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(1em);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user