refactor: Compute endT in timeline instead of persisting duration

delucis · Jan 3, 2021 · d7bfc39 · d7bfc39
1 parent c81c7ce
commit d7bfc39
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 87 deletions.
diff --git a/src/plugin.test.ts b/src/plugin.test.ts
@@ -44,16 +44,16 @@ describe('Plugin API', () => {
     api.dumb();
     api.rollDie(6);
     expect(api.timeline.getQueue()).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'alert', duration: 0.2 },
-      { t: 0.2, type: 'dumb', duration: 0 },
-      { t: 0.2, type: 'rollDie', payload: { roll: 6 }, duration: 0 },
-      { t: 0.2, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'alert', endT: 0.2 },
+      { t: 0.2, type: 'dumb', endT: 0.2 },
+      { t: 0.2, type: 'rollDie', payload: { roll: 6 }, endT: 0.2 },
+      { t: 0.2, type: 'effects:end', endT: 0.2 },
     ]);
     api.timeline.clear();
     expect(api.timeline.getQueue()).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'effects:end', endT: 0 },
     ]);
   });
 

diff --git a/src/react/components.tsx b/src/react/components.tsx
@@ -105,8 +105,7 @@ function EffectsProvider<
     let ended = false;
     for (let i = 0; i < activeQueue.current.length; i++) {
       const effect = activeQueue.current[i];
-      if (!effect.duration) continue;
-      if (effect.t + effect.duration > elapsedT) {
+      if (effect.endT > elapsedT) {
         newActiveQueue.push(effect);
         continue;
       }

diff --git a/src/timeline.test.ts b/src/timeline.test.ts
@@ -17,9 +17,9 @@ describe('#add', () => {
     t.add({ type: 'test' });
     const queue = t.getQueue();
     expect(queue).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'test', duration: 0 },
-      { t: 0, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'test', endT: 0 },
+      { t: 0, type: 'effects:end', endT: 0 },
     ]);
   });
 
@@ -28,11 +28,11 @@ describe('#add', () => {
     t.add({ type: 'bar' }, '>', 5);
     const queue = t.getQueue();
     expect(queue).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'test', duration: 0 },
-      { t: 0, type: 'foo', duration: 5 },
-      { t: 5, type: 'bar', duration: 5 },
-      { t: 10, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'test', endT: 0 },
+      { t: 0, type: 'foo', endT: 5 },
+      { t: 5, type: 'bar', endT: 10 },
+      { t: 10, type: 'effects:end', endT: 10 },
     ]);
   });
 
@@ -41,13 +41,13 @@ describe('#add', () => {
     t.add({ type: 'bam' }, '>+0.5', 1);
     const queue = t.getQueue();
     expect(queue).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'test', duration: 0 },
-      { t: 0, type: 'foo', duration: 5 },
-      { t: 5, type: 'bar', duration: 5 },
-      { t: 9, type: 'baz', duration: 1 },
-      { t: 10.5, type: 'bam', duration: 1 },
-      { t: 11.5, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'test', endT: 0 },
+      { t: 0, type: 'foo', endT: 5 },
+      { t: 5, type: 'bar', endT: 10 },
+      { t: 9, type: 'baz', endT: 10 },
+      { t: 10.5, type: 'bam', endT: 11.5 },
+      { t: 11.5, type: 'effects:end', endT: 11.5 },
     ]);
   });
 
