client: refactor media controls to use composables instead of hacky component refs

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

@@ -1,5 +1,5 @@
 import { useStore } from "@/store";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, type Ref, shallowRef, provide, inject, computed } from "vue";
 
 const volume = ref(100);
 
@@ -16,3 +16,141 @@
 
 	return volume;
 }
+
+export interface MediaPlayer {
+	/**
+	 * Play the video.
+	 *
+	 * Some browsers emit promises for this, and some don't.
+	 */
+	play(): void | Promise<void>;
+	/**
+	 * Pause the video.
+	 *
+	 * Some browsers emit promises for this, and some don't.
+	 */
+	pause(): void | Promise<void>;
+	setVolume(volume: number): void | Promise<void>;
+	getPosition(): number;
+	setPosition(position: number): void;
+
+	isCaptionsSupported(): boolean;
+	getAvailablePlaybackRates(): number[];
+}
+
+export interface MediaPlayerWithCaptions extends MediaPlayer {
+	isCaptionsEnabled(): boolean;
+	setCaptionsEnabled(enabled: boolean): void;
+	getCaptionsTracks(): string[];
+	setCaptionsTrack(track: string): void;
+}
+
+export interface MediaPlayerWithPlaybackRate extends MediaPlayer {
+	getPlaybackRate(): number;
+	setPlaybackRate(rate: number): void;
+}
+
+export class MediaPlayerV2 {
+	player: Ref<MediaPlayer | null> = shallowRef(null);
+	apiReady = ref(false);
+	playing = ref(false);
+	isCaptionsSupported = ref(false);
+
+	setPlayer(player: MediaPlayer | null) {
+		this.apiReady.value = false;
+		this.player.value = player;
+	}
+
+	checkForPlayer(p: MediaPlayer | null): p is MediaPlayer {
+		if (!p) {
+			return false;
+		}
+		return this.apiReady.value ?? false;
+	}
+
+	isPlayerPresent(): boolean {
+		return !!this.player.value;
+	}
+
+	markApiReady() {
+		if (!this.player.value) {
+			// FIXME: im not sure if this branch gets taken anymore
+			new Promise(resolve => {
+				const stop = watch(this.player, newPlayer => {
+					if (newPlayer) {
+						stop();
+						resolve(true);
+					}
+				});
+			}).then(() => {
+				this.apiReady.value = true;
+			});
+		} else {
+			this.apiReady.value = true;
+		}
+	}
+
+	async play(): Promise<void> {
+		if (!this.checkForPlayer(this.player.value)) {
+			return Promise.reject("Player not available yet");
+		}
+		return this.player.value.play();
+	}
+	async pause(): Promise<void> {
+		if (!this.checkForPlayer(this.player.value)) {
+			return Promise.reject("Player not available yet");
+		}
+		return this.player.value.pause();
+	}
+	getPosition(): number {
+		if (!this.checkForPlayer(this.player.value)) {
+			return 0;
+		}
+		return this.player.value.getPosition();
+	}
+	setPosition(position: number): void {
+		if (!this.checkForPlayer(this.player.value)) {
+			return;
+		}
+		return this.player.value.setPosition(position);
+	}
+}
+
+const PLAYER_KEY = Symbol("player");
+const player = new MediaPlayerV2();
+
+export function useMediaPlayer() {
+	return inject(PLAYER_KEY, player);
+}
+
+// export function isPlayerPresent(p: typeof player): p is Ref<MediaPlayerV2> {
+// 	return !!p.value;
+// }
+
+const isCaptionsSupported: Ref<boolean> = ref(false);
+const isCaptionsEnabled: Ref<boolean> = ref(false);
+const captionsTracks: Ref<string[]> = ref([]);
+const currentTrack: Ref<string | null> = ref(null);
+
+export function useCaptions() {
+	return {
+		isCaptionsSupported,
+		isCaptionsEnabled,
+		captionsTracks,
+		currentTrack,
+	};
+}
+
+const playbackRate: Ref<number> = ref(1);
+const availablePlaybackRates: Ref<number[]> = ref([1]);
+const isPlaybackRateSupported = computed(() => {
+	return availablePlaybackRates.value.length > 1;
+});
+
+export function usePlaybackRate() {
+	return {
+		isPlaybackRateSupported,
+		playbackRate,
+		availablePlaybackRates,
+	};
+}

