A lot of loose ideas

[bershanskiy]

This is a good extension, but there is no perfect software, so here are some thoughts about SponsorBlock and how to make it better. At this point, I don't know which of these are worthy of opening actual bugs and which are "won't fix".

Potential Bugs

Extension prompts me to vote on my own submission

Or is this a feature?

Technical debt

These are purely technical issues that do not affect the UX too much but would be nice to resolve going forward.

Overall

Does not declare "strict mode"

I'm not sure if browsers assume strict mode in extensions or not. Better not to risk it.

Does not use const/let when it can

Also, uses var.

Embeds popup into the YouTube sidebar with innerHTML

This code is fragile, as demonstrated by popup.css needing to reset styles:

reset some properties to default (youtube messes with them

It's not YouTube messing with styles, it's the extension messing with YouTube. Why not use an iframe? Is this some kind of optimization to reuse tabs' own process? If so, is it really worth potential breakage on every minor YouTube update?

Needs linter

Come on, man... the tabs vs. spaces thing. Choose a side. :)

Video times are stored as floats

I'm not sure this is a big deal, but this might be important later on for more advanced things I describe later (which require precise timing). Floating-point numbers have an inconsistent resolution on the number line (are logarithmically distributed). I personally would use integers just scaled appropriately to have required resolution. E.g., store the number milliseconds from the beginning of the video, then just convert them to floats or whatever YouTube needs.

Client-Server API

Uses "GET" HTTP method for submitting data to server

"GET" is supposed to be a "safe" method, so it should not change the server state.

/api/postVideoSponsorTimes

TL;DR: Use JSON instead of URL decorations when appropriate.

1. API can submit only one sponsor at a time, so extension makes multiple requests if a video has multiple sponsor sections.
   background.js literally has a for loop making request for each reported video segment.
2. If you send a JSON, you can submit an object containing an array of videos (all at once); also, you won't need to "unpack" every parameter individually on the server.
3. Poor error handling
   What happens if the user submits multiple times, some of which succeed and one fails? Currently, you just drop the error message into the DOM. If there are multiple errors only the last one will be seen. Also, what is the user supposed to do with this information?
4. If you use JSON, you can make submit operations atomic: either all videos are reported or none are and you can try to resubmit the videos.
5. Is there a way to remove previously reported sponsor?
   What if the user reports a video and submits it, then realizes timing was just a bit off and fixes one segment and then submits it. As far as I see, the server can only record more segments, not delete old ones.

With a JSON format, you can make one request, delete the obsolete reports, and consistently handle errors because it is just one event.

User experience

Button sizes and positioning

Popup buttons "Delete [sponsor spot]", "Edit" (sponsor spot) and "Clear [sponsor spot] times" are too close for comfort. User can easily miss and click "Clear times" and loose information.

Popup is useless most of the time

1. Popup just shows a placeholder message on most pages
2. Popup does show a useful interface on https://www.youtube.com/watch?v=* pages, but there you have an option to display popup contents in the sidebar (more convenient)

Possible solution:

1. On non-YouTube pages, popup might show "general info" like statistics of how many videos user submitted, skipped, etc. and options.
2. On YouTube video pages show the current popup.

Submitting sponsor spots at the very beginning or the very end of the video

If the sponsor spot starts with at 0:0, the user has to record the sponsor spot and then manually edit time.

Hard to submit exact timings

I can not conveniently preview the video without segments I just labeled reloading the page and after I reloaded the page I can no longer conveniently edit my submissions.

What does skip section vote mean?

How should user vote if a video is skipped but the timings are incorrect? There should be an option equivalent to "this is an add, but the skip starts too early" and "this is an add, but the skip ends too soon".

Not all sections I want to skip are "sponsor spots"

Ideally, I would be able to skip or mute repeating long intros with channel logos or outros with "Comment, Like, Subscribe!". Of course, these should have their own setting on the settings panel.

Core problems (and far fetched solutions)

Challenges inherent to the idea of skipping portions of the video no matter what extension you use. The solutions are really far fetched at this point in the extension development.

Imprecise timings

It's hard to submit exact timings because the user can click a button only with specific precision and accuracy. Users, of course, could slow the video down and mark the spot exactly, but in practice, no one does this.

Need good data, if ever plan to automatically classify video segments

A good solution is to allow users to manually report spam text, not just video timings. E.g., present users with text (from subtitles/captions API) and let them select spam sentences.

Video and audio might have slightly different perfect "cut" spot

This can be fixed with a few image transitions added on top of the video.

Solution: Cut at perfect audio times and add fill-in frames or transitions
E.g., cut when the audio is playing without regard to video but then fill in the visual portion with frames sampled just before or just after the audio cut.

