Nicolas
b6818655b1
All checks were successful
Publier l'image Docker / publish (push) Successful in 6s
Three changes requested:
1. Server proxies Emby, browser never talks to it directly. Login is
now POST /api/auth/login {username,password} on our own backend;
the backend calls Emby's AuthenticateByName server-side and mints
its own opaque session (httpOnly cookie), storing
{embyToken,userId,userName} in memory. The browser never sees or
holds a real Emby access token. Every other call - search, item
details, images, HLS streaming, party actions - goes to our own
/api/* origin, authenticated by that cookie; server/src/embyProxy.js
forwards to Emby server-side and streams the response back
(including a playlist-rewrite pass for HLS .m3u8 so hls.js never
gets handed a URL pointing at Emby directly). This also sidesteps
the CORS problem the previous direct-to-Emby design had.
2. EMBY_SERVER_URL is backend-only config (.env.example); the login
form no longer asks for a server address at all.
3. client/css/app.css now uses colors read directly off the live Emby
server's own dark theme (--theme-primary-color-* etc, fetched via a
JS probe against the running client, not guessed): accent green
#52b54b/#6ccf65, near-black background #151216.
Tested for real: ran the server locally against the actual
EMBY_SERVER_URL and submitted intentionally-wrong credentials through
the UI - confirmed the full round trip (browser -> our backend -> real
Emby -> real 401 -> our error message) with no CORS issue, since it's
all server-to-server now. Login itself hasn't been exercised with real
credentials, so catalog/streaming remain unverified - see
docs/architecture.md.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import { searchItems, auth, logout } from '../embyApi.js';
|
|
import { navigate } from '../router.js';
|
|
|
|
export function renderBrowse(root) {
|
|
root.innerHTML = `
|
|
<main class="wrap wide">
|
|
<div class="topbar">
|
|
<h1>Watch Party</h1>
|
|
<button class="linklike" id="logout">Se déconnecter (${escapeHtml(auth.userName || '')})</button>
|
|
</div>
|
|
<input id="search" type="search" placeholder="Cherche un film, une série, un épisode..." autofocus />
|
|
<div id="results" class="grid"></div>
|
|
</main>`;
|
|
|
|
root.querySelector('#logout').addEventListener('click', async () => {
|
|
await logout();
|
|
navigate('/login');
|
|
});
|
|
|
|
const input = root.querySelector('#search');
|
|
const results = root.querySelector('#results');
|
|
let debounceTimer;
|
|
|
|
input.addEventListener('input', () => {
|
|
clearTimeout(debounceTimer);
|
|
debounceTimer = setTimeout(runSearch, 300);
|
|
});
|
|
|
|
async function runSearch() {
|
|
const query = input.value;
|
|
if (!query || query.trim().length < 2) {
|
|
results.innerHTML = '';
|
|
return;
|
|
}
|
|
let items;
|
|
try {
|
|
items = await searchItems(query);
|
|
} catch (err) {
|
|
results.innerHTML = '<p class="error">Recherche impossible - le serveur Emby est-il joignable ?</p>';
|
|
return;
|
|
}
|
|
if (!items.length) {
|
|
results.innerHTML = '<p class="hint">Aucun résultat.</p>';
|
|
return;
|
|
}
|
|
results.innerHTML = items.map((item) => `
|
|
<a class="card" href="#/item/${item.id}">
|
|
<img src="${item.imageUrl}" alt="" loading="lazy" />
|
|
<span>${escapeHtml(item.name)}${item.year ? ' (' + item.year + ')' : ''}</span>
|
|
</a>
|
|
`).join('');
|
|
}
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|