Jump to content

How to change the selected object style?


tomnjerry74

Recommended Posts

tomnjerry74

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?

image.png.57e4158784c558f1e4a7943903a61750.png

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

Happy2Play
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

tomnjerry74
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.

image.png.3ca9eb11f0d7380ea92d937d567560a5.png

And another

image.png.b813b742cbed8f6f893b7e0fb3c7a088.png

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

tomnjerry74

And just to mention I've disabled custom CSS first to see if that was causing it.

Link to comment
Share on other sites

tomnjerry74

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

Happy2Play
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.

1253873401_Screenshot2021-08-25150819.thumb.jpg.a757700f36bfab2455112da60d615301.jpg

 

Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

Happy2Play
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 by Happy2Play
  • Like 1
Link to comment
Share on other sites

tomnjerry74
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.

image.png.b5ad021ea0bd884a5009efe90290273d.png

Link to comment
Share on other sites

Happy2Play
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.

image.png.b5ad021ea0bd884a5009efe90290273d.png

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

Happy2Play

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 by Happy2Play
added note
  • Like 1
Link to comment
Share on other sites

Happy2Play

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

tomnjerry74

@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

  1. There shouldn't be an autofocused item. It should have to be initiated by keyboard input.
  2. Things at the bottom of the page shouldn't be able to have the first tab index.
  3. 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 by tomnjerry74
Link to comment
Share on other sites

tomnjerry74

Here's my layout:

image.png.48efe5143ff432476d5b80807034f16a.png  

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 :P

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...