Fix source/tech seleciton on web

src/player.web.tsx

@@ -6,6 +6,7 @@ import type {
 	Rendition,
 	Track,
 } from "./types/player";
+import type { Source } from "./types/source";
 
 export class WebOmniPlayer implements OmniPlayer {
 	_store: VideoPlayerStore;
@@ -16,6 +17,8 @@ export class WebOmniPlayer implements OmniPlayer {
 		this._store = store;
 	}
 
+	source: Source | null = null;
+
 	get showNotification(): boolean {
 		// TODO
 		return false;

src/provider.web.tsx

@@ -41,8 +41,8 @@ const PlayerInitializer = ({
 	const player = useLazyRef(() => new WebOmniPlayer(store));
 
 	useEffect(() => {
-		store.source = source.src[0]?.uri || null;
-	}, [store, source]);
+		player.source = source;
+	}, [source]);
 
 	useEffect(() => {
 		player.showNotification = showNotification;

src/view.web.tsx

@@ -1,6 +1,8 @@
+import { HlsVideo } from "@videojs/react/media/hls-video";
 import { Video } from "@videojs/react/video";
 import type { CSSProperties } from "react";
 import { useRef } from "react";
+import type { WebOmniPlayer } from "./player.web";
 import { usePlayer, VideoPlayer } from "./provider.web";
 import type { OmniViewProps } from "./types/view";
 
@@ -8,16 +10,17 @@ export const OmniView = ({
 	style,
 	autoplay,
 }: OmniViewProps & { style: CSSProperties }) => {
-	const player = usePlayer();
+	const player = usePlayer() as WebOmniPlayer;
 	const containerRef = useRef<HTMLDivElement>(null);
 
-	const src = player.source.src[0]?.uri;
+	const uri = player.source?.src[0]?.uri;
+	const Tech = uri?.endsWith("m3u8") ? HlsVideo : Video;
 
 	return (
 		<VideoPlayer.Container ref={containerRef} style={style}>
-			{src && (
-				<Video
-					src={src}
+			{uri && (
+				<Tech
+					src={uri}
 					autoPlay={autoplay}
 					playsInline
 					crossOrigin="anonymous"