@streamplace/components 0.7.26 → 0.7.27

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

@@ -178,6 +178,11 @@ function useWebRTCIngest({ endpoint, }) {
     const ingestConnectionState = (0, __1.usePlayerStore)((x) => x.ingestConnectionState);
     const setIngestConnectionState = (0, __1.usePlayerStore)((x) => x.setIngestConnectionState);
     const storedKey = (0, __1.useStreamKey)();
+    (0, react_1.useEffect)(() => {
+        if (storedKey?.error) {
+            console.error("error creating stream key", storedKey.error);
+        }
+    }, [storedKey?.error]);
     const [peerConnection, setPeerConnection] = (0, react_1.useState)(null);
     const videoTransceiver = (0, react_1.useRef)(null);
     const audioTransceiver = (0, react_1.useRef)(null);
@@ -211,7 +216,8 @@ function useWebRTCIngest({ endpoint, }) {
             negotiateConnectionWithClientOffer(peerConnection, endpoint, storedKey.streamKey?.privateKey);
         });
         peerConnection.addEventListener("track", (ev) => {
-            console.log(ev);
+            console.log(`got peerconnection track with ${ev.track.kind}`, ev.track.id);
+            // console.log(ev);
         });
         setPeerConnection(peerConnection);
         return () => {

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

@@ -43,11 +43,20 @@ function VideoNative(props) {
         importPromise = Promise.resolve().then(() => __importStar(require("./video-async.native")));
     }
     const [videoNativeModule, setVideoNativeModule] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        importPromise?.then((module) => {
+        importPromise
+            ?.then((module) => {
             setVideoNativeModule(module);
+        })
+            .catch((err) => {
+            setError(err.message);
         });
     }, []);
+    if (error) {
+        console.error(error);
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1, justifyContent: "center", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: error }) }));
+    }
     if (!videoNativeModule) {
         return (0, jsx_runtime_1.jsx)(react_native_1.View, {});
     }

package/dist/crypto-polyfill.native.js

@@ -0,0 +1,24 @@
+// awkward use of require()? you betcha. but import() with Metro causes it to try and
+// resolve the package at compile-time even if not installed, so here we are.
+let rnqc = null;
+let expoCrypto = null;
+try {
+    rnqc = require("react-native-quick-crypto");
+}
+catch (err) { }
+try {
+    expoCrypto = require("expo-crypto");
+}
+catch (err) { }
+if (!rnqc && !expoCrypto) {
+    throw new Error("Livestreaming requires one of react-native-quick-crypto or expo-crypto");
+}
+else if (!rnqc && expoCrypto) {
+    // @atproto/crypto dependencies expect crypto.getRandomValues to be a function
+    if (typeof globalThis.crypto === "undefined") {
+        globalThis.crypto = {};
+    }
+    if (typeof globalThis.crypto.getRandomValues === "undefined") {
+        globalThis.crypto.getRandomValues = expoCrypto.getRandomValues;
+    }
+}

package/dist/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.storage = exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
 const tslib_1 = require("tslib");
 // barrel file :)
+require("./crypto-polyfill");
 tslib_1.__exportStar(require("./livestream-provider"), exports);
 tslib_1.__exportStar(require("./livestream-store"), exports);
 tslib_1.__exportStar(require("./player-store"), exports);

package/dist/livestream-store/chat.js

@@ -160,11 +160,9 @@ const reduceChatIncremental = (state, newMessages, blocks, hideUris = []) => {
     const newAuthors = { ...state.authors };
     let hasChanges = false;
     const removedKeys = new Set();
-    console.log("newMessages", newMessages);
     for (const msg of newMessages) {
         if (msg.deleted) {
             hasChanges = true;
-            console.log("deleted", msg.uri);
             removedKeys.add(msg.uri);
         }
     }

package/dist/livestream-store/stream-key.js

@@ -81,7 +81,7 @@ const useStreamKey = () => {
             setStreamKey(JSON.stringify(newKey));
             setKey(newKey);
         };
-        generateKey();
+        generateKey().catch((err) => setError(err.message));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [key, setStreamKey]);
     return { streamKey: key, error };

package/dist/player-store/player-provider.js

@@ -3,10 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayerProvider = void 0;
 exports.withPlayerProvider = withPlayerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const crypto_1 = require("crypto");
 const react_1 = require("react");
 const context_1 = require("./context");
 const player_store_1 = require("./player-store");
