add chat :p
All checks were successful
Code quality checks / biome (push) Successful in 22s

This commit is contained in:
creations 2025-06-08 19:57:50 -04:00
parent ae3224c18b
commit a3b03fdec4
Signed by: creations
GPG key ID: 8F553AA4320FC711
14 changed files with 2200 additions and 37 deletions

View file

@ -8,9 +8,11 @@
<script src="/public/js/flv.min.js"></script>
<script type="module" src="/public/js/watch.js" defer></script>
<script type="module" src="/public/js/moveableChat.js" defer></script>
<link rel="stylesheet" href="/public/css/style.css">
<link rel="stylesheet" href="/public/css/watch.css">
<link rel="stylesheet" href="/public/css/moveableChat.css">
<meta name="color-scheme" content="dark">
</head>
@ -26,6 +28,15 @@
Back to Dashboard
</a>
<h1 id="streamTitle">Loading Stream...</h1>
<div class="stream-controls">
<button id="toggleChatBtn" class="control-btn" title="Toggle Chat">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
</button>
</div>
</div>
</header>
@ -78,14 +89,6 @@
<span class="info-label">Stream ID:</span>
<span class="info-value" id="streamId">-</span>
</div>
<div class="info-item">
<span class="info-label">Application:</span>
<span class="info-value" id="streamApp">-</span>
</div>
<div class="info-item">
<span class="info-label">Duration:</span>
<span class="info-value" id="streamDuration">-</span>
</div>
<div class="info-item">
<span class="info-label">Video Codec:</span>
<span class="info-value" id="videoCodec">-</span>
@ -104,10 +107,6 @@
<div class="info-section">
<h3>Stream URLs</h3>
<div class="url-list">
<div class="url-item">
<span class="url-label">RTMP:</span>
<div class="url-value" id="rtmpUrl" title="Click to copy">-</div>
</div>
<div class="url-item">
<span class="url-label">HLS:</span>
<div class="url-value" id="hlsUrl" title="Click to copy">-</div>
@ -124,6 +123,43 @@
</div>
</div>
</div>
<div id="moveableChatFrame" class="moveable-chat-frame" style="display: none;">
<div class="chat-frame-header" id="chatFrameHeader">
<div class="chat-frame-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
<span>Stream Chat</span>
</div>
<div class="chat-frame-controls">
<button id="minimizeChatBtn" class="chat-control-btn" title="Minimize">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6" />
</svg>
</button>
<button id="closeChatBtn" class="chat-control-btn" title="Close">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
<div class="chat-frame-content" id="chatFrameContent">
</div>
<div class="resize-handle resize-handle-n"></div>
<div class="resize-handle resize-handle-s"></div>
<div class="resize-handle resize-handle-e"></div>
<div class="resize-handle resize-handle-w"></div>
<div class="resize-handle resize-handle-ne"></div>
<div class="resize-handle resize-handle-nw"></div>
<div class="resize-handle resize-handle-se"></div>
<div class="resize-handle resize-handle-sw"></div>
</div>
</body>
</html>
</html>