timingsrc 1.1.17

package/src/factories/set-playback-rate.ts

@@ -0,0 +1,18 @@
+import { TSetPlaybackRateFactory } from '../types';
+
+export const createSetPlaybackRate: TSetPlaybackRateFactory = (playbackRateAssignments) => {
+    return (mediaElement, previousValue, nextValue) => {
+        const playbackRateAssignment = playbackRateAssignments.get(mediaElement);
+
+        if (
+            playbackRateAssignment === undefined ||
+            playbackRateAssignment[0] !== previousValue ||
+            playbackRateAssignment[1] !== nextValue
+        ) {
+            // There is currently a bug in Firefox which causes problems when switching back to a playbackRate of exactly 1.
+            mediaElement.playbackRate = nextValue === 1 ? (previousValue > 1 ? 1.00001 : 0.99999) : nextValue;
+
+            playbackRateAssignments.set(mediaElement, [mediaElement.playbackRate, nextValue]);
+        }
+    };
+};

package/src/factories/set-timingsrc-with-custom-update-function.ts

@@ -0,0 +1,19 @@
+import { TSetTimingsrcWithCustomUpdateFunctionFactory } from '../types';
+
+export const createSetTimingsrcWithCustomUpdateFunction: TSetTimingsrcWithCustomUpdateFunctionFactory = (
+    animationFrame,
+    updateMediaElement
+) => {
+    return (mediaElement, timingObject, updateFunction, prepareTimingStateVector = null) =>
+        animationFrame()(() => {
+            const { currentTime, duration, playbackRate } = mediaElement;
+            const timingStateVector = timingObject.query();
+            const { position, velocity } = updateFunction(
+                prepareTimingStateVector === null ? timingStateVector : prepareTimingStateVector(timingStateVector),
+                currentTime
+            );
+            const sanitizedDuration = typeof duration === 'number' && !isNaN(duration) ? duration : 0;
+
+            updateMediaElement(currentTime, sanitizedDuration, mediaElement, playbackRate, position, velocity);
+        });
+};

package/src/factories/set-timingsrc.ts

@@ -0,0 +1,6 @@
+import { TSetTimingsrcFactory } from '../types';
+
+export const createSetTimingsrc: TSetTimingsrcFactory = (setTimingsrcWithCustomUpdateFunction, update) => {
+    return (mediaElement, timingObject, prepareTimingStateVector = null) =>
+        setTimingsrcWithCustomUpdateFunction(mediaElement, timingObject, update, prepareTimingStateVector);
+};

package/src/factories/update-gradually.ts

@@ -0,0 +1,22 @@
+import { TUpdateGraduallyFactory } from '../types';
+
+export const createUpdateGradually: TUpdateGraduallyFactory = (timeConstant, threshold, tolerance) => {
+    return ({ position, velocity }, currentTime) => {
+        if (position < 0 || velocity === 0) {
+            return { position, velocity };
+        }
+
+        const positionDifference = currentTime - position;
+        const absolutePositionDifference = Math.abs(positionDifference);
+
+        if (absolutePositionDifference > threshold) {
+            return { position, velocity };
+        }
+
+        if (absolutePositionDifference > tolerance) {
+            return { position: currentTime, velocity: ((timeConstant - positionDifference) / timeConstant) * velocity };
+        }
+
+        return { position: currentTime, velocity };
+    };
+};

package/src/factories/update-media-element.ts

@@ -0,0 +1,38 @@
+import { TUpdateMediaElementFactory } from '../types';
+
+export const createUpdateMediaElement: TUpdateMediaElementFactory = (pause, play, setCurrentTime, setPlaybackRate) => {
+    return (currentTime, duration, mediaElement, playbackRate, position, velocity) => {
+        if (position < 0) {
+            if (currentTime > 0) {
+                setCurrentTime(mediaElement, currentTime, 0);
+            }
+
+            pause(mediaElement);
+        } else if (position >= duration) {
+            if (currentTime !== duration) {
+                setCurrentTime(mediaElement, currentTime, duration);
+            }
+
+            pause(mediaElement);
+        } else if (currentTime !== position) {
+            setCurrentTime(mediaElement, currentTime, position);
+
+            if (velocity !== 0) {
+                if (playbackRate !== velocity) {
+                    setPlaybackRate(mediaElement, playbackRate, velocity);
+                }
+
+                play(mediaElement);
+            } else {
+                pause(mediaElement);
+            }
+        } else if (playbackRate !== velocity) {
+            if (velocity !== 0) {
+                setPlaybackRate(mediaElement, playbackRate, velocity);
+                play(mediaElement);
+            } else {
+                pause(mediaElement);
+            }
+        }
+    };
+};

