migliorata (?) compatibilità con Android TV

Author: FrancescoRosi

assets/css/main.css

@@ -212,9 +212,11 @@ a {
 }
 .channel-program-start-time {
     color: black;
+}
+body:not(.androidtv) .channel-program-start-time {
     text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }
-.channel-program-end-time {
+body:not(.androidtv) .channel-program-end-time {
     text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 }
 .channel:hover .channel-program-times, .channel.watching .channel-program-times {
@@ -493,7 +495,7 @@ a {
 .epg-item-container.expandable.expanded .epg-item {
     backdrop-filter: blur(1rem) brightness(0.5);
 }
-.channel:not([disabled]):hover {
+body:not(.androidtv) .channel:not([disabled]):hover, .androidtv .channel:focus, .androidtv .channel:has(.channel-program:focus) {
     background: #333 !important;
 }
 .channel[disabled] {

assets/js/main.js

@@ -158,6 +158,23 @@ const createModal = async ({ title, text, buttons }) => {
 
     document.querySelector(".modal").classList.add("is-visible");
 };
+const waitForSelector = (selector) => {
+    return new Promise((resolve) => {
+        if (document.querySelector(selector)) return resolve(document.querySelector(selector));
+
+        const observer = new MutationObserver(() => {
+            if (document.querySelector(selector)) {
+                resolve(document.querySelector(selector));
+                observer.disconnect();
+            }
+        });
+
+        observer.observe(document, {
+            childList: true,
+            subtree: true
+        });
+    });
+};
 
 if (new URLSearchParams(location.search).get("geoblock-warning") != null) {
     createModal({
@@ -168,9 +185,13 @@ if (new URLSearchParams(location.search).get("geoblock-warning") != null) {
     });
 };
 if (new URLSearchParams(location.search).get("androidtv") != null) {
+    document.body.classList.add("androidtv");
     document.querySelector("#tv-style").media = "";
+    waitForSelector(".channel").then(el => el.focus());
 
     window.addEventListener("keydown", e => {
+        if (document.activeElement.classList.contains("channel-program") || document.activeElement.classList.contains("channel")) document.activeElement.closest(".channel").scrollIntoView({ block: "center" });
+        if (document.activeElement.classList.contains("hbbtv-enabler") && (e.key === "Enter" || e.key === " ")) document.activeElement.click()
         if (window.location.hash != "#canPressBack") window.location.hash = "canPressBack";
         if (!document.querySelector("#settings").classList.contains("visible")) {
             if (e.key === "Enter" || e.key === " " || e.key === "MediaPlayPause") {
@@ -188,7 +209,10 @@ if (new URLSearchParams(location.search).get("androidtv") != null) {
                 document.querySelector("#channels-column").style.width = "0%";
                 document.querySelector("#channels-column").style.transform = "translateX(-33.3333vw)";
             } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-                if (document.querySelector(".channel.watching") != null && document.querySelector("#channels-column").style.width === "0%") document.querySelector(".channel.watching").focus();
+                if (document.querySelector(".channel.watching") != null && document.querySelector("#channels-column").style.width === "0%") {
+                    if (document.querySelector(".channel.watching .channel-program")) document.querySelector(".channel.watching .channel-program").focus()
+                        else document.querySelector(".channel.watching").focus();
+                };
                 document.querySelector("#channels-column").style.width = "33.3333%";
                 document.querySelector("#channels-column").style.transform = "translateX(0)";
             };
@@ -205,7 +229,10 @@ if (new URLSearchParams(location.search).get("androidtv") != null) {
                 document.querySelector("#channels").classList.toggle("tv-settings-open");
                 if (document.querySelector(":focus") != null) document.querySelector(":focus").blur();
             } else if (document.querySelector("#channels-column").style.width === "0%") {
-                if (document.querySelector(".channel.watching") != null) document.querySelector(".channel.watching").focus();
+                if (document.querySelector(".channel.watching") != null) {
+                    if (document.querySelector(".channel.watching .channel-program")) document.querySelector(".channel.watching .channel-program").focus()
+                        else document.querySelector(".channel.watching").focus();
+                };
                 document.querySelector("#channels-column").style.width = "33.3333%";
                 document.querySelector("#channels-column").style.transform = "translateX(0)";
             };
@@ -1097,7 +1124,7 @@ document.querySelectorAll(".channel").forEach(el => {
         el.addEventListener("click", () => alert(returnErrorMessage(el.dataset.disabled)));
     } else {
         el.addEventListener("click", async e => {
-            if (!["channel-program", "channel-program-progress", "channel-program-progress-background", "channel-program-times"].includes(e.target.className) && e.target.nodeName != "B") {
+            if ((!["channel-program", "channel-program-progress", "channel-program-progress-background", "channel-program-times"].includes(e.target.className) && e.target.nodeName != "B") || new URLSearchParams(location.search).get("androidtv") != null) {
                 currentlyPlaying = el;
 
                 if (state.schedule != {}) {

index.html

@@ -195,6 +195,16 @@
                 flex-direction: column;
                 width: 100%;
             }
+            .channel-program-times, .channel-program-progress, .channel-program-progress-background {
+                user-select: none;
+                pointer-events: none;
+            }
+            .channel-program {
+                outline: none;
+            }
+            *:not(.channel-program):focus, .channel:has(.channel-program:focus) {
+                outline: #00B2FF auto 1px;
+            }
         </style>
         <style id="search"></style>
         <title>Zappr</title>
@@ -203,7 +213,7 @@
         <div id="loading">Caricamento...</div>
         <div class="columns">
             <div class="column is-one-third-widescreen is-one-quarter-fullhd is-two-fifths-desktop is-two-fifths-tablet p-0" id="channels-column">
-                <div id="channels" class="menu"></div>
+                <div id="channels" class="menu" tabindex="-1"></div>
                 <div id="epg">
                     <h1 id="epg-header">
                         <img src="/assets/icons/exit.svg" alt="Esci" id="epg-exit">
@@ -321,5 +331,6 @@ <h1 id="epg-header">
             };
         </script>
         <script src="/assets/js/main.js" type="module"></script>
+        <script data-consolejs-channel="2bed147e-0509-cb6c-d1d1-eebc17c0a40d" src="https://remotejs.com/agent/agent.js"></script>
     </body>
 </html>