ToDo [youtube-video-search-app]

[Yagami360]

全般

• [x] ログインアイコンが消えるバグ修正 → リロード直後にログイン中であっても auth.currentUser=null になる問題への対処）
• [ ] ダークモード状態をローカルディスクではなく firestore に保存するようにする
• [x] YouTube API の利用上限に達すると、自動的に別の API キーを使用してリクエストする機能
• [x] デプロイしたアプリで動画視聴ページが開けないバグの修正
• [x] アプリを公開する際には Firestore を本番モードで運用（テストモードだと３０日でアクセス不可になるため）
  • [ ] アクセス可能なユーザーを制限する

[Yagami360]

トップページ

• [x] 動画検索ページにリダイレクトするようにする

[Yagami360]

動画検索ページ

• [x] 5件以上の検索結果を表示出来るようにする
• [x] 50件以上の検索結果を表示出来るようにする
• [x] 検索実行後、ダークモード切り替えしないとページの検索結果が表示されないバグの修正
  • React では、stateの値の変化を Object.is() で判定しているので、ステートの配列を push() や splice() で追加しても前回と同じ値と判定され state 更新後の再レンダリングが自動的に行われなくなる。そのため、スプレット構文で配列を追加する必要がある？ : https://zenn.dev/gunners6518/articles/4c06488cfa402e
• [x] 検索結果が多い場合に、無限スクロールで次の動画検索結果を表示する機能追加
• [x] お気に入り追加機能
• [ ] お気に入り状態をローカルディスクではなく firebase のデータベースに保存するように修正
• [x] フォロー追加機能
• [ ] フォロー状態をローカルディスクではなく firebase のデータベースに保存するように修正
• [ ] 動画カテゴリを日本語名で表示
• [ ] 公式チャンネルの動画を分けて表示する機能追加

[Yagami360]

動画視聴ページ

• [x] 動画情報とチャンネル情報を表示
  • [ ] 動画説明分の https://xxx の部分をリンクで表示する
  • [ ] 動画カテゴリを日本語名で表示
  • [ ] ガイドカテゴリを表示
  • [x] 動画説明の一部を表示、もっと見る機能
  • [x] 動画情報が取得できたりできなくなったりするバグの修正
    • "the request cannot be completed because you have exceeded your ... " のエラーが出ているので、1日10000リクエストの割当て上限オーバーで YouTube API を叩けなくなっているために発生。上限増やすと料金取られるので、このバグは開発段階では無視する
    • 副作用フック内で aync/await 処理にすることで解決
• [x] 動画表示機能
  • [ ] 動画表示サイズを変更出来るようにする
• [x] コメント表示機能
  • [ ] 100 件以上のコメントを表示出来るようにする
  • [ ] コメント数が多い場合に次へで表示
  • [ ] 返信コメントの表示
  • [ ] https://xxx の部分をリンクで表示する
  • [x] 表示パフォーマンス向上
• [x] チャット表示機能
  • [x] レイアウト調整
  • [x] 一定時間度に新規のチャットを取得する
  • [x] 新規のチャットがあると自動的に上にスクロールする
  • [ ] 新規のチャットがあると自動的に下にスクロールする
  • [x] チャット更新時にアバダー画像が読み込めなくなるバグの修正
  • [ ] 動画サイズを変えても自動的に適切なレイアウトにする
  • [ ] 一部同じチャットが読み込まれるバグの修正
  • [x] リストの先頭と末端両方にチャットが追加されてことがあるバグの修正
  • [x] チャット表示を別コンポーネント LiveChatList で独立させたときに、チャットが表示されたりされなかったりするバグの修正
    • コンポーネント引数の liveChatId と liveBroadcastContent の値がセットされていたり、されていなかったりするのが原因。
    • 親関数コンポーネントの VideoWatchPage 側のステート liveChatId, liveBroadcastContent の値は、初回起動時に空値 "" で初期値され、その後に実際の値が設定されている。子コンポーネントの引数 liveChatId, liveBroadcastContent には、初回起動時の空値 "" が設定されるが、親関数コンポーネント側で値の更新が行われた後の値が再設定されていないことが原因
    • liveChatId, liveBroadcastContent はステートと定義」しているので、親関数コンポーネント側で値の更新が行われた後に再度子コンポーネントの引数 liveChatId, liveBroadcastContent の再設定が行われるはずだったが、行われていない。その原因は不明。ステートの挙動を勘違いしている？
  • 子コンポーネントの引数 liveChatId, liveBroadcastContent の値は更新されていた。副作用フック内を useEffect( () => {...}, [liveChatId, liveBroadcastContent]) で定義し、引数（＝ステート）更新後に、副作用フックを再度呼び出すようにすることで解決した
  • [ ] チャットの絵文字をテキストではなく絵文字で表示出来るようにする