+function randomUUID() {
+    let dt = new Date().getTime();
+    var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        var r = (dt + Math.random() * 16) % 16 | 0;
+        dt = Math.floor(dt / 16);
+        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+    return uuid;
+}
 const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random().toString(36).slice(8), }) => {
     const [players, setPlayers] = (0, react_1.useState)(() => {
         // Initialize with any initial player IDs provided
@@ -21,7 +29,7 @@ const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random
         return initialPlayerStores;
     });
     const createPlayer = (0, react_1.useCallback)((id) => {
-        const playerId = id || (0, crypto_1.randomUUID)();
+        const playerId = id || randomUUID();
         const playerStore = (0, player_store_1.makePlayerStore)(playerId);
         setPlayers((prev) => ({
             ...prev,

package/dist/player-store/single-player-provider.js

@@ -12,8 +12,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const zustand_1 = require("zustand");
-const player_store_1 = require("../player-store");
 const player_state_1 = require("./player-state");
+const player_store_1 = require("./player-store");
 const SinglePlayerContext = (0, react_1.createContext)(null);
 /**
  * Provider component for a single player that creates a scoped context

package/dist/streamplace-store/stream.js

@@ -111,7 +111,7 @@ function useCreateStreamRecord() {
         }
         // Use customUrl if provided, otherwise fall back to the store URL
         const finalUrl = customUrl || url;
-        const u = new URL(finalUrl);
+        const u = new URL(url);
         let thumbnail = undefined;
         if (customThumbnail) {
             try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.26",
+  "version": "0.7.27",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -53,5 +53,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "4dcda25a5e66a2c1a9f412bee2e09c4dd528a939"
+  "gitHead": "c981451ba44cc3e2213e1734c31d35b1383b2132"
 }

package/src/components/mobile-player/use-webrtc.tsx

@@ -205,6 +205,11 @@ export function useWebRTCIngest({
     (x) => x.setIngestConnectionState,
   );
   const storedKey = useStreamKey();
+  useEffect(() => {
+    if (storedKey?.error) {
+      console.error("error creating stream key", storedKey.error);
+    }
+  }, [storedKey?.error]);
   const [peerConnection, setPeerConnection] =
     useState<RTCPeerConnection | null>(null);
 
@@ -249,7 +254,11 @@ export function useWebRTCIngest({
     });
 
     peerConnection.addEventListener("track", (ev) => {
-      console.log(ev);
+      console.log(
+        `got peerconnection track with ${ev.track.kind}`,
+        ev.track.id,
+      );
+      // console.log(ev);
     });
 
     setPeerConnection(peerConnection);

package/src/components/mobile-player/video.native.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { View } from "react-native";
+import { Text, View } from "react-native";
 import { VideoNativeProps } from "./props";
 
 let importPromise: Promise<typeof import("./video-async.native")> | null = null;
@@ -13,12 +13,27 @@ export default function VideoNative(props: VideoNativeProps) {
     typeof import("./video-async.native") | null
   >(null);
 
+  const [error, setError] = useState<string | null>(null);
+
   useEffect(() => {
-    importPromise?.then((module) => {
-      setVideoNativeModule(module);
-    });
+    importPromise
+      ?.then((module) => {
+        setVideoNativeModule(module);
+      })
+      .catch((err) => {
+        setError(err.message);
+      });
   }, []);
 
+  if (error) {
+    console.error(error);
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text>{error}</Text>
+      </View>
+    );
+  }
+
   if (!videoNativeModule) {
     return <View></View>;
   }

package/src/crypto-polyfill.native.tsx

@@ -0,0 +1,24 @@
+// awkward use of require()? you betcha. but import() with Metro causes it to try and
+// resolve the package at compile-time even if not installed, so here we are.
+let rnqc: any | null = null;
+let expoCrypto: any | null = null;
+try {
+  rnqc = require("react-native-quick-crypto");
+} catch (err) {}
+try {
+  expoCrypto = require("expo-crypto");
+} catch (err) {}
+
+if (!rnqc && !expoCrypto) {
+  throw new Error(
+    "Livestreaming requires one of react-native-quick-crypto or expo-crypto",
+  );
+} else if (!rnqc && expoCrypto) {
+  // @atproto/crypto dependencies expect crypto.getRandomValues to be a function
+  if (typeof globalThis.crypto === "undefined") {
+    globalThis.crypto = {} as any;
+  }
+  if (typeof globalThis.crypto.getRandomValues === "undefined") {
+    globalThis.crypto.getRandomValues = expoCrypto.getRandomValues;
+  }
+}

package/src/index.tsx

@@ -1,4 +1,6 @@
 // barrel file :)
+import "./crypto-polyfill";
+
 export * from "./livestream-provider";
 export * from "./livestream-store";
 export * from "./player-store";

package/src/livestream-store/chat.tsx

@@ -212,12 +212,9 @@ export const reduceChatIncremental = (
   let hasChanges = false;
   const removedKeys = new Set<string>();
 
-  console.log("newMessages", newMessages);
-
   for (const msg of newMessages) {
     if (msg.deleted) {
       hasChanges = true;
-      console.log("deleted", msg.uri);
       removedKeys.add(msg.uri);
     }
   }

package/src/livestream-store/stream-key.tsx

@@ -90,7 +90,7 @@ export const useStreamKey = (): {
       setKey(newKey);
     };
 
-    generateKey();
+    generateKey().catch((err) => setError(err.message));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key, setStreamKey]);
 

package/src/player-store/player-provider.tsx

@@ -1,4 +1,3 @@
-import { randomUUID } from "crypto";
 import React, { useCallback, useMemo, useState } from "react";
 import { StoreApi } from "zustand";
 import { PlayerContext } from "./context";
@@ -11,6 +10,19 @@ interface PlayerProviderProps {
   defaultId?: string;
 }
 
+function randomUUID(): string {
+  let dt = new Date().getTime();
+  var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+    /[xy]/g,
+    function (c) {
+      var r = (dt + Math.random() * 16) % 16 | 0;
+      dt = Math.floor(dt / 16);
+      return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
+    },
+  );
+  return uuid;
+}
+
 export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   children,
   initialPlayers = [],

package/src/player-store/single-player-provider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo } from "react";
 import { StoreApi, useStore } from "zustand";
-import { usePlayerContext } from "../player-store";
 import { PlayerProtocol, PlayerState } from "./player-state";
+import { usePlayerContext } from "./player-store";
 
 // Context for a single player
 interface SinglePlayerContextType {

package/src/streamplace-store/stream.tsx

@@ -154,7 +154,7 @@ export function useCreateStreamRecord() {
 
     // Use customUrl if provided, otherwise fall back to the store URL
     const finalUrl = customUrl || url;
-    const u = new URL(finalUrl);
+    const u = new URL(url);
 
     let thumbnail: BlobRef | undefined = undefined;