Skip Shortcut not working anymore

[lucasdeeiroz]

I noticed this feature not working anymore after installing Chrome Beta on Windows. I don't know if that's really the issue, tho. But nothing happens when I press S on keyboard now.

⬇️ Find out about the current status of this issue and how you can help fix it

[niklashigi]

The skip shortcut allows you to skip pre-roll ads (trailers for other series/movies), intros/recaps, and the "Next up" countdown at the end of episodes. Which these of aren't working for you? Also, which Prime Video site (e.g. primevideo.com or amazon.com) are you using?

[niklashigi]

@lucasdeeiroz Please provide more details or I'll have to close this issue because I can't reproduce it.

[lucasdeeiroz]

The shortcut doesn't work on any of these situations on primevideo.com. I am installing Linux on another machine and I'll see if I have the same error.

[niklashigi]

I just had a friend test this on primevideo.com on his Linux machine and the feature was working for him. Can you check if other features (like blurred thumbnails) are working? Maybe there's something preventing the extension from being enabled.

[listy-bit]

I have the same issue in firefox on amazon.co.uk, Mac. Other features are working properly.

[niklashigi]

This issue is super hard to debug for me because I can only use the amazon.de version of Prime Video in Germany. It would be very helpful if both of you (@lucasdeeiroz and @listy-bit) could provide me with screenshots of:

• The button you would use to manually skip what you want to skip
• The tree of elements above this element until <div class="overlaysContainer" ...> in the developer tools

Here's what these screenshots would look like for me:

If you're not sure how to take these screenshots, here's how:

• Open the developer tools of your browser (Ctrl+Shift+I on Linux for example)
• Open the "Sources" tab in Chrome or the "Debugger" tab in Firefox
• Move your mouse on top of the player to make sure the skip button is visible
• Quickly click the "Pause execution" button (⏸) in the top right of the developer tools
  (Doing this prevents Prime Video from automatically hiding the overlay again.)
• Take a screenshot of the skip button with whatever tool you like to use
• Click the "Pick element" button in the top left of the developer tools
• Take a screenshot of the relevant elements (see my screenshot for reference)

I know this is a little complicated, but there's nothing I can do about this issue without this information. Please let me know if you get stuck taking the screenshots, so I can help you out. Thanks!

[listy-bit]

The Ad skip:

[niklashigi]

Thanks a lot @listy-bit, this really helps! It seems like Refined Prime Video should have no trouble finding the elements you've screenshotted since they are part of the BUTTON_SELECTORS list. If the selectors aren't the issue, then it's either the keydown event not being triggered for some reason or the relevant element not being in the DOM when you press S.

The second theory almost seems too easy, but just to make sure we're not wasting our time: Prime Video automatically hides the "Skip Intro" and "Skip Recap" buttons after a while and you have to move your mouse to show them again. Are you sure that the buttons are visible in the exact moment you press S?

[listy-bit]

Buttons are visible.

Interestingly, I'm now seeing Skip Intro working for some episodes of some shows, but not on the others. The other buttons don't work at all.

[niklashigi]

I've just added some detailed logging to the skip shortcut feature to help us debug this issue. Because this is just a temporary change, you'll have to install this version manually by downloading it from the build artifacts of this CI run (Chrome version, Firefox version) and then installing it manually ("Load unpacked" in Chrome, "Load temporary add-on" in Firefox). Note that you might have to disable the regular Refined Prime Video extension to avoid issues.

With the new version installed, please try using the skip shortcut again and see what is logged in the browser console. Take a look at my commit to see what kind of messages you should see if everything was working correctly and let me know what you find. Thanks again for the help so far!

[listy-bit]

Using the temp version:

The episode that previously worked, still does:

But things have taken a strange turn, and the episode that didnt work, now does work correctly.

Edit: I now restart firefox and use the release version again, and now neither episode works.

[niklashigi]

I just released a new version with similar logging that has already been approved for Firefox and is currently in review for Chrome. Having the logging in the release build will allow you to always look at the logs whenever you notice the feature not working, so you can let me know. Also let me know if the feature just magically always works now! 😄

[listy-bit]

Back to not working. Error code is
[RPV] No skip button found!
And this is the button that needs to be found (highlighted):

[niklashigi]

Oh, this now makes a lot of sense! Amazon is in the process of transitioning to generated class names (like f1oordr3) and they're now using them for some of the skip buttons too. This was already visible in the "Skip Recap" screenshot you sent, but I completely missed it at the time, probably because the other two were still using regular class names. Anyway, that's bad news as it makes reliably targeting the elements using a selector a lot harder.

Here are some solutions to this problem I can think of:

• Using very complex selectors that use the readable classes that are left and the structure of the other tags. This would result in really ugly selectors like .webPlayUIContainer > div > div > div > div > ... that would break as soon as Amazon even just slightly alters the structure of their HTML.

