Update playground to reproduce many clips performance issue

- Change imports from core-v4 to core in all playground files
- Replace single animated video clip with multiple clips using sequential layer
- Split 20-second video into 50 clips with 4-second minimum duration each
- Use sliding window approach where clips overlap to maintain minimum duration
- Skip clips that would exceed video duration
- This setup helps reproduce browser hanging issue when adding many clips

Author: remorses

playground/composition.ts

@@ -1,4 +1,4 @@
-import * as core from '@diffusionstudio/core-v4';
+import * as core from '@diffusionstudio/core';
 
 export const settings: core.CompositionSettings = {
   background: '#76b7f5',
@@ -22,49 +22,29 @@ export async function main(composition: core.Composition) {
     core.Source.from<core.ImageSource>('/parrot.jpg')
   ]);
 
-  const mask = new core.RectangleMask({
-    x: 1920 / 2,
-    y: 1080 / 2,
-    width: 1080,
-    height: 1080,
-    radius: 100,
-  });
-
-  const videoClip = new core.VideoClip(sources[0], {
-    position: 'center',
-    mask,
-    height: '100%',
-    animations: [
-      {
-        key: 'scale',
-        frames: [
-          { time: 0, value: 0.5 },
-          { time: 2, value: 1 },
-        ],
-      },
-      {
-        key: 'rotation',
-        frames: [
-          { time: 0, value: 0 },
-          { time: 2, value: 720 },
-        ],
-      },
-      {
-        key: 'opacity',
-        frames: [
-          { time: 0, value: 100 },
-          { time: 1, value: 80 },
-          { time: 2, value: 100 },
-        ],
-      }
-    ],
-    range: [0.8, 18],
-    delay: 1,
-  })
+  const CLIPS = 50;
+  const videoDuration = 20;
+  const minClipDuration = 4;
+  const slideStep = videoDuration / CLIPS;
 
-  const videoLayer = new core.Layer();
+  const videoLayer = new core.Layer({ mode: 'SEQUENTIAL' });
   await composition.add(videoLayer);
-  await videoLayer.add(videoClip);
+
+  for (let i = 0; i < CLIPS; i++) {
+    const startTime = i * slideStep;
+    const endTime = startTime + minClipDuration;
+
+    if (endTime > videoDuration) continue;
+
+    const videoClip = new core.VideoClip(sources[0], {
+      position: 'center',
+      height: '100%',
+      range: [startTime, endTime],
+      duration: minClipDuration,
+    });
+
+    await videoLayer.add(videoClip);
+  }
 
   const imageClip = new core.ImageClip(sources[1], {
     position: 'center',

playground/controls.ts

@@ -1,4 +1,4 @@
-import * as core from '@diffusionstudio/core-v4';
+import * as core from '@diffusionstudio/core';
 import { render } from './render';
 
 export function setupControls(composition: core.Composition) {

playground/main.ts

@@ -1,4 +1,4 @@
-import * as core from '@diffusionstudio/core-v4';
+import * as core from '@diffusionstudio/core';
 import { setupControls } from './controls';
 import { setupTimeline } from './timeline';
 import { main, settings } from './composition';

playground/render.ts

@@ -1,4 +1,4 @@
-import * as core from '@diffusionstudio/core-v4';
+import * as core from '@diffusionstudio/core';
 
 let fps = 30;
 

playground/timeline.ts

@@ -1,4 +1,4 @@
-import * as core from '@diffusionstudio/core-v4';
+import * as core from '@diffusionstudio/core';
 
 export function setupTimeline(composition: core.Composition) {
   composition.on('playback:time', () => {
@@ -26,4 +26,4 @@ export function setupTimeline(composition: core.Composition) {
 }
 
 const timeline = document.querySelector('[id="timeline"]') as HTMLDivElement;
-const cursor = document.querySelector('[id="timeline"] > div') as HTMLDivElement;
+const cursor = document.querySelector('[id="timeline"] > div') as HTMLDivElement;