Nicolas
5182def5c9
A watch party built from a whole series or video playlist that remembers the group's progress and each member's, so someone coming back or joining late sees the items they missed and can catch up (solo, as a catch-up watch party, or by marking items watched). - StaticPartyService + StaticPartyStore: first on-disk state (JSON file under DATA_DIR, atomic debounced writes, flushed on SIGTERM) - each session is an ordinary Party linked via party.staticLink; group position is saved by the 20s sweep and resumed on the next session - PartyService.completeCurrentItem centralizes "item done" (Emby Played + static progress); new host-only "itemEnded" socket event covers the last queued item, which was never marked Played before - missed = group-completed minus watched in-app minus Emby Played - /static/:id view, create buttons on series/playlist pages, home section - Docker volume for /data, spec/static-watch-party.md Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
37 lines
945 B
CSS
37 lines
945 B
CSS
/* ---- Playlist page: detail header + item list ----
|
|
.seriesInfo/.episodeList/.episodeRow are reused as-is from
|
|
views/series/Series.css (already in the bundle - Series.ts is always
|
|
a registered route, see app.ts) - same precedent Album.css already
|
|
set for .seriesInfo. Only the header's own cover art needs its own
|
|
rule here, same reason Album.css gives .albumCover its own aspect
|
|
ratio instead of reusing .seriesPoster's. */
|
|
|
|
.playlistHeader {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.playlistCover {
|
|
width: 160px;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
background: var(--panel);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.playlistCover.noImage { visibility: hidden; }
|
|
|
|
.playlistActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px 16px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.playlistHeader { flex-direction: column; }
|
|
.playlistCover { width: 120px; }
|
|
}
|