ブックのなかで音量の設定が引き継がれない問題

[kou029w]

そのバグについて

あるブックのなかで、音量を設定後、次のトピックに進んだ際に音量の設定が引き継がれない

再現手順

1. あるブックを視聴する
2. 動画プレイヤーの音量を設定
3. トピックの動画の再生が終了 OR 別のトピックを選択
4. 動画プレイヤーの音量の設定を確認

期待していた動作

動画プレイヤーの音量として最後に設定し反映されたものが他のトピックの再生時に引き継がれている状態になっているのが望ましいと考える

[knokmki612]

485 以降で動画プレイヤーのインスタンス生成と動画プレイヤーの画面上での表示が同じタイミングではなくなったことに起因しています

localStorageに保存された音量を反映するタイミングを、volumePersisterを呼び出すタイミングではなく、再生開始時ごとに変更することで改善するかと思いました。

ただ、 e2d91cc81cdd18789018c237a194ad7b8465eb24 時点で以下の差分で動作確認したところ、Video.js(YouTube)で一度pauseした状態からならば問題なく音量が反映されるのですが、初回再生時は音量が反映されなかったです。(vimeo、wowzaは動作確認していないです)

diff --git a/utils/volumePersister.ts b/utils/volumePersister.ts
index 5880ca7..9db1dd9 100644
--- a/utils/volumePersister.ts
+++ b/utils/volumePersister.ts
@@ -34,12 +34,14 @@ async function intoVimeo(player: VimeoPlayer) {
     save({ volume: event.volume, muted });
   });

-  const volume = load();
-  if (volume == null) return;
-  await Promise.all([
-    player.setVolume(volume.volume),
-    player.setMuted(volume.muted),
-  ]);
+  player.on("play", async function () {
+    const volume = load();
+    if (volume == null) return;
+    await Promise.all([
+      player.setVolume(volume.volume),
+      player.setMuted(volume.muted),
+    ]);
+  });
 }

 function intoVideoJs(player: VideoJsPlayer) {
@@ -49,10 +51,12 @@ function intoVideoJs(player: VideoJsPlayer) {
     save({ volume, muted });
   });

-  const volume = load();
-  if (volume == null) return;
-  player.volume(volume.volume);
-  player.muted(volume.muted);
+  player.on("play", function () {
+    const volume = load();
+    if (volume == null) return;
+    player.volume(volume.volume);
+    player.muted(volume.muted);
+  });
 }

[kou029w]

再生開始時ごとというよりはどちらかというと理想的にはおそらく volumechange イベント発火時のタイミングですかね

[knokmki612]

理想的にはおそらく volumechange イベント発火時のタイミングですかね

これは音量を反映したい動画プレイヤーのvolumechangeイベント発火時ではなく、異なる(最新の操作がおこなわれている)動画プレイヤーのvolumechangeイベント発火時、という認識であっていますでしょうか？

[kou029w]

はい

[knokmki612]

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#responding_to_storage_changes_with_the_storageevent

This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made.

storageイベントによってlocalStorageの変更を検知できるかと思ったのですが、同一のページでの変更は検知しないようなので有効ではないですね

[kou029w]

@ties-makimura @horimasumi 本件修正しました。ご確認のほどよろしくお願いします。

[ties-makimura]

ページ表示後，すぐに（1秒以内とか）音量を変更すると音量が変更前に戻ります．通常の利用でこんなことしないと思いますが．． プレイヤーがYoutubeとWowzaの時だけ確認できます．

再現手順

1. 提供ブックを表示して，プレイヤーの音声をミュートにする
2. ページをリロード
3. すぐにプレイヤーの音声ミュートを解除する
4. 自動でプレイヤーの音声がミュートに戻る（変更前に戻る）

[kou029w]

@ties-makimura #514 にて起票しました。ご確認頂きありがとうございます。

[knokmki612]

@ties-makimura @kou029w 個別に起票されているissueを除いたスコープで解決されているか判断してよろしいように思うのですが、いかがでしょうか

[kou029w]

はい。 #514 #516 は本Issueとは別とさせてください。