cineby-tv-mod 1.0.0

package/inject.js

@@ -0,0 +1,281 @@
+(function() {
+    'use strict';
+
+    // ── CSS Injection ─────────────────────────────────────────────────────────
+    // TizenBrew only serves the single `main` JS file — no native CSS field exists.
+    // All styles must be injected programmatically.
+    const injectStyles = () => {
+        if (document.getElementById('tizen-cineby-styles')) return; // guard re-injection
+        const style = document.createElement('style');
+        style.id = 'tizen-cineby-styles';
+        style.textContent = `
+/* TV Overscan & Base Reset */
+:root {
+    --bg-color: #000;
+    --text-color: #fff;
+    --focus-color: #ffcc00;
+    --safe-area: 40px;
+}
+
+body {
+    background-color: var(--bg-color) !important;
+    color: var(--text-color) !important;
+    padding: var(--safe-area) !important;
+    overflow-x: hidden;
+    font-family: sans-serif;
+}
+
+/* Hide Junk & Ads */
+iframe, .ads, .ad-container, .popunder, .overlay, #footer, .sidebar,
+[id*="google_ads"], [class*="adsbygoogle"] {
+    display: none !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
+
+/* Layout Transformation: Grid View */
+#main, .movie-container, .grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+    gap: 20px !important;
+    padding: 20px 0 !important;
+}
+
+/* Movie Card Styling */
+.movie, .movie-card, .item {
+    background: #1a1a1a !important;
+    border-radius: 8px !important;
+    overflow: hidden;
+    transition: transform 0.2s ease-in-out;
+}
+
+.movie img, .poster {
+    width: 100% !important;
+    height: auto !important;
+    display: block;
+}
+
+.movie-info, .details {
+    padding: 10px !important;
+    font-size: 1.2rem !important;
+    font-weight: bold;
+}
+
+/* Spatial Navigation Focus State */
+.tizen-focus {
+    outline: 6px solid var(--focus-color) !important;
+    outline-offset: 4px;
+    transform: scale(1.08) !important;
+    z-index: 999;
+    box-shadow: 0 0 20px rgba(255, 204, 0, 0.6);
+}
+
+/* Header/Navbar Adjustments */
+header, #navbar, .header {
+    height: 80px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 0 20px !important;
+    background: #111 !important;
+    margin-bottom: 20px;
+}
+
+.nav-links a {
+    font-size: 1.5rem !important;
+    margin: 0 15px !important;
+    text-decoration: none;
+    color: #ccc;
+}
+
+/* Search Bar TV-Friendly */
+#search, .search {
+    background: #333 !important;
+    color: #fff !important;
+    border: none !important;
+    padding: 10px 20px !important;
+    font-size: 1.2rem !important;
+    border-radius: 20px !important;
+}
+
+/* Video Player Fullscreen Focus */
+video, iframe[src*="embed"] {
+    width: 100vw !important;
+    height: 56.25vw !important; /* 16:9 */
+    max-height: 80vh;
+}
+        `;
+        (document.head || document.documentElement).appendChild(style);
+    };
+
+    // ── Fix 2: whitelist-based window.open override ───────────────────────────
+    const AD_DOMAINS = [
+        'doubleclick.net', 'googlesyndication.com', 'adservice.google.com',
+        'ads.yahoo.com', 'adnxs.com', 'rubiconproject.com', 'openx.net',
+        'pubmatic.com', 'casalemedia.com', 'advertising.com'
+    ];
+
+    const isAdUrl = (url) => {
+        if (!url) return true;
+        try {
+            const hostname = new URL(url).hostname;
+            return AD_DOMAINS.some(domain => hostname.includes(domain));
+        } catch (e) {
+            return false;
+        }
+    };
+
+    // 1. DOM Sanitization & Anti-Ad Logic
+    const sanitize = () => {
+        const adSelectors = [
+            'iframe:not([src*="cineby"])', '.ads', '.popunder', '#footer',
+            '[id*="google_ads"]', '[class*="adsbygoogle"]', '.backdrop'
+        ];
+        adSelectors.forEach(sel => {
+            document.querySelectorAll(sel).forEach(el => el.remove());
+        });
+
+        if (!window._tizenOpenPatched) {
+            const originalOpen = window.open;
+            window.open = function(url, ...args) {
+                if (isAdUrl(url)) return null;
+                return originalOpen.call(window, url, ...args);
+            };
+            window._tizenOpenPatched = true;
+        }
+    };
+
+    // 2. Spatial Navigation Logic
+    let focusableElements = [];
+    let currentIndex = 0;
+    let focusedElement = null;
+
+    const updateFocusable = () => {
+        focusableElements = Array.from(document.querySelectorAll(
+            'a, button, input, textarea, .movie, .movie-card, [tabindex="0"]'
+        )).filter(el => {
+            const rect = el.getBoundingClientRect();
+            return rect.width > 0 && rect.height > 0 &&
+                   window.getComputedStyle(el).display !== 'none';
+        });
+
+        if (focusedElement) {
+            const newIndex = focusableElements.indexOf(focusedElement);
+            if (newIndex !== -1) {
+                currentIndex = newIndex;
+            } else {
+                currentIndex = Math.min(currentIndex, Math.max(0, focusableElements.length - 1));
+                focusedElement = focusableElements[currentIndex] || null;
+            }
+        }
+    };
+
+    const observer = new MutationObserver(() => {
+        sanitize();
+        updateFocusable();
+    });
+
+    const setFocus = (index) => {
+        if (focusableElements.length === 0) return;
+
+        focusableElements.forEach(el => el.classList.remove('tizen-focus'));
+
+        currentIndex = Math.max(0, Math.min(index, focusableElements.length - 1));
+
+        const target = focusableElements[currentIndex];
+        focusedElement = target;
+        target.classList.add('tizen-focus');
+        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        target.focus();
+    };
+
+    const getDistance = (rect1, rect2) => {
+        return Math.sqrt(
+            Math.pow(rect1.left - rect2.left, 2) +
+            Math.pow(rect1.top  - rect2.top,  2)
+        );
+    };
+
+    const move = (direction) => {
+        if (!focusableElements.length) return;
+
+        const currentRect = focusableElements[currentIndex].getBoundingClientRect();
+        let closestIndex = -1;
+        let minDistance = Infinity;
+
+        focusableElements.forEach((el, index) => {
+            if (index === currentIndex) return;
+            const rect = el.getBoundingClientRect();
+
+            let isCandidate = false;
+            if (direction === 'ArrowUp')
+                isCandidate = rect.bottom <= currentRect.top + 5 && rect.top <= currentRect.bottom;
+            if (direction === 'ArrowDown')
+                isCandidate = rect.top >= currentRect.bottom - 5 && rect.bottom >= currentRect.top;
+            if (direction === 'ArrowLeft')
+                isCandidate = rect.right <= currentRect.left + 5 && rect.left <= currentRect.right;
+            if (direction === 'ArrowRight')
+                isCandidate = rect.left >= currentRect.right - 5 && rect.right >= currentRect.left;
+
+            if (isCandidate) {
+                const dist = getDistance(currentRect, rect);
+                if (dist < minDistance) {
+                    minDistance = dist;
+                    closestIndex = index;
+                }
+            }
+        });
+
+        if (closestIndex !== -1) setFocus(closestIndex);
+    };
+
+    // 3. Remote Control Key Mapping
+    window.addEventListener('keydown', (e) => {
+        const key = e.key;
+        const code = e.keyCode;
+
+        switch (key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                e.preventDefault();
+                move(key);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (focusableElements[currentIndex]) {
+                    focusableElements[currentIndex].click();
+                }
+                break;
+            // Fix: Tizen back button sends e.key === 'XF86Back' (keyCode 10009).
+            // 'GoBack', 'Backspace', 'Select', 'Escape' do not map to real Tizen remote keys.
+            case 'XF86Back':
+                e.preventDefault();
+                window.history.back();
+                break;
+            default:
+                // Fallback: handle back by keyCode for older Tizen firmware
+                if (code === 10009) {
+                    e.preventDefault();
+                    window.history.back();
+                }
+                break;
+        }
+    });
+
+    // Fix 5: reliable content-ready check instead of hard-coded setTimeout(1000)
+    const init = () => {
+        injectStyles();
+        observer.observe(document.body, { childList: true, subtree: true });
+        sanitize();
+        updateFocusable();
+        setFocus(0);
+    };
+
+    if (document.readyState === 'complete') {
+        init();
+    } else {
+        window.addEventListener('load', init);
+    }
+})();

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "cineby-tv-mod",
+  "appName": "Cineby TV",
+  "version": "1.0.0",
+  "description": "TV-optimized interface for Cineby with spatial navigation and ad-blocking.",
+  "packageType": "mods",
+  "websiteURL": "https://cineby.app",
+  "main": "inject.js",
+  "files": [
+    "inject.js",
+    "style.css"
+  ],
+  "keywords": [
+    "tizenbrew",
+    "tizen",
+    "samsung",
+    "smart-tv",
+    "cineby",
+    "spatial-navigation"
+  ],
+  "keys": [],
+  "author": "Senior TizenBrew Developer",
+  "license": "MIT"
+}

