vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 3.3.3: Mobile Navigation - Implement bottom navigation pattern for mobile with chat controls

Browse source
This commit is contained in:
VinnyNC 2025-09-29 21:29:03 -04:00
parent a7fa21d3fa
commit 91a5c81a25
3 changed files with 188 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
assets/js/ui-controls.js
View file

@ -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
function initializeEventListeners() {
// Keyboard shortcuts
@ -442,6 +469,18 @@
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);
}
});
}
AppLogger.log('UI controls event listeners initialized');
}
@ -456,6 +495,7 @@
updateConnectionStatus: updateConnectionStatus,
updateNotificationBadge: updateNotificationBadge,
playNotificationSound: playNotificationSound,
handleMobileNavAction: handleMobileNavAction,
DOMUtils: DOMUtils
};

29
index.php
View file

@ -401,6 +401,35 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<!-- Toast Notification -->
<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 defer src="assets/js/app.js?v=1.4.4"></script>
<script defer src="assets/js/api.js?v=1.4.4"></script>

119
static/css/components.css
View file

@ -1401,3 +1401,122 @@
font-size: 20px;
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)));
}
}
}