@clockworkdog/cogs-client 3.0.0-alpha.4 → 3.0.0-alpha.6

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export type { default as MediaObjectFit } from './types/MediaObjectFit';
 export * as MediaSchema from './types/MediaSchema';
 export { default as CogsAudioPlayer } from './AudioPlayer';
 export { default as CogsVideoPlayer } from './VideoPlayer';
+export { SurfaceManager } from './state-based/SurfaceManager';
 export * from './types/AudioState';
 export { assetUrl, preloadUrl } from './utils/urls';
 export { getStateAtTime } from './utils/getStateAtTime';

package/dist/index.js

@@ -3,6 +3,7 @@ export * from './CogsConnection';
 export * as MediaSchema from './types/MediaSchema';
 export { default as CogsAudioPlayer } from './AudioPlayer';
 export { default as CogsVideoPlayer } from './VideoPlayer';
+export { SurfaceManager } from './state-based/SurfaceManager';
 export * from './types/AudioState';
 export { assetUrl, preloadUrl } from './utils/urls';
 export { getStateAtTime } from './utils/getStateAtTime';

package/dist/state-based/AudioManager.d.ts

@@ -0,0 +1,15 @@
+import { AudioState } from '../types/MediaSchema';
+import { ClipManager } from './ClipManager';
+export declare class AudioManager extends ClipManager<AudioState> {
+    private audioElement?;
+    private isSeeking;
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: AudioState);
+    private updateAudioElement;
+    /**
+     * Helper function to seek to a specified time.
+     * Works with the update loop to poll until seeked event has fired.
+     */
+    private seekTo;
+    protected update(): void;
+    destroy(): void;
+}

package/dist/state-based/AudioManager.js

@@ -0,0 +1,112 @@
+import { defaultAudioOptions } from '../types/MediaSchema';
+import { getStateAtTime } from '../utils/getStateAtTime';
+import { ClipManager } from './ClipManager';
+const DEFAULT_AUDIO_POLLING = 1_000;
+const TARGET_SYNC_THRESHOLD_MS = 10; // If we're closer than this we're good enough
+const MAX_SYNC_THRESHOLD_MS = 1_000; // If we're further away than this, we'll seek instead
+const SEEK_LOOKAHEAD_MS = 200; // We won't seek ahead instantly, so lets seek ahead
+const MAX_PLAYBACK_RATE_ADJUSTMENT = 0.2;
+// We smoothly ramp playbackRate up and down
+const PLAYBACK_ADJUSTMENT_SMOOTHING = 0.5;
+function playbackSmoothing(deltaTime) {
+    return Math.sign(deltaTime) * Math.pow(Math.abs(deltaTime) / MAX_SYNC_THRESHOLD_MS, PLAYBACK_ADJUSTMENT_SMOOTHING) * MAX_PLAYBACK_RATE_ADJUSTMENT;
+}
+export class AudioManager extends ClipManager {
+    audioElement;
+    isSeeking = false;
+    constructor(surfaceElement, clipElement, state) {
+        super(surfaceElement, clipElement, state);
+        this.clipElement = clipElement;
+    }
+    updateAudioElement() {
+        this.destroy();
+        this.audioElement = document.createElement('audio');
+        this.clipElement.replaceChildren(this.audioElement);
+    }
+    /**
+     * Helper function to seek to a specified time.
+     * Works with the update loop to poll until seeked event has fired.
+     */
+    seekTo(time) {
+        if (!this.audioElement)
+            return;
+        this.audioElement.addEventListener('seeked', () => {
+            this.isSeeking = false;
+        }, { once: true, passive: true });
+        this.audioElement.currentTime = time / 1_000;
+    }
+    update() {
+        // Update loop used to poll until seek finished
+        if (this.isSeeking)
+            return;
+        this.delay = DEFAULT_AUDIO_POLLING;
+        // Does the <audio /> element need adding/removing?
+        const currentState = getStateAtTime(this._state, Date.now());
+        if (currentState) {
+            if (!this.audioElement || !this.isConnected(this.audioElement)) {
+                this.updateAudioElement();
+            }
+        }
+        else {
+            this.destroy();
+        }
+        if (!currentState || !this.audioElement)
+            return;
+        const { t, rate, volume } = { ...defaultAudioOptions, ...currentState };
+        // this.audioElement.src will be a fully qualified URL
+        if (!this.audioElement.src.endsWith(this._state.file)) {
+            this.audioElement.src = this._state.file;
+        }
+        if (this.audioElement.volume !== volume) {
+            this.audioElement.volume = volume;
+        }
+        // Should the element be playing?
+        if (this.audioElement.paused && rate > 0) {
+            this.audioElement.play().catch(() => {
+                // Do nothing - this will be retried in the next loop
+            });
+        }
+        const currentTime = this.audioElement.currentTime * 1000;
+        const deltaTime = currentTime - t;
+        const deltaTimeAbs = Math.abs(deltaTime);
+        this.delay = 100;
+        switch (true) {
+            case deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS:
+                // We are on course:
+                //   - The audio is within accepted latency of the server time
+                //   - The playback rate is aligned with the server rate
+                if (this.audioElement.playbackRate !== rate) {
+                    this.audioElement.playbackRate = rate;
+                }
+                break;
+            case rate > 0 && deltaTimeAbs > TARGET_SYNC_THRESHOLD_MS && deltaTimeAbs <= MAX_SYNC_THRESHOLD_MS: {
+                // We are close, we can smoothly adjust with playbackRate:
+                //  - The audio must be playing
+                //  - We must be close in time to the server time
+                const playbackRateAdjustment = playbackSmoothing(deltaTime);
+                const adjustedPlaybackRate = Math.max(0, rate - playbackRateAdjustment);
+                if (this.audioElement.playbackRate !== adjustedPlaybackRate) {
+                    this.audioElement.playbackRate = adjustedPlaybackRate;
+                }
+                break;
+            }
+            default: {
+                // We cannot smoothly recover:
+                //  - We seek just ahead of server time
+                if (this.audioElement.playbackRate !== rate) {
+                    this.audioElement.playbackRate = rate;
+                }
+                // delay to poll until seeked
+                this.delay = 10;
+                this.seekTo(t + rate * (SEEK_LOOKAHEAD_MS / 1000));
+                break;
+            }
+        }
+    }
+    destroy() {
+        if (this.audioElement) {
+            this.audioElement.src = '';
+            this.audioElement.remove();
+        }
+    }
+}

