複数の配信者によるコラボイベントなどがあると、YouTube動画を複数開いていっぺんに視聴したいという気持ちがある
既にそういうツールはいろいろあるものの、もっとこうしたらいいんじゃないか？という気持ちが出てきたので自作してみることにした
たとえばHolodexというサイトのマルチビュー機能ではライブ中の配信者のアイコンが上に並び、そこから選んでいくだけで簡単にマルチ視聴できる
これだけでだいぶ便利だけど、ただいくつか満足できないところがあった
課題
動画数に応じたレイアウトがプリセットで用意されているけど、ブラウザサイズによっては最適なレイアウトにならない
個別に動画配置をいじることもできるがだいぶめんどくさい。レイアウトをいじったあとに動画を追加するとレイアウトがリセットされる
動画の追加削除時に動画のステートがリセットされてしまう
選択した動画以外をミュートにする機能は便利だけど、どの動画から音が出てるのか分かりにくい
Development of Vue3-powered Holodex (release 3.0 ?!?!) is completely scrapped. We're making it in react instead. If you like to influence how it looks, now is the best time to let us know.
If you are a React UI engineer/designer and would like to contribute to Holodex, drop by our discord!
https://github.com/HolodexNet/Holodex/blob/dev/docs/CHANGELOG.md
ちなみにHolodexはvue2で作られていてvue3化しようとしたけどお手上げになってしまい、reactに移行したいという辛そうな状況だった
nextというブランチがあったけどvue2のままだった
ブラウザサイズに応じた最適なレイアウトの算出
まずレイアウトについては、ブラウザサイズに応じて自動的に最適になるなといいなと思ったのでいろいろとロジックを検討してみた
画面サイズに対して一定のアスペクト比のコンテンツを敷き詰める配置を試し、各動画の面積がなるべく大きくなるレイアウトを返すようにした
レスポンシブみたいなものだけど、どのように領域確保するかはけっこう動的
たとえばかなり横長な画面の場合、全て横並びのレイアウトが最適なものとして算出される
画面が縦長ならちゃんと縦に並ぶ
動画数が多くても対応する
grid-areaを使うことで動画の状態リセットを防ぐ
動画をリストでレンダリングしているとリスト内容を入れ替えたときに再レンダリングが起きてしまう部分があり、再生中の動画の状態が失われてしまう
そこでレイアウトをcss gridで作り、動画のリスト自体は変更せずにgrid-areaのstyleを変えることで表示位置だけ変更できるようにした
（Holodexの場合は位置をabsoluteで指定しているので並び替えのときにはスタイルの変更だけで状態が保持されるけど、リストの追加削除だとリセットされてしまうようだった）
個別動画メニュー
ドラッグハンドル、リストポジションの前後移動、この動画だけミュート解除、削除、というメニューをつけた
このメニューはホバーで出すように作ってたけど、タッチデバイスではホバーが使えないので動画上部をタップしたときに表示し、閉じる手段が無いので一定時間経過したら消すようにした
PCだけでなくタブレットやスマホでも使いたいので、どうやったら対応できるのか改めていろいろ考えることがある
音声再生中の動画が分かるように赤いアウトラインをつけた
ドラッグで並び替え
動画メニューのドラッグハンドルを掴んで別の動画のポジションにドロップするとその位置に移動できる
全体メニュー
右上には全部の動画をまとめて動かすメニューをつけた
全再生、全停止、全ミュート、全シーク
シークについては動画のシークバーを動かしたときに全動画同じだけ動かすようにしたいけど、YouTube Player APIでシーク開始・終了のイベントハンドリングする方法がまだいまいち分かってない
＋ボタンを押すとURL入力欄が開く
URLクエリーで状態保持
現在の動画リストの並びは常にURLに反映しているのでURLをコピれば状態を復元できる
Liver Streamsのほうには複数選択モードを追加し、このプレイヤーにパラメータ投げることで同時に開けるようにした
検索絞り込みした状態から全選択して開けるので、いっぺんに30窓とか見ることもできる（負荷がすごい）
だいたい満足できるような感じになった
あとはコメント欄も表示できるようにしたい
アーカイブ動画の場合は開始位置を合わせられたら嬉しい