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

alyyousuf7 · 2023-10-25T06:47:15Z

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:

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
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 · 2024-01-09T02:43:59Z

How was this tested, and on what platform?

Does anyone else have any comments?

alyyousuf7 · 2024-01-09T02:49:00Z

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 · 2024-01-09T03:00:52Z

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 · 2024-03-16T10:58:14Z

@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 · 2024-03-16T23:46:06Z

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 · 2024-03-17T08:52:25Z

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

fire332 · 2024-03-17T08:56:55Z

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 · 2024-03-17T08:58:02Z

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 · 2024-03-17T09:50:27Z

Do we really need the text inside the colored boxes?

This is how it looks with HTML boxes instead.

throwaway96 · 2024-03-17T17:51:39Z

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 · 2024-03-22T12:31:05Z

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

alyyousuf7 · 2024-03-25T03:14:50Z

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 · 2024-03-25T03:22:18Z

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

fire332 · 2024-03-25T03:51:31Z

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

Color Contrast Check

alyyousuf7 · 2024-03-25T03:56:44Z

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

UPDATE: pushed changes with colors mentioned above.

fire332 · 2024-03-25T04:15:34Z

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

alyyousuf7 · 2024-03-25T04:47:15Z

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 · 2024-03-25T05:14:07Z

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 · 2024-03-25T05:30:04Z

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 · 2024-03-25T06:14:01Z

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 · 2024-03-25T06:17:01Z

Don't you mean the red button?

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

ANewDawn · 2024-03-25T18:27:29Z

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

alyyousuf7 · 2024-03-26T04:04:14Z

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 · 2024-03-26T06:20:45Z

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 · 2024-03-26T06:34:32Z

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 · 2024-03-26T08:55:26Z

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

throwaway96 · 2024-03-27T08:40:07Z

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 · 2024-03-27T08:51:30Z

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

alyyousuf7 · 2024-04-11T05:25:22Z

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 · 2024-08-02T18:52:51Z

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

throwaway96 · 2024-10-19T01:18:16Z

src/ui.css

+  width: 21.34px;
+  height: 21.34px;


Where did you get 21.34px?

I think it was the computed height of the text before button. And I wanted to keep the height of the button same as text, so it doesn't look weird.

Hmm. I think it must have originally been 16pt (21.3333...px).

throwaway96 · 2024-10-19T01:34:31Z

src/sponsorblock.js

+      window.sponsorblock = new SponsorBlockHandler(videoID);
+      window.sponsorblock.init();


Why is the SponsorBlock object always created now?

Oh, I think I see. It's always running, but if it's not enabled, getSkippableCategories() just returns an empty list.

throwaway96 · 2024-10-19T01:57:29Z

Rebased version (untested): https://github.com/throwaway96/youtube-webos/tree/sponsorblock-skip-1

I'd like to see this adapted to take advantage of the new config event system, but I doubt I'll have the time to do it myself.

alyyousuf7 force-pushed the update-sponsorblock-config branch 3 times, most recently from a2efdf5 to d67f311 Compare November 1, 2023 04:15

alyyousuf7 changed the title ~~update sponsorblock config quickly and while watching a video~~ add feature to toggle on/off sponsorblock with a single key press Nov 3, 2023

alyyousuf7 force-pushed the update-sponsorblock-config branch from d67f311 to 1debde6 Compare December 31, 2023 04:58

alyyousuf7 force-pushed the update-sponsorblock-config branch from 1debde6 to 67b6f15 Compare March 17, 2024 09:48

alyyousuf7 force-pushed the update-sponsorblock-config branch 3 times, most recently from c732497 to b585c27 Compare March 17, 2024 10:00

alyyousuf7 force-pushed the update-sponsorblock-config branch from b585c27 to 121bb92 Compare March 25, 2024 03:21

alyyousuf7 force-pushed the update-sponsorblock-config branch from 121bb92 to 6c07a1c Compare March 25, 2024 03:43

alyyousuf7 added 2 commits March 24, 2024 23:48

