added public watch parties with cloudflared

2026-01-04 19:59:37 +01:00
parent d9c1ba3d27
commit 5fe0e319b9
20 changed files with 1426 additions and 458 deletions
--- a/desktop/views/css/room.css
+++ b/desktop/views/css/room.css
@@ -1,6 +1,3 @@
-/* =========================================
-   1. VARIABLES & UTILITIES
-   ========================================= */
 :root {
    --brand-color: #8b5cf6;
    --brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
@@ -11,7 +8,6 @@
    --text-muted: rgba(255, 255, 255, 0.6);
 }

-/* Scrollbar Styles */
 ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
@@ -38,11 +34,6 @@

@keyframes spin { to { transform: rotate(360deg); } }

-/* =========================================
-   2. UI COMPONENTS (Buttons, Inputs, Chips)
-   ========================================= */
-
-/* Glass Buttons & Icons */
 .btn-icon-glass, .btn-icon-small, .modal-close {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
@@ -91,7 +82,6 @@
    transform: translateY(-1px);
 }

-/* Primary/Confirm Buttons */
 .btn-confirm, .btn-primary {
    background: var(--brand-color);
    border: none;
@@ -126,7 +116,6 @@
 }
 .btn-cancel:hover { background: rgba(255, 255, 255, 0.1); color: white; }

-/* Inputs & Selects */
 input[type="text"], input[type="password"], input[type="number"], .form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
@@ -144,16 +133,15 @@ input:focus, .form-input:focus {
    background: rgba(255, 255, 255, 0.08);
 }

