feat(cast): implement cast on web

src/events.tsx

@@ -52,6 +52,9 @@ export function usePlayerState<Key extends keyof OmniPlayerState>(
 			case "status":
 				em.addPlayerStatusListener(setState);
 				return () => em.removePlayerStatusListener(setState);
+			case "castStatus":
+				// TODO: implement this
+				return;
 		}
 	}, [player, key]);
 

src/events.web.tsx

@@ -6,6 +6,7 @@ import {
 	selectPlayback,
 	selectPlaybackRate,
 	selectQuality,
+	selectRemotePlayback,
 	selectTextTrack,
 	selectTime,
 	selectVolume,
@@ -177,6 +178,13 @@ export const stateMapper = {
 		if (!q) return true;
 		return !q.videoRenditionList.some((r) => r.selected);
 	}),
+	...createMapper("castStatus", selectRemotePlayback, (r) => {
+		if (!r) return "unavailable";
+		if (r.remotePlaybackState === "connecting") return "connecting";
+		if (r.remotePlaybackState === "connected") return "connected";
+		if (r.remotePlaybackAvailability === "available") return "available";
+		return "unavailable";
+	}),
 };
 
 export function usePlayerState<Key extends keyof OmniPlayerState>(

src/index.ts

@@ -2,6 +2,7 @@ export { useEvent, usePlayerState } from "./events";
 export { OmniProvider, usePlayer } from "./provider";
 export type { OmniEvents } from "./types/events";
 export type {
+	CastStatus,
 	OmniPlayer,
 	OmniPlayerState,
 	PlayerStatus,

src/player.web.tsx

@@ -7,6 +7,7 @@ import {
 } from "@videojs/react";
 import { stateMapper } from "./events.web";
 import type {
+	CastStatus,
 	OmniPlayer,
 	PlayerStatus,
 	Rendition,
@@ -51,6 +52,14 @@ export class WebOmniPlayer implements OmniPlayer {
 		this._store = store;
 	}
 
+	get castStatus(): CastStatus {
+		return stateMapper.castStatus.mapper(this._store.state);
+	}
+
+	toggleCastStatus(): void {
+		this._store.state.toggleRemotePlayback();
+	}
+
 	_source: Source | null = null;
 	private _showNotification = false;
 

src/types/player.ts

@@ -5,6 +5,8 @@ export interface OmniPlayer extends OmniPlayerState {
 	pause(): void;
 	seekBy(offset: number): void;
 
+	toggleCastStatus(): void;
+
 	// trigger the prev/next event manually, the user has to implement the event
 	playPrev(): void;
 	playNext(): void;
@@ -32,10 +34,17 @@ export interface OmniPlayerState {
 	volume: number;
 	muted: boolean;
 	readonly isAutoQuality: boolean;
+	readonly castStatus: CastStatus;
 }
 
 export type PlayerStatus = "idle" | "loading" | "readyToPlay" | "error";
 
+export type CastStatus =
+	| "connecting"
+	| "connected"
+	| "available"
+	| "unavailable";
+
 export interface Track {
 	readonly id: string;
 	readonly label?: string;