@streamplace/components 0.7.9 → 0.7.13

package/src/components/dashboard/problems.tsx

@@ -0,0 +1,151 @@
+import { ExternalLink } from "lucide-react-native";
+import { useState } from "react";
+import { Linking, Pressable, Text, View } from "react-native";
+import { useLivestreamStore } from "../../livestream-store";
+import { LivestreamProblem } from "../../livestream-store/livestream-state";
+import * as zero from "../../ui";
+
+const { bg, r, borders, p, text, layout, gap } = zero;
+
+const Problems = ({
+  probs,
+  onIgnore,
+}: {
+  probs: LivestreamProblem[];
+  onIgnore: () => void;
+}) => {
+  return (
+    <View style={[gap.all[3]]}>
+      <View>
+        <Text style={[text.white, { fontSize: 24, fontWeight: "bold" }]}>
+          Optimize Your Stream
+        </Text>
+        <Text style={[text.gray[300]]}>
+          We've found a few things that could improve your stream's reliability.
+        </Text>
+      </View>
+      {probs.map((p) => (
+        <View key={p.message}>
+          <View
+            style={[
+              gap.all[2],
+              layout.flex.row,
+              layout.flex.alignCenter,
+              { gap: 8, alignItems: "flex-start" },
+            ]}
+          >
+            <Text
+              style={[
+                r.sm,
+                p[2],
+                {
+                  width: 82,
+                  textAlign: "center",
+                  backgroundColor:
+                    p.severity === "error"
+                      ? "#7f1d1d"
+                      : p.severity === "warning"
+                        ? "#7c2d12"
+                        : "#1e3a8a",
+                  color: "white",
+                  fontSize: 12,
+                },
+              ]}
+            >
+              {p.severity}
+            </Text>
+            <View style={[{ flex: 1 }, gap.all[1]]}>
+              <Text style={[text.white, { fontWeight: "600" }]}>{p.code}</Text>
+              <Text style={[text.gray[400], { fontSize: 14 }]}>
+                {p.message}
+              </Text>
+              {p.link && (
+                <Pressable onPress={() => p.link && Linking.openURL(p.link)}>
+                  <View
+                    style={[
+                      layout.flex.row,
+                      layout.flex.alignCenter,
+                      gap.all[2],
+                    ]}
+                  >
+                    <Text style={[{ color: "#3b82f6", fontSize: 14 }]}>
+                      Learn More
+                    </Text>
+                    <ExternalLink size={12} color="#3b82f6" />
+                  </View>
+                </Pressable>
+              )}
+            </View>
+          </View>
+        </View>
+      ))}
+
+      <Pressable
+        onPress={onIgnore}
+        style={[
+          bg.blue[600],
+          r.md,
+          p[3],
+          layout.flex.center,
+          { marginTop: 16 },
+        ]}
+      >
+        <Text style={[text.white, { fontWeight: "600" }]}>Ignore</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+export const ProblemsWrapper = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => {
+  const problems = useLivestreamStore((x) => x.problems);
+  const [dismiss, setDismiss] = useState(false);
+
+  return (
+    <View
+      style={[
+        { position: "relative", flex: 1 },
+        layout.flex.center,
+        { flexBasis: 0 },
+      ]}
+    >
+      {children}
+      {problems.length > 0 && !dismiss && (
+        <View
+          style={[
+            {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.8)",
+              zIndex: 100,
+            },
+            layout.flex.center,
+            { justifyContent: "flex-start" },
+            p[8],
+          ]}
+        >
+          <View
+            style={[
+              bg.gray[900],
+              borders.color.gray[700],
+              borders.width.thin,
+              r.lg,
+              p[4],
+              { maxWidth: 700, width: "100%" },
+            ]}
+          >
+            <Problems probs={problems} onIgnore={() => setDismiss(true)} />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default Problems;

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -1,14 +1,17 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
 import { Settings } from "lucide-react-native";
+import { Platform, View } from "react-native";
 import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
 import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
+  DropdownMenuContentWithoutPortal,
   DropdownMenuGroup,
   DropdownMenuInfo,
   DropdownMenuItem,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
@@ -16,7 +19,11 @@ import {
   Text,
 } from "../../ui";
 
-export function ContextMenu() {
+export function ContextMenu({
+  dropdownPortalContainer,
+}: {
+  dropdownPortalContainer?: any;
+}) {
   const quality = usePlayerStore((x) => x.selectedRendition);
   const setQuality = usePlayerStore((x) => x.setSelectedRendition);
   const qualities = useLivestreamStore((x) => x.renditions);
@@ -27,58 +34,80 @@ export function ContextMenu() {
   const debugInfo = usePlayerStore((x) => x.showDebugInfo);
   const setShowDebugInfo = usePlayerStore((x) => x.setShowDebugInfo);
 
+  const livestream = useLivestreamStore((x) => x.livestream);
+  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
+  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+
   const lowLatency = protocol === "webrtc";
   const setLowLatency = (value: boolean) => {
     setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
   };
 
+  // are we on mobile? then do dropdowns
+  const isMobile = Platform.OS === "ios" || Platform.OS === "android";
+
+  // dummy portal for mobile
+  const Portal = isMobile ? View : DropdownMenuPortal;
+
+  // render the responsive version on mobile as we can't fullscreen there
+  const DropdownMenuContent = isMobile
+    ? ResponsiveDropdownMenuContent
+    : DropdownMenuContentWithoutPortal;
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
         <Settings color={colors.gray[200]} />
       </DropdownMenuTrigger>
-      <ResponsiveDropdownMenuContent side="top" align="end">
-        <DropdownMenuGroup title="Resolution">
-          <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
-            <DropdownMenuRadioItem value="source">
-              <Text>Source (Original Quality)</Text>
-            </DropdownMenuRadioItem>
-            {qualities.map((r) => (
-              <DropdownMenuRadioItem value={r.name}>
-                <Text>{r.name}</Text>
+      <Portal container={dropdownPortalContainer}>
+        <DropdownMenuContent side="top" align="end">
+          <DropdownMenuGroup title="Resolution">
+            <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
+              <DropdownMenuRadioItem value="source">
+                <Text>Source (Original Quality)</Text>
               </DropdownMenuRadioItem>
-            ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuGroup>
-        <DropdownMenuGroup title="Advanced">
-          <DropdownMenuCheckboxItem
-            checked={lowLatency}
-            onCheckedChange={() => setLowLatency(!lowLatency)}
-          >
-            <Text>Low Latency</Text>
-          </DropdownMenuCheckboxItem>
-        </DropdownMenuGroup>
-        <DropdownMenuInfo description="Reduces the delay between video and chat for a more real-time experience." />
-        <DropdownMenuGroup>
-          <DropdownMenuCheckboxItem
-            checked={debugInfo}
-            onCheckedChange={() => setShowDebugInfo(!debugInfo)}
-          >
-            <Text>Show Debug Info</Text>
-          </DropdownMenuCheckboxItem>
-        </DropdownMenuGroup>
-        <DropdownMenuGroup title="Report">
-          <ReportButton />
-        </DropdownMenuGroup>
-      </ResponsiveDropdownMenuContent>
+              {qualities.map((r) => (
+                <DropdownMenuRadioItem value={r.name}>
+                  <Text>{r.name}</Text>
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuGroup>
+          <DropdownMenuGroup title="Advanced">
+            <DropdownMenuCheckboxItem
+              checked={lowLatency}
+              onCheckedChange={() => setLowLatency(!lowLatency)}
+            >
+              <Text>Low Latency</Text>
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuGroup>
+          <DropdownMenuInfo description="Reduces the delay between video and chat for a more real-time experience." />
+          <DropdownMenuGroup>
+            <DropdownMenuCheckboxItem
+              checked={debugInfo}
+              onCheckedChange={() => setShowDebugInfo(!debugInfo)}
+            >
+              <Text>Show Debug Info</Text>
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuGroup>
+          <DropdownMenuGroup title="Report">
+            <ReportButton
+              livestream={livestream}
+              setReportModalOpen={setReportModalOpen}
+              setReportSubject={setReportSubject}
+            />
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </Portal>
     </DropdownMenu>
   );
 }
 
-export function ReportButton() {
-  const livestream = useLivestreamStore((x) => x.livestream);
-  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
-  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+export function ReportButton({
+  livestream,
+  setReportModalOpen,
+  setReportSubject,
+}) {
   const { onOpenChange } = useRootContext();
   return (
     <DropdownMenuItem

package/src/components/ui/button.tsx

@@ -231,8 +231,8 @@ function createStyles(theme: any) {
     },
 
     pillButton: {
-      paddingHorizontal: theme.spacing[3],
-      paddingVertical: theme.spacing[2],
+      paddingHorizontal: theme.spacing[2],
+      paddingVertical: theme.spacing[1],
       borderRadius: tokens.borderRadius.full,
       minHeight: tokens.touchTargets.minimum / 2,
     },

package/src/components/ui/dropdown.tsx

@@ -8,7 +8,7 @@ import {
   ChevronUp,
   Circle,
 } from "lucide-react-native";
-import { forwardRef, ReactNode, useMemo, useRef } from "react";
+import React, { forwardRef, ReactNode, useMemo, useRef } from "react";
 import {
   Platform,
   Pressable,
@@ -200,6 +200,43 @@ export const DropdownMenuContent = forwardRef<
   );
 });
 
+export const DropdownMenuContentWithoutPortal = forwardRef<
+  any,
+  DropdownMenuPrimitive.ContentProps & {
+    overlayStyle?: any;
+  }
+>(({ overlayStyle, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.Overlay
+      style={[
+        Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+        overlayStyle,
+      ]}
+    >
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        style={
+          [
+            { zIndex: 999999 },
+            a.sizes.minWidth[32],
+            a.sizes.maxWidth[64],
+            a.overflow.hidden,
+            a.radius.all.md,
+            a.borders.width.thin,
+            a.borders.color.gray[800],
+            bg.gray[950],
+            p[2],
+            a.shadows.md,
+          ] as any
+        }
+        {...props}
+      />
+    </DropdownMenuPrimitive.Overlay>
+  );
+});
+
+/// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
+/// Prefer passing scoped content in as **otherwise it may crash the app**.
 export const ResponsiveDropdownMenuContent = forwardRef<any, any>(
   ({ children, ...props }, ref) => {
     const { width } = useWindowDimensions();
@@ -222,8 +259,6 @@ export const ResponsiveDropdownMenuContent = forwardRef<any, any>(
   },
 );
 
-import React from "react";
-
 export const DropdownMenuItem = forwardRef<
   any,
   DropdownMenuPrimitive.ItemProps & { inset?: boolean; disabled?: boolean }

package/src/components/ui/index.ts

@@ -9,6 +9,8 @@ export * from "./button";
 export * from "./dialog";
 export * from "./dropdown";
 export * from "./icons";
+export * from "./info-box";
+export * from "./info-row";
 export * from "./input";
 export * from "./loader";
 export * from "./resizeable";

package/src/components/ui/info-box.tsx

@@ -0,0 +1,60 @@
+import { Text, View } from "react-native";
+import * as zero from "../../ui";
+
+const { bg, r, p, text, layout, gap, flex } = zero;
+
+interface InfoBoxProps {
+  icon: any;
+  label: string;
+  value: string;
+  status?: "good" | "warning" | "error" | "neutral";
+}
+
+export function InfoBox({
+  icon: Icon,
+  label,
+  value,
+  status = "neutral",
+}: InfoBoxProps) {
+  const statusColors = {
+    good: text.green[400],
+    warning: text.yellow[400],
+    error: text.red[400],
+    neutral: text.white,
+  };
+
+  const statusColor = statusColors[status];
+
+  return (
+    <View
+      style={[
+        flex.values[1],
+        layout.flex.column,
+        layout.flex.spaceBetween,
+        layout.flex.alignCenter,
+        bg.neutral[700],
+        r.sm,
+        p[2],
+      ]}
+    >
+      <View
+        style={[
+          layout.flex.row,
+          layout.flex.spaceBetween,
+          gap.all[3],
+          zero.w.percent[100],
+        ]}
+      >
+        <Text style={[text.gray[100], { fontSize: 13, fontWeight: "500" }]}>
+          {label}
+        </Text>
+        <Icon size={16} color="#9ca3af" />
+      </View>
+      <View style={[layout.flex.align.end, zero.w.percent[100]]}>
+        <Text style={[statusColor, { fontSize: 26, fontWeight: "600" }]}>
+          {value}
+        </Text>
+      </View>
+    </View>
+  );
+}

package/src/components/ui/info-row.tsx

@@ -0,0 +1,48 @@
+import { Text, View } from "react-native";
+import * as zero from "../../ui";
+
+const { text, layout, py, gap } = zero;
+
+interface InfoRowProps {
+  icon: any;
+  label: string;
+  value: string;
+  status?: "good" | "warning" | "error" | "neutral";
+}
+
+export function InfoRow({
+  icon: Icon,
+  label,
+  value,
+  status = "neutral",
+}: InfoRowProps) {
+  const statusColors = {
+    good: text.green[400],
+    warning: text.yellow[400],
+    error: text.red[400],
+    neutral: text.white,
+  };
+
+  const statusColor = statusColors[status];
+
+  return (
+    <View
+      style={[
+        layout.flex.row,
+        layout.flex.spaceBetween,
+        layout.flex.alignCenter,
+        py[2],
+      ]}
+    >
+      <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[3]]}>
+        <Icon size={16} color="#9ca3af" />
+        <Text style={[text.gray[300], { fontSize: 13, fontWeight: "500" }]}>
+          {label}
+        </Text>
+      </View>
+      <Text style={[statusColor, { fontSize: 13, fontWeight: "600" }]}>
+        {value}
+      </Text>
+    </View>
+  );
+}

package/src/components/ui/toast.tsx

@@ -13,6 +13,116 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "../../lib/theme/theme";
 
+import { useCallback } from "react";
+
+type ToastController = {
+  show: (
+    title: string,
+    description?: string,
+    options?: {
+      duration?: number;
+      actionLabel?: string;
+      onAction?: () => void;
+    },
+  ) => void;
+  hide: () => void;
+};
+
+type UseToastReturn = {
+  open: boolean;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  duration?: number;
+  setOpen: (open: boolean) => void;
+  setTitle: (title: string) => void;
+  setDescription: (description: string) => void;
+  setActionLabel: (label: string) => void;
+  setOnAction: (cb?: () => void) => void;
+  setDuration: (duration: number) => void;
+  toastController: ToastController;
+};
+
+/**
+ * useToast - a hook to manage Toast state and provide a toastController.
+ * Returns a ready-to-render ToastComponent.
+ */
+export function useToast(
+  initial: {
+    title?: string;
+    description?: string;
+    duration?: number;
+    actionLabel?: string;
+    onAction?: () => void;
+  } = {},
+) {
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState(initial.title ?? "");
+  const [description, setDescription] = useState(initial.description ?? "");
+  const [duration, setDuration] = useState(initial.duration ?? 3);
+  const [actionLabel, setActionLabel] = useState(
+    initial.actionLabel ?? "Action",
+  );
+  const [onAction, setOnAction] = useState<(() => void) | undefined>(
+    initial.onAction,
+  );
+
+  const show = useCallback(
+    (
+      toastTitle: string,
+      toastDescription?: string,
+      options?: {
+        duration?: number;
+        actionLabel?: string;
+        onAction?: () => void;
+      },
+    ) => {
+      setTitle(toastTitle);
+      setDescription(toastDescription ?? "");
+      setDuration(options?.duration ?? 3);
+      setActionLabel(options?.actionLabel ?? "Action");
+      setOnAction(options?.onAction);
+      setOpen(true);
+    },
+    [],
+  );
+
+  const hide = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  // Ready-to-render Toast component
+  const ToastComponent = (
+    <Toast
+      open={open}
+      onOpenChange={setOpen}
+      title={title}
+      description={description}
+      actionLabel={actionLabel}
+      onAction={onAction}
+      duration={duration}
+    />
+  );
+
+  return {
+    open,
+    title,
+    description,
+    actionLabel,
+    onAction,
+    duration,
+    setOpen,
+    setTitle,
+    setDescription,
+    setActionLabel,
+    setOnAction,
+    setDuration,
+    toastController: { show, hide },
+    ToastComponent,
+  };
+}
+
 type ToastProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/src/index.tsx

@@ -34,3 +34,6 @@ export * from "./lib/system-messages";
 export * from "./components/share/sharesheet";
 
 export * from "./components/keep-awake";
+
+// Dashboard components
+export * as Dashboard from "./components/dashboard";