• [x] チャットをニコニコ風字幕で流す
  • [ ] 複数のチャットを縦に並べて同時レンダリング出来るようにする
    • fillText() 前の clearRect() で canvas 全件をクリアしているために、チャットを縦に並べて同時レンダリングできていない？
    • clearRect() でチャット位置のみクリアすると、残像が残る
    • tween の onUpdate() の後に timeline の onUpdate() がコールバックされるので、timeline の onUpdate() 内にて、最初に clearRect() して、その後各 tween に対する fillText() を for ループで回せば良い？
  • [ ] VideoWatchPageConfig.intervalTimeChat で設定されているライブチャット取得間隔で取得した複数のライブチャット情報のうち、１つのライブチャット情報しか字幕表示されない問題の修正
  • [ ] 表示パフォーマンス改善
  • [ ] チャットの絵文字をテキストではなく絵文字で表示出来るようにする
  • [ ] チャット字幕表示中は、Youtube 組み込み動画内部の再生・停止・音量調整ボタンが押せなくなる問題の修正
  • [x] チャット字幕ON・OFF切り替えスイッチ機能追加
• [ ] マルチグリッド視聴機能
• [ ] 動画のダウンロード機能
  • 動画のダウンロードは Youtube 規約違反なので公開する際には注意が必要
  • [ ] 方法１：ytdl-core を CLoud funtion 経由で使用
    • ytdl-core は Node.js 上で動作するモジュールなので、Cloud Funtion 上で実行するようにすうｒ
    • ダウンロード処理に時間がかかるので Cloud Funtion の timeout 時間とスペックを上げる必要あり？
    • 動画データの一時的な保存場所を Firebase の Storage に保存する必要あり？
  • [x] 方法２：React アプリ上で動画 URL から fetch() で動画データ取得
    • CORS エラーが出るので NG
  • [ ] 方法３：Cloud funtion 経由で動画 URL から fetch() で動画データ取得
    • Cloud funtion をリバースプロキシにしても CORS エラーが出る？
• [ ] スクショ機能
  • [ ] 方法１：html2canvas ライブラリを使用
    • html2canvas() メソッドの引数 canvas の画像がブランク画像になる。恐らく html2canvas 自体の問題なので NG。react とうまく併用できない？
  • [x] 方法２：iframe タグの canvas 属性で context.drawImage() する方法
    • contentWindow.document で iframe タグの大本の動画が存在する親ページ（YouTube）の document オブジェクトにアクセスしようとすると、CORS エラーが出てできないのでNG
    • https://teratail.com/questions/58088
  • [x] 方法３：iframe タグ内に video タグを作成し、video 属性の canvas 属性に context.drawImage() する方法
    • video タグの src 属性に動画 URL を設定する際に、CORB のエラーが出るので NG
  • [ ] 方法４：Youtube 動画を video タグで作成し、video 属性の canvas 属性に context.drawImage() する方法
• [ ] 動画切り抜き機能

[Yagami360]

お気に入りページ

• [x] お気に入り表示機能
• [x] ダークモード切り替えしないとお気に入りリストが表示されないバグの修正

[Yagami360]

フォローチャンネルページ

フォロー済みチャンネルリスト

• [x] フォロー済みチャンネルリスト表示コンポーネント（左側にアイコン一覧を表示）
• [x] チャンネルリストをドラック＆ドロップ出来るようにする
• [ ] ドロップ＆ドロップでの順番変更状態を保存する

チャンネル詳細（全チャンネル）

• [ ] 全チャンネルの表示コンポーネント
• [x] ライブ放送中・放送予定・アーカイブで動画一覧表示を切り分ける
• [ ] 検索結果が多い場合に、無限スクロールで次の動画検索結果を表示する機能追加

チャンネル詳細（各チャンネル）

• [x] 各チャンネル表示コンポーネント（左側のリストクリックで、各チャンネルの詳細ページを表示）
• [x] ライブ放送中・放送予定・アーカイブで動画一覧表示を切り分ける
• [x] 検索結果が多い場合に、無限スクロールで次の動画検索結果を表示する機能追加
• [ ] 無限スクロール時に無限スクロール発生時のイベントハンドラが繰り返し呼び出されてしまい、動画が繰り返し追加されてしまうバグの修正
  • 無限スクロールで動画一覧が追加されると、自動的に下方向にスクロールされるために、無限スクロールのイベントハンドルが無限にコールされてしまうのが原因

[Yagami360]

視聴履歴ページ

[Yagami360]

織り込み予定機能

• 複数動画を１つのページで同時視聴出来るようにする
• フォローした Vtuber の Twitter も表示する
• 切り抜き動画用の動画編集機能
• VTuber まとめサイトとの連携機能
• VTuber イベント情報との連携機能
• チャンネル登録者数のランキング・急上昇表示ページ