@streamplace/components 0.7.0 → 0.7.2

package/dist/components/mobile-player/use-webrtc.js

@@ -1,12 +1,17 @@
-import { useEffect, useRef, useState } from "react";
-import { usePlayerStore, useStreamKey } from "../..";
-import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
-export default function useWebRTC(endpoint) {
-    const [mediaStream, setMediaStream] = useState(null);
-    const [stuck, setStuck] = useState(false);
-    const lastChange = useRef(0);
-    useEffect(() => {
-        const peerConnection = new RTCPeerConnection({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useWebRTC;
+exports.negotiateConnectionWithClientOffer = negotiateConnectionWithClientOffer;
+exports.useWebRTCIngest = useWebRTCIngest;
+const react_1 = require("react");
+const __1 = require("../..");
+const webrtc_primitives_1 = require("./webrtc-primitives");
+function useWebRTC(endpoint) {
+    const [mediaStream, setMediaStream] = (0, react_1.useState)(null);
+    const [stuck, setStuck] = (0, react_1.useState)(false);
+    const lastChange = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const peerConnection = new webrtc_primitives_1.RTCPeerConnection({
             bundlePolicy: "max-bundle",
         });
         peerConnection.addTransceiver("video", {
@@ -80,7 +85,7 @@ export default function useWebRTC(endpoint) {
  * https://developer.mozilla.org/en-US/docs/Glossary/SDP
  * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html#name-protocol-operation
  */
-export async function negotiateConnectionWithClientOffer(peerConnection, endpoint, bearerToken) {
+async function negotiateConnectionWithClientOffer(peerConnection, endpoint, bearerToken) {
     /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer */
     const offer = await peerConnection.createOffer({
         offerToReceiveAudio: true,
@@ -109,7 +114,7 @@ export async function negotiateConnectionWithClientOffer(peerConnection, endpoin
                 if (peerConnection.connectionState === "closed") {
                     return;
                 }
-                await peerConnection.setRemoteDescription(new RTCSessionDescription({ type: "answer", sdp: answerSDP }));
+                await peerConnection.setRemoteDescription(new webrtc_primitives_1.RTCSessionDescription({ type: "answer", sdp: answerSDP }));
                 return response.headers.get("Location");
             }
             else if (response.status === 405) {
@@ -162,25 +167,25 @@ async function waitToCompleteICEGathering(peerConnection) {
         });
     });
 }
-export function useWebRTCIngest({ endpoint, }) {
-    const [mediaStream, setMediaStream] = useState(null);
-    const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState);
-    const setIngestConnectionState = usePlayerStore((x) => x.setIngestConnectionState);
-    const storedKey = useStreamKey();
-    const [peerConnection, setPeerConnection] = useState(null);
-    const videoTransceiver = useRef(null);
-    const audioTransceiver = useRef(null);
-    const [retryTime, setRetryTime] = useState(0);
-    const ingestLive = usePlayerStore((x) => x.ingestLive);
+function useWebRTCIngest({ endpoint, }) {
+    const [mediaStream, setMediaStream] = (0, react_1.useState)(null);
+    const ingestConnectionState = (0, __1.usePlayerStore)((x) => x.ingestConnectionState);
+    const setIngestConnectionState = (0, __1.usePlayerStore)((x) => x.setIngestConnectionState);
+    const storedKey = (0, __1.useStreamKey)();
+    const [peerConnection, setPeerConnection] = (0, react_1.useState)(null);
+    const videoTransceiver = (0, react_1.useRef)(null);
+    const audioTransceiver = (0, react_1.useRef)(null);
+    const [retryTime, setRetryTime] = (0, react_1.useState)(0);
+    const ingestLive = (0, __1.usePlayerStore)((x) => x.ingestLive);
     // "Outer loop": when we need a new peer connection, this sets that up
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!storedKey) {
             return;
         }
         if (!ingestLive) {
             return;
         }
-        const peerConnection = new RTCPeerConnection({
+        const peerConnection = new webrtc_primitives_1.RTCPeerConnection({
             bundlePolicy: "max-bundle",
         });
         videoTransceiver.current = peerConnection.addTransceiver("video", {
@@ -208,7 +213,7 @@ export function useWebRTCIngest({ endpoint, }) {
         };
     }, [endpoint, storedKey.streamKey?.privateKey, retryTime, ingestLive]);
     // "Inner loop": when our tracks change, we update the transceivers
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!mediaStream) {
             return;
         }

package/dist/components/mobile-player/video.js

@@ -1,13 +1,23 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Hls from "hls.js";
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
-import { IngestMediaSource, PlayerProtocol, PlayerStatus, usePlayerStore, useStreamplaceStore, } from "../..";
-import { borderRadius, colors, mt, p } from "../../lib/theme/atoms";
-import { Text, View } from "../ui/index";
-import { srcToUrl } from "./shared";
-import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
-import { logWebRTCDiagnostics, useWebRTCDiagnostics, } from "./webrtc-diagnostics";
-import { checkWebRTCSupport } from "./webrtc-primitives";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = WebVideo;
+exports.ProgressiveMP4Player = ProgressiveMP4Player;
+exports.ProgressiveWebMPlayer = ProgressiveWebMPlayer;
+exports.HLSPlayer = HLSPlayer;
+exports.WebRTCPlayer = WebRTCPlayer;
+exports.WebRTCPlayerInner = WebRTCPlayerInner;
+exports.WebcamIngestPlayer = WebcamIngestPlayer;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
+const react_1 = require("react");
+const __1 = require("../..");
+const atoms_1 = require("../../lib/theme/atoms");
+const index_1 = require("../ui/index");
+const shared_1 = require("./shared");
+const use_webrtc_1 = tslib_1.__importStar(require("./use-webrtc"));
+const webrtc_diagnostics_1 = require("./webrtc-diagnostics");
+const webrtc_primitives_1 = require("./webrtc-primitives");
 function assignVideoRef(ref, instance) {
     if (!ref)
         return;
@@ -17,8 +27,8 @@ function assignVideoRef(ref, instance) {
         ref.current = instance;
 }
 function useVideoDimensions(videoRef) {
-    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-    useEffect(() => {
+    const [dimensions, setDimensions] = (0, react_1.useState)({ width: 0, height: 0 });
+    (0, react_1.useEffect)(() => {
         if (!videoRef.current)
             return;
         function updateSize() {
@@ -40,24 +50,24 @@ function useVideoDimensions(videoRef) {
     }, [videoRef, videoRef.current]);
     return dimensions;
 }
-export default function WebVideo() {
-    const inProto = usePlayerStore((x) => x.protocol);
-    const isIngesting = usePlayerStore((x) => x.ingestConnectionState !== null);
-    const selectedRendition = usePlayerStore((x) => x.selectedRendition);
-    const src = usePlayerStore((x) => x.src);
-    const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
-    const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
-    const { url, protocol } = srcToUrl({ src: src, selectedRendition }, inProto);
-    const videoRef = useRef(null);
+function WebVideo() {
+    const inProto = (0, __1.usePlayerStore)((x) => x.protocol);
+    const isIngesting = (0, __1.usePlayerStore)((x) => x.ingestConnectionState !== null);
+    const selectedRendition = (0, __1.usePlayerStore)((x) => x.selectedRendition);
+    const src = (0, __1.usePlayerStore)((x) => x.src);
+    const setPlayerWidth = (0, __1.usePlayerStore)((x) => x.setPlayerWidth);
+    const setPlayerHeight = (0, __1.usePlayerStore)((x) => x.setPlayerHeight);
+    const { url, protocol } = (0, shared_1.srcToUrl)({ src: src, selectedRendition }, inProto);
+    const videoRef = (0, react_1.useRef)(null);
     const dimensions = useVideoDimensions(videoRef);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (videoRef.current) {
             setPlayerWidth(dimensions.width);
             setPlayerHeight(dimensions.height);
         }
     }, [dimensions, setPlayerWidth, setPlayerHeight]);
     const playerProps = { url, videoRef };
-    return (_jsx(_Fragment, { children: isIngesting ? (_jsx(WebcamIngestPlayer, { ...playerProps })) : protocol === PlayerProtocol.PROGRESSIVE_MP4 ? (_jsx(ProgressiveMP4Player, { ...playerProps })) : protocol === PlayerProtocol.PROGRESSIVE_WEBM ? (_jsx(ProgressiveWebMPlayer, { ...playerProps })) : protocol === PlayerProtocol.HLS ? (_jsx(HLSPlayer, { ...playerProps })) : protocol === PlayerProtocol.WEBRTC ? (_jsx(WebRTCPlayer, { ...playerProps })) : ((() => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isIngesting ? ((0, jsx_runtime_1.jsx)(WebcamIngestPlayer, { ...playerProps })) : protocol === __1.PlayerProtocol.PROGRESSIVE_MP4 ? ((0, jsx_runtime_1.jsx)(ProgressiveMP4Player, { ...playerProps })) : protocol === __1.PlayerProtocol.PROGRESSIVE_WEBM ? ((0, jsx_runtime_1.jsx)(ProgressiveWebMPlayer, { ...playerProps })) : protocol === __1.PlayerProtocol.HLS ? ((0, jsx_runtime_1.jsx)(HLSPlayer, { ...playerProps })) : protocol === __1.PlayerProtocol.WEBRTC ? ((0, jsx_runtime_1.jsx)(WebRTCPlayer, { ...playerProps })) : ((() => {
             throw new Error(`unknown playback protocol ${inProto}`);
         })()) }));
 }
@@ -69,18 +79,18 @@ const updateEvents = {
     suspend: true,
     mute: true,
 };
-const VideoElement = forwardRef((props, ref) => {
-    const x = usePlayerStore((x) => x);
-    const url = useStreamplaceStore((x) => x.url);
-    const playerEvent = usePlayerStore((x) => x.playerEvent);
-    const setMuted = usePlayerStore((x) => x.setMuted);
-    const setMuteWasForced = usePlayerStore((x) => x.setMuteWasForced);
-    const muted = usePlayerStore((x) => x.muted);
-    const ingest = usePlayerStore((x) => x.ingestConnectionState !== null);
-    const volume = usePlayerStore((x) => x.volume);
-    const setStatus = usePlayerStore((x) => x.setStatus);
-    const setUserInteraction = usePlayerStore((x) => x.setUserInteraction);
-    const setVideoRef = usePlayerStore((x) => x.setVideoRef);
+const VideoElement = (0, react_1.forwardRef)((props, ref) => {
+    const x = (0, __1.usePlayerStore)((x) => x);
+    const url = (0, __1.useStreamplaceStore)((x) => x.url);
+    const playerEvent = (0, __1.usePlayerStore)((x) => x.playerEvent);
+    const setMuted = (0, __1.usePlayerStore)((x) => x.setMuted);
+    const setMuteWasForced = (0, __1.usePlayerStore)((x) => x.setMuteWasForced);
+    const muted = (0, __1.usePlayerStore)((x) => x.muted);
+    const ingest = (0, __1.usePlayerStore)((x) => x.ingestConnectionState !== null);
+    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
+    const setUserInteraction = (0, __1.usePlayerStore)((x) => x.setUserInteraction);
+    const setVideoRef = (0, __1.usePlayerStore)((x) => x.setVideoRef);
     const event = (evType) => (e) => {
         console.log(evType);
         const now = new Date();
@@ -90,8 +100,8 @@ const VideoElement = forwardRef((props, ref) => {
         console.log("Sending", evType, "status to", url);
         playerEvent(url, now.toISOString(), evType, {});
     };
-    const [firstAttempt, setFirstAttempt] = useState(true);
-    const localVideoRef = props.videoRef ?? useRef(null);
+    const [firstAttempt, setFirstAttempt] = (0, react_1.useState)(true);
+    const localVideoRef = props.videoRef ?? (0, react_1.useRef)(null);
     const canPlayThrough = (e) => {
         event("canplaythrough")(e);
         if (firstAttempt && localVideoRef.current) {
@@ -115,18 +125,18 @@ const VideoElement = forwardRef((props, ref) => {
             });
         }
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         return () => {
-            setStatus(PlayerStatus.START);
+            setStatus(__1.PlayerStatus.START);
         };
     }, []);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (localVideoRef.current) {
             localVideoRef.current.volume = volume;
             console.log("Setting volume to", volume);
         }
     }, [volume]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         console.log(localVideoRef.current?.width, localVideoRef.current?.height);
         setVideoRef(localVideoRef);
     }, [setVideoRef, localVideoRef]);
@@ -142,7 +152,7 @@ const VideoElement = forwardRef((props, ref) => {
         //   localVideoRef.current = videoElement;
         // }
     };
-    return (_jsx("video", { autoPlay: true, playsInline: true, ref: handleVideoRef, controls: false, src: ingest ? undefined : props.url, muted: muted, crossOrigin: "anonymous", onMouseMove: setUserInteraction, onClick: setUserInteraction, onAbort: event("abort"), onCanPlay: event("canplay"), onCanPlayThrough: canPlayThrough, onEmptied: event("emptied"), onEncrypted: event("encrypted"), onEnded: event("ended"), onError: event("error"), onLoadedData: event("loadeddata"), onLoadedMetadata: event("loadedmetadata"), onLoadStart: event("loadstart"), onPause: event("pause"), onPlay: event("play"), onPlaying: event("playing"), onRateChange: event("ratechange"), onSeeked: event("seeked"), onSeeking: event("seeking"), onStalled: event("stalled"), onSuspend: event("suspend"), onVolumeChange: event("volumechange"), onWaiting: event("waiting"), style: {
+    return ((0, jsx_runtime_1.jsx)("video", { autoPlay: true, playsInline: true, ref: handleVideoRef, controls: false, src: ingest ? undefined : props.url, muted: muted, crossOrigin: "anonymous", onMouseMove: setUserInteraction, onClick: setUserInteraction, onAbort: event("abort"), onCanPlay: event("canplay"), onCanPlayThrough: canPlayThrough, onEmptied: event("emptied"), onEncrypted: event("encrypted"), onEnded: event("ended"), onError: event("error"), onLoadedData: event("loadeddata"), onLoadedMetadata: event("loadedmetadata"), onLoadStart: event("loadstart"), onPause: event("pause"), onPlay: event("play"), onPlaying: event("playing"), onRateChange: event("ratechange"), onSeeked: event("seeked"), onSeeking: event("seeking"), onStalled: event("stalled"), onSuspend: event("suspend"), onVolumeChange: event("volumechange"), onWaiting: event("waiting"), style: {
             objectFit: "contain",
             backgroundColor: "transparent",
             width: "100%",
@@ -150,20 +160,20 @@ const VideoElement = forwardRef((props, ref) => {
             transform: ingest ? "scaleX(-1)" : undefined,
         } }));
 });
-export function ProgressiveMP4Player(props) {
-    return _jsx(VideoElement, { ...props });
+function ProgressiveMP4Player(props) {
+    return (0, jsx_runtime_1.jsx)(VideoElement, { ...props });
 }
-export function ProgressiveWebMPlayer(props) {
-    return _jsx(VideoElement, { ...props });
+function ProgressiveWebMPlayer(props) {
+    return (0, jsx_runtime_1.jsx)(VideoElement, { ...props });
 }
-export function HLSPlayer(props) {
-    const localRef = useRef(null);
-    useEffect(() => {
+function HLSPlayer(props) {
+    const localRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
         if (!localRef.current) {
             return;
         }
-        if (Hls.isSupported()) {
-            var hls = new Hls({ maxAudioFramesDrift: 20 });
+        if (hls_js_1.default.isSupported()) {
+            var hls = new hls_js_1.default({ maxAudioFramesDrift: 20 });
             hls.loadSource(props.url);
             try {
                 hls.attachMedia(localRef.current);
@@ -173,7 +183,7 @@ export function HLSPlayer(props) {
                 hls.stopLoad();
                 return;
             }
-            hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            hls.on(hls_js_1.default.Events.MANIFEST_PARSED, () => {
                 if (!localRef.current) {
                     return;
                 }
@@ -193,49 +203,49 @@ export function HLSPlayer(props) {
             });
         }
     }, [props.url]);
-    return _jsx(VideoElement, { ...props, ref: localRef });
+    return (0, jsx_runtime_1.jsx)(VideoElement, { ...props, ref: localRef });
 }
-export function WebRTCPlayer(props) {
-    const [webrtcError, setWebrtcError] = useState(null);
-    const setStatus = usePlayerStore((x) => x.setStatus);
-    const setProtocol = usePlayerStore((x) => x.setProtocol);
-    const diagnostics = useWebRTCDiagnostics();
+function WebRTCPlayer(props) {
+    const [webrtcError, setWebrtcError] = (0, react_1.useState)(null);
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
+    const setProtocol = (0, __1.usePlayerStore)((x) => x.setProtocol);
+    const diagnostics = (0, webrtc_diagnostics_1.useWebRTCDiagnostics)();
     // Check WebRTC compatibility on component mount
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         try {
-            checkWebRTCSupport();
+            (0, webrtc_primitives_1.checkWebRTCSupport)();
             console.log("WebRTC Player - Browser compatibility check passed");
-            logWebRTCDiagnostics();
+            (0, webrtc_diagnostics_1.logWebRTCDiagnostics)();
         }
         catch (error) {
             console.error("WebRTC Player - Compatibility error:", error.message);
             setWebrtcError(error.message);
-            setStatus(PlayerStatus.START);
+            setStatus(__1.PlayerStatus.START);
             return;
         }
     }, []);
     // Monitor diagnostics for errors
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!diagnostics.browserSupport && diagnostics.errors.length > 0) {
             setWebrtcError(diagnostics.errors.join(", "));
         }
     }, [diagnostics]);
     if (!diagnostics.done)
-        return _jsx(_Fragment, {});
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     if (webrtcError) {
-        setProtocol(PlayerProtocol.HLS);
-        return (_jsx(View, { backgroundColor: "#111", children: _jsxs(View, { children: [_jsx(View, { children: _jsx(Text, { children: "WebRTC Not Supported" }) }), _jsx(Text, { children: webrtcError }), diagnostics.errors.length > 0 && (_jsxs(View, { children: [_jsx(Text, { children: "Technical Details:" }), diagnostics.errors.map((error, index) => (_jsxs(Text, { children: ["\u2022 ", error] }, index)))] })), _jsx(Text, { children: "\u2022 To use WebRTC, you may need to disable any blocking extensions or update your browser." }), _jsx(Text, { style: [mt[2]], children: "Switching to HLS..." })] }) }));
+        setProtocol(__1.PlayerProtocol.HLS);
+        return ((0, jsx_runtime_1.jsx)(index_1.View, { backgroundColor: "#111", children: (0, jsx_runtime_1.jsxs)(index_1.View, { children: [(0, jsx_runtime_1.jsx)(index_1.View, { children: (0, jsx_runtime_1.jsx)(index_1.Text, { children: "WebRTC Not Supported" }) }), (0, jsx_runtime_1.jsx)(index_1.Text, { children: webrtcError }), diagnostics.errors.length > 0 && ((0, jsx_runtime_1.jsxs)(index_1.View, { children: [(0, jsx_runtime_1.jsx)(index_1.Text, { children: "Technical Details:" }), diagnostics.errors.map((error, index) => ((0, jsx_runtime_1.jsxs)(index_1.Text, { children: ["\u2022 ", error] }, index)))] })), (0, jsx_runtime_1.jsx)(index_1.Text, { children: "\u2022 To use WebRTC, you may need to disable any blocking extensions or update your browser." }), (0, jsx_runtime_1.jsx)(index_1.Text, { style: [atoms_1.mt[2]], children: "Switching to HLS..." })] }) }));
     }
-    return _jsx(WebRTCPlayerInner, { url: props.url, videoRef: props.videoRef });
+    return (0, jsx_runtime_1.jsx)(WebRTCPlayerInner, { url: props.url, videoRef: props.videoRef });
 }
-export function WebRTCPlayerInner({ videoRef, url, width, height, }) {
-    const [connectionStatus, setConnectionStatus] = useState("initializing");
-    const status = usePlayerStore((x) => x.status);
-    const setStatus = usePlayerStore((x) => x.setStatus);
-    const playerEvent = usePlayerStore((x) => x.playerEvent);
-    const spurl = useStreamplaceStore((x) => x.url);
-    const [mediaStream, stuck] = useWebRTC(url);
-    useEffect(() => {
+function WebRTCPlayerInner({ videoRef, url, width, height, }) {
+    const [connectionStatus, setConnectionStatus] = (0, react_1.useState)("initializing");
+    const status = (0, __1.usePlayerStore)((x) => x.status);
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
+    const playerEvent = (0, __1.usePlayerStore)((x) => x.playerEvent);
+    const spurl = (0, __1.useStreamplaceStore)((x) => x.url);
+    const [mediaStream, stuck] = (0, use_webrtc_1.default)(url);
+    (0, react_1.useEffect)(() => {
         if (stuck) {
             setConnectionStatus("connection-failed");
         }
@@ -246,15 +256,15 @@ export function WebRTCPlayerInner({ videoRef, url, width, height, }) {
             setConnectionStatus("connecting");
         }
     }, [url, mediaStream, stuck, status]);
-    useEffect(() => {
-        if (stuck && status === PlayerStatus.PLAYING) {
-            setStatus(PlayerStatus.STALLED);
+    (0, react_1.useEffect)(() => {
+        if (stuck && status === __1.PlayerStatus.PLAYING) {
+            setStatus(__1.PlayerStatus.STALLED);
         }
         if (!stuck && mediaStream) {
-            setStatus(PlayerStatus.PLAYING);
+            setStatus(__1.PlayerStatus.PLAYING);
         }
     }, [stuck, status, mediaStream]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!mediaStream) {
             return;
         }
@@ -286,37 +296,37 @@ export function WebRTCPlayerInner({ videoRef, url, width, height, }) {
             mediaStream.removeEventListener("ended", ended);
         };
     }, [mediaStream]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!videoRef || !videoRef.current) {
             return;
         }
         videoRef.current.srcObject = mediaStream;
     }, [mediaStream]);
     if (!mediaStream) {
-        return (_jsx(View, { backgroundColor: "#111", style: { minWidth: "100%", minHeight: "100%" }, children: _jsxs(View, { backgroundColor: colors.primary[800], style: { borderRadius: borderRadius.md }, children: [_jsx(View, { children: _jsx(Text, { children: "Connecting..." }) }), _jsxs(Text, { children: ["Establishing WebRTC connection (", connectionStatus, ")"] })] }) }));
+        return ((0, jsx_runtime_1.jsx)(index_1.View, { backgroundColor: "#111", style: { minWidth: "100%", minHeight: "100%" }, children: (0, jsx_runtime_1.jsxs)(index_1.View, { backgroundColor: atoms_1.colors.primary[800], style: { borderRadius: atoms_1.borderRadius.md }, children: [(0, jsx_runtime_1.jsx)(index_1.View, { children: (0, jsx_runtime_1.jsx)(index_1.Text, { children: "Connecting..." }) }), (0, jsx_runtime_1.jsxs)(index_1.Text, { children: ["Establishing WebRTC connection (", connectionStatus, ")"] })] }) }));
     }
-    return _jsx(VideoElement, { url: url, ref: videoRef });
+    return (0, jsx_runtime_1.jsx)(VideoElement, { url: url, ref: videoRef });
 }
-export function WebcamIngestPlayer(props) {
-    const ingestStarting = usePlayerStore((x) => x.ingestStarting);
-    const ingestMediaSource = usePlayerStore((x) => x.ingestMediaSource);
-    const ingestAutoStart = usePlayerStore((x) => x.ingestAutoStart);
-    const [error, setError] = useState(null);
+function WebcamIngestPlayer(props) {
+    const ingestStarting = (0, __1.usePlayerStore)((x) => x.ingestStarting);
+    const ingestMediaSource = (0, __1.usePlayerStore)((x) => x.ingestMediaSource);
+    const ingestAutoStart = (0, __1.usePlayerStore)((x) => x.ingestAutoStart);
+    const [error, setError] = (0, react_1.useState)(null);
     let streamKey = null;
-    const [videoElement, setVideoElement] = useState(null);
-    const handleRef = useCallback((node) => {
+    const [videoElement, setVideoElement] = (0, react_1.useState)(null);
+    const handleRef = (0, react_1.useCallback)((node) => {
         if (node) {
             setVideoElement(node);
         }
     }, []);
-    const url = useStreamplaceStore((x) => x.url);
-    const [localMediaStream, setLocalMediaStream] = useState(null);
+    const url = (0, __1.useStreamplaceStore)((x) => x.url);
+    const [localMediaStream, setLocalMediaStream] = (0, react_1.useState)(null);
     // we assign a stream key in the webrtcingest hook
-    const [remoteMediaStream, setRemoteMediaStream] = useWebRTCIngest({
+    const [remoteMediaStream, setRemoteMediaStream] = (0, use_webrtc_1.useWebRTCIngest)({
         endpoint: `${url}/api/ingest/webrtc`,
     });
-    useEffect(() => {
-        if (ingestMediaSource === IngestMediaSource.DISPLAY) {
+    (0, react_1.useEffect)(() => {
+        if (ingestMediaSource === __1.IngestMediaSource.DISPLAY) {
             navigator.mediaDevices
                 .getDisplayMedia({
                 audio: true,
@@ -349,7 +359,7 @@ export function WebcamIngestPlayer(props) {
             });
         }
     }, [ingestMediaSource]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!ingestStarting && !ingestAutoStart) {
             setRemoteMediaStream(null);
             return;
@@ -359,7 +369,7 @@ export function WebcamIngestPlayer(props) {
         }
         setRemoteMediaStream(localMediaStream);
     }, [localMediaStream, ingestStarting, ingestAutoStart]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!videoElement) {
             return;
         }
@@ -369,7 +379,7 @@ export function WebcamIngestPlayer(props) {
         videoElement.srcObject = localMediaStream;
     }, [videoElement, localMediaStream]);
     if (error) {
-        return (_jsxs(View, { backgroundColor: colors.destructive[900], style: [p[4], { borderRadius: borderRadius.md }], children: [_jsx(View, { children: _jsx(Text, { size: "xl", weight: "extrabold", children: "Error encountered!" }) }), _jsx(Text, { children: error.message })] }));
+        return ((0, jsx_runtime_1.jsxs)(index_1.View, { backgroundColor: atoms_1.colors.destructive[900], style: [atoms_1.p[4], { borderRadius: atoms_1.borderRadius.md }], children: [(0, jsx_runtime_1.jsx)(index_1.View, { children: (0, jsx_runtime_1.jsx)(index_1.Text, { size: "xl", weight: "extrabold", children: "Error encountered!" }) }), (0, jsx_runtime_1.jsx)(index_1.Text, { children: error.message })] }));
     }
-    return _jsx(VideoElement, { ...props, ref: handleRef });
+    return (0, jsx_runtime_1.jsx)(VideoElement, { ...props, ref: handleRef });
 }