feat: ブック視聴ですべての動画を読み込む

[knokmki612]

#412 への対応です

• ブック視聴画面ですべての動画を画面上に配置したうえで、アクティブなトピックの動画以外はスタイルによって非表示にする
• トピックを選択した際に前のトピックの動画プレイヤーを停止し、現在の動画プレイヤーを再生する

ような挙動への変更です

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/ties-makimura/chibi-ch-i-lo/G3wcV4TQCoUa6azmiATAS71PoRBn
✅ Preview: https://chibi-ch-i-lo-git-feat-topic-viewer-conten-c5adcf-ties-makimura.vercel.app

[knokmki612]

今回の実装と直接は関係ないものの

VIDEOJS: WARN: The element supplied is not included in the DOM
VIDEOJS: WARN: A plugin named "streamrootHls" already exists. You may want to avoid re-registering plugins!

というメッセージがブラウザーのコンソールに繰り返し表示されるのが気になる

utils/video/getVideoInstance によってDOMに含めない状態で動画プレイヤーのインスタンスを生成していることに関連しているものと思われる

[knokmki612]

動画が自動再生で切り替わる際に、あからさまにローディング表示される(ローディングサークルがくるくるする)ことが問題

この点に対する対処として、

1. 表示しているトピック
2. その次のトピック

の動画プレイヤーを画面に配置し、 2. は height: 0 などで表示されない状態として、自動再生時に即時に表示されるような挙動を考えた。

まずはこれが実現可能か試してみる

Originally posted by @knokmki612 in #412 (comment)

2. その次のトピック を表示しないことは考慮せず、2つそのまま表示される状態で配置してみたところ、トピックが切り替わるタイミングで動画プレイヤーが再生前の状態に初期化された。

2つの動画プレイヤーはリストとして表示しており、リスト内の位置が変動するようなDOMの変化が原因かと思い、次はブック内のすべてのトピックの動画を表示して変化がないか試したが、同様にトピックが切り替わるタイミングで動画プレイヤーが再生前の状態に初期化された。

すべてのトピックの動画を表示した実装についてのみ 722d440 に置いています

どこかの箇所をReact.memoもしくはuseMemoを使うことによって、トピックが切り替わる際に動画プレイヤーの状態が初期化されないように変更することが可能なのか、私からは今のところ不明 #499 (comment) で解決

[knokmki612]

今回の変更によって organisms/BookPreviewDialog が期待したように動作していないようにみえる
(トピックが再生完了してから次のトピックに切り替わらない) 解決した

[kou029w]

良さそうに思います 👍