whyboris / Video-Hub-App

Official repository for Video Hub App
https://videohubapp.com
MIT License
586 stars 176 forks source link

Reduce filmstrip padding on vertical videos. #817

Open psultan opened 1 year ago

psultan commented 1 year ago

The padding on vertical videos takes up 2/3rds the filmstrip.
So much padding produces an unappealing, difficult to view layout.

vertical filmstrip

gemini0x2 commented 1 year ago

Reducing the padding would mess up the aspect ratio of the video frames as they would have to be stretched to fill the extra space.

psultan commented 1 year ago

Frankly, I don't have a great solution for this either. How to arrange vertical and horizontal items is a difficult problem. I dislike vertical videos as much as the next person, but this is the world we live in. If I compare the vha's thumbnail view to windows explorer's thumbnail view, vha's aspect ratio is wider resulting in more padding between items.

When I was suggesting to reduce the padding I did not mean to stretch the image, I meant to reduce each thumbnail/frame's width to fit 9:16 resolution (and reduce the total filmstrip width). Yes, this would create a problem for 16:9 video. My specific hub is only vertical video, hence why this problem is more noticeable.

You could potentially ask the user to enter an orientation(horizontal or vertical) or specify the desired aspect ratio when creating the hub.

I haven't looked at the code, but unfortunately it seems like the thumbnail view's layout aspect ratio is hardcoded. I was hoping it was determined by the aspect ratio of the images in ./vha-hub/thumbnails. I cropped the padding off those images to see what would happen, but that did not affect the layout's aspect ratio.

Regardless if you use a generic 9:16 or custom aspect ratio you should still be able to use that to determine the filmstrip offset (for images when hovering scrubbing with the mouse).

I understand this a niche case, but it would be a nice-to-have feature.

whyboris commented 1 year ago

All the screenshots are generated with the 9:16 ratio, letterboxing the rest. This happens during screenshot extraction.

It would take a lot of careful work on the UI (user interface) to make sure all the paddings fit well and are recomputed properly. I suspect it would be a very big lift 😓 -- since we'd need to keep the code / styling for the standard, horizontal, layout.