package/dist/state-based/ClipManager.d.ts

@@ -0,0 +1,22 @@
+import { MediaClipState } from '../types/MediaSchema';
+/**
+ * Each instance of a ClipManager is responsible for displaying
+ * an image/audio/video clip in the correct state.
+ */
+export declare abstract class ClipManager<T extends MediaClipState> {
+    private surfaceElement;
+    protected clipElement: HTMLElement;
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: T);
+    /**
+     * This is the delay to be used in the update loop.
+     * It is intended to be dynamic for each loop.
+     */
+    protected delay: number;
+    protected abstract update(): void;
+    abstract destroy(): void;
+    isConnected(element?: HTMLElement): boolean;
+    protected _state: T;
+    setState(newState: T): void;
+    private timeout;
+    private loop;
+}

package/dist/state-based/ClipManager.js

@@ -0,0 +1,55 @@
+const DEFAULT_DELAY = 1_000;
+/**
+ * Each instance of a ClipManager is responsible for displaying
+ * an image/audio/video clip in the correct state.
+ */
+export class ClipManager {
+    surfaceElement;
+    clipElement;
+    constructor(surfaceElement, clipElement, state) {
+        this.surfaceElement = surfaceElement;
+        this.clipElement = clipElement;
+        this._state = state;
+        // Allow the class to be constructed, then call the loop
+        setTimeout(this.loop);
+    }
+    /**
+     * This is the delay to be used in the update loop.
+     * It is intended to be dynamic for each loop.
+     */
+    delay = DEFAULT_DELAY;
+    isConnected(element) {
+        if (!this.surfaceElement) {
+            return false;
+        }
+        if (!this.clipElement) {
+            return false;
+        }
+        if (!this.surfaceElement.contains(this.clipElement)) {
+            return false;
+        }
+        if (element) {
+            if (!this.clipElement.contains(element))
+                return false;
+        }
+        return true;
+    }
+    _state;
+    setState(newState) {
+        this._state = newState;
+        clearTimeout(this.timeout);
+        this.loop();
+    }
+    timeout;
+    loop = async () => {
+        if (this.isConnected()) {
+            this.update();
+            if (isFinite(this.delay)) {
+                this.timeout = setTimeout(this.loop, this.delay);
+            }
+        }
+        else {
+            this.destroy();
+        }
+    };
+}

