diff --git a/src/factory/createHTMLMediaHook.ts b/src/factory/createHTMLMediaHook.ts
index 92d62c9d79..6d01a02179 100644
--- a/src/factory/createHTMLMediaHook.ts
+++ b/src/factory/createHTMLMediaHook.ts
@@ -139,7 +139,7 @@ export default function createHTMLMediaHook(false);
const controls = {
play: () => {
@@ -148,14 +148,14 @@ export default function createHTMLMediaHook {
- lockPlay = false;
+ lockPlay.current = false;
};
promise.then(resetLock, resetLock);
}
@@ -166,7 +166,7 @@ export default function createHTMLMediaHook {
const el = ref.current;
- if (el && !lockPlay) {
+ if (el && !lockPlay.current) {
return el.pause();
}
},
diff --git a/tests/useAudio.test.ts b/tests/useAudio.test.ts
index fac5df4794..be4d2ef760 100644
--- a/tests/useAudio.test.ts
+++ b/tests/useAudio.test.ts
@@ -41,3 +41,25 @@ it('should init audio and utils', () => {
controls.volume(0.5);
expect(ref.current.volume).toBe(0.5);
});
+
+it('should keep play lock across rerenders', () => {
+ const { result, rerender } = setUp();
+ const [, , controls, ref] = result.current;
+ const audio = document.createElement('audio');
+ const play = jest.fn(() => new Promise(() => {}));
+ const pause = jest.fn();
+
+ Object.defineProperties(audio, {
+ play: { value: play },
+ pause: { value: pause },
+ });
+
+ ref.current = audio;
+ controls.play();
+
+ rerender();
+ result.current[2].pause();
+
+ expect(play).toHaveBeenCalledTimes(1);
+ expect(pause).not.toHaveBeenCalled();
+});