YouTube Live を効率的に見たいアプリケーション

久しぶりの開発ブログです。

毎朝、ニュースか天気予報をYouTube Liveで見ていて、このニュースはさっき聞いたから、別に見なくても良いなと思うことがあります。その他にも、そこまで関心事でなければ、適当な音楽でも流しておこうと思うこともあります。

そんなことも考えて、YouTube Live Switcher(YTL Switcher) を作りました。

f:id:uitspitss:20200315151118p:plain — YTL Switcher

Next.js + React (with TypeScript) で作っていて、now.sh にデプロイしてます。以下、作って触って気づいたことや簡単な仕様を箇条書きします。

動画iframeの上にdiv をかぶせていて、そのdivのクリックイベントでミュート切り替えのハンドルを発火している
- クリックイベントなので、iPadなどのタッチイベントでは、divをすり抜けて後ろのiframeにイベントが通ってしまう。（直したい）
クリックイベントによるミュート切り替えの仕様は
- すべてがミュートの場合は、クリックしたライブのミュートを解除
- どれか一つのライブがミュート解除されている状態で、それ以外のライブをクリックをしたときは、クリックしたライブのミュートを解除して、他のライブはミュートにする
- どれか一つのライブがミュート解除されている状態で、そのライブをクリックしたときは、そのライブをミュート
useReducer + useContext で状態遷移部分を書いた。
登録した配信ライブのidやミュート状態はローカルストレージに保管
途中、チャンネルidを入れて、最新ライブを取得するhooksを書いていたけど、YouTube Data API の searchのquotaがでかい(100)。デフォルトで 10000 quota/day のリミットがあるので、１日に100回通したらリミットがかかる。
quota
- ローカルストレージに updatedAt のプロパティを入れて、節約しようともしていたけど、そもそもがきついので、いっそのこと、YouTube Data API は使わない方向にした。(ググっていたら、申請して20万 quota/day に枠を増やしてもらえたみたいな話も見た)
- PWA化したときに、ローカルストレージが使えなくなったので、IndexedDBに切り替えた。合わせて、自分が見ているチャンネルが１日毎にライブIDを切り替えてしまうので、自動更新が必要なので、自分のAPIで公開はしないけど、APIを入れたら自動更新（３時間毎）が動くようにした。（2020/03/30追記）
YouTbe Live の配信動画も、基本的にはYouTube上の他の動画と同じ扱いなので、動画IDを入れても見れる