RailsとVue.jsで、Netflixっぽく家のビデオライブラリをブラウザから見れるアプリ Frickakeを作りました。
https://github.com/juntaki/flickake
Streamaより、もっとお手軽に、単にNASで管理してたようなのをブラウザで見れればいいという人向けです。
#使い方
デプロイ
Dockerでデプロイします。設定はmp4ファイルが置いてあるディレクトリパスを指定するだけです。
ログは必要なければ設定しなくてもOKです。その他、ポート番号などはお好きに変更してください。
起動したら、http://hostname:3000/ へアクセスします。
docker pull juntaki/flickake
docker run -d --name=flickake -p 3000:3000 \
-e SECRET_KEY_BASE=YOUR_SECRET \
-v /path/to/movie_library:/app/files juntaki/flickake \
-v /path/to/log:/app/log
ライブラリのスキャン
ナビゲーションバーから"Scan"を押すか、下記のコマンドを定期実行すると良いです。
docker exec flickake rails movies:scan
作ったときにはまった場所
HTML5 videoのロード
videoタグのはなし - クラウドワークス エンジニアブログ
570755 - 206 Partial content is ignored and mozilla does not seek for additional video content
ChromeやFirefoxはビデオのsourceに対して、長さを指定しない(range=0-)206 Partialリクエストを送ってきます。サーバ側で応答を短い長さで切ってしまうと（RFC的にはOK）、、Chromeでは問題ないのに、Firefoxは次のリクエストを出してくれなくなります。動画をシークすることを考えると、ある程度細切れにしたほうがクライアントのレスポンスは良さそうですが・・・。
と、色々実験していたら256MB程度の大きさで返すと、Firefoxも受け取ってくれるようです。謎です。
動画だけはnginxなどでホストしておくと負荷が少ないのかもしれませんが、レスポンスの中身を細かくコントロールしたかったのと、シンプルな構成を目指していたので今回はRailsで動画ファイルをメモリ上に読んでレスポンスを組み立てています。
Fullscreen API
javascript - How to detect when a page exits fullscreen? - Stack Overflow
これはブラウザごとにprefixが必要なAPIなので、シンプルに書けない部分です。一般的には状態変更をfullscreenchange相当のEventで取得し、その時のfullscreenElementの有無で現在の状態を取得する、という方法が良さそうです。（それ以外の方法ではfullscreenをESCキーで抜ける遷移にhookできない）
Flickakeではコントローラを表示するときに毎回fullscreenElementの有無を調べてます。
Vue.js + Rails
RailsのTurbolinksとVue.jsを共存させる方法 - Qiita
RailsのTurbolinksもDOMを書き換えるため、相性が良くないようです。戻るボタンを押すとレイアウトが崩れる現象が起きてハマりました。大したページもないのでTurbolinksをOFFにしてしまっています。
Globalなキーイベントをとる
How to add @keyup globally with VUE?
イベントハンドリング - Vue.js
ふつうにjavascriptでwindows.addEventListenerするのが良いようです。
クリックと同じようにキー入力が取れる感じでVueのガイドに書いてありますが、キーイベントはinput要素などフォーカスが当たる要素にしか発生しないようです。