Add persist volume plugin (#2448)

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -6,6 +6,7 @@ import "videojs-seek-buttons";
 import "videojs-landscape-fullscreen";
 import "./live";
 import "./PlaylistButtons";
+import "./persist-volume";
 import "./markers";
 import cx from "classnames";
 
@@ -164,6 +165,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
 
     (player as any).markers();
     (player as any).offset();
+    (player as any).persistVolume();
 
     player.focus();
     playerRef.current = player;

ui/v2.5/src/components/ScenePlayer/persist-volume.ts

@@ -0,0 +1,30 @@
+import videojs, { VideoJsPlayer } from "video.js";
+import localForage from "localforage";
+
+const persistVolume = function (this: VideoJsPlayer) {
+  const player = this;
+  const levelKey = "volume-level";
+  const mutedKey = "volume-muted";
+
+  player.on("volumechange", function () {
+    localForage.setItem(levelKey, player.volume());
+    localForage.setItem(mutedKey, player.muted());
+  });
+
+  localForage.getItem(levelKey).then((value) => {
+    if (value !== null) {
+      player.volume(value as number);
+    }
+  });
+
+  localForage.getItem(mutedKey).then((value) => {
+    if (value !== null) {
+      player.muted(value as boolean);
+    }
+  });
+};
+
+// Register the plugin with video.js.
+videojs.registerPlugin("persistVolume", persistVolume);
+
+export default persistVolume;