@@ -56,69 +56,69 @@ describe('#add', () => {
     t.add({ type: 'bup' }, '<+0.5', 2);
     const queue = t.getQueue();
     expect(queue).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'test', duration: 0 },
-      { t: 0, type: 'foo', duration: 5 },
-      { t: 5, type: 'bar', duration: 5 },
-      { t: 9, type: 'baz', duration: 1 },
-      { t: 9.5, type: 'buq', duration: 2 },
-      { t: 10.5, type: 'bam', duration: 1 },
-      { t: 11, type: 'bup', duration: 2 },
-      { t: 13, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'test', endT: 0 },
+      { t: 0, type: 'foo', endT: 5 },
+      { t: 5, type: 'bar', endT: 10 },
+      { t: 9, type: 'baz', endT: 10 },
+      { t: 9.5, type: 'buq', endT: 11.5 },
+      { t: 10.5, type: 'bam', endT: 11.5 },
+      { t: 11, type: 'bup', endT: 13 },
+      { t: 13, type: 'effects:end', endT: 13 },
     ]);
   });
 
   test('adds data at an absolute time', () => {
     t.add({ type: 'fixed' }, 4);
     const queue = t.getQueue();
     expect(queue).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'test', duration: 0 },
-      { t: 0, type: 'foo', duration: 5 },
-      { t: 4, type: 'fixed', duration: 0 },
-      { t: 5, type: 'bar', duration: 5 },
-      { t: 9, type: 'baz', duration: 1 },
-      { t: 9.5, type: 'buq', duration: 2 },
-      { t: 10.5, type: 'bam', duration: 1 },
-      { t: 11, type: 'bup', duration: 2 },
-      { t: 13, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'test', endT: 0 },
+      { t: 0, type: 'foo', endT: 5 },
+      { t: 4, type: 'fixed', endT: 4 },
+      { t: 5, type: 'bar', endT: 10 },
+      { t: 9, type: 'baz', endT: 10 },
+      { t: 9.5, type: 'buq', endT: 11.5 },
+      { t: 10.5, type: 'bam', endT: 11.5 },
+      { t: 11, type: 'bup', endT: 13 },
+      { t: 13, type: 'effects:end', endT: 13 },
     ]);
   });
 
   test('inserts data and shifts subsequent keyframes by duration', () => {
     t.add({ type: 'ins' }, '^10', 1);
     const queue = t.getQueue();
     expect(queue).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'test', duration: 0 },
-      { t: 0, type: 'foo', duration: 5 },
-      { t: 4, type: 'fixed', duration: 0 },
-      { t: 5, type: 'bar', duration: 5 },
-      { t: 9, type: 'baz', duration: 1 },
-      { t: 9.5, type: 'buq', duration: 2 },
-      { t: 10, type: 'ins', duration: 1 },
-      { t: 11.5, type: 'bam', duration: 1 },
-      { t: 12, type: 'bup', duration: 2 },
-      { t: 14, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'test', endT: 0 },
+      { t: 0, type: 'foo', endT: 5 },
+      { t: 4, type: 'fixed', endT: 4 },
+      { t: 5, type: 'bar', endT: 10 },
+      { t: 9, type: 'baz', endT: 10 },
+      { t: 9.5, type: 'buq', endT: 11.5 },
+      { t: 10, type: 'ins', endT: 11 },
+      { t: 11.5, type: 'bam', endT: 12.5 },
+      { t: 12, type: 'bup', endT: 14 },
+      { t: 14, type: 'effects:end', endT: 14 },
     ]);
   });
 
   test('inserts data and shifts subsequent keyframes by offset', () => {
     t.add({ type: 'uns' }, '^11->0.5', 1);
     const queue = t.getQueue();
     expect(queue).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'test', duration: 0 },
-      { t: 0, type: 'foo', duration: 5 },
-      { t: 4, type: 'fixed', duration: 0 },
-      { t: 5, type: 'bar', duration: 5 },
-      { t: 9, type: 'baz', duration: 1 },
-      { t: 9.5, type: 'buq', duration: 2 },
-      { t: 10, type: 'ins', duration: 1 },
-      { t: 11, type: 'uns', duration: 1 },
-      { t: 12, type: 'bam', duration: 1 },
-      { t: 12.5, type: 'bup', duration: 2 },
-      { t: 14.5, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'test', endT: 0 },
+      { t: 0, type: 'foo', endT: 5 },
+      { t: 4, type: 'fixed', endT: 4 },
+      { t: 5, type: 'bar', endT: 10 },
+      { t: 9, type: 'baz', endT: 10 },
+      { t: 9.5, type: 'buq', endT: 11.5 },
+      { t: 10, type: 'ins', endT: 11 },
+      { t: 11, type: 'uns', endT: 12 },
+      { t: 12, type: 'bam', endT: 13 },
+      { t: 12.5, type: 'bup', endT: 14.5 },
+      { t: 14.5, type: 'effects:end', endT: 14.5 },
     ]);
   });
 
@@ -127,10 +127,10 @@ describe('#add', () => {
     t.add({ type: 'nu' }, '^', 1);
     t.add({ type: 'bu' });
     expect(t.getQueue()).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'nu', duration: 1 },
-      { t: 1, type: 'bu', duration: 0 },
-      { t: 1, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'nu', endT: 1 },
+      { t: 1, type: 'bu', endT: 1 },
+      { t: 1, type: 'effects:end', endT: 1 },
     ]);
   });
 
@@ -139,10 +139,10 @@ describe('#add', () => {
     t.add({ type: 'e' }, '<', 1);
     t.add({ type: 'mc' });
     expect(t.getQueue()).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'e', duration: 1 },
-      { t: 1, type: 'mc', duration: 0 },
-      { t: 1, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'e', endT: 1 },
+      { t: 1, type: 'mc', endT: 1 },
+      { t: 1, type: 'effects:end', endT: 1 },
     ]);
   });
 
@@ -194,21 +194,21 @@ describe('#clear', () => {
     t.add({ type: 'a' }, '>', 1);
     t.add({ type: 'b' }, '>', 1);
     expect(t.getQueue()).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'a', duration: 1 },
-      { t: 1, type: 'b', duration: 1 },
-      { t: 2, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'a', endT: 1 },
+      { t: 1, type: 'b', endT: 2 },
+      { t: 2, type: 'effects:end', endT: 2 },
     ]);
     t.clear();
     expect(t.getQueue()).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'effects:end', endT: 0 },
     ]);
     t.add({ type: 'a' }, '>', 1);
     expect(t.getQueue()).toEqual([
-      { t: 0, type: 'effects:start' },
-      { t: 0, type: 'a', duration: 1 },
-      { t: 1, type: 'effects:end' },
+      { t: 0, type: 'effects:start', endT: 0 },
+      { t: 0, type: 'a', endT: 1 },
+      { t: 1, type: 'effects:end', endT: 1 },
     ]);
   });
 });
diff --git a/src/timeline.ts b/src/timeline.ts
@@ -121,14 +121,19 @@ export class Timeline {
    *         Each effect has a property `t` specifying its time on the timeline.
    */
   getQueue(): Queue {
-    let queue: Queue = [{ t: 0, type: 'effects:start' }];
+    let queue: Queue = [{ t: 0, endT: 0, type: 'effects:start' }];
     this.keys().forEach((t) => {
       const effects = this._keyframes.get(t)!;
       effects.forEach((effect) => {
-        queue.push({ t, ...effect });
+        const { duration, ...rest } = effect;
+        queue.push({ t, endT: t + duration, ...rest });
       });
     });
-    queue.push({ t: this._duration, type: 'effects:end' });
+    queue.push({
+      t: this._duration,
+      endT: this._duration,
+      type: 'effects:end',
+    });
     return queue;
   }
 

diff --git a/src/types.ts b/src/types.ts
@@ -55,7 +55,7 @@ export interface Effect {
  */
 interface PersistedEffect extends Effect {
   t: number;
-  duration?: number;
+  endT: number;
 }
 
 /**