Example: https://www.youtube.com/watch?v=h97fXhDN5qE

• The audio is timed almost perfectly: It starts exactly on words "Imagine a $2000 car..." right after
• The video timing is a bit off: It blinks the channel logo that fades into the stock footage.

Solution (freeze frame displayed before main content audio start):

1. Start playback with perfect audio timing
2. Freeze frame with channel logo (sampled before the transition) and display it on top of the stock footage for a few seconds. No annoying blinking.

Another example: https://www.youtube.com/watch?v=wdU1WTBJMl0

• The intro sponsor times are OK (the fade transition is complete).
• The audio literally cuts off "Airports are incredibly..." and starts with "... complex and challenging businesses.

Solution (freeze frame displayed before main content audio start):

1. Start playing with perfect audio timing
2. Freeze the first frame after the transition from sponsor spot

Another example: https://www.youtube.com/watch?v=jzFTwBkIC5o

(Does not have sponsor spots reported at the time of writing)

Solution (freeze frame displayed after main content audio start):

1. Start playing with perfect audio timing
2. Freeze frame with Uber logo (after the transition from sponsor spot but before crown appears).

[ajayyy]

I am trying to eliminate a lot of the var use when it should be let.

The popup menu on the YouTube page is pretty much a hack and I do plan on redoing that entirely in the future. I could not use an iFrame due to CORS issues in Firefox. It originally was just in the actual popup panel, but people were not noticing it.

Video times are returned as floats from the video player, so I don't know if this is really something that needs fixing.

#16

To submit at the beginning, drag the time to the beginning, then add the time.

Previewing should be fine now, I added that.

If the timings are incorrect, downvote. Another submission will be sent out instead if a similar one is downvoted. See https://ajay.app/blog.html#voting-and-pseudo-randomness-or-sponsorblock-or-youtube-sponsorship-segment-blocker

Categories are a good idea I want to look into.

The fill in frames idea is very cool, I would love to look into that. That would be very difficult to accomplish though.

If you haven't joined, come join the discord server as well to check out more of what's being discussed.

And thanks for making this issue, these are just some quick responses to each point.

[NDevTK]

Agreement
I agree a linter such as eslint would be good for code standardization.
Other suggestions:

• Full CI/CD support so things that are approved into master get deployed automatically
• UnitTests
• Minification (for release builds)
• babeljs build (backwards compatibly)

[ajayyy]

I agree, I just don't know how to do CI with a chrome extension. I've done it with gradle stuff before. I'll look into it.

And babel.js is probably a good idea.

If I do minification, I'd have to look into chrome's rules, since they are strict against obfuscation.

[bershanskiy]

And babel.js is probably a good idea.

It's pretty likely that you are using APIs that are not available in earlier versions of Chrome/Firefox, so I'd recommend looking into that before using Babel. However, Babel would enable you to write TypeScript and compile it to JS/ES.

If I do minification, I'd have to look into chrome's rules, since they are strict against obfuscation.

Google and Mozilla are against obfuscation, not minification. Also, Mozilla allows you to submit both minified and the original unminified source code and they will look at unminified version but publish minified.

[NDevTK]

https://circleci.com/integrations/github/ has a free tier
https://github.com/marketplace/travis-ci https://travis-ci.org is "Always free for open source projects"
you can also host your own using something like https://jenkins.io/
for the server you could use something like http://pm2.keymetrics.io/ with --watch so it gets automatically reloaded when theres a code change
https://medium.com/@aunnnn/automate-digitalocean-deployment-for-node-js-with-git-and-pm2-67a3cfa7a02b

[ajayyy]

https://circleci.com/blog/continuously-deploy-a-chrome-extension/

https://circleci.com/blog/publishing-to-github-releases-via-circleci/
https://github.com/tcnksm/ghr
https://gist.github.com/AGmakonts/ef49d60ea09daed210ef47812b9d03b6

[bershanskiy]

@ajayyy So are you interested in fixing the API? E.g., making the client-server API use proper HTTP methods and being able to submit multiple segments for the same video? If you are, the best approach is to create new API endpoints in the server but leave the old ones, switch extension to use them, then wait for a while until users update and you the old API is not queried anymore and then remove old APIs. That inherently takes time but the implementation details are rather simple. I could prepare the two patches if you are interested.

[ajayyy]

@bershanskiy Yep, I'd be interested. In theory, the post method doesn't have to be two separate methods. It could check if req.data is undefined and fallback to startTime and endTime

[ajayyy]

About strict mode, I have to make sure there are no undeclared variables leftover from @officialnoob 's original code.

