timingsrc 1.1.29 → 1.2.2

package/build/es2019/factories/set-timingsrc-with-custom-update-function.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"set-timingsrc-with-custom-update-function.d.ts","sourceRoot":"","sources":["../../../src/factories/set-timingsrc-with-custom-update-function.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4CAA4C,EAAE,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,0CAA0C,EAAE,4CAgBxD,CAAC"}
+{"version":3,"file":"set-timingsrc-with-custom-update-function.d.ts","sourceRoot":"","sources":["../../../src/factories/set-timingsrc-with-custom-update-function.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4CAA4C,EAAE,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,0CAA0C,EAAE,4CAiCxD,CAAC"}

package/build/es2019/factories/set-timingsrc-with-custom-update-function.js

@@ -1,10 +1,21 @@
-export const createSetTimingsrcWithCustomUpdateFunction = (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);
-    });
+export const createSetTimingsrcWithCustomUpdateFunction = (animationFrame, document, on, updateMediaElement) => {
+    return (mediaElement, timingObject, updateFunction, prepareTimingStateVector = null) => {
+        const update = () => {
+            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);
+        };
+        const unsubscribeFunctions = [
+            animationFrame()(() => update()),
+            on(timingObject, 'change')(() => {
+                if (document.visibilityState === 'hidden') {
+                    update();
+                }
+            })
+        ];
+        return () => unsubscribeFunctions.forEach((unsubscribe) => unsubscribe());
+    };
 };
 //# sourceMappingURL=set-timingsrc-with-custom-update-function.js.map

