creations
a3b03fdec4
All checks were successful
Code quality checks / biome (push) Successful in 22s
165 lines
5.7 KiB
HTML
165 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Watch Stream</title>
|
|
|
|
<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>
|
|
|
|
<body>
|
|
<div class="watch-container">
|
|
<header class="watch-header">
|
|
<div class="header-content">
|
|
<a href="/" class="back-btn">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m15 18-6-6 6-6" />
|
|
</svg>
|
|
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>
|
|
|
|
<div class="video-container">
|
|
<div id="loadingState" class="loading-overlay">
|
|
<div class="spinner"></div>
|
|
<p>Loading stream...</p>
|
|
</div>
|
|
|
|
<div id="errorState" class="error-overlay" style="display: none;">
|
|
<div class="error-content">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="15" y1="9" x2="9" y2="15"></line>
|
|
<line x1="9" y1="9" x2="15" y2="15"></line>
|
|
</svg>
|
|
<h3>Stream Unavailable</h3>
|
|
<p id="errorMessage">The stream is currently offline or unavailable.</p>
|
|
<button id="retryBtn" class="retry-btn">Try Again</button>
|
|
</div>
|
|
</div>
|
|
|
|
<video id="videoPlayer" class="video-player" controls autoplay muted style="display: none;">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
|
|
<div class="stream-status-container">
|
|
<div class="stream-stats" id="streamStats" style="display: none;">
|
|
<div class="stat">
|
|
<span class="stat-label">Viewers</span>
|
|
<span class="stat-value" id="viewerCount">0</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Bitrate</span>
|
|
<span class="stat-value" id="bitrate">0 kbps</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Quality</span>
|
|
<span class="stat-value" id="quality">Unknown</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stream-info-panel">
|
|
<div class="info-section">
|
|
<h3>Stream Information</h3>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<span class="info-label">Stream ID:</span>
|
|
<span class="info-value" id="streamId">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Video Codec:</span>
|
|
<span class="info-value" id="videoCodec">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Audio Codec:</span>
|
|
<span class="info-value" id="audioCodec">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Resolution:</span>
|
|
<span class="info-value" id="resolution">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h3>Stream URLs</h3>
|
|
<div class="url-list">
|
|
<div class="url-item">
|
|
<span class="url-label">HLS:</span>
|
|
<div class="url-value" id="hlsUrl" title="Click to copy">-</div>
|
|
</div>
|
|
<div class="url-item">
|
|
<span class="url-label">HTTP-FLV:</span>
|
|
<div class="url-value" id="flvUrl" title="Click to copy">-</div>
|
|
</div>
|
|
<div class="url-item">
|
|
<span class="url-label">WebRTC:</span>
|
|
<div class="url-value" id="webrtcUrl" title="Click to copy">-</div>
|
|
</div>
|
|
</div>
|
|
</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>
|