mirror of
https://github.com/NohamR/AM-Exporter.git
synced 2026-05-25 04:07:11 +00:00
front change
This commit is contained in:
√(noham)²
52
front-example/html.html
Normal file
52
front-example/html.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Music Player</title>
|
||||
<script src="player.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="boxes">
|
||||
<div id="player" class="player horizontal">
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="info-wrapper">
|
||||
|
||||
<a href="" class="song-url"><img src="" alt="LogoMusicImage" class="artwork_url"></a>
|
||||
|
||||
<div class="info">
|
||||
<a href="" class="song-url">
|
||||
<h1 class="title-song"></h1><h1 class="title-album"></h1>
|
||||
</a>
|
||||
<a href="" class="artist-url">
|
||||
<p class="name-artist"></p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="track-time">
|
||||
<div class="track"></div>
|
||||
<div class="time">
|
||||
<div class="last-time"></div>
|
||||
<div class="total-time"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
105
front-example/player.js
Normal file
105
front-example/player.js
Normal file
@@ -0,0 +1,105 @@
|
||||
function secondsToMinutesAndSeconds(seconds) {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
|
||||
}
|
||||
function fetchDataAndAnimate() {
|
||||
// fetch('http://192.168.1.58:3005/music/get')
|
||||
fetch('https://api.noh.am/music/get')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const artist = data.artist;
|
||||
const album = data.album;
|
||||
const artist_url = data.artist_url;
|
||||
const artwork_url = data.artwork_url;
|
||||
const time = data.time;
|
||||
const itunes_url = data.itunes_url;
|
||||
const name = data.name;
|
||||
const timestamp = parseFloat(data.timestamp);
|
||||
const decalage = (Date.now() / 1000 - timestamp);
|
||||
let pPosition = Math.round(parseFloat(data.pPosition) + decalage - 3);
|
||||
const duration = parseFloat(data.duration);
|
||||
const status = data.status;
|
||||
const dominantcolor = data.dominantcolor;
|
||||
|
||||
const titleSongElement = document.querySelector('.title-song');
|
||||
// titleSongElement.textContent = name;
|
||||
titleSongElement.textContent = `${name} - `
|
||||
|
||||
const titleAlbumElement = document.querySelector('.title-album');
|
||||
titleAlbumElement.textContent = album;
|
||||
|
||||
const artistSongElement = document.querySelector('.name-artist');
|
||||
artistSongElement.textContent = artist;
|
||||
|
||||
const artworkElement = document.querySelector('.artwork_url');
|
||||
artworkElement.src = artwork_url;
|
||||
|
||||
const playerDiv = document.querySelector('.player');
|
||||
const colorString = 'rgb(' + dominantcolor.join(',') + ')';
|
||||
playerDiv.style.backgroundColor = colorString;
|
||||
|
||||
const artist_urlElement = document.querySelector('.artist-url');
|
||||
artist_urlElement.href = artist_url;
|
||||
|
||||
const songUrlElements = document.querySelectorAll('.song-url');
|
||||
songUrlElements.forEach(element => {
|
||||
element.href = itunes_url;
|
||||
});
|
||||
|
||||
if (status === 'playing' && (pPosition / duration) * 100 <= 100) {
|
||||
const totaltimeElement = document.querySelector('.total-time');
|
||||
totaltimeElement.textContent = time;
|
||||
|
||||
const lasttimeElement = document.querySelector('.last-time');
|
||||
lasttimeElement.textContent = secondsToMinutesAndSeconds(pPosition);
|
||||
|
||||
const rapport = (pPosition / duration) * 100;
|
||||
const trackElements = document.querySelectorAll('.track');
|
||||
trackElements.forEach(element => {
|
||||
const style = window.getComputedStyle(element, '::after');
|
||||
const currentWidth = parseFloat(style.getPropertyValue('width'));
|
||||
element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
|
||||
});
|
||||
|
||||
let intervalId;
|
||||
|
||||
function updateProgress() {
|
||||
const lasttimeElement = document.querySelector('.last-time');
|
||||
lasttimeElement.textContent = secondsToMinutesAndSeconds(pPosition);
|
||||
const rapport = (pPosition / duration) * 100;
|
||||
const trackElements = document.querySelectorAll('.track');
|
||||
trackElements.forEach(element => {
|
||||
element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
|
||||
});
|
||||
pPosition++;
|
||||
if (pPosition > duration) {
|
||||
clearInterval(intervalId);
|
||||
fetchDataAndAnimate();
|
||||
}
|
||||
}
|
||||
|
||||
intervalId = setInterval(updateProgress, 1000);
|
||||
}
|
||||
else {
|
||||
const totaltimeElement = document.querySelector('.total-time');
|
||||
totaltimeElement.textContent = time;
|
||||
|
||||
const lasttimeElement = document.querySelector('.last-time');
|
||||
lasttimeElement.textContent = time;
|
||||
|
||||
const rapport = (pPosition / duration) * 100;
|
||||
const trackElements = document.querySelectorAll('.track');
|
||||
trackElements.forEach(element => {
|
||||
const style = window.getComputedStyle(element, '::after');
|
||||
const currentWidth = parseFloat(style.getPropertyValue('width'));
|
||||
element.style.setProperty('--new-width', `100%`);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchDataAndAnimate();
|
||||
134
front-example/style.css
Normal file
134
front-example/style.css
Normal file
@@ -0,0 +1,134 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body * {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
#boxes * {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
#boxes {
|
||||
display: grid;
|
||||
grid-template-columns: max-content max-content;
|
||||
grid-template-areas:
|
||||
'A B'
|
||||
'A C';
|
||||
gap: 32px;
|
||||
place-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.song-url, .artist-url {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#player {
|
||||
grid-area: B;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
#player .controls {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.player {
|
||||
background-color: rgb(119, 119, 119);
|
||||
padding: 28px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.player img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
.info {
|
||||
color: #E1E1E6;
|
||||
}
|
||||
|
||||
.info p {
|
||||
opacity: 0.68;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.player h1 {
|
||||
font-size: 27px;
|
||||
color: #E1E1E6;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.track {
|
||||
padding-top: 28px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.track::before {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #D9D9D9;
|
||||
opacity: 0.3;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.track::after {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: var(--new-width);
|
||||
display: block;
|
||||
background: #D9D9D9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.time {
|
||||
opacity: 0.7;
|
||||
font-size: 14px;
|
||||
color: gainsboro;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 9.6px;
|
||||
}
|
||||
|
||||
@media (max-width: 670px) {
|
||||
#boxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 270px;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
padding-block: 60px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user