-/* Glass Select (Header Style - FIX: Better alignment) */
 .glass-select-sm {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eee;
-    padding: 0 32px 0 12px; /* Extra padding right for arrow */
+    padding: 0 32px 0 12px;
    height: 32px;
-    line-height: 30px; /* Vertically center text */
+    line-height: 30px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
@@ -164,7 +152,6 @@ input:focus, .form-input:focus {
    white-space: nowrap;
    text-overflow: ellipsis;

-    /* SVG Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
@@ -178,7 +165,6 @@ input:focus, .form-input:focus {
 }
 .glass-select-sm option { background: #1a1a1a; color: #e0e0e0; }

-/* Chips (Config Modal) */
 .chips-grid { display: flex; flex-wrap: wrap; gap: 10px; }
 .chip {
    padding: 8px 16px;
@@ -200,9 +186,6 @@ input:focus, .form-input:focus {
 }
 .chip.disabled { opacity: 0.5; pointer-events: none; filter: grayscale(1); }

-/* =========================================
-   3. ROOM LAYOUT (The Watch Page)
-   ========================================= */
 .room-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
@@ -225,7 +208,6 @@ input:focus, .form-input:focus {
    position: relative;
 }

-/* Responsive Layout */
@media (max-width: 1200px) {
    .room-layout {
        grid-template-columns: 1fr;
@@ -241,9 +223,6 @@ input:focus, .form-input:focus {
    }
 }

-/* =========================================
-   4. ROOM HEADER
-   ========================================= */
 .room-header {
    display: flex;
    justify-content: space-between;
@@ -265,7 +244,6 @@ input:focus, .form-input:focus {
 }
 .header-right { justify-content: flex-end; }

-/* Info Section */
 .room-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
 #room-name {
    margin: 0;
@@ -286,7 +264,6 @@ input:focus, .form-input:focus {
    font-weight: 700;
 }

-/* Host Controls (Center) - FIX: Better alignment container */
 .header-center { flex: 2; display: flex; justify-content: center; z-index: 50; }

 .quick-controls-group {
@@ -295,16 +272,15 @@ input:focus, .form-input:focus {
    gap: 8px;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
-    padding: 4px 8px; /* Slightly tighter padding */
+    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
-    height: 42px; /* Explicit height to align children */
+    height: 42px;
 }
 .quick-controls-group:hover { border-color: rgba(255,255,255,0.15); background: rgba(30, 30, 30, 0.7); }

-/* Toggle Sub/Dub Mini */
 .sd-toggle.small {
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
@@ -340,7 +316,6 @@ input:focus, .form-input:focus {
 }
 .sd-toggle.small .sd-option.active { color: #fff; }

-/* Viewers Pill */
 .viewers-pill {
    display: flex;
    align-items: center;
@@ -354,9 +329,6 @@ input:focus, .form-input:focus {
    height: 32px;
 }

-/* =========================================
-   5. VIDEO PLAYER AREA
-   ========================================= */
 .player-wrapper {
    display: flex !important;
    flex-direction: column;
@@ -394,7 +366,6 @@ input:focus, .form-input:focus {
    max-height: 100%;
 }

-/* Custom Controls Layout Fixes */
 .custom-controls {
    position: absolute;
    bottom: 0;
@@ -405,7 +376,6 @@ input:focus, .form-input:focus {
    padding: 20px 10px 10px;
 }

-/* FIX: Ensure left controls stay in one line (time display fix) */
 .controls-left {
    display: flex;
    align-items: center;
@@ -413,14 +383,13 @@ input:focus, .form-input:focus {
 }

 .time-display {
-    white-space: nowrap; /* Prevent line break */
-    font-variant-numeric: tabular-nums; /* Monospaced numbers prevent jitter */
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: #ddd;
    min-width: fit-content;
 }

-/* Subtitles Canvas */
 #subtitles-canvas {
    position: absolute;
    top: 0; left: 0;
@@ -429,7 +398,6 @@ input:focus, .form-input:focus {
    z-index: 10;
 }

-/* Hide unused player buttons in Room Mode */
 #download-btn,
 #manual-match-btn,
 #server-select,
@@ -439,7 +407,6 @@ input:focus, .form-input:focus {
    display: none !important;
 }

-/* Settings Panel Position Fix */
 .settings-panel {
    position: absolute;
    bottom: 70px;
@@ -452,15 +419,13 @@ input:focus, .form-input:focus {
    border-radius: 8px;
 }

-/* =========================================
-   6. CHAT SIDEBAR
-   ========================================= */
 .chat-sidebar {
    display: flex;
    flex-direction: column;
    background: rgba(15, 15, 15, 0.95);
    border-left: 1px solid var(--glass-border);
    height: 100%;
+    overflow: hidden;
 }
 .room-layout.chat-hidden .chat-sidebar {
    opacity: 0;
@@ -477,7 +442,6 @@ input:focus, .form-input:focus {
 }
 .chat-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: white; }

-/* User List */
 .users-list {
    padding: 12px;
    border-bottom: 1px solid var(--glass-border);
@@ -516,7 +480,6 @@ input:focus, .form-input:focus {
    font-weight: 600;
 }

-/* Messages */
 .chat-messages {
    flex: 1;
    overflow-y: auto;
@@ -524,6 +487,7 @@ input:focus, .form-input:focus {
    display: flex;
    flex-direction: column;
    gap: 12px;
+    min-height: 0;
 }
 .chat-message { display: flex; gap: 10px; }
 .chat-message.system { justify-content: center; margin: 8px 0; }
@@ -558,7 +522,6 @@ input:focus, .form-input:focus {
    word-wrap: break-word;
 }

-/* Input Area */
 .chat-input {
    display: flex;
    gap: 8px;
@@ -585,9 +548,6 @@ input:focus, .form-input:focus {
 }
 .chat-input button:hover { background: #7c3aed; }

-/* =========================================
-   7. MODALS & CONFIGURATION
-   ========================================= */
 .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.8);
@@ -617,12 +577,10 @@ input:focus, .form-input:focus {
 .modal-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
 .modal-header-row .modal-title { margin: 0; }

-/* Forms inside modal */
 .form-group { margin-bottom: 20px; }
 .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: white; }
 .form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

-/* Search Step */
 .anime-search-content { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
 .search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
 .search-bar button {
@@ -653,7 +611,6 @@ input:focus, .form-input:focus {
 .search-title { font-weight: 700; color: white; margin-bottom: 4px; font-size: 1rem; }
 .search-meta { font-size: 0.85rem; color: var(--text-muted); }

-/* Config Step (Unified UI) */
 .config-layout { display: flex; gap: 24px; margin-top: 20px; }
 .config-sidebar { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
 .config-cover {
@@ -668,7 +625,6 @@ input:focus, .form-input:focus {
    margin-bottom: 8px; font-weight: 700;
 }

-/* Episode Stepper */
 .ep-control {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.05);
@@ -689,7 +645,6 @@ input:focus, .form-input:focus {
    font-weight: 700; outline: none;
 }

-/* Category Toggle */
 .cat-toggle {
    display: flex; background: rgba(0,0,0,0.3);
    padding: 4px; border-radius: 10px; width: fit-content;
@@ -714,9 +669,6 @@ input:focus, .form-input:focus {
    .ep-control { width: auto; flex: 1; }
 }

-/* =========================================
-   8. ROOM LIST / LOBBY (If used externally)
-   ========================================= */
 .container { max-width: 1400px; margin: 0 auto; padding: 80px 40px 40px; }
 .header h1 {
    font-size: 2.5rem; font-weight: 800;
@@ -772,7 +724,7 @@ input:focus, .form-input:focus {
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
-    border: 3px solid #1a1a1a; /* Borde oscuro para separar del gradiente */
+    border: 3px solid #1a1a1a;
    background: #2a2a2a;
 }

@@ -796,13 +748,13 @@ input:focus, .form-input:focus {

 .video-toast-container {
    position: absolute;
-    bottom: 100px; /* Encima de la barra de controles */
+    bottom: 100px;
    left: 20px;
-    z-index: 80; /* Por encima del video, debajo de los controles */
+    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 10px;
-    pointer-events: none; /* Permitir clicks a través de ellos */
+    pointer-events: none;
    max-width: 400px;
 }

@@ -819,9 +771,8 @@ input:focus, .form-input:focus {
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);

-    /* Animación de entrada y salida */
    animation: toastSlideIn 0.3s ease forwards, toastFadeOut 0.5s ease 4.5s forwards;
-    pointer-events: auto; /* Permitir seleccionar texto si se quiere */
+    pointer-events: auto;
    opacity: 0;
 }

@@ -850,7 +801,6 @@ input:focus, .form-input:focus {
    margin-top: 2px;
 }

-/* --- BADGE DE NOTIFICACIÓN (Punto Rojo) --- */
 #toggle-chat-btn {
    position: relative;
 }
@@ -862,7 +812,7 @@ input:focus, .form-input:focus {
    right: 2px;
    width: 10px;
    height: 10px;
-    background-color: #ef4444; /* Rojo */
+    background-color: #ef4444;
    border: 2px solid #1a1a1a;
    border-radius: 50%;
    animation: pulse 2s infinite;
@@ -885,11 +835,11 @@ input:focus, .form-input:focus {
 }

 .video-toast.system-toast {
-    border-left-color: #9ca3af; /* Borde gris */
-    background: rgba(20, 20, 20, 0.7); /* Un poco más transparente */
+    border-left-color: #9ca3af;
+    background: rgba(20, 20, 20, 0.7);
    justify-content: center;
    padding: 6px 12px;
-    min-height: auto; /* Más compacto */
+    min-height: auto;
 }

 .video-toast.system-toast .toast-msg {
@@ -897,4 +847,78 @@ input:focus, .form-input:focus {
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateX(-50%) translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateX(-50%) translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateX(-50%) translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+#copy-invite-btn {
+    transition: all 0.3s ease;
+}
+
+#copy-invite-btn:hover {
+    transform: scale(1.05);
+}
+
+#copy-invite-btn:active {
+    transform: scale(0.95);
+}
+
+@keyframes scaleIn {
+    from {
+        transform: translate(-50%, -50%) scale(0.8);
+        opacity: 0;
+    }
+    to {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
 }
--- a/desktop/views/room.html
+++ b/desktop/views/room.html
@@ -33,7 +33,7 @@
        <div class="video-area">
            <div class="room-header">
                <div class="header-left">
-                    <button id="leave-room-btn" class="btn-icon-glass" title="Leave">
+                    <button id="leave-room-btn" class="btn-icon-glass" title="Leave" style="visibility: hidden;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
                    </button>
                    <div class="room-info">
@@ -61,6 +61,17 @@
                        <select id="room-server-select" class="glass-select-sm" title="Server">
                            <option value="" disabled selected>Server</option>
                        </select>
+                        <button
+                                id="copy-invite-btn"
+                                class="btn-icon-glass"
+                                title="Copy invite link"
+                                style="display:none;"
+                        >
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M10 13a5 5 0 0 0 7.07 0l1.41-1.41a5 5 0 0 0-7.07-7.07L10 5"/>
+                                <path d="M14 11a5 5 0 0 0-7.07 0L5.5 12.41a5 5 0 0 0 7.07 7.07L14 19"/>
+                            </svg>
+                        </button>
                    </div>
                </div>