package/dist/state-based/ImageManager.d.ts

@@ -0,0 +1,9 @@
+import { ImageState } from '../types/MediaSchema';
+import { ClipManager } from './ClipManager';
+export declare class ImageManager extends ClipManager<ImageState> {
+    private imageElement?;
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: ImageState);
+    private updateImageElement;
+    protected update(): void;
+    destroy(): void;
+}

package/dist/state-based/ImageManager.js

@@ -0,0 +1,53 @@
+import { defaultImageOptions } from '../types/MediaSchema';
+import { getStateAtTime } from '../utils/getStateAtTime';
+import { ClipManager } from './ClipManager';
+export class ImageManager extends ClipManager {
+    imageElement;
+    constructor(surfaceElement, clipElement, state) {
+        super(surfaceElement, clipElement, state);
+        this.clipElement = clipElement;
+    }
+    updateImageElement() {
+        this.imageElement = document.createElement('img');
+        this.clipElement.replaceChildren(this.imageElement);
+        this.imageElement.style.position = 'absolute';
+        this.imageElement.style.height = '100%';
+        this.imageElement.style.widows = '100%';
+    }
+    update() {
+        const currentState = getStateAtTime(this._state, Date.now());
+        // Does the <img /> element need adding/removing?
+        if (currentState) {
+            if (!this.imageElement || !this.isConnected(this.imageElement)) {
+                this.updateImageElement();
+            }
+        }
+        else {
+            this.imageElement?.remove();
+            this.imageElement = undefined;
+        }
+        if (!this.imageElement || !currentState)
+            return;
+        // this.imageElement.src will be a fully qualified URL
+        if (!this.imageElement.src.startsWith(this._state.file)) {
+            this.imageElement.src = this._state.file;
+        }
+        if (this.imageElement.style.objectFit !== this._state.fit) {
+            this.imageElement.style.objectFit = this._state.fit;
+        }
+        if (parseFloat(this.imageElement.style.opacity) !== currentState.opacity) {
+            this.imageElement.style.opacity = String(currentState.opacity ?? defaultImageOptions.opacity);
+        }
+        const z = Math.round(currentState.zIndex ?? defaultImageOptions.zIndex);
+        if (parseInt(this.imageElement.style.zIndex) !== z) {
+            this.imageElement.style.zIndex = String(z);
+        }
+        const { opacity } = currentState;
+        if (typeof opacity === 'string' && opacity !== this.imageElement.style.opacity) {
+            this.imageElement.style.opacity = opacity;
+        }
+    }
+    destroy() {
+        this.imageElement?.remove();
+    }
+}

package/dist/state-based/SurfaceManager.d.ts

@@ -0,0 +1,16 @@
+import { MediaSurfaceState } from '../types/MediaSchema';
+export declare const DATA_CLIP_ID = "data-clip-id";
+/**
+ * The SurfaceManager will receive state updates and:
+ * - Ensure that each clip has a parent element
+ * - Instantiate a ClipManager attached to each respective element
+ */
+export declare class SurfaceManager {
+    private _state;
+    setState(newState: MediaSurfaceState): void;
+    private _element;
+    get element(): HTMLDivElement;
+    private resources;
+    constructor(testState?: MediaSurfaceState);
+    update(): void;
+}

package/dist/state-based/SurfaceManager.js

