I'm doing a very simple video editing solution. User has a timeline (horizontal 100px line) which represents start and end of the video. User can add overlay images and texts, and all of them appear on the timeline. The location and width represents the start time and duration of the overlay element that appears over the video.
Problem is to find the best way to make overlapping elements appear on the timeline. I have a video length of 10 minutes which represents 600 seconds. The length of the timeline is 1200px so 1 second = 2 pixels.
Text appears (start) at 00:10 (20 pixels offset) and duration is 20 seconds (40 pixels).
Image appears at 00:15 (30 pixels offset) and duration is 40 seconds (80 pixels).
So based on start and duration values of the elements they overlap. How to draw them on the timeline? I got few ideas from Good ways to handle precisely overlapping data points in a graph?
I decided to try few things
But I'm not really impressed with both solutions. The problem can be also if there are 3 or more overlapping elements on the timeline. I'm aware of the different existing video editing solution. Most of the solve this by multiple timelines (layers) or with zooming. My goal is to try to make it simple, but at the same time give a nice ability to show overlapping elements.
My question is: what do you recommend? How to solve this?