Mobile pass on media and script cleanup
This commit is contained in:
Dan
parent
c109391073
commit
80b1d7634a
10 changed files with 194 additions and 120 deletions
68
assets/js/lastfm-utils.js
Normal file
68
assets/js/lastfm-utils.js
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
// Shared Last.fm utilities - using global namespace pattern
|
||||
(function(window) {
|
||||
'use strict';
|
||||
|
||||
// Create global LastFmUtils namespace
|
||||
window.LastFmUtils = {
|
||||
// Last.fm API configuration
|
||||
LASTFM_API_URL: "https://ws.audioscrobbler.com/2.0/",
|
||||
LASTFM_USER: "ritualplays",
|
||||
LASTFM_API_KEY: "3a4fef48fecc593d25e0f9a40df1fefe",
|
||||
|
||||
// Format time difference
|
||||
getTimeAgo: function(timestamp) {
|
||||
const now = Date.now() / 1000;
|
||||
const diff = now - timestamp;
|
||||
|
||||
if (diff < 60) return "Just now";
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
|
||||
return `${Math.floor(diff / 604800)}w ago`;
|
||||
},
|
||||
|
||||
// Fetch recent tracks from Last.fm
|
||||
fetchRecentTracks: async function(limit = 10) {
|
||||
const url = `${this.LASTFM_API_URL}?method=user.getrecenttracks&user=${this.LASTFM_USER}&api_key=${this.LASTFM_API_KEY}&format=json&limit=${limit}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error("Failed to fetch tracks");
|
||||
|
||||
const data = await response.json();
|
||||
return data.recenttracks.track;
|
||||
} catch (error) {
|
||||
console.error("Error fetching Last.fm data:", error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
// Filter tracks to remove duplicates of now playing track
|
||||
// Returns a limited number of unique tracks
|
||||
filterAndLimitTracks: function(tracks, maxTracks = 5) {
|
||||
if (!tracks || tracks.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Check if first track is now playing
|
||||
const hasNowPlaying = tracks[0] && tracks[0]["@attr"] && tracks[0]["@attr"].nowplaying;
|
||||
|
||||
if (hasNowPlaying) {
|
||||
// Show now playing + (maxTracks - 1) latest (excluding duplicates of now playing)
|
||||
const nowPlayingTrack = tracks[0];
|
||||
const nowPlayingId = `${nowPlayingTrack.name}-${nowPlayingTrack.artist["#text"]}`;
|
||||
|
||||
// Get remaining tracks, excluding duplicates of now playing
|
||||
const remainingTracks = tracks.slice(1).filter(track => {
|
||||
const trackId = `${track.name}-${track.artist["#text"]}`;
|
||||
return trackId !== nowPlayingId;
|
||||
});
|
||||
|
||||
return [nowPlayingTrack, ...remainingTracks.slice(0, maxTracks - 1)];
|
||||
} else {
|
||||
// No now playing, show maxTracks latest
|
||||
return tracks.slice(0, maxTracks);
|
||||
}
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
|
|
@ -83,27 +83,8 @@ if (document.getElementById("starfield")) {
|
|||
const container = document.getElementById("recent-tracks");
|
||||
if (!container) return;
|
||||
|
||||
const AUDIO_LASTFM_API_URL = "https://ws.audioscrobbler.com/2.0/";
|
||||
const AUDIO_LASTFM_USER = "ritualplays";
|
||||
const AUDIO_LASTFM_API_KEY = "3a4fef48fecc593d25e0f9a40df1fefe";
|
||||
const AUDIO_TRACK_LIMIT = 6; // Fetch 6 to have enough after filtering
|
||||
|
||||
// Fetch recent tracks from Last.fm for audio page
|
||||
async function fetchAudioRecentTracks() {
|
||||
const url = `${AUDIO_LASTFM_API_URL}?method=user.getrecenttracks&user=${AUDIO_LASTFM_USER}&api_key=${AUDIO_LASTFM_API_KEY}&format=json&limit=${AUDIO_TRACK_LIMIT}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error("Failed to fetch tracks");
|
||||
|
||||
const data = await response.json();
|
||||
return data.recenttracks.track;
|
||||
} catch (error) {
|
||||
console.error("Error fetching Last.fm data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Render recent tracks for audio page (horizontal layout)
|
||||
function renderRecentTracks(tracks) {
|
||||
if (!tracks || tracks.length === 0) {
|
||||
|
|
@ -114,27 +95,8 @@ if (document.getElementById("starfield")) {
|
|||
|
||||
container.innerHTML = "";
|
||||
|
||||
// Check if first track is now playing
|
||||
const hasNowPlaying = tracks[0] && tracks[0]["@attr"] && tracks[0]["@attr"].nowplaying;
|
||||
|
||||
// Filter and limit tracks
|
||||
let tracksToShow;
|
||||
if (hasNowPlaying) {
|
||||
// Show now playing + 4 latest (excluding duplicates of now playing)
|
||||
const nowPlayingTrack = tracks[0];
|
||||
const nowPlayingId = `${nowPlayingTrack.name}-${nowPlayingTrack.artist["#text"]}`;
|
||||
|
||||
// Get remaining tracks, excluding duplicates of now playing
|
||||
const remainingTracks = tracks.slice(1).filter(track => {
|
||||
const trackId = `${track.name}-${track.artist["#text"]}`;
|
||||
return trackId !== nowPlayingId;
|
||||
});
|
||||
|
||||
tracksToShow = [nowPlayingTrack, ...remainingTracks.slice(0, 4)];
|
||||
} else {
|
||||
// No now playing, show 5 latest
|
||||
tracksToShow = tracks.slice(0, 5);
|
||||
}
|
||||
// Filter and limit tracks to 5 (excluding duplicates)
|
||||
const tracksToShow = LastFmUtils.filterAndLimitTracks(tracks, 5);
|
||||
|
||||
tracksToShow.forEach((track) => {
|
||||
const isNowPlaying = track["@attr"] && track["@attr"].nowplaying;
|
||||
|
|
@ -164,12 +126,12 @@ if (document.getElementById("starfield")) {
|
|||
|
||||
// Initialize Last.fm feed for audio page
|
||||
async function initAudioRecentTracks() {
|
||||
const tracks = await fetchAudioRecentTracks();
|
||||
const tracks = await LastFmUtils.fetchRecentTracks(AUDIO_TRACK_LIMIT);
|
||||
renderRecentTracks(tracks);
|
||||
|
||||
// Update every 30 seconds
|
||||
setInterval(async () => {
|
||||
const updatedTracks = await fetchAudioRecentTracks();
|
||||
const updatedTracks = await LastFmUtils.fetchRecentTracks(AUDIO_TRACK_LIMIT);
|
||||
renderRecentTracks(updatedTracks);
|
||||
}, 30000);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,39 +82,8 @@ function initMatrixRain() {
|
|||
});
|
||||
}
|
||||
|
||||
// Last.fm API configuration
|
||||
const LASTFM_API_URL = "https://ws.audioscrobbler.com/2.0/";
|
||||
const LASTFM_USER = "ritualplays";
|
||||
const LASTFM_API_KEY = "3a4fef48fecc593d25e0f9a40df1fefe";
|
||||
const TRACK_LIMIT = 10;
|
||||
|
||||
// Format time difference
|
||||
function getTimeAgo(timestamp) {
|
||||
const now = Date.now() / 1000;
|
||||
const diff = now - timestamp;
|
||||
|
||||
if (diff < 60) return "Just now";
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
|
||||
return `${Math.floor(diff / 604800)}w ago`;
|
||||
}
|
||||
|
||||
// Fetch recent tracks from Last.fm
|
||||
async function fetchRecentTracks() {
|
||||
const url = `${LASTFM_API_URL}?method=user.getrecenttracks&user=${LASTFM_USER}&api_key=${LASTFM_API_KEY}&format=json&limit=${TRACK_LIMIT}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error("Failed to fetch tracks");
|
||||
|
||||
const data = await response.json();
|
||||
return data.recenttracks.track;
|
||||
} catch (error) {
|
||||
console.error("Error fetching Last.fm data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
// Media page configuration
|
||||
const TRACK_LIMIT = 12; // Fetch 12 to have enough after filtering
|
||||
|
||||
// Render tracks to the DOM
|
||||
function renderTracks(tracks) {
|
||||
|
|
@ -129,7 +98,10 @@ function renderTracks(tracks) {
|
|||
|
||||
container.innerHTML = "";
|
||||
|
||||
tracks.forEach((track) => {
|
||||
// Filter and limit tracks to 10 (excluding duplicates of now playing)
|
||||
const tracksToShow = LastFmUtils.filterAndLimitTracks(tracks, 10);
|
||||
|
||||
tracksToShow.forEach((track) => {
|
||||
const isNowPlaying = track["@attr"] && track["@attr"].nowplaying;
|
||||
const trackElement = document.createElement("a");
|
||||
trackElement.href = track.url;
|
||||
|
|
@ -143,7 +115,7 @@ function renderTracks(tracks) {
|
|||
|
||||
// Get timestamp
|
||||
const timestamp = track.date ? track.date.uts : null;
|
||||
const timeAgo = timestamp ? getTimeAgo(timestamp) : "";
|
||||
const timeAgo = timestamp ? LastFmUtils.getTimeAgo(timestamp) : "";
|
||||
|
||||
trackElement.innerHTML = `
|
||||
<div class="track-art ${!hasArt ? "no-art" : ""}">
|
||||
|
|
@ -162,12 +134,12 @@ function renderTracks(tracks) {
|
|||
|
||||
// Initialize Last.fm feed
|
||||
async function initLastFmFeed() {
|
||||
const tracks = await fetchRecentTracks();
|
||||
const tracks = await LastFmUtils.fetchRecentTracks(TRACK_LIMIT);
|
||||
renderTracks(tracks);
|
||||
|
||||
// Update every 30 seconds
|
||||
setInterval(async () => {
|
||||
const updatedTracks = await fetchRecentTracks();
|
||||
const updatedTracks = await LastFmUtils.fetchRecentTracks(TRACK_LIMIT);
|
||||
renderTracks(updatedTracks);
|
||||
}, 30000);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,11 +54,19 @@
|
|||
margin-bottom: 50px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-image: linear-gradient(90deg, transparent, #ff00ff 20%, #00ffff 50%, #ff00ff 80%, transparent) 1;
|
||||
border-image: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#ff00ff 20%,
|
||||
#00ffff 50%,
|
||||
#ff00ff 80%,
|
||||
transparent
|
||||
)
|
||||
1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
pre {
|
||||
> pre {
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
|
|
@ -70,7 +78,7 @@
|
|||
margin: 0;
|
||||
|
||||
@include media-down(lg) {
|
||||
font-size: 12px;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -98,6 +106,16 @@
|
|||
gap: 25px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
display: none;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-image: linear-gradient(90deg, #ff00ff, #00ffff) 1;
|
||||
@include media-down(lg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Subtle divider between items
|
||||
.media-item + .media-item {
|
||||
position: relative;
|
||||
|
|
@ -109,7 +127,13 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #333 20%, #333 80%, transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#333 20%,
|
||||
#333 80%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -120,13 +144,16 @@
|
|||
gap: 25px;
|
||||
padding: 20px;
|
||||
border: 1px solid #333;
|
||||
background: rgba(0,0,0,0.6);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@include media-down(lg) {
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -154,9 +181,9 @@
|
|||
transition: all 0.3s ease;
|
||||
|
||||
@include media-down(lg) {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 450px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -394,6 +421,12 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
@include media-down(lg) {
|
||||
.lastfm-track:nth-child(n + 4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lastfm-loading {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
width: 100%;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
||||
@include media-up(lg) {
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue