renderStaticParties(root, parties))
- .catch((err: unknown) => {
- console.error('[home] static parties failed to load', err);
- const section = root.querySelector('#staticSection') as HTMLElement | null;
- if (section) section.hidden = true;
- });
-}
-
-/** One card per static watch party: progress, the viewer's missed count,
- * and whether a session is running right now. */
-function renderStaticParties(root: HTMLElement, parties: StaticPartySummaryDto[]): void {
- const section = root.querySelector('#staticSection') as HTMLElement | null;
- const list = root.querySelector('#staticCarousel');
- if (!section || !list) return; // navigated away mid-flight
- section.hidden = !parties.length;
- list.innerHTML = parties.map((p) => `
-
- })
-
- ${escapeHtml(p.name)}
- ${p.groupWatchedCount}/${p.itemCount} vus · ${p.memberCount} membre${p.memberCount > 1 ? 's' : ''}
- ${p.livePartyId ? '● Séance en cours' : ''}
-
- ${p.missedCount ? `${p.missedCount} manqué${p.missedCount > 1 ? 's' : ''}` : ''}
-
- `).join('');
-}
-
const TICKS_PER_SECOND = 10000000; // Emby/.NET convention: 1 tick = 100ns, same as everywhere else this app touches durations/positions
/**
diff --git a/client/src/views/staticParties/StaticParties.css b/client/src/views/staticParties/StaticParties.css
new file mode 100644
index 0000000..fe57ad6
--- /dev/null
+++ b/client/src/views/staticParties/StaticParties.css
@@ -0,0 +1,81 @@
+/* ---- "Watch parties permanentes" tab: one card per static party ---- */
+
+.staticGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 14px;
+}
+
+/* The whole card is the link to /static/:id. */
+.staticCard {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ background: var(--bg-header);
+ border-radius: 10px;
+ padding: 12px;
+ color: inherit;
+ text-decoration: none;
+}
+
+.staticCard:hover { background: #2b252e; }
+
+.staticCard img {
+ width: 60px;
+ height: 90px;
+ object-fit: cover;
+ border-radius: 6px;
+ background: var(--panel);
+ flex-shrink: 0;
+}
+
+.staticCard img.noImage { visibility: hidden; }
+
+.staticCardInfo {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.staticCardInfo strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.staticCardInfo .hint { margin: 0; }
+
+.staticCardNext {
+ font-size: 12px;
+ color: var(--muted);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.staticCardBar {
+ height: 4px;
+ border-radius: 2px;
+ background: var(--panel);
+ overflow: hidden;
+}
+
+.staticCardBar > div { height: 100%; background: var(--accent); }
+
+.staticCardLive {
+ color: var(--accent-bright);
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.staticCardMissed {
+ flex-shrink: 0;
+ align-self: flex-start;
+ padding: 4px 10px;
+ border-radius: 12px;
+ background: var(--danger);
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+@media (max-width: 400px) {
+ .staticGrid { grid-template-columns: 1fr; }
+}
diff --git a/client/src/views/staticParties/StaticParties.html b/client/src/views/staticParties/StaticParties.html
new file mode 100644
index 0000000..ce208ce
--- /dev/null
+++ b/client/src/views/staticParties/StaticParties.html
@@ -0,0 +1,9 @@
+
+
+ Une série ou une playlist regardée en groupe sur plusieurs séances : la progression du groupe
+ et celle de chacun sont gardées en mémoire. Pour en créer une, ouvre une série ou une playlist
+ vidéo et choisis « Créer une watch party permanente ».
+
+
diff --git a/client/src/views/staticParties/StaticParties.ts b/client/src/views/staticParties/StaticParties.ts
new file mode 100644
index 0000000..bee983a
--- /dev/null
+++ b/client/src/views/staticParties/StaticParties.ts
@@ -0,0 +1,76 @@
+import './StaticParties.css';
+import html from './StaticParties.html';
+import { connectLobby } from '../../api/party';
+import { listStaticParties } from '../../api/staticParty';
+import { escapeHtml } from '../../tiles';
+import { LOADING_HINT } from '../../loading';
+import type { StaticPartySummaryDto } from '../../types';
+
+/**
+ * Route `/static` - the "Watch parties permanentes" tab: every static
+ * watch party, kept apart from the home page's classic live parties
+ * (whose lobby list leaves static sessions out - see Home.ts).
+ *
+ * A REST list, re-fetched whenever the set of live static-party sessions
+ * in the lobby changes (a session starting or ending is what moves a
+ * card's "séance en cours"/progress state). Not on every lobby snapshot:
+ * those also fire on every pause/join, and each list fetch reads Emby
+ * once per static party (see server/src/index.ts's syncStaticSource).
+ */
+export function renderStaticParties(root: HTMLElement): () => void {
+ root.innerHTML = html;
+ const grid = root.querySelector('#staticGrid') as HTMLElement;
+ grid.innerHTML = LOADING_HINT;
+
+ let sessionsKey: string | null = null;
+ const lobby = connectLobby((parties) => {
+ const key = parties.map((p) => p.staticPartyId).filter(Boolean).sort().join(',');
+ if (key === sessionsKey) return;
+ sessionsKey = key;
+ load(grid);
+ });
+
+ // Same leak-prevention contract as Home.ts: the router calls this before
+ // rendering the next view.
+ return function cleanup() {
+ lobby.disconnect();
+ };
+}
+
+/** Fetches and renders every static party into `grid`. */
+function load(grid: HTMLElement): void {
+ listStaticParties()
+ .then((parties) => {
+ if (!grid.isConnected) return; // navigated away mid-flight
+ render(grid, parties);
+ })
+ .catch((err: unknown) => {
+ console.error('[staticParties] list failed to load', err);
+ if (grid.isConnected) grid.innerHTML = `${escapeHtml((err as Error).message)}
`;
+ });
+}
+
+/** One card per static party: progress, next item, the viewer's missed
+ * count, and whether a session is running right now. */
+function render(grid: HTMLElement, parties: StaticPartySummaryDto[]): void {
+ if (!parties.length) {
+ grid.innerHTML = 'Aucune watch party permanente pour le moment.
';
+ return;
+ }
+ grid.innerHTML = parties.map((p) => {
+ const percent = p.itemCount ? Math.round((p.groupWatchedCount / p.itemCount) * 100) : 0;
+ return `
+
+
+
+
${escapeHtml(p.name)}
+
${p.sourceType === 'series' ? 'Série' : 'Playlist'} · ${p.groupWatchedCount}/${p.itemCount} vus · ${p.memberCount} membre${p.memberCount > 1 ? 's' : ''}
+
+ ${p.livePartyId
+ ? '
● Séance en cours'
+ : `
${p.nextItemName ? `Prochain : ${escapeHtml(p.nextItemName)}` : 'Le groupe a tout vu.'}`}
+