feat: preview thumbnail when hovering over seek bar

[RonzyOnGIT]

What this does

• Shows little preview thumbnail when hovering over seekbar
• Thumbnails are cached in 4-second intervals
• Used refs to avoid unnecessary re-renders during hover

Notes | limitations

• Only for desktop version for this iteration.
• Tested on Chromium-based browsers (Chrome, Thorium)
• Tested on firefox as well but it does not work on firefox for some video files. For future iterations, I can just remove this feature entirely for unsupported browsers
• There is definitely room for optimization such as dynamic intervals depending on length of video to save space and different img formats for smaller sizes.

Found cached image and accurate frame

First cache miss, the whole cache is empty

When you hover along the seekbar fast, shows last found cached image. Since there is no re-render, will not show the correct thumbnail unless you re-hover after image is rendered

[killergerbah]

Thanks @RonzyOnGIT this is pretty cool
Just have two main concerns that I don't really have an answer for atm:

• Wonder how this will affect memory usage, since there are now two videos autoloading the same thing. Seeking also adds some IO and potential memory usage as well.
• I don't think the thumbnail should display above the subtitles. But if we let the subtitles float on top, it might not look good.

[RonzyOnGIT]

Thanks @RonzyOnGIT this is pretty cool Just have two main concerns that I don't really have an answer for atm:

* Wonder how this will affect memory usage, since there are now two videos autoloading the same thing. Seeking also adds some IO and potential memory usage as well.

* I don't think the thumbnail should display above the subtitles. But if we let the subtitles float on top, it might not look good.

Thanks for taking a look at it!
I also was unsure of how to handle subtitles and thumbnails overlapping. One potential solution would be to add a setting so that the user can choose how overlap is handled— for example: moving subtitles up, hiding the thumbnail, or allowing it to cover subtitles.

Regarding memory usage, one alternative I had in mind was creating a pre-generated sprite sheet, completely removing the need for a second video file. The issue with that is that there would be a need for a server to handle the video processing such as ffmpeg to generate frames.

I really love this project — thanks for all the work you’ve put into it. I’m excited to keep contributing where I can. I'll mark the pr as a draft for now.

[killergerbah]

I also was unsure of how to handle subtitles and thumbnails overlapping. One potential solution would be to add a setting so that the user can choose how overlap is handled— for example: moving subtitles up, hiding the thumbnail, or allowing it to cover subtitles.

Of these options, I think it might be best to either:

• No setting, thumbnail below subtitles
• Setting to control whether thumbnail is above or below

The other options look pretty hairy to implement, as you need to consider how to calculate the intersection between the thumbnail and the subtitles.

Regarding memory usage, one alternative I had in mind was creating a pre-generated sprite sheet, completely removing the need for a second video file. The issue with that is that there would be a need for a server to handle the video processing such as ffmpeg to generate frames.

I think I just need to profile on different browsers. The memory usage is probably not a big deal and maybe we could add a setting to disable the thumbnail entirely.