setting start and end clips

[girayk]

Start and end method is really useful for tracking clips on the timeline etc, but unfortunately start and end is not working on VideoClip, works with ImageClip and I didn't try with other clips yet, Can we make work with all, after we set to start time also we can delay it with offset as well but following them with start end stop is more easy to track. p.s. please dont hate me

[voladelta]

😅 stacking and offset rule are weird. i'm fighting with them now.

i'm building a really simple editor, which has 1 track for same type. after moving/resize on timeline, using set({ start, stop }) doesnt help.

any tips would be helpful.

[girayk]

Yeah at the moment its buggy, its works on imageClip, u can extend your text or video clip and copy paste from ImageClip, or u can use offset at the moment but i am pretty sure Konstantin will fix it very shortly 😂

[girayk]

I was reviewing code, ImageClip is extend of Clip and VideoClip is extend of MediaClip and MediaClip is extend of Clip, I am not sure but I think also image suppose to be part of MediaClip, because only biggest difference both of them is Video has a audio element and image is not, but if the image is animated gif, it will have frames, we will need offset values and why we are not able to put a Caption on Image?

[voladelta]

no worry, i might remove the use of track, or handling in the back for users to ensure ux

stack mode isn't right words for this, dictionary: a pile of things arranged one on top of another

from the guide which ensures that each new clip added starts exactly where the previous clip ended (plus 1 millisecond)

// proper `stacked` strategy would be helpful
composition.createTrack('video', { stacked: Boolean });

[voladelta]

remove the use of track

you can't, the problem is layering 😅, you can't layer clip with (z)index

so to layer, we need to use track. there is @flatten-js/interval-tree btw

[girayk]

Why u need a z-index if 2 clips are in same tracks? zindex are for html elements but clips are on the canvas, if you wanna debug how the track and clips are on the canvas, u can use pixie devtool, https://pixijs.io/devtools/ for the each clip on same track, time must be not on the same ratio, other wise its suppose the be in other track.

[voladelta]

i'm newbie on this 😅, i just want to make really simple editor without the need to understand track for non technical like and newbie like me so each track has different type but can contain multiple overlapped items.

i have it working btw on ui, they appears on same track, in the back, it is managed by a manager with interval-tree

[girayk]

If you make it work, its good. But in general u dont need 3rd party library, actually its simple. Imagine each tracks has a zindex and first in first out, so if u wanna put text top of everything text track should render last. U can put orderid on db and u can add text track last on sortby orderid, Also if you wanna change ordering onmounted there is shiftTrack method which is like chancing zindex. composition.shiftTrack(track);

But do not forget there is happing in canvas, so actually there is no zindex.

[voladelta]

From the docs, but not actual the case @k9p5

If clips overlap, Diffusion Studio will automatically adjust the start/stop times or move the clip to a different track. It would be great if this handle internally with a flag 😅. Anyway, i'll try to contribute back when i have more experience with the library.

[girayk]

And personal suggestion, as i understand u re using vue, if u re using vue devtool, make compotison as a shallowRef and from vue devtool u can understand, debug more easily.

[k9p5]

The current issue is that when setting the start/stop points on a media clip with a fixed length, I am adjusting the clip's offset to match the user's selection as closely as possible.

I propose an alternative approach: use start/stop points strictly for defining the subclip, without altering the clip's offset. If the selected start/stop points can't be precisely matched without adjusting the offset, the closest available frame should be used instead.

What are your thoughts on this approach?

[girayk]

yeah kind a complicated but I think start must have to key for create starting position, and instead of stop maybe we can use duration for media clips, videos has already have and for the images we can set duration and then I think offset will not create problem, we can trim to starting or ending point with offset.

[girayk]

ps another nice timeline, u re good with timelines :)

[k9p5]

Over the last couple of weeks I've been working on a timeline component and got it to work quite reliably using the current version.

For trimming I used:

clip.start = <start frames> // or clip.set({ start: <start frames> })
clip.stop = <stop frames>

To move the clip along the x axis within the same track:

clip.offsetBy(offset);

And to move it into another track:

track.add(clip.detach().offsetBy(offset));

Hope that helps. I will make my timeline open source asap.

[k9p5]

I also made use of composition.createTrack('video').stacked() which works as intended. I didn't get the issue here?

[k9p5]

yeah kind a complicated but I think start must have to key for create starting position, and instead of stop maybe we can use duration for media clips, videos has already have and for the images we can set duration and then I think offset will not create problem, we can trim to starting or ending point with offset.

The reason it's referred to as start/stop with media clips is to provide a universal way to trim clips, regardless of their type.

In addition, I plan to introduce a duration parameter. This will allow more convenient control when combined with offset, providing greater flexibility in how clips are trimmed and adjusted.

What do you think of this approach?

[girayk]

Sorry I had miss understood, I was thinking offset was for trimming, Now offset make sense. For example I have a originally 10 sec video on video Track and I wanna make it start on 3rd second on time line from the 2nd till 5 second of video. I think its suppose the be, if we think each sec 30 frames clip.start = 90 clip.trim(start:60, till: 150) or clip.trim(start:60, end: 150)

[k9p5]

remove the use of track

you can't, the problem is layering 😅, you can't layer clip with (z)index

so to layer, we need to use track. there is @flatten-js/interval-tree btw

Z-index is controlled via track.layer(index)

[k9p5]

clip.trim(start:60, end: 150) is basically clip.subclip(start:60, end: 150)

[girayk]

Yeah now I am reading docs again, I had some miss understoodies, (ps. I dont have a timeline yet :) I didnt have change to try them) all make sense but honestly we need the read docs, Because for me logically start suppose the be starting frame on timeline instead its offset, subclip suppose the be trim (but subclip not confusing that much)

[k9p5]

Should we implement clip.trim(start: 60, duration: 150) for all clip types, where start controls the offset from the video's untrimmed beginning? For visual clips (e.g., images), start would act as a proxy for clip.trim(start: 60 ....

This would create a consistent API across different media types and simplify the trimming logic. What do you think?

[girayk]

Should we implement clip.trim(start: 60, duration: 150) for all clip types, where start controls the offset from the video's untrimmed beginning? For visual clips (e.g., images), start would act as a proxy for clip.trim(start: 60 ....

This would create a consistent API across different media types and simplify the trimming logic. What do you think?

for me sound more easy to understand

[k9p5]

Then we can also replace offsetBy with just offset to move the clip along the x-axis

[girayk]

watch out with Backward Compatibility :) Now its a released product

[k9p5]

I will move from 1.0.0 to 2.0.0 😅

[girayk]

Over the last couple of weeks I've been working on a timeline component and got it to work quite reliably using the current version.

For trimming I used:

clip.start = <start frames> // or clip.set({ start: <start frames> })
clip.stop = <stop frames>

To move the clip along the x axis within the same track:

clip.offsetBy(offset);

And to move it into another track:

track.add(clip.detach().offsetBy(offset));

Hope that helps. I will make my timeline open source asap.

And one last suggestion, Track can have many clips but clips has one track. maybe as a new function, clip.changeTrack(trackid) or clip.moveTrack(track ) could be more safer to forget detach

[k9p5]

What do you think? https://github.com/orgs/diffusionstudio/projects/3/views/1?pane=issue&itemId=85260375

[k9p5]

Solved with version 4