Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

useAudio/useVideo play lock resets across renders

オープン 初心者向け
  • 何か問題がありますか？
#2,708 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
75/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
react, typescript
領域
frontend, testing

調査の方向性

createHTMLMediaHook と issue に記載されている lockPlay の処理から始め、続いてメディアイベントの再レンダリング経路を追跡します。play() が完了するまでロックが再レンダリング後も維持され、保留中の play に対する pause のケースを対象とした集中的なリグレッションテストが含まれていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

What is the current behavior?

useAudio and useVideo use a lockPlay local variable inside createHTMLMediaHook to avoid calling pause() while a pending HTMLMediaElement.play() promise is still resolving.

Because lockPlay is a plain local variable, it is recreated on every render. Media events such as play, playing, waiting, pause, durationchange, or timeupdate can call setState, causing a rerender before the original play() promise settles. After that rerender, the lock is reset to false, so a new controls.pause() call can run while the earlier play() promise is still pending.

This weakens the Chromium workaround described in the comment above the lock:

Some browsers return Promise on .play() and may throw errors if one tries to execute another .play() or .pause() while that promise is resolving.

Expected behavior

The play lock should persist across renders until the pending play() promise resolves or rejects.

Using a ref for the lock would preserve the intended behavior without changing the public API.

Why this matters

In video/audio-heavy UIs, components often call controls.play() and controls.pause() in response to store changes, user interactions, or source changes. If a media event causes a rerender while play() is still pending, the current lock can be lost and the hook can issue a conflicting pause().

Possible fix

Change the local variable:

let lockPlay = false;

to a ref-backed value, for example:

const lockPlay = useRef(false);

and read/write lockPlay.current inside the controls.

I can open a PR with a focused regression test if this direction sounds good.

主要言語
TypeScript
スター
44k
フォーク
3.3k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

streamich/react-use のほかの issue

streamich/react-use の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。