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(); +});