mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
Added more settings
This commit is contained in:
@@ -30,24 +30,16 @@ const durationLabel = document.getElementById('duration');
|
||||
// PAGE SETUP //
|
||||
////////////////
|
||||
|
||||
// Set property visibility
|
||||
trackLabel.style.display = showPrimary ? '' : 'none';
|
||||
artistLabel.style.display = showSecondary ? '' : 'none';
|
||||
|
||||
// Set container width
|
||||
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';
|
||||
@@ -169,8 +161,8 @@ async function ChangeTrack(mediaProps) {
|
||||
|
||||
// Wait for fade (0.5s), then swap the real text and hide overlay
|
||||
setTimeout(() => {
|
||||
trackLabel.innerText = mediaProps.Title;
|
||||
artistLabel.innerText = mediaProps.Artist;
|
||||
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
|
||||
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
|
||||
|
||||
// Extract the image source string (use fallback if Windows has no art)
|
||||
const newArtUrl = mediaProps.Base64Image;
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin: 0em 0em 1em 0em;
|
||||
display: var(--show-album-art);
|
||||
}
|
||||
|
||||
#album-art-layer,
|
||||
@@ -90,19 +91,21 @@
|
||||
#track-label {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
text-align: var(--text-alignment);
|
||||
}
|
||||
|
||||
#artist-label {
|
||||
font-size: 0.8em;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
text-align: var(--text-alignment);
|
||||
}
|
||||
|
||||
.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%);
|
||||
mask-image: var(--trailing-fade);
|
||||
-webkit-mask-image: var(--trailing-fade);
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -110,7 +113,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2em;
|
||||
margin-top: 0.2em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#progress-bar-track {
|
||||
|
||||
@@ -16,8 +16,8 @@ const songInfoContainer = document.getElementById('song-info-container');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const trackLabel = document.getElementById('track-label');
|
||||
const artistLabel = document.getElementById('artist-label');
|
||||
const trackLabelBase = document.getElementById('track-label-background');
|
||||
const artistLabelBase = document.getElementById('artist-label-background');
|
||||
const trackLabelBackground = document.getElementById('track-label-background');
|
||||
const artistLabelBackground = document.getElementById('artist-label-background');
|
||||
const songLabel = document.getElementById('song-label');
|
||||
const songLabelBackground = document.getElementById('song-label-background');
|
||||
|
||||
@@ -27,6 +27,13 @@ const songLabelBackground = document.getElementById('song-label-background');
|
||||
// PAGE SETUP //
|
||||
////////////////
|
||||
|
||||
// Set property visibility
|
||||
trackLabel.style.display = showPrimary ? '' : 'none';
|
||||
artistLabel.style.display = showSecondary ? '' : 'none';
|
||||
trackLabelBackground.style.display = showPrimary ? '' : 'none';
|
||||
artistLabelBackground.style.display = showSecondary ? '' : 'none';
|
||||
|
||||
// Set container width
|
||||
if (maxWidth > 0)
|
||||
mainWrapper.style.width = `${maxWidth}px`;
|
||||
else
|
||||
@@ -150,10 +157,10 @@ async function ChangeTrack(mediaProps, accentColor) {
|
||||
|
||||
// Wait for fade (0.5s), then swap the real text and hide overlay
|
||||
setTimeout(() => {
|
||||
trackLabel.innerText = mediaProps.Title;
|
||||
artistLabel.innerText = mediaProps.Artist;
|
||||
trackLabelBase.innerText = mediaProps.Title;
|
||||
artistLabelBase.innerText = mediaProps.Artist;
|
||||
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
|
||||
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
|
||||
trackLabelBackground.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
|
||||
artistLabelBackground.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
|
||||
|
||||
// Extract the image source string (use fallback if Windows has no art)
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
align-items: baseline;
|
||||
gap: 0.5em;
|
||||
min-width: 100%;
|
||||
/* justify-content: center; */
|
||||
justify-content: var(--justify-content);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
@@ -30,24 +30,16 @@ const artistLabel = document.getElementById('artist-label');
|
||||
// PAGE SETUP //
|
||||
////////////////
|
||||
|
||||
// Set property visibility
|
||||
trackLabel.style.display = showPrimary ? '' : 'none';
|
||||
artistLabel.style.display = showSecondary ? '' : 'none';
|
||||
|
||||
// Set container width
|
||||
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';
|
||||
@@ -169,8 +161,8 @@ async function ChangeTrack(mediaProps) {
|
||||
|
||||
// Wait for fade (0.5s), then swap the real text and hide overlay
|
||||
setTimeout(() => {
|
||||
trackLabel.innerText = mediaProps.Title;
|
||||
artistLabel.innerText = mediaProps.Artist;
|
||||
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
|
||||
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
|
||||
|
||||
// Extract the image source string (use fallback if Windows has no art)
|
||||
const newArtUrl = mediaProps.Base64Image;
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: var(--show-album-art);
|
||||
}
|
||||
|
||||
#album-art-layer,
|
||||
@@ -66,18 +67,20 @@
|
||||
#track-label {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
text-align: var(--text-alignment);
|
||||
}
|
||||
|
||||
#artist-label {
|
||||
font-size: 0.8em;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
text-align: var(--text-alignment);
|
||||
}
|
||||
|
||||
.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%);
|
||||
mask-image: var(--trailing-fade);
|
||||
-webkit-mask-image: var(--trailing-fade);
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
}
|
||||
@@ -30,24 +30,16 @@ const durationLabel = document.getElementById('duration');
|
||||
// PAGE SETUP //
|
||||
////////////////
|
||||
|
||||
// Set property visibility
|
||||
trackLabel.style.display = showPrimary ? '' : 'none';
|
||||
artistLabel.style.display = showSecondary ? '' : 'none';
|
||||
|
||||
// Set container width
|
||||
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';
|
||||
@@ -172,8 +164,8 @@ async function ChangeTrack(mediaProps, tintColor) {
|
||||
|
||||
// Wait for fade (0.5s), then swap the real text and hide overlay
|
||||
setTimeout(async () => {
|
||||
trackLabel.innerText = mediaProps.Title;
|
||||
artistLabel.innerText = mediaProps.Artist;
|
||||
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
|
||||
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
|
||||
|
||||
// Extract the image source string (use fallback if Windows has no art)
|
||||
const newArtUrl = mediaProps.Base64Image;
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: var(--show-album-art);
|
||||
}
|
||||
|
||||
#album-art-layer,
|
||||
@@ -89,19 +90,21 @@
|
||||
#track-label {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
text-align: var(--text-alignment);
|
||||
}
|
||||
|
||||
#artist-label {
|
||||
font-size: 0.8em;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
text-align: var(--text-alignment);
|
||||
}
|
||||
|
||||
.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%);
|
||||
mask-image: var(--trailing-fade);
|
||||
-webkit-mask-image: var(--trailing-fade);
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user