ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

added queue system on rooms

Browse Source
This commit is contained in:
lenafx
2026-01-04 21:09:04 +01:00
parent 4bf23980c2
commit 6e51bf8568
12 changed files with 1060 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docker/views/room.html
View File

@@ -21,9 +21,6 @@
<div class="video-area">
<div class="room-header">
<div class="header-left">
<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">
<h2 id="room-name">Loading...</h2>
<div id="now-playing-info" class="np-fade">
@@ -128,27 +125,36 @@
</div>
</div>
</div>
<div class="chat-sidebar" id="chat-sidebar">
<div class="chat-header">
<h3>Chat</h3>
<button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List">
<svg width="20" height="20" 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 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 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" autocapitalize="off" spellcheck="false" />
<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 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>
@@ -244,10 +250,14 @@
<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;"></div>
<div class="form-actions" style="margin-top:auto;">
<button id="btn-launch-stream" class="btn-confirm full-width" disabled>
<div class="form-actions" style="margin-top:auto; display:flex; gap:10px;">
<button id="btn-add-queue" class="btn-cancel" style="flex:1; justify-content: center; border-color: var(--brand-color); color: white;" disabled>
+ Add to Queue
</button>
<button id="btn-launch-stream" class="btn-confirm" style="flex:1;" disabled>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
Play in Room
Play Now
</button>
</div>
</div>