[NDevTK]

Amazon DynamoDB (Store times)
200M free requests per month. (25GB storage)
AWS Lambda (Store logic)
1M free requests per month.

[mirror176]

I want to strongly disagree about no one doing precise edits. I normally fire up each of my edit attempts in a video editor to do frame by frame editing where I watch audio content with it too. I have not always been consistent about where I cut but 'usually' favor a little sponsor showing to keep smooth audio. When there is plenty of before-space to splice in cleanly, sometimes I make the transition around proper timeframes and others I may drift earlier. Reasons for that are either to avoid the sponsorblock not jumping at the exact start time I mark and others are to avoid a more akward pause. I think marking extra early just so the sponsorblock addon skips is bad as it doesn't even jump at the same start time twice in a row so better to make a more precise database for if sponsorblock gets better and also for if third party tools ever start to use it and can use it with precision. Maybe I should write up an example workflow.

[ajayyy]

The more precision, the better. I agree

[bershanskiy]

@mirror176

I normally fire up each of my edit attempts in a video editor to do frame by frame editing where I watch audio content with it too.

That's nice! I'm currently trying to make a method to classify precise vs. imprecise reports, so could you tell me what's your userName or public userID? A known good data set would be really helpful.

[mirror176]

I've set mirror176 a few times but it always seems to offer to let me set my username again the next time I check. Not sure if its a bug vs something caused by me blocking something about how the addon works from ublock/umatrix or something. I don't know how to find a code to represent me otherwise. Would knowing a video or two that likely no one else has submitted to help track my edits?
3rd party unrelated content that is just a commercial I block. 1st party if it goes off track in the middle to do so I block. 1st party at the end I may ignore. 3rd party content integrated nicely as content and relevant I'll likely let through. A video that is just sponsored content I haven't marked yet and think should give the user a warning that the content as a whole is sponsored instead of just jumping from the start to the end since some end up being 'sell out' production grade content where the whole video is just an ad in the end. A similar example would be like where ublock origin filters content off of a webpage while loading the rest of the page unless the page itself has a block instruction and then alerts me that I have a filter saying to not load that page at all; I can provide examples in their documentation if that wasn't clear though. Anyways, that trails off to a more advanced branch of the topic of blocking categories that I have not brought up yet as a post here figuring ajayyy is annoyed enough with the sheer quantity of things I opened as I tried to split each idea to its own report which all happened while he was traveling.

[mirror176]

And I don't think it'll be easy to make sense of precise reports yet if the only viewer interpreting data from the sponsorblock database is the sponsorblock addon which doesn't have an option to follow starttime in a strict sense though I haven't seen any obvious issues with endtime of a jump. A sloppy edit that slips in a small start/end of the sponsor is much nicer than manually having to seek across it such as with no addon. Options to clean it up more would be good but I've hit transitions like a fade form sponsor back to content with talking starting before the sponsor's video was gone. I then have to make a judgement about where to cut and try to remove fluff words/sentences that are not content relevant if able to be done in a clean and nondistracting way. If not, ive let the audio or video of a sponsor slip in to not damage the normal program content over an edit, though an option of what you want to accept for a jump with multiple choices available in the database for download accordingly would be nice. Some may want to damage content just to avoid being advertized to, for example if it is a sponsor they have a strong dislike for.

[ajayyy]

I am not annoyed by you, your issues are extremely helpful, keep posting them. I have been a little overwhelmed recently due to starting University and have not had motivation to work recently, so sorry about that.

About your last point, it is a tough balance. I personally would rather see a sponsor if I otherwise would miss out of something good. For example, see the report I made for this video: https://www.youtube.com/watch?v=UaGTFeibOEk. I didn't block the whole sponsor so that you don't miss out on his joke, but cut the part no one wants to see. This is also Tom Scott's first sponsor ever, so it is a little bit of an exception.

[ajayyy]

By the way, the set username button is supposed to remain their, maybe I should rename it to change username?

[mirror176]

If the username is set then yes that could be good. I'd consider providing the username more important though as I have no indication that 1. I set a username and 2. I entered the username correctly. Also not sure if this username is enough to make adding the work of one user in the database consistent for work performed across different machines and browsers to see scoring properly.

[ajayyy]

You can see your username by clicking the set username button. The text will start with your current username. Also, usernames are not grouped for leaderboard purposes right now.

[mirror176]

I'll keep an eye on it as I thought I had typed my name more than once though it already had it when clicked a moment ago so it sounds like it is good for now.

[ccuser44]

Tabs > Spaces forever

[Jonta]

This should be a discussion or several issues