@streamplace/components 0.9.0 → 0.9.4

package/src/components/mobile-player/ui/report-modal.tsx

@@ -173,6 +173,7 @@ export const ReportModal: React.FC<ReportModalProps> = ({
       </View>
       <DialogFooter>
         <Button
+          width="min"
           variant="secondary"
           onPress={handleCancel}
           disabled={isSubmitting}
@@ -180,6 +181,7 @@ export const ReportModal: React.FC<ReportModalProps> = ({
           <Text>Cancel</Text>
         </Button>
         <Button
+          width="min"
           variant="primary"
           onPress={handleSubmit}
           disabled={!selectedReason || isSubmitting}

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

@@ -1,6 +1,12 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
-import { Menu } from "lucide-react-native";
+import { Cog } from "lucide-react-native";
+import { useState } from "react";
 import { Image, Linking, Platform, Pressable, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
 import {
   ContentRights,
   ContentWarnings,
@@ -10,7 +16,6 @@ import {
   useLivestreamInfo,
   zero,
 } from "../../..";
-import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
 import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
 import { useGraphManager } from "../../../streamplace-store/graph";
@@ -21,7 +26,6 @@ import {
   DropdownMenuGroup,
   DropdownMenuInfo,
   DropdownMenuItem,
-  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
@@ -31,13 +35,15 @@ import {
   DropdownMenuTrigger,
   ResponsiveDropdownMenuContent,
   Text,
+  useTheme,
 } from "../../ui";
 
 export function ContextMenu({
   dropdownPortalContainer,
 }: {
-  dropdownPortalContainer?: any;
+  dropdownPortalContainer?: string;
 }) {
+  const th = useTheme();
   const quality = usePlayerStore((x) => x.selectedRendition);
   const setQuality = usePlayerStore((x) => x.setSelectedRendition);
   const qualities = useLivestreamStore((x) => x.renditions);
@@ -58,6 +64,8 @@ export function ContextMenu({
   const ls = useLivestreamStore((x) => x.livestream);
   const segment = useLivestreamStore((x) => x.segment);
 
+  const [isOpen, setIsOpen] = useState(false);
+
   // Get content rights from the latest segment
   const contentRights = segment?.contentRights;
   const contentWarnings = segment?.contentWarnings?.warnings || [];
@@ -73,188 +81,206 @@ export function ContextMenu({
   const isMobile = Platform.OS === "ios" || Platform.OS === "android";
 
   // dummy portal for mobile
-  const Portal = isMobile ? View : DropdownMenuPortal;
+  //const Portal: typeof DropdownMenuPortal = DropdownMenu;
 
   const DropdownMenuContent = ResponsiveDropdownMenuContent;
 
+  const iconRotate = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotateZ: withTiming(isOpen ? "240deg" : "0deg", {
+            duration: 650,
+            easing: Easing.out(Easing.ease),
+          }),
+        },
+      ],
+    };
+  });
+
+  // rerender when dropdown portal container changes so we swap portals 'seamlessly'
   return (
-    <DropdownMenu>
+    <DropdownMenu onOpenChange={setIsOpen} key={dropdownPortalContainer}>
       <DropdownMenuTrigger>
-        <Menu color={colors.gray[200]} />
+        <Animated.View style={[iconRotate]}>
+          <Cog color={th.theme.colors.foreground} />
+        </Animated.View>
       </DropdownMenuTrigger>
-      <Portal container={dropdownPortalContainer}>
-        <DropdownMenuContent side="top" align="end">
-          {Platform.OS !== "web" && (
-            <DropdownMenuGroup title="Streamer">
-              <View
-                style={[
-                  zero.layout.flex.row,
-                  zero.layout.flex.center,
-                  zero.gap.all[3],
-                  { flex: 1, minWidth: 0 },
-                ]}
-              >
-                {profile?.did && avatars[profile?.did]?.avatar && (
-                  <Image
-                    key="avatar"
-                    source={{
-                      uri: avatars[profile?.did]?.avatar,
+      <DropdownMenuContent
+        side="top"
+        align="end"
+        portalHost={dropdownPortalContainer}
+      >
+        {Platform.OS !== "web" && (
+          <DropdownMenuGroup title="Streamer">
+            <View
+              style={[
+                zero.layout.flex.row,
+                zero.layout.flex.center,
+                zero.gap.all[3],
+                { flex: 1, minWidth: 0 },
+              ]}
+            >
+              {profile?.did && avatars[profile?.did]?.avatar && (
+                <Image
+                  key="avatar"
+                  source={{
+                    uri: avatars[profile?.did]?.avatar,
+                  }}
+                  style={{ width: 42, height: 42, borderRadius: 999 }}
+                  resizeMode="cover"
+                />
+              )}
+              <View style={{ flex: 1, minWidth: 0 }}>
+                <View
+                  style={[
+                    zero.layout.flex.row,
+                    zero.layout.flex.alignCenter,
+                    zero.gap.all[2],
+                  ]}
+                >
+                  <Pressable
+                    onPress={() => {
+                      if (profile?.handle) {
+                        const url = `https://bsky.app/profile/${formatHandle(profile)}`;
+                        Linking.openURL(url);
+                      }
                     }}
-                    style={{ width: 42, height: 42, borderRadius: 999 }}
-                    resizeMode="cover"
-                  />
-                )}
-                <View style={{ flex: 1, minWidth: 0 }}>
-                  <View
-                    style={[
-                      zero.layout.flex.row,
-                      zero.layout.flex.alignCenter,
-                      zero.gap.all[2],
-                    ]}
                   >
-                    <Pressable
-                      onPress={() => {
-                        if (profile?.handle) {
-                          const url = `https://bsky.app/profile/${formatHandle(profile)}`;
-                          Linking.openURL(url);
-                        }
-                      }}
-                    >
-                      <Text>{profile && formatHandleWithAt(profile)}</Text>
-                    </Pressable>
-                    {/*{did && profile && (
+                    <Text>{profile && formatHandleWithAt(profile)}</Text>
+                  </Pressable>
+                  {/*{did && profile && (
                     <FollowButton streamerDID={profile?.did} currentUserDID={did} />
                   )}*/}
-                  </View>
-                  <Text
-                    color="muted"
-                    size="sm"
-                    numberOfLines={2}
-                    ellipsizeMode="tail"
-                  >
-                    {ls?.record.title || "Stream Title"}
-                  </Text>
                 </View>
-              </View>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                disabled={graphManager.isLoading || !profile?.did}
-                onPress={async () => {
-                  try {
-                    if (graphManager.isFollowing) {
-                      await graphManager.unfollow();
-                    } else {
-                      await graphManager.follow();
-                    }
-                  } catch (err) {
-                    console.error("Follow/unfollow error:", err);
-                  }
-                }}
-              >
                 <Text
-                  color={graphManager.isFollowing ? "destructive" : "default"}
+                  color="muted"
+                  size="sm"
+                  numberOfLines={2}
+                  ellipsizeMode="tail"
                 >
-                  {graphManager.isLoading
-                    ? "Loading..."
-                    : graphManager.isFollowing
-                      ? "Unfollow"
-                      : "Follow"}
+                  {ls?.record.title || "Stream Title"}
                 </Text>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onPress={() => {
-                  if (profile?.handle) {
-                    const url = `https://bsky.app/profile/${formatHandle(profile)}`;
-                    Linking.openURL(url);
+              </View>
+            </View>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              disabled={graphManager.isLoading || !profile?.did}
+              onPress={async () => {
+                try {
+                  if (graphManager.isFollowing) {
+                    await graphManager.unfollow();
+                  } else {
+                    await graphManager.follow();
                   }
-                }}
+                } catch (err) {
+                  console.error("Follow/unfollow error:", err);
+                }
+              }}
+            >
+              <Text
+                color={graphManager.isFollowing ? "destructive" : "default"}
               >
-                <Text>View Profile on Bluesky</Text>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          )}
-
-          <DropdownMenuGroup>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger subMenuTitle="Quality">
-                <View
-                  style={[
-                    zero.flex.values[1],
-                    isMobile ? zero.layout.flex.row : zero.layout.flex.column,
-                    zero.layout.flex.spaceBetween,
-                    zero.pr[4],
-                  ]}
-                >
-                  <Text>Quality</Text>
-                  <Text muted size={isMobile ? "base" : "sm"}>
-                    {quality === "source" ? "Source" : quality},{" "}
-                    {lowLatency ? "Low Latency" : ""}
-                  </Text>
-                </View>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
-                <DropdownMenuGroup title="Resolution">
-                  <DropdownMenuRadioGroup
-                    value={quality}
-                    onValueChange={setQuality}
-                  >
-                    <DropdownMenuRadioItem value="source">
-                      <Text>Source (Original Quality)</Text>
-                    </DropdownMenuRadioItem>
-                    {qualities.map((r) => (
-                      <DropdownMenuRadioItem key={r.name} value={r.name}>
-                        <Text>{r.name}</Text>
-                      </DropdownMenuRadioItem>
-                    ))}
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuGroup>
-                <DropdownMenuGroup>
-                  <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." />
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          </DropdownMenuGroup>
-          <DropdownMenuGroup title="Advanced">
-            <DropdownMenuCheckboxItem
-              checked={debugInfo}
-              onCheckedChange={() => setShowDebugInfo(!debugInfo)}
+                {graphManager.isLoading
+                  ? "Loading..."
+                  : graphManager.isFollowing
+                    ? "Unfollow"
+                    : "Follow"}
+              </Text>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onPress={() => {
+                if (profile?.handle) {
+                  const url = `https://bsky.app/profile/${formatHandle(profile)}`;
+                  Linking.openURL(url);
+                }
+              }}
             >
-              <Text>Show Debug Info</Text>
-            </DropdownMenuCheckboxItem>
+              <Text>View Profile on Bluesky</Text>
+            </DropdownMenuItem>
           </DropdownMenuGroup>
-          <DropdownMenuGroup title="Report">
-            <ReportButton
-              livestream={livestream}
-              setReportModalOpen={setReportModalOpen}
-              setReportSubject={setReportSubject}
-            />
-          </DropdownMenuGroup>
-          <View style={[pt[3], px[2], gap.all[2]]}>
-            {contentWarnings && contentWarnings.length > 0 && (
-              <View style={[gap.all[1]]}>
-                <Text size="base" color="muted">
-                  Stream may contain
+        )}
+
+        <DropdownMenuGroup>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger subMenuTitle="Quality">
+              <View
+                style={[
+                  zero.flex.values[1],
+                  isMobile ? zero.layout.flex.row : zero.layout.flex.column,
+                  zero.layout.flex.spaceBetween,
+                  zero.pr[4],
+                ]}
+              >
+                <Text>Quality</Text>
+                <Text muted size={isMobile ? "base" : "sm"}>
+                  {quality === "source" ? "Source" : quality},{" "}
+                  {lowLatency ? "Low Latency" : ""}
                 </Text>
-                <ContentWarnings warnings={contentWarnings} compact={true} />
               </View>
-            )}
-            {contentRights && Object.keys(contentRights).length > 0 && (
-              <ContentRights
-                contentRights={contentRights}
-                size="xs"
-                color="muted"
-              />
-            )}
-          </View>
-        </DropdownMenuContent>
-      </Portal>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent portalHost={dropdownPortalContainer}>
+              <DropdownMenuGroup title="Resolution">
+                <DropdownMenuRadioGroup
+                  value={quality}
+                  onValueChange={setQuality}
+                >
+                  <DropdownMenuRadioItem value="source">
+                    <Text>Source (Original Quality)</Text>
+                  </DropdownMenuRadioItem>
+                  {qualities.map((r) => (
+                    <DropdownMenuRadioItem key={r.name} value={r.name}>
+                      <Text>{r.name}</Text>
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuGroup>
+              <DropdownMenuGroup>
+                <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." />
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+        <DropdownMenuGroup title="Advanced">
+          <DropdownMenuCheckboxItem
+            checked={debugInfo}
+            onCheckedChange={() => setShowDebugInfo(!debugInfo)}
+          >
+            <Text>Show Debug Info</Text>
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+        <DropdownMenuGroup title="Report">
+          <ReportButton
+            livestream={livestream}
+            setReportModalOpen={setReportModalOpen}
+            setReportSubject={setReportSubject}
+          />
+        </DropdownMenuGroup>
+        <View style={[pt[3], px[2], gap.all[2]]}>
+          {contentWarnings && contentWarnings.length > 0 && (
+            <View style={[gap.all[1]]}>
+              <Text size="base" color="muted">
+                Stream may contain
+              </Text>
+              <ContentWarnings warnings={contentWarnings} compact={true} />
+            </View>
+          )}
+          {contentRights && Object.keys(contentRights).length > 0 && (
+            <ContentRights
+              contentRights={contentRights}
+              size="xs"
+              color="muted"
+            />
+          )}
+        </View>
+      </DropdownMenuContent>
     </DropdownMenu>
   );
 }

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

@@ -52,7 +52,6 @@ export function ViewerLoadingOverlay() {
           position: "absolute",
           width: "100%",
           height: "100%",
-          zIndex: 998,
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: "rgba(0,0,0,0.3)",

package/src/components/stream-notification/index.ts

@@ -0,0 +1,5 @@
+export { StreamNotificationProvider } from "./stream-notification";
+export {
+  streamNotification,
+  streamNotificationManager,
+} from "./stream-notification-manager";

package/src/components/stream-notification/stream-notification-manager.ts

@@ -0,0 +1,140 @@
+export type NotificationConfig = {
+  id?: string;
+  message?: string;
+  render?: (
+    isExiting: boolean,
+    onDismiss: (reason?: "user" | "auto") => void,
+    startTime?: number,
+  ) => React.ReactNode;
+  duration?: number; // seconds, 0 = manual dismiss only
+  actionLabel?: string;
+  onAction?: () => void;
+  onDismiss?: (reason?: "user" | "auto") => void;
+  variant?: "default" | "info" | "warning";
+};
+
+export type StreamNotification = NotificationConfig & {
+  id: string;
+  visible: boolean;
+  shouldDismiss?: boolean;
+  dismissReason?: "user" | "auto";
+  startTime?: number;
+};
+
+type Listener = (notifications: StreamNotification[]) => void;
+
+class StreamNotificationManager {
+  private notifications: StreamNotification[] = [];
+  private listeners: Set<Listener> = new Set();
+  private dismissTimers: Map<string, NodeJS.Timeout> = new Map();
+
+  show(config: NotificationConfig) {
+    const notification: StreamNotification = {
+      id: config.id || `notification-${Date.now()}`,
+      message: config.message,
+      render: config.render,
+      duration: config.duration ?? 5,
+      actionLabel: config.actionLabel,
+      onAction: config.onAction,
+      onDismiss: config.onDismiss,
+      variant: config.variant ?? "default",
+      visible: true,
+      startTime: Date.now(),
+    };
+
+    // if notification with same ID exists, dismiss it first
+    const existingIndex = this.notifications.findIndex(
+      (n) => n.id === notification.id,
+    );
+    if (existingIndex !== -1) {
+      const existingTimer = this.dismissTimers.get(notification.id);
+      if (existingTimer) {
+        clearTimeout(existingTimer);
+        this.dismissTimers.delete(notification.id);
+      }
+      this.notifications = this.notifications.filter(
+        (n) => n.id !== notification.id,
+      );
+    }
+
+    this.notifications = [...this.notifications, notification];
+    this.notifyListeners();
+
+    // auto-dismiss if duration > 0
+    if (notification.duration && notification.duration > 0) {
+      const timer = setTimeout(() => {
+        this.requestDismiss(notification.id, "auto");
+      }, notification.duration * 1000);
+      this.dismissTimers.set(notification.id, timer);
+    }
+  }
+
+  requestDismiss(id: string, reason: "user" | "auto" = "user") {
+    const notification = this.notifications.find((n) => n.id === id);
+    if (!notification) {
+      console.log("Notification not found!");
+      return;
+    }
+
+    // mark the notification for dismissal
+    notification.shouldDismiss = true;
+    notification.dismissReason = reason;
+    this.notifyListeners();
+    // after 500ms, just hide it for real
+    setTimeout(() => {
+      this.hide(id, reason);
+    }, 500);
+  }
+
+  hide(id: string, reason: "user" | "auto" = "user") {
+    console.log("Hide called with id:", id, "reason:", reason);
+    console.log(
+      "Current notifications:",
+      this.notifications.map((n) => n.id),
+    );
+    const notification = this.notifications.find((n) => n.id === id);
+    if (!notification) {
+      console.log("Notification not found!");
+      return;
+    }
+
+    const timer = this.dismissTimers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this.dismissTimers.delete(id);
+    }
+
+    this.notifications = this.notifications.filter((n) => n.id !== id);
+    console.log(
+      "Remaining notifications:",
+      this.notifications.map((n) => n.id),
+    );
+    this.notifyListeners();
+
+    notification.onDismiss?.(reason);
+  }
+
+  getAll(): StreamNotification[] {
+    return this.notifications;
+  }
+
+  subscribe(listener: Listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach((listener) => {
+      listener(this.notifications);
+    });
+  }
+}
+
+export const streamNotificationManager = new StreamNotificationManager();
+
+export const streamNotification = {
+  show: (config: NotificationConfig) => streamNotificationManager.show(config),
+  hide: (id: string) => streamNotificationManager.hide(id),
+};