@streamplace/components 0.7.1 → 0.7.3

package/dist/streamplace-provider/poller.js

@@ -1,24 +1,27 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { StreamplaceAgent } from "streamplace";
-import { useDID, useGetBskyProfile, useGetChatProfile, useStreamplaceStore, } from "../streamplace-store";
-import { usePDSAgent } from "../streamplace-store/xrpc";
-export default function Poller({ children }) {
-    const url = useStreamplaceStore((state) => state.url);
-    const setLiveUsers = useStreamplaceStore((state) => state.setLiveUsers);
-    const did = useDID();
-    const pdsAgent = usePDSAgent();
-    const getChatProfile = useGetChatProfile();
-    const getBskyProfile = useGetBskyProfile();
-    const liveUserRefresh = useStreamplaceStore((state) => state.liveUsersRefresh);
-    useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Poller;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const streamplace_1 = require("streamplace");
+const streamplace_store_1 = require("../streamplace-store");
+const xrpc_1 = require("../streamplace-store/xrpc");
+function Poller({ children }) {
+    const url = (0, streamplace_store_1.useStreamplaceStore)((state) => state.url);
+    const setLiveUsers = (0, streamplace_store_1.useStreamplaceStore)((state) => state.setLiveUsers);
+    const did = (0, streamplace_store_1.useDID)();
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const getChatProfile = (0, streamplace_store_1.useGetChatProfile)();
+    const getBskyProfile = (0, streamplace_store_1.useGetBskyProfile)();
+    const liveUserRefresh = (0, streamplace_store_1.useStreamplaceStore)((state) => state.liveUsersRefresh);
+    (0, react_1.useEffect)(() => {
         if (pdsAgent && did) {
             getChatProfile();
             getBskyProfile();
         }
     }, [pdsAgent, did]);
-    useEffect(() => {
-        const agent = new StreamplaceAgent(url);
+    (0, react_1.useEffect)(() => {
+        const agent = new streamplace_1.StreamplaceAgent(url);
         const go = async () => {
             setLiveUsers({
                 liveUsersLoading: true,
@@ -42,5 +45,5 @@ export default function Poller({ children }) {
         const handle = setInterval(go, 3000);
         return () => clearInterval(handle);
     }, [url, liveUserRefresh]);
-    return _jsx(_Fragment, { children: children });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 }

package/dist/streamplace-store/block.js

@@ -1,6 +1,9 @@
-import { usePDSAgent } from "./xrpc";
-export function useCreateBlockRecord() {
-    let agent = usePDSAgent();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateBlockRecord = useCreateBlockRecord;
+const xrpc_1 = require("./xrpc");
+function useCreateBlockRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
     return async (subjectDID) => {
         if (!agent) {
             throw new Error("No PDS agent found");

package/dist/streamplace-store/index.js

@@ -1,3 +1,6 @@
-export * from "./stream";
-export * from "./streamplace-store";
-export * from "./user";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./stream"), exports);
+tslib_1.__exportStar(require("./streamplace-store"), exports);
+tslib_1.__exportStar(require("./user"), exports);

package/dist/streamplace-store/stream.js

@@ -1,29 +1,52 @@
-import { RichText } from "@atproto/api";
-import { useUrl } from "./streamplace-store";
-import { usePDSAgent } from "./xrpc";
-const uploadThumbnail = async (pdsAgent, customThumbnail) => {
-    if (customThumbnail) {
-        let tries = 0;
-        try {
-            let thumbnail = await pdsAgent.uploadBlob(customThumbnail);
-            while (thumbnail.data.blob.size === 0 &&
-                customThumbnail.size !== 0 &&
-                tries < 3) {
-                console.warn("Reuploading blob as blob sizes don't match! Blob size recieved is", thumbnail.data.blob.size, "and sent blob size is", customThumbnail.size);
-                thumbnail = await pdsAgent.uploadBlob(customThumbnail);
-            }
-            if (tries === 3) {
-                throw new Error("Could not successfully upload blob (tried thrice)");
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateStreamRecord = useCreateStreamRecord;
+exports.useUpdateStreamRecord = useUpdateStreamRecord;
+const api_1 = require("@atproto/api");
+const streamplace_store_1 = require("./streamplace-store");
+const xrpc_1 = require("./xrpc");
+const react_1 = require("react");
+const useUploadThumbnail = () => {
+    const abortRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // On unmount, abort any ongoing upload
+            abortRef.current?.abort();
+        };
+    }, []);
+    const uploadThumbnail = async (pdsAgent, customThumbnail) => {
+        if (!customThumbnail)
+            return undefined;
+        abortRef.current = new AbortController();
+        const { signal } = abortRef.current;
+        const maxTries = 3;
+        let lastError = null;
+        for (let tries = 0; tries < maxTries; tries++) {
+            try {
+                const thumbnail = await pdsAgent.uploadBlob(customThumbnail, {
+                    signal,
+                });
+                if (thumbnail.success &&
+                    thumbnail.data.blob.size === customThumbnail.size) {
+                    console.log("Successfully uploaded thumbnail");
+                    return thumbnail.data.blob;
+                }
+                else {
+                    console.warn(`Blob size mismatch (attempt ${tries + 1}): received ${thumbnail.data.blob.size}, expected ${customThumbnail.size}`);
+                }
             }
-            if (thumbnail.success) {
-                console.log("Successfully uploaded thumbnail");
-                return thumbnail.data.blob;
+            catch (e) {
+                if (signal.aborted) {
+                    console.warn("Upload aborted");
+                    return undefined;
+                }
+                lastError = e;
+                console.warn(`Error uploading thumbnail (attempt ${tries + 1}): ${e}`);
             }
         }
-        catch (e) {
-            throw new Error("Error uploading thumbnail: " + e);
-        }
-    }
+        throw new Error(`Could not successfully upload blob after ${maxTries} attempts. Last error: ${lastError}`);
+    };
+    return uploadThumbnail;
 };
 async function createNewPost(agent, record) {
     try {
@@ -35,15 +58,15 @@ async function createNewPost(agent, record) {
         throw error;
     }
 }
-function buildGoLivePost(text, url, profile, params, thumbnail) {
+async function buildGoLivePost(text, url, profile, params, thumbnail, agent) {
     const now = new Date();
     const linkUrl = `${url.protocol}//${url.host}/${profile.handle}?${params.toString()}`;
     const prefix = `🔴 LIVE `;
     const textUrl = `${url.protocol}//${url.host}/${profile.handle}`;
     const suffix = ` ${text}`;
     const content = prefix + textUrl + suffix;
-    const rt = new RichText({ text: content });
-    rt.detectFacetsWithoutResolution();
+    const rt = new api_1.RichText({ text: content });
+    await rt.detectFacets(agent);
     const record = {
         $type: "app.bsky.feed.post",
         text: content,
@@ -65,9 +88,10 @@ function buildGoLivePost(text, url, profile, params, thumbnail) {
     };
     return record;
 }
-export function useCreateStreamRecord() {
-    let agent = usePDSAgent();
-    let url = useUrl();
+function useCreateStreamRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    let url = (0, streamplace_store_1.useUrl)();
+    const uploadThumbnail = useUploadThumbnail();
     return async (title, customThumbnail, submitPost = true) => {
         if (!agent) {
             throw new Error("No PDS agent found");
@@ -126,7 +150,7 @@ export function useCreateStreamRecord() {
                 did: did,
                 time: new Date().toISOString(),
             });
-            let post = buildGoLivePost(title, u, profile.data, params, thumbnail);
+            let post = await buildGoLivePost(title, u, profile.data, params, thumbnail, agent);
             newPost = await createNewPost(agent, post);
             if (!newPost.uri || !newPost.cid) {
                 throw new Error("Cannot read properties of undefined (reading 'uri' or 'cid')");
@@ -147,9 +171,10 @@ export function useCreateStreamRecord() {
         return record;
     };
 }
-export function useUpdateStreamRecord() {
-    let agent = usePDSAgent();
-    let url = useUrl();
+function useUpdateStreamRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    let url = (0, streamplace_store_1.useUrl)();
+    const uploadThumbnail = useUploadThumbnail();
     return async (title, livestream, customThumbnail) => {
         if (!agent) {
             throw new Error("No PDS agent found");

package/dist/streamplace-store/streamplace-store.js

@@ -1,8 +1,13 @@
-import { useContext } from "react";
-import { createStore, useStore } from "zustand";
-import { StreamplaceContext } from "../streamplace-provider/context";
-export const makeStreamplaceStore = ({ url, }) => {
-    return createStore()((set) => ({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetHandle = exports.useHandle = exports.useDID = exports.useUrl = exports.makeStreamplaceStore = void 0;
+exports.getStreamplaceStoreFromContext = getStreamplaceStoreFromContext;
+exports.useStreamplaceStore = useStreamplaceStore;
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const context_1 = require("../streamplace-provider/context");
+const makeStreamplaceStore = ({ url, }) => {
+    return (0, zustand_1.createStore)()((set) => ({
         url,
         liveUsers: null,
         setLiveUsers: (opts) => {
@@ -18,20 +23,25 @@ export const makeStreamplaceStore = ({ url, }) => {
         chatProfile: null,
     }));
 };
-export function getStreamplaceStoreFromContext() {
-    const context = useContext(StreamplaceContext);
+exports.makeStreamplaceStore = makeStreamplaceStore;
+function getStreamplaceStoreFromContext() {
+    const context = (0, react_1.useContext)(context_1.StreamplaceContext);
     if (!context) {
         throw new Error("useStreamplaceStore must be used within a StreamplaceProvider");
     }
     return context.store;
 }
-export function useStreamplaceStore(selector) {
-    return useStore(getStreamplaceStoreFromContext(), selector);
+function useStreamplaceStore(selector) {
+    return (0, zustand_1.useStore)(getStreamplaceStoreFromContext(), selector);
 }
-export const useUrl = () => useStreamplaceStore((x) => x.url);
-export const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
-export const useHandle = () => useStreamplaceStore((x) => x.handle);
-export const useSetHandle = () => {
+const useUrl = () => useStreamplaceStore((x) => x.url);
+exports.useUrl = useUrl;
+const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
+exports.useDID = useDID;
+const useHandle = () => useStreamplaceStore((x) => x.handle);
+exports.useHandle = useHandle;
+const useSetHandle = () => {
     const store = getStreamplaceStoreFromContext();
     return (handle) => store.setState({ handle });
 };
+exports.useSetHandle = useSetHandle;

package/dist/streamplace-store/user.js

@@ -1,10 +1,15 @@
-import { PlaceStreamChatProfile } from "streamplace";
-import { getStreamplaceStoreFromContext, useDID, useStreamplaceStore, } from "./streamplace-store";
-import { usePDSAgent } from "./xrpc";
-export function useGetChatProfile() {
-    const did = useDID();
-    const pdsAgent = usePDSAgent();
-    const store = getStreamplaceStoreFromContext();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetChatProfile = useGetChatProfile;
+exports.useGetBskyProfile = useGetBskyProfile;
+exports.useChatProfile = useChatProfile;
+const streamplace_1 = require("streamplace");
+const streamplace_store_1 = require("./streamplace-store");
+const xrpc_1 = require("./xrpc");
+function useGetChatProfile() {
+    const did = (0, streamplace_store_1.useDID)();
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const store = (0, streamplace_store_1.getStreamplaceStoreFromContext)();
     return async () => {
         if (!did || !pdsAgent) {
             throw new Error("No DID or PDS agent");
@@ -17,7 +22,7 @@ export function useGetChatProfile() {
         if (!res.success) {
             throw new Error("Failed to get chat profile record");
         }
-        if (PlaceStreamChatProfile.isRecord(res.data.value)) {
+        if (streamplace_1.PlaceStreamChatProfile.isRecord(res.data.value)) {
             store.setState({ chatProfile: res.data.value });
         }
         else {
@@ -25,10 +30,10 @@ export function useGetChatProfile() {
         }
     };
 }
-export function useGetBskyProfile() {
-    const did = useDID();
-    const pdsAgent = usePDSAgent();
-    const store = getStreamplaceStoreFromContext();
+function useGetBskyProfile() {
+    const did = (0, streamplace_store_1.useDID)();
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const store = (0, streamplace_store_1.getStreamplaceStoreFromContext)();
     return async () => {
         if (!did || !pdsAgent) {
             throw new Error("No DID or PDS agent");
@@ -42,6 +47,6 @@ export function useGetBskyProfile() {
         store.setState({ handle: res.data.handle });
     };
 }
-export function useChatProfile() {
-    return useStreamplaceStore((x) => x.chatProfile);
+function useChatProfile() {
+    return (0, streamplace_store_1.useStreamplaceStore)((x) => x.chatProfile);
 }

package/dist/streamplace-store/xrpc.js

@@ -1,12 +1,15 @@
-import { useMemo } from "react";
-import { StreamplaceAgent } from "streamplace";
-import { useStreamplaceStore } from ".";
-export function usePDSAgent() {
-    const oauthSession = useStreamplaceStore((state) => state.oauthSession);
-    return useMemo(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePDSAgent = usePDSAgent;
+const react_1 = require("react");
+const streamplace_1 = require("streamplace");
+const _1 = require(".");
+function usePDSAgent() {
+    const oauthSession = (0, _1.useStreamplaceStore)((state) => state.oauthSession);
+    return (0, react_1.useMemo)(() => {
         if (!oauthSession) {
             return null;
         }
-        return new StreamplaceAgent(oauthSession);
+        return new streamplace_1.StreamplaceAgent(oauthSession);
     }, [oauthSession]);
 }

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Streamplace React (Native) Components",
-  "type": "module",
   "main": "dist/index.js",
   "types": "src/index.tsx",
   "exports": {
     ".": {
       "@streamplace/dev": "./src/index.tsx",
-      "types": "./dist/index.d.mjs",
-      "default": "./dist/index.mjs"
+      "types": "./src/index.tsx",
+      "default": "./dist/index.js"
     }
   },
   "scripts": {
@@ -44,12 +43,12 @@
     "react-native-safe-area-context": "5.4.1",
     "react-native-webrtc": "git+https://github.com/streamplace/react-native-webrtc.git#6b8472a771ac47f89217d327058a8a4124a6ae56",
     "react-use-websocket": "^4.13.0",
-    "streamplace": "0.7.1",
+    "streamplace": "0.7.2",
     "viem": "^2.21.44",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "e092ac26f32426cfb14ec3cbda96265ad2fbae12"
+  "gitHead": "70367834f75a94f074bd81299c2e72c36b0dbbf0"
 }

package/src/components/mobile-player/ui/index.ts

@@ -1,5 +1,6 @@
 export * from "./countdown";
 export * from "./input";
+export * from "./loading";
 export * from "./metrics";
 export * from "./streamer-context-menu";
 export * from "./viewer-context-menu";

package/src/components/mobile-player/ui/loading.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
+import { pt } from "../../../lib/theme/atoms";
+
+type LoadingOverlayProps = {
+  visible: boolean;
+  width: number;
+  height: number;
+  subtitle?: string;
+  messages?: string[];
+  interval?: number; // in milliseconds
+};
+
+const defaultMessages = [
+  "Creating your stream",
+  "Uploading thumbnails",
+  "Getting things ready",
+  "Doing some magic",
+  "Preparing something special",
+  "Reticulating splines",
+  "Making it nice",
+  "Flipping some switches",
+  "Adding good vibes",
+  "Almost there",
+  "Summoning your Persona",
+  "Awakening our true selves",
+  "Fusion in progress",
+  "Equipping the right materia",
+];
+
+export function LoadingOverlay({
+  visible,
+  width,
+  height,
+  subtitle,
+  messages = defaultMessages,
+  interval = 3000,
+}: LoadingOverlayProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [shouldRender, setShouldRender] = useState(visible);
+
+  // Animation values
+  const translateY = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  const wholeOpacity = useSharedValue(0);
+
+  // Handle fade-in and fade-out animations
+  useEffect(() => {
+    if (visible) {
+      setShouldRender(true); // Ensure the component is mounted
+      wholeOpacity.value = withTiming(1, { duration: 500 }); // Fade in
+    } else {
+      wholeOpacity.value = withTiming(0, { duration: 500 }, () => {
+        // Unmount after fade-out
+        runOnJS(setShouldRender)(false);
+      });
+    }
+  }, [visible]);
+
+  // Cycle messages on a timer
+  useEffect(() => {
+    if (!visible) {
+      setCurrentIndex(0);
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % messages.length);
+    }, interval);
+
+    return () => clearTimeout(timeout);
+  }, [visible, currentIndex, interval, messages.length]);
+
+  // Trigger animation on each message change
+  useEffect(() => {
+    if (!visible) return;
+
+    const fadeDuration = Math.min(interval / 2, 250); // Simplified fade duration
+
+    // Reset animation values
+    translateY.value = 20;
+    opacity.value = 0;
+
+    // Sequential fade-in and fade-out
+    translateY.value = withTiming(0, { duration: fadeDuration });
+    opacity.value = withTiming(1, { duration: fadeDuration }, () => {
+      // add a delay for interval - (fadeDuration*2)
+
+      translateY.value = withDelay(
+        interval - fadeDuration * 2,
+        withTiming(-10, { duration: fadeDuration }),
+      );
+      opacity.value = withDelay(
+        interval - fadeDuration * 2,
+        withTiming(0, { duration: fadeDuration }),
+      );
+    });
+  }, [currentIndex, visible]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value,
+    };
+  });
+
+  const wholeAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: wholeOpacity.value,
+  }));
+
+  if (!shouldRender) return null;
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width,
+          height,
+          backgroundColor: "rgba(0,0,0,0.7)",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1000,
+        },
+        wholeAnimatedStyle,
+      ]}
+    >
+      <Animated.Text
+        style={[
+          {
+            color: "white",
+            fontSize: 24,
+            fontWeight: "bold",
+          },
+          animatedStyle,
+        ]}
+      >
+        {messages[currentIndex]}
+      </Animated.Text>
+      <Animated.Text style={[pt[5], { color: "#a0a0a0" }]}>
+        {subtitle}
+      </Animated.Text>
+    </Animated.View>
+  );
+}

package/src/components/ui/resizeable.tsx

@@ -15,7 +15,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useKeyboardSlide } from "../../hooks";
-import { bottom, layout, p, w, zIndex } from "../../lib/theme/atoms";
+import { bottom, h, layout, p, w, zIndex } from "../../lib/theme/atoms";
 import { View } from "./view";
 
 const AnimatedView = Animated.createAnimatedComponent(View);
@@ -154,24 +154,35 @@ export function Resizable({
           style,
         ]}
       >
-        <View style={[layout.flex.row, layout.flex.justifyCenter]}>
+        <View style={[layout.flex.row, layout.flex.justifyCenter, h[2]]}>
           <GestureDetector gesture={panGesture}>
             <View
-              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-              style={[
-                w[32],
-                {
-                  height: 6,
-                  transform: [{ translateY: -10 }],
-                  backgroundColor: "#eeeeee66",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  borderRadius: 999,
-                },
-              ]}
-            />
+              // Make the touch area much larger, but keep the visible handle small
+              style={{
+                height: 30, // Large touch area
+                width: 120, // Wide enough for thumbs
+                alignItems: "center",
+                justifyContent: "center",
+                //backgroundColor: "rgba(0,255,255,0.1)",
+                transform: [{ translateY: -30 }],
+              }}
+            >
+              <View
+                style={[
+                  w[32],
+                  {
+                    height: 6,
+                    backgroundColor: "#eeeeee66",
+                    borderRadius: 999,
+
+                    transform: [{ translateY: 5 }],
+                  },
+                ]}
+              />
+            </View>
           </GestureDetector>
         </View>
+
         {children}
       </AnimatedView>
     </>

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

@@ -119,6 +119,10 @@ export interface PlayerState {
       | undefined,
   ) => void;
 
+  pipAction: (() => void) | undefined;
+  /** Function to set the Picture-in-Picture action */
+  setPipAction: (action: (() => void) | undefined) => void;
+
   /** Player element width (CSS value or number) */
   playerWidth?: string | number;
   /** Function to set the player width */

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

@@ -83,6 +83,11 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     pipMode: false,
     setPipMode: (pipMode: boolean) => set(() => ({ pipMode })),
 
+    // Picture-in-Picture action function (set by player component)
+    pipAction: undefined,
+    setPipAction: (action: (() => void) | undefined) =>
+      set(() => ({ pipAction: action })),
+
     // Player element width/height setters for global sync
     playerWidth: undefined,
     setPlayerWidth: (playerWidth: number) => set(() => ({ playerWidth })),