Complete 3.3.3: Mobile Navigation - Implement bottom navigation pattern for mobile with chat controls
This commit is contained in:
parent
a7fa21d3fa
commit
91a5c81a25
3 changed files with 188 additions and 0 deletions
|
|
@ -414,6 +414,33 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Mobile navigation action handler
|
||||||
|
function handleMobileNavAction(action) {
|
||||||
|
switch (action) {
|
||||||
|
case 'toggle-chat':
|
||||||
|
toggleChat();
|
||||||
|
break;
|
||||||
|
case 'refresh-stream':
|
||||||
|
performPullToRefresh();
|
||||||
|
break;
|
||||||
|
case 'toggle-fullscreen':
|
||||||
|
toggleFullscreen();
|
||||||
|
break;
|
||||||
|
case 'toggle-picture-in-picture':
|
||||||
|
togglePictureInPicture();
|
||||||
|
break;
|
||||||
|
case 'toggle-quality':
|
||||||
|
// Toggle quality selector visibility
|
||||||
|
const qualitySelector = document.getElementById('qualitySelector');
|
||||||
|
if (qualitySelector) {
|
||||||
|
qualitySelector.style.display = qualitySelector.style.display === 'none' ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
AppLogger.warn('Unknown mobile nav action:', action);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Initialize event listeners
|
// Initialize event listeners
|
||||||
function initializeEventListeners() {
|
function initializeEventListeners() {
|
||||||
// Keyboard shortcuts
|
// Keyboard shortcuts
|
||||||
|
|
@ -442,6 +469,18 @@
|
||||||
DOMUtils.addEvent(document, 'touchmove', handlePullToRefreshTouchMove, { passive: false });
|
DOMUtils.addEvent(document, 'touchmove', handlePullToRefreshTouchMove, { passive: false });
|
||||||
DOMUtils.addEvent(document, 'touchend', handlePullToRefreshTouchEnd, { passive: true });
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
AppLogger.log('UI controls event listeners initialized');
|
AppLogger.log('UI controls event listeners initialized');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -456,6 +495,7 @@
|
||||||
updateConnectionStatus: updateConnectionStatus,
|
updateConnectionStatus: updateConnectionStatus,
|
||||||
updateNotificationBadge: updateNotificationBadge,
|
updateNotificationBadge: updateNotificationBadge,
|
||||||
playNotificationSound: playNotificationSound,
|
playNotificationSound: playNotificationSound,
|
||||||
|
handleMobileNavAction: handleMobileNavAction,
|
||||||
DOMUtils: DOMUtils
|
DOMUtils: DOMUtils
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
29
index.php
29
index.php
|
|
@ -401,6 +401,35 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
|
||||||
<!-- Toast Notification -->
|
<!-- Toast Notification -->
|
||||||
<div class="toast" id="toast"></div>
|
<div class="toast" id="toast"></div>
|
||||||
|
|
||||||
|
<!-- Mobile Bottom Navigation -->
|
||||||
|
<nav class="mobile-nav" id="mobileNav" role="navigation" aria-label="Mobile navigation">
|
||||||
|
<button class="mobile-nav-btn" data-action="toggle-chat" aria-label="Toggle chat" aria-expanded="false">
|
||||||
|
<span class="icon icon-chat icon-lg"></span>
|
||||||
|
<span>Chat</span>
|
||||||
|
</button>
|
||||||
|
<button class="mobile-nav-btn" data-action="refresh-stream" aria-label="Refresh stream">
|
||||||
|
<span class="icon icon-refresh icon-lg"></span>
|
||||||
|
<span>Refresh</span>
|
||||||
|
</button>
|
||||||
|
<button class="mobile-nav-btn" data-action="toggle-fullscreen" aria-label="Toggle fullscreen">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24">
|
||||||
|
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Fullscreen</span>
|
||||||
|
</button>
|
||||||
|
<button class="mobile-nav-btn" data-action="toggle-picture-in-picture" aria-label="Picture in picture mode">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24">
|
||||||
|
<path d="M21 3H3v7h18V3z"></path>
|
||||||
|
<rect x="7" y="13" width="10" height="7" rx="2"></rect>
|
||||||
|
</svg>
|
||||||
|
<span>PiP</span>
|
||||||
|
</button>
|
||||||
|
<button class="mobile-nav-btn" data-action="toggle-quality" aria-label="Video quality settings" style="display:none;">
|
||||||
|
<span class="icon icon-settings icon-lg"></span>
|
||||||
|
<span>Quality</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
|
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
|
||||||
<script defer src="assets/js/app.js?v=1.4.4"></script>
|
<script defer src="assets/js/app.js?v=1.4.4"></script>
|
||||||
<script defer src="assets/js/api.js?v=1.4.4"></script>
|
<script defer src="assets/js/api.js?v=1.4.4"></script>
|
||||||
|
|
|
||||||
|
|
@ -1401,3 +1401,122 @@
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background: rgba(0,90,156,0.9);
|
background: rgba(0,90,156,0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =================================================================
|
||||||
|
MOBILE BOTTOM NAVIGATION
|
||||||
|
================================================================= */
|
||||||
|
|
||||||
|
.mobile-nav {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(135deg, var(--dodgers-blue-700), var(--dodgers-blue-600));
|
||||||
|
border-top: 1px solid rgba(255,255,255,0.2);
|
||||||
|
box-shadow: var(--elevation-8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
padding: var(--spacing-3) var(--spacing-4);
|
||||||
|
display: none; /* Hidden by default, shown only on mobile */
|
||||||
|
z-index: var(--z-fixed);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-1);
|
||||||
|
padding: var(--spacing-2) var(--spacing-1);
|
||||||
|
min-height: var(--min-tap-target-size, 44px);
|
||||||
|
min-width: var(--min-tap-target-size, 44px);
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn:hover {
|
||||||
|
color: white;
|
||||||
|
background: rgba(255,255,255,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn.active {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn .icon {
|
||||||
|
font-size: 20px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn span {
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile navigation responsive behavior */
|
||||||
|
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
|
||||||
|
.mobile-nav {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: calc(var(--breakpoint-sm) - 1px)) {
|
||||||
|
.mobile-nav {
|
||||||
|
padding: var(--spacing-2) var(--spacing-3);
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn {
|
||||||
|
padding: var(--spacing-1);
|
||||||
|
gap: 2px;
|
||||||
|
min-width: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn .icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-btn span {
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Safe area support for devices with notches */
|
||||||
|
@supports (padding-bottom: max(0px)) {
|
||||||
|
.mobile-nav {
|
||||||
|
padding-bottom: max(var(--spacing-3), env(safe-area-inset-bottom));
|
||||||
|
}
|
||||||
|
|
||||||
|
body.mobile-nav-active {
|
||||||
|
padding-bottom: 80px; /* Space for bottom nav */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
|
||||||
|
body.mobile-nav-active {
|
||||||
|
padding-bottom: max(70px, calc(70px + env(safe-area-inset-bottom)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue