Complete 3.4.2: Desktop Enhancements - Implement dashboard-style layouts
This commit is contained in:
parent
c05c3a63cc
commit
a60349b40c
6 changed files with 755 additions and 4 deletions
|
|
@ -43,6 +43,134 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Dashboard toggle functionality
|
||||
function toggleDashboard() {
|
||||
const theater = document.querySelector('.theater');
|
||||
const dashboardToggleBtn = document.querySelector('.video-player__toggle-dashboard-btn');
|
||||
|
||||
if (!theater || !dashboardToggleBtn) return;
|
||||
|
||||
const isEnabled = theater.classList.contains('dashboard-enabled');
|
||||
|
||||
if (isEnabled) {
|
||||
theater.classList.remove('dashboard-enabled');
|
||||
dashboardToggleBtn.setAttribute('aria-expanded', 'false');
|
||||
AppState.dashboardEnabled = false;
|
||||
} else {
|
||||
theater.classList.add('dashboard-enabled');
|
||||
dashboardToggleBtn.setAttribute('aria-expanded', 'true');
|
||||
AppState.dashboardEnabled = true;
|
||||
// Initialize dashboard data when first enabled
|
||||
updateDashboardStats();
|
||||
updateActiveUsers();
|
||||
}
|
||||
|
||||
// Store preference in localStorage
|
||||
try {
|
||||
localStorage.setItem('dashboard-enabled', AppState.dashboardEnabled ? 'true' : 'false');
|
||||
} catch (e) {
|
||||
AppLogger.log('Audio notification failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Dashboard stats management
|
||||
function updateDashboardStats() {
|
||||
// Update viewer count in dashboard
|
||||
const dashboardViewerCount = document.getElementById('statsViewersCount');
|
||||
if (dashboardViewerCount) {
|
||||
const viewers = AppState.viewers || 0;
|
||||
dashboardViewerCount.textContent = viewers.toLocaleString();
|
||||
}
|
||||
|
||||
// Update stream quality
|
||||
const streamQuality = document.getElementById('statsStreamQuality');
|
||||
if (streamQuality) {
|
||||
// Get from URL or assume HD for now
|
||||
streamQuality.textContent = 'HD';
|
||||
}
|
||||
|
||||
// Update uptime
|
||||
const uptime = document.getElementById('statsUptime');
|
||||
if (uptime) {
|
||||
const streamStartTime = AppState.streamStartTime || Date.now() - 60000; // Default to 1 minute
|
||||
const elapsed = Date.now() - streamStartTime;
|
||||
const minutes = Math.floor(elapsed / 60000);
|
||||
const seconds = Math.floor((elapsed % 60000) / 1000);
|
||||
uptime.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Active users widget update
|
||||
function updateActiveUsers() {
|
||||
const activeUsersContainer = document.getElementById('activeUsers');
|
||||
if (!activeUsersContainer) return;
|
||||
|
||||
// This would typically poll for active users from server
|
||||
if (window.ChatSystem && typeof window.ChatSystem.getActiveViewers === 'function') {
|
||||
window.ChatSystem.getActiveViewers().then(users => {
|
||||
displayActiveUsers(users);
|
||||
}).catch(err => {
|
||||
AppLogger.error('Failed to get active users:', err);
|
||||
});
|
||||
} else {
|
||||
// Fallback: show placeholder
|
||||
displayActiveUsers([]);
|
||||
}
|
||||
}
|
||||
|
||||
function displayActiveUsers(users) {
|
||||
const activeUsersContainer = document.getElementById('activeUsers');
|
||||
if (!activeUsersContainer) return;
|
||||
|
||||
let html = '';
|
||||
|
||||
if (users.length === 0) {
|
||||
html = `
|
||||
<div class="user-item">
|
||||
<div class="user-item__status online"></div>
|
||||
<div class="user-item__nickname">Welcome to chat!</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
users.forEach(user => {
|
||||
const statusClass = user.is_online ? 'online' : 'offline';
|
||||
const nickname = user.nickname || `User ${user.user_id.substring(0, 4)}...`;
|
||||
html += `
|
||||
<div class="user-item">
|
||||
<div class="user-item__status ${statusClass}"></div>
|
||||
<div class="user-item__nickname">${escapeHtml(nickname)}</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
activeUsersContainer.innerHTML = html;
|
||||
}
|
||||
|
||||
// Add new activity to the dashboard
|
||||
function addDashboardActivity(activity) {
|
||||
const recentActivity = document.getElementById('recentActivity');
|
||||
if (!recentActivity) return;
|
||||
|
||||
const activityHtml = `
|
||||
<div class="activity-item">
|
||||
<div class="activity-item__avatar">${activity.icon || '💬'}</div>
|
||||
<div class="activity-item__content">
|
||||
<div class="activity-item__text">${escapeHtml(activity.text)}</div>
|
||||
<div class="activity-item__time">${activity.time || 'Just now'}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Remove "Welcome" message if it exists and add new activity
|
||||
const existingActivities = recentActivity.querySelectorAll('.activity-item');
|
||||
if (existingActivities.length >= 5) {
|
||||
existingActivities[existingActivities.length - 1].remove();
|
||||
}
|
||||
|
||||
recentActivity.insertAdjacentHTML('afterbegin', activityHtml);
|
||||
}
|
||||
|
||||
// Chat toggle functionality
|
||||
function toggleChat() {
|
||||
const chatSection = document.getElementById('chatSection');
|
||||
|
|
@ -510,16 +638,156 @@
|
|||
AppLogger.log('UI controls event listeners initialized');
|
||||
}
|
||||
|
||||
// HTML escape utility function
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Initialize dashboard and resize functionality
|
||||
function initializeDashboard() {
|
||||
// Restore dashboard state from localStorage
|
||||
try {
|
||||
const savedDashboardState = localStorage.getItem('dashboard-enabled');
|
||||
if (savedDashboardState === 'true' && window.innerWidth >= 1536) { // Only restore if screen is large enough
|
||||
setTimeout(() => toggleDashboard(), 100); // Delay to ensure DOM is ready
|
||||
}
|
||||
} catch (e) {
|
||||
// localStorage not available
|
||||
}
|
||||
|
||||
// Set initial stream start time for uptime tracking
|
||||
if (!AppState.streamStartTime) {
|
||||
AppState.streamStartTime = Date.now();
|
||||
}
|
||||
|
||||
// Update dashboard stats every 10 seconds
|
||||
setInterval(() => {
|
||||
if (AppState.dashboardEnabled) {
|
||||
updateDashboardStats();
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
// Resize handling for dashboard panels
|
||||
let isResizing = false;
|
||||
let currentResizeTarget = null;
|
||||
let startX = 0;
|
||||
let startWidth = 0;
|
||||
|
||||
function handleResizeMouseDown(event, target) {
|
||||
isResizing = true;
|
||||
currentResizeTarget = target;
|
||||
startX = event.clientX;
|
||||
const targetElement = document.querySelector(target === 'dashboard' ? '.theater__dashboard-section' : '.theater__video-section');
|
||||
startWidth = targetElement ? targetElement.offsetWidth : 0;
|
||||
document.addEventListener('mousemove', handleResizeMouseMove);
|
||||
document.addEventListener('mouseup', handleResizeMouseUp);
|
||||
document.body.style.cursor = 'col-resize';
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function handleResizeMouseMove(event) {
|
||||
if (!isResizing || !currentResizeTarget) return;
|
||||
|
||||
const deltaX = event.clientX - startX;
|
||||
const targetElement = document.querySelector(currentResizeTarget === 'dashboard' ? '.theater__dashboard-section' : '.theater__video-section');
|
||||
if (!targetElement) return;
|
||||
|
||||
const newWidth = Math.max(200, startWidth + deltaX);
|
||||
targetElement.style.width = newWidth + 'px';
|
||||
}
|
||||
|
||||
function handleResizeMouseUp() {
|
||||
isResizing = false;
|
||||
currentResizeTarget = null;
|
||||
document.removeEventListener('mousemove', handleResizeMouseMove);
|
||||
document.removeEventListener('mouseup', handleResizeMouseUp);
|
||||
document.body.style.cursor = '';
|
||||
}
|
||||
|
||||
// Initialize event listeners
|
||||
function initializeEventListeners() {
|
||||
// Dashboard toggle button
|
||||
const dashboardToggleBtn = document.querySelector('.video-player__toggle-dashboard-btn');
|
||||
if (dashboardToggleBtn) {
|
||||
DOMUtils.addEvent(dashboardToggleBtn, 'click', toggleDashboard);
|
||||
}
|
||||
|
||||
// Dashboard toggle in sidebar
|
||||
const dashboardSidebarToggle = document.querySelector('.dashboard__toggle-btn');
|
||||
if (dashboardSidebarToggle) {
|
||||
DOMUtils.addEvent(dashboardSidebarToggle, 'click', toggleDashboard);
|
||||
}
|
||||
|
||||
// Resize handles
|
||||
const resizeHandles = document.querySelectorAll('.resize-handle');
|
||||
resizeHandles.forEach(handle => {
|
||||
DOMUtils.addEvent(handle, 'mousedown', (e) => {
|
||||
const target = handle.dataset.target;
|
||||
handleResizeMouseDown(e, target);
|
||||
});
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
DOMUtils.addEvent(document, 'keydown', handleKeyboardShortcuts);
|
||||
|
||||
// Window resize for mobile responsiveness
|
||||
DOMUtils.addEvent(window, 'resize', handleWindowResize);
|
||||
|
||||
// Page visibility for notification clearing
|
||||
DOMUtils.addEvent(document, 'visibilitychange', handleVisibilityChange);
|
||||
|
||||
// Touch gesture support for mobile
|
||||
const videoSection = document.getElementById('videoSection');
|
||||
if (videoSection) {
|
||||
// Swipe gestures on video area for chat toggle
|
||||
DOMUtils.addEvent(videoSection, 'touchstart', handleTouchStart, { passive: true });
|
||||
DOMUtils.addEvent(videoSection, 'touchmove', handleTouchMove, { passive: true });
|
||||
DOMUtils.addEvent(videoSection, 'touchend', handleTouchEnd, { passive: true });
|
||||
|
||||
// Double-tap on video for fullscreen
|
||||
DOMUtils.addEvent(videoSection, 'touchend', handleVideoDoubleTap);
|
||||
}
|
||||
|
||||
// Pull-to-refresh on the whole document (only on mobile)
|
||||
DOMUtils.addEvent(document, 'touchstart', handlePullToRefreshTouchStart, { passive: true });
|
||||
DOMUtils.addEvent(document, 'touchmove', handlePullToRefreshTouchMove, { passive: false });
|
||||
DOMUtils.addEvent(document, 'touchend', handlePullToRefreshTouchEnd, { passive: true });
|
||||
|
||||
// Mobile navigation buttons
|
||||
const mobileNav = document.getElementById('mobileNav');
|
||||
if (mobileNav) {
|
||||
mobileNav.addEventListener('click', function(event) {
|
||||
const button = event.target.closest('.mobile-nav-btn');
|
||||
if (button && button.dataset.action) {
|
||||
event.preventDefault();
|
||||
handleMobileNavAction(button.dataset.action);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize dashboard functionality
|
||||
initializeDashboard();
|
||||
|
||||
AppLogger.log('UI controls event listeners initialized');
|
||||
}
|
||||
|
||||
// Public API
|
||||
window.UIControls = {
|
||||
showToast: showToast,
|
||||
hideToast: hideToast,
|
||||
toggleChat: toggleChat,
|
||||
toggleDashboard: toggleDashboard,
|
||||
toggleFullscreen: toggleFullscreen,
|
||||
togglePictureInPicture: togglePictureInPicture,
|
||||
updateViewerCount: updateViewerCount,
|
||||
updateConnectionStatus: updateConnectionStatus,
|
||||
updateNotificationBadge: updateNotificationBadge,
|
||||
updateDashboardStats: updateDashboardStats,
|
||||
updateActiveUsers: updateActiveUsers,
|
||||
addDashboardActivity: addDashboardActivity,
|
||||
playNotificationSound: playNotificationSound,
|
||||
handleMobileNavAction: handleMobileNavAction,
|
||||
DOMUtils: DOMUtils
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue