@streamplace/components 0.7.2 → 0.7.3

package/dist/components/mobile-player/ui/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./countdown"), exports);
 tslib_1.__exportStar(require("./input"), exports);
+tslib_1.__exportStar(require("./loading"), exports);
 tslib_1.__exportStar(require("./metrics"), exports);
 tslib_1.__exportStar(require("./streamer-context-menu"), exports);
 tslib_1.__exportStar(require("./viewer-context-menu"), exports);

package/dist/components/mobile-player/ui/loading.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = LoadingOverlay;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+const atoms_1 = require("../../../lib/theme/atoms");
+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",
+];
+function LoadingOverlay({ visible, width, height, subtitle, messages = defaultMessages, interval = 3000, }) {
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [shouldRender, setShouldRender] = (0, react_1.useState)(visible);
+    // Animation values
+    const translateY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(1);
+    const wholeOpacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    // Handle fade-in and fade-out animations
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setShouldRender(true); // Ensure the component is mounted
+            wholeOpacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 500 }); // Fade in
+        }
+        else {
+            wholeOpacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 500 }, () => {
+                // Unmount after fade-out
+                (0, react_native_reanimated_1.runOnJS)(setShouldRender)(false);
+            });
+        }
+    }, [visible]);
+    // Cycle messages on a timer
+    (0, react_1.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
+    (0, react_1.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 = (0, react_native_reanimated_1.withTiming)(0, { duration: fadeDuration });
+        opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: fadeDuration }, () => {
+            // add a delay for interval - (fadeDuration*2)
+            translateY.value = (0, react_native_reanimated_1.withDelay)(interval - fadeDuration * 2, (0, react_native_reanimated_1.withTiming)(-10, { duration: fadeDuration }));
+            opacity.value = (0, react_native_reanimated_1.withDelay)(interval - fadeDuration * 2, (0, react_native_reanimated_1.withTiming)(0, { duration: fadeDuration }));
+        });
+    }, [currentIndex, visible]);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            transform: [{ translateY: translateY.value }],
+            opacity: opacity.value,
+        };
+    });
+    const wholeAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: wholeOpacity.value,
+    }));
+    if (!shouldRender)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
+            {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width,
+                height,
+                backgroundColor: "rgba(0,0,0,0.7)",
+                alignItems: "center",
+                justifyContent: "center",
+                zIndex: 1000,
+            },
+            wholeAnimatedStyle,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [
+                    {
+                        color: "white",
+                        fontSize: 24,
+                        fontWeight: "bold",
+                    },
+                    animatedStyle,
+                ], children: messages[currentIndex] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [atoms_1.pt[5], { color: "#a0a0a0" }], children: subtitle })] }));
+}

package/dist/components/ui/resizeable.js

@@ -97,16 +97,25 @@ function Resizable({ startingPercentage, isPlayerRatioGreater, style = {}, child
                         minWidth: "100%",
                     },
                     style,
-                ], children: [(0, jsx_runtime_1.jsx)(view_1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.justifyCenter], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(view_1.View, { hitSlop: { top: 20, bottom: 20, left: 20, right: 20 }, style: [
-                                    atoms_1.w[32],
-                                    {
-                                        height: 6,
-                                        transform: [{ translateY: -10 }],
-                                        backgroundColor: "#eeeeee66",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        borderRadius: 999,
-                                    },
-                                ] }) }) }), children] })] }));
+                ], children: [(0, jsx_runtime_1.jsx)(view_1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.justifyCenter, atoms_1.h[2]], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(view_1.View
+                            // Make the touch area much larger, but keep the visible handle small
+                            , { 
+                                // 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 }],
+                                }, children: (0, jsx_runtime_1.jsx)(view_1.View, { style: [
+                                        atoms_1.w[32],
+                                        {
+                                            height: 6,
+                                            backgroundColor: "#eeeeee66",
+                                            borderRadius: 999,
+                                            transform: [{ translateY: 5 }],
+                                        },
+                                    ] }) }) }) }), children] })] }));
 }
 Resizable.displayName = "ResizableChatSheet";

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

@@ -47,6 +47,9 @@ const makePlayerStore = (id) => {
         setVideoRef: (videoRef) => set(() => ({ videoRef })),
         pipMode: false,
         setPipMode: (pipMode) => set(() => ({ pipMode })),
+        // Picture-in-Picture action function (set by player component)
+        pipAction: undefined,
+        setPipAction: (action) => set(() => ({ pipAction: action })),
         // Player element width/height setters for global sync
         playerWidth: undefined,
         setPlayerWidth: (playerWidth) => set(() => ({ playerWidth })),

package/dist/streamplace-store/stream.js

@@ -5,29 +5,48 @@ exports.useUpdateStreamRecord = useUpdateStreamRecord;
 const api_1 = require("@atproto/api");
 const streamplace_store_1 = require("./streamplace-store");
 const xrpc_1 = require("./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)");
+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 {
@@ -39,7 +58,7 @@ 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 `;
@@ -47,7 +66,7 @@ function buildGoLivePost(text, url, profile, params, thumbnail) {
     const suffix = ` ${text}`;
     const content = prefix + textUrl + suffix;
     const rt = new api_1.RichText({ text: content });
-    rt.detectFacetsWithoutResolution();
+    await rt.detectFacets(agent);
     const record = {
         $type: "app.bsky.feed.post",
         text: content,
@@ -72,6 +91,7 @@ function buildGoLivePost(text, url, profile, params, thumbnail) {
 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");
@@ -130,7 +150,7 @@ 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')");
@@ -154,6 +174,7 @@ function useCreateStreamRecord() {
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -50,5 +50,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "b07a68160ae6da34cf47aa397b4ef452248d79e5"
+  "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 })),