package/build/es2019/factories/set-timingsrc-with-custom-update-function.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-timingsrc-with-custom-update-function.js","sourceRoot":"","sources":["../../../src/factories/set-timingsrc-with-custom-update-function.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,0CAA0C,GAAiD,CACpG,cAAc,EACd,kBAAkB,EACpB,EAAE;IACA,OAAO,CAAC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,wBAAwB,GAAG,IAAI,EAAE,EAAE,CACnF,cAAc,EAAE,CAAC,GAAG,EAAE;QAClB,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC;QAC7D,MAAM,iBAAiB,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;QAC/C,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CACzC,wBAAwB,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,EACnG,WAAW,CACd,CAAC;QACF,MAAM,iBAAiB,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1F,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACvG,CAAC,CAAC,CAAC;AACX,CAAC,CAAC"}
+{"version":3,"file":"set-timingsrc-with-custom-update-function.js","sourceRoot":"","sources":["../../../src/factories/set-timingsrc-with-custom-update-function.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,0CAA0C,GAAiD,CACpG,cAAc,EACd,QAAQ,EACR,EAAE,EACF,kBAAkB,EACpB,EAAE;IACA,OAAO,CAAC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,wBAAwB,GAAG,IAAI,EAAE,EAAE;QACnF,MAAM,MAAM,GAAG,GAAG,EAAE;YAChB,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC;YAC7D,MAAM,iBAAiB,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;YAC/C,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CACzC,wBAAwB,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,EACnG,WAAW,CACd,CAAC;YACF,MAAM,iBAAiB,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YAE1F,kBAAkB,CAAC,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACvG,CAAC,CAAC;QAEF,MAAM,oBAAoB,GAAG;YACzB,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;YAChC,EAAE,CACE,YAAY,EACZ,QAAQ,CACX,CAAC,GAAG,EAAE;gBACH,IAAI,QAAQ,CAAC,eAAe,KAAK,QAAQ,EAAE;oBACvC,MAAM,EAAE,CAAC;iBACZ;YACL,CAAC,CAAC;SACL,CAAC;QAEF,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9E,CAAC,CAAC;AACN,CAAC,CAAC"}

package/build/es2019/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/module.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAOrE,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,eAAO,MAAM,oBAAoB,0CAA0D,CAAC;AAI5F,eAAO,MAAM,oCAAoC,iEAAiF,CAAC;AAEnI,eAAO,MAAM,YAAY,yCAMxB,CAAC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/module.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAOrE,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,eAAO,MAAM,oBAAoB,0CAA0D,CAAC;AAI5F,eAAO,MAAM,oCAAoC,iEAKhD,CAAC;AAEF,eAAO,MAAM,YAAY,yCAMxB,CAAC"}

package/build/es2019/module.js

@@ -1,4 +1,4 @@
-import { animationFrame } from 'subscribable-things';
+import { animationFrame, on } from 'subscribable-things';
 import { translateTimingStateVector } from 'timing-object';
 import { createDefaultSetTimingsrc } from './factories/default-set-timingsrc';
 import { createSetCurrentTime } from './factories/set-current-time';
@@ -15,6 +15,6 @@ 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 setTimingsrcWithCustomUpdateFunction = createSetTimingsrcWithCustomUpdateFunction(animationFrame, document, on, updateMediaElement);
 export const setTimingsrc = createDefaultSetTimingsrc(createSetTimingsrc, createUpdateGradually, createUpdateStepwise, setTimingsrcWithCustomUpdateFunction, createWindow());
 //# sourceMappingURL=module.js.map

package/build/es2019/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,0CAA0C,EAAE,MAAM,uDAAuD,CAAC;AACnH,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,0BAA0B,CAAC,CAAC;AAE5F,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,KAAK,EAAE,IAAI,EAAE,oBAAoB,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,qBAAqB,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC;AAE5I,MAAM,CAAC,MAAM,oCAAoC,GAAG,0CAA0C,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;AAEnI,MAAM,CAAC,MAAM,YAAY,GAAG,yBAAyB,CACjD,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,oCAAoC,EACpC,YAAY,EAAE,CACjB,CAAC"}
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,0CAA0C,EAAE,MAAM,uDAAuD,CAAC;AACnH,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,0BAA0B,CAAC,CAAC;AAE5F,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,KAAK,EAAE,IAAI,EAAE,oBAAoB,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,qBAAqB,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC;AAE5I,MAAM,CAAC,MAAM,oCAAoC,GAAG,0CAA0C,CAC1F,cAAc,EACd,QAAQ,EACR,EAAE,EACF,kBAAkB,CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,yBAAyB,CACjD,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,oCAAoC,EACpC,YAAY,EAAE,CACjB,CAAC"}

package/build/es2019/types/set-timingsrc-with-custom-update-function-factory.d.ts

@@ -1,5 +1,5 @@
-import { TAnimationFrameFunction } from 'subscribable-things';
+import { TAnimationFrameFunction, TOnFunction } from 'subscribable-things';
 import { TSetTimingsrcWithCustomUpdateFunctionFunction } from './set-timingsrc-with-custom-update-function-function';
 import { TUpdateMediaElementFunction } from './update-media-element-function';
-export declare type TSetTimingsrcWithCustomUpdateFunctionFactory = (animationFrame: TAnimationFrameFunction, updateMediaElement: TUpdateMediaElementFunction) => TSetTimingsrcWithCustomUpdateFunctionFunction;
+export declare type TSetTimingsrcWithCustomUpdateFunctionFactory = (animationFrame: TAnimationFrameFunction, document: Document, on: TOnFunction, updateMediaElement: TUpdateMediaElementFunction) => TSetTimingsrcWithCustomUpdateFunctionFunction;
 //# sourceMappingURL=set-timingsrc-with-custom-update-function-factory.d.ts.map

package/build/es2019/types/set-timingsrc-with-custom-update-function-factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"set-timingsrc-with-custom-update-function-factory.d.ts","sourceRoot":"","sources":["../../../src/types/set-timingsrc-with-custom-update-function-factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,6CAA6C,EAAE,MAAM,sDAAsD,CAAC;AACrH,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,oBAAY,4CAA4C,GAAG,CACvD,cAAc,EAAE,uBAAuB,EACvC,kBAAkB,EAAE,2BAA2B,KAC9C,6CAA6C,CAAC"}
+{"version":3,"file":"set-timingsrc-with-custom-update-function-factory.d.ts","sourceRoot":"","sources":["../../../src/types/set-timingsrc-with-custom-update-function-factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,6CAA6C,EAAE,MAAM,sDAAsD,CAAC;AACrH,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,oBAAY,4CAA4C,GAAG,CACvD,cAAc,EAAE,uBAAuB,EACvC,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,kBAAkB,EAAE,2BAA2B,KAC9C,6CAA6C,CAAC"}

package/build/es5/bundle.js

@@ -47,10 +47,11 @@
       };
     };
 
