fix(cast): add unsupported state

bun.lock

@@ -23,9 +23,9 @@
         "typescript": "^7.0.2",
       },
       "peerDependencies": {
-        "react": "19.2.7",
-        "react-native": "0.86.0",
-        "react-native-nitro-modules": "0.36.1",
+        "react": ">=19.0.0",
+        "react-native": ">=0.86.0",
+        "react-native-nitro-modules": ">=0.36.0",
       },
     },
     "example": {

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,
@@ -108,18 +109,16 @@ export const useEvent = <Event extends keyof OmniEvents>(
 		prevRef.current = value;
 	}, [value, config]);
 
-	// prev/next are triggered by the app (or the media session) rather than the
-	// media element
 	useEffect(() => {
+		// don't use callbackRef.current directly to keep future callback updates
+		const cb = () => (callbackRef.current as () => void)();
 		if (event === "prev") {
-			const cb = callbackRef.current as () => void;
 			player.onPrev.add(cb);
 			return () => {
 				player.onPrev.delete(cb);
 			};
 		}
 		if (event === "next") {
-			const cb = callbackRef.current as () => void;
 			player.onNext.add(cb);
 			return () => {
 				player.onNext.delete(cb);
@@ -179,6 +178,12 @@ 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";
+		return r.remotePlaybackAvailability
+	}),
 };
 
 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/provider.web.tsx

@@ -1,6 +1,12 @@
 import { createPlayer } from "@videojs/react";
 import { videoFeatures } from "@videojs/react/video";
-import { createContext, type ReactNode, useContext, useEffect } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useContext,
+	useEffect,
+	useRef,
+} from "react";
 import { WebOmniPlayer } from "./player.web";
 import type { OmniPlayer } from "./types/player";
 import type { Source } from "./types/source";
@@ -39,10 +45,15 @@ const PlayerInitializer = ({
 }) => {
 	const store = VideoPlayer.usePlayer();
 	const player = useLazyRef(() => new WebOmniPlayer(store));
+	const seekedForSrc = useRef<string | undefined>(undefined);
 
 	useEffect(() => {
 		player.source = source;
-		if (source.startTime) store.seek(source.startTime).catch(() => {});
+		const uri = source.src[0]?.uri;
+		if (uri !== seekedForSrc.current) {
+			seekedForSrc.current = uri;
+			if (source.startTime) store.seek(source.startTime)
+		}
 	}, [source, store]);
 
 	useEffect(() => {

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,18 @@ 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"
+	| "unsupported";
+
 export interface Track {
 	readonly id: string;
 	readonly label?: string;

src/view.web.tsx

@@ -114,19 +114,23 @@ export const OmniView = ({
 		false;
 	const Tech = isHls ? HlsJsVideo : Video;
 
-	const config = useMemo<HlsMediaConfig | undefined>(() => {
-		const headers = src?.headers;
-		if (!headers || Object.keys(headers).length === 0) return undefined;
-		return {
+	const headersRef = useRef(src?.headers);
+	headersRef.current = src?.headers;
+
+	const config = useMemo<HlsMediaConfig>(
+		() => ({
 			hlsJs: {
 				xhrSetup: (xhr: XMLHttpRequest) => {
+					const headers = headersRef.current;
+					if (!headers) return;
 					for (const [key, value] of Object.entries(headers)) {
 						if (value) xhr.setRequestHeader(key, value);
 					}
 				},
 			},
-		};
-	}, [src?.headers]);
+		}),
+		[],
+	);
 
 	return (
 		<VideoPlayer.Container
@@ -137,7 +141,7 @@ export const OmniView = ({
 				<Tech
 					ref={ref}
 					src={src.uri}
-					config={config}
+					config={isHls ? config : undefined}
 					autoPlay={autoplay}
 					playsInline
 					crossOrigin="anonymous"