From 0f43f56cc0c9e07d5ca9df64ce41fa4fe2ab4e34 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Mon, 25 Mar 2024 14:28:08 -0400
Subject: [PATCH 01/24] refactor basic media controls into useMediaControls

---
 .../components/composables/media-player.ts    | 46 ++++++++++++
 client/src/components/players/OmniPlayer.vue  | 72 +++++++++++--------
 client/src/views/Room.vue                     | 13 ++--
 3 files changed, 94 insertions(+), 37 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index ba08a9fbc..dc1038562 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -16,3 +16,49 @@ export function useVolume() {
 
 	return volume;
 }
+
+export class MediaController {
+	player: MediaPlayerV2 | null = null;
+
+	setPlayer(player: MediaPlayerV2) {
+		this.player = player;
+	}
+
+	async play() {
+		if (this.player) {
+			await this.player.play();
+		}
+	}
+
+	async pause() {
+		if (this.player) {
+			await this.player.pause();
+		}
+	}
+
+	getPosition() {
+		return this.player ? this.player.getPosition() : 0;
+	}
+
+	setPosition(position: number) {
+		if (this.player) {
+			this.player.setPosition(position);
+		}
+	}
+}
+
+export abstract class MediaPlayerV2 {
+	playing = ref(false);
+
+	abstract play(): Promise<void>;
+	abstract pause(): Promise<void>;
+
+	abstract getPosition(): number;
+	abstract setPosition(position: number): void;
+}
+
+export const mediaController = new MediaController();
+
+export function useMediaControls() {
+	return mediaController;
+}
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index f60398301..5e9f1370e 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -123,7 +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";
+import { MediaPlayerV2, useMediaControls, useVolume } from "../composables";
 
 const services = [
 	"youtube",
@@ -150,8 +150,8 @@ export interface MediaPlayer {
 	 */
 	pause(): void | Promise<void>;
 	setVolume(volume: number): void | Promise<void>;
-	getPosition(): number | Promise<number>;
-	setPosition(position: number): void | Promise<void>;
+	getPosition(): number;
+	setPosition(position: number): void;
 
 	isCaptionsSupported(): boolean;
 	getAvailablePlaybackRates(): number[];
@@ -193,6 +193,41 @@ export default defineComponent({
 
 		const player: Ref<MediaPlayer | null> = ref(null);
 
+		class OmniMediaPlayer extends MediaPlayerV2 {
+			constructor() {
+				super();
+			}
+
+			async play(): Promise<void> {
+				if (!checkForPlayer(player.value)) {
+					return Promise.reject("Player not available yet");
+				}
+				return player.value.play();
+			}
+			async pause(): Promise<void> {
+				if (!checkForPlayer(player.value)) {
+					return Promise.reject("Player not available yet");
+				}
+				return player.value.pause();
+			}
+			getPosition(): number {
+				if (!checkForPlayer(player.value)) {
+					return 0;
+				}
+				return player.value.getPosition();
+			}
+			setPosition(position: number): void {
+				if (!checkForPlayer(player.value)) {
+					return;
+				}
+				return player.value.setPosition(position);
+			}
+		}
+
+		const player2: MediaPlayerV2 = new OmniMediaPlayer();
+		const controls = ref(useMediaControls());
+		controls.value.setPlayer(player2);
+
 		function checkForPlayer(p: MediaPlayer | null): p is MediaPlayer {
 			if (!p) {
 				console.warn(
@@ -214,36 +249,12 @@ export default defineComponent({
 
 		const isPlayerPresent = computed(() => !!player.value);
 
-		function play(): void | Promise<void> {
-			if (!checkForPlayer(player.value)) {
-				return Promise.reject("Player not available yet");
-			}
-			return player.value.play();
-		}
-		function pause(): void | Promise<void> {
-			if (!checkForPlayer(player.value)) {
-				return Promise.reject("Player not available yet");
-			}
-			return player.value.pause();
-		}
 		function setVolume(volume: number) {
 			if (!checkForPlayer(player.value)) {
 				return Promise.reject("Player not available yet");
 			}
 			return player.value.setVolume(volume);
 		}
-		function getPosition() {
-			if (!checkForPlayer(player.value)) {
-				return 0;
-			}
-			return player.value.getPosition();
-		}
-		function setPosition(position: number) {
-			if (!checkForPlayer(player.value)) {
-				return;
-			}
-			return player.value.setPosition(position);
-		}
 		function isCaptionsSupported() {
 			if (!checkForPlayer(player.value)) {
 				return false;
@@ -363,11 +374,13 @@ export default defineComponent({
 
 		function onPlaying() {
 			hackReadyEdgeCase();
+			player2.playing.value = true;
 			emit("playing");
 		}
 
 		function onPaused() {
 			hackReadyEdgeCase();
+			player2.playing.value = false;
 			emit("paused");
 		}
 
@@ -433,11 +446,8 @@ export default defineComponent({
 			isPlayerPresent,
 			showBufferWarning,
 			renderedSpans,
-			play,
-			pause,
+			controls,
 			setVolume,
-			getPosition,
-			setPosition,
 			isCaptionsSupported,
 			isCaptionsEnabled,
 			setCaptionsEnabled,
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index e66081e89..c655b4f1c 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -236,7 +236,7 @@ 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";
+import { useMediaControls, useVolume } from "@/components/composables";
 
 const VIDEO_CONTROLS_HIDE_TIMEOUT = 3000;
 
@@ -342,10 +342,10 @@ export default defineComponent({
 			if (!isPlayerPresent(player)) {
 				return;
 			}
-			const currentTime = await player.value.getPosition();
+			const currentTime = mediaControls.getPosition();
 
 			if (Math.abs(newPosition - currentTime) > 1 && !mediaPlaybackBlocked.value) {
-				player.value.setPosition(newPosition);
+				mediaControls.setPosition(newPosition);
 			}
 		});
 
@@ -455,6 +455,7 @@ export default defineComponent({
 		// Indicates that starting playback is blocked by the browser. This usually means that the user needs
 		// to interact with the page before playback can start. This is because browsers block autoplaying videos.
 		const mediaPlaybackBlocked = ref(false);
+		const mediaControls = useMediaControls();
 
 		async function applyIsPlaying(playing: boolean): Promise<void> {
 			await waitForPlayer();
@@ -463,9 +464,9 @@ export default defineComponent({
 			}
 			try {
 				if (playing) {
-					await player.value.play();
+					await mediaControls.play();
 				} else {
-					await player.value.pause();
+					await mediaControls.pause();
 				}
 				mediaPlaybackBlocked.value = false;
 				return;
@@ -479,7 +480,7 @@ export default defineComponent({
 		}
 
 		function onClickUnblockPlayback(): void {
-			player.value?.setPosition(truePosition.value);
+			mediaControls.setPosition(truePosition.value);
 			applyIsPlaying(store.state.room.isPlaying);
 		}
 

From 316bd99de0aa801e7cfd8cf774bed8360c359563 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Mon, 25 Mar 2024 17:40:53 -0400
Subject: [PATCH 02/24] refactor captions controls into useCaptions

it feels pretty janky right now
missing changes
---
 .../components/composables/media-player.ts    | 90 ++++++++++++-------
 .../src/components/controls/VideoControls.vue | 53 ++++-------
 client/src/components/players/OmniPlayer.vue  | 23 ++++-
 client/src/views/Room.vue                     | 37 +++-----
 4 files changed, 104 insertions(+), 99 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index dc1038562..79b88cf43 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -1,5 +1,5 @@
 import { useStore } from "@/store";
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch, type Ref } from "vue";
 
 const volume = ref(100);
 
@@ -17,48 +17,72 @@ export function useVolume() {
 	return volume;
 }
 
-export class MediaController {
-	player: MediaPlayerV2 | null = null;
-
-	setPlayer(player: MediaPlayerV2) {
-		this.player = player;
-	}
-
-	async play() {
-		if (this.player) {
-			await this.player.play();
-		}
-	}
-
-	async pause() {
-		if (this.player) {
-			await this.player.pause();
-		}
-	}
-
-	getPosition() {
-		return this.player ? this.player.getPosition() : 0;
-	}
-
-	setPosition(position: number) {
-		if (this.player) {
-			this.player.setPosition(position);
-		}
-	}
-}
+// export class MediaController {
+// 	player: MediaPlayerV2  | null = null;
+// 	isCaptionsSupported = computed(() => this.player?.isCaptionsSupported.value ?? false);
+
+// 	setPlayer(player: MediaPlayerV2) {
+// 		this.player = player;
+// 	}
+
+// 	async play() {
+// 		if (this.player) {
+// 			await this.player.play();
+// 		}
+// 	}
+
+// 	async pause() {
+// 		if (this.player) {
+// 			await this.player.pause();
+// 		}
+// 	}
+
+// 	getPosition() {
+// 		return this.player ? this.player.getPosition() : 0;
+// 	}
+
+// 	setPosition(position: number) {
+// 		if (this.player) {
+// 			this.player.setPosition(position);
+// 		}
+// 	}
+// }
 
 export abstract class MediaPlayerV2 {
 	playing = ref(false);
+	isCaptionsSupported = ref(false);
 
 	abstract play(): Promise<void>;
 	abstract pause(): Promise<void>;
 
 	abstract getPosition(): number;
 	abstract setPosition(position: number): void;
+
+	getAvailablePlaybackRates(): number[] {
+		return [1];
+	}
 }
 
-export const mediaController = new MediaController();
+const player: Ref<MediaPlayerV2 | undefined> = ref(undefined);
+
+export function useMediaPlayer() {
+	return player;
+}
+
+export function isPlayerPresent(p: typeof player): p is Ref<MediaPlayerV2> {
+	return !!p.value;
+}
 
-export function useMediaControls() {
-	return mediaController;
+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,
+	};
 }
diff --git a/client/src/components/controls/VideoControls.vue b/client/src/components/controls/VideoControls.vue
index f49ef9fc8..312122408 100644
--- a/client/src/components/controls/VideoControls.vue
+++ b/client/src/components/controls/VideoControls.vue
@@ -15,10 +15,14 @@
 			<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)"
+				:supported="captions.isCaptionsSupported.value"
+				:tracks="captions.captionsTracks.value"
+				@enable-cc="
+					value => {
+						captions.isCaptionsEnabled.value = value;
+					}
+				"
+				@cc-track="value => (captions.currentTrack.value = value)"
 			/>
 			<PlaybackRateSwitcher
 				:current-rate="store.state.room.playbackSpeed"
@@ -30,7 +34,7 @@
 </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 +44,8 @@ import VideoProgressSlider from "./VideoProgressSlider.vue";
 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 { useCaptions, useMediaPlayer } from "../composables";
 
 export default defineComponent({
 	name: "VideoControls",
@@ -64,51 +67,25 @@ export default defineComponent({
 			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();
+		const captions = useCaptions();
 
 		return {
 			store,
-
-			getCaptionsTracks,
+			player,
+			captions,
 		};
 	},
 });
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 5e9f1370e..b700a210c 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -123,7 +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 { MediaPlayerV2, useMediaControls, useVolume } from "../composables";
+import { MediaPlayerV2, useCaptions, useMediaPlayer, useVolume } from "../composables";
 
 const services = [
 	"youtube",
@@ -225,8 +225,8 @@ export default defineComponent({
 		}
 
 		const player2: MediaPlayerV2 = new OmniMediaPlayer();
-		const controls = ref(useMediaControls());
-		controls.value.setPlayer(player2);
+		const controls = useMediaPlayer();
+		controls.value = player2;
 
 		function checkForPlayer(p: MediaPlayer | null): p is MediaPlayer {
 			if (!p) {
@@ -340,6 +340,7 @@ export default defineComponent({
 		);
 
 		const volume = useVolume();
+		const captions = useCaptions();
 		watch(volume, v => {
 			if (player.value) {
 				player.value.setVolume(v);
@@ -350,6 +351,22 @@ export default defineComponent({
 			if (player.value) {
 				player.value.setVolume(volume.value);
 			}
+			captions.isCaptionsSupported.value = isCaptionsSupported();
+			if (implementsCaptions(player.value)) {
+				captions.captionsTracks.value = player.value.getCaptionsTracks();
+			}
+		});
+		watch(captions.isCaptionsEnabled, v => {
+			if (player.value && implementsCaptions(player.value)) {
+				console.debug("Setting captions enabled", v);
+				player.value.setCaptionsEnabled(v);
+				captions.captionsTracks.value = player.value.getCaptionsTracks();
+			}
+		});
+		watch(captions.currentTrack, v => {
+			if (player.value && implementsCaptions(player.value) && v) {
+				player.value.setCaptionsTrack(v);
+			}
 		});
 
 		// player events re-emitted or data stored
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index c655b4f1c..b04a4e24d 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -33,7 +33,6 @@
 					>
 						<div class="player-container">
 							<OmniPlayer
-								ref="player"
 								:source="store.state.room.currentSource"
 								@apiready="onPlayerApiReady"
 								@playing="onPlaybackChange(true)"
@@ -64,8 +63,6 @@
 						:true-position="truePosition"
 						:controls-visible="controlsVisible"
 						:key="currentSource?.id"
-						:player="player"
-						:is-captions-supported="isCaptionsSupported()"
 						:mode="controlsMode"
 					/>
 				</div>
@@ -236,7 +233,7 @@ import VoteSkip from "@/components/VoteSkip.vue";
 import { waitForToken } from "@/util/token";
 import { useSfx } from "@/plugins/sfx";
 import { secondsToTimestamp } from "@/util/timestamp";
-import { useMediaControls, useVolume } from "@/components/composables";
+import { isPlayerPresent, useCaptions, useMediaPlayer, useVolume } from "@/components/composables";
 
 const VIDEO_CONTROLS_HIDE_TIMEOUT = 3000;
 
@@ -342,10 +339,10 @@ export default defineComponent({
 			if (!isPlayerPresent(player)) {
 				return;
 			}
-			const currentTime = mediaControls.getPosition();
+			const currentTime = player.value.getPosition();
 
 			if (Math.abs(newPosition - currentTime) > 1 && !mediaPlaybackBlocked.value) {
-				mediaControls.setPosition(newPosition);
+				player.value.setPosition(newPosition);
 			}
 		});
 
@@ -374,12 +371,12 @@ export default defineComponent({
 		}
 
 		async function waitForPlayer() {
-			if (isPlayerPresent(player) && player.value.isPlayerPresent) {
+			if (isPlayerPresent(player)) {
 				return;
 			}
 			await new Promise(resolve => {
 				const interval = setInterval(() => {
-					if (isPlayerPresent(player) && player.value.isPlayerPresent) {
+					if (isPlayerPresent(player)) {
 						clearInterval(interval);
 						resolve(true);
 					}
@@ -431,13 +428,9 @@ export default defineComponent({
 		});
 
 		// player management
-		const player = ref<typeof OmniPlayer | null>(null);
+		const player = useMediaPlayer();
 		const volume = useVolume();
 
-		function isPlayerPresent(p: Ref<typeof OmniPlayer | null>): p is Ref<typeof OmniPlayer> {
-			return !!p.value;
-		}
-
 		function togglePlayback() {
 			if (store.state.room.isPlaying) {
 				roomapi.pause();
@@ -455,7 +448,6 @@ export default defineComponent({
 		// Indicates that starting playback is blocked by the browser. This usually means that the user needs
 		// to interact with the page before playback can start. This is because browsers block autoplaying videos.
 		const mediaPlaybackBlocked = ref(false);
-		const mediaControls = useMediaControls();
 
 		async function applyIsPlaying(playing: boolean): Promise<void> {
 			await waitForPlayer();
@@ -464,9 +456,9 @@ export default defineComponent({
 			}
 			try {
 				if (playing) {
-					await mediaControls.play();
+					await player.value.play();
 				} else {
-					await mediaControls.pause();
+					await player.value.pause();
 				}
 				mediaPlaybackBlocked.value = false;
 				return;
@@ -480,7 +472,7 @@ export default defineComponent({
 		}
 
 		function onClickUnblockPlayback(): void {
-			mediaControls.setPosition(truePosition.value);
+			player.value?.setPosition(truePosition.value);
 			applyIsPlaying(store.state.room.isPlaying);
 		}
 
@@ -510,17 +502,12 @@ export default defineComponent({
 			await applyIsPlaying(store.state.room.isPlaying);
 		}
 
+		const captions = useCaptions();
 		function isCaptionsSupported() {
-			if (!isPlayerPresent(player)) {
-				return;
-			}
-			return player.value.isCaptionsSupported() ?? false;
+			return captions.isCaptionsSupported.value;
 		}
 		function getCaptionsTracks() {
-			if (!isPlayerPresent(player)) {
-				return;
-			}
-			return player.value.getCaptionsTracks() ?? [];
+			return captions.captionsTracks.value;
 		}
 
 		// misc UI stuff

From 29ae8d40452d2cc75cf4de056becaf8d6883f62a Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 09:11:33 -0400
Subject: [PATCH 03/24] refactor playback rate controls into usePlaybackRate

---
 .../components/composables/media-player.ts    | 49 +++++--------------
 .../controls/PlaybackRateSwitcher.vue         |  1 +
 .../src/components/controls/VideoControls.vue |  8 +--
 client/src/components/players/OmniPlayer.vue  | 43 +++++++++++++---
 4 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 79b88cf43..4e88462da 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -1,5 +1,5 @@
 import { useStore } from "@/store";
-import { computed, onMounted, ref, watch, type Ref } from "vue";
+import { onMounted, ref, watch, type Ref } from "vue";
 
 const volume = ref(100);
 
@@ -17,37 +17,6 @@ export function useVolume() {
 	return volume;
 }
 
-// export class MediaController {
-// 	player: MediaPlayerV2  | null = null;
-// 	isCaptionsSupported = computed(() => this.player?.isCaptionsSupported.value ?? false);
-
-// 	setPlayer(player: MediaPlayerV2) {
-// 		this.player = player;
-// 	}
-
-// 	async play() {
-// 		if (this.player) {
-// 			await this.player.play();
-// 		}
-// 	}
-
-// 	async pause() {
-// 		if (this.player) {
-// 			await this.player.pause();
-// 		}
-// 	}
-
-// 	getPosition() {
-// 		return this.player ? this.player.getPosition() : 0;
-// 	}
-
-// 	setPosition(position: number) {
-// 		if (this.player) {
-// 			this.player.setPosition(position);
-// 		}
-// 	}
-// }
-
 export abstract class MediaPlayerV2 {
 	playing = ref(false);
 	isCaptionsSupported = ref(false);
@@ -57,10 +26,6 @@ export abstract class MediaPlayerV2 {
 
 	abstract getPosition(): number;
 	abstract setPosition(position: number): void;
-
-	getAvailablePlaybackRates(): number[] {
-		return [1];
-	}
 }
 
 const player: Ref<MediaPlayerV2 | undefined> = ref(undefined);
@@ -86,3 +51,15 @@ export function useCaptions() {
 		currentTrack,
 	};
 }
+
+const isPlaybackRateSupported: Ref<boolean> = ref(false);
+const playbackRate: Ref<number> = ref(1);
+const availablePlaybackRates: Ref<number[]> = ref([1]);
+
+export function usePlaybackRate() {
+	return {
+		isPlaybackRateSupported,
+		playbackRate,
+		availablePlaybackRates,
+	};
+}
diff --git a/client/src/components/controls/PlaybackRateSwitcher.vue b/client/src/components/controls/PlaybackRateSwitcher.vue
index 056ef176d..4e846865a 100644
--- a/client/src/components/controls/PlaybackRateSwitcher.vue
+++ b/client/src/components/controls/PlaybackRateSwitcher.vue
@@ -51,6 +51,7 @@ const PlaybackRateSwitcher = defineComponent({
 		}
 
 		function setRate(rate: number) {
+			console.debug("Setting playback rate to", rate);
 			roomApi.setPlaybackRate(rate);
 		}
 
diff --git a/client/src/components/controls/VideoControls.vue b/client/src/components/controls/VideoControls.vue
index 312122408..a2b66fcbc 100644
--- a/client/src/components/controls/VideoControls.vue
+++ b/client/src/components/controls/VideoControls.vue
@@ -25,8 +25,8 @@
 				@cc-track="value => (captions.currentTrack.value = value)"
 			/>
 			<PlaybackRateSwitcher
-				:current-rate="store.state.room.playbackSpeed"
-				:available-rates="player?.getAvailablePlaybackRates() ?? [1]"
+				:current-rate="playbackRate.playbackRate.value"
+				:available-rates="playbackRate.availablePlaybackRates.value"
 			/>
 			<LayoutSwitcher />
 		</v-row>
@@ -45,7 +45,7 @@ import VolumeControl from "./VolumeControl.vue";
 import PlaybackRateSwitcher from "./PlaybackRateSwitcher.vue";
 
 import { useStore } from "@/store";
-import { useCaptions, useMediaPlayer } from "../composables";
+import { useCaptions, useMediaPlayer, usePlaybackRate } from "../composables";
 
 export default defineComponent({
 	name: "VideoControls",
@@ -81,11 +81,13 @@ export default defineComponent({
 		const store = useStore();
 		const player = useMediaPlayer();
 		const captions = useCaptions();
+		const playbackRate = usePlaybackRate();
 
 		return {
 			store,
 			player,
 			captions,
+			playbackRate,
 		};
 	},
 });
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index b700a210c..c54e44540 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -123,7 +123,14 @@ 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 { MediaPlayerV2, useCaptions, useMediaPlayer, useVolume } from "../composables";
+import {
+	MediaPlayerV2,
+	useCaptions,
+	useMediaPlayer,
+	usePlaybackRate,
+	useVolume,
+} from "../composables";
+import { watchEffect } from "vue";
 
 const services = [
 	"youtube",
@@ -165,8 +172,8 @@ export interface MediaPlayerWithCaptions extends MediaPlayer {
 }
 
 export interface MediaPlayerWithPlaybackRate extends MediaPlayer {
-	getPlaybackRate(): Promise<number>;
-	setPlaybackRate(rate: number): Promise<void>;
+	getPlaybackRate(): number;
+	setPlaybackRate(rate: number): void;
 }
 
 export default defineComponent({
@@ -244,7 +251,7 @@ export default defineComponent({
 		}
 
 		function implementsPlaybackRate(p: MediaPlayer | null): p is MediaPlayerWithPlaybackRate {
-			return !!p && p.getAvailablePlaybackRates().length > 0;
+			return !!p && p.getAvailablePlaybackRates().length > 1;
 		}
 
 		const isPlayerPresent = computed(() => !!player.value);
@@ -314,12 +321,12 @@ export default defineComponent({
 			}
 			return player.value.getAvailablePlaybackRates();
 		}
-		function getPlaybackRate(): Promise<number> {
+		function getPlaybackRate(): number {
 			if (!checkForPlayer(player.value)) {
-				return Promise.resolve(1);
+				return 1;
 			}
 			if (!implementsPlaybackRate(player.value)) {
-				return Promise.resolve(1);
+				return 1;
 			}
 			return player.value.getPlaybackRate();
 		}
@@ -352,6 +359,7 @@ export default defineComponent({
 				player.value.setVolume(volume.value);
 			}
 			captions.isCaptionsSupported.value = isCaptionsSupported();
+			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 			if (implementsCaptions(player.value)) {
 				captions.captionsTracks.value = player.value.getCaptionsTracks();
 			}
@@ -368,10 +376,30 @@ export default defineComponent({
 				player.value.setCaptionsTrack(v);
 			}
 		});
+		const playbackRate = usePlaybackRate();
+		watch(playbackRate.isPlaybackRateSupported, v => {
+			console.debug("Playback rate supported", v);
+			if (!v || !player.value) {
+				playbackRate.availablePlaybackRates.value = [1];
+				playbackRate.playbackRate.value = 1;
+			}
+		});
+		watch(playbackRate.playbackRate, v => {
+			if (player.value && implementsPlaybackRate(player.value)) {
+				player.value.setPlaybackRate(v);
+			}
+		});
+		watchEffect(() => {
+			playbackRate.playbackRate.value = store.state.room.playbackSpeed;
+		});
 
 		// player events re-emitted or data stored
 		function onApiReady() {
 			setVolume(volume.value);
+			if (implementsPlaybackRate(player.value)) {
+				playbackRate.availablePlaybackRates.value =
+					player.value.getAvailablePlaybackRates();
+			}
 			emit("apiready");
 		}
 
@@ -464,6 +492,7 @@ export default defineComponent({
 			showBufferWarning,
 			renderedSpans,
 			controls,
+			playbackRate,
 			setVolume,
 			isCaptionsSupported,
 			isCaptionsEnabled,

From b3b9ef73cbb3bbf48ab26910fbf020d37a4a47d0 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 09:28:03 -0400
Subject: [PATCH 04/24] simplify how playback rate controls are hooked up

---
 .../controls/PlaybackRateSwitcher.vue         | 80 +++++++------------
 .../src/components/controls/VideoControls.vue |  9 +--
 2 files changed, 29 insertions(+), 60 deletions(-)

diff --git a/client/src/components/controls/PlaybackRateSwitcher.vue b/client/src/components/controls/PlaybackRateSwitcher.vue
index 4e846865a..42ea78648 100644
--- a/client/src/components/controls/PlaybackRateSwitcher.vue
+++ b/client/src/components/controls/PlaybackRateSwitcher.vue
@@ -1,13 +1,18 @@
 <template>
-	<v-btn variant="text" class="media-control" aria-label="Playback Speed" :disabled="!supported">
-		{{ formatRate(currentRate) }}
+	<v-btn
+		variant="text"
+		class="media-control"
+		aria-label="Playback Speed"
+		:disabled="!playbackRate.isPlaybackRateSupported"
+	>
+		{{ 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,57 +22,26 @@
 	</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";
-
-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);
-
-		function formatRate(rate: number) {
-			return (
-				rate.toLocaleString(undefined, {
-					maximumFractionDigits: 2,
-				}) + "x"
-			);
-		}
-
-		function setRate(rate: number) {
-			console.debug("Setting playback rate to", rate);
-			roomApi.setPlaybackRate(rate);
-		}
-
-		const supported = computed(() => {
-			return props.availableRates.length > 1;
-		});
-
-		return {
-			formatRate,
-			supported,
-			setRate,
-		};
-	},
-});
-
-export default PlaybackRateSwitcher;
+import { usePlaybackRate } from "../composables";
+
+const connection = useConnection();
+const roomApi = useRoomApi(connection);
+const playbackRate = usePlaybackRate();
+
+function formatRate(rate: number) {
+	return (
+		rate.toLocaleString(undefined, {
+			maximumFractionDigits: 2,
+		}) + "x"
+	);
+}
+
+function setRate(rate: number) {
+	roomApi.setPlaybackRate(rate);
+}
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/controls/VideoControls.vue b/client/src/components/controls/VideoControls.vue
index a2b66fcbc..a1d54f5db 100644
--- a/client/src/components/controls/VideoControls.vue
+++ b/client/src/components/controls/VideoControls.vue
@@ -24,10 +24,7 @@
 				"
 				@cc-track="value => (captions.currentTrack.value = value)"
 			/>
-			<PlaybackRateSwitcher
-				:current-rate="playbackRate.playbackRate.value"
-				:available-rates="playbackRate.availablePlaybackRates.value"
-			/>
+			<PlaybackRateSwitcher />
 			<LayoutSwitcher />
 		</v-row>
 	</v-col>
@@ -45,7 +42,7 @@ import VolumeControl from "./VolumeControl.vue";
 import PlaybackRateSwitcher from "./PlaybackRateSwitcher.vue";
 
 import { useStore } from "@/store";
-import { useCaptions, useMediaPlayer, usePlaybackRate } from "../composables";
+import { useCaptions, useMediaPlayer } from "../composables";
 
 export default defineComponent({
 	name: "VideoControls",
@@ -81,13 +78,11 @@ export default defineComponent({
 		const store = useStore();
 		const player = useMediaPlayer();
 		const captions = useCaptions();
-		const playbackRate = usePlaybackRate();
 
 		return {
 			store,
 			player,
 			captions,
-			playbackRate,
 		};
 	},
 });

From 219a258ab232a08db77fa1bdb4b159707bf53d8a Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 09:37:47 -0400
Subject: [PATCH 05/24] simplify how captions controls are hooked up

---
 .../controls/ClosedCaptionsSwitcher.vue       | 53 +++++++++----------
 .../src/components/controls/VideoControls.vue | 15 +-----
 2 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/client/src/components/controls/ClosedCaptionsSwitcher.vue b/client/src/components/controls/ClosedCaptionsSwitcher.vue
index 4d005b0c3..e8cb49a24 100644
--- a/client/src/components/controls/ClosedCaptionsSwitcher.vue
+++ b/client/src/components/controls/ClosedCaptionsSwitcher.vue
@@ -2,20 +2,29 @@
 	<v-btn
 		variant="text"
 		icon
-		:disabled="!supported"
+		:disabled="!captions.isCaptionsSupported.value"
 		class="media-control"
 		aria-label="Closed Captions"
 	>
 		<v-icon>mdi-closed-caption</v-icon>
-		<v-menu location="top" offset-y activator="parent" :disabled="!supported">
+		<v-menu
+			location="top"
+			offset-y
+			activator="parent"
+			:disabled="!captions.isCaptionsSupported.value"
+		>
 			<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 +35,21 @@
 	</v-btn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue";
-
-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);
-		}
+<script lang="ts" setup>
+import { useCaptions } from "../composables";
 
-		function setCaptionsTrack(value: string) {
-			emit("cc-track", value);
-		}
+const captions = useCaptions();
 
-		return {
-			setCaptionsEnabled,
-			setCaptionsTrack,
-		};
-	},
-});
+function setCaptionsEnabled(value: boolean) {
+	captions.isCaptionsEnabled.value = value;
+}
 
-export default ClosedCaptionsSwitcher;
+function setCaptionsTrack(value: string) {
+	if (!captions.isCaptionsEnabled.value) {
+		captions.isCaptionsEnabled.value = true;
+	}
+	captions.currentTrack.value = value;
+}
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/controls/VideoControls.vue b/client/src/components/controls/VideoControls.vue
index a1d54f5db..ec19a3688 100644
--- a/client/src/components/controls/VideoControls.vue
+++ b/client/src/components/controls/VideoControls.vue
@@ -14,16 +14,7 @@
 			<VolumeControl />
 			<TimestampDisplay :current-position="truePosition" data-cy="timestamp-display" />
 			<div class="grow"><!-- Spacer --></div>
-			<ClosedCaptionsSwitcher
-				:supported="captions.isCaptionsSupported.value"
-				:tracks="captions.captionsTracks.value"
-				@enable-cc="
-					value => {
-						captions.isCaptionsEnabled.value = value;
-					}
-				"
-				@cc-track="value => (captions.currentTrack.value = value)"
-			/>
+			<ClosedCaptionsSwitcher />
 			<PlaybackRateSwitcher />
 			<LayoutSwitcher />
 		</v-row>
@@ -42,7 +33,7 @@ import VolumeControl from "./VolumeControl.vue";
 import PlaybackRateSwitcher from "./PlaybackRateSwitcher.vue";
 
 import { useStore } from "@/store";
-import { useCaptions, useMediaPlayer } from "../composables";
+import { useMediaPlayer } from "../composables";
 
 export default defineComponent({
 	name: "VideoControls",
@@ -77,12 +68,10 @@ export default defineComponent({
 	setup() {
 		const store = useStore();
 		const player = useMediaPlayer();
-		const captions = useCaptions();
 
 		return {
 			store,
 			player,
-			captions,
 		};
 	},
 });

From 8cafe8583e0e009c58f3461abfdde93fbc39cd05 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 10:05:35 -0400
Subject: [PATCH 06/24] fix some errors being emitted and remove dead code

---
 client/src/components/players/OmniPlayer.vue | 127 ++++---------------
 1 file changed, 25 insertions(+), 102 deletions(-)

diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index c54e44540..df64d2c03 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -122,7 +122,16 @@ import { isInTimeRanges, secondsToTimestamp } from "@/util/timestamp";
 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 {
+	defineComponent,
+	defineAsyncComponent,
+	PropType,
+	ref,
+	Ref,
+	computed,
+	watch,
+	toRef,
+} from "vue";
 import {
 	MediaPlayerV2,
 	useCaptions,
@@ -256,95 +265,12 @@ export default defineComponent({
 
 		const isPlayerPresent = computed(() => !!player.value);
 
-		function setVolume(volume: number) {
-			if (!checkForPlayer(player.value)) {
-				return Promise.reject("Player not available yet");
-			}
-			return player.value.setVolume(volume);
-		}
 		function isCaptionsSupported() {
 			if (!checkForPlayer(player.value)) {
 				return false;
 			}
-			if (!implementsCaptions(player.value)) {
-				return false;
-			}
-			return player.value.isCaptionsSupported() ?? false;
-		}
-		function isCaptionsEnabled() {
-			if (!checkForPlayer(player.value)) {
-				return;
-			}
-			if (!implementsCaptions(player.value)) {
-				return false;
-			}
-			return player.value.isCaptionsEnabled();
-		}
-		function setCaptionsEnabled(enabled: boolean) {
-			if (!checkForPlayer(player.value)) {
-				return;
-			}
-			if (!implementsCaptions(player.value)) {
-				return false;
-			}
-			player.value.setCaptionsEnabled(enabled);
-		}
-		function toggleCaptions() {
-			setCaptionsEnabled(!isCaptionsEnabled());
-		}
-		function getCaptionsTracks(): string[] {
-			if (!checkForPlayer(player.value)) {
-				return [];
-			}
-			if (!implementsCaptions(player.value)) {
-				return [];
-			}
-			return player.value.getCaptionsTracks();
+			return implementsCaptions(player.value);
 		}
-		function setCaptionsTrack(track: string) {
-			if (!checkForPlayer(player.value)) {
-				return;
-			}
-			if (!implementsCaptions(player.value)) {
-				return;
-			}
-
-			if (!isCaptionsEnabled()) {
-				setCaptionsEnabled(true);
-			}
-			player.value.setCaptionsTrack(track);
-		}
-
-		function getAvailablePlaybackRates(): number[] {
-			if (!checkForPlayer(player.value)) {
-				return [1];
-			}
-			return player.value.getAvailablePlaybackRates();
-		}
-		function getPlaybackRate(): number {
-			if (!checkForPlayer(player.value)) {
-				return 1;
-			}
-			if (!implementsPlaybackRate(player.value)) {
-				return 1;
-			}
-			return player.value.getPlaybackRate();
-		}
-		function setPlaybackRate(rate: number) {
-			if (!checkForPlayer(player.value)) {
-				return;
-			}
-			if (!implementsPlaybackRate(player.value)) {
-				return;
-			}
-			player.value.setPlaybackRate(rate);
-		}
-		watch(
-			() => store.state.room.playbackSpeed,
-			(speed: number) => {
-				setPlaybackRate(speed);
-			}
-		);
 
 		const volume = useVolume();
 		const captions = useCaptions();
@@ -355,14 +281,9 @@ export default defineComponent({
 		});
 		watch(player, () => {
 			console.debug("Player changed", player.value);
-			if (player.value) {
-				player.value.setVolume(volume.value);
-			}
+			// note that we have to wait for the player's api to be ready before we can call any methods on it
 			captions.isCaptionsSupported.value = isCaptionsSupported();
 			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
-			if (implementsCaptions(player.value)) {
-				captions.captionsTracks.value = player.value.getCaptionsTracks();
-			}
 		});
 		watch(captions.isCaptionsEnabled, v => {
 			if (player.value && implementsCaptions(player.value)) {
@@ -376,6 +297,13 @@ export default defineComponent({
 				player.value.setCaptionsTrack(v);
 			}
 		});
+		const source = toRef(() => props.source);
+		watch(source, () => {
+			captions.isCaptionsSupported.value = isCaptionsSupported();
+			if (implementsCaptions(player.value)) {
+				captions.captionsTracks.value = player.value.getCaptionsTracks();
+			}
+		});
 		const playbackRate = usePlaybackRate();
 		watch(playbackRate.isPlaybackRateSupported, v => {
 			console.debug("Playback rate supported", v);
@@ -395,7 +323,12 @@ export default defineComponent({
 
 		// player events re-emitted or data stored
 		function onApiReady() {
-			setVolume(volume.value);
+			if (player.value) {
+				player.value.setVolume(volume.value);
+			}
+			if (implementsCaptions(player.value)) {
+				captions.captionsTracks.value = player.value.getCaptionsTracks();
+			}
 			if (implementsPlaybackRate(player.value)) {
 				playbackRate.availablePlaybackRates.value =
 					player.value.getAvailablePlaybackRates();
@@ -493,16 +426,6 @@ export default defineComponent({
 			renderedSpans,
 			controls,
 			playbackRate,
-			setVolume,
-			isCaptionsSupported,
-			isCaptionsEnabled,
-			setCaptionsEnabled,
-			toggleCaptions,
-			getCaptionsTracks,
-			setCaptionsTrack,
-			getAvailablePlaybackRates,
-			getPlaybackRate,
-			setPlaybackRate,
 		};
 	},
 });

From a95af6d9bcc962a521337788235a493edf7d00d5 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 10:15:30 -0400
Subject: [PATCH 07/24] fix youtube and plyr players not grabbing captions when
 they can

---
 client/src/components/players/PlyrPlayer.vue  | 17 ++++++-----------
 .../src/components/players/YoutubePlayer.vue  | 12 ++++++++----
 client/src/store.ts                           |  3 ---
 client/src/stores/captions.ts                 | 19 -------------------
 4 files changed, 14 insertions(+), 37 deletions(-)
 delete mode 100644 client/src/stores/captions.ts

diff --git a/client/src/components/players/PlyrPlayer.vue b/client/src/components/players/PlyrPlayer.vue
index 6568b2202..5bb84dcef 100644
--- a/client/src/components/players/PlyrPlayer.vue
+++ b/client/src/components/players/PlyrPlayer.vue
@@ -12,6 +12,7 @@ import dashjs from "dashjs";
 import "plyr/src/sass/plyr.scss";
 import { useStore } from "@/store";
 import type { MediaPlayerWithCaptions, MediaPlayerWithPlaybackRate } from "./OmniPlayer.vue";
+import { useCaptions } from "../composables";
 
 export default defineComponent({
 	name: "PlyrPlayer",
@@ -39,7 +40,6 @@ export default defineComponent({
 		const player = ref<Plyr | undefined>();
 		let hls: Hls | undefined = undefined;
 		let dash: dashjs.MediaPlayerClass | undefined = undefined;
-		const store = useStore();
 
 		const playerImpl: MediaPlayerWithCaptions & MediaPlayerWithPlaybackRate = {
 			play() {
@@ -122,7 +122,7 @@ export default defineComponent({
 			getAvailablePlaybackRates(): number[] {
 				return [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
 			},
-			async getPlaybackRate(): Promise<number> {
+			getPlaybackRate(): number {
 				if (!player.value) {
 					console.error("player not ready");
 					return 1;
@@ -151,6 +151,7 @@ export default defineComponent({
 			return 0;
 		}
 
+		const captions = useCaptions();
 		onMounted(() => {
 			videoElem.value = document.getElementById("directplayer") as HTMLVideoElement;
 			player.value = new Plyr(videoElem.value, {
@@ -176,9 +177,7 @@ export default defineComponent({
 			player.value.on("loadstart", () => emit("buffering"));
 			player.value.on("canplay", () => {
 				emit("ready");
-				store.commit("captions/SET_AVAILABLE_TRACKS", {
-					tracks: playerImpl.getCaptionsTracks(),
-				});
+				captions.captionsTracks.value = playerImpl.getCaptionsTracks();
 			});
 			player.value.on("progress", () => {
 				if (!player.value) {
@@ -230,9 +229,7 @@ export default defineComponent({
 				hls.on(Hls.Events.MANIFEST_PARSED, () => {
 					console.info("PlyrPlayer: hls.js manifest parsed");
 					emit("ready");
-					store.commit("captions/SET_AVAILABLE_TRACKS", {
-						tracks: playerImpl.getCaptionsTracks(),
-					});
+					captions.captionsTracks.value = playerImpl.getCaptionsTracks();
 				});
 				hls.on(Hls.Events.ERROR, (event, data) => {
 					console.error("PlyrPlayer: hls.js error:", event, data);
@@ -267,9 +264,7 @@ export default defineComponent({
 				dash.on("manifestLoaded", () => {
 					console.info("PlyrPlayer: dash.js manifest loaded");
 					emit("ready");
-					store.commit("captions/SET_AVAILABLE_TRACKS", {
-						tracks: playerImpl.getCaptionsTracks(),
-					});
+					captions.captionsTracks.value = playerImpl.getCaptionsTracks();
 				});
 				dash.on("error", (event: unknown) => {
 					console.error("PlyrPlayer: dash.js error:", event);
diff --git a/client/src/components/players/YoutubePlayer.vue b/client/src/components/players/YoutubePlayer.vue
index 1eb1afaca..acdf1a1f5 100644
--- a/client/src/components/players/YoutubePlayer.vue
+++ b/client/src/components/players/YoutubePlayer.vue
@@ -11,6 +11,7 @@ import DebugPlayerWatcher from "@/components/debug/DebugPlayerWatcher.vue";
 import { getSdk } from "@/util/playerHelper.js";
 import toast from "@/util/toast";
 import { ToastStyle } from "@/models/toast";
+import { useCaptions } from "../composables";
 
 const YOUTUBE_IFRAME_API_URL = "https://www.youtube.com/iframe_api";
 // TODO: convert to ts and use an enum for this.
@@ -116,6 +117,12 @@ export default {
 			delete this.player;
 		}
 	},
+	setup() {
+		const captions = useCaptions();
+		return {
+			captions,
+		};
+	},
 	methods: {
 		play() {
 			if (!this.player) {
@@ -217,10 +224,7 @@ export default {
 
 		onApiChange() {
 			console.debug(`youtube: onApiChange`);
-
-			this.$store.commit("captions/SET_AVAILABLE_TRACKS", {
-				tracks: this.getCaptionsTracks(),
-			});
+			this.captions.captionsTracks.value = this.getCaptionsTracks();
 		},
 		onReady() {
 			this.$emit("apiready");
diff --git a/client/src/store.ts b/client/src/store.ts
index 8c2fe13cd..76836c5e9 100644
--- a/client/src/store.ts
+++ b/client/src/store.ts
@@ -5,7 +5,6 @@ import { settingsModule, SettingsState } from "@/stores/settings";
 import { ToastStyle } from "./models/toast";
 import { eventsModule } from "@/stores/events";
 import { miscModule, MiscState } from "@/stores/misc";
-import { captionsModule, CaptionsState } from "@/stores/captions";
 import { InjectionKey } from "vue";
 import _ from "lodash";
 import { RoomState, roomModule } from "./stores/room";
@@ -16,7 +15,6 @@ export type FullOTTStoreState = BaseStoreState & {
 	users: UsersState;
 	settings: SettingsState;
 	misc: MiscState;
-	captions: CaptionsState;
 };
 
 interface BaseStoreState {
@@ -109,7 +107,6 @@ export function buildNewStore() {
 			users: usersModule,
 			settings: settingsModule,
 			misc: miscModule,
-			captions: captionsModule,
 		},
 	}) as Store<FullOTTStoreState>;
 }
diff --git a/client/src/stores/captions.ts b/client/src/stores/captions.ts
deleted file mode 100644
index 006e0d61e..000000000
--- a/client/src/stores/captions.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import _ from "lodash";
-import { Module } from "vuex/types";
-import Vuex from "vuex";
-
-export interface CaptionsState {
-	availableTracks: string[];
-}
-
-export const captionsModule: Module<CaptionsState, unknown> = {
-	namespaced: true,
-	state: {
-		availableTracks: [],
-	},
-	mutations: {
-		SET_AVAILABLE_TRACKS(state: CaptionsState, payload: { tracks: string[] }) {
-			state.availableTracks = payload.tracks;
-		},
-	},
-};

From 2d58daa5008a14d4e28657ca207e5a3ed444bd64 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 10:29:56 -0400
Subject: [PATCH 08/24] fix playback rate not getting applied on room join

---
 client/src/components/players/OmniPlayer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index df64d2c03..2e2dfc4cf 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -332,6 +332,7 @@ export default defineComponent({
 			if (implementsPlaybackRate(player.value)) {
 				playbackRate.availablePlaybackRates.value =
 					player.value.getAvailablePlaybackRates();
+				player.value.setPlaybackRate(playbackRate.playbackRate.value);
 			}
 			emit("apiready");
 		}

From e1af77f620d25cc4c281241bbd4f3255bf1d86fe Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 10:52:57 -0400
Subject: [PATCH 09/24] fix errors emitted by not properly waiting for player
 apis to be ready

---
 .../components/composables/media-player.ts    |  1 +
 client/src/components/players/OmniPlayer.vue  |  4 +++-
 client/src/views/Room.vue                     | 22 ++++++++++++++-----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 4e88462da..8d67e2bc8 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -18,6 +18,7 @@ export function useVolume() {
 }
 
 export abstract class MediaPlayerV2 {
+	apiReady = ref(false);
 	playing = ref(false);
 	isCaptionsSupported = ref(false);
 
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 2e2dfc4cf..2363768d9 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -252,7 +252,7 @@ export default defineComponent({
 					} Is there a player implemented for ${props.source?.service}?`
 				);
 			}
-			return !!p;
+			return controls.value?.apiReady.value ?? false;
 		}
 
 		function implementsCaptions(p: MediaPlayer | null): p is MediaPlayerWithCaptions {
@@ -282,6 +282,7 @@ export default defineComponent({
 		watch(player, () => {
 			console.debug("Player changed", player.value);
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
+			player2.apiReady.value = false;
 			captions.isCaptionsSupported.value = isCaptionsSupported();
 			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 		});
@@ -323,6 +324,7 @@ export default defineComponent({
 
 		// player events re-emitted or data stored
 		function onApiReady() {
+			player2.apiReady.value = true;
 			if (player.value) {
 				player.value.setVolume(volume.value);
 			}
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index b04a4e24d..953b0f8bd 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -371,16 +371,28 @@ export default defineComponent({
 		}
 
 		async function waitForPlayer() {
-			if (isPlayerPresent(player)) {
+			if (isPlayerPresent(player) && player.value.apiReady.value) {
 				return;
 			}
 			await new Promise(resolve => {
-				const interval = setInterval(() => {
-					if (isPlayerPresent(player)) {
-						clearInterval(interval);
+				const stop = watch(player, async newPlayer => {
+					if (newPlayer) {
+						stop();
 						resolve(true);
 					}
-				}, 100);
+				});
+			});
+			if (!isPlayerPresent(player)) {
+				return Promise.reject("Can't wait for player api ready: player not present");
+			}
+			console.log("detected player, waiting for api ready");
+			await new Promise(resolve => {
+				const stop = watch(player.value.apiReady, async newReady => {
+					if (newReady) {
+						stop();
+						resolve(true);
+					}
+				});
 			});
 		}
 

From a2bb44ea8518d2fc410b08ad2330d80d4cd31849 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 11:39:03 -0400
Subject: [PATCH 10/24] fix misc other bugs fix captions off not working when
 captions were enabled on the video without going through OTT ui

---
 client/src/components/players/OmniPlayer.vue | 13 +++----------
 client/src/components/players/PlyrPlayer.vue |  2 ++
 client/src/views/Room.vue                    |  3 +++
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 2363768d9..7e2317a3b 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -252,7 +252,7 @@ export default defineComponent({
 					} Is there a player implemented for ${props.source?.service}?`
 				);
 			}
-			return controls.value?.apiReady.value ?? false;
+			return player2.apiReady.value ?? false;
 		}
 
 		function implementsCaptions(p: MediaPlayer | null): p is MediaPlayerWithCaptions {
@@ -283,8 +283,6 @@ export default defineComponent({
 			console.debug("Player changed", player.value);
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
 			player2.apiReady.value = false;
-			captions.isCaptionsSupported.value = isCaptionsSupported();
-			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 		});
 		watch(captions.isCaptionsEnabled, v => {
 			if (player.value && implementsCaptions(player.value)) {
@@ -298,13 +296,6 @@ export default defineComponent({
 				player.value.setCaptionsTrack(v);
 			}
 		});
-		const source = toRef(() => props.source);
-		watch(source, () => {
-			captions.isCaptionsSupported.value = isCaptionsSupported();
-			if (implementsCaptions(player.value)) {
-				captions.captionsTracks.value = player.value.getCaptionsTracks();
-			}
-		});
 		const playbackRate = usePlaybackRate();
 		watch(playbackRate.isPlaybackRateSupported, v => {
 			console.debug("Playback rate supported", v);
@@ -325,6 +316,8 @@ export default defineComponent({
 		// player events re-emitted or data stored
 		function onApiReady() {
 			player2.apiReady.value = true;
+			captions.isCaptionsSupported.value = isCaptionsSupported();
+			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 			if (player.value) {
 				player.value.setVolume(volume.value);
 			}
diff --git a/client/src/components/players/PlyrPlayer.vue b/client/src/components/players/PlyrPlayer.vue
index 5bb84dcef..8b41352ae 100644
--- a/client/src/components/players/PlyrPlayer.vue
+++ b/client/src/components/players/PlyrPlayer.vue
@@ -230,6 +230,7 @@ export default defineComponent({
 					console.info("PlyrPlayer: hls.js manifest parsed");
 					emit("ready");
 					captions.captionsTracks.value = playerImpl.getCaptionsTracks();
+					captions.isCaptionsEnabled.value = playerImpl.isCaptionsEnabled();
 				});
 				hls.on(Hls.Events.ERROR, (event, data) => {
 					console.error("PlyrPlayer: hls.js error:", event, data);
@@ -265,6 +266,7 @@ export default defineComponent({
 					console.info("PlyrPlayer: dash.js manifest loaded");
 					emit("ready");
 					captions.captionsTracks.value = playerImpl.getCaptionsTracks();
+					captions.isCaptionsEnabled.value = playerImpl.isCaptionsEnabled();
 				});
 				dash.on("error", (event: unknown) => {
 					console.error("PlyrPlayer: dash.js error:", event);
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index 953b0f8bd..60e6efe49 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -385,6 +385,9 @@ export default defineComponent({
 			if (!isPlayerPresent(player)) {
 				return Promise.reject("Can't wait for player api ready: player not present");
 			}
+			if (player.value.apiReady.value) {
+				return;
+			}
 			console.log("detected player, waiting for api ready");
 			await new Promise(resolve => {
 				const stop = watch(player.value.apiReady, async newReady => {

From 23024756446aadb86f47a68fe9d0f454fe4c94ff Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 13:24:32 -0400
Subject: [PATCH 11/24] better logging around waitForPlayer

---
 .../components/composables/media-player.ts    |  4 ++--
 client/src/views/Room.vue                     | 23 ++++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 8d67e2bc8..eb5a281dd 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -1,5 +1,5 @@
 import { useStore } from "@/store";
-import { onMounted, ref, watch, type Ref } from "vue";
+import { onMounted, ref, watch, type Ref, shallowRef } from "vue";
 
 const volume = ref(100);
 
@@ -29,7 +29,7 @@ export abstract class MediaPlayerV2 {
 	abstract setPosition(position: number): void;
 }
 
-const player: Ref<MediaPlayerV2 | undefined> = ref(undefined);
+const player: Ref<MediaPlayerV2 | undefined> = shallowRef(undefined);
 
 export function useMediaPlayer() {
 	return player;
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index 60e6efe49..7765bb1aa 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -371,24 +371,25 @@ export default defineComponent({
 		}
 
 		async function waitForPlayer() {
-			if (isPlayerPresent(player) && player.value.apiReady.value) {
-				return;
-			}
-			await new Promise(resolve => {
-				const stop = watch(player, async newPlayer => {
-					if (newPlayer) {
-						stop();
-						resolve(true);
-					}
+			if (!isPlayerPresent(player)) {
+				console.debug("waiting for player");
+				await new Promise(resolve => {
+					const stop = watch(player, async newPlayer => {
+						if (newPlayer) {
+							stop();
+							resolve(true);
+						}
+					});
 				});
-			});
+			}
 			if (!isPlayerPresent(player)) {
 				return Promise.reject("Can't wait for player api ready: player not present");
 			}
 			if (player.value.apiReady.value) {
+				console.debug("player api is already ready");
 				return;
 			}
-			console.log("detected player, waiting for api ready");
+			console.debug("detected player, waiting for api ready");
 			await new Promise(resolve => {
 				const stop = watch(player.value.apiReady, async newReady => {
 					if (newReady) {

From 3708508e401a6e6c9e209bf1dc8902984ec95785 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 15:31:13 -0400
Subject: [PATCH 12/24] fix mediaplayerv2 using nested refs and not completely
 working right

---
 .../components/composables/media-player.ts    | 59 +++++++++++---
 client/src/components/players/OmniPlayer.vue  | 77 +++----------------
 client/src/views/Room.vue                     | 31 ++++----
 3 files changed, 73 insertions(+), 94 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index eb5a281dd..6dd50f3b0 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -1,5 +1,6 @@
 import { useStore } from "@/store";
-import { onMounted, ref, watch, type Ref, shallowRef } from "vue";
+import { onMounted, ref, watch, type Ref, shallowRef, provide, inject } from "vue";
+import type { MediaPlayer } from "../players/OmniPlayer.vue";
 
 const volume = ref(100);
 
@@ -17,27 +18,63 @@ export function useVolume() {
 	return volume;
 }
 
-export abstract class MediaPlayerV2 {
+export class MediaPlayerV2 {
+	player: Ref<MediaPlayer | null> = shallowRef(null);
 	apiReady = ref(false);
 	playing = ref(false);
 	isCaptionsSupported = ref(false);
 
-	abstract play(): Promise<void>;
-	abstract pause(): Promise<void>;
+	setPlayer(player: MediaPlayer | null) {
+		this.player.value = player;
+	}
 
-	abstract getPosition(): number;
-	abstract setPosition(position: number): void;
+	checkForPlayer(p: MediaPlayer | null): p is MediaPlayer {
+		if (!p) {
+			return false;
+		}
+		return this.apiReady.value ?? false;
+	}
+
+	isPlayerPresent(): boolean {
+		return this.checkForPlayer(this.player.value);
+	}
+
+	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: Ref<MediaPlayerV2 | undefined> = shallowRef(undefined);
+const PLAYER_KEY = Symbol("player");
+const player = new MediaPlayerV2();
 
 export function useMediaPlayer() {
-	return player;
+	return inject(PLAYER_KEY, player);
 }
 
-export function isPlayerPresent(p: typeof player): p is Ref<MediaPlayerV2> {
-	return !!p.value;
-}
+// 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);
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 7e2317a3b..52d5b8182 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -122,23 +122,8 @@ import { isInTimeRanges, secondsToTimestamp } from "@/util/timestamp";
 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,
-	toRef,
-} from "vue";
-import {
-	MediaPlayerV2,
-	useCaptions,
-	useMediaPlayer,
-	usePlaybackRate,
-	useVolume,
-} from "../composables";
+import { defineComponent, defineAsyncComponent, PropType, ref, Ref, computed, watch } from "vue";
+import { useCaptions, useMediaPlayer, usePlaybackRate, useVolume } from "../composables";
 import { watchEffect } from "vue";
 
 const services = [
@@ -209,51 +194,10 @@ export default defineComponent({
 
 		const player: Ref<MediaPlayer | null> = ref(null);
 
-		class OmniMediaPlayer extends MediaPlayerV2 {
-			constructor() {
-				super();
-			}
-
-			async play(): Promise<void> {
-				if (!checkForPlayer(player.value)) {
-					return Promise.reject("Player not available yet");
-				}
-				return player.value.play();
-			}
-			async pause(): Promise<void> {
-				if (!checkForPlayer(player.value)) {
-					return Promise.reject("Player not available yet");
-				}
-				return player.value.pause();
-			}
-			getPosition(): number {
-				if (!checkForPlayer(player.value)) {
-					return 0;
-				}
-				return player.value.getPosition();
-			}
-			setPosition(position: number): void {
-				if (!checkForPlayer(player.value)) {
-					return;
-				}
-				return player.value.setPosition(position);
-			}
-		}
-
-		const player2: MediaPlayerV2 = new OmniMediaPlayer();
 		const controls = useMediaPlayer();
-		controls.value = player2;
-
-		function checkForPlayer(p: MediaPlayer | null): p is MediaPlayer {
-			if (!p) {
-				console.warn(
-					`There is no player available. Is the source set? ${
-						props.source !== null
-					} Is there a player implemented for ${props.source?.service}?`
-				);
-			}
-			return player2.apiReady.value ?? false;
-		}
+		watch(player, v => {
+			controls.setPlayer(v);
+		});
 
 		function implementsCaptions(p: MediaPlayer | null): p is MediaPlayerWithCaptions {
 			return !!p && p.isCaptionsSupported();
@@ -266,7 +210,7 @@ export default defineComponent({
 		const isPlayerPresent = computed(() => !!player.value);
 
 		function isCaptionsSupported() {
-			if (!checkForPlayer(player.value)) {
+			if (!controls.checkForPlayer(player.value)) {
 				return false;
 			}
 			return implementsCaptions(player.value);
@@ -282,7 +226,7 @@ export default defineComponent({
 		watch(player, () => {
 			console.debug("Player changed", player.value);
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
-			player2.apiReady.value = false;
+			controls.apiReady.value = false;
 		});
 		watch(captions.isCaptionsEnabled, v => {
 			if (player.value && implementsCaptions(player.value)) {
@@ -312,10 +256,9 @@ export default defineComponent({
 		watchEffect(() => {
 			playbackRate.playbackRate.value = store.state.room.playbackSpeed;
 		});
-
 		// player events re-emitted or data stored
 		function onApiReady() {
-			player2.apiReady.value = true;
+			controls.apiReady.value = true;
 			captions.isCaptionsSupported.value = isCaptionsSupported();
 			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 			if (player.value) {
@@ -348,13 +291,13 @@ export default defineComponent({
 
 		function onPlaying() {
 			hackReadyEdgeCase();
-			player2.playing.value = true;
+			controls.playing.value = true;
 			emit("playing");
 		}
 
 		function onPaused() {
 			hackReadyEdgeCase();
-			player2.playing.value = false;
+			controls.playing.value = false;
 			emit("paused");
 		}
 
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index 7765bb1aa..a7068fd7a 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -233,7 +233,7 @@ import VoteSkip from "@/components/VoteSkip.vue";
 import { waitForToken } from "@/util/token";
 import { useSfx } from "@/plugins/sfx";
 import { secondsToTimestamp } from "@/util/timestamp";
-import { isPlayerPresent, useCaptions, useMediaPlayer, useVolume } from "@/components/composables";
+import { useCaptions, useMediaPlayer, useVolume } from "@/components/composables";
 
 const VIDEO_CONTROLS_HIDE_TIMEOUT = 3000;
 
@@ -336,13 +336,13 @@ export default defineComponent({
 		});
 
 		watch(truePosition, async newPosition => {
-			if (!isPlayerPresent(player)) {
+			if (!player.isPlayerPresent()) {
 				return;
 			}
-			const currentTime = player.value.getPosition();
+			const currentTime = player.getPosition();
 
 			if (Math.abs(newPosition - currentTime) > 1 && !mediaPlaybackBlocked.value) {
-				player.value.setPosition(newPosition);
+				player.setPosition(newPosition);
 			}
 		});
 
@@ -371,10 +371,10 @@ export default defineComponent({
 		}
 
 		async function waitForPlayer() {
-			if (!isPlayerPresent(player)) {
-				console.debug("waiting for player");
+			if (!player.isPlayerPresent()) {
+				console.debug("waiting for player", player);
 				await new Promise(resolve => {
-					const stop = watch(player, async newPlayer => {
+					const stop = watch(player.player, async newPlayer => {
 						if (newPlayer) {
 							stop();
 							resolve(true);
@@ -382,16 +382,15 @@ export default defineComponent({
 					});
 				});
 			}
-			if (!isPlayerPresent(player)) {
+			if (!player.isPlayerPresent()) {
 				return Promise.reject("Can't wait for player api ready: player not present");
 			}
-			if (player.value.apiReady.value) {
-				console.debug("player api is already ready");
+			if (player.apiReady.value) {
 				return;
 			}
-			console.debug("detected player, waiting for api ready");
+			console.debug("detected player, waiting for api ready", player.apiReady.value);
 			await new Promise(resolve => {
-				const stop = watch(player.value.apiReady, async newReady => {
+				const stop = watch(player.apiReady, async newReady => {
 					if (newReady) {
 						stop();
 						resolve(true);
@@ -467,14 +466,14 @@ export default defineComponent({
 
 		async function applyIsPlaying(playing: boolean): Promise<void> {
 			await waitForPlayer();
-			if (!isPlayerPresent(player)) {
+			if (!player.isPlayerPresent()) {
 				return Promise.reject("Can't apply IsPlaying: player not present");
 			}
 			try {
 				if (playing) {
-					await player.value.play();
+					await player.play();
 				} else {
-					await player.value.pause();
+					await player.pause();
 				}
 				mediaPlaybackBlocked.value = false;
 				return;
@@ -488,7 +487,7 @@ export default defineComponent({
 		}
 
 		function onClickUnblockPlayback(): void {
-			player.value?.setPosition(truePosition.value);
+			player?.setPosition(truePosition.value);
 			applyIsPlaying(store.state.room.isPlaying);
 		}
 

From 12b5c6204eed6d9e0c8e1befa7707e539444d6fd Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 15:54:06 -0400
Subject: [PATCH 13/24] fix plyr player not respecting play/pause and seeks
 minor refactor

---
 client/src/components/composables/media-player.ts | 2 +-
 client/src/components/players/OmniPlayer.vue      | 9 ++++-----
 client/src/components/players/PlyrPlayer.vue      | 3 ++-
 client/src/views/Room.vue                         | 8 +++++++-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 6dd50f3b0..9d0e2c7b3 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -36,7 +36,7 @@ export class MediaPlayerV2 {
 	}
 
 	isPlayerPresent(): boolean {
-		return this.checkForPlayer(this.player.value);
+		return !!this.player.value;
 	}
 
 	async play(): Promise<void> {
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 52d5b8182..baec82381 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -195,9 +195,6 @@ export default defineComponent({
 		const player: Ref<MediaPlayer | null> = ref(null);
 
 		const controls = useMediaPlayer();
-		watch(player, v => {
-			controls.setPlayer(v);
-		});
 
 		function implementsCaptions(p: MediaPlayer | null): p is MediaPlayerWithCaptions {
 			return !!p && p.isCaptionsSupported();
@@ -223,9 +220,10 @@ export default defineComponent({
 				player.value.setVolume(v);
 			}
 		});
-		watch(player, () => {
-			console.debug("Player changed", player.value);
+		watch(player, v => {
+			console.debug("Player changed", v);
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
+			controls.setPlayer(v);
 			controls.apiReady.value = false;
 		});
 		watch(captions.isCaptionsEnabled, v => {
@@ -277,6 +275,7 @@ export default defineComponent({
 
 		function onReady() {
 			store.commit("PLAYBACK_STATUS", PlayerStatus.ready);
+			controls.apiReady.value = true;
 			emit("ready");
 		}
 
diff --git a/client/src/components/players/PlyrPlayer.vue b/client/src/components/players/PlyrPlayer.vue
index 8b41352ae..ec2552905 100644
--- a/client/src/components/players/PlyrPlayer.vue
+++ b/client/src/components/players/PlyrPlayer.vue
@@ -166,7 +166,6 @@ export default defineComponent({
 					enabled: false,
 				},
 			});
-			emit("apiready");
 
 			player.value.on("ready", () => emit("ready"));
 			player.value.on("ended", () => emit("end"));
@@ -329,6 +328,8 @@ export default defineComponent({
 			} else {
 				console.error("video element not present");
 			}
+
+			emit("apiready");
 		}
 
 		watch(videoUrl, () => {
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index a7068fd7a..a0b53b6ed 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -380,6 +380,12 @@ export default defineComponent({
 							resolve(true);
 						}
 					});
+					// const interval = setInterval(() => {
+					// 	if (player.isPlayerPresent()) {
+					// 		clearInterval(interval);
+					// 		resolve(true);
+					// 	}
+					// }, 100);
 				});
 			}
 			if (!player.isPlayerPresent()) {
@@ -388,7 +394,7 @@ export default defineComponent({
 			if (player.apiReady.value) {
 				return;
 			}
-			console.debug("detected player, waiting for api ready", player.apiReady.value);
+			console.debug("detected player, waiting for api ready");
 			await new Promise(resolve => {
 				const stop = watch(player.apiReady, async newReady => {
 					if (newReady) {

From 806c0c4992f7efa0d24b234be4b77715718a5599 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 26 Mar 2024 16:39:01 -0400
Subject: [PATCH 14/24] correctly order player switch and apiready emit

---
 .../src/components/composables/media-player.ts | 18 ++++++++++++++++++
 client/src/components/players/OmniPlayer.vue   |  6 ++----
 client/src/views/Room.vue                      | 14 ++++++++++----
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 9d0e2c7b3..fa3f82b06 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -25,6 +25,7 @@ export class MediaPlayerV2 {
 	isCaptionsSupported = ref(false);
 
 	setPlayer(player: MediaPlayer | null) {
+		this.apiReady.value = false;
 		this.player.value = player;
 	}
 
@@ -39,6 +40,23 @@ export class MediaPlayerV2 {
 		return !!this.player.value;
 	}
 
+	markApiReady() {
+		if (!this.player.value) {
+			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");
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index baec82381..0afd455a6 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -224,7 +224,6 @@ export default defineComponent({
 			console.debug("Player changed", v);
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
 			controls.setPlayer(v);
-			controls.apiReady.value = false;
 		});
 		watch(captions.isCaptionsEnabled, v => {
 			if (player.value && implementsCaptions(player.value)) {
@@ -255,8 +254,8 @@ export default defineComponent({
 			playbackRate.playbackRate.value = store.state.room.playbackSpeed;
 		});
 		// player events re-emitted or data stored
-		function onApiReady() {
-			controls.apiReady.value = true;
+		async function onApiReady() {
+			controls.markApiReady();
 			captions.isCaptionsSupported.value = isCaptionsSupported();
 			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 			if (player.value) {
@@ -275,7 +274,6 @@ export default defineComponent({
 
 		function onReady() {
 			store.commit("PLAYBACK_STATUS", PlayerStatus.ready);
-			controls.apiReady.value = true;
 			emit("ready");
 		}
 
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index a0b53b6ed..954e2eced 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -396,12 +396,18 @@ export default defineComponent({
 			}
 			console.debug("detected player, waiting for api ready");
 			await new Promise(resolve => {
-				const stop = watch(player.apiReady, async newReady => {
-					if (newReady) {
-						stop();
+				// const stop = watch(player.apiReady, async newReady => {
+				// 	if (newReady) {
+				// 		stop();
+				// 		resolve(true);
+				// 	}
+				// });
+				const interval = setInterval(() => {
+					if (player.apiReady.value) {
+						clearInterval(interval);
 						resolve(true);
 					}
-				});
+				}, 100);
 			});
 		}
 

From 2ab135636dc4a7d3bd6ca36ba749f91b19ee20a8 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Wed, 27 Mar 2024 10:34:26 -0400
Subject: [PATCH 15/24] move MediaPlayer types to fix lint

---
 .../components/composables/media-player.ts    | 34 ++++++++++++++-
 client/src/components/players/OmniPlayer.vue  | 43 ++++---------------
 client/src/components/players/PlyrPlayer.vue  |  3 +-
 3 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index fa3f82b06..18f0f6180 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -1,6 +1,5 @@
 import { useStore } from "@/store";
 import { onMounted, ref, watch, type Ref, shallowRef, provide, inject } from "vue";
-import type { MediaPlayer } from "../players/OmniPlayer.vue";
 
 const volume = ref(100);
 
@@ -18,6 +17,39 @@ export function useVolume() {
 	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);
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 0afd455a6..23243ae69 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -123,7 +123,15 @@ 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 { useCaptions, useMediaPlayer, usePlaybackRate, useVolume } from "../composables";
+import {
+	MediaPlayer,
+	MediaPlayerWithCaptions,
+	MediaPlayerWithPlaybackRate,
+	useCaptions,
+	useMediaPlayer,
+	usePlaybackRate,
+	useVolume,
+} from "../composables";
 import { watchEffect } from "vue";
 
 const services = [
@@ -137,39 +145,6 @@ const services = [
 	"peertube",
 ];
 
-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 default defineComponent({
 	name: "OmniPlayer",
 	props: {
diff --git a/client/src/components/players/PlyrPlayer.vue b/client/src/components/players/PlyrPlayer.vue
index ec2552905..4d5a981b6 100644
--- a/client/src/components/players/PlyrPlayer.vue
+++ b/client/src/components/players/PlyrPlayer.vue
@@ -10,8 +10,7 @@ import Plyr from "plyr";
 import Hls from "hls.js";
 import dashjs from "dashjs";
 import "plyr/src/sass/plyr.scss";
-import { useStore } from "@/store";
-import type { MediaPlayerWithCaptions, MediaPlayerWithPlaybackRate } from "./OmniPlayer.vue";
+import type { MediaPlayerWithCaptions, MediaPlayerWithPlaybackRate } from "../composables";
 import { useCaptions } from "../composables";
 
 export default defineComponent({

From 173863587ed6f31c55dd5f1a23b385ecf4279096 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Wed, 27 Mar 2024 15:31:28 -0400
Subject: [PATCH 16/24] update playback rate switcher unit tests

---
 client/tests/unit/PlaybackRateSwitcher.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/tests/unit/PlaybackRateSwitcher.spec.ts b/client/tests/unit/PlaybackRateSwitcher.spec.ts
index 318754943..1774623a0 100644
--- a/client/tests/unit/PlaybackRateSwitcher.spec.ts
+++ b/client/tests/unit/PlaybackRateSwitcher.spec.ts
@@ -4,6 +4,7 @@ import PlaybackRateSwitcher from "@/components/controls/PlaybackRateSwitcher.vue
 import { i18n } from "@/i18n";
 import { createVuetify } from "vuetify";
 import { MockOttRoomConnectionPlugin } from "@/plugins/connection";
+import { usePlaybackRate } from "@/components/composables";
 
 const mountOptions = {
 	global: {
@@ -25,12 +26,11 @@ describe("PlaybackRateSwitcher component", () => {
 		[2, "2x"],
 	];
 	it.each(PLAYBACK_RATES)("should format rate %s correctly", (rate, formatted) => {
+		const playbackRate = usePlaybackRate();
+		playbackRate.availablePlaybackRates.value = PLAYBACK_RATES.map(r => r[0]);
+		playbackRate.playbackRate.value = rate;
 		let wrapper = mount(PlaybackRateSwitcher, {
 			...mountOptions,
-			props: {
-				currentRate: rate,
-				availableRates: PLAYBACK_RATES.map(r => r[0]),
-			},
 			mounted: vi.fn(),
 		});
 		expect(wrapper.vm.$el.textContent.trim()).toEqual(formatted);

From 0cb50be5814c29f2410e9dfd00140e434fa5150a Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Wed, 27 Mar 2024 20:48:07 -0400
Subject: [PATCH 17/24] track `hasPlayerChangedYet`

---
 client/src/components/players/OmniPlayer.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 23243ae69..6d5febb99 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -168,6 +168,7 @@ export default defineComponent({
 		const store = useStore();
 
 		const player: Ref<MediaPlayer | null> = ref(null);
+		const hasPlayerChangedYet = ref(false);
 
 		const controls = useMediaPlayer();
 
@@ -199,6 +200,8 @@ export default defineComponent({
 			console.debug("Player changed", v);
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
 			controls.setPlayer(v);
+			hasPlayerChangedYet.value = true;
+			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 		});
 		watch(captions.isCaptionsEnabled, v => {
 			if (player.value && implementsCaptions(player.value)) {
@@ -230,6 +233,18 @@ export default defineComponent({
 		});
 		// player events re-emitted or data stored
 		async function onApiReady() {
+			if (!hasPlayerChangedYet.value) {
+				await new Promise(resolve => {
+					const stop = watch(hasPlayerChangedYet, v => {
+						if (v) {
+							stop();
+							resolve(true);
+						}
+					});
+				});
+			}
+
+			hasPlayerChangedYet.value = false;
 			controls.markApiReady();
 			captions.isCaptionsSupported.value = isCaptionsSupported();
 			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);

From 5672401f61fdfb88de84272835f71a616ca257e0 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 28 Mar 2024 08:18:37 -0400
Subject: [PATCH 18/24] fix playback rate not updating properly

---
 client/src/components/composables/media-player.ts    |  6 ++++--
 .../src/components/controls/PlaybackRateSwitcher.vue | 12 ++++++------
 client/src/components/players/OmniPlayer.vue         |  2 --
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 18f0f6180..5cf622171 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -1,5 +1,5 @@
 import { useStore } from "@/store";
-import { onMounted, ref, watch, type Ref, shallowRef, provide, inject } from "vue";
+import { onMounted, ref, watch, type Ref, shallowRef, provide, inject, computed } from "vue";
 
 const volume = ref(100);
 
@@ -140,9 +140,11 @@ export function useCaptions() {
 	};
 }
 
-const isPlaybackRateSupported: Ref<boolean> = ref(false);
 const playbackRate: Ref<number> = ref(1);
 const availablePlaybackRates: Ref<number[]> = ref([1]);
+const isPlaybackRateSupported: Ref<boolean> = computed(() => {
+	return availablePlaybackRates.value.length > 1;
+});
 
 export function usePlaybackRate() {
 	return {
diff --git a/client/src/components/controls/PlaybackRateSwitcher.vue b/client/src/components/controls/PlaybackRateSwitcher.vue
index 42ea78648..9a1570a6c 100644
--- a/client/src/components/controls/PlaybackRateSwitcher.vue
+++ b/client/src/components/controls/PlaybackRateSwitcher.vue
@@ -1,10 +1,5 @@
 <template>
-	<v-btn
-		variant="text"
-		class="media-control"
-		aria-label="Playback Speed"
-		:disabled="!playbackRate.isPlaybackRateSupported"
-	>
+	<v-btn variant="text" class="media-control" aria-label="Playback Speed" :disabled="!supported">
 		{{ formatRate(playbackRate.playbackRate.value) }}
 
 		<v-menu location="top" activator="parent">
@@ -26,6 +21,7 @@
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 import { usePlaybackRate } from "../composables";
+import { computed } from "vue";
 
 const connection = useConnection();
 const roomApi = useRoomApi(connection);
@@ -42,6 +38,10 @@ function formatRate(rate: number) {
 function setRate(rate: number) {
 	roomApi.setPlaybackRate(rate);
 }
+
+const supported = computed(() => {
+	return playbackRate.availablePlaybackRates.value.length > 1;
+});
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index 6d5febb99..e33125e38 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -201,7 +201,6 @@ export default defineComponent({
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
 			controls.setPlayer(v);
 			hasPlayerChangedYet.value = true;
-			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 		});
 		watch(captions.isCaptionsEnabled, v => {
 			if (player.value && implementsCaptions(player.value)) {
@@ -247,7 +246,6 @@ export default defineComponent({
 			hasPlayerChangedYet.value = false;
 			controls.markApiReady();
 			captions.isCaptionsSupported.value = isCaptionsSupported();
-			playbackRate.isPlaybackRateSupported.value = implementsPlaybackRate(player.value);
 			if (player.value) {
 				player.value.setVolume(volume.value);
 			}

From 18bda67e6d1406d3f27c6da84b63752283362aa5 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 28 Mar 2024 08:23:46 -0400
Subject: [PATCH 19/24] comment out some code

---
 client/src/components/players/OmniPlayer.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index e33125e38..f803f9d5f 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -215,13 +215,14 @@ export default defineComponent({
 			}
 		});
 		const playbackRate = usePlaybackRate();
-		watch(playbackRate.isPlaybackRateSupported, v => {
-			console.debug("Playback rate supported", v);
-			if (!v || !player.value) {
-				playbackRate.availablePlaybackRates.value = [1];
-				playbackRate.playbackRate.value = 1;
-			}
-		});
+		// not sure if this is needed anymore
+		// watch(playbackRate.isPlaybackRateSupported, v => {
+		// 	console.debug("Playback rate supported", v);
+		// 	if (!v || !player.value) {
+		// 		playbackRate.availablePlaybackRates.value = [1];
+		// 		playbackRate.playbackRate.value = 1;
+		// 	}
+		// });
 		watch(playbackRate.playbackRate, v => {
 			if (player.value && implementsPlaybackRate(player.value)) {
 				player.value.setPlaybackRate(v);

From 1700014df746722f5bc57a04361f886d7dd8d400 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 28 Mar 2024 08:25:42 -0400
Subject: [PATCH 20/24] fix closed captions button possibly not activating when
 it should on page load

---
 client/src/components/controls/ClosedCaptionsSwitcher.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/controls/ClosedCaptionsSwitcher.vue b/client/src/components/controls/ClosedCaptionsSwitcher.vue
index e8cb49a24..fbecade51 100644
--- a/client/src/components/controls/ClosedCaptionsSwitcher.vue
+++ b/client/src/components/controls/ClosedCaptionsSwitcher.vue
@@ -2,7 +2,7 @@
 	<v-btn
 		variant="text"
 		icon
-		:disabled="!captions.isCaptionsSupported.value"
+		:disabled="!captions.isCaptionsSupported"
 		class="media-control"
 		aria-label="Closed Captions"
 	>
@@ -11,7 +11,7 @@
 			location="top"
 			offset-y
 			activator="parent"
-			:disabled="!captions.isCaptionsSupported.value"
+			:disabled="!captions.isCaptionsSupported"
 		>
 			<v-list>
 				<v-list-item
@@ -50,6 +50,7 @@ function setCaptionsTrack(value: string) {
 	}
 	captions.currentTrack.value = value;
 }
+
 </script>
 
 <style lang="scss">

From 09dd020c0285560deb7017c8c38060fa85ce2009 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 28 Mar 2024 08:32:09 -0400
Subject: [PATCH 21/24] add comment

---
 client/src/components/composables/media-player.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 5cf622171..134c9783d 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -74,6 +74,7 @@ export class MediaPlayerV2 {
 
 	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) {

From c936ffa87ac5090337f06812a47d9b47597d163d Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 28 Mar 2024 09:01:35 -0400
Subject: [PATCH 22/24] refactor playback rate supported data connection to ui

---
 client/src/components/composables/media-player.ts       | 2 +-
 client/src/components/controls/PlaybackRateSwitcher.vue | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/components/composables/media-player.ts b/client/src/components/composables/media-player.ts
index 134c9783d..4988e7a30 100644
--- a/client/src/components/composables/media-player.ts
+++ b/client/src/components/composables/media-player.ts
@@ -143,7 +143,7 @@ export function useCaptions() {
 
 const playbackRate: Ref<number> = ref(1);
 const availablePlaybackRates: Ref<number[]> = ref([1]);
-const isPlaybackRateSupported: Ref<boolean> = computed(() => {
+const isPlaybackRateSupported = computed(() => {
 	return availablePlaybackRates.value.length > 1;
 });
 
diff --git a/client/src/components/controls/PlaybackRateSwitcher.vue b/client/src/components/controls/PlaybackRateSwitcher.vue
index 9a1570a6c..caf6b6c3c 100644
--- a/client/src/components/controls/PlaybackRateSwitcher.vue
+++ b/client/src/components/controls/PlaybackRateSwitcher.vue
@@ -21,7 +21,6 @@
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 import { usePlaybackRate } from "../composables";
-import { computed } from "vue";
 
 const connection = useConnection();
 const roomApi = useRoomApi(connection);
@@ -39,9 +38,7 @@ function setRate(rate: number) {
 	roomApi.setPlaybackRate(rate);
 }
 
-const supported = computed(() => {
-	return playbackRate.availablePlaybackRates.value.length > 1;
-});
+const supported = playbackRate.isPlaybackRateSupported;
 </script>
 
 <style lang="scss">

From 592a4d7d45acd45806809430c79194117fbed830 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 28 Mar 2024 09:17:26 -0400
Subject: [PATCH 23/24] alias captions supported ref so that it actually works

---
 .../src/components/controls/ClosedCaptionsSwitcher.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/client/src/components/controls/ClosedCaptionsSwitcher.vue b/client/src/components/controls/ClosedCaptionsSwitcher.vue
index fbecade51..487c0ad5b 100644
--- a/client/src/components/controls/ClosedCaptionsSwitcher.vue
+++ b/client/src/components/controls/ClosedCaptionsSwitcher.vue
@@ -2,17 +2,12 @@
 	<v-btn
 		variant="text"
 		icon
-		:disabled="!captions.isCaptionsSupported"
+		:disabled="!supported"
 		class="media-control"
 		aria-label="Closed Captions"
 	>
 		<v-icon>mdi-closed-caption</v-icon>
-		<v-menu
-			location="top"
-			offset-y
-			activator="parent"
-			:disabled="!captions.isCaptionsSupported"
-		>
+		<v-menu location="top" offset-y activator="parent" :disabled="!supported">
 			<v-list>
 				<v-list-item
 					link
@@ -51,6 +46,7 @@ function setCaptionsTrack(value: string) {
 	captions.currentTrack.value = value;
 }
 
+const supported = captions.isCaptionsSupported;
 </script>
 
 <style lang="scss">

From c126f906aacdab968932a8d3f2b48bef67e2d0d4 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 28 Mar 2024 09:35:38 -0400
Subject: [PATCH 24/24] fix apiready getting triggered too early on player swap

---
 client/src/components/players/OmniPlayer.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue
index f803f9d5f..93a62c7ac 100644
--- a/client/src/components/players/OmniPlayer.vue
+++ b/client/src/components/players/OmniPlayer.vue
@@ -200,7 +200,9 @@ export default defineComponent({
 			console.debug("Player changed", v);
 			// note that we have to wait for the player's api to be ready before we can call any methods on it
 			controls.setPlayer(v);
-			hasPlayerChangedYet.value = true;
+			if (v) {
+				hasPlayerChangedYet.value = true;
+			}
 		});
 		watch(captions.isCaptionsEnabled, v => {
 			if (player.value && implementsCaptions(player.value)) {
@@ -234,9 +236,10 @@ export default defineComponent({
 		// player events re-emitted or data stored
 		async function onApiReady() {
 			if (!hasPlayerChangedYet.value) {
+				console.debug("waiting for player to change before emitting apiready");
 				await new Promise(resolve => {
 					const stop = watch(hasPlayerChangedYet, v => {
-						if (v) {
+						if (v && player.value) {
 							stop();
 							resolve(true);
 						}