Skip to content

Dev: notification types, update UX, Contact/Event fixes, premium glassmorphism UI #10

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

Merged
jerryagenyi merged 8 commits into from
Feb 3, 2026
Merged

Dev: notification types, update UX, Contact/Event fixes, premium glassmorphism UI #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8ff8765
feature: Play after device change, WhatsApp country code, stream labe…
jerryagenyi Feb 2, 2026
9f7936a
fix: Play proxy timeout handling, stream order deduplication
jerryagenyi Feb 2, 2026
1412494
Merge main into dev (sync)
jerryagenyi Feb 2, 2026
aa34433
docs: TODO updates (notification tasks, WhatsApp/Event/Contact notes)
jerryagenyi Feb 2, 2026
23bd205
feat: notification types, update UX, contact/event fixes, single scro…
jerryagenyi Feb 2, 2026
61e8b9c
PR fixes: ContactManager fetch-before-save, scoped duplicate modal, T…
jerryagenyi Feb 2, 2026
9fa0c62
UI/UX v2: glass cards, header-glass on streams, EventManager/ContactM…
jerryagenyi Feb 3, 2026
089a71b
Merge main into dev: resolve conflicts (keep glass UI, body-bg)
jerryagenyi Feb 3, 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
2 changes: 1 addition & 1 deletion public/components/ContactManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,7 +355,7 @@ class ContactManager {
}

container.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
<div class="glass-card p-6">
<div class="mb-4">
<h2 class="text-lg font-bold text-white">📞 Your Feedback Contact</h2>
</div>
Expand Down
2 changes: 1 addition & 1 deletion public/components/EventManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ class EventManager {
}

