add feature to toggle on/off sponsorblock with a single key press

[alyyousuf7]

I quite often find myself to toggle on/off the sponsorblock, as I prefer watching in-video sponsorships on some videos.

There are two features I added to make that possible:

1. When you update config while watching a video using 🟩 button, it now updates the SponsorBlock skip schedule immediately - without having to go back out of the video and opening it up again
2. Even the above feature is not quick enough, as it takes quite a few remote button presses to do that, hence I added 🟥 button press to quickly toggle on/off the SponsorBlock

[throwaway96]

How was this tested, and on what platform?

Does anyone else have any comments?

[alyyousuf7]

I tested this on my LG TV with OS version 03.33.95.

I have been using this version every day since I raised this PR. And Haven't faced any issue so far.

[alyyousuf7]

However, there's another feature that I'm thinking to build on top of it. I'll raise that as a separate PR as I'm not sure it would be accepted as a feature, and don't want to hinder this PR as a result.

The idea is, while the SponsorBlock is turned off, and the current video timestamp is under a skippable segment and video is playing, upon turning on SponsorBlock using the GREEN button, I would like it to skip the current segment immediately.

The use case is, sometimes I like to hear the sponsored segments. But after a few seconds of watching the segment, if I feel like skipping the segment, right now I have to press "right button" and scroll thru the timestamp manually, and sometimes it overshoots, so I have to watch some of the sponsored segment ☹️.
With the new idea, I'll be able to press GREEN button once to skip the current segment (turning on SponsorBlock), and then again to turn off SponsorBlock.

No need to scroll timeline back and forth.

As I said, I haven't implemented it yet, but I plan to. So this PR could be a precursor to the new idea.

[cremor]

@alyyousuf7 I like those changes, and I also very much like the idea in your last comment. But one note: I've tested this on an LG OLED C9 (webOS 4.9.7) and the changed popup messages on startup about which buttons you can press are not shown correctly. They are indistinguishable boxes as can be seen in this screenshot:

[alyyousuf7]

Oh, so not all TVs support these unicodes. I'll try to find an alternative solution, like using some image instead.
Thanks for testing, really appreciate it!

[ANewDawn]

You could use words yellow and green if images don't work. Make yellow word in yellow colour would suffice.

[fire332]

Those are literally just rectangles. A div with a background color will suffice (and maybe text on the inside indicating the color for accessibility).

HTML using Tailwind classes for example:

<span class="inline-block bg-green-500 h-1 w-2 text-sm font-bold">GREEN</span>

[alyyousuf7]

Those are literally just rectangles. A div with a background color will suffice (and maybe text on the inside indicating the color for accessibility).

I was in the middle of trying that out lol

[alyyousuf7]

Do we really need the text inside the colored boxes?

This is how it looks with HTML boxes instead.

[throwaway96]

I also have accessibility concerns, especially with the colors being red and green. On my remote, red has one dot and green has two. However, I would like there to be text saying "red" and "green" somewhere.

On a related note, does any of this work with Audio Guidance?

[cremor]

I agree, there should also be text for the colors so that color blind people can understand them.

[alyyousuf7]

I agree, there should also be text for the colors so that color blind people can understand them.

Ok accessibility for color blind people - idea sold! Will add text inside the colored boxes.

[alyyousuf7]

Pushed boxes with text inside them - here's how it looks now.

[fire332]

May I suggest using a different shade of red? White on pure red might be hard to read.

Color Contrast Check

[alyyousuf7]

What do you think of these:
#006600: Green
#B30000: Red

UPDATE: pushed changes with colors mentioned above.

[fire332]

Better. Even better would be if the boxes had the same width for all four colors.

[alyyousuf7]

Hmm, making it same width will make it too much colorful (at least to my liking) - also yellow doesn't work with white text color.
Here it is:

But I also propose original design with text:

I personally like the second one. What do you guys think?

[throwaway96]

I like the second one.

