Refactor HTML structure and CSS classes for video player and chat components to improve accessibility and maintainability
This commit is contained in:
Vincent
parent
14bc8e6f44
commit
9ca65f3c62
2 changed files with 103 additions and 103 deletions
90
index.php
90
index.php
|
|
@ -315,32 +315,32 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
|
|||
<link href="static/css/utilities.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="theater-container">
|
||||
<div class="video-section" id="videoSection">
|
||||
<div class="video-header">
|
||||
<div class="header-left">
|
||||
<div class="logo">DODGERS STREAM</div>
|
||||
<main class="theater" role="main">
|
||||
<section class="theater__video-section" id="videoSection" aria-label="Video Player">
|
||||
<header class="video-player__header">
|
||||
<div class="video-player__header-left">
|
||||
<h1 class="stream-logo">DODGERS STREAM</h1>
|
||||
<div class="stream-stats">
|
||||
<div class="stream-badge">WAITING...</div>
|
||||
<div class="viewer-count" id="viewerCount">0 viewers</div>
|
||||
<span class="stream-stats__status" role="status">WAITING...</span>
|
||||
<span class="stream-stats__viewer-count" id="viewerCount" aria-live="polite">0 viewers</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<button class="manual-refresh-btn" onclick="manualRecovery()" title="Manual Stream Refresh">
|
||||
<div class="video-player__header-controls">
|
||||
<button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
|
||||
🔄 Refresh
|
||||
</button>
|
||||
<select class="quality-selector" id="qualitySelector" style="display:none;">
|
||||
<select class="video-player__quality-selector" id="qualitySelector" style="display:none;" aria-label="Video quality">
|
||||
<option value="auto">Auto Quality</option>
|
||||
<option value="1080p">1080p</option>
|
||||
<option value="720p">720p</option>
|
||||
<option value="480p">480p</option>
|
||||
</select>
|
||||
<button class="toggle-chat-btn" onclick="toggleChat()">
|
||||
<button class="video-player__toggle-chat-btn" data-action="toggle-chat" aria-expanded="false" aria-controls="chatSection">
|
||||
<span id="chatToggleText">Hide Chat</span>
|
||||
<span class="notification-badge" id="notificationBadge">0</span>
|
||||
<span class="video-player__notification-badge" id="notificationBadge" aria-label="New messages">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="video-wrapper">
|
||||
<video
|
||||
id="video-player"
|
||||
|
|
@ -358,46 +358,46 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-section" id="chatSection">
|
||||
<div class="chat-header">
|
||||
<div class="chat-header-left">Live Chat</div>
|
||||
<div class="admin-controls" id="adminControls" style="display:none;">
|
||||
<button class="admin-btn" onclick="clearChat()">Clear</button>
|
||||
<aside class="theater__chat-section" id="chatSection" aria-label="Live Chat">
|
||||
<header class="chat__header">
|
||||
<h2 class="chat__header-title">Live Chat</h2>
|
||||
<div class="chat__admin-controls" id="adminControls" style="display:none;">
|
||||
<button class="chat__admin-btn" data-action="clear-chat" aria-label="Clear all chat messages">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-info">
|
||||
<div class="user-id-display">
|
||||
Your ID: <span class="id-badge" id="userId">Loading...</span>
|
||||
</header>
|
||||
|
||||
<section class="chat__user-info" aria-labelledby="user-info-heading">
|
||||
<h3 id="user-info-heading" class="sr-only">User Information</h3>
|
||||
<div class="chat__user-id-display">
|
||||
Your ID: <span class="chat__user-id-badge" id="userId">Loading...</span>
|
||||
</div>
|
||||
<div class="nickname-input">
|
||||
<input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off">
|
||||
<div class="chat__nickname-input">
|
||||
<input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off" aria-label="Enter your nickname">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connection-status">
|
||||
<span class="status-dot" id="statusDot"></span>
|
||||
</section>
|
||||
|
||||
<div class="chat__connection-status" aria-live="assertive">
|
||||
<span class="chat__connection-indicator" id="statusDot" role="status" aria-label="Connection status"></span>
|
||||
<span id="statusText">Connected</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-messages" id="chatMessages">
|
||||
<div class="empty-chat">No messages yet. Be the first to say hello! 👋</div>
|
||||
</div>
|
||||
|
||||
<div class="typing-indicator" id="typingIndicator">
|
||||
|
||||
<section class="chat__messages" id="chatMessages" aria-live="polite" aria-label="Chat messages" role="log" aria-atomic="false">
|
||||
<div class="chat__empty-state">No messages yet. Be the first to say hello! 👋</div>
|
||||
</section>
|
||||
|
||||
<div class="chat__typing-indicator" id="typingIndicator" aria-live="assertive">
|
||||
Someone is typing<span>.</span><span>.</span><span>.</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-input">
|
||||
<div class="input-group">
|
||||
<input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off">
|
||||
<button onclick="sendMessage()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<section class="chat__input" aria-labelledby="chat-input-heading">
|
||||
<h3 id="chat-input-heading" class="sr-only">Send Message</h3>
|
||||
<div class="chat__input-group">
|
||||
<input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off" aria-label="Type your message">
|
||||
<button data-action="send-message" aria-label="Send message">Send</button>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<!-- Toast Notification -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue