@lightningtv/renderer 2.16.1

package/src/core/animations/CoreAnimation.ts

@@ -0,0 +1,347 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type CoreNode, type CoreNodeAnimateProps } from '../CoreNode.js';
+import { getTimingFunction } from '../utils.js';
+import { mergeColorProgress } from '../../utils.js';
+import { EventEmitter } from '../../common/EventEmitter.js';
+
+export interface AnimationSettings {
+  duration: number;
+  delay: number;
+  easing: string;
+  loop: boolean;
+  repeat: number;
+  repeatDelay: number;
+  stopMethod: 'reverse' | 'reset' | false;
+}
+
+type PropValues = {
+  start: number;
+  target: number;
+};
+type PropValuesMap = Record<string, Record<string, PropValues>>;
+
+export class CoreAnimation extends EventEmitter {
+  public settings: AnimationSettings;
+  private progress = 0;
+  private delayFor = 0;
+  private delay = 0;
+  private timingFunction: (t: number) => number | undefined;
+
+  propValuesMap: PropValuesMap = {};
+  dynPropValuesMap: PropValuesMap | undefined = undefined;
+
+  constructor(
+    private node: CoreNode,
+    private props: Partial<CoreNodeAnimateProps>,
+    settings: Partial<AnimationSettings>,
+  ) {
+    super();
+
+    for (const key in props) {
+      if (key !== 'shaderProps') {
+        if (this.propValuesMap['props'] === undefined) {
+          this.propValuesMap['props'] = {};
+        }
+        this.propValuesMap['props'][key] = {
+          start:
+            node[key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>] || 0,
+          target: props[
+            key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>
+          ] as number,
+        };
+      } else if (node.shader.type !== 'DynamicShader') {
+        this.propValuesMap['shaderProps'] = {};
+        for (const key in props.shaderProps) {
+          this.propValuesMap['shaderProps'][key] = {
+            start: node.shader.props[key] as number,
+            target: props.shaderProps[key] as number,
+          };
+        }
+      } else {
+        const shaderPropKeys = Object.keys(props.shaderProps!);
+        const spLength = shaderPropKeys.length;
+        this.dynPropValuesMap = {};
+        for (let j = 0; j < spLength; j++) {
+          const effectName = shaderPropKeys[j]!;
+          const effect = props.shaderProps![effectName]!;
+          this.dynPropValuesMap[effectName] = {};
+          const effectProps = Object.entries(effect);
+          const eLength = effectProps.length;
+
+          for (let k = 0; k < eLength; k++) {
+            const [key, value] = effectProps[k]!;
+            this.dynPropValuesMap[effectName]![key] = {
+              start: node.shader.props[effectName][key],
+              target: value,
+            };
+          }
+        }
+      }
+    }
+
+    const easing = settings.easing || 'linear';
+    const delay = settings.delay ?? 0;
+    this.settings = {
+      duration: settings.duration ?? 0,
+      delay,
+      easing,
+      loop: settings.loop ?? false,
+      repeat: settings.repeat ?? 0,
+      repeatDelay: settings.repeatDelay ?? 0,
+      stopMethod: settings.stopMethod ?? false,
+    };
+    this.timingFunction = getTimingFunction(easing);
+    this.delayFor = delay;
+    this.delay = delay;
+  }
+
+  reset() {
+    this.progress = 0;
+    this.delayFor = this.settings.delay || 0;
+    this.update(0);
+  }
+
+  private restoreValues(
+    target: Record<string, number>,
+    valueMap: Record<string, PropValues>,
+  ) {
+    const entries = Object.entries(valueMap);
+    const eLength = entries.length;
+
+    for (let i = 0; i < eLength; i++) {
+      const [key, value] = entries[i]!;
+      target[key] = value.start;
+    }
+  }
+
+  restore() {
+    this.reset();
+    if (this.propValuesMap['props'] !== undefined) {
+      this.restoreValues(
+        this.node as unknown as Record<string, number>,
+        this.propValuesMap['props'],
+      );
+    }
+    if (this.propValuesMap['shaderProps'] !== undefined) {
+      this.restoreValues(
+        this.node.shader.props as Record<string, number>,
+        this.propValuesMap['shaderProps'],
+      );
+    }
+
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.restoreValues(
+            this.node.shader.props[key],
+            this.dynPropValuesMap[key]!,
+          );
+        }
+      }
+    }
+  }
+
+  private reverseValues(valueMap: Record<string, PropValues>) {
+    const entries = Object.entries(valueMap);
+    const eLength = entries.length;
+
+    for (let i = 0; i < eLength; i++) {
+      const [key, value] = entries[i]!;
+      valueMap[key] = {
+        start: value.target,
+        target: value.start,
+      };
+    }
+  }
+
+  reverse() {
+    this.progress = 0;
+
+    if (this.propValuesMap['props'] !== undefined) {
+      this.reverseValues(this.propValuesMap['props']);
+    }
+    if (this.propValuesMap['shaderProps'] !== undefined) {
+      this.reverseValues(this.propValuesMap['shaderProps']);
+    }
+
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.reverseValues(this.dynPropValuesMap[key]!);
+        }
+      }
+    }
+
+    // restore stop method if we are not looping
+    if (!this.settings.loop) {
+      this.settings.stopMethod = false;
+    }
+  }
+
+  private applyEasing(p: number, s: number, e: number): number {
+    return (this.timingFunction(p) || p) * (e - s) + s;
+  }
+
+  updateValue(
+    propName: string,
+    propValue: number,
+    startValue: number,
+    easing: string | undefined,
+  ): number {
+    if (this.progress === 1) {
+      return propValue;
+    }
+    if (this.progress === 0) {
+      return startValue;
+    }
+
+    const endValue = propValue;
+    if (propName.indexOf('color') !== -1) {
+      if (startValue === endValue) {
+        return startValue;
+      }
+
+      if (easing) {
+        const easingProgressValue =
+          this.timingFunction(this.progress) || this.progress;
+        return mergeColorProgress(startValue, endValue, easingProgressValue);
+      }
+      return mergeColorProgress(startValue, endValue, this.progress);
+    }
+
+    if (easing) {
+      return this.applyEasing(this.progress, startValue, endValue);
+    }
+    return startValue + (endValue - startValue) * this.progress;
+  }
+
+  private updateValues(
+    target: Record<string, number>,
+    valueMap: Record<string, PropValues>,
+    easing: string | undefined,
+  ) {
+    const entries = Object.entries(valueMap);
+    const eLength = entries.length;
+
+    for (let i = 0; i < eLength; i++) {
+      const [key, value] = entries[i]!;
+      target[key] = this.updateValue(key, value.target, value.start, easing);
+    }
+  }
+
+  update(dt: number) {
+    const { duration, loop, easing, stopMethod } = this.settings;
+    const { delayFor } = this;
+
+    if (this.node.destroyed) {
+      // cleanup
+      this.emit('destroyed', {});
+      return;
+    }
+
+    if (duration === 0 && delayFor === 0) {
+      this.emit('finished', {});
+      return;
+    }
+
+    if (this.delayFor > 0) {
+      this.delayFor -= dt;
+      if (this.delayFor >= 0) {
+        // Either no or more delay left. Exit.
+        return;
+      } else {
+        // We went beyond the delay time, add it back to dt so we can continue
+        // with the animation.
+        dt = -this.delayFor;
+        this.delayFor = 0;
+      }
+    }
+
+    if (duration === 0) {
+      // No duration, we are done.
+      this.emit('finished', {});
+      return;
+    }
+
+    if (this.progress === 0) {
+      // Progress is 0, we are starting the post-delay part of the animation.
+      this.emit('animating', {});
+    }
+
+    this.progress += dt / duration;
+
+    if (this.progress > 1) {
+      this.progress = loop ? 0 : 1;
+      this.delayFor = this.delay;
+      if (stopMethod) {
+        // If there's a stop method emit finished so the stop method can be applied.
+        // TODO: We should probably reevaluate how stopMethod is implemented as currently
+        // stop method 'reset' does not work when looping.
+        this.emit('finished', {});
+        return;
+      }
+    }
+
+    if (this.propValuesMap['props'] !== undefined) {
+      this.updateValues(
+        this.node as unknown as Record<string, number>,
+        this.propValuesMap['props'],
+        easing,
+      );
+    }
+    if (this.propValuesMap['shaderProps'] !== undefined) {
+      this.updateValues(
+        this.node.shader.props as Record<string, number>,
+        this.propValuesMap['shaderProps'],
+        easing,
+      );
+    }
+
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.updateValues(
+            this.node.shader.props[key],
+            this.dynPropValuesMap[key]!,
+            easing,
+          );
+        }
+      }
+    }
+
+    if (this.progress < 1) {
+      this.emit('tick', { progress: this.progress });
+    }
+
+    if (this.progress === 1) {
+      this.emit('finished', {});
+    }
+  }
+}

package/src/core/animations/CoreAnimationController.ts

@@ -0,0 +1,166 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+  AnimationControllerState,
+  IAnimationController,
+} from '../../common/IAnimationController.js';
+import type { AnimationManager } from './AnimationManager.js';
+import type { CoreAnimation } from './CoreAnimation.js';
+import { assertTruthy } from '../../utils.js';
+import { EventEmitter } from '../../common/EventEmitter.js';
+import type { AnimationTickPayload } from '../../common/CommonTypes.js';
+
+export class CoreAnimationController
+  extends EventEmitter
+  implements IAnimationController
+{
+  stoppedPromise: Promise<void>;
+  /**
+   * If this is null, then the animation is in a finished / stopped state.
+   */
+  stoppedResolve: (() => void) | null = null;
+  state: AnimationControllerState;
+
+  constructor(
+    private manager: AnimationManager,
+    private animation: CoreAnimation,
+  ) {
+    super();
+    this.state = 'stopped';
+    // Initial stopped promise is resolved (since the animation is stopped)
+    this.stoppedPromise = Promise.resolve();
+
+    // Bind event handlers
+    this.onAnimating = this.onAnimating.bind(this);
+    this.onFinished = this.onFinished.bind(this);
+    this.onTick = this.onTick.bind(this);
+    this.onDestroy = this.onDestroy.bind(this);
+  }
+
+  start(): IAnimationController {
+    if (this.state !== 'running' && this.state !== 'scheduled') {
+      this.makeStoppedPromise();
+      this.registerAnimation();
+      this.state = 'scheduled';
+    }
+    return this;
+  }
+
+  stop(): IAnimationController {
+    this.unregisterAnimation();
+    if (this.stoppedResolve !== null) {
+      this.stoppedResolve();
+      this.stoppedResolve = null;
+      this.emit('stopped', this);
+    }
+    this.animation.reset();
+    this.state = 'stopped';
+    return this;
+  }
+
+  pause(): IAnimationController {
+    this.unregisterAnimation();
+    this.state = 'paused';
+    return this;
+  }
+
+  restore(): IAnimationController {
+    this.stoppedResolve = null;
+    this.animation.restore();
+    return this;
+  }
+
+  waitUntilStopped(): Promise<void> {
+    return this.stoppedPromise;
+  }
+
+  private registerAnimation(): void {
+    // Hook up event listeners
+    this.animation.once('finished', this.onFinished);
+    this.animation.on('animating', this.onAnimating);
+    this.animation.on('tick', this.onTick);
+    this.animation.on('destroyed', this.onDestroy);
+    // Then register the animation
+    this.manager.registerAnimation(this.animation);
+  }
+
+  private unregisterAnimation(): void {
+    // First unregister the animation
+    this.manager.unregisterAnimation(this.animation);
+    // Then unhook event listeners
+    this.animation.off('finished', this.onFinished);
+    this.animation.off('animating', this.onAnimating);
+    this.animation.off('tick', this.onTick);
+    this.animation.off('destroy', this.onDestroy);
+  }
+
+  private makeStoppedPromise(): void {
+    if (this.stoppedResolve === null) {
+      this.stoppedPromise = new Promise((resolve) => {
+        this.stoppedResolve = resolve;
+      });
+    }
+  }
+
+  private onDestroy(this: CoreAnimationController): void {
+    this.unregisterAnimation();
+    this.state = 'stopped';
+  }
+
+  private onFinished(this: CoreAnimationController): void {
+    // If the animation is looping, then we need to restart it.
+    const { loop, stopMethod } = this.animation.settings;
+
+    if (stopMethod === 'reverse') {
+      this.animation.once('finished', this.onFinished);
+      this.animation.reverse();
+      return;
+    }
+
+    if (loop) {
+      return;
+    }
+
+    // unregister animation
+    this.unregisterAnimation();
+
+    // resolve promise
+    if (this.stoppedResolve !== null) {
+      this.stoppedResolve();
+      this.stoppedResolve = null;
+    }
+
+    this.emit('stopped', this);
+    this.state = 'stopped';
+  }
+
+  private onAnimating(this: CoreAnimationController): void {
+    this.state = 'running';
+    this.emit('animating', this);
+  }
+
+  private onTick(
+    this: CoreAnimationController,
+    _animation: CoreAnimation,
+    data: AnimationTickPayload,
+  ): void {
+    this.emit('tick', data);
+  }
+}

package/src/core/lib/ContextSpy.ts

@@ -0,0 +1,41 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Class that keeps track of the invocations of Context methods when
+ * the `enableContextSpy` renderer option is enabled.
+ */
+export class ContextSpy {
+  private data: Record<string, number> = {};
+
+  reset() {
+    this.data = {};
+  }
+
+  increment(name: string) {
+    if (!this.data[name]) {
+      this.data[name] = 0;
+    }
+    this.data[name]++;
+  }
+
+  getData() {
+    return { ...this.data };
+  }
+}