Comments (3)
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.
from video-hub-app.
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.
from video-hub-app.
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.
from video-hub-app.
Related Issues (20)
- Add an option to create a non-recursive hub. HOT 3
- Drag and drop native directory adds folder to hub. HOT 4
- Refactor sorting.pipe.ts HOT 2
- Make "Recent" tab (bottom tray) always show recently played HOT 1
- Consider toggle to auto-add preview image when only one image in folder HOT 4
- Right column in gallery empty after close HOT 1
- Consider reducing space between search inputs
- Reset progress better
- Name Tagging HOT 1
- Build a playlist functionality
- Server problem HOT 3
- Fix incorrect column count when app zoom level set HOT 2
- Hide the 5 bottom-tray tab buttons from ribbon HOT 7
- Add optional password to hub HOT 5
- Gallery meta redesign ideas
- "Rescan" button can be right-clicked but nothing happens HOT 4
- Favorites-only view
- Add settings option to increase timeouts during ffmpeg extractions
- Add option for video location to act as a folder
- File Management Options Grayed Out With Duplicate Search HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from video-hub-app.