raingart / Nova-YouTube-extension

Apache License 2.0
199 stars 9 forks source link

Ability to easily start playback of a chapter from the progress bar #147

Open tyaremco opened 5 months ago

tyaremco commented 5 months ago

Problem:

Often it's desireable to skip to specific chapters for the purposes of getting to a conclusion of a documentary or a specific track in a music mix. A fast and convenient way to discover a chapter is to simply mouse over the progress bar to reveal a chapter's name and thumbnail that pop up. However, there is no simple way to immediately playback a revealed chapter. If you attempt to simply click on the chapter name, it will disappear as you mouseoff the progress bar.

The user is resigned to: 1) visually scan the progress bar for the tiny vertical line that indicates the start of the moused-over chapter and then 2) try to click exactly on it. The small target means an errant click can start a chapter to early or late.

Solution:

Make the hoverstate chapter name and thumbnail a clickable target. Clicking either will skip to the start of that chapter and being playing.

raingart commented 5 months ago

Nova for working with chapters has only one plugin Jump time/chapter

most chapters appear in the video description. Either as a list or as a section.

Screenshot from 2024-01-22 11-22-39

Also when you click on the chapter title on the bottom control panel. Or by clicking in the description "View All" in Chapters section a window will open on the side of the player with their selection.

Screenshot from 2024-01-22 11-29-00

for test https://github.com/raingart/Nova-YouTube-extension/blob/master/plugins/player/time-jump.js#L2-L26

tyaremco commented 5 months ago

I am aware of the jump plugin, the description, and the chapter panel but none of these hit the use case described.

jump plugin Cannot be combined with the discoverability of the progress bar mouseover. Eg. It would take multiple jumps to get to a chapter at the end.

description/chapter panel Both require multiple clicks and context switching. All the chapters displayed are in the progress bar, but I am reduced to opening and then visually scanning the description or chapter panel.

 

Using the progress bar as-is is superior to both of those options. But it can be greatly improved in the way I suggested.

raingart commented 5 months ago

Unfortunately. this is technically difficult to implement The only idea is that when you hold down the shift button, for example, the Float player progress bar plugin panel is not hidden. And the click on the chapter is read, scrolling the player to the beginning of the chapter

I will think. about it

raingart commented 5 months ago

https://github.com/raingart/Nova-YouTube-extension/assets/13064767/12cb4103-3f1c-40ae-a902-6945e443fbf7

raingart commented 5 months ago

this is how I understand what you want the plugin Float player progress bar needs to be improved because it was not designed for it

https://gist.github.com/raingart/90a679782148fd2db0ceb0091abce4a8

raingart commented 5 months ago

I modified the plugin Hold down one of the function keys (shift, alt, ctrl) after the panel will go into chapter selection mode

tyaremco commented 5 months ago

What I had in mind is way more effective than having to deal with a new mode.

Here, I added a button to make it obvious:

image

There is no need for Float Progress Bar; just include it in Add Custom Player Buttons.

As you scrub the bar, the cursor will naturally stay over the button as the preview thumbnail moves. Then it's just a simple click to start the chapter.

 

On hover, the tooltip div is inserted here (highlighted orange):

image

Make the hover target larger on hover so the preview doesn't disappear when the cursor moves to the tooltip:

.ytp-chapters-container {
    padding-top: 100px;
    top: -100px;
}

 

Even better than adding a new button is to just make the whole tooltip clickable like I suggested in the first place!

If I click on the tooltip, the chapter is started from the beginning.
If I click on the progress bar, it seeks to that position like normal.
Simple.

raingart commented 4 months ago

I can't make the .html5-video-player > [aria-live="polite"] element clickable. that's the whole problem. I did it as it was easier for me to implement at that moment.

I spent about an hour in total trying to solve this problem. Then I simply made the finished implementation as best I could in a shorter time. Now I tried again and it didn’t work again.

if you have a ready-made implementation, I’m ready to consider it and include it in Nova