client/src/components/controls/ClosedCaptionsSwitcher.vue

@@ -9,13 +9,17 @@
 		<v-icon>mdi-closed-caption</v-icon>
 		<v-menu location="top" offset-y activator="parent" :disabled="!supported">
 			<v-list>
-				<v-list-item link @click="setCaptionsEnabled(true)" v-if="tracks.length === 0">
+				<v-list-item
+					link
+					@click="setCaptionsEnabled(true)"
+					v-if="captions.captionsTracks.value.length === 0"
+				>
 					On
 				</v-list-item>
 				<v-list-item
 					link
 					@click="setCaptionsTrack(track)"
-					v-for="(track, idx) in tracks"
+					v-for="(track, idx) in captions.captionsTracks.value"
 					:key="idx"
 				>
 					{{ track }}
@@ -26,33 +30,23 @@
 	</v-btn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue";
+<script lang="ts" setup>
+import { useCaptions } from "../composables";
 
-const ClosedCaptionsSwitcher = defineComponent({
-	name: "ClosedCaptionsSwitcher",
-	emits: ["enable-cc", "cc-track"],
-	props: {
-		supported: { type: Boolean, default: true },
-		tracks: { type: Array as PropType<string[]>, default: () => [] },
-	},
-	setup(props, { emit }) {
-		function setCaptionsEnabled(value: boolean) {
-			emit("enable-cc", value);
-		}
+const captions = useCaptions();
 
-		function setCaptionsTrack(value: string) {
-			emit("cc-track", value);
-		}
+function setCaptionsEnabled(value: boolean) {
+	captions.isCaptionsEnabled.value = value;
+}
 
-		return {
-			setCaptionsEnabled,
-			setCaptionsTrack,
-		};
-	},
-});
+function setCaptionsTrack(value: string) {
+	if (!captions.isCaptionsEnabled.value) {
+		captions.isCaptionsEnabled.value = true;
+	}
+	captions.currentTrack.value = value;
+}
 
-export default ClosedCaptionsSwitcher;
+const supported = captions.isCaptionsSupported;
 </script>
 
 <style lang="scss">

client/src/components/controls/PlaybackRateSwitcher.vue

@@ -1,13 +1,13 @@
 <template>
 	<v-btn variant="text" class="media-control" aria-label="Playback Speed" :disabled="!supported">
-		{{ formatRate(currentRate) }}
+		{{ formatRate(playbackRate.playbackRate.value) }}
 
 		<v-menu location="top" activator="parent">
 			<v-list>
 				<v-list-item
-					v-for="(rate, index) in availableRates"
+					v-for="(rate, index) in playbackRate.availablePlaybackRates.value"
 					:key="index"
-					:value="index"
+					:value="rate"
 					@click="setRate(rate)"
 				>
 					<v-list-item-title>{{ formatRate(rate) }}</v-list-item-title>
@@ -17,56 +17,28 @@
 	</v-btn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed } from "vue";
+<script lang="ts" setup>
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
+import { usePlaybackRate } from "../composables";
 