@@ -0,0 +1,80 @@
+import { ImageManager } from './ImageManager';
+import { VideoManager } from './VideoManager';
+import { AudioManager } from './AudioManager';
+export const DATA_CLIP_ID = 'data-clip-id';
+/**
+ * The SurfaceManager will receive state updates and:
+ * - Ensure that each clip has a parent element
+ * - Instantiate a ClipManager attached to each respective element
+ */
+export class SurfaceManager {
+    _state = {};
+    setState(newState) {
+        this._state = newState;
+        this.update();
+    }
+    _element;
+    get element() {
+        return this._element;
+    }
+    resources = {};
+    constructor(testState) {
+        this._element = document.createElement('div');
+        this._element.style.width = '100%';
+        this._element.style.height = '100%';
+        this._state = testState || {};
+        this.update();
+    }
+    update() {
+        // Destroy stale managers
+        Object.entries(this.resources).forEach(([clipId, { element, manager }]) => {
+            if (!(clipId in this._state)) {
+                delete this.resources[clipId];
+                element.remove();
+                manager?.destroy();
+            }
+        });
+        // Create and attach new wrapper elements
+        const elements = Object.keys(this._state)
+            .toSorted()
+            .map((clipId) => {
+            const resource = this.resources[clipId];
+            if (resource) {
+                return resource.element;
+            }
+            else {
+                const element = document.createElement('div');
+                element.setAttribute(DATA_CLIP_ID, clipId);
+                this.resources[clipId] = { element };
+                return element;
+            }
+        });
+        this._element.replaceChildren(...elements);
+        // Create new managers
+        Object.keys(this._state)
+            .toSorted()
+            .forEach((clipId) => {
+            const clip = this._state[clipId];
+            const resource = this.resources[clipId];
+            if (!resource) {
+                throw new Error('Failed to create resource');
+            }
+            if (!resource.manager) {
+                switch (clip.type) {
+                    case 'image':
+                        resource.manager = new ImageManager(this._element, resource.element, clip);
+                        break;
+                    case 'audio':
+                        resource.manager = new AudioManager(this._element, resource.element, clip);
+                        break;
+                    case 'video':
+                        resource.manager = new VideoManager(this._element, resource.element, clip);
+                        break;
+                }
+            }
+            else {
+                resource.manager.setState(clip);
+            }
+        });
+    }
+}

package/dist/state-based/VideoManager.d.ts

@@ -0,0 +1,17 @@
+import { VideoState } from '../types/MediaSchema';
+import { ClipManager } from './ClipManager';
+export declare class VideoManager extends ClipManager<VideoState> {
+    private videoElement?;
+    private isSeeking;
+    private timeToIntercept;
+    constructor(surfaceElement: HTMLElement, clipElement: HTMLElement, state: VideoState);
+    private updateVideoElement;
+    private get videoDuration();
+    /**
+     * Helper function to seek to a specified time.
+     * Works with the update loop to poll until seeked event has fired.
+     */
+    private seekTo;
+    protected update(): void;
+    destroy(): void;
+}

package/dist/state-based/VideoManager.js