-    var createSetTimingsrcWithCustomUpdateFunction = function createSetTimingsrcWithCustomUpdateFunction(animationFrame, updateMediaElement) {
+    var createSetTimingsrcWithCustomUpdateFunction = function createSetTimingsrcWithCustomUpdateFunction(animationFrame, document, on, updateMediaElement) {
       return function (mediaElement, timingObject, updateFunction) {
         var prepareTimingStateVector = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-        return animationFrame()(function () {
+
+        var update = function update() {
           var currentTime = mediaElement.currentTime,
               duration = mediaElement.duration,
               playbackRate = mediaElement.playbackRate;
@@ -62,7 +63,20 @@
 
           var sanitizedDuration = typeof duration === 'number' && !isNaN(duration) ? duration : 0;
           updateMediaElement(currentTime, sanitizedDuration, mediaElement, playbackRate, position, velocity);
-        });
+        };
+
+        var unsubscribeFunctions = [animationFrame()(function () {
+          return update();
+        }), on(timingObject, 'change')(function () {
+          if (document.visibilityState === 'hidden') {
+            update();
+          }
+        })];
+        return function () {
+          return unsubscribeFunctions.forEach(function (unsubscribe) {
+            return unsubscribe();
+          });
+        };
       };
     };
 
@@ -229,7 +243,7 @@
 
     var createUpdateStepwise = createUpdateStepwiseFactory(timingObject.translateTimingStateVector);
     var updateMediaElement = createUpdateMediaElement(pause, play, createSetCurrentTime(new WeakMap()), createSetPlaybackRate(new WeakMap()));
-    var setTimingsrcWithCustomUpdateFunction = createSetTimingsrcWithCustomUpdateFunction(subscribableThings.animationFrame, updateMediaElement);
+    var setTimingsrcWithCustomUpdateFunction = createSetTimingsrcWithCustomUpdateFunction(subscribableThings.animationFrame, document, subscribableThings.on, updateMediaElement);
     var setTimingsrc = createDefaultSetTimingsrc(createSetTimingsrc, createUpdateGradually, createUpdateStepwise, setTimingsrcWithCustomUpdateFunction, createWindow());
 
     exports.createSetTimingsrc = createSetTimingsrc;

package/package.json

@@ -9,31 +9,31 @@
         }
     },
     "dependencies": {
-        "@babel/runtime": "^7.17.9",
-        "subscribable-things": "^2.1.2",
-        "timing-object": "^3.1.44",
+        "@babel/runtime": "^7.18.3",
+        "subscribable-things": "^2.1.5",
+        "timing-object": "^3.1.45",
         "tslib": "^2.4.0"
     },
     "description": "A library to synchronize a MediaElement with a TimingObject.",
     "devDependencies": {
-        "@babel/core": "^7.17.9",
-        "@babel/plugin-external-helpers": "^7.16.7",
-        "@babel/plugin-transform-runtime": "^7.17.0",
-        "@babel/preset-env": "^7.16.11",
-        "@commitlint/cli": "^16.2.4",
-        "@commitlint/config-angular": "^16.2.4",
+        "@babel/core": "^7.18.2",
+        "@babel/plugin-external-helpers": "^7.17.12",
+        "@babel/plugin-transform-runtime": "^7.18.2",
+        "@babel/preset-env": "^7.18.2",
+        "@commitlint/cli": "^17.0.1",
+        "@commitlint/config-angular": "^17.0.0",
         "@rollup/plugin-babel": "^5.3.1",
         "chai": "^4.3.6",
         "commitizen": "^4.2.4",
         "cz-conventional-changelog": "^3.3.0",
-        "eslint": "^8.14.0",
-        "eslint-config-holy-grail": "^52.0.9",
-        "grunt": "^1.5.2",
+        "eslint": "^8.16.0",
+        "eslint-config-holy-grail": "^52.0.16",
+        "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.1",
         "grunt-sh": "^0.2.0",
-        "husky": "^7.0.4",
-        "karma": "^6.3.19",
+        "husky": "^8.0.1",
+        "karma": "^6.3.20",
         "karma-browserstack-launcher": "^1.6.0",
         "karma-chrome-launcher": "^3.1.1",
         "karma-firefox-launcher": "^2.1.2",
@@ -42,18 +42,18 @@
         "karma-sinon-chai": "^2.0.2",
         "karma-webpack": "^5.0.0",
         "load-grunt-config": "^4.0.1",
-        "mocha": "^9.2.2",
+        "mocha": "^10.0.0",
         "prettier": "^2.6.2",
         "pretty-quick": "^3.1.3",
-        "rollup": "^2.70.2",
-        "sinon": "^13.0.2",
+        "rollup": "^2.75.0",
+        "sinon": "^14.0.0",
         "sinon-chai": "^3.7.0",
-        "ts-loader": "^9.2.9",
-        "tsconfig-holy-grail": "^11.1.30",
+        "ts-loader": "^9.3.0",
+        "tsconfig-holy-grail": "^11.1.32",
         "tslint": "^6.1.3",
         "tslint-config-holy-grail": "^53.2.28",
-        "typescript": "^4.6.4",
-        "webpack": "^5.72.0"
+        "typescript": "^4.7.2",
+        "webpack": "^5.72.1"
     },
     "files": [
         "build/es2019/",
@@ -75,5 +75,5 @@
         "test": "grunt lint && grunt test"
     },
     "types": "build/es2019/module.d.ts",