Is this something that people are going to want to do frequently enough for it to be worth dedicating 1/3 of our remaining buttons to it? (I suppose we could use non-color buttons, but I'm not sure which ones are already used by YouTube.) Unfortunately I don't think detecting long presses is feasible (although I haven't actually investigated how keydown/up works in WAM).

[alyyousuf7]

Is this something that people are going to want to do frequently enough for it to be worth dedicating 1/3 of our remaining buttons to it?

I personally use this feature quite often (my local build with this PR commits).

I'm not sure which ones are already used by YouTube.

I don't think YouTube uses any buttons other than up/down/left/right/ok. My reasoning is based on the fact that YouTube for TV has to support many different TVs, and not all TVs would expose all buttons on web as key events except for these essential five buttons.

I suppose we could use non-color buttons

On my remote at least, I do not see any non-colored buttons that could be utilized for this feature. All non-colored buttons have very specific meaning.

[cremor]

Is this something that people are going to want to do frequently enough for it to be worth dedicating 1/3 of our remaining buttons to it?

In an ideal world, I'd like to see those features on buttons:

• Open the config screen (currently green)
• Toggle SponsorBlock (currently red with this PR)
• Manual skip of the current segment (similar to desktop SponsorBlock where you can configure segment types for manual skips).

Of course that's only for SponsorBlock. There migth be other interesting features that could be placed on buttons.

Back to this comment:

However, there's another feature that I'm thinking to build on top of it. I'll raise that as a separate PR as I'm not sure it would be accepted as a feature, and don't want to hinder this PR as a result.

The idea is, while the SponsorBlock is turned off, and the current video timestamp is under a skippable segment and video is playing, upon turning on SponsorBlock using the GREEN button, I would like it to skip the current segment immediately.

The use case is, sometimes I like to hear the sponsored segments. But after a few seconds of watching the segment, if I feel like skipping the segment, right now I have to press "right button" and scroll thru the timestamp manually, and sometimes it overshoots, so I have to watch some of the sponsored segment ☹️. With the new idea, I'll be able to press GREEN button once to skip the current segment (turning on SponsorBlock), and then again to turn off SponsorBlock.

Don't you mean the red button?
Or even better, either green (enable in the menu) or red (toggle on)? So however you enable SponsorBlock, it would immediately skip the current segment.

[alyyousuf7]

Don't you mean the red button?

Now that I read it again, yes I meant Red button 🙈

[ANewDawn]

Yellow button is already used to bring up search during video playback.

[alyyousuf7]

Yellow button is already used to bring up search during video playback.

Oh true. I also noticed that the blue button opens up the timeline during video playback.

So essentially, the red button is the only one available to use, given we already use green button for config menu.

[fire332]

We could also just reuse the green button to skip when the skip action is available. I don't think there's many instances where you would want to open the config menu instead while a skip prompt is active.

[cremor]

I also noticed that the blue button opens up the timeline during video playback.

The red button also does this when you run an app version without this PR. I assume this is just a fallback action. I think we can still use red and blue since the timeline can also be opened by up or down.

We could also just reuse the green button to skip when the skip action is available. I don't think there's many instances where you would want to open the config menu instead while a skip prompt is active.

There are skip prompts in this app? I've never seen one of those. I only get notifications for automatic skips.

[alyyousuf7]

There aren't any skip prompts yet in this app, but the original Chrome extension for SponsorBlock does.

[throwaway96]

Just a heads up: there are fairly significant changes to the config system in the works, some of which have already been merged. Still to come is the ability to listen for changes to config options, which can be previewed here.

Sorry to step on your PRs. I'm hoping the result ends up being easier to work with, though. (I got tired of having to edit hardcoded HTML every time I wanted to add an option.) You might want to wait until everything lands before continuing work on the parts that are going to touch config stuff. I'm also willing to resolve the merge conflicts for you if you'd rather not have to deal with it.

Edit: Should be mostly stable now until after the next release.

[alyyousuf7]

No worries, I'll keep an eye on new changes, and resolve conflicts as they land to master branch.

[alyyousuf7]

I recreated the whole app (just for fun, with my own touch to it) - and after lots of experimentation, I ended up creating a separate config to enable/disable only the auto-skipping feature, instead of enabling/disabling SponsorBlock completely.

https://github.com/alyyousuf7/youtube-webos

It's a complete rewrite, i'm not here to promote my version - i'm suggesting that maybe this repo should also head the same direction for this specific feature, with a button to skip segment on demand only. But I guess the first step would be to introduce remote key presses based on what page the user is on right now - what @cremor suggested.

[kopiro]

This looks awesome - what do we need to merge it?