Volume Slider UI does not load properly

[delmain]

Describe the bug This bug may be a wider area than just the volume slider, but tbh I don't use many features of this extension except that one regularly, so I have trouble saying for sure what behavior was before the most recent update.

That said, I just got the latest version of this app on Firefox (3.5.0, updated Jan 5, 2024) and I am now experiencing the volume slider not appearing, so I can't control the volume except to mute the entire short.

I looked into this a little bit, and I am seeing a ton of "TypeError: f is null" and "TypeError: e is null" messages loading in the console coming from this extension. A small amount of digging makes it look like this is because the options object is not being loaded correctly, but I'm not sure I'm tracking the obfuscated/minified code correctly.

To Reproduce

1. Load any Youtube site (short not required)
2. Open Firefox console, see TypeErrors mentioned above scrolling continuously after page load.
3. Open any YT Short
4. Observe that extension UI elements do not appear correctly

Expected behavior Expect the UI elements including volume slider to open and TypeErrors to not be generated constantly in console.

Desktop (please complete the following information):

• OS: Win 10
• Browser: Firefox
• Version: 121.0

Additional context I use the volume slider fairly regularly, and I don't remember this happening before today. I believe this change is directly related to the release that took place today (Jan 5), but I can't be 100% certain.

[Zexor1]

Same problem on chrome, volume slider dissapeared on last update.

[Lakshay2910]

I am also facing the same problem on Edge Browser. I am not able to see Volume slider on last update. Also sometimes i can't be able to do Backward and Forward using Left and Right Arrow Key. This problem is started from the last update. Previous version was far better than this version.

[Joaovtrc]

Getting these two errors while watching a Shorts on YouTube:

Going to those lines:

This error seems to be unrelated to the volume slider:

Tried finding the source code, I think this might be it: https://github.com/ynshung/better-yt-shorts/blob/eb5698bc5c6430a3b9eff8445bc3d8f3dfae1376/src/content.ts#L98-L100

The options object seems to be null when trying to setup the volume slider(?):

Might be related to the new changes that were published yesterday regarding playback rates (since it's the same file): Add Option for Default Playback Rate https://github.com/ynshung/better-yt-shorts/pull/196

[ynshung]

Currently looking into the issue, it seems like while fetching the options (yt-extraopts) in retrieveOptionsFromStorage the setter will not be initialized correctly, causing the storage.get(["extraopts"]) not running and options is set to null. Adding a null check options there will fix the problem

const localStorageOptions = JSON.parse(
  localStorage.getItem("yt-extraopts") as string,
);
if (localStorageOptions) setter(localStorageOptions);

This particular problem seems to happened for first time user, since the yt-extraopts never been initialized at all since the operation failed and in turn causes all other function that fetch the options to fail as well.

Now another problem arises which the volume slider is not working at all, sliding the volume down to 0 causes the video to speed up (??). Logging the video's playback rate and the settings' value shows that there is a back-and-forth of volume setting between them shown below:

// in checkVolume function
console.log(
  "checkVolume",
  settings?.volume !== null,
  ytShorts.volume,
  settings.volume,
);

Now the focus is to find what causes this back-and-forth, I'm trying to pinpoint where exactly the volume setting happened and eliminate from there. If anyone has any idea or recommendation do let us know here.

Edit: Funnily enough the problem seems to resolve by itself after reloading the extension or restarting the browser. Still going to try reproduce and find a fix though.

Edit 2: The bug occurs when I built the extension and not in development mode, which is very hard to debug... Maybe it could be a circular dependency (between main and content) problem?

[gregmatic]

reloading or reinstalling the ext nor does restarting the browser work for me

[delmain]

This particular problem seems to happened for first time user, since the yt-extraopts never been initialized at all since the operation failed and in turn causes all other function that fetch the options to fail as well.

If you're saying that the "options is null" issue was because I was a first time user, I'd like to say that I am not. I have been using this extension for quite a while. If the solution that you found only fixes it for first-time users, then I don't think that's the only fix needed.

If it's possible that the issue came up because it was the first time the extension ran after an update, that's possible, as I had gotten an auto-update through firefox that morning.

[ynshung]

This particular problem seems to happened for first time user, since the yt-extraopts never been initialized at all since the operation failed and in turn causes all other function that fetch the options to fail as well.

If you're saying that the "options is null" issue was because I was a first time user, I'd like to say that I am not. I have been using this extension for quite a while. If the solution that you found only fixes it for first-time users, then I don't think that's the only fix needed.

If it's possible that the issue came up because it was the first time the extension ran after an update, that's possible, as I had gotten an auto-update through firefox that morning.

Thanks for the insight, I think something within YouTube's or the browser change the loading behavior which might cause this issue since the problem is reported recently and the latest v3.5.0 doesn't change any code related with the volume slider. Since the error is very similar to @Joaovtrc's I would assume that the null options should be fixed as well. Can you check if the updated extension works for you?

You can download the updated extension (Chrome or Firefox) here and follow the guide to load the extension here.

It seems like the problem is related to error handling from v3.4.0. @adsuth could you possibly look into this?

[delmain]

Can you check if the updated extension works for you?

Yep, the 3.5.0 version seems to fix the loading issue.

[ynshung]

Can you check if the updated extension works for you?

Yep, the 3.5.0 version seems to fix the loading issue.

Could you also help test if the volume slider is working or it's bugged?

[delmain]

Works as expected. Dragging all the way down (vertical layout) mutes the video and it continues playing at normal speed.

[ynshung]

Alright, then I will merge the changes and publish the extension first. I will open another issue for the other one (if it still persists)