React: Sem mouse só teclas - Navegação por teclas #1775
Replies: 10 comments
-
A primeira coisa que eu faria, é saber qual modelo de TV irá rodar para setar como base "se funcionar nessa já é meio caminho andado", e estipular alguns modelos de base. Eu uso uma LG com WebTV e é bem limitado de fato, comprei só pra assistir netflix e testar o navegador haha Recomendo usar o Apache Weinre para debugar algumas coisas do JavaScript e da runtime https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html Você tem alguma dúvida ou algum desafio básico para fazer uma prova de conceito, eu posso tentar chegar a resposta com você. No caso, vc quer ouvir por "keyboard" events no browser da TV? Se sim, um passo seria analisar o prototype do objeto Window para saber o que é que tem lá. |
Beta Was this translation helpful? Give feedback.
-
Que tipo de testes vc já fez com relação a isso? Meu controle está sem bateria, mas irei testar assim que chegar as pilhas novas. Será que keypress funciona? :o eu acho que não kkk
Se vc já está com React, é melhor usar o react-router-dom |
Beta Was this translation helpful? Give feedback.
-
Opa, valeu @felquis, na verdade o app irá rodar nas TVs LG e Samsung, sistemas WebOs e Tizen respectivamente, os mais atuais (menos de 5 anos de idade). Quanto a usar o weinre, tanto a Tizen quanto WebOs quando se trata de tecnologias web já me dão este debug remoto bem fácil e sem configurações rs abre o f12 no chromium e boa. Aos desafios, a TV escuta os mesmos eventos de tecla do browser, exceto as teclas verde/amarelo etc que TVs tem que são códigos q não tem em um keyboard normal. Tenho o código abaixo onde estou fazendo vários testes: Fazer uma navegação de teclado é relativamente facil, quando falo navegação é navegar entre os items de uma lista, entre os itens do menu e etc. Quanto a compatibilidade com a TV é tranquilo tbm, vamos fazer estes testes no browser, passar para a TV vai ser fácil depois... Minha dúvida maior é, vou fazer esta navegação totalmente abstraida, sem acoplar ela no dom ou na interface gráfica, criar uma estrutura puramente lógica que ao final do processo executa um "update ui" e neste ponto ele processe o que pertinente a mostrar na UI do user. Vi alguns código que galera fazia totalmente acoplado na UI e ai se mudasse uma div ferrava tudo rs Na verdade o principal desafio aqui é, nesse processa UI eu processaria os dados na DOM (teria em meus objetos "Ite,Navegável" uma propriedade "UI" que seria como um ponteiro do cara da dom que quero alterar). Mas se tratando de react não vou poder usar DOM direto já que ele renderiza a todo momento novos itens no dom e mata os atuais, e sei que usar um monte de ref iria me causa problemas de performance até onde vi... Qual seria a maneira correta de fazer isto? Talvez a maneira que penso de fazer isso apenas com a lógica e depois dar um processaUI para passar para os itens na UI seja mais imperativo que declarativo como o React prega... Ai fico na dúvida... A navegação do usuário vai passar em em menus, links, boxes de produtos e etc... O que pensa que seria legal? Não sei se me expressei bem kk |
Beta Was this translation helpful? Give feedback.
-
@wilsonneto-dev trabalhei em um projeto onde fizemos alguns vários componentes para TVs. Especificamente tratávamos as TVs da Samsung (Orsay - Modelo mais antigo e Tizen) e da LG (WebOS), mas acho que eramos capazes de rodar em umas outras TVs da Panasonic e da Sony, mas não dávamos suporte oficialmente. Sobre a navegação, pelo que me lembre a maioria dos eventos de teclado funcionavam com o controle, o que ajudava bastante. A única coisa que tínhamos que tomar cuidado era que os códigos das teclas, a Orsay tem uns códigos bem bizarros. Não sei quais TVs tu quer dar suporte, mas vale olhar bem. Nesse caso, fizemos esse resolvedor de teclas em JS puro, não fazia muito sentido atrelar isso com React no nosso caso. Uma outra coisa que ajudava era que tínhamos uma estratégia para identificar a plataforma e tomar algumas decisões, do tipo qual conjunto de valores usar para as teclas, se desabilitávamos alguma animação (algumas TVs são bem ruins com isso) e por aí vai. Por falar em animação e em React, não sei o quão longe tu vai com desenvolvimento para TVs, mas caímos em algumas pegadinhas. Uma vez estávamos fazendo um componente que jogavamos algumas imagens na tela e animávamos um container para rotacionar essas imagens. Uma das TVs estava com uma performance ridícula para animar. Fomos investigando mais a fundo e o que acontecia é que estávamos fazendo o resize das imagens via CSS (a imagem vinha com 1000px de largura, e redimensionávamos para 200px). Com isso, acho que a TV passava muito tempo calculando e aplicando esses tamanhos novos. A solução foi, para essa TV, trazer a imagem já no tamanho correto. Com isso, começamos a ter ganhos de performance nesse cenário. Na maioria das TVs mais novas, acho que vai ser bem tranquilo o desenvolvimento. Só lembra que é um browser ali, eventualmente com algumas limitações hahaha. |
Beta Was this translation helpful? Give feedback.
-
Opa @wmartins maravilha, muito obrigado por estas observações, esse lance da imagem já vou ficar esperto rs Aqui estamos trabalhando na união do time frontend com o desenvolvimento dos apps das TVs que estamos trazendo para "dentro de casa". É um projeto que ainda tenho um mês para estudar os desafios, me iterar sobre as limitações e etc. Os principais desafios que vejo é a navegação pro teclas, e as tecnologias de streaming adaptativo + DRM, quanto aos ultimos estou fazendo um curso e vários testes (DRM com PlayReady e Widevine / HLS e DASH). Mas no momento este das teclas me parece o mais rápido de chegar a uma solução. Fiz um exemplo básico e vou fazer disto uma lib onde poderemos navegar apenas usando parametros nav-parent ou nav-item nas tags. Um exemplo que fiz e que do que quero fazer: Código Fonte: Mas bom, o que faço ai no exemplo e fazer um arranjo como se fosse uma arvore onde cada "parent" pode ter itens navegáveis assim como mais filhos também "parent"s que terão filhos, organizando sempre a navegação por horizontal ou vertical. E em cada ponto desta estrutura lógica de arvore tenho um ".ui" que é o dom daquele vertice, seja ele filho ou parent/contexto. Mas ele é meio que um singleton lógico em arvore aponta para elementos do dom e gera eventos... Já no react sei que o que o framework menos prega é que vc utilize o dom direto e muito menos tenha um singleton de toda a navegação... Ai minha dúvida mesmo é: E no React, como vcs fizeram? Como você ou vocês fariam? Imagino que fazendo em react eu teria de seguir uma ideia oposta a esta que utilizo se tratando de html e js puro, acredito que no react eu teria de controlar o comportamento pelo componente... mas como saber e está no componente atual a navegação/cursor, ou se está em outro? Como linkar estes caras? Ou também faço uma estrutura lógica como fiz ali em árvore e em vez de pendurar elementos DOM neles eu penduro um monte de Refs? O que você acha? |
Beta Was this translation helpful? Give feedback.
-
Acho que entendi o teu ponto @wilsonneto-dev, é mais a navegação da página em si do que a solução para teclas. No caso do projeto em que eu trabalhava, acabávamos deixando isso a cargo de quem usava os nossos componentes. Então meio que não resolvemos no fim das contas. Entretanto, estudamos algumas alternativas, e acho que uma que vale mencionar é a spec de Spatial Navigation:
Acho que daria para implementar facilmente com alguns eventos algo parecido. Sugiro dar uma lida na Spec para ver se eles indicam alguma solução específica. Mas pensando em React, talvez vejo alguma coisa de import { useSpatialNavigation } from '@org/navigation-tools`
function Component() {
const focused = useSpatialNavigation('Sidebar')
}
// ou
function Component() {
}
// quando for usar
import { withSpatialNavigation } from '@org/navigation-tools'
const ComponentWithNavigation = withSpatialNavigation(Component, 'Sidebar') Só chutando uma possível implementação, teria que estudar mais para ver se faz sentido hahaha. |
Beta Was this translation helpful? Give feedback.
-
@wilsonneto-dev estou com um projeto semelhante, também em React.Js |
Beta Was this translation helpful? Give feedback.
-
Opa @RUANDUARTE03, dei andamento mas acabei usando uma lib que já me facilitou o Spatial Navigation bem: Está trabalhando com projetos para TVs também? Se estiver vamos conversando, é uma área complicada e com poucos devs, é bom ter com quem trocar xp hehe Abraços! |
Beta Was this translation helpful? Give feedback.
-
Nossa pensei que era muito difícil fazer navegação por teclas, mas com uma comunidade top assim, nada é impossivel kkkkk |
Beta Was this translation helpful? Give feedback.
-
Estou desenvolvendo uma aplicacao para Chromecast androidTV usando react native, porem estou com uma pequena dificuldade para entender como funciona o controle. Basicamente eu quero que quando o usuario selecionar o OK em uma tela, apareca uma aba em na tela que mostre a lista de canais, eu consigo fazer isso hoje, porem com a tecla Back do controle remoto, quero mudar isso mas nao to sabendo como, alguem tem ideia?
|
Beta Was this translation helpful? Give feedback.
-
Fala galera!
O desafio agora é desenvolver uma aplicação que rodará em TVs, as premissas são:
Estou fazendo vários testes, mas o que me pegou foi a questão de navegação por setas do teclado... A UI será em react, mas queria fazer esta navegação em JS sem usar libs e apenas encaixá-la na UI, mas penando para saber como fazer sem ter um monte de Refs rs....
Bom, gostaria de opiniões, como vocês fariam? Alguém já fez? Dicas?
Muito obrigado galera, abraço!!
Beta Was this translation helpful? Give feedback.
All reactions