300 lines
17 KiB
HTML
300 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||
<title>Watch Party - WaifuBoard</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||
<script type="module">
|
||
import JASSUB from 'https://cdn.jsdelivr.net/npm/jassub@1.8.8/dist/jassub.es.js';
|
||
window.JASSUB = JASSUB;
|
||
</script>
|
||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||
<link rel="stylesheet" href="/views/css/room.css" />
|
||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
||
<link rel="stylesheet" href="/views/css/components/titlebar.css"/>
|
||
<script src="/src/scripts/titlebar.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="titlebar">
|
||
<div class="title-left">
|
||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||
<span class="app-title">WaifuBoard</span>
|
||
</div>
|
||
<div class="title-right">
|
||
<button class="min">−</button>
|
||
<button class="max">🗖</button>
|
||
<button class="close">✕</button>
|
||
</div>
|
||
</div>
|
||
<div id="room-view">
|
||
<div class="room-layout" id="room-layout">
|
||
<div class="video-area">
|
||
<div class="room-header">
|
||
<div class="header-left">
|
||
<div class="room-info">
|
||
<h2 id="room-name">Loading...</h2>
|
||
<div id="now-playing-info" class="np-fade">
|
||
<span id="np-title" class="np-title">Waiting selection...</span>
|
||
<span class="np-sep">•</span>
|
||
<span id="np-episode" class="np-badge">Episode --</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-center" id="host-controls" style="display: none;">
|
||
<div class="quick-controls-group">
|
||
<div class="sd-toggle small" id="room-sd-toggle" data-state="sub">
|
||
<div class="sd-bg"></div>
|
||
<div class="sd-option active" data-val="sub">Sub</div>
|
||
<div class="sd-option" data-val="dub">Dub</div>
|
||
</div>
|
||
|
||
<div class="control-divider"></div>
|
||
|
||
<div class="quick-select-wrapper">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
|
||
<select id="room-ext-select" class="quick-select" title="Extension">
|
||
<option value="" disabled selected>Extension</option>
|
||
</select>
|
||
<div class="select-arrow">▼</div>
|
||
</div>
|
||
|
||
<div class="quick-select-wrapper">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
|
||
<select id="room-server-select" class="quick-select" title="Server">
|
||
<option value="" disabled selected>Server</option>
|
||
</select>
|
||
<div class="select-arrow">▼</div>
|
||
</div>
|
||
|
||
<div class="control-divider"></div>
|
||
|
||
<button id="copy-invite-btn" class="btn-quick-action" title="Copy invite link" style="display:none;">
|
||
<svg width="16" height="16" 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>
|
||
<span>Invite</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<div class="viewers-pill">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||
<span id="room-viewers">0</span>
|
||
</div>
|
||
|
||
<button id="select-anime-btn" class="btn-glass-primary" style="display: none;">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
|
||
</button>
|
||
|
||
<button id="toggle-chat-btn" class="btn-icon-glass" title="Toggle Chat">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="player-wrapper">
|
||
<div class="player-container show-cursor">
|
||
<div class="video-frame">
|
||
<canvas id="subtitles-canvas"></canvas>
|
||
<div id="video-toast-container" class="video-toast-container"></div>
|
||
<video id="player" crossorigin="anonymous" playsinline></video>
|
||
|
||
<div id="player-loading" class="player-loading-overlay">
|
||
<div class="spinner"></div>
|
||
<p id="player-loading-text">Waiting for host...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="custom-controls">
|
||
<div class="progress-container">
|
||
<div class="progress-buffer"></div>
|
||
<div class="progress-played"></div>
|
||
<div class="progress-handle"></div>
|
||
</div>
|
||
|
||
<div class="controls-row">
|
||
<div class="controls-left">
|
||
<button class="control-btn play-pause" id="play-pause-btn">
|
||
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||
</button>
|
||
<button class="control-btn volume" id="volume-btn">
|
||
<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
|
||
</button>
|
||
<input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
|
||
<span class="time-display" id="time-display">0:00 / 0:00</span>
|
||
</div>
|
||
|
||
<div class="controls-center"></div>
|
||
|
||
<div class="controls-right">
|
||
<button class="control-btn settings" id="settings-btn">
|
||
<svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
|
||
</button>
|
||
<div class="settings-panel" id="settings-panel"></div>
|
||
<button class="control-btn fullscreen" id="fullscreen-btn">
|
||
<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-sidebar">
|
||
<div class="sidebar-tabs">
|
||
<button class="tab-btn active" id="tab-chat-btn">Chat</button>
|
||
<button class="tab-btn" id="tab-queue-btn">Queue <span id="queue-count" class="badge">0</span></button>
|
||
</div>
|
||
|
||
<div id="tab-content-chat" class="tab-content active" style="display: flex; flex-direction: column; height: 100%;">
|
||
<div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: flex-end;">
|
||
<button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List" style="width: 32px; height: 32px;">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="9" cy="7" r="4"></circle>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="users-list" id="users-list" style="display: none;"></div>
|
||
<div class="chat-messages" id="chat-messages"></div>
|
||
<form class="chat-input" id="chat-form" autocomplete="off">
|
||
<input type="text" id="chat-input" placeholder="Type a message..." maxlength="500" autocomplete="off" />
|
||
<button type="submit">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
<div id="tab-content-queue" class="tab-content" style="display: none;">
|
||
<div class="queue-list" id="queue-list">
|
||
<div class="queue-empty">Queue is empty</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="join-room-modal">
|
||
<div class="modal-content">
|
||
<div id="join-host-info" class="join-host-info" style="display: none;">
|
||
<div class="join-avatar-container">
|
||
<img id="join-host-avatar" src="" alt="Host">
|
||
</div>
|
||
<p id="join-host-text" class="join-text"></p>
|
||
</div>
|
||
|
||
<h2 class="modal-title" style="text-align: center;">Join Room</h2>
|
||
|
||
<form id="join-room-form">
|
||
<div class="form-group">
|
||
<label>Your Name</label>
|
||
<input type="text" id="guest-name-input" placeholder="Enter your name" maxlength="30" />
|
||
</div>
|
||
|
||
<div class="form-group" id="password-group" style="display: none;">
|
||
<label>Room Password</label>
|
||
<input type="password" id="join-password-input" placeholder="Enter password" maxlength="50" />
|
||
</div>
|
||
|
||
<div class="form-actions" style="justify-content: center;">
|
||
<button type="button" class="btn-cancel" id="cancel-join-btn">Go Back</button>
|
||
<button type="submit" class="btn-confirm">Join Party</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="anime-search-modal">
|
||
<div class="modal-content anime-search-content">
|
||
<button class="modal-close" id="close-search-modal">✕</button>
|
||
|
||
<div id="step-search">
|
||
<h2 class="modal-title">Select Anime</h2>
|
||
<div class="search-bar">
|
||
<input type="text" id="anime-search-input" placeholder="Search anime..." />
|
||
<button id="anime-search-btn">Search</button>
|
||
</div>
|
||
<div id="anime-results" class="anime-results"></div>
|
||
</div>
|
||
|
||
<div id="step-config" style="display: none;">
|
||
<div class="modal-header-row">
|
||
<button class="btn-icon-small" id="back-to-search" title="Back">
|
||
<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>
|
||
<h2 class="modal-title" id="selected-anime-title">Configure Episode</h2>
|
||
</div>
|
||
|
||
<div class="config-layout">
|
||
<div class="config-sidebar">
|
||
<img id="config-cover" class="config-cover" src="" alt="Cover">
|
||
</div>
|
||
|
||
<div class="config-main" style="justify-content: center;">
|
||
|
||
<div style="display: flex; flex-direction: column; height: 100%;">
|
||
|
||
<div class="cfg-header" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
||
<div class="cfg-section-title">Select Episodes</div>
|
||
<div class="cfg-actions">
|
||
<button id="select-all-page" class="btn-text-tiny">Select Page</button>
|
||
<button id="select-none-eps" class="btn-text-tiny">Clear</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="episodes-grid" class="episodes-grid-container">
|
||
<div class="grid-loader">Loading...</div>
|
||
</div>
|
||
|
||
<div id="modal-pagination" class="modal-pagination" style="display: none;">
|
||
<button id="modal-prev-page" class="modal-page-btn">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<span id="modal-page-info" class="modal-page-info">1 - 50</span>
|
||
<button id="modal-next-page" class="modal-page-btn">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="manual-ep-input" style="margin-top: 10px; display: none;">
|
||
<label style="font-size: 0.8rem; color: #aaa;">Manual Entry:</label>
|
||
<div class="ep-control">
|
||
<button class="ep-btn" id="ep-dec">−</button>
|
||
<input type="number" id="inp-episode" class="ep-input" value="1" min="1">
|
||
<button class="ep-btn" id="ep-inc">+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="config-error" style="color:#ff6b6b; font-size:0.9rem; display:none; background:rgba(255,0,0,0.1); padding:10px; border-radius:8px; margin-top: 10px;"></div>
|
||
|
||
<div class="form-actions" style="margin-top:auto; display:flex; gap:10px; padding-top: 20px;">
|
||
<button id="btn-add-queue" class="btn-cancel" style="flex:1; justify-content: center; border-color: var(--brand-color); color: white;">
|
||
+ Add Selected (<span id="sel-count">0</span>)
|
||
</button>
|
||
|
||
<button id="btn-launch-stream" class="btn-confirm" style="flex:1;">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||
Play First
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||
<script src="/src/scripts/utils/search-manager.js"></script>
|
||
<script src="/src/scripts/anime/subtitle-renderer.js"></script>
|
||
<script src="/src/scripts/anime/player.js"></script>
|
||
<script src="/src/scripts/room.js"></script>
|
||
|
||
</body>
|
||
</html> |