package/src/factories/update-stepwise-factory.ts

@@ -0,0 +1,51 @@
+import { TUpdateStepwiseFactoryFactory } from '../types';
+
+export const createUpdateStepwiseFactory: TUpdateStepwiseFactoryFactory = (translateTimingStateVector) => {
+    return (tolerance) => {
+        let lastMotionUpdate: null | { position: number; timestamp: number; velocity: number } = null;
+        let mediaElementDelay = 0;
+
+        return (timingStateVector, currentTime) => {
+            if (timingStateVector.position < 0 || timingStateVector.velocity === 0) {
+                lastMotionUpdate = null;
+
+                return { position: timingStateVector.position, velocity: timingStateVector.velocity };
+            }
+
+            if (lastMotionUpdate !== null) {
+                const playheadDifference = Math.abs(currentTime - lastMotionUpdate.position);
+
+                // Check if at least 10ms were played since the last motion update.
+                if (playheadDifference < 0.01) {
+                    return { position: currentTime, velocity: lastMotionUpdate.velocity };
+                }
+            }
+
+            const positionDifference = Math.abs(currentTime - timingStateVector.position);
+
+            if (positionDifference > tolerance) {
+                if (lastMotionUpdate !== null) {
+                    const elapsedTime = timingStateVector.timestamp - lastMotionUpdate.timestamp;
+
+                    const { position } = translateTimingStateVector({ acceleration: 0, ...lastMotionUpdate }, elapsedTime);
+
+                    mediaElementDelay = position - currentTime;
+                }
+
+                const positioWithDelay = timingStateVector.position + mediaElementDelay;
+
+                lastMotionUpdate = {
+                    position: positioWithDelay,
+                    timestamp: timingStateVector.timestamp,
+                    velocity: timingStateVector.velocity
+                };
+
+                return { position: positioWithDelay, velocity: timingStateVector.velocity };
+            }
+
+            lastMotionUpdate = null;
+
+            return { position: currentTime, velocity: timingStateVector.velocity };
+        };
+    };
+};

package/src/factories/window.ts

@@ -0,0 +1,3 @@
+import { TWindowFactory } from '../types';
+
+export const createWindow: TWindowFactory = () => (typeof window === 'undefined' ? null : window);

package/src/functions/pause.ts

@@ -0,0 +1,5 @@
+export const pause = (mediaElement: HTMLMediaElement) => {
+    if (!mediaElement.paused) {
+        mediaElement.pause();
+    }
+};

package/src/functions/play.ts

@@ -0,0 +1,5 @@
+export const play = (mediaElement: HTMLMediaElement) => {
+    if (mediaElement.paused) {
+        mediaElement.play().catch((err) => console.error(err)); // tslint:disable-line no-console
+    }
+};

package/src/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './update-vector';

package/src/interfaces/update-vector.ts

@@ -0,0 +1,5 @@
+export interface IUpdateVector {
+    position: number;
+
+    velocity: number;
+}

package/src/module.ts

@@ -0,0 +1,31 @@
+import { animationFrame } from 'subscribable-things';
+import { translateTimingStateVector } from 'timing-object';
+import { createDefaultSetTimingsrc } from './factories/default-set-timingsrc';
+import { createSetCurrentTime } from './factories/set-current-time';
+import { createSetPlaybackRate } from './factories/set-playback-rate';
+import { createSetTimingsrc } from './factories/set-timingsrc';
+import { createSetTimingsrcWithCustomUpdateFunction } from './factories/set-timingsrc-with-custom-update-function';
+import { createUpdateGradually } from './factories/update-gradually';
+import { createUpdateMediaElement } from './factories/update-media-element';
+import { createUpdateStepwiseFactory } from './factories/update-stepwise-factory';
+import { createWindow } from './factories/window';
+import { pause } from './functions/pause';
+import { play } from './functions/play';
+
+export { createSetTimingsrc };
+
+export { createUpdateGradually };
+
+export const createUpdateStepwise = createUpdateStepwiseFactory(translateTimingStateVector);
+
+const updateMediaElement = createUpdateMediaElement(pause, play, createSetCurrentTime(new WeakMap()), createSetPlaybackRate(new WeakMap()));
+
+export const setTimingsrcWithCustomUpdateFunction = createSetTimingsrcWithCustomUpdateFunction(animationFrame, updateMediaElement);
+
+export const setTimingsrc = createDefaultSetTimingsrc(
+    createSetTimingsrc,
+    createUpdateGradually,
+    createUpdateStepwise,
+    setTimingsrcWithCustomUpdateFunction,
+    createWindow()
+);