update sponsorblock skip config while player is opened

33a7867

add feature to quickly toggle on/off sponsorblock

8d775b1

alyyousuf7 force-pushed the update-sponsorblock-config branch from 6c07a1c to 3961784 Compare March 25, 2024 03:48

alyyousuf7 force-pushed the update-sponsorblock-config branch from 3961784 to 322552b Compare March 25, 2024 04:06

alyyousuf7 force-pushed the update-sponsorblock-config branch from 322552b to 56cc064 Compare March 25, 2024 04:07

alyyousuf7 force-pushed the update-sponsorblock-config branch 2 times, most recently from 5763dbe to 4b9160b Compare March 25, 2024 05:34

use html instead of icons for button notifications

cf0cf90

alyyousuf7 force-pushed the update-sponsorblock-config branch from 4b9160b to cf0cf90 Compare March 25, 2024 05:35

throwaway96 added the enhancement New feature or request label Mar 29, 2024

cremor mentioned this pull request Jun 27, 2024

Feature Request: Add button to skip SponsorBlock Segments #186

Closed

throwaway96 reviewed Oct 19, 2024

View reviewed changes

		window.sponsorblock = new SponsorBlockHandler(videoID);
		window.sponsorblock.init();

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

Are you sure you want to change the base?

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

Conversation

alyyousuf7 commented Oct 25, 2023 • edited Loading

throwaway96 commented Jan 9, 2024

alyyousuf7 commented Jan 9, 2024

alyyousuf7 commented Jan 9, 2024

cremor commented Mar 16, 2024

alyyousuf7 commented Mar 16, 2024

ANewDawn commented Mar 17, 2024

fire332 commented Mar 17, 2024 • edited Loading

alyyousuf7 commented Mar 17, 2024

alyyousuf7 commented Mar 17, 2024 • edited Loading

throwaway96 commented Mar 17, 2024

cremor commented Mar 22, 2024

alyyousuf7 commented Mar 25, 2024

alyyousuf7 commented Mar 25, 2024

fire332 commented Mar 25, 2024

alyyousuf7 commented Mar 25, 2024 • edited Loading

fire332 commented Mar 25, 2024

alyyousuf7 commented Mar 25, 2024 • edited Loading

throwaway96 commented Mar 25, 2024

alyyousuf7 commented Mar 25, 2024

cremor commented Mar 25, 2024

alyyousuf7 commented Mar 25, 2024

ANewDawn commented Mar 25, 2024

alyyousuf7 commented Mar 26, 2024 • edited Loading

fire332 commented Mar 26, 2024

cremor commented Mar 26, 2024

alyyousuf7 commented Mar 26, 2024

throwaway96 commented Mar 27, 2024 • edited Loading

alyyousuf7 commented Mar 27, 2024

alyyousuf7 commented Apr 11, 2024 • edited Loading

kopiro commented Aug 2, 2024

throwaway96 Oct 19, 2024

Choose a reason for hiding this comment

alyyousuf7 Oct 19, 2024 • edited Loading

Choose a reason for hiding this comment

throwaway96 Oct 19, 2024

Choose a reason for hiding this comment

throwaway96 Oct 19, 2024

Choose a reason for hiding this comment

throwaway96 Oct 19, 2024

Choose a reason for hiding this comment

throwaway96 commented Oct 19, 2024 • edited Loading

alyyousuf7 commented Oct 25, 2023 •

edited

Loading

fire332 commented Mar 17, 2024 •

edited

Loading

alyyousuf7 commented Mar 17, 2024 •

edited

Loading

alyyousuf7 commented Mar 25, 2024 •

edited

Loading

alyyousuf7 commented Mar 25, 2024 •

edited

Loading

alyyousuf7 commented Mar 26, 2024 •

edited

Loading

throwaway96 commented Mar 27, 2024 •

edited

Loading

alyyousuf7 commented Apr 11, 2024 •

edited

Loading

alyyousuf7 Oct 19, 2024 •

edited

Loading

throwaway96 commented Oct 19, 2024 •

edited

Loading