peterstockings/video-sync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Attempt to handle false "ended" events with mkv files in Chrome due to blob bug

Browse Source
This commit is contained in:
Peter Stockings
2026-03-01 21:57:53 +11:00
parent 69feac1d55
commit bec873a9c7
4 changed files with 435 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
public/style.css
View File

@@ -1,5 +1,7 @@
/* ===== Reset & Base ===== */
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
@@ -25,12 +27,13 @@
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--shadow: 0 4px 24px rgba(0,0,0,0.4);
--shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
--transition: 0.2s ease;
--font: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}
html, body {
html,
body {
height: 100%;
font-family: var(--font);
background: var(--bg-primary);
@@ -39,33 +42,45 @@ html, body {
-webkit-font-smoothing: antialiased;
}
input, button, select {
input,
button,
select {
font-family: var(--font);
font-size: inherit;
}
.hidden { display: none !important; }
.hidden {
display: none !important;
}
.view {
display: none;
height: 100vh;
}
.view.active { display: flex; }
.view.active {
display: flex;
}
/* ===== LOBBY ===== */
#lobby {
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 20% 50%, rgba(62,166,255,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(62,166,255,0.04) 0%, transparent 50%),
radial-gradient(ellipse at 20% 50%, rgba(62, 166, 255, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(62, 166, 255, 0.04) 0%, transparent 50%),
var(--bg-primary);
animation: lobbyBg 20s ease-in-out infinite alternate;
}
@keyframes lobbyBg {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.lobby-container {
@@ -86,8 +101,15 @@ input, button, select {
}
@keyframes logoPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.lobby-brand h1 {
@@ -319,14 +341,21 @@ input, button, select {
border-radius: var(--radius);
font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 4px 20px rgba(255,78,69,0.3);
box-shadow: 0 4px 20px rgba(255, 78, 69, 0.3);
z-index: 1000;
animation: toastIn 0.3s ease;
}
@keyframes toastIn {
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* ===== FILE CHECK MODAL ===== */
@@ -342,7 +371,7 @@ input, button, select {
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
@@ -359,8 +388,15 @@ input, button, select {
}
@keyframes modalIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modal-content h2 {
@@ -406,7 +442,7 @@ input, button, select {
margin-top: 10px;
}
.file-info-card .row > div {
.file-info-card .row>div {
flex: 1;
}
@@ -419,14 +455,14 @@ input, button, select {
}
.file-match-status.match {
background: rgba(46,204,113,0.1);
border: 1px solid rgba(46,204,113,0.3);
background: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.3);
color: var(--success);
}
.file-match-status.mismatch {
background: rgba(255,78,69,0.1);
border: 1px solid rgba(255,78,69,0.3);
background: rgba(255, 78, 69, 0.1);
border: 1px solid rgba(255, 78, 69, 0.3);
color: var(--danger);
}
@@ -441,12 +477,70 @@ input, button, select {
flex: 1;
}
/* ===== ROOM VIEW ===== */
.room-layout {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
/* Connection Status Banner */
.connection-status {
position: absolute;
top: 52px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
animation: statusIn 0.3s ease;
transition: opacity 0.5s ease;
}
.connection-status.reconnecting {
background: rgba(243, 156, 18, 0.15);
border: 1px solid rgba(243, 156, 18, 0.4);
color: var(--warning);
animation: statusIn 0.3s ease, statusPulse 2s ease-in-out infinite;
}
.connection-status.reconnected {
background: rgba(46, 204, 113, 0.15);
border: 1px solid rgba(46, 204, 113, 0.4);
color: var(--success);
}
.connection-status.hidden {
display: none !important;
}
@keyframes statusIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes statusPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Video Area */
@@ -572,7 +666,7 @@ input, button, select {
}
.big-play-btn:hover svg circle {
fill: rgba(0,0,0,0.75);
fill: rgba(0, 0, 0, 0.75);
}
/* Controls bar */
@@ -581,7 +675,7 @@ input, button, select {
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
padding: 20px 12px 10px;
opacity: 0;
transition: opacity 0.3s ease;
@@ -602,7 +696,7 @@ input, button, select {
appearance: none;
width: 100%;
height: 4px;
background: rgba(255,255,255,0.2);
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
outline: none;
cursor: pointer;
@@ -620,7 +714,7 @@ input, button, select {
background: var(--accent);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease;
}
@@ -664,7 +758,7 @@ input, button, select {
}
.ctrl-btn:hover {
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
}
.volume-control {
@@ -678,7 +772,7 @@ input, button, select {
appearance: none;
width: 70px;
height: 3px;
background: rgba(255,255,255,0.3);
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
outline: none;
cursor: pointer;
@@ -712,14 +806,14 @@ input, button, select {
.time-display {
font-size: 0.8rem;
color: rgba(255,255,255,0.8);
color: rgba(255, 255, 255, 0.8);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
.speed-select {
background: none;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 4px 8px;
border-radius: 4px;
@@ -773,8 +867,15 @@ input, button, select {
}
@keyframes dotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.users-list {
@@ -845,8 +946,15 @@ input, button, select {
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-msg .msg-author {
@@ -955,4 +1063,4 @@ input, button, select {
.file-badge {
display: none;
}
}
}