package/src/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "isolatedModules": true
+    },
+    "extends": "tsconfig-holy-grail/src/tsconfig-browser"
+}

package/src/types/default-timingsrc-factory.ts

@@ -0,0 +1,13 @@
+import { TSetTimingsrcFactory } from './set-timingsrc-factory';
+import { TSetTimingsrcFunction } from './set-timingsrc-function';
+import { TSetTimingsrcWithCustomUpdateFunctionFunction } from './set-timingsrc-with-custom-update-function-function';
+import { TUpdateGraduallyFactory } from './update-gradually-factory';
+import { TUpdateStepwiseFactory } from './update-stepwise-factory';
+
+export type TDefaultSetTimingsrcFactory = (
+    createSetTimingsrc: TSetTimingsrcFactory,
+    createUpdateGradually: TUpdateGraduallyFactory,
+    createUpdateStepwise: TUpdateStepwiseFactory,
+    setTimingsrcWithCustomUpdateFunction: TSetTimingsrcWithCustomUpdateFunctionFunction,
+    window: null | Window
+) => TSetTimingsrcFunction;

package/src/types/index.ts

@@ -0,0 +1,18 @@
+export * from './default-timingsrc-factory';
+export * from './pause-function';
+export * from './play-function';
+export * from './prepare-timing-state-vector-function';
+export * from './set-current-time-factory';
+export * from './set-current-time-function';
+export * from './set-playback-rate-factory';
+export * from './set-playback-rate-function';
+export * from './set-timingsrc-factory';
+export * from './set-timingsrc-function';
+export * from './set-timingsrc-with-custom-update-function-factory';
+export * from './set-timingsrc-with-custom-update-function-function';
+export * from './update-function';
+export * from './update-gradually-factory';
+export * from './update-media-element-factory';
+export * from './update-stepwise-factory';
+export * from './update-stepwise-factory-factory';
+export * from './window-factory';

package/src/types/pause-function.ts

@@ -0,0 +1 @@
+export type TPauseFunction = (mediaElement: HTMLMediaElement) => void;

package/src/types/play-function.ts

@@ -0,0 +1 @@
+export type TPlayFunction = (mediaElement: HTMLMediaElement) => void;

package/src/types/prepare-timing-state-vector-function.ts

@@ -0,0 +1,3 @@
+import { ITimingStateVector } from 'timing-object';
+
+export type TPrepareTimingStateVectorFunction = (timingStateVector: ITimingStateVector) => ITimingStateVector;

package/src/types/set-current-time-factory.ts

@@ -0,0 +1,3 @@
+import { TSetCurrentTimeFunction } from './set-current-time-function';
+
+export type TSetCurrentTimeFactory = (currentTimeAssignments: WeakMap<HTMLMediaElement, [number, number]>) => TSetCurrentTimeFunction;

package/src/types/set-current-time-function.ts

@@ -0,0 +1 @@
+export type TSetCurrentTimeFunction = (mediaElement: HTMLMediaElement, currentValue: number, nextValue: number) => void;

package/src/types/set-playback-rate-factory.ts

@@ -0,0 +1,3 @@
+import { TSetPlaybackRateFunction } from './set-playback-rate-function';
+
+export type TSetPlaybackRateFactory = (playbackRateAssignments: WeakMap<HTMLMediaElement, [number, number]>) => TSetPlaybackRateFunction;

package/src/types/set-playback-rate-function.ts

@@ -0,0 +1 @@
+export type TSetPlaybackRateFunction = (mediaElement: HTMLMediaElement, currentValue: number, nextValue: number) => void;

package/src/types/set-timingsrc-factory.ts

