tomnjerry74 93 Posted August 25, 2021 Share Posted August 25, 2021 In the web-ui, you can press tab and then use the arrow keys to move around objects. You're able to tell what object you're on because it becomes highlighted. I'm trying to accomplish 2 things: 1. How do I target the highlight universally to change the padding? 2. Whenever the page is loaded or refreshed, the first link on the page is always automatically selected and looks like the above image. How can I prevent that from happening? Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 25, 2021 Share Posted August 25, 2021 +1 Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted August 25, 2021 Share Posted August 25, 2021 2 hours ago, tomnjerry74 said: 1. How do I target the highlight universally to change the padding? Something like this div.homeSectionsContainer a.sectionTitleTextButton {padding-right: .5em!important;} Not sure I follow on the second issue. Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted August 25, 2021 Author Share Posted August 25, 2021 21 minutes ago, Happy2Play said: Something like this div.homeSectionsContainer a.sectionTitleTextButton {padding-right: .5em!important;} Not sure I follow on the second issue. Thank you so much for the help. Basically any text/div can be selected manually by using the arrow keys. For instance, here's a case where the programs button is selected. And another So it doesn't just encompass the homesection titles. The problem is: every time I go to the home page - type in the address, hit enter, wait for it to load - an object is selected automatically without touching anything. So I have text that looks highlighted like that for no reason. Honestly it might just be easier to make it invisible completely if possible. Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted August 25, 2021 Author Share Posted August 25, 2021 And just to mention I've disabled custom CSS first to see if that was causing it. Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted August 25, 2021 Author Share Posted August 25, 2021 It's something to do with :focus, but even if I get the styling sorted there's no reason it should be automatically focusing an object. Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted August 25, 2021 Share Posted August 25, 2021 (edited) 15 minutes ago, tomnjerry74 said: It's something to do with :focus, but even if I get the styling sorted there's no reason it should be automatically focusing an object. Correct but I still can not replicate focus always, I occasionally get focus on multiple items and just click anywhere to remove it. But I did just notice focus on these added custom links as a page refresh focuses on first item (but still random depending on where I am in the debug console). Now if I remove these links I do not see any focus. But your examples are mixed buttons and links, just like if you make that custom link only a button it is treated differently. Edited August 25, 2021 by Happy2Play 1 Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted August 25, 2021 Share Posted August 25, 2021 (edited) 4 hours ago, tomnjerry74 said: 2. Whenever the page is loaded or refreshed, the first link on the page is always automatically selected and looks like the above image. How can I prevent that from happening? Okay yes this would appear to from where we are putting the "Personal-Links" as Home is normal focus on a refresh. So you would have to move "Personal-Links" up out of "index=0". Hmm have to test some more as it has to be in index=0 to scroll. Edited August 25, 2021 by Happy2Play 1 Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted August 25, 2021 Author Share Posted August 25, 2021 14 minutes ago, Happy2Play said: Okay yes this would appear to from where we are putting the "Personal-Links" as Home is normal focus on a refresh. So you would have to move "Personal-Links" up out of "index=0". Hmm have to test some more as it has to be in index=0 to scroll. I wonder if there's a way to remove any auto focus at all. It sounds like a javascript issue but I'm not that knowledgeable. Even if I don't have any custom links, my Programs button is selected and that's at the bottom of the page, beneath all of the other blocks. Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted August 25, 2021 Share Posted August 25, 2021 23 minutes ago, tomnjerry74 said: I wonder if there's a way to remove any auto focus at all. It sounds like a javascript issue but I'm not that knowledgeable. Even if I don't have any custom links, my Programs button is selected and that's at the bottom of the page, beneath all of the other blocks. Can only assume this is with Home Screen in a specific order, correct? As I only see this if Live TV is in section 1 with no custom links. But there has to be in a script somewhere causing the focus on link. Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted August 26, 2021 Share Posted August 26, 2021 (edited) Okay with changing order of Home Screen if no continue watching or continue listing, live tv takes focus from position three. Now if other options are above live tv it can not take focus. With custom links you would add "noautofocus" to the class. This will prevent the links from becoming focused on Refresh, but will not help with Live TV becoming focused depending on its Home Screen position example, also changed to emby-button (note you can add "raised" also if you want the button to be like Live TV.) Spoiler <div class="view flex flex-direction-column withTabs"> <div class="tabContent flex flex-grow" data-index="0"> <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow" data-bindheader="true"> <div class="Personal-Links" style="top:120px;text-align:center;position:relative;"> <a is="emby-button" class="emby-button noautofocus" href="https://emby.media" target="_blank" style="margin: 0 .7em;">Emby</a> <a is="emby-button" class="emby-button noautofocus" href="https://emby.media/community" target="_blank" style="margin: 0 .7em;">${LinkCommunity}</a> <a is="emby-button" class="emby-button noautofocus" href="https://github.com/MediaBrowser" target="_blank" style="margin: 0 .7em;">${LinkGithub}</a> <a is="emby-button" class="emby-button swaggerLink noautofocus" target="_blank" href="#" style="margin: 0 .7em;">${LinkApi}</a> </div> <div class="scrollSlider flex-grow padded-top-page sections"> </div> <div class="padded-bottom-page"></div> </div> </div> <div class="tabContent flex flex-grow" data-index="1"> <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow focuscontainer-down" data-bindheader="true"> <div class="scrollSlider flex-grow padded-top-page sections"> </div> <div class="padded-bottom-page"></div> </div> </div> </div> For Live TV you would have to edit the "homesections.js" adding "noautofucus" to those 4 elements. from beatified script Spoiler section: "programs" }) + '" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">live_tv</i><span>' + globalize.translate("Programs") + "</span></a>", html += '<a style="margin:.5em 0 .5em .8em;" is="emby-linkbutton" href="' + appRouter.getRouteUrl("livetv", { serverId: apiClient.serverId(), section: "guide" }) + '" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">dvr</i><span>' + globalize.translate("Guide") + "</span></a>", html += '<a style="margin:.5em 0 .5em .8em;" is="emby-linkbutton" href="' + appRouter.getRouteUrl("recordedtv", { serverId: apiClient.serverId() }) + '" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">folder</i><span>' + globalize.translate("Recordings") + "</span></a>", html += '<a style="margin:.5em 0 .5em .8em;" is="emby-linkbutton" href="' + appRouter.getRouteUrl("livetv", { serverId: apiClient.serverId(), section: "dvrschedule" }) + '" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">date_range</i><span>' + globalize.translate("Schedule") + "</span></a>", html += "</div>", html += "</div>", html += "</div>", html += "</div>", html += '<div class="verticalSection focusable" data-focusabletype="nearest">', html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left padded-right">', layoutManager.tv ? html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate("HeaderOnNow") + "</h2>" : (html += '<a is="emby-sectiontitle" href="' + appRouter.getRouteUrl("livetv", { from consolidated view (default) Spoiler ("livetv",{serverId:apiClient.serverId(),section:"programs"})+'" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">live_tv</i><span>'+globalize.translate("Programs")+"</span></a>",html+='<a style="margin:.5em 0 .5em .8em;" is="emby-linkbutton" href="'+appRouter.getRouteUrl("livetv",{serverId:apiClient.serverId(),section:"guide"})+'" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">dvr</i><span>'+globalize.translate("Guide")+"</span></a>",html+='<a style="margin:.5em 0 .5em .8em;" is="emby-linkbutton" href="'+appRouter.getRouteUrl("recordedtv",{serverId:apiClient.serverId()})+'" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">folder</i><span>'+globalize.translate("Recordings")+"</span></a>",html+='<a style="margin:.5em 0 .5em .8em;" is="emby-linkbutton" href="'+appRouter.getRouteUrl("livetv",{serverId:apiClient.serverId(),section:"dvrschedule"})+'" class="raised justify-content-center noautofocus"><i class="md-icon button-icon button-icon-left">date_range</i><span>'+globalize.translate("Schedule")+"</span></a>",html+="</div>",html+="</div>",html+="</div>",html+="</div>",html+='<div class="verticalSection focusable" data-focusabletype="nearest">',html+='<div class="sectionTitleContainer sectionTitleContainer-cards padded-left padded-right">',layoutManager.tv?html+='<h2 class="sectionTitle sectionTitle-cards"> Unless someone else knows a better way. @tomnjerry74 @CarlosLima Edited August 26, 2021 by Happy2Play added note 1 Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted August 26, 2021 Share Posted August 26, 2021 Does this resolve the other padding issue? a.sectionTitleTextButton:not(.padded-left) { padding: 0 .5em 0 0!important; } Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted August 26, 2021 Author Share Posted August 26, 2021 (edited) @Happy2Play Okay, I added the noautofocus classes to the links and it worked great. Using the following rules and everything has the right padding: .button-link{ /* Focus Link */ padding:0 .5em 0 .5em!important } div.homeSectionsContainer a.sectionTitleTextButton{ /* Focus Titles */ padding-right:.5em!important } Thank you again!!! And nice find with the "homesections.js". I'm not sure if I find it worth it to keep those updated though. At this point I think it should be labeled a bug or something to improve in the source because There shouldn't be an autofocused item. It should have to be initiated by keyboard input. Things at the bottom of the page shouldn't be able to have the first tab index. It seems there's not even any indicator when you are focused on posters, so you have to sort of spam your way through them without seeing where you are. I'm sure this is not well suited for people who actually need to use this navigation method. Edited August 26, 2021 by tomnjerry74 Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted August 26, 2021 Author Share Posted August 26, 2021 Here's my layout: If I have nothing in my Continue Watching/Listening, Live TV gets the autofocus. Otherwise, Continue Watching does. And you can see the autofocus at work in the screenshot too haha 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now