-    "version": "1.1.29"
+    "version": "1.2.2"
 }

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

@@ -2,10 +2,12 @@ import { TSetTimingsrcWithCustomUpdateFunctionFactory } from '../types';
 
 export const createSetTimingsrcWithCustomUpdateFunction: TSetTimingsrcWithCustomUpdateFunctionFactory = (
     animationFrame,
+    document,
+    on,
     updateMediaElement
 ) => {
-    return (mediaElement, timingObject, updateFunction, prepareTimingStateVector = null) =>
-        animationFrame()(() => {
+    return (mediaElement, timingObject, updateFunction, prepareTimingStateVector = null) => {
+        const update = () => {
             const { currentTime, duration, playbackRate } = mediaElement;
             const timingStateVector = timingObject.query();
             const { position, velocity } = updateFunction(
@@ -15,5 +17,20 @@ export const createSetTimingsrcWithCustomUpdateFunction: TSetTimingsrcWithCustom
             const sanitizedDuration = typeof duration === 'number' && !isNaN(duration) ? duration : 0;
 
             updateMediaElement(currentTime, sanitizedDuration, mediaElement, playbackRate, position, velocity);
-        });
+        };
+
+        const unsubscribeFunctions = [
+            animationFrame()(() => update()),
+            on(
+                timingObject,
+                'change'
+            )(() => {
+                if (document.visibilityState === 'hidden') {
+                    update();
+                }
+            })
+        ];
+
+        return () => unsubscribeFunctions.forEach((unsubscribe) => unsubscribe());
+    };
 };

package/src/module.ts

@@ -1,4 +1,4 @@
-import { animationFrame } from 'subscribable-things';
+import { animationFrame, on } from 'subscribable-things';
 import { translateTimingStateVector } from 'timing-object';
 import { createDefaultSetTimingsrc } from './factories/default-set-timingsrc';
 import { createSetCurrentTime } from './factories/set-current-time';
@@ -20,7 +20,12 @@ export const createUpdateStepwise = createUpdateStepwiseFactory(translateTimingS
 
 const updateMediaElement = createUpdateMediaElement(pause, play, createSetCurrentTime(new WeakMap()), createSetPlaybackRate(new WeakMap()));
 
-export const setTimingsrcWithCustomUpdateFunction = createSetTimingsrcWithCustomUpdateFunction(animationFrame, updateMediaElement);
+export const setTimingsrcWithCustomUpdateFunction = createSetTimingsrcWithCustomUpdateFunction(
+    animationFrame,
+    document,
+    on,
+    updateMediaElement
+);
 
 export const setTimingsrc = createDefaultSetTimingsrc(
     createSetTimingsrc,

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

@@ -1,8 +1,10 @@
-import { TAnimationFrameFunction } from 'subscribable-things';
+import { TAnimationFrameFunction, TOnFunction } 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,
+    document: Document,
+    on: TOnFunction,
     updateMediaElement: TUpdateMediaElementFunction
 ) => TSetTimingsrcWithCustomUpdateFunctionFunction;