Added "Simple" theme

now-playing/script.js

@@ -19,7 +19,7 @@ const mainContainer = document.getElementById('main-container');
 const theme = urlParams.get('theme') || 'standard';
 const font = urlParams.get("font") || "";
 const fontSize = GetIntParam("fontSize", 20);
-const width = GetIntParam("width", 500);
+const maxWidth = GetIntParam("maxWidth", 500);
 const albumArt = urlParams.get('albumArt') || 'show';
 const showProgressBar = GetBooleanParam("showProgressBar", true);
 

now-playing/settings/settings.json

@@ -43,9 +43,9 @@
 			"group": "Appearance"
 		},
 		{
-			"id": "width",
+			"id": "maxWidth",
-			"label": "Width",
+			"label": "Max Width",
-			"description": "",
+			"description": "Set to 0 to utilize full browser width",
 			"type": "number",
 			"defaultValue": 500,
 			"group": "Appearance"

now-playing/style.css

@@ -10,4 +10,5 @@ body {
     justify-content: center;
     align-items: center;
     height: 100vh; /* Full viewport height */
+    margin: 0.5em;
 }

now-playing/themes/simple/index.html

@@ -0,0 +1,11 @@
+<div id="main-wrapper">
+    <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="track-label" class="text-label">&nbsp;</div>
+        <div id="artist-label" class="text-label">&nbsp;</div>
+    </div>
+</div>

now-playing/themes/simple/script.js

@@ -0,0 +1,212 @@
+/////////////////
+// GLOBAL VARS //
+/////////////////
+
+let CurrentPlaybackStatus;
+let CurrentSong;
+let hideTimeout = null;
+
+///////////////////
+// PAGE ELEMENTS //
+///////////////////
+
+const mainWrapper = document.getElementById('main-wrapper');
+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');
+
+
+
+////////////////
+// PAGE SETUP //
+////////////////
+
+if (maxWidth > 0)
+    mainWrapper.style.width = `${maxWidth}px`;
+else
+    mainWrapper.style.width = `100%`;
+
+// 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';
+
+
+
+////////////////////
+// CORE FUNCTIONS //
+////////////////////
+
+// Each theme must implement the following
+function UpdatePlayerState(data) {
+    // Check if the user has provided a target application in the settings
+    const isFiltering = targetApplication && targetApplication.trim() !== "";
+
+    // Search for the session that matches the target application
+    const sessionToFind = isFiltering ? targetApplication : data.current_session_id;
+    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 a target session was found, update the state of the widget
+    if (targetSession) {
+        // Extract the relevant properties from the session
+        const playbackInfo = targetSession.playback_info;
+        const mediaProps = targetSession.media_properties;
+        const timelineProps = targetSession.timeline_properties;
+
+        // 1. 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;
+        }
+
+        // 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded
+        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
+        }
+
+        // // 3. Update the progress info
+        // if (timelineProps)
+        // {
+        //     // Parse the Windows timestamp into a JavaScript time object
+        //     const lastUpdateAnchor = Date.parse(timelineProps.LastUpdatedTime.replace(' ', 'T'));
+
+        //     // Calculate the drift (i.e. how many milliseconds have passed since Windows last updated)
+        //     const driftMs = Date.now() - lastUpdateAnchor;
+
+        //     // Add that drift to the reported Position
+        //     // Only add drift if the status is PLAYING
+        //     const isPlaying = (targetSession.playback_info.PlaybackStatus === PlaybackStatus.PLAYING);
+        //     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
+    {
+        SetVisibility(false);
+    }
+}
+
+
+
+//////////////////////
+// HELPER FUNCTIONS //
+//////////////////////
+
+function SetVisibility(visible) {
+    // Always clear any pending hide timers whenever we change visibility
+    if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+    }
+
+    if (visible) {
+        mainWrapper.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 {
+        mainWrapper.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);
+}
+
+function SetAlbumArtSize() {
+    const height = songInfoContainer.offsetHeight;
+    albumArtContainer.style.height = `${1.5 * height}px`;
+    albumArtContainer.style.width = `${1.5 * height}px`;
+}
+
+SetAlbumArtSize();

now-playing/themes/simple/style.css

@@ -0,0 +1,209 @@
+#main-wrapper {
+    width: 500px;
+    display: flex;
+    flex-direction: row;
+    /* This forces both containers to be the same height */
+    align-items: stretch; 
+    gap: 1em;
+    opacity: 0;
+	align-items: center;
+}
+
+#album-art-container {
+    /* 1. Tell it to maintain a 1:1 square ratio */
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+    border-radius: 0.25em;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+}
+
+#album-art-layer,
+#album-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;
+    overflow: hidden;
+}
+
+#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;
+}
+
+@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;
+	}
+}

now-playing/themes/standard/script.js

@@ -30,7 +30,10 @@ const durationLabel = document.getElementById('duration');
 // PAGE SETUP //
 ////////////////
 
-mainWrapper.style.width = `${width}px`;
+if (maxWidth > 0)
+    mainWrapper.style.width = `${maxWidth}px`;
+else
+    mainWrapper.style.width = `100%`;
 
 // Set album art style
 switch (albumArt)