package/style.css

@@ -0,0 +1,95 @@
+/* TV Overscan & Base Reset */
+:root {
+    --bg-color: #000;
+    --text-color: #fff;
+    --focus-color: #ffcc00;
+    --safe-area: 40px;
+}
+
+body {
+    background-color: var(--bg-color) !important;
+    color: var(--text-color) !important;
+    padding: var(--safe-area) !important;
+    overflow-x: hidden;
+    font-family: sans-serif;
+}
+
+/* Hide Junk & Ads */
+iframe, .ads, .ad-container, .popunder, .overlay, #footer, .sidebar, 
+[id*="google_ads"], [class*="adsbygoogle"] {
+    display: none !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
+
+/* Layout Transformation: Grid View */
+#main, .movie-container, .grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+    gap: 20px !important;
+    padding: 20px 0 !important;
+}
+
+/* Movie Card Styling */
+.movie, .movie-card, .item {
+    background: #1a1a1a !important;
+    border-radius: 8px !important;
+    overflow: hidden;
+    transition: transform 0.2s ease-in-out;
+}
+
+.movie img, .poster {
+    width: 100% !important;
+    height: auto !important;
+    display: block;
+}
+
+.movie-info, .details {
+    padding: 10px !important;
+    font-size: 1.2rem !important;
+    font-weight: bold;
+}
+
+/* Spatial Navigation Focus State */
+.tizen-focus {
+    outline: 6px solid var(--focus-color) !important;
+    outline-offset: 4px;
+    transform: scale(1.08) !important;
+    z-index: 999;
+    box-shadow: 0 0 20px rgba(255, 204, 0, 0.6);
+}
+
+/* Header/Navbar Adjustments */
+header, #navbar, .header {
+    height: 80px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 0 20px !important;
+    background: #111 !important;
+    margin-bottom: 20px;
+}
+
+.nav-links a {
+    font-size: 1.5rem !important;
+    margin: 0 15px !important;
+    text-decoration: none;
+    color: #ccc;
+}
+
+/* Search Bar TV-Friendly */
+#search, .search {
+    background: #333 !important;
+    color: #fff !important;
+    border: none !important;
+    padding: 10px 20px !important;
+    font-size: 1.2rem !important;
+    border-radius: 20px !important;
+}
+
+/* Video Player Fullscreen Focus */
+video, iframe[src*="embed"] {
+    width: 100vw !important;
+    height: 56.25vw !important; /* 16:9 */
+    max-height: 80vh;
+}