テストユーザーの方から、動画アップロードに時間がかかるとのご意見をもらいました。
色々調べてみました。

1. 分割アップロード(いくつかのチャンクに分けて並列アプロード)
2. 動画圧縮
3. ストレージ(S3)に直接アップロード(EC2を介さずに)

等
1は分割されたファイルをサーバー側でどう組み立てればいいのか分からず時間がかかりそうなので保留。
2はPWAである限り不可能
3はバリデーションその他が面倒そうなのとそこまで速度向上に期待できなさそうなので断念

現状動画時間短縮はきつそうだったので、ストレスを減らすことを考えました。

・エレベーターの横に鏡を置いたら体感待ち時間が減った
・Suicaは実はタッチする位置よりも数十センチ前から処理は走ってるが、タッチさせることで時間を稼いでおり体感の処理時間はタッチ前後の数舜になっている
・Pjax(ページをAjaxで更新)ではリンクを踏む前から、リンクの上にマウスが置かれた時点でリンク先のページ情報取得を開始

など、デザイン的な工夫で体感の「処理時間」を減らしている実例はいくつもあります。
ということで一番簡単な、プログレスバーによるアップロード進捗表示でストレス軽減をすることにしました。

Ajaxで送るtype, urlとかの辞書の中に

        xhr : function(){
           XHR = $.ajaxSettings.xhr();
           XHR.upload.addEventListener('progress', updateProgress)
           return XHR;
       },

を入れるとアップロードが進むたびに'progress'イベントが発火してupdateProgress関数が呼び出されるので、その関数を以下のように定義して随時バーの長さを更新してあげます。

function updateProgress(e) {
   if (e.lengthComputable) {
   var percent = e.loaded / e.total;
   $("progress").attr("value", percent * 100);
   }
}

こんな感じになりました。
プログレスバーはデフォルトですし、バーの位置もテキトウですが、とりあえず置けて良かったなと。
進捗の数値がパーセンテージで得られるので、色んなアニメーションにすることもできて楽しそうです。
あとはやっぱり動画アップロード時間そのものを短縮したいな…。

今日もお読みくださりありがとうございます。
ほぼ毎日、アプリ開発や事業に関する日記を書いておりますので是非またお読みになってください！