@@ -0,0 +1,212 @@
+import { defaultVideoOptions } from '../types/MediaSchema';
+import { getStateAtTime } from '../utils/getStateAtTime';
+import { ClipManager } from './ClipManager';
+const DEFAULT_VIDEO_POLLING_MS = 1_000;
+const TARGET_SYNC_THRESHOLD_MS = 10; // If we're closer than this we're good enough
+const MAX_SYNC_THRESHOLD_MS = 1_000; // If we're further away than this, we'll seek instead
+const SEEK_LOOKAHEAD_MS = 200; // We won't seek ahead instantly, so lets seek ahead
+const MAX_PLAYBACK_RATE_ADJUSTMENT = 0.15; // Don't speed up or slow down the video more than this
+const INTERCEPTION_EARLY_CHECK_IN = 0.7; // When on course for interception of server time, how early to check in beforehand.
+// We smoothly ramp playbackRate up and down
+const PLAYBACK_ADJUSTMENT_SMOOTHING = 0.3;
+function playbackSmoothing(deltaTime) {
+    return -Math.sign(deltaTime) * Math.pow(Math.abs(deltaTime) / MAX_SYNC_THRESHOLD_MS, PLAYBACK_ADJUSTMENT_SMOOTHING) * MAX_PLAYBACK_RATE_ADJUSTMENT;
+}
+// If we notice that at the end of the current playback, we set t=0 we should loop
+const LOOPING_EPSILON_MS = 5;
+function isLooping(state, time, duration) {
+    const currentState = getStateAtTime(state, time);
+    if (!currentState)
+        return false;
+    const { t, rate } = currentState;
+    if (t === undefined || rate === undefined)
+        return false;
+    const nextTemporalKeyframe = state.keyframes.filter(([t, kf]) => t > time && (kf?.set?.t !== undefined || kf?.set?.rate !== undefined))[0];
+    if (nextTemporalKeyframe?.[1]?.set?.t !== 0)
+        return false;
+    const timeRemaining = (duration - t) / rate;
+    const timeUntilKeyframe = nextTemporalKeyframe[0] - time;
+    return Math.abs(timeRemaining - timeUntilKeyframe) <= LOOPING_EPSILON_MS;
+}
+export class VideoManager extends ClipManager {
+    videoElement;
+    // We seek to another part of the video and do nothing until we get there
+    isSeeking = false;
+    // We change playbackRate to intercept the server time of the video and don't change course until we intercept
+    timeToIntercept = undefined;
+    constructor(surfaceElement, clipElement, state) {
+        super(surfaceElement, clipElement, state);
+        this.clipElement = clipElement;
+    }
+    updateVideoElement() {
+        this.destroy();
+        this.videoElement = document.createElement('video');
+        this.clipElement.replaceChildren(this.videoElement);
+        this.videoElement.style.position = 'absolute';
+        this.videoElement.style.width = '100%';
+        this.videoElement.style.height = '100%';
+    }
+    get videoDuration() {
+        if (!this.videoElement)
+            return undefined;
+        if (this.videoElement.readyState < HTMLMediaElement.HAVE_METADATA)
+            return undefined;
+        return this.videoElement.duration * 1000;
+    }
+    /**
+     * Helper function to seek to a specified time.
+     * Works with the update loop to poll until seeked event has fired.
+     */
+    seekTo(time) {
+        if (!this.videoElement)
+            return;
+        this.videoElement.addEventListener('seeked', () => {
+            console.debug('seeked');
+            this.isSeeking = false;
+        }, { once: true, passive: true });
+        this.videoElement.currentTime = time / 1_000;
+    }
+    update() {
+        // Update loop used to poll until seek finished
+        if (this.isSeeking)
+            return;
+        // Does the <video /> element need adding/removing?
+        const now = Date.now();
+        const currentState = getStateAtTime(this._state, now);
+        if (currentState) {
+            if (!this.videoElement || !this.isConnected(this.videoElement)) {
+                this.updateVideoElement();
+            }
+        }
+        else {
+            this.videoElement?.remove();
+            this.videoElement = undefined;
+        }
+        if (!currentState || !this.videoElement)
+            return;
+        const { t, rate, volume } = { ...defaultVideoOptions, ...currentState };
+        // this.videoElement.src will be a fully qualified URL
+        if (!this.videoElement.src.endsWith(this._state.file)) {
+            this.videoElement.src = this._state.file;
+        }
+        if (this.videoElement.style.objectFit !== this._state.fit) {
+            this.videoElement.style.objectFit = this._state.fit;
+        }
+        if (parseFloat(this.videoElement.style.opacity) !== currentState.opacity) {
+            this.videoElement.style.opacity = String(currentState.opacity ?? defaultVideoOptions.opacity);
+        }
+        const z = Math.round(currentState.zIndex ?? defaultVideoOptions.zIndex);
+        if (parseInt(this.videoElement.style.zIndex) !== z) {
+            this.videoElement.style.zIndex = String(z);
+        }
+        if (this.videoElement.volume !== volume) {
+            this.videoElement.volume = volume;
+        }
+        const duration = this.videoDuration;
+        if (duration !== undefined) {
+            // Is the video looping?
+            if (isLooping(this._state, now, duration)) {
+                if (!this.videoElement.loop) {
+                    console.debug('starting loop');
+                    this.videoElement.loop = true;
+                }
+            }
+            else {
+                if (this.videoElement.loop) {
+                    console.debug('stopping loop');
+                    this.videoElement.loop = false;
+                }
+                // Has the video finished
+                if (t > duration) {
+                    console.debug('ended');
+                    this.delay = Infinity;
+                    return;
+                }
+            }
+        }
+        // Should the video be playing
+        if (this.videoElement.paused && rate > 0) {
+            if (duration === undefined || duration > t) {
+                this.videoElement.play().catch(() => {
+                    // Do nothing - this will be retried in the next loop
+                });
+            }
+        }
+        const currentTime = this.videoElement.currentTime * 1000;
+        const deltaTime = currentTime - t;
+        const deltaTimeAbs = Math.abs(deltaTime);
+        // Handle current playbackRateAdjustment
+        if (this.timeToIntercept !== undefined) {
+            if (deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS) {
+                // We've successfully got back on track
+                console.log('intercepted', `${deltaTime.toFixed(0)}ms`);
+                this.timeToIntercept = undefined;
+            }
+            else {
+                const newTimeToIntercept = deltaTime / (rate - this.videoElement.playbackRate);
+                if (newTimeToIntercept < this.timeToIntercept && newTimeToIntercept > 0) {
+                    // We're getting there, let's stay on course
+                    console.debug(`intercepting ${newTimeToIntercept.toFixed(0)}ms`, `${deltaTime.toFixed(0)}ms`);
+                    this.timeToIntercept = newTimeToIntercept;
+                }
+                else {
+                    // We've gone too far
+                    console.debug('missed intercept', deltaTime, this.timeToIntercept, newTimeToIntercept);
+                    this.timeToIntercept = undefined;
+                }
+            }
+        }
+        switch (true) {
+            case deltaTimeAbs <= TARGET_SYNC_THRESHOLD_MS: {
+                // We are on course:
+                //   - The video is within accepted latency of the server time
+                //   - The playback rate is aligned with the server rate
+                console.debug(`${rate}x`, deltaTime.toFixed(0));
+                this.timeToIntercept = undefined;
+                if (this.videoElement.playbackRate !== rate) {
+                    this.videoElement.playbackRate = rate;
+                }
+                this.delay = DEFAULT_VIDEO_POLLING_MS;
+                break;
+            }
+            case this.timeToIntercept !== undefined:
+                // We are currently on course to intercept
+                //   - We don't want to adjust the playbackRate excessively to pop audio
+                //   - We are on track to get back on time.  So we can wait.
+                this.delay = this.timeToIntercept * INTERCEPTION_EARLY_CHECK_IN;
+                break;
+            case rate > 0 && deltaTimeAbs > TARGET_SYNC_THRESHOLD_MS && deltaTimeAbs <= MAX_SYNC_THRESHOLD_MS && this.timeToIntercept === undefined: {
+                // We are close, we can smoothly adjust with playbackRate:
+                //  - The video must be playing
+                //  - We must be close in time to the server time
+                const playbackRateAdjustment = playbackSmoothing(deltaTime);
+                const adjustedPlaybackRate = Math.max(0, rate + playbackRateAdjustment);
+                this.timeToIntercept = deltaTime / (rate - adjustedPlaybackRate);
+                console.debug(`${adjustedPlaybackRate.toFixed(2)}x`, `${deltaTime.toFixed(0)}ms`);
+                if (this.videoElement.playbackRate !== adjustedPlaybackRate) {
+                    this.videoElement.playbackRate = adjustedPlaybackRate;
+                }
+                this.delay = this.timeToIntercept * INTERCEPTION_EARLY_CHECK_IN;
+                break;
+            }
+            default: {
+                // We cannot smoothly recover:
+                //  - We seek just ahead of server time
+                if (this.videoElement.playbackRate !== rate) {
+                    this.videoElement.playbackRate = rate;
+                }
+                // delay to poll until seeked
+                console.debug('seeking');
+                this.delay = 10;
+                this.seekTo(t + rate * SEEK_LOOKAHEAD_MS);
+                break;
+            }
+        }
+    }
+    destroy() {
+        if (this.videoElement) {
+            this.videoElement.src = '';
+            this.videoElement.remove();
+        }
+    }
+}

