feat: new speed `adjustMode` for Non-Cycle speed values (list).

[LifeJustDLC]

Can be paired with a reversed-ordered one manually by user, to achieve an ascending and descending bi-directional custom-level speed control, with two separate keybindings.

BREAKING CHANGE: upgrade react-icons from 4.7.1 to 4.12.0

Detail

The most intuitive way is to separate key-binding field into two segments, one for ascending and the other for descending, The downside is that might introduce a lot of breaking changes to other components. (I'm not quite sure.)

Second way is to replicate a KeyBind (manually by user) for the existing speed valueCycle (precisely, valueNoCycle), acting as a reversed version of the other one, and vice versa. Also most importantly, ensure them stop iteration on their both boundaries. This implementation is quite simple, without sharing states between KeyBinds (e.g. currentIndex): When bound key was pressed, modify the playback speed to the nearest (but not same) speed level, within the corresponding ascend or descend direction—

Of course, if the user-defined valueCycle is either monotonically increasing or decreasing. Otherwise, user will be prompted an error.

However, this implementation doesn't force user-defined speed valueCycles to be exactly the "same" (precisely, exactly opposite). This might be a benefit which allowing users to reduce playback speed more rapidly (by defining less steps in descending list), in order to be the coolest guy in the town.

Candidate icon pairs, for distinguishing NoCycle & Cycle: PiArrowArcRightBold & PiArrowsClockwiseBold (This commit is using) TbArrowNarrowRight & TbArrowAutofitRight CgArrowsShrinkV & CgRedo All of these need upgrading react-icons from "4.7.1" to "4.12.0"

(This is my first time learning to get involved in the Open Source world, so please forgive my grammar and wording, and I'm very appreciate for any advices.)

resolve: #158

[polywock]

Hey! Congrats on your first open source activity. However, timing is sadly not great. The code isn't mergeable as I'm currently working on a draft release for Manifest V3 (Chrome Web Store's deadline is June). The draft version is probably 70% different in terms of codebase.

Anyway, great work. Global Speed grew organically, so it's not well organized. Aside from you, only one other person attempted to contribute to Global Speed's code. I have to apologize for not commenting anywhere. Bad habit of mine.

The most intuitive way is to separate key-binding field into two segments, one for ascending and the other for descending, The downside is that might introduce a lot of breaking changes to other components. (I'm not quite sure.)

Great suggestion and I definitely agree. The flaw you pointed out with the second approach (requiring monotonically ordered values) is probably a dealbreaker. In addition, the setup is pretty complicated for the average person. For those reasons, I'm leaning heavily towards Option A.

I'll get working on that tomorrow. Thanks again!

[LifeJustDLC]

The flaw you pointed out with the second approach (requiring monotonically ordered values) is probably a dealbreaker.

if the user-defined valueCycle is either monotonically increasing or decreasing. Otherwise, user will be prompted an error.

I actually forgot to implement the error prompting. (figuring out a better name for several days...) If user doesn't do that way, it just seems to be "not working properly". Because the "direction" is determined merely by the first two element in the speed array.

Anyway, thanks for your elaborated response. I also have a few ideas which need further investigation and I'm looking forward for the new release. Great work!

[polywock]

@LifeJustDLC Hi. Almost done with the latest version. Can you help to beta test it? It should be ready within 3-4 days for testing. And I'll probably publish it late May.

(No mobile-specific features yet)

[LifeJustDLC]

@polywock Sure. I'm glad to have the offer. Well, I'm still new to testing. Is there anything should I notice specially other than playing with it arbitrarily?

By the way, I'm almost done with the POC of the Interaction concepts I mentioned earlier, but still fighting with a few weird but not fatal bugs introduced to youtube. (Perhaps, it's not a good idea to couple deeply with websites, as you said.)

I'll post maybe a gist (just content script you can directly run it in devtools console) later in this day (21:00+8). Can you have a look?

[polywock]

than playing with it arbitrarily?

Pretty much what I do. 😆

I'll post maybe a gist (just content script you can directly run it in devtools console) later in this day (21:00+8). Can you have a look?

Of course. By the way, you might want to consider publishing an extension yourself. It's a worthwhile experience. Although, I would love for Global Speed to be mobile-friendly, it's primary desktop-focused, and it's probably impossible to offer first-class support for both platforms.

[LifeJustDLC]

@polywock https://gist.github.com/LifeJustDLC/35d14c67ecc4f84b4c14f1cee5c77f4d have fun. Still can't get the sound effect latency fixed, without adding a new audio lib dependency. So you'd better run it in Android Edge, from the edge://inspect on your dev machine, inspect specific tab you're playing m.youtube.com/*, copy the content.js to devtools console. The experience is supreme. I'mean the interactions, not the DX.

Just for a record, the detailed procedure for debugging: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/remote-debugging/

[polywock]

Just tried it out. I don't hear any sounds, but the gestures work great.

A few things I'm noticing.

• Lots of trigonometry.
• The more you drag, the more the speed/time changes, which is pretty cool.
• Fullscreen can still be exited by dragging down from the center, as you mentioned earlier. This is an okay compromise but would need to be explained to the users. I could foresee users not knowing about this and getting frustrated trying to exit fullscreen.
• The solution is mostly generic and can be decoupled from Youtube.
• With Youtube fullscreen, you can also dragging up from anywhere to open recommended videos. This still works by dragging up from the middle. But, it does make me fear that others website have their own gestures or UI elements that could be impacted.

My opinion after experiencing it is mostly the same. From an experience point of view, it's great, but due to the maintainability concern, ideally it should be part of a separate extension or opt-in.

Just curious, will something like this work? Two semi-transparent circles on two opposing corners. It's hidden by default, but if users touches the screen, it becomes visible for 5 seconds before fading out. During that five seconds, the user can drag from the circles in any direction. For example, right to seek forwards and left to seek backwards. Up to increase speed, and down to decrease speed. The diagonal can be customized.

[LifeJustDLC]

@polywock

Lots of trigonometry

I'm new to this. Is there any better readable solutions? (dependencies vs comments, I chose later)

This is an okay compromise but would need to be explained to the users. I could foresee users not knowing about this and getting frustrated trying to exit fullscreen.

Absolutely. That will be the first thing I'm going to implement, if this opt-in feature is finally decided to go into the production.

But, it does make me fear that others website have their own gestures or UI elements that could be impacted.

Same concern in mind as well. I planed to try some websites and then conduct the decision whether I should go further.

From an experience point of view, it's great, but due to the maintainability concern, ideally it should be part of a separate extension or opt-in.

I thought a little bit. I'll manage to maintain a standalone repo as well as a feature branch at my fork (as an extension to an extension 😅). But I'm still practicing and I think I'm not so ready now for managing a whole repo. Besides, I'd like my code and design used by as more people as possible, and ultimately, maybe pushing the consideration for developers and designer to adopt straightforward interactions in their next versions. (4 precise touches required to change speed in Youtube. Such an insane UX driving me crazy)

Just curious, will something like this work? …

Corners at diagonal is easy to comprehensive, but a little hard to accomplish the pair of speed modifications on single hand operation I think. The version I previously made is under the consideration of "rewind operation frequency is extremely higher than advance operation", so one hand can handle most of the time. (rewind, speed up, speed down)

Perhaps, a single circle on the middle right, should be the default? Dragging right a little bit can act as a touch-on-leave-off acceleration button, also covering the role of advance. Wait, maybe the dragged distance can even reflect the actual acceleration speed...😄

Also, requirement of touching precision, which is not a big deal. We can make the actual tracking area bigger than looks, and still keeping a relatively small un-disturbing icon.

I'll make an issue later to aggregate related earlier discussions, since this is a separate topic to this PR.

[polywock]

I'm new to this. Is there any better readable solutions?

Maybe, not sure. I just pointed it out because my brain hurts reading it. 😆

Perhaps, a single circle on the middle right, should be the default? Dragging right a little bit can act as a touch-on-leave-off acceleration button, also covering the role of advance. Wait, maybe the dragged distance can even reflect the actual acceleration speed...😄

Great idea, I like this better than what I originally proposed. I'm currently working on implementing a prototype using the new Popover API, which makes it much easier to overlay UI controls over fullscreen videos.

[polywock]

@LifeJustDLC Finally done. Now I just need to test it. If you have some time, please test this on Chrome or Edge (Desktop).

In this update, I've included several new features. I'll point some of them out.

• New trigger mode of "context menu" which can be activated by right clicking on the page.
• Darken background of videos using a shortcut.
• Shortcuts like speed, seek, etc can now be adjusted interactively.
• Circle widget we discussed before.
• Draw on page feature.

What to look out for while testing.

• Any noticeable performance issues.
• Play around with some of the new features and see if there's no obvious issues I missed.
• Your overall thoughts on the update.

[polywock]

I forgot to mention a few other changes.

• If the adjust mode is a list of values, you can press the 3 dots to add a reversing shortcut (to walk backwards through the list). Pretty much the method you said was the best way in your initial pull request.
• In addition, clicking the 3 dots, you can add a label for organization purposes, duplicate the shortcut, etc.
• Simplification of the UI.
• If you create a URL rule that changes speed to 3x when URL is example.com, once you go to example.com, it will set the speed 3x, but if you later go to a different website, the speed will be reverted back. In the previous version of Global Speed, the speed would've stayed at 3x.
• With the pin by default feature, you can now specify the initial state of new tabs.
• New shortcut to get media information (for videos, includes estimated FPS, resolution, etc).
• New shortcut to convert any tab into a popup (which is a window without toolbar). You can also specify the initial position/size of the popup. Pressing it again, it will go back into tab form.

[polywock]

I gave you a test version by mistake. It included some predefined URL rules for testing. Here's the correct version.

packed.zip

[LifeJustDLC]

@polywock

Shortcuts like speed, seek, etc can now be adjusted interactively.

Seems like I did a wrong investment on my custom key pad recently. I should really save that money for a new mouse with more keys...

Besides regrets, I noticed that both interactively adjust by value and interactively set to value require a tiny movement to accomplish, which is confusing to muscle, is that relative to the distance I moved during pressing hotkey, or relative to the absolute position I released hotkey.

Circle widget we discussed before.

Almost perfect! I didn't expect that holding time could be a dimension (although need muscle learning and definitely customization). I can do some work such as optimizing animation, making some discrete feedback etc. (I'm majored in UX design (and miscellaneous stuffs) at college.) The first thing I thought is to quickly blur that circle away, after finger leaved. And make that small area completely transparent but touchable through all time. When clicked, it will show up for a short while, to let user know that this function is active.

If the adjust mode is a list of values, you can press the 3 dots to add a reversing shortcut (to walk backwards through the list). Pretty much the method you said was the best way in your initial pull request.

Actually kind of hard to find at first glance. There's a 3 dots after e.g. seek, right? And there's also a 3 dots at the bottom of the row, before the remove button "x". The later one I thought was just for general purposes like duplicate, add label etc. So it might be good if the 3 dots is next to the "list" icon like seek, since the logic is tight to the specific option. And more easily for user to discover, "hey, check this newly created stuff next to your option. I know you're curious."

In addition, clicking the 3 dots, you can add a label for organization purposes, duplicate the shortcut, etc.

That's sweet. I can take a look at my dirty antique config again in the future.

I'll continue this post tomorrow.

[polywock]

I noticed that both interactively adjust by value and interactively set to value require a tiny movement to accomplish, which is confusing to muscle, is that relative to the distance I moved during pressing hotkey, or relative to the absolute position I released hotkey.

All customizable. For interactively adjust by value, the center of your page will be no adjustment, and the left side of page will be adjustment by -1 * step, and right side of page will be 1 * step. The step is customizable to user's liking.

For interactively set to value, you can customize the minimum and maximum. The left side of screen with be at the minimum, and right side will be at maximum. Middle of page will be halfway between min and max.

Almost perfect!

Great to hear. Getting it work mobile was the hardest part. Currently, the widget is only on by default if the user-agent identifies it as a mobile device. But, it's also useful for desktop because you can adjust speed/seek using only the mouse. Do you think I should have it be the default for desktop as well?

I didn't expect that holding time could be a dimension (although need muscle learning and definitely customization).

I was thinking of allowing the direction to be mapped to any function, but that's too much work for the moment. I'll leave that for the next update. I'll probably do some small changes for this update.

And make that small area completely transparent but touchable through all time.

Noted. I'll add that to customization section (adjust circle opacity). Maybe a setting for how quickly the circle should disappear with autohide enabled.

it might be good if the 3 dots is next to the "list" icon

Good idea. I'll look into fixing this.

I'll continue this post tomorrow.

Thanks again for doing this.

[polywock]

@LifeJustDLC Hi. Hope everything is well. I've published the update recently. I've rolled the update to 10% of users so I can test out the issues. Thankfully, I did, because a lot of problems are popping out. It's great the Chrome Web Store now allows rolling out the update to a small percentage of users.

[LifeJustDLC]

@polywock Sorry. I eventually gave up on another meaningless repo to compete with this mature enough project... 🤣 (That's what I'm doing these days. Well, and other stuffs about to publish). Trying to learn Webpack and understand the workflow...

[polywock]

@LifeJustDLC Just good to see you're alive.

You should also check out projects like Turbopack. It's still in development, but once it's stable I'll look into using with Global Speed. Webpack is very slow lately.