diff --git a/now-playing/settings/settings.json b/now-playing/settings/settings.json
index bc9aecd..3314956 100644
--- a/now-playing/settings/settings.json
+++ b/now-playing/settings/settings.json
@@ -65,7 +65,7 @@
"label": "Show"
}
],
- "defaultValue": "none",
+ "defaultValue": "show",
"group": "Appearance"
},
{
diff --git a/now-playing/themes/card/index.html b/now-playing/themes/card/index.html
new file mode 100644
index 0000000..7bcf8c2
--- /dev/null
+++ b/now-playing/themes/card/index.html
@@ -0,0 +1,30 @@
+
\ No newline at end of file
diff --git a/now-playing/themes/card/script.js b/now-playing/themes/card/script.js
new file mode 100644
index 0000000..66b5672
--- /dev/null
+++ b/now-playing/themes/card/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 = `100%`;
+ // albumArtContainer.style.width = `100%`;
+}
+
+SetAlbumArtSize();
\ No newline at end of file
diff --git a/now-playing/themes/card/style.css b/now-playing/themes/card/style.css
new file mode 100644
index 0000000..ef95aad
--- /dev/null
+++ b/now-playing/themes/card/style.css
@@ -0,0 +1,291 @@
+#main-wrapper {
+ width: 500px;
+ display: flex;
+ flex-direction: row;
+ /* This forces both containers to be the same height */
+ align-items: stretch;
+ gap: 0.5em;
+ opacity: 0;
+}
+
+#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;
+ margin: 0.5em 0em 1em 0em;
+}
+
+#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;
+ 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(5px) 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;
+ }
+}
\ No newline at end of file
diff --git a/now-playing/themes/compact/index.html b/now-playing/themes/compact/index.html
index 8f058e1..f93bd51 100644
--- a/now-playing/themes/compact/index.html
+++ b/now-playing/themes/compact/index.html
@@ -4,8 +4,8 @@
diff --git a/now-playing/themes/compact/style.css b/now-playing/themes/compact/style.css
index 8c0ee36..a020f08 100644
--- a/now-playing/themes/compact/style.css
+++ b/now-playing/themes/compact/style.css
@@ -42,15 +42,15 @@
}
#artist-label {
- font-weight: 700;
-}
-
-#track-label {
font-size: 0.8em;
font-weight: 400;
opacity: 0.7;
}
+#track-label {
+ font-weight: 700;
+}
+
.text-label {
white-space: nowrap;