josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge the watch party refresh from Codex (tabs, gentle sync, heartbeat) with presenting, invites, Prepared queue and reader view; host reload waits for the restore seek before broadcasting

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-15 20:28:48 +08:00
parent 4e940e7321 088937d4de
commit b588dca461
12 changed files with 566 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/styles.css
View File

@@ -4551,3 +4551,78 @@ html[data-layout] .search-btn:active { transform: scale(.98); }
.search-btn::before { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .search-btn { transition: none; } }
/* Watch party: compact cinema companion, with transport always in reach. */
.party-panel { width: 360px; padding: 16px; gap: 12px; box-shadow: none; background: var(--bg-1); }
.party-panel .pt-head { flex-wrap: wrap; gap: 4px 8px; }
.party-panel #ptTitle { flex: 1; font-size: 16px; }
.party-panel .pt-head .rv-icon { min-width: 44px; height: 44px; order: 1; }
.party-panel .pt-status { order: 2; flex-basis: 100%; font: inherit; font-size: 12px; white-space: normal; }
.party-panel .pt-body { overflow: hidden; gap: 12px; }
.party-panel button, .party-panel input:not([type="checkbox"]) { min-height: 44px; }
.party-panel button:focus-visible, .party-panel input:focus-visible, .party-panel [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.party-panel [hidden] { display: none !important; }
.pt-session { display: flex; align-items: center; gap: 8px; }
.pt-session > div { flex: 1; min-width: 0; }
.pt-caption { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 4px; }
#ptRoomCode { font: 600 18px var(--mono); letter-spacing: .08em; }
.pt-playing { position: relative; padding: 12px; background: var(--bg-2); border-radius: 8px; }
#ptNow { display: block; font-size: 14px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-playing:has(.pt-resync:not([hidden])) { padding-right: 88px; }
.pt-resync { position: absolute; right: 8px; top: 8px; }
.pt-transport { display: flex; gap: 8px; }
.pt-transport button { flex: 1; min-width: 0; }
.pt-transport [data-act="playback"] { background: var(--accent); color: var(--on-play, var(--bg-1)); border-color: var(--accent); }
.pt-tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.pt-tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim); font: inherit; font-size: 14px; cursor: pointer; }
.pt-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.pt-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
.pt-pane[data-pane="chat"] { overflow: hidden; }
.party-panel .pt-chat { flex: 1; min-height: 48px; max-height: none; background: transparent; border: 0; padding: 4px 0; gap: 12px; overflow-anchor: none; }
.pt-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pt-line span { padding: 8px 12px; border-radius: 8px; background: var(--bg-2); max-width: 100%; }
.pt-line.me { align-items: flex-end; }
.pt-line b { font-size: 12px; }
.pt-sys { padding: 4px 0; }
.pt-send { flex-shrink: 0; }
.pt-new { align-self: center; font-size: 12px; }
.pt-hint, .pt-empty { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.pt-empty { margin: auto; padding: 24px 8px; text-align: center; }
.pt-pane h3 { font-size: 14px; margin: 4px 0; }
.pt-pane h3 span { color: var(--text-dim); font-weight: 400; }
.pt-options, .pt-host { display: flex; flex-direction: column; gap: 8px; }
.pt-options { border-block: 1px solid var(--line-soft); padding: 12px 0; }
.party-panel .pt-toggle { min-height: 44px; font-size: 14px; gap: 8px; }
.pt-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.pt-lyrics-controls, .pt-invited { display: flex; flex-wrap: wrap; gap: 8px; }
.party-panel .pt-leave { margin-top: 8px; color: var(--text-2); }
.pt-lobby { overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.pt-lobby h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.pt-lobby p { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; }
.pt-field { display: flex; flex-direction: column; gap: 8px; color: var(--text-2); font-size: 12px; }
.pt-lobby .pt-or { padding-top: 8px; border-top: 1px solid var(--line-soft); }
.pt-dj { display: flex; flex-direction: column; gap: 12px; }
.pt-dj button, .pt-dj input { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.pt-dj .party-dj-search { display: flex; gap: 8px; }
.pt-dj .party-dj-search input { min-width: 0; width: 100%; }
.pt-dj .party-dj-row { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
.pt-dj .party-dj-row b, .pt-dj .party-dj-row small { flex-basis: 100%; overflow-wrap: anywhere; }
.pt-dj .party-dj-row small { color: var(--text-dim); }
@media (min-width: 900px) { .party-present { right: 392px; } }
@media (max-width: 720px) {
.party-panel { width: auto; padding: 12px; height: 62dvh; max-height: min(62dvh, calc(100dvh - max(var(--bottom-chrome, 0px), 96px + env(safe-area-inset-bottom)) - 72px)); }
.party-panel.min { height: auto; }
.party-panel .pt-body { overflow: hidden; }
.party-panel .pt-session { gap: 4px; }
.party-panel .pt-session .np-btn { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { .party-panel *, .party-panel *::before, .party-panel *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 720px) {
.party-panel.min { bottom: calc(max(var(--bottom-chrome, 0px), 96px + env(safe-area-inset-bottom)) + 8px); }
}
@media (max-width: 720px) and (max-height: 700px) {
.party-panel:not(.min) { height: calc(100dvh - max(var(--bottom-chrome, 0px), 96px + env(safe-area-inset-bottom)) - 24px); max-height: none; }
.party-panel, .party-panel .pt-body { gap: 8px; }
.pt-playing .pt-caption, .pt-session .pt-caption { display: none; }
.pt-playing { padding-block: 8px; }
}