@@ -0,0 +1,8 @@
+import { TSetTimingsrcFunction } from './set-timingsrc-function';
+import { TSetTimingsrcWithCustomUpdateFunctionFunction } from './set-timingsrc-with-custom-update-function-function';
+import { TUpdateFunction } from './update-function';
+
+export type TSetTimingsrcFactory = (
+    setTimingsrcWithCustomUpdateFunction: TSetTimingsrcWithCustomUpdateFunctionFunction,
+    update: TUpdateFunction
+) => TSetTimingsrcFunction;

package/src/types/set-timingsrc-function.ts

@@ -0,0 +1,8 @@
+import { ITimingObject } from 'timing-object';
+import { TPrepareTimingStateVectorFunction } from './prepare-timing-state-vector-function';
+
+export type TSetTimingsrcFunction = (
+    mediaElement: HTMLMediaElement,
+    timingObject: ITimingObject,
+    prepareTimingStateVector?: null | TPrepareTimingStateVectorFunction
+) => () => void;

package/src/types/set-timingsrc-with-custom-update-function-factory.ts

@@ -0,0 +1,8 @@
+import { TAnimationFrameFunction } from 'subscribable-things';
+import { TSetTimingsrcWithCustomUpdateFunctionFunction } from './set-timingsrc-with-custom-update-function-function';
+import { TUpdateMediaElementFunction } from './update-media-element-function';
+
+export type TSetTimingsrcWithCustomUpdateFunctionFactory = (
+    animationFrame: TAnimationFrameFunction,
+    updateMediaElement: TUpdateMediaElementFunction
+) => TSetTimingsrcWithCustomUpdateFunctionFunction;

package/src/types/set-timingsrc-with-custom-update-function-function.ts

@@ -0,0 +1,10 @@
+import { ITimingObject } from 'timing-object';
+import { TPrepareTimingStateVectorFunction } from './prepare-timing-state-vector-function';
+import { TUpdateFunction } from './update-function';
+
+export type TSetTimingsrcWithCustomUpdateFunctionFunction = (
+    mediaElement: HTMLMediaElement,
+    timingObject: ITimingObject,
+    updateFunction: TUpdateFunction,
+    prepareTimingStateVector?: null | TPrepareTimingStateVectorFunction
+) => () => void;

package/src/types/update-function.ts

@@ -0,0 +1,4 @@
+import { ITimingStateVector } from 'timing-object';
+import { IUpdateVector } from '../interfaces';
+
+export type TUpdateFunction = (timingStateVector: ITimingStateVector, currentTime: number) => IUpdateVector;

package/src/types/update-gradually-factory.ts

@@ -0,0 +1,3 @@
+import { TUpdateFunction } from './update-function';
+
+export type TUpdateGraduallyFactory = (timeConstant: number, threshold: number, tolerance: number) => TUpdateFunction;

package/src/types/update-media-element-factory.ts

@@ -0,0 +1,12 @@
+import { TPauseFunction } from './pause-function';
+import { TPlayFunction } from './play-function';
+import { TSetCurrentTimeFunction } from './set-current-time-function';
+import { TSetPlaybackRateFunction } from './set-playback-rate-function';
+import { TUpdateMediaElementFunction } from './update-media-element-function';
+
+export type TUpdateMediaElementFactory = (
+    pause: TPauseFunction,
+    play: TPlayFunction,
+    setCurrentTime: TSetCurrentTimeFunction,
+    setPlaybackRate: TSetPlaybackRateFunction
+) => TUpdateMediaElementFunction;

package/src/types/update-media-element-function.ts

@@ -0,0 +1,8 @@
+export type TUpdateMediaElementFunction = (
+    currentTime: number,
+    duration: number,
+    mediaElement: HTMLMediaElement,
+    playbackRate: number,
+    position: number,
+    velocity: number
+) => void;

package/src/types/update-stepwise-factory-factory.ts

@@ -0,0 +1,4 @@
+import { TTranslateTimingStateVectorFunction } from 'timing-object';
+import { TUpdateStepwiseFactory } from './update-stepwise-factory';
+
+export type TUpdateStepwiseFactoryFactory = (translateTimingStateVector: TTranslateTimingStateVectorFunction) => TUpdateStepwiseFactory;

package/src/types/update-stepwise-factory.ts

@@ -0,0 +1,3 @@
+import { TUpdateFunction } from './update-function';
+
+export type TUpdateStepwiseFactory = (tolerance: number) => TUpdateFunction;

package/src/types/window-factory.ts

@@ -0,0 +1 @@
+export type TWindowFactory = () => null | Window;