Hover over likes/dislikes bar issue

[makislog]

Hello!

When I hover over the likes/dislikes (L/D) bar to see out of how many votes the L/D ratio is created, the bar disappears within less than a second. This happens only on the main results page.

Windows 10, Chrome.

Thanks for the useful extention!

[elliotwaite]

Thanks for reporting this. It might be a Windows issue since I'm not seeing this on my Mac. I don't have a Windows computer so I won't be able to debug this right away, but I'll see if I can borrow one soon.

Some questions:

• Are you hovering over the rating bar that is shown on the thumbnail or the rating bar that is shown on the video page (if you also have the Return YouTube Dislike extension installed)?
• Does something happen at the same time that the rating bar disappears, like does the thumbnail video preview start playing at that same time?
• What are your current settings for the extension? Are any of your settings different than the default settings listed below?

Default Settings

Position:

• [ ] Top
• [x] Bottom

Colors: Blue / Gray Height: 4 px Opacity: 100% Cache Duration: 10 min

• [ ] Add a separation line above the rating bar.
• [ ] Exponentially scale the rating bar.
• [x] Hover your mouse over the rating bar to reveal a tooltip of rating info.
• [ ] Use the rating bar colors for the rating bar on the video page (when used with the Return YouTube Dislike extension).
• [ ] Add a color-coded text rating percentage to each video listing.

[makislog]

Thanks for getting back!

I am hovering over the bar on the thumbnail. Once the bar disappears, a preview of the video starts. Settings are default except for those two;

• Position is top, but it was the same when position was bottom.
• Height is 8 px

[elliotwaite]

Okay, thanks. I'll let you know once I've been able to test this on a Windows machine.

[elliotwaite]

I just tested this on Windows Chrome, but I wasn't able to reproduce the issue. Do you have any other YouTube-related extensions installed that might be causing the issue? If you do, you could try temporarily disabling them to see if that makes the issue go away.

Also, if you're familiar with web dev debugging, perhaps you could inspect the rating bar element to see what is causing it to disappear. Perhaps the video preview is being displayed over it for some reason and it is a z-index issue, or maybe it's something else. However, if you're not familiar with web dev debugging, no worries.

[makislog]

I'm sorry but I am clueless about web dev! I ca try to if you tell me how.

I tried to reproduce the problem and noticed that it happens only when I search for a vide and the video results are vertically placed. If I am on the main yt page rating bar works perfectly.

I don't have any other yt extensions. I disabled all other extensions though, but no luck.

[elliotwaite]

Ah, the search results page, I see what you mean now. I can reproduce the issue there.

Hmm, I'm not sure what the best solution to this would be. It seems like some people might want the behavior to work as it already does now, where when the preview starts, the rating bar disappears. Especially if they have it positioned at the bottom of the thumbnail because otherwise, it would interfere with the progress bar controls.

Also, from inspecting the HTML, it looks like the video preview element is just a separate element that completely covers the thumbnail element, so it might be tricky figuring out how to make the rating bar display over it.

What do think would be the best solution to this?

[makislog]

I've put the rating bar on the top of the thumbnail, just to prevent interfering with the progress bar.

Maybe when the cursor points at the bar, the bar should stay on. If someone wants a preview of the vide they can move the cursor further up/down to the thumbnail.

[elliotwaite]

I think that's a good suggestion, to try to make it so that hovering over the bar somehow prevents the preview from playing.

That seems doable, but implementing it might take more work than I want to invest in working on this extension at the moment. The tricky part is that the "hover to play the preview" effect isn't just triggered by hovering over the thumbnail, it's also triggered by hovering over the text to the right of the thumbnail, so it's triggered by that entire section that contains the thumbnail and text. So to make it so that hovering the rating bar didn't trigger that auto-play effect, I think I'd have to insert the rating bar into the page outside that element and then reposition it using some tricky logic so that it looked like it was positioned where it should be.

Unless I come up with a more elegant solution, I think I might just wait for now on trying to fix this, since I'm somewhat busy with other things at the moment. But if anyone has suggestions for a more elegant solution, or if anyone wants to try to implement the solution mentioned above, I'd be open to reviewing any PRs. And if I have more time in the future, and want to work on fixing this issue, I may at some point try to tackle it myself.

I hope this is understandable, and thanks again for bringing this issue to my attention.

[makislog]

Maybe it could be easier to show L/D ration within the rating bar. This would load the bar with extra info, so it could be an optional choice. Extension is super useful as it is anyways, so deal with it whenever you can and feel like doing it!

Cheers!

[elliotwaite]

True, that is another option. I think I'd probably find that to be too cluttered for my taste, but it's an option worth considering.

[sadsayeed]

I've been having the same problem for quite some time, made hovering tooltip unusable for me. I suppose only CSS properties like opacity (to 1) and visibility (to visible) could be changed in the extension into the ytrb-tooltip>div element while on the search page; that would've been much helpful.

Since I already heavily use uBO (uBlock Origin), I just added the following one line in uBO>Settings>My Filters... that worked the way I wanted, on YT search pages as a workaround. It basically just changes the CSS properties opacity (to 1) and visibility (to visible) on ytrb-tooltip>div element.

youtube.com##:matches-path(/search_query=/) ytrb-tooltip>div:style(opacity: 1 !important; visibility: visible !important;)

[elliotwaite]

@sadsayeed If I understand correctly, that change makes it so that the tooltip is always shown, not just when it's hovered. Is that correct?

That's an interesting workaround. Thanks for sharing.