Remove the Youtube logo in the corner

[ksala]

Hey! Thanks for the great mod, it's been a lifesaver. I don't mind ads but Youtube is just getting a bit too much.

Anyway, one of the things that irks me the wrong way is that Youtube TV has a logo in the upper right corner. It's a small thing, but I know I'm already on Youtube, and a really do not want that to get burned-in on my 1xxx euros oled...

Looking at the Youtube TV webpage in a browser (with one of the addons to access it), I see that the logo is put there with a <ytlr-logo-entity> tag and some CSS magic, behind most of the webpage.

I've tried to add something like this (and some variations, like removing the logo on a timer) to the app, building it and installing it on my CX, but it doesn't just seem to work:

window.addEventListener("hashchange", (evt) => {
    document.querySelector("ytlr-logo-entity").remove();
}, false);

The same javascript snippets seem to work fine on a browser instead (there is a brief flash when navigating to/from a video, but the logo is then deleted).

I've tried to debug the app with https://webostv.developer.lge.com/sdk/command-line-interface/debugging-web-applications-cli/ but I'm having no luck, ares-inspect just gives me a page with "Inspectable WebContents" and no working links in it (with errors like SDK not defined), and the page served by ares-server just redirects me to Youtube TV.

Any idea of what I might be doing wrong? I can confirm I'm actually building and installing changes, if I change strings etc I do see the change reflected on the TV.

[ksala]

As always you find an answer as soon as you post a question :) It seems that for some reason webpack is not picking up my changes if I leave them in a new file. I've added the import, but my code just never shows up in the packed userscript file.
it works fine instead if I manually delete the dist folder every time and rebuild/repackage. I'm probably doing something wrong, but I don't know what...

Now it works, but Youtube re-add it when scrolling horizontally, so doing so only on hashChange is not ideal.
I know they're deprecated, but using DOM Mutation Events instead work fine... but it breaks the sidebar if you just remove the element, I guess they use the logo as an "anchor" in some javascript/css.

Luckily hiding it with CSS works great. Got it down to this for now, it still shows up for a fraction of a second when you're changing between categories in the sidebar, but I don't mind that.

window.addEventListener("DOMNodeInserted", (evt) => {
  if (configRead('hideLogo')) {
    document.querySelector("ytlr-logo-entity").style.visibility = "hidden";
  }
}, false);

I'll clean it up a bit and submit a pull request (with the option off by default) to see if there is any interest in merging this.

On a side note, I would still love some help with debugging the app (do I have to use the emulator?). I was thinking that one "easy" way to block the logo would be to block the network request to it, but the app on my TV seems to use a different url than the one I'm seeing in the browser (or I'm blocking it wrong... but blocking other part of the UI seems to work fine)

[Informatic]

Hey! You can use the inspector at http://TV_IP:9998 (that's exposed by default with developer mode enabled / when rooted)- depending on your webOS version you may need to use a fairly old chrome/webkit-based browser for it to work properly. I use Midori 9.0 on Linux against webOS 3.8, and it mostly works.

When you verify this works properly don't hesitate to file a PR against our fork: https://github.com/webosbrew/youtube-webos

[Informatic]

Prebuilt .ipk (packaged in .zip because github) if anyone wants to test this out: youtube.leanback.v4_0.1.1_all.zip

[vttai96]

@ksala Can you explain more clearly how to add that code (where?, how?). I want to do the same to remove YouTube End Cards. Thanks.

[ksala]

I forgot about this :) I've been using my ipk for a while and it worked fine. I need to clean it up and send a pull request eventually...

@vttai96 I think the readme is pretty clear on how to build and install the app. You can add an event listener/DOM Mutation Events listener to index.js to call a function that hides/remove the cards. If you have any specific questions I'm happy to try to answer them (although I really don't know javascript and I'm not familiar with this project outside of a couple of late-night hours fun) but I don't really have the time to look into which event you need to hook into or which classes you need to hide.

[vttai96]

@ksala thank you, I will try it.

[DavG]

+1 for this feature.

My C7 has some burning already :(

[DavG]

I opened a PR on the fork : webosbrew#56