package/dist/utils/getStateAtTime.js

@@ -47,11 +47,11 @@ export function getPropertiesAtTime(keyframes, time) {
             // If lerp and set are both present, we assume we lerp up until the timestamp,
             // then set to a new value
             Object.entries(properties.lerp ?? {}).forEach(([property, value]) => {
-                propertyKeyframes[property] ?? (propertyKeyframes[property] = {});
+                propertyKeyframes[property] ??= {};
                 propertyKeyframes[property].before = [timestamp, value];
             });
             Object.entries(properties.set ?? {}).forEach(([property, value]) => {
-                propertyKeyframes[property] ?? (propertyKeyframes[property] = {});
+                propertyKeyframes[property] ??= {};
                 propertyKeyframes[property].before = [timestamp, value];
             });
         }
@@ -59,7 +59,7 @@ export function getPropertiesAtTime(keyframes, time) {
             // We're trying to find the closest timestamp afterwards for lerping
             // So only set if not yet set
             Object.entries(properties.lerp ?? {}).forEach(([property, value]) => {
-                propertyKeyframes[property] ?? (propertyKeyframes[property] = {});
+                propertyKeyframes[property] ??= {};
                 if (propertyKeyframes[property].after === undefined) {
                     propertyKeyframes[property].after = [timestamp, value];
                 }