container.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
<div class="glass-card p-6">
<div class="mb-4">
<h2 class="text-lg font-bold text-white">🎯 Edit Event Details</h2>
</div>
Expand Down
24 changes: 12 additions & 12 deletions public/components/FFmpegStreamsManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ class FFmpegStreamsManager {
</div>
<p data-duplicate-message class="text-gray-300 text-sm mb-6"></p>
<div class="flex justify-end">
<button data-duplicate-ok class="px-4 py-2 bg-[var(--primary-color)] hover:opacity-90 text-white rounded-lg transition-colors">OK</button>
<button data-duplicate-ok class="px-4 py-2 btn-glass btn-glass-primary text-white rounded-lg">OK</button>
</div>
</div>
`;
Expand Down Expand Up @@ -651,7 +651,7 @@ class FFmpegStreamsManager {
id="editStreamName"
value="${stream.name || ''}"
maxlength="50"
class="w-full px-3 py-2 bg-[#1a1a1a] border border-[var(--border-color)] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-[var(--primary-color)] transition-colors pr-12"
class="w-full px-3 py-2 input-glass rounded-lg text-white placeholder-gray-400 transition-colors pr-12"
placeholder="Enter stream name"
required
>
Expand Down Expand Up @@ -688,7 +688,7 @@ class FFmpegStreamsManager {
</button>
<button
type="submit"
class="flex-1 px-4 py-2 bg-[var(--primary-color)]/20 hover:bg-[var(--primary-color)]/30 border border-[var(--primary-color)]/30 text-[var(--primary-color)] rounded-lg transition-all duration-300"
class="flex-1 btn-glass btn-glass-secondary"
>
Update Stream
</button>
Expand Down Expand Up @@ -952,7 +952,7 @@ class FFmpegStreamsManager {
}

this.container.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
<div class="glass-card p-6">
<!-- Header -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
<div>
Expand Down Expand Up @@ -1008,7 +1008,7 @@ class FFmpegStreamsManager {
<p class="text-gray-400 mb-4">No active streams yet. Start streaming audio from any input source.</p>
</div>

<div class="bg-[#111111] border border-[var(--border-color)] rounded-xl p-6 max-w-md mx-auto">
<div class="glass-card-inset rounded-xl p-6 max-w-md mx-auto">
<h4 class="text-white font-medium mb-3">🚀 Quick Start Guide:</h4>
<div class="text-left space-y-2 text-sm text-gray-300">
<div class="flex items-center gap-2">
Expand Down Expand Up @@ -1081,7 +1081,7 @@ class FFmpegStreamsManager {
}

return `
<div class="bg-[#111111] border border-[var(--border-color)] rounded-xl p-5 hover:border-[var(--primary-color)]/30 transition-all duration-300">
<div class="glass-card-inset rounded-xl p-5 hover:border-[var(--primary-color)]/30 transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<!-- Stream Info (label S1, S2, S3 + reorder) -->
<div class="flex items-center gap-4 flex-1">
Expand Down Expand Up @@ -1266,7 +1266,7 @@ class FFmpegStreamsManager {
if (!this.container) return;

this.container.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
<div class="glass-card p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-bold text-white">FFmpeg Streams</h2>
<div class="group relative flex items-center">
Expand All @@ -1279,7 +1279,7 @@ class FFmpegStreamsManager {
<div class="text-center py-8">
<span class="material-symbols-rounded text-4xl text-red-500 mb-2">error</span>
<p class="text-red-400 mb-2">${message}</p>
<button onclick="ffmpegStreamsManager.init()" class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold text-white bg-[var(--primary-color)]/10 hover:bg-[var(--primary-color)]/20 border border-[var(--border-color)] transition-all duration-300">
<button onclick="ffmpegStreamsManager.init()" class="btn-glass btn-glass-secondary text-sm">
<span class="material-symbols-rounded">refresh</span>
Retry
</button>
Expand Down Expand Up @@ -1319,7 +1319,7 @@ class FFmpegStreamsManager {
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30 max-w-lg w-full mx-4">
<div class="glass-card p-6 max-w-lg w-full mx-4">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-rounded text-2xl text-[var(--primary-color)]">radio</span>
<h3 class="text-xl font-bold text-white">🎤 Start New Audio Stream</h3>
Expand All @@ -1346,7 +1346,7 @@ class FFmpegStreamsManager {
<input type="text"
id="stream-name"
maxlength="50"
class="w-full bg-[#2A2A2A] border border-[var(--border-color)] text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5 pr-12"
class="w-full input-glass text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5 pr-12"
placeholder="e.g., Main Room Audio, DJ Mix, Podcast"
required>
<div class="absolute right-3 top-1/2 transform -translate-y-1/2">
Expand All @@ -1361,7 +1361,7 @@ class FFmpegStreamsManager {
<span class="material-symbols-rounded text-sm mr-1">mic</span>
Audio Input Source
</label>
<select id="stream-device" class="w-full bg-[#2A2A2A] border border-[var(--border-color)] text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5" required>
<select id="stream-device" class="w-full input-glass text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5" required>
<option value="">🎯 Select your audio source...</option>
${this.audioDevices.map(device => `
<option value="${device.id}">
Expand All @@ -1384,7 +1384,7 @@ class FFmpegStreamsManager {
<span class="material-symbols-rounded text-sm mr-1">high_quality</span>
Stream Quality
</label>
<select id="stream-bitrate" class="w-full bg-[#2A2A2A] border border-[var(--border-color)] text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5">
<select id="stream-bitrate" class="w-full input-glass text-white text-sm rounded-md focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] block px-3 py-2.5">
<option value="128">🎵 128 kbps - Good (smaller file size)</option>
<option value="192" selected>🎶 192 kbps - High Quality (recommended)</option>
<option value="256">🎼 256 kbps - Very High Quality</option>
Expand Down
24 changes: 12 additions & 12 deletions public/components/HeaderComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,15 +94,15 @@ class HeaderComponent {
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
<div class="glass-card p-6 max-w-md mx-4">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-rounded text-3xl text-green-500">system_update</span>
<div>
<h3 class="text-lg font-semibold text-white">Update Available!</h3>
<p class="text-sm text-gray-400">A new version of LANStreamer is ready</p>
</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-4 mb-4">
<div class="glass-card-inset rounded-lg p-4 mb-4">
<div class="flex justify-between items-center mb-2">
<span class="text-gray-400 text-sm">Current Version</span>
<span class="text-white font-medium">${this.updateInfo.current}</span>
Expand All @@ -113,10 +113,10 @@ class HeaderComponent {
</div>
</div>
<div class="flex gap-3">
<button id="update-view-release" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors">
<button id="update-view-release" class="btn-glass btn-glass-primary flex-1">
View Release
</button>
<button id="update-close-modal" class="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg transition-colors">
<button id="update-close-modal" class="btn-glass btn-glass-secondary flex-1">
Close
</button>
</div>
Expand Down Expand Up @@ -159,13 +159,13 @@ class HeaderComponent {
const streamsUrl = this.serverHost ? `http://${this.serverHost}:3001/streams` : '/streams';

container.innerHTML = `
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-[var(--border-color)] bg-[var(--dark-bg)]/80 px-10 py-4 backdrop-blur-lg">
<header class="header-glass sticky top-0 z-50 flex items-center justify-between whitespace-nowrap px-10 py-4">
<!-- Logo Section -->
<div class="flex items-center gap-4 text-white">
<a href="http://localhost:3001" class="flex items-center gap-2 text-white hover:text-[var(--primary-color)] transition-colors">
<img src="/assets/lanstreamer-logo.png"
alt="LANStreamer"
class="h-16 w-auto"
class="h-16 w-auto logo-glow"
id="logo-image"
onerror="this.style.display='none'; document.getElementById('logo-fallback').style.display='flex';">
<div id="logo-fallback" style="display: none;" class="flex items-center">
Expand All @@ -178,7 +178,7 @@ class HeaderComponent {
<div class="flex items-center gap-3">
<!-- Update Icon: shows badge when update available; click opens modal or runs check -->
<button id="header-update-bell-btn"
class="inline-flex items-center justify-center w-10 h-10 text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 border border-gray-600/30 hover:border-gray-500/50 rounded-lg transition-all duration-300"
class="icon-btn text-gray-300 hover:text-white"
title="Check for Updates"
aria-label="Check for Updates">
<span class="material-symbols-rounded text-sm">system_update</span>
Expand All @@ -188,14 +188,14 @@ class HeaderComponent {
<div class="flex items-center gap-2">
<a href="${streamsUrl}"
target="_blank"
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 border border-gray-600/30 hover:border-gray-500/50 rounded-lg transition-all duration-300"
class="btn-glass btn-glass-secondary"
title="Open Streams Page (for listeners)">
<span class="material-symbols-rounded text-sm">radio</span>
<span class="hidden sm:inline">Listen to Streams</span>
</a>

<button id="header-logout-btn"
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 border border-gray-600/30 hover:border-gray-500/50 rounded-lg transition-all duration-300"
class="btn-glass btn-glass-secondary"
title="Logout from Admin Dashboard"
aria-label="Sign out of admin dashboard"
role="button">
Expand Down Expand Up @@ -318,17 +318,17 @@ class HeaderComponent {
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
<div class="glass-card p-6 max-w-md mx-4">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-rounded text-yellow-500">logout</span>
<h3 class="text-lg font-semibold text-white">Confirm Logout</h3>
</div>
<p class="text-gray-300 mb-6">Are you sure you want to sign out of the admin dashboard?</p>
<div class="flex justify-end gap-3">
<button id="cancel-logout" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg transition-colors">
<button id="cancel-logout" class="btn-glass btn-glass-secondary">
Cancel
</button>
<button id="confirm-logout" class="px-4 py-2 bg-red-600 hover:bg-red-500 text-white rounded-lg transition-colors">
<button id="confirm-logout" class="btn-glass btn-glass-danger">
Sign Out
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions public/components/IcecastManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,7 @@ class IcecastManager {
const icecastAdminUrl = `http://${icecastHost}:${icecastPort}/admin/`;

container.innerHTML = `
<div class="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-2xl p-6 shadow-2xl shadow-black/30">
<div class="glass-card p-6">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center gap-3">
<h2 class="text-xl font-bold text-white">Icecast Server</h2>
Expand All @@ -438,7 +438,7 @@ class IcecastManager {

<div class="space-y-5 ${!this.status.installed ? 'opacity-50' : ''}">
<!-- Server Status -->
<div class="flex items-center gap-4 p-3 bg-[#111111] border border-[var(--border-color)] rounded-xl">
<div class="flex items-center gap-4 p-3 glass-card-inset rounded-xl">
<span class="material-symbols-rounded text-2xl ${statusColor.replace('bg-', 'text-')}">${statusIcon}</span>
<div class="flex-1">
<p class="font-semibold text-white">${this.getServerStatusText()}</p>
Expand Down
Loading
Loading