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

Complete 3.4.1: Tablet Layouts - Implement tablet-specific UI with adaptive sizing and gesture support

Browse source
This commit is contained in:
VinnyNC 2025-09-29 21:36:38 -04:00
parent ac7aade762
commit c05c3a63cc
4 changed files with 93 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -185,9 +185,18 @@
}
}
// Mobile responsive behavior
// Determine device type for responsive behavior
function getDeviceType() {
const width = window.innerWidth;
if (width <= AppConfig.ui.mobileBreakpoint) return 'mobile';
if (width >= 768 && width < 1024) return 'tablet'; // Tablet: 768px-1023px
return 'desktop'; // Desktop: 1024px+
}
// Responsive behavior based on device type
function handleWindowResize() {
const isMobile = window.innerWidth <= AppConfig.ui.mobileBreakpoint;
const deviceType = getDeviceType();
const isMobile = deviceType === 'mobile';
if (isMobile && !AppState.chatCollapsed) {
// Auto-collapse chat on mobile for better viewing
@ -234,9 +243,9 @@
const minSwipeDistance = 75; // Minimum swipe distance in pixels
if (Math.abs(deltaX) > minSwipeDistance) {
const isMobile = window.innerWidth <= AppConfig.ui.mobileBreakpoint;
const deviceType = getDeviceType();
if (isMobile) {
if (deviceType === 'mobile') {
// On mobile, swipe left to hide chat, right to show chat
if (deltaX < 0) {
// Swipe left - hide chat
@ -249,6 +258,23 @@
toggleChat();
}
}
} else if (deviceType === 'tablet') {
// On tablet, swipe gestures control video playback
if (deltaX < 0) {
// Swipe left - seek forward
if (AppState.player && typeof AppState.player.currentTime === 'function') {
const currentTime = AppState.player.currentTime();
AppState.player.currentTime(currentTime + 10); // Skip forward 10 seconds
showToast('Skipped forward 10s', 1000);
}
} else {
// Swipe right - seek backward
if (AppState.player && typeof AppState.player.currentTime === 'function') {
const currentTime = AppState.player.currentTime();
AppState.player.currentTime(Math.max(0, currentTime - 10)); // Skip back 10 seconds
showToast('Skipped back 10s', 1000);
}
}
}
}
}