klevze/RadioPlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

visual fix

Browse Source
This commit is contained in:
Gregor Klevže
2025-12-30 15:47:48 +01:00
parent fe06fd9763
commit 30ebf5bc5a
3 changed files with 116 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.html
View File

@@ -109,14 +109,20 @@
<span id="volume-value">50%</span> <span id="volume-value">50%</span>
</section> </section>
<!-- Hidden Cast Overlay --> <!-- Hidden Cast Overlay (Beautified) -->
<div id="cast-overlay" class="overlay hidden"> <div id="cast-overlay" class="overlay hidden" aria-hidden="true" data-tauri-drag-region>
<div class="overlay-content"> <div class="modal" role="dialog" aria-modal="true" aria-labelledby="deviceTitle">
<h3>Connect to Device</h3> <h2 id="deviceTitle">Connect to Device</h2>
<ul id="device-list">
<li>Searching...</li> <ul id="device-list" class="device-list">
<!-- Render device items here -->
<li class="device">
<div class="device-main">Scanning...</div>
<div class="device-sub">Searching for speakers</div>
</li>
</ul> </ul>
<button id="close-overlay">Cancel</button>
<button id="close-overlay" class="btn cancel" type="button">Cancel</button>
</div> </div>
</div> </div>

25
src/main.js
View File

