diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx index 81626e3ad..1d538a204 100644 --- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx +++ b/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 = ({ (player as any).markers(); (player as any).offset(); + (player as any).persistVolume(); player.focus(); playerRef.current = player; diff --git a/ui/v2.5/src/components/ScenePlayer/persist-volume.ts b/ui/v2.5/src/components/ScenePlayer/persist-volume.ts new file mode 100644 index 000000000..bbfe0503a --- /dev/null +++ b/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;