livefootballtv-tizen 1.0.0

package/app/navigation.js

@@ -0,0 +1,663 @@
+// navigation.js - ES5 D-Pad Navigation for Tizen v4
+// Handles arrow key navigation for categories, posts grid, and player controls
+
+(function (window) {
+    'use strict';
+
+    var DPadNavigator = {
+        currentZone: 'categories', // 'categories', 'posts', 'player', 'settings'
+        focusedCategoryIndex: 0,
+        focusedPostIndex: 0,
+        focusedPlayerControlIndex: 0,
+        lastFocusedPostIndex: 0,
+        gridColumns: 4, // Default columns, will be calculated dynamically
+        isTransitioning: false,  // Flag to prevent key handling during transitions
+
+        init: function () {
+            var self = this;
+            console.log('DPadNavigator: Initializing');
+
+            // Global keydown handler
+            document.addEventListener('keydown', function (e) {
+                self.handleKeyDown(e);
+            });
+
+            // Focus first category on load
+            setTimeout(function () {
+                self.focusCategory(0);
+                console.log('DPadNavigator: Initial focus set to category 0');
+            }, 500);
+        },
+
+        handleKeyDown: function (e) {
+            var key = e.key || e.keyCode;
+            var keyName = typeof key === 'string' ? key : this.getKeyName(key);
+
+            // Ignore key repeat for Enter key to prevent multiple triggers
+            if (e.repeat && keyName === 'Enter') {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+
+            // Block all input during transitions
+            if (this.isTransitioning) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+
+            // Don't interfere with text input (except for Escape)
+            if (e.target.tagName === 'INPUT' && keyName !== 'Escape') {
+                return;
+            }
+
+            // Don't interfere with select elements
+            if (e.target.tagName === 'SELECT') {
+                return;
+            }
+
+            var handled = false;
+
+            switch (this.currentZone) {
+                case 'categories':
+                    handled = this.handleCategoryNavigation(keyName, e);
+                    break;
+                case 'posts':
+                    handled = this.handlePostsNavigation(keyName, e);
+                    break;
+                case 'player':
+                    handled = this.handlePlayerNavigation(keyName, e);
+                    break;
+                case 'settings':
+                    handled = this.handleSettingsNavigation(keyName, e);
+                    break;
+                case 'display':
+                    handled = this.handleDisplayNavigation(keyName, e);
+                    break;
+                case 'header':
+                    handled = this.handleHeaderNavigation(keyName, e);
+                    break;
+            }
+
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        },
+
+        getKeyName: function (keyCode) {
+            var keys = {
+                37: 'ArrowLeft',
+                38: 'ArrowUp',
+                39: 'ArrowRight',
+                40: 'ArrowDown',
+                13: 'Enter',
+                27: 'Escape',
+                8: 'Backspace',
+                10009: 'Back'  // Tizen back button
+            };
+            return keys[keyCode] || '';
+        },
+
+        handleCategoryNavigation: function (key, event) {
+            var categories = document.querySelectorAll('.category');
+            if (!categories.length) return false;
+
+            switch (key) {
+                case 'ArrowDown':
+                    this.focusedCategoryIndex = Math.min(this.focusedCategoryIndex + 1, categories.length - 1);
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+
+                case 'ArrowUp':
+                    if (this.focusedCategoryIndex === 0) {
+                        // Move to proxy indicator in header
+                        var proxyIndicator = document.getElementById('proxyStatusIndicator');
+                        if (proxyIndicator) {
+                            this.setZone('header');
+                            proxyIndicator.focus();
+                        }
+                    } else {
+                        this.focusedCategoryIndex = Math.max(this.focusedCategoryIndex - 1, 0);
+                        this.focusCategory(this.focusedCategoryIndex);
+                    }
+                    return true;
+
+                case 'ArrowRight':
+                    // Move to posts
+                    this.setZone('posts');
+                    this.focusPost(this.focusedPostIndex);
+                    return true;
+
+                case 'Enter':
+                    if (categories[this.focusedCategoryIndex]) {
+                        console.log('DPadNavigator: Clicking category ' + this.focusedCategoryIndex);
+                        categories[this.focusedCategoryIndex].click();
+                    }
+                    return true;
+            }
+            return false;
+        },
+
+        handlePostsNavigation: function (key, event) {
+            var posts = document.querySelectorAll('.post');
+            if (!posts.length) {
+                console.log('DPadNavigator: No posts found');
+                return false;
+            }
+
+            // Calculate columns dynamically based on window width
+            this.calculateGridColumns();
+
+            switch (key) {
+                case 'ArrowRight':
+                    if ((this.focusedPostIndex + 1) % this.gridColumns === 0) {
+                        // End of row, wrap to next row
+                        if (this.focusedPostIndex + 1 < posts.length) {
+                            this.focusedPostIndex++;
+                        }
+                    } else {
+                        this.focusedPostIndex = Math.min(this.focusedPostIndex + 1, posts.length - 1);
+                    }
+                    this.focusPost(this.focusedPostIndex);
+                    return true;
+
+                case 'ArrowLeft':
+                    if (this.focusedPostIndex % this.gridColumns === 0) {
+                        // Start of row, move to categories
+                        this.setZone('categories');
+                        this.focusCategory(this.focusedCategoryIndex);
+                    } else {
+                        this.focusedPostIndex = Math.max(this.focusedPostIndex - 1, 0);
+                        this.focusPost(this.focusedPostIndex);
+                    }
+                    return true;
+
+                case 'ArrowDown':
+                    var nextIndex = this.focusedPostIndex + this.gridColumns;
+                    if (nextIndex < posts.length) {
+                        this.focusedPostIndex = nextIndex;
+                        this.focusPost(this.focusedPostIndex);
+                    }
+                    return true;
+
+                case 'ArrowUp':
+                    var prevIndex = this.focusedPostIndex - this.gridColumns;
+                    if (prevIndex >= 0) {
+                        this.focusedPostIndex = prevIndex;
+                        this.focusPost(this.focusedPostIndex);
+                    } else {
+                        // Move to proxy indicator in header
+                        var proxyIndicator = document.getElementById('proxyStatusIndicator');
+                        if (proxyIndicator) {
+                            this.setZone('header');
+                            proxyIndicator.focus();
+                        }
+                    }
+                    return true;
+
+                case 'Enter':
+                    if (posts[this.focusedPostIndex]) {
+                        console.log('DPadNavigator: Opening post ' + this.focusedPostIndex);
+                        this.lastFocusedPostIndex = this.focusedPostIndex;
+                        posts[this.focusedPostIndex].click();
+                        // Note: enterPlayerMode will be called from openPost in app-es5.js
+                    }
+                    return true;
+
+                case 'Escape':
+                case 'Back':
+                case 'Backspace':
+                    // Go back to categories
+                    this.setZone('categories');
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+            }
+            return false;
+        },
+
+        handlePlayerNavigation: function (key, event) {
+            var modal = document.getElementById('videoPlayerModal');
+
+            // Check if modal is visible
+            var isModalVisible = modal && (
+                modal.style.display === 'flex' ||
+                modal.style.display === 'block' ||
+                (!modal.hidden && modal.style.display !== 'none')
+            );
+
+            if (!isModalVisible) {
+                console.log('DPadNavigator: Player modal not visible, switching to posts');
+                this.setZone('posts');
+                return false;
+            }
+
+            var closeBtn = document.getElementById('closePlayer');
+            var video = document.getElementById('videoPlayer');
+
+            // Get Shaka UI overflow menu and its button
+            var overflowMenuBtn = modal.querySelector('.shaka-overflow-menu-button');
+            var overflowMenu = modal.querySelector('.shaka-overflow-menu');
+            var isOverflowOpen = overflowMenu && overflowMenu.classList.contains('shaka-displayed');
+
+            // Get Shaka UI control panel buttons
+            var controlPanel = modal.querySelector('.shaka-controls-button-panel');
+            var controlButtons = controlPanel ? controlPanel.querySelectorAll('button') : [];
+
+            // Debug logging - only log once per player session
+            if (!window.shakaNavDebugLogged) {
+                console.log('DPadNavigator: Shaka UI Debug');
+                console.log('  - Control panel found:', !!controlPanel);
+                console.log('  - Control buttons found:', controlButtons.length);
+                console.log('  - Overflow menu button found:', !!overflowMenuBtn);
+                console.log('  - Overflow menu found:', !!overflowMenu);
+                if (controlButtons.length > 0) {
+                    for (var k = 0; k < controlButtons.length; k++) {
+                        console.log('  - Button ' + k + ':', controlButtons[k].className);
+                        // Make buttons focusable for D-pad navigation
+                        controlButtons[k].tabIndex = 0;
+                        // Add focus event to show visual indicator
+                        controlButtons[k].onfocus = function () {
+                            this.style.outline = '3px solid #3ea6ff';
+                            this.style.outlineOffset = '2px';
+                        };
+                        controlButtons[k].onblur = function () {
+                            this.style.outline = 'none';
+                        };
+                    }
+                }
+                window.shakaNavDebugLogged = true;
+            }
+
+            // Handle navigation within Shaka overflow menu when open
+            if (isOverflowOpen && overflowMenu) {
+                var menuButtons = overflowMenu.querySelectorAll('button');
+                var currentFocused = document.activeElement;
+                var currentIndex = -1;
+                for (var i = 0; i < menuButtons.length; i++) {
+                    if (menuButtons[i] === currentFocused) {
+                        currentIndex = i;
+                        break;
+                    }
+                }
+
+                switch (key) {
+                    case 'ArrowDown':
+                        var nextIdx = Math.min(currentIndex + 1, menuButtons.length - 1);
+                        if (nextIdx >= 0 && menuButtons[nextIdx]) menuButtons[nextIdx].focus();
+                        return true;
+
+                    case 'ArrowUp':
+                        if (currentIndex <= 0) {
+                            // Close menu and focus overflow button
+                            if (overflowMenuBtn) overflowMenuBtn.click();
+                        } else {
+                            menuButtons[currentIndex - 1].focus();
+                        }
+                        return true;
+
+                    case 'Enter':
+                        if (currentFocused) currentFocused.click();
+                        return true;
+
+                    case 'Escape':
+                    case 'Back':
+                    case 'Backspace':
+                        // Close overflow menu
+                        if (overflowMenuBtn) overflowMenuBtn.click();
+                        return true;
+                }
+                return false;
+            }
+
+            // Build focusable elements list: close button, video, then Shaka control buttons
+            var focusableElements = [];
+            if (closeBtn) focusableElements.push(closeBtn);
+            if (video) focusableElements.push(video);
+            for (var j = 0; j < controlButtons.length; j++) {
+                focusableElements.push(controlButtons[j]);
+            }
+
+
+            if (!focusableElements.length) return false;
+
+            // Clamp index to valid range
+            this.focusedPlayerControlIndex = Math.max(0, Math.min(this.focusedPlayerControlIndex, focusableElements.length - 1));
+
+            switch (key) {
+                case 'ArrowRight':
+                    this.focusedPlayerControlIndex = Math.min(this.focusedPlayerControlIndex + 1, focusableElements.length - 1);
+                    focusableElements[this.focusedPlayerControlIndex].focus();
+                    return true;
+
+                case 'ArrowLeft':
+                    this.focusedPlayerControlIndex = Math.max(this.focusedPlayerControlIndex - 1, 0);
+                    focusableElements[this.focusedPlayerControlIndex].focus();
+                    return true;
+
+                case 'ArrowDown':
+                    // If on video (index 1), move to first control button
+                    if (this.focusedPlayerControlIndex === 1 && controlButtons.length > 0) {
+                        this.focusedPlayerControlIndex = 2;
+                        focusableElements[this.focusedPlayerControlIndex].focus();
+                    } else {
+                        this.focusedPlayerControlIndex = Math.min(this.focusedPlayerControlIndex + 1, focusableElements.length - 1);
+                        focusableElements[this.focusedPlayerControlIndex].focus();
+                    }
+                    return true;
+
+                case 'ArrowUp':
+                    // If on control buttons (index >= 2), move to video
+                    if (this.focusedPlayerControlIndex >= 2) {
+                        this.focusedPlayerControlIndex = 1;
+                        if (video) video.focus();
+                    } else {
+                        this.focusedPlayerControlIndex = Math.max(this.focusedPlayerControlIndex - 1, 0);
+                        focusableElements[this.focusedPlayerControlIndex].focus();
+                    }
+                    return true;
+
+
+                case 'Enter':
+                    var focused = focusableElements[this.focusedPlayerControlIndex];
+                    // If focused on video, toggle play/pause
+                    if (focused === video) {
+                        if (video.paused) {
+                            video.play().catch(function (e) { console.log('Play failed:', e); });
+                            this.showPlayPauseIndicator('▶');
+                        } else {
+                            video.pause();
+                            this.showPlayPauseIndicator('⏸');
+                        }
+                        return true;
+                    }
+                    // Otherwise click the focused element
+                    if (focused) {
+                        focused.click();
+                    }
+                    return true;
+
+                case 'Escape':
+                case 'Back':
+                case 'Backspace':
+                    console.log('DPadNavigator: Closing player');
+                    if (typeof window.closePlayer === 'function') {
+                        window.closePlayer();
+                    } else if (closeBtn) {
+                        closeBtn.click();
+                    }
+                    return true;
+            }
+            return false;
+        },
+
+        // Show play/pause indicator overlay
+        showPlayPauseIndicator: function (symbol) {
+            var video = document.getElementById('videoPlayer');
+            if (!video) return;
+
+            var container = video.parentElement;
+            var indicator = container.querySelector('.play-pause-indicator');
+            if (!indicator) {
+                indicator = document.createElement('div');
+                indicator.className = 'play-pause-indicator';
+                indicator.style.cssText = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:80px;color:#fff;background:rgba(0,0,0,0.6);padding:30px 50px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity 0.3s;z-index:50;';
+                container.appendChild(indicator);
+            }
+
+            indicator.textContent = symbol;
+            indicator.style.opacity = '1';
+
+            // Hide after 1 second
+            setTimeout(function () {
+                indicator.style.opacity = '0';
+            }, 1000);
+        },
+
+
+        handleSettingsNavigation: function (key, event) {
+            var settingsBtn = document.getElementById('settingsBtn');
+            var settingsDropdown = document.getElementById('settingsDropdown');
+            var displayBtn = document.getElementById('displayBtn');
+            var logLevelSelect = document.getElementById('logLevelSelect');
+
+            switch (key) {
+                case 'ArrowDown':
+                    // If dropdown is open and has select, focus it
+                    if (settingsDropdown && settingsDropdown.style.display === 'block' && logLevelSelect) {
+                        logLevelSelect.focus();
+                        return true;
+                    }
+                    // Otherwise go to categories
+                    if (settingsDropdown) settingsDropdown.style.display = 'none';
+                    this.setZone('categories');
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+
+                case 'ArrowLeft':
+                    // Move to display button
+                    if (settingsDropdown) settingsDropdown.style.display = 'none';
+                    if (displayBtn) {
+                        this.setZone('display');
+                        displayBtn.focus();
+                    }
+                    return true;
+
+                case 'ArrowRight':
+                    // Go to posts
+                    if (settingsDropdown) settingsDropdown.style.display = 'none';
+                    this.setZone('posts');
+                    this.focusPost(this.focusedPostIndex);
+                    return true;
+
+                case 'Escape':
+                case 'Back':
+                case 'Backspace':
+                    // Close dropdown and go to categories
+                    if (settingsDropdown) settingsDropdown.style.display = 'none';
+                    this.setZone('categories');
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+
+                case 'Enter':
+                    // Toggle settings dropdown
+                    if (settingsBtn) {
+                        settingsBtn.click();
+                    }
+                    return true;
+            }
+            return false;
+        },
+
+        handleDisplayNavigation: function (key, event) {
+            var displayBtn = document.getElementById('displayBtn');
+            var displayPopup = document.getElementById('displayPopup');
+            var slider = document.getElementById('iconsPerRowSlider');
+            var settingsBtn = document.getElementById('settingsBtn');
+
+            switch (key) {
+                case 'ArrowDown':
+                    // Close popup and go to categories
+                    if (displayPopup) displayPopup.style.display = 'none';
+                    this.setZone('categories');
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+
+                case 'ArrowUp':
+                    // Stay on slider if popup is open, otherwise do nothing
+                    return true;
+
+                case 'ArrowLeft':
+                    // Move to proxy indicator
+                    if (displayPopup) displayPopup.style.display = 'none';
+                    var proxyIndicator = document.getElementById('proxyStatusIndicator');
+                    if (proxyIndicator) {
+                        this.setZone('header');
+                        proxyIndicator.focus();
+                    }
+                    return true;
+
+                case 'ArrowRight':
+                    // Move to settings button
+                    if (displayPopup) displayPopup.style.display = 'none';
+                    if (settingsBtn) {
+                        this.setZone('settings');
+                        settingsBtn.focus();
+                    }
+                    return true;
+
+                case 'Escape':
+                case 'Back':
+                case 'Backspace':
+                    // Close popup and go to categories
+                    if (displayPopup) displayPopup.style.display = 'none';
+                    this.setZone('categories');
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+
+                case 'Enter':
+                    // Toggle display popup
+                    if (displayBtn) {
+                        displayBtn.click();
+                    }
+                    return true;
+            }
+            return false;
+        },
+
+        handleHeaderNavigation: function (key, event) {
+            var proxyIndicator = document.getElementById('proxyStatusIndicator');
+            var displayBtn = document.getElementById('displayBtn');
+
+            switch (key) {
+                case 'ArrowDown':
+                    // Go to categories
+                    this.setZone('categories');
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+
+                case 'ArrowUp':
+                    // Stay at proxy indicator
+                    return true;
+
+                case 'ArrowRight':
+                    // Move to display button
+                    if (displayBtn) {
+                        this.setZone('display');
+                        displayBtn.focus();
+                    }
+                    return true;
+
+                case 'ArrowLeft':
+                    // Stay at proxy indicator (leftmost header item)
+                    return true;
+
+                case 'Escape':
+                case 'Back':
+                case 'Backspace':
+                    // Go to categories
+                    this.setZone('categories');
+                    this.focusCategory(this.focusedCategoryIndex);
+                    return true;
+
+                case 'Enter':
+                    // Trigger proxy status check
+                    if (proxyIndicator) {
+                        proxyIndicator.click();
+                    }
+                    return true;
+            }
+            return false;
+        },
+
+        calculateGridColumns: function () {
+            var savedIconsPerRow = localStorage.getItem('iconsPerRow');
+            if (savedIconsPerRow) {
+                this.gridColumns = parseInt(savedIconsPerRow, 10);
+                return;
+            }
+
+            var width = window.innerWidth;
+            if (width > 1400) {
+                this.gridColumns = 4;
+            } else if (width > 1000) {
+                this.gridColumns = 3;
+            } else if (width > 600) {
+                this.gridColumns = 2;
+            } else {
+                this.gridColumns = 1;
+            }
+        },
+
+        focusCategory: function (index) {
+            var categories = document.querySelectorAll('.category');
+            if (categories[index]) {
+                categories[index].focus();
+                this.scrollIntoViewIfNeeded(categories[index]);
+            }
+        },
+
+        focusPost: function (index) {
+            var posts = document.querySelectorAll('.post');
+            if (posts[index]) {
+                posts[index].focus();
+                this.scrollIntoViewIfNeeded(posts[index]);
+            }
+        },
+
+        scrollIntoViewIfNeeded: function (element) {
+            if (!element) return;
+
+            var rect = element.getBoundingClientRect();
+            var isVisible = (
+                rect.top >= 0 &&
+                rect.left >= 0 &&
+                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+            );
+
+            if (!isVisible) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        },
+
+        setZone: function (zone) {
+            console.log('DPadNavigator: Zone changed from ' + this.currentZone + ' to ' + zone);
+            this.currentZone = zone;
+        },
+
+        enterPlayerMode: function () {
+            var self = this;
+            console.log('DPadNavigator: Entering player mode');
+
+            // Set transition flag to block input
+            this.isTransitioning = true;
+
+            this.setZone('player');
+            this.focusedPlayerControlIndex = 1;  // Start at video element (index 1), not close button
+
+            // Focus video element after transition delay
+            setTimeout(function () {
+                var video = document.getElementById('videoPlayer');
+                if (video) {
+                    video.focus();
+                    console.log('DPadNavigator: Focused video element');
+                }
+                // Clear transition flag after focus is set
+                self.isTransitioning = false;
+            }, 300);  // Delay to avoid key repeat issues
+        },
+
+        exitPlayerMode: function () {
+            console.log('DPadNavigator: Exiting player mode');
+            this.setZone('posts');
+            // Restore focus to last selected post
+            this.focusPost(this.lastFocusedPostIndex);
+        }
+    };
+
+    // Expose to global scope
+    window.DPadNavigator = DPadNavigator;
+
+})(window);