@@ -58,6 +58,11 @@ function setupEventListeners() {
castBtn.addEventListener('click', openCastOverlay); castBtn.addEventListener('click', openCastOverlay);
closeOverlayBtn.addEventListener('click', closeCastOverlay); closeOverlayBtn.addEventListener('click', closeCastOverlay);
// Close overlay on background click
castOverlay.addEventListener('click', (e) => {
if (e.target === castOverlay) closeCastOverlay();
});
// Close button // Close button
document.getElementById('close-btn').addEventListener('click', async () => { document.getElementById('close-btn').addEventListener('click', async () => {
const appWindow = getCurrentWindow(); const appWindow = getCurrentWindow();
@@ -213,37 +218,37 @@ function handleVolumeInput() {
// Cast Logic // Cast Logic
async function openCastOverlay() { async function openCastOverlay() {
castOverlay.classList.remove('hidden'); castOverlay.classList.remove('hidden');
deviceListEl.innerHTML = '<li>Scanning...</li>'; castOverlay.setAttribute('aria-hidden', 'false');
deviceListEl.innerHTML = '<li class="device"><div class="device-main">Scanning...</div><div class="device-sub">Searching for speakers</div></li>';
try { try {
const devices = await invoke('list_cast_devices'); const devices = await invoke('list_cast_devices');
deviceListEl.innerHTML = ''; deviceListEl.innerHTML = '';
// Add "Stop Casting / Local" option // Add "This Computer" option
const localLi = document.createElement('li'); const localLi = document.createElement('li');
localLi.textContent = 'This Computer (Local Playback)'; localLi.className = 'device' + (currentMode === 'local' ? ' selected' : '');
localLi.innerHTML = '<div class="device-main">This Computer</div><div class="device-sub">Local Playback</div>';
localLi.onclick = () => selectCastDevice(null); localLi.onclick = () => selectCastDevice(null);
deviceListEl.appendChild(localLi); deviceListEl.appendChild(localLi);
if (devices.length === 0) { if (devices.length > 0) {
const li = document.createElement('li');
li.textContent = 'No speakers found';
deviceListEl.appendChild(li);
} else {
devices.forEach(d => { devices.forEach(d => {
const li = document.createElement('li'); const li = document.createElement('li');
li.textContent = d; li.className = 'device' + (currentMode === 'cast' && currentCastDevice === d ? ' selected' : '');
li.innerHTML = `<div class="device-main">${d}</div><div class="device-sub">Google Cast Speaker</div>`;
li.onclick = () => selectCastDevice(d); li.onclick = () => selectCastDevice(d);
deviceListEl.appendChild(li); deviceListEl.appendChild(li);
}); });
} }
} catch (e) { } catch (e) {
deviceListEl.innerHTML = `<li>Error: ${e}</li>`; deviceListEl.innerHTML = `<li class="device"><div class="device-main">Error</div><div class="device-sub">${e}</div></li>`;
} }
} }
function closeCastOverlay() { function closeCastOverlay() {
castOverlay.classList.add('hidden'); castOverlay.classList.add('hidden');
castOverlay.setAttribute('aria-hidden', 'true');
} }
async function selectCastDevice(deviceName) { async function selectCastDevice(deviceName) {

129
src/styles.css
View File

@@ -408,20 +408,16 @@ input[type=range]::-webkit-slider-thumb {
height: 24px; height: 24px;
} }
/* Cast Overlay */ /* Cast Overlay (Beautified as per layout2_plan.md) */
.overlay { .overlay {
position: absolute; position: fixed;
top: 0; inset: 0;
left: 0; background: rgba(20, 10, 35, 0.45);
width: 100%; backdrop-filter: blur(14px);
height: 100%;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(10px);
z-index: 10;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
border-radius: var(--card-radius); justify-content: center;
z-index: 1000;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.3s; transition: opacity 0.3s;
@@ -432,48 +428,99 @@ input[type=range]::-webkit-slider-thumb {
pointer-events: auto; pointer-events: auto;
} }
.overlay-content { /* Modal */
background: #2a2a2a; .modal {
padding: 24px; width: min(420px, calc(100vw - 48px));
border-radius: 16px; padding: 22px;
width: 80%; border-radius: 22px;
max-height: 70%; background: rgba(30, 30, 40, 0.82);
display: flex; border: 1px solid rgba(255,255,255,0.12);
flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: #fff;
animation: pop 0.22s ease;
-webkit-app-region: no-drag;
}
@keyframes pop {
from { transform: scale(0.94); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.modal h2 {
margin: 0 0 14px;
text-align: center;
font-size: 20px;
}
/* Device list */
.device-list {
list-style: none;
padding: 10px 5px;
margin: 0 0 18px;
max-height: 360px;
overflow-y: auto;
}
/* Device row */
.device {
padding: 12px 14px;
border-radius: 14px;
margin-bottom: 8px;
cursor: pointer;
background: rgba(255,255,255,0.05);
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
text-align: left;
}
.device:hover {
background: rgba(255,255,255,0.10);
transform: translateY(-1px);
}
.device .device-main {
font-size: 15px;
font-weight: 600;
color: var(--text-main); color: var(--text-main);
} }
.overlay-content h3 { .device .device-sub {
margin-top: 0; margin-top: 3px;
font-size: 1.1rem; font-size: 12px;
text-align: center; opacity: 0.7;
color: var(--text-muted);
} }
#device-list { /* Selected device */
list-style: none; .device.selected {
padding: 0; background: linear-gradient(135deg, #c77dff, #8b5cf6);
margin: 16px 0; box-shadow: 0 0 18px rgba(199,125,255,0.65);
overflow-y: auto; color: #111;
flex: 1;
} }
#device-list li { .device.selected .device-main,
padding: 10px; .device.selected .device-sub {
border-bottom: 1px solid rgba(255,255,255,0.1); color: #111;
cursor: pointer;
} }
#device-list li:hover { .device.selected .device-sub {
background: rgba(255,255,255,0.1); opacity: 0.85;
} }
#close-overlay { /* Cancel button */
background: var(--danger); .btn.cancel {
width: 100%;
padding: 12px;
border-radius: 999px;
border: none; border: none;
padding: 10px; background: #d16b7d;
border-radius: 8px; color: #fff;
color: white; font-size: 15px;
cursor: pointer; cursor: pointer;
transition: transform 0.15s ease, background 0.2s;
font-weight: 600; font-weight: 600;
} }
.btn.cancel:hover {
transform: scale(1.02);
background: #e17c8d;
}