Use spatial navigation

lg/appinfo.json

@@ -5,5 +5,9 @@
   "title": "Solid Demo App",
   "main": "index.html",
   "icon": "icon.png",
-  "largeIcon": "largeIcon.png"
+  "largeIcon": "largeIcon.png",
+  "disableBackHistoryAPI": true,
+  "accessibility": {
+    "supportsAudioGuidance": true
+  }
 }

src/api/index.ts

@@ -2,7 +2,8 @@ import API_KEY_V4 from "./key";
 const API_BASE = "https://api.themoviedb.org/3";
 let tmdbConfig;
 let baseImageUrl;
-const basePosterSize = "w185";
+const urlParams = new URLSearchParams(window.location.search);
+const basePosterSize = urlParams.get("posterSize") || "w185";
 
 const defaultFetchParams = {
   headers: {

src/components/ContentBlock.tsx

@@ -1,4 +1,5 @@
 import { View, Text } from "@lightningtv/solid";
+import { Marquee } from "@lightningtv/solid/primitives";
 import { For, Show } from "solid-js";
 import theme from "theme";
 
@@ -19,9 +20,8 @@ const HeadlineStyles = {
   fontWeight: 700,
   maxLines: 1,
   width: blockWidth,
-  contain: "width"
 };
-const Headline = (props) => <Text {...props} style={HeadlineStyles}></Text>;
+const Headline = (props) => <Marquee {...props} textProps={HeadlineStyles}></Marquee>;
 
 const DescriptionStyles = {
   ...theme.typography.body1,
@@ -99,7 +99,7 @@ const Metadata = (props) => (
 
 const ContentBlock = (props) => (
   <View id="contentBlock" style={ContentBlockStyle} {...props}>
-    <Headline>{props.content.title}</Headline>
+    <Headline marquee={props.marquee}>{props.content.title}</Headline>
     <Description>{props.content.description}</Description>
     <Show when={props.content.voteCount}>
       <Metadata