Skip to content

Added recently played songs feature #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thunderbolt164 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added recently played songs feature #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4a26725
Added recently played songs feature
thunderbolt164 May 22, 2026
cdf15eb
Resloved merge conflicts
thunderbolt164 May 23, 2026
70105e9
Resloved merge conflicts and format code
thunderbolt164 May 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@ mod tests {
#[actix_web::test]
async fn test_unknown_route_returns_404() {
let app = test::init_service(App::new().service(home)).await;
let req = test::TestRequest::get().uri("/nonexistent").send_request(&app).await;
let req = test::TestRequest::get()
.uri("/nonexistent")
.send_request(&app)
.await;
assert!(req.status().is_client_error());
}
}
}
27 changes: 27 additions & 0 deletions static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,33 @@ body {
.song-artist { color: var(--text-dim); font-size: 0.85rem; }
.song-duration { color: var(--text-dim); font-size: 0.85rem; }

/* Recently Played Section */

.recent-section{
margin-top:3rem;
}
.recent-list{
list-style:none;
display:flex;
flex-direction:column;
gap:0.75rem;
}
.recent-card{
display:flex;
align-items:center;
gap:1rem;
padding:0.85rem 1rem;
background: var(--bg-elev);
border:1px solid var(--border);
border-radius:12px;
transition: 0.2s ease;
}

.recent-card:hover{
background: var(--bg-elev-2);
transform: translateY(-1px);
}

/* Footer */
.site-footer {
text-align: center;
Expand Down
57 changes: 51 additions & 6 deletions static/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
console.log("RustTune loaded");
document.addEventListener("DOMContentLoaded", () => {
console.log("RustTune volume controller initialized");

document.addEventListener("DOMContentLoaded", () => {
const muteBtn = document.getElementById("mute-btn");
const volumeSlider = document.getElementById("volume-slider");

Expand All @@ -19,16 +18,16 @@ document.addEventListener("DOMContentLoaded", () => {

volumeSlider.addEventListener("input", (e) => {
const val = parseFloat(e.target.value);

if (val > 0) {
savedVolume = val;
}

updateIcon(val);
});

muteBtn.addEventListener("click", (e) => {
e.stopPropagation();
e.stopPropagation();

const currentVal = parseFloat(volumeSlider.value);

Expand All @@ -41,4 +40,50 @@ document.addEventListener("DOMContentLoaded", () => {
updateIcon(savedVolume);
}
});
});

// Recently played songs
const songCards = document.querySelectorAll(".song-card");

const recentList = document.getElementById("recent-list");

let recentlyPlayed = JSON.parse(localStorage.getItem("recentSongs")) || [];

function renderRecentSongs() {
recentList.innerHTML = "";

recentlyPlayed.forEach((song) => {
const songItem = document.createElement("li");

songItem.classList.add("recent-card");

songItem.innerHTML = `
<div class="song-cover">🎵</div>

<div class="song-meta">
<p class="song-title">${song}</p>
<p class="song-artist">Recently Played</p>
</div>
`;

recentList.appendChild(songItem);
});
}

songCards.forEach((card) => {
card.addEventListener("click", () => {
const songName = card.dataset.song;

recentlyPlayed = recentlyPlayed.filter((song) => song !== songName);

recentlyPlayed.unshift(songName);

recentlyPlayed = recentlyPlayed.slice(0, 10);

localStorage.setItem("recentSongs", JSON.stringify(recentlyPlayed));

renderRecentSongs();
});
});

renderRecentSongs();
});
196 changes: 99 additions & 97 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,138 +1,140 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>RustTune</title>
<link rel="stylesheet" href="/static/css/style.css" />
</head>
<title>RustTune</title>
<link rel="stylesheet" href="/static/css/style.css" />
</head>

<body>
<body>
<header class="site-header">
<div class="logo">🎧 RustTune</div>

<header class="site-header">
<div class="logo">🎧 RustTune</div>
<nav class="nav">
<a href="#" class="nav-link active">Home</a>
<a href="#" class="nav-link">Browse</a>
<a href="#" class="nav-link">Library</a>
<a href="#" class="nav-link">About</a>
</nav>

<nav class="nav">
<a href="#" class="nav-link active">Home</a>
<a href="#" class="nav-link">Browse</a>
<a href="#" class="nav-link">Library</a>
<a href="#" class="nav-link">About</a>
</nav>
<div class="header-actions">
<input type="search" class="search" placeholder="Search songs..." />

<div class="header-actions">
<input
type="search"
class="search"
placeholder="Search songs..."
/>

<button class="btn btn-ghost">Sign In</button>
</div>
</header>

<main class="container">
<button class="btn btn-ghost">Sign In</button>
</div>
</header>

<section class="play-section">
<main class="container">
<section class="play-section">
<div class="now-playing">
<div class="cover-art">🎵</div>

<div class="now-playing">
<div class="track-info">
<p class="eyebrow">Now Playing</p>

<div class="cover-art">🎵</div>
<h1 class="track-title">Feel The Music</h1>

<div class="track-info">
<p class="track-artist">RustTune • Modern Music Experience</p>

<p class="eyebrow">Now Playing</p>
<div class="player-controls">
<button class="ctrl">⏮</button>

<h1 class="track-title">Feel The Music</h1>
<button class="ctrl ctrl-play">▶</button>

<p class="track-artist">
RustTune • Modern Music Experience
</p>
<button class="ctrl">⏭</button>

<div class="player-controls">
<button class="ctrl">⏮</button>
<button class="ctrl ctrl-play">▶</button>
<button class="ctrl">⏭</button>
<div class="volume-wrapper">
<button class="ctrl ctrl-volume" id="mute-btn">🔊</button>

<div class="volume-wrapper">
<button class="ctrl ctrl-volume" id="mute-btn">🔊</button>
<div class="slider-panel">
<input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.8">
<div class="slider-panel">
<input
type="range"
id="volume-slider"
min="0"
max="1"
step="0.01"
value="0.8"
/>
</div>
</div>
</div>
</div>
</div>

<div class="progress">
<div class="progress">
<span class="time">0:00</span>

<span class="time">0:00</span>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>

<div class="progress-bar">
<div class="progress-fill"></div>
<span class="time">3:42</span>
</div>

<span class="time">3:42</span>

</div>

</div>
</section>

</div>
<section class="songs-section">
<div class="section-head">
<h2>Popular Songs</h2>

</section>
<a href="#" class="see-all">See all</a>
</div>

<section class="songs-section">
<ul class="song-list">
<li class="song-card" data-song="Midnight Echo">
<div class="song-cover">🎶</div>

<div class="section-head">
<h2>Popular Songs</h2>
<a href="#" class="see-all">See all</a>
</div>
<div class="song-meta">
<p class="song-title">Midnight Echo</p>

<ul class="song-list">
<p class="song-artist">Electronic Vibes</p>
</div>

<li class="song-card">
<div class="song-cover">🎶</div>
<span class="song-duration">3:24</span>
</li>

<div class="song-meta">
<p class="song-title">Midnight Echo</p>
<p class="song-artist">Electronic Vibes</p>
</div>
<li class="song-card" data-song="Neon Waves">
<div class="song-cover">🎧</div>

<span class="song-duration">3:24</span>
</li>
<div class="song-meta">
<p class="song-title">Neon Waves</p>

<li class="song-card">
<div class="song-cover">🎧</div>
<p class="song-artist">Synth Pop</p>
</div>

<div class="song-meta">
<p class="song-title">Neon Waves</p>
<p class="song-artist">Synth Pop</p>
</div>
<span class="song-duration">4:05</span>
</li>

<span class="song-duration">4:05</span>
</li>
<li class="song-card" data-song="Dream Runner">
<div class="song-cover">🎤</div>

<li class="song-card">
<div class="song-cover">🎤</div>
<div class="song-meta">
<p class="song-title">Dream Runner</p>

<div class="song-meta">
<p class="song-title">Dream Runner</p>
<p class="song-artist">Lo-Fi Beats</p>
</div>
<p class="song-artist">Lo-Fi Beats</p>
</div>

<span class="song-duration">2:58</span>
</li>
<span class="song-duration">2:58</span>
</li>
</ul>
</section>

</ul>
<section class="recent-section">
<div class="section-head">
<h2>Recently Played</h2>

</section>
<a href="#" class="see-all">View History</a>
</div>

</main>
<ul class="recent-list" id="recent-list"></ul>
</section>
</main>

<footer class="site-footer">
<p>© 2026 RustTune • Made with Rust 🦀</p>
</footer>
<footer class="site-footer">
<p>© 2026 RustTune • Made with Rust 🦀</p>
</footer>

<script src="/static/js/script.js"></script>

</body>
</html>
<script src="/static/js/script.js"></script>
</body>
</html>
Loading