• Finding the buttons not based on their classes but their text (e.g. Skip Intro). This would be more reliable than the first solution, but it would only work for users that have their language set to English, so this also isn't really a solution.

• Picking a generated class name that's unlikely to change and using that. This might be the easiest solution, but it only works if the class names are consistent between regional sites and if the CSS-in-JS tool Amazon is using only generates the class names based on things that don't change very often (e.g. file name and CSS properties).

• Not trying to simulate clicking on the skip buttons at all and instead hooking into Amazon's JavaScript to trigger skipping. I have no idea how complex this is, but this would certainly solve some of the problems with the other solutions.

I'm definitely going to do some research on the different solutions, but I can't tell you how long that will take because I really want to find a solution that's going to work for a long time and not just break after a week.

[mjmatthiesen]

Just here to confirm the same issue.

You can likely resolve this by using the :contains selector. Not supported in standard CSS, but I know jquery has an implementation. Not sure about other frameworks / whatever this project uses.
$('div > div> div > div:contains("Skip")')

[niklashigi]

@mjmatthiesen

You can likely resolve this by using the :contains selector

This is basically one of the possible solutions I outlined above:

• Finding the buttons not based on their classes but their text (e.g. Skip Intro). This would be more reliable than the first solution, but it would only work for users that have their language set to English, so this also isn't really a solution.

As I've already mentioned there, I can't really go with this one because my extension is available on five different Prime Video sites, all of which are again available in multiple languages.

The solution I'm favoring at the moment is this one:

• Picking a generated class name that's unlikely to change and using that. [...]

I've already started using generated classes for a different feature and generally have a better understanding idea of how they work now, so I'm considering using them for the skip shortcut too. I still have to do some research to make sure that I pick the right classes, but expect this to be fixed soon.

[mjmatthiesen]

That's great. Would it be possible to add a setting to always auto skip as well?

[niklashigi]

Would it be possible to add a setting to always auto skip as well?

Once this issue is solved, I'll consider it.

On that note: I was on a call with a Canadian friend of mine yesterday and we looked at the relevant class names in his browser (on primevideo.com) together. It turns out that he's not getting the new generated class names yet. This might be because Amazon is A/B-testing something, in which case he would get the new classes eventually, but either way he currently can't retrieve them for me.

@mjmatthiesen Since you are getting the new classes, could you find them for me?

To do that you'd have to do this for every "broken" skip button you find:

1. Open the developer tools of your browser (Ctrl+Shift+I on Linux for example)
2. Open the "Sources" tab in Chrome or the "Debugger" tab in Firefox
3. Move your mouse on top of the player to make sure the skip button is visible
4. Quickly click the "Pause execution" button (⏸) in the top right of the developer tools
   (Doing this prevents Prime Video from automatically hiding the overlay again.)
5. Click the "Pick element" button in the top left of the developer tools
6. Click on the skip button to select its element
7. Take a screenshot of the element tree up until the webPlayerUIContainer element
   (Take a look at my earlier comment to see what I mean.)
8. Take a look at the element's classes and do this for all of them:
   1. Note down the class
   2. Switch back to the "Sources"/"Debugger" tab
   3. Search for the class globally (Ctrl+Shift+F)
   4. Click on the first JavaScript file that comes up
   5. Click the "{}" button a the bottom to format the file
   6. If the relevant line is no longer highlighted, search just this file again for the class (Ctrl+F)
   7. You should now see a JavaScript object mapping readable class names to cryptic ones, note down the readable class name to the left of the one you searched for
   8. Right-click on the file's tab in the developer tools and click "Copy link address"/"Copy source URI", then note down the URL you copied

When you're done with this process (for one button) you should have:

• A screenshot of the element tree around the button
• A list of the button's classes with the following information for each one:
  • The respective readable class name
  • The URL of the the JavaScript file you found the class in

I know this is a lot, but it's really the only way I can fix this problem (also think of the time it took me to write down all those steps 😅).

