noham/AM-Exporter
1
0
Fork 0
mirror of https://github.com/NohamR/AM-Exporter.git synced 2026-05-25 19:58:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

textColorOnBackground

Browse Source
This commit is contained in:
√(noham)²
2024-03-26 18:13:37 +01:00
parent 4c9b7e633c
commit 8ae08cc047
3 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front-example/html.html
View File

@@ -26,7 +26,7 @@
<h1 class="title-song"></h1><h1 class="title-album"></h1> <h1 class="title-song"></h1><h1 class="title-album"></h1>
</a> </a>
<a href="" class="artist-url"> <a href="" class="artist-url">
<p class="name-artist"></p> <h1 class="name-artist"></h1>
</a> </a>
</div> </div>

25
front-example/player.js
View File

@@ -3,8 +3,19 @@ function secondsToMinutesAndSeconds(seconds) {
const remainingSeconds = seconds % 60; const remainingSeconds = seconds % 60;
return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
} }
function textColorOnBackground(rgb) {
var r = rgb[0] / 255;
var g = rgb[1] / 255;
var b = rgb[2] / 255;
if (0.2126 * r + 0.7152 * g + 0.0722 * b > 0.5) {
return 'black';
} else {
return 'white';
}
}
function fetchDataAndAnimate() { function fetchDataAndAnimate() {
// fetch('http://192.168.1.58:3005/music/get')
fetch('https://api.noh.am/music/get') fetch('https://api.noh.am/music/get')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@@ -21,16 +32,25 @@ function fetchDataAndAnimate() {
const duration = parseFloat(data.duration); const duration = parseFloat(data.duration);
const status = data.status; const status = data.status;
const dominantcolor = data.dominantcolor; const dominantcolor = data.dominantcolor;
const textColor = textColorOnBackground(dominantcolor);
const lastTime = document.querySelector('.last-time');
lastTime.style.color = textColor;
const totalTime = document.querySelector('.total-time');
totalTime.style.color = textColor;
const titleSongElement = document.querySelector('.title-song'); const titleSongElement = document.querySelector('.title-song');
// titleSongElement.textContent = name; // titleSongElement.textContent = name;
titleSongElement.textContent = `${name} - ` titleSongElement.textContent = `${name} - `
titleSongElement.style.color = textColor;
const titleAlbumElement = document.querySelector('.title-album'); const titleAlbumElement = document.querySelector('.title-album');
titleAlbumElement.textContent = album; titleAlbumElement.textContent = album;
titleAlbumElement.style.color = textColor;
const artistSongElement = document.querySelector('.name-artist'); const artistSongElement = document.querySelector('.name-artist');
artistSongElement.textContent = artist; artistSongElement.textContent = artist;
artistSongElement.style.color = textColor;
const artworkElement = document.querySelector('.artwork_url'); const artworkElement = document.querySelector('.artwork_url');
artworkElement.src = artwork_url; artworkElement.src = artwork_url;
@@ -60,6 +80,7 @@ function fetchDataAndAnimate() {
const style = window.getComputedStyle(element, '::after'); const style = window.getComputedStyle(element, '::after');
const currentWidth = parseFloat(style.getPropertyValue('width')); const currentWidth = parseFloat(style.getPropertyValue('width'));
element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`); element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
element.style.setProperty('--new-color', textColor);
}); });
let intervalId; let intervalId;
@@ -71,6 +92,7 @@ function fetchDataAndAnimate() {
const trackElements = document.querySelectorAll('.track'); const trackElements = document.querySelectorAll('.track');
trackElements.forEach(element => { trackElements.forEach(element => {
element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`); element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
element.style.setProperty('--new-color', textColor);
}); });
pPosition++; pPosition++;
if (pPosition > duration) { if (pPosition > duration) {
@@ -94,6 +116,7 @@ function fetchDataAndAnimate() {
const style = window.getComputedStyle(element, '::after'); const style = window.getComputedStyle(element, '::after');
const currentWidth = parseFloat(style.getPropertyValue('width')); const currentWidth = parseFloat(style.getPropertyValue('width'));
element.style.setProperty('--new-width', `100%`); element.style.setProperty('--new-width', `100%`);
element.style.setProperty('--new-color', textColor);
}); });
} }
}) })

9
front-example/style.css
View File

@@ -58,12 +58,11 @@ body * {
border-radius: 10px; border-radius: 10px;
} }
.info { .info {
color: #E1E1E6; color: #E1E1E6;
} }
.info p { .info .name-artist {
opacity: 0.68; opacity: 0.68;
font-size: 19px; font-size: 19px;
} }
@@ -80,7 +79,6 @@ body * {
padding-bottom: 7px; padding-bottom: 7px;
} }
.controls { .controls {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -109,13 +107,12 @@ body * {
height: 6px; height: 6px;
width: var(--new-width); width: var(--new-width);
display: block; display: block;
background: #D9D9D9; background: var(--new-color);
border-radius: 10px; border-radius: 10px;
} }
.time { .time {
opacity: 0.7; font-size: 15px;
font-size: 14px;
color: gainsboro; color: gainsboro;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;