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.