@mjmatthiesen I mentioned you above because you commented last, but @listy-bit and @lucasdeeiroz, you can help with this too (if you're still getting the cryptic classes). Note that I don't need all of the results at once, I just need all of them at some point, so just start with one of the buttons and post your results for that once you're done. Thanks!

[mjmatthiesen]

Hey, so I can probably do all of that realistically, but I'm stupid busy at work, so I haven't had the time past taking a screenshot.

There's like a dozen classes.

What I would like to do instead, is offer up access to a vpn. You can then switch from Germany to Canada/US/etc, and hopefully complete the same investigation. You'd have to be able to manually set up a nord vpn though, since I can share those details but not account details. If not, let me know, and I will try to investigate this.

[niklashigi]

I'm stupid busy at work, so I haven't had the time past taking a screenshot

That's fine, I can totally understand that. It turns out it might not even be necessary to go through the entire process because from your screenshot it seems like Amazon still includes some readable class names in the HTML of their "ATV Web Player SDK":

The two classes that can be seen in this screenshot alone already seem like possible replacements for two of the skip button selectors. Now I only really need screenshots of:

• The .atvwebplayersdk-nextupcard-wrapper element's children (what you already have in your screenshot, but expanded)
• The ad skip button's element and children up until .webPlayerUIContainer

@mjmatthiesen This is still a little bit of work, but nowhere near what I was previously talking about. 😅 Could you do this?

[mjmatthiesen]

Here's one from an ad.

They seemingly made these not buttons on purpose.

Here's from the skip intro:

[niklashigi]

Alright, seems like we have new selectors for:

• The "Skip intro" / "Skip recap" buttons (.atvwebplayersdk-skipelement-button)
• The "Next up" cooldown (.atvwebplayersdk-nextupcard-wrapper)

Now all that's left is the "Skip" button for advertisements. You've already found two classes (fu4rd6c and f1cw2swo), but I want to make sure to include the right one and keep the code somewhat maintainable, so I have to ask you to do one more thing: Could you take these classes and then follow the guide I posted? (There's no need for you to find another pre-roll ad, just skip to step 8 since you already have the classes.)

Thanks for all the help so far!

[mjmatthiesen]

So that didn't find anything, but I was able to selected the event and open the file.

click => function $a() {}
blob:https://www.primevideo.com/8140f2b8-5080-4292-867c-89292ffcd733

onclick => function() {
t.state.isSkippable && t.context.stores.adPlayback.skipClicked()
}
blob:https://www.primevideo.com/8140f2b8-5080-4292-867c-89292ffcd733

Couldn't find anything that looked like mapping.

[jettero]

fu4rd6c f1cw2swo ... these don't seem terribly maintainable to me.

I suspect the only thing that'd work long term is hunting down the Skip text and faking a click event.

[niklashigi]

@jettero

I suspect the only thing that'd work long term is hunting down the Skip text and faking a click event.

That's unfortunately not an option due to localization (see my earlier comment).

fu4rd6c f1cw2swo ... these don't seem terribly maintainable to me.

That's true, but the way these seemingly random class names are generated is, as far as I know, actually totally deterministic. Unless Amazon has overridden this behavior the class names should be generated based on their original name and the path of the original CSS file they come from (see the relevant code in css-loader). In other words: Using these generated classes is not a problem by itself as long as they are properly abstracted away (for example using SCSS variables) and documented in the code.

The reason I asked for so much information in this comment is because I want to make sure I pick the right class and am able to document that within the source code (using the original class name as the SCSS variable name is the most readable approach for that in my opinion).

@mjmatthiesen said that he wasn't able to find the original class names, maybe you (@jettero) could try again? In the case that it's really impossible to find the mappings, could you find out which CSS files these classes are defined in and post the URLs?

[mjmatthiesen]

So I double checked again with Firefox and Google's piece of shit garbage. Can't find it.

The CSS is defined inline on the page:

The offer to give you some vpn creds still stands, though I don't know if you'll get the new class names.

[niklashigi]

An hour ago I released a new version that adds the classes I mentioned here as button selectors, so "Skip intro", "Skip recap", and "Next up" should all work again now (please let me know if they still don't for some reason). It's still in review at the moment for Chrome, so you might have to wait a little bit before you get it

Regarding the remaining "Skip ad" button: There's really nothing I can do here because I'm still not getting the new classes and, even in the regions where Amazon has already (sort of) rolled them out, not all users seem to be getting them (see this comment) anyway, so I don't think proxying is worth the hassle (I'm also not sure if I would even be able to watch anything on primevideo.com). Therefore, unless I do eventually get the new classes myself, I'm not going to investigate this any further.

Help wanted! 🔧

If anyone is already getting the new classes (which means that you're not able to skip ads by pressing S) and has a bit of time to spare, I'd really appreciate it if you could look into this and find a CSS selector that can be used to reliably find the "Skip ad" button.

I've talked about my process for figuring out these kinds of things in an earlier comment, but I don't really care how exactly you go about it as long as you can prove that the selector only matches the skip button. Sufficient proof could be:

• a class name that's descriptive enough (this was possible for the two other buttons, but seemingly not for this one)
• a line in Prime Video's JavaScript code that maps a descriptive class name to a cryptic one (see this and #8 of this)
• anything else that makes the purpose of the class (or other type of selector) clear

Note that there's no need to modify the extension's code (or even use the extension at all) to help with this issue. The search feature of your browser's developer tools should be all you need.

Thanks everyone for the help with this issue so far, I hope we'll be able fully fix it eventually!

[JelaMiraj]

I'm still having this problem. I'm watching season 2 of the outpost & the shortcut isn't working on the Freevee ads.