@streamplace/components 0.0.1 → 0.7.0

package/src/components/ui/view.tsx

@@ -0,0 +1,344 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef } from "react";
+import {
+  View as RNView,
+  ViewProps as RNViewProps,
+  ViewStyle,
+} from "react-native";
+import { borderRadius as radius, spacing } from "../../lib/theme/atoms";
+import { useTheme } from "../../lib/theme/theme";
+
+// View variants using class-variance-authority pattern
+const viewVariants = cva("", {
+  variants: {
+    variant: {
+      default: "default",
+      card: "card",
+      overlay: "overlay",
+      surface: "surface",
+      container: "container",
+    },
+    padding: {
+      none: "none",
+      xs: "xs",
+      sm: "sm",
+      md: "md",
+      lg: "lg",
+      xl: "xl",
+    },
+    margin: {
+      none: "none",
+      xs: "xs",
+      sm: "sm",
+      md: "md",
+      lg: "lg",
+      xl: "xl",
+    },
+    direction: {
+      row: "row",
+      column: "column",
+      "row-reverse": "row-reverse",
+      "column-reverse": "column-reverse",
+    },
+    align: {
+      start: "start",
+      center: "center",
+      end: "end",
+      stretch: "stretch",
+      baseline: "baseline",
+    },
+    justify: {
+      start: "start",
+      center: "center",
+      end: "end",
+      between: "between",
+      around: "around",
+      evenly: "evenly",
+    },
+    flex: {
+      none: "none",
+      auto: "auto",
+      initial: "initial",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    padding: "none",
+    margin: "none",
+    direction: "column",
+    align: "stretch",
+    justify: "start",
+    flex: "none",
+  },
+});
+
+export interface ViewProps
+  extends Omit<RNViewProps, "style">,
+    Omit<VariantProps<typeof viewVariants>, "flex"> {
+  // Style props
+  style?: ViewStyle | ViewStyle[];
+
+  // Convenience props
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+  centered?: boolean;
+
+  // Background
+  backgroundColor?: string;
+
+  // Border
+  borderColor?: string;
+  borderWidth?: number;
+  borderRadius?: number;
+
+  // Shadow (web only)
+  shadow?: boolean;
+
+  // Custom flex values
+  flex?: number | "none" | "auto" | "initial";
+}
+
+export const View = forwardRef<RNView, ViewProps>(
+  (
+    {
+      variant = "default",
+      padding = "none",
+      margin = "none",
+      direction = "column",
+      align = "stretch",
+      justify = "start",
+      flex = "none",
+      fullWidth = false,
+      fullHeight = false,
+      centered = false,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      shadow = false,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useTheme();
+
+    // Map variant to styles
+    const variantStyles: ViewStyle = (() => {
+      switch (variant) {
+        case "card":
+          return {
+            backgroundColor: theme.colors.card,
+            borderRadius: radius.lg,
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 3,
+          };
+        case "overlay":
+          return {
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          };
+        case "surface":
+          return {
+            backgroundColor: theme.colors.background,
+          };
+        case "container":
+          return {
+            backgroundColor: theme.colors.background,
+            padding: spacing[4],
+          };
+        default:
+          return {};
+      }
+    })();
+
+    // Map padding to numeric values
+    const paddingValue = (() => {
+      switch (padding) {
+        case "xs":
+          return spacing[1];
+        case "sm":
+          return spacing[2];
+        case "md":
+          return spacing[3];
+        case "lg":
+          return spacing[4];
+        case "xl":
+          return spacing[5];
+        default:
+          return undefined;
+      }
+    })();
+
+    // Map margin to numeric values
+    const marginValue = (() => {
+      switch (margin) {
+        case "xs":
+          return spacing[1];
+        case "sm":
+          return spacing[2];
+        case "md":
+          return spacing[3];
+        case "lg":
+          return spacing[4];
+        case "xl":
+          return spacing[5];
+        default:
+          return undefined;
+      }
+    })();
+
+    // Map flex direction
+    const flexDirection = (() => {
+      switch (direction) {
+        case "row":
+          return "row";
+        case "column":
+          return "column";
+        case "row-reverse":
+          return "row-reverse";
+        case "column-reverse":
+          return "column-reverse";
+        default:
+          return "column";
+      }
+    })() as ViewStyle["flexDirection"];
+
+    // Map align items
+    const alignItems = (() => {
+      switch (align) {
+        case "start":
+          return "flex-start";
+        case "center":
+          return "center";
+        case "end":
+          return "flex-end";
+        case "stretch":
+          return "stretch";
+        case "baseline":
+          return "baseline";
+        default:
+          return "stretch";
+      }
+    })() as ViewStyle["alignItems"];
+
+    // Map justify content
+    const justifyContent = (() => {
+      switch (justify) {
+        case "start":
+          return "flex-start";
+        case "center":
+          return "center";
+        case "end":
+          return "flex-end";
+        case "between":
+          return "space-between";
+        case "around":
+          return "space-around";
+        case "evenly":
+          return "space-evenly";
+        default:
+          return "flex-start";
+      }
+    })() as ViewStyle["justifyContent"];
+
+    // Map flex value
+    const flexValue = (() => {
+      if (typeof flex === "number") {
+        return flex;
+      }
+      switch (flex) {
+        case "auto":
+          return undefined; // auto is default
+        case "initial":
+          return 0;
+        case "none":
+        default:
+          return undefined;
+      }
+    })();
+
+    const computedStyle: ViewStyle = {
+      ...variantStyles,
+      ...(paddingValue !== undefined && { padding: paddingValue }),
+      ...(marginValue !== undefined && { margin: marginValue }),
+      flexDirection,
+      alignItems,
+      justifyContent,
+      ...(flexValue !== undefined && { flex: flexValue }),
+      ...(fullWidth && { width: "100%" }),
+      ...(fullHeight && { height: "100%" }),
+      ...(centered && {
+        alignItems: "center",
+        justifyContent: "center",
+      }),
+      ...(backgroundColor && { backgroundColor }),
+      ...(borderColor && { borderColor }),
+      ...(borderWidth !== undefined && { borderWidth }),
+      ...(borderRadius !== undefined && { borderRadius }),
+      ...(shadow && {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+      }),
+    };
+
+    const finalStyle = Array.isArray(style)
+      ? [computedStyle, ...style]
+      : [computedStyle, style];
+
+    return <RNView ref={ref} style={finalStyle} {...props} />;
+  },
+);
+
+View.displayName = "View";
+
+// Convenience components
+export const Card = forwardRef<RNView, Omit<ViewProps, "variant">>(
+  (props, ref) => <View ref={ref} variant="card" {...props} />,
+);
+
+Card.displayName = "Card";
+
+export const Container = forwardRef<RNView, Omit<ViewProps, "variant">>(
+  (props, ref) => <View ref={ref} variant="container" {...props} />,
+);
+
+Container.displayName = "Container";
+
+export const Surface = forwardRef<RNView, Omit<ViewProps, "variant">>(
+  (props, ref) => <View ref={ref} variant="surface" {...props} />,
+);
+
+Surface.displayName = "Surface";
+
+export const Overlay = forwardRef<RNView, Omit<ViewProps, "variant">>(
+  (props, ref) => <View ref={ref} variant="overlay" {...props} />,
+);
+
+Overlay.displayName = "Overlay";
+
+export const Row = forwardRef<RNView, Omit<ViewProps, "direction">>(
+  (props, ref) => <View ref={ref} direction="row" {...props} />,
+);
+
+Row.displayName = "Row";
+
+export const Column = forwardRef<RNView, Omit<ViewProps, "direction">>(
+  (props, ref) => <View ref={ref} direction="column" {...props} />,
+);
+
+Column.displayName = "Column";
+
+export const Center = forwardRef<RNView, ViewProps>((props, ref) => (
+  <View ref={ref} centered {...props} />
+));
+
+Center.displayName = "Center";
+
+// Export view variants for external use
+export { viewVariants };

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+// barrel file :)
+export * from "./useAvatars";
+export * from "./useCameraToggle";
+export * from "./useKeyboard";
+export * from "./useKeyboardSlide";
+export * from "./useLivestreamInfo";
+export * from "./useOuterAndInnerDimensions";
+export * from "./usePlayerDimensions";
+export * from "./useSegmentTiming";

package/src/hooks/useAvatars.tsx

@@ -0,0 +1,44 @@
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+
+export function useAvatars(
+  dids: string[],
+): Record<string, ProfileViewDetailed> {
+  let agent = usePDSAgent();
+  const [profiles, setProfiles] = useState<Record<string, ProfileViewDetailed>>(
+    {},
+  );
+  const inFlight = useRef<Set<string>>(new Set());
+
+  const missingDids = useMemo(
+    () =>
+      dids.filter((did) => !(did in profiles) && !inFlight.current.has(did)),
+    [dids, profiles],
+  );
+
+  useEffect(() => {
+    if (missingDids.length === 0 || !agent) return;
+    const toFetch = missingDids.slice(0, 25);
+    toFetch.forEach((did) => inFlight.current.add(did));
+
+    const fetchProfiles = async () => {
+      try {
+        const result = await agent.getProfiles({ actors: toFetch });
+        const newProfiles: Record<string, ProfileViewDetailed> = {};
+        result.data.profiles.forEach((p) => {
+          newProfiles[p.did] = p;
+        });
+        setProfiles((prev) => ({ ...prev, ...newProfiles }));
+      } catch (e) {
+        console.error("Failed to fetch profiles", e);
+      } finally {
+        toFetch.forEach((did) => inFlight.current.delete(did));
+      }
+    };
+
+    fetchProfiles();
+  }, [missingDids, agent]);
+
+  return profiles;
+}

package/src/hooks/useCameraToggle.ts

@@ -0,0 +1,12 @@
+import { usePlayerStore } from "../player-store";
+
+export function useCameraToggle() {
+  const ingestCamera = usePlayerStore((x) => x.ingestCamera);
+  const setIngestCamera = usePlayerStore((x) => x.setIngestCamera);
+
+  const doSetIngestCamera = () => {
+    setIngestCamera(ingestCamera === "user" ? "environment" : "user");
+  };
+
+  return { ingestCamera, doSetIngestCamera };
+}

package/src/hooks/useKeyboard.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { Keyboard } from "react-native";
+
+export function useKeyboard() {
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  useEffect(() => {
+    const willShowSubscription = Keyboard.addListener(
+      "keyboardWillShow",
+      (e) => {
+        // setIsKeyboardVisible(true);
+        setKeyboardHeight(e.endCoordinates.height);
+        console.log("keyboardWillShow", e.endCoordinates.height);
+      },
+    );
+    const willHideSubscription = Keyboard.addListener(
+      "keyboardWillHide",
+      (e) => {
+        // setIsKeyboardVisible(false);
+        setKeyboardHeight(0);
+        console.log("keyboardWillHide", e.endCoordinates.height);
+      },
+    );
+    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+      setIsKeyboardVisible(true);
+      setKeyboardHeight(e.endCoordinates.height);
+      console.log("keyboardDidShow", e.endCoordinates.height);
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setIsKeyboardVisible(false);
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      willShowSubscription.remove();
+    };
+  }, []);
+
+  return { isKeyboardVisible, keyboardHeight };
+}

package/src/hooks/useKeyboardSlide.ts

@@ -0,0 +1,12 @@
+import { useKeyboard } from "../hooks/useKeyboard";
+import { useOuterAndInnerDimensions } from "../hooks/useOuterAndInnerDimensions";
+
+export function useKeyboardSlide() {
+  const { keyboardHeight } = useKeyboard();
+  const { outerHeight, innerHeight } = useOuterAndInnerDimensions();
+  let slideKeyboard = 0;
+  if (keyboardHeight > 0) {
+    slideKeyboard = -keyboardHeight + (outerHeight - innerHeight);
+  }
+  return { keyboardHeight, slideKeyboard };
+}

package/src/hooks/useLivestreamInfo.ts

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { useLivestreamStore } from "../livestream-store";
+import { usePlayerStore } from "../player-store";
+import { useCreateStreamRecord } from "../streamplace-store";
+
+export function useLivestreamInfo() {
+  const ingest = usePlayerStore((x) => x.ingestConnectionState);
+  const profile = useLivestreamStore((x) => x.profile);
+  const ingestStarting = usePlayerStore((x) => x.ingestStarting);
+  const setIngestStarting = usePlayerStore((x) => x.setIngestStarting);
+  const setIngestLive = usePlayerStore((x) => x.setIngestLive);
+
+  const createStreamRecord = useCreateStreamRecord();
+
+  const [title, setTitle] = useState<string>("");
+  const [showCountdown, setShowCountdown] = useState(false);
+  const [recordSubmitted, setRecordSubmitted] = useState(false);
+
+  const handleSubmit = async () => {
+    try {
+      if (title !== "") {
+        setRecordSubmitted(true);
+        await createStreamRecord(title);
+      }
+    } catch (error) {
+      console.error("Error creating livestream:", error);
+      throw new Error("Failed to create livestream record");
+    } finally {
+      setRecordSubmitted(false);
+    }
+  };
+
+  const toggleGoLive = (
+    keyboardHeight?: number,
+    closeKeyboard?: () => void,
+  ) => {
+    if (!ingestStarting) {
+      // Optionally close keyboard if provided
+      if (closeKeyboard) closeKeyboard();
+      setShowCountdown(true);
+      setIngestStarting(true);
+      setIngestLive(true);
+      // wait ~3 seconds before announcing
+      setTimeout(() => {
+        handleSubmit();
+      }, 3000);
+    } else {
+      setIngestStarting(false);
+      setIngestLive(false);
+    }
+  };
+
+  return {
+    ingest,
+    profile,
+    title,
+    setTitle,
+    showCountdown,
+    setShowCountdown,
+    recordSubmitted,
+    setRecordSubmitted,
+    ingestStarting,
+    setIngestStarting,
+    handleSubmit,
+    toggleGoLive,
+  };
+}

package/src/hooks/useOuterAndInnerDimensions.tsx

@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+import { LayoutChangeEvent } from "react-native";
+
+export function useOuterAndInnerDimensions() {
+  const [outerDimensions, setOuterDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const [innerDimensions, setInnerDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  const onOuterLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setOuterDimensions({ width, height });
+  }, []);
+
+  const onInnerLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setInnerDimensions({ width, height });
+  }, []);
+
+  return {
+    outerWidth: outerDimensions.width,
+    outerHeight: outerDimensions.height,
+    innerWidth: innerDimensions.width,
+    innerHeight: innerDimensions.height,
+    onOuterLayout,
+    onInnerLayout,
+  };
+}

package/src/hooks/usePlayerDimensions.ts

@@ -0,0 +1,23 @@
+import { Dimensions } from "react-native";
+import { usePlayerStore } from "../player-store";
+
+/**
+ * usePlayerDimensions
+ * Returns player and device dimensions, and whether the player aspect ratio is greater than the device's.
+ */
+export function usePlayerDimensions() {
+  const { width, height } = Dimensions.get("window");
+  const pHeight = Number(usePlayerStore((x) => x.playerHeight)) || 0;
+  const pWidth = Number(usePlayerStore((x) => x.playerWidth)) || 0;
+
+  const isPlayerRatioGreater =
+    pHeight > 0 && pWidth > 0 ? pWidth / pHeight > width / height : false;
+
+  return {
+    width,
+    height,
+    pWidth,
+    pHeight,
+    isPlayerRatioGreater,
+  };
+}

package/src/hooks/useSegmentTiming.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useState } from "react";
+import { useLivestreamStore } from "../livestream-store";
+
+export type ConnectionQuality = "good" | "degraded" | "poor";
+
+function getLiveConnectionQuality(
+  timeBetweenSegments: number | null,
+  range: number | null,
+  numOfSegments: number = 1,
+): ConnectionQuality {
+  if (timeBetweenSegments === null || range === null) return "poor";
+
+  if (timeBetweenSegments <= 1500 && range <= (1500 * 60) / numOfSegments) {
+    return "good";
+  }
+  if (timeBetweenSegments <= 3000 && range <= (3000 * 60) / numOfSegments) {
+    return "degraded";
+  }
+  return "poor";
+}
+
+export function useSegmentTiming() {
+  const latestSegment = useLivestreamStore((x) => x.segment);
+  const [segmentDeltas, setSegmentDeltas] = useState<number[]>([]);
+  const prevSegmentRef = useRef<any>();
+  const prevTimestampRef = useRef<number | null>(null);
+
+  // Dummy state to force update every second
+  const [, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(Date.now());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (latestSegment && prevSegmentRef.current !== latestSegment) {
+      const now = Date.now();
+      if (prevTimestampRef.current !== null) {
+        const delta = now - prevTimestampRef.current;
+        // Only store the last 25 deltas
+        setSegmentDeltas((prev) => [...prev, delta].slice(-25));
+      }
+      prevTimestampRef.current = now;
+      prevSegmentRef.current = latestSegment;
+    }
+  }, [latestSegment]);
+
+  // The most recent time between segments
+  const timeBetweenSegments =
+    segmentDeltas.length > 0
+      ? segmentDeltas[segmentDeltas.length - 1]
+      : prevTimestampRef.current
+        ? Date.now() - prevTimestampRef.current
+        : null;
+
+  // Calculate mean and range of deltas
+  const mean =
+    segmentDeltas.length > 0
+      ? Math.round(
+          segmentDeltas.reduce((acc, curr) => acc + curr, 0) /
+            segmentDeltas.length,
+        )
+      : null;
+
+  const range =
+    segmentDeltas.length > 0
+      ? Math.max(...segmentDeltas) - Math.min(...segmentDeltas)
+      : null;
+
+  let to_ret = {
+    segmentDeltas,
+    timeBetweenSegments,
+    mean,
+    range,
+    connectionQuality: "poor",
+  };
+
+  to_ret.connectionQuality = getLiveConnectionQuality(
+    timeBetweenSegments,
+    range,
+    segmentDeltas.length,
+  );
+
+  return to_ret;
+}