client: refactor volume controls into a composable for simplicity (#1561

)

client/src/components/composables/index.ts

@@ -1 +1,2 @@
 export * from "./copy-from-textbox";
+export * from "./media-player";

client/src/components/composables/media-player.ts

@@ -0,0 +1,18 @@
+import { useStore } from "@/store";
+import { onMounted, ref, watch } from "vue";
+
+const volume = ref(100);
+
+export function useVolume() {
+	const store = useStore();
+
+	onMounted(() => {
+		volume.value = store.state.settings.volume;
+	});
+
+	watch(volume, () => {
+		store.commit("settings/UPDATE", { volume: volume.value });
+	});
+
+	return volume;
+}

client/src/components/controls/VolumeControl.vue

@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, ref } from "vue";
+import { defineComponent } from "vue";
 import VueSlider from "vue-slider-component";
 import "vue-slider-component/theme/default.css";
-import { VOLUME_KEY } from "./controlkeys";
+import { useVolume } from "../composables";
 
 export default defineComponent({
 	name: "VolumeControl",
@@ -31,12 +31,11 @@ export default defineComponent({
 	},
 	emits: ["update:volume"],
 	setup(props, { emit }) {
-		// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-		const [volume, updateVolume] = inject(VOLUME_KEY, [ref(100), (_: number) => {}]);
+		const volume = useVolume();
 
 		function changed(value: number) {
 			emit("update:volume", value);
-			updateVolume(value);
+			volume.value = value;
 		}
 
 		return { volume, changed };

client/src/components/players/OmniPlayer.vue

@@ -123,6 +123,7 @@ import { PlayerStatus } from "ott-common/models/types";
 import { QueueItem } from "ott-common/models/video";
 import { calculateCurrentPosition } from "ott-common/timestamp";
 import { defineComponent, defineAsyncComponent, PropType, ref, Ref, computed, watch } from "vue";
+import { useVolume } from "../composables";
 
 const services = [
 	"youtube",
@@ -191,12 +192,6 @@ export default defineComponent({
 		const store = useStore();
 
 		const player: Ref<MediaPlayer | null> = ref(null);
-		watch(player, () => {
-			console.debug("Player changed", player.value);
-			if (player.value) {
-				player.value.setVolume(store.state.settings.volume);
-			}
-		});
 
 		function checkForPlayer(p: MediaPlayer | null): p is MediaPlayer {
 			if (!p) {
@@ -333,8 +328,22 @@ export default defineComponent({
 			}
 		);
 
+		const volume = useVolume();
+		watch(volume, v => {
+			if (player.value) {
+				player.value.setVolume(v);
+			}
+		});
+		watch(player, () => {
+			console.debug("Player changed", player.value);
+			if (player.value) {
+				player.value.setVolume(volume.value);
+			}
+		});
+
 		// player events re-emitted or data stored
 		function onApiReady() {
+			setVolume(volume.value);
 			emit("apiready");
 		}
 

client/src/views/Room.vue

@@ -231,12 +231,12 @@ import { ServerMessageSync } from "ott-common/models/messages";
 import { useScreenOrientation, useMouse } from "@vueuse/core";
 import { KeyboardShortcuts, RoomKeyboardShortcutsKey } from "@/util/keyboard-shortcuts";
 import VideoControls from "@/components/controls/VideoControls.vue";
-import { VOLUME_KEY } from "@/components/controls/controlkeys";
 import RestoreQueue from "@/components/RestoreQueue.vue";
 import VoteSkip from "@/components/VoteSkip.vue";
 import { waitForToken } from "@/util/token";
 import { useSfx } from "@/plugins/sfx";
 import { secondsToTimestamp } from "@/util/timestamp";
+import { useVolume } from "@/components/composables";
 
 const VIDEO_CONTROLS_HIDE_TIMEOUT = 3000;
 
@@ -432,8 +432,7 @@ export default defineComponent({
 
 		// player management
 		const player = ref<typeof OmniPlayer | null>(null);
-		const volume = ref(100);
-		provide(VOLUME_KEY, [volume, updateVolume]);
+		const volume = useVolume();
 
 		function isPlayerPresent(p: Ref<typeof OmniPlayer | null>): p is Ref<typeof OmniPlayer> {
 			return !!p.value;
@@ -484,25 +483,6 @@ export default defineComponent({
 			applyIsPlaying(store.state.room.isPlaying);
 		}
 
-		function updateVolume(value: number | undefined = undefined) {
-			if (value !== undefined) {
-				volume.value = value;
-			}
-			if (!isPlayerPresent(player)) {
-				return;
-			}
-			player.value.setVolume(volume.value);
-		}
-
-		onMounted(() => {
-			volume.value = store.state.settings.volume;
-		});
-
-		watch(volume, () => {
-			updateVolume();
-			store.commit("settings/UPDATE", { volume: volume.value });
-		});
-
 		function onPlayerApiReady() {
 			console.debug("internal player API is now ready");
 		}
@@ -514,7 +494,6 @@ export default defineComponent({
 			} else {
 				activateVideoControls();
 			}
-			updateVolume();
 			if (changeTo === store.state.room.isPlaying) {
 				return;
 			}