-const PlaybackRateSwitcher = defineComponent({
-	name: "PlaybackRateSwitcher",
-	props: {
-		currentRate: {
-			type: Number,
-			required: true,
-		},
-		availableRates: {
-			type: Array as PropType<number[]>,
-			required: true,
-		},
-	},
-	setup(props) {
-		if (props.availableRates.length === 0) {
-			throw new Error("PlaybackRateSwitcher: availableRates must be a non-empty array.");
-		}
+const connection = useConnection();
+const roomApi = useRoomApi(connection);
+const playbackRate = usePlaybackRate();
 
-		const connection = useConnection();
-		const roomApi = useRoomApi(connection);
+function formatRate(rate: number) {
+	return (
+		rate.toLocaleString(undefined, {
+			maximumFractionDigits: 2,
+		}) + "x"
+	);
+}
 
-		function formatRate(rate: number) {
-			return (
-				rate.toLocaleString(undefined, {
-					maximumFractionDigits: 2,
-				}) + "x"
-			);
-		}
+function setRate(rate: number) {
+	roomApi.setPlaybackRate(rate);
+}
 
-		function setRate(rate: number) {
-			roomApi.setPlaybackRate(rate);
-		}
-
-		const supported = computed(() => {
-			return props.availableRates.length > 1;
-		});
-
-		return {
-			formatRate,
-			supported,
-			setRate,
-		};
-	},
-});
-
-export default PlaybackRateSwitcher;
+const supported = playbackRate.isPlaybackRateSupported;
 </script>
 
 <style lang="scss">

client/src/components/controls/VideoControls.vue

@@ -14,23 +14,15 @@
 			<VolumeControl />
 			<TimestampDisplay :current-position="truePosition" data-cy="timestamp-display" />
 			<div class="grow"><!-- Spacer --></div>
-			<ClosedCaptionsSwitcher
-				:supported="isCaptionsSupported"
-				:tracks="store.state.captions.availableTracks"
-				@enable-cc="value => player.setCaptionsEnabled(value)"
-				@cc-track="value => player.setCaptionsTrack(value)"
-			/>
-			<PlaybackRateSwitcher
-				:current-rate="store.state.room.playbackSpeed"
-				:available-rates="player?.getAvailablePlaybackRates() ?? [1]"
-			/>
+			<ClosedCaptionsSwitcher />
+			<PlaybackRateSwitcher />
 			<LayoutSwitcher />
 		</v-row>
 	</v-col>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, toRefs } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import BasicControls from "./BasicControls.vue";
 import ClosedCaptionsSwitcher from "./ClosedCaptionsSwitcher.vue";
@@ -40,9 +32,8 @@
 import VolumeControl from "./VolumeControl.vue";
 import PlaybackRateSwitcher from "./PlaybackRateSwitcher.vue";
 
-import type OmniPlayer from "../players/OmniPlayer.vue";
-import type { MediaPlayer, MediaPlayerWithCaptions } from "../players/OmniPlayer.vue";
 import { useStore } from "@/store";
+import { useMediaPlayer } from "../composables";
 
 export default defineComponent({
 	name: "VideoControls",
@@ -64,51 +55,23 @@
 			type: Number,
 			required: true,
 		},
-		player: {
-			type: Object as PropType<typeof OmniPlayer | null>,
-			required: true,
-		},
 		controlsVisible: {
 			type: Boolean,
 			default: false,
 		},
-		isCaptionsSupported: {
-			type: Boolean,
-			default: false,
-		},
 		mode: {
 			type: String as PropType<"in-video" | "outside-video">,
 			default: "in-video",
 		},
 	},
 	emits: [],
-	setup(props) {
+	setup() {
 		const store = useStore();
-		const { player } = toRefs(props);
-
-		function isPlayerPresent(p: Ref<typeof OmniPlayer>): p is Ref<typeof OmniPlayer> {
-			return !!p.value;
-		}
-
-		function isCaptionsSupported(
-			p: Ref<MediaPlayer | MediaPlayerWithCaptions>
-		): p is Ref<MediaPlayerWithCaptions> {
-			return (player.value as MediaPlayerWithCaptions)?.isCaptionsSupported() ?? false;
-		}
-		function getCaptionsTracks(): string[] {
-			if (!isPlayerPresent(player)) {
-				return [];
-			}
-			if (!isCaptionsSupported(player)) {
-				return [];
-			}
-			return player.value.getCaptionsTracks() ?? [];
-		}
+		const player = useMediaPlayer();
 
 		return {
 			store,
-
-			getCaptionsTracks,
+			player,
 		};
 	},
 });