@streamplace/components 0.7.34 → 0.8.0

package/src/components/content-metadata/content-rights.tsx

@@ -0,0 +1,104 @@
+import { forwardRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { LICENSE_URL_LABELS } from "../../lib/metadata-constants";
+import { useTheme } from "../../lib/theme/theme";
+import { Text } from "../ui/text";
+
+export interface ContentRightsProps {
+  contentRights: {
+    creator?: string;
+    copyrightNotice?: string;
+    copyrightYear?: string | number;
+    license?: string;
+    creditLine?: string;
+  };
+  compact?: boolean;
+}
+
+export const ContentRights = forwardRef<any, ContentRightsProps>(
+  ({ contentRights }, ref) => {
+    const { theme } = useTheme();
+
+    if (!contentRights || Object.keys(contentRights).length === 0) {
+      return null;
+    }
+
+    const styles = createStyles(theme);
+
+    const formatLicense = (license: string) => {
+      return LICENSE_URL_LABELS[license] || license;
+    };
+
+    // Display rights in bottom metadata view
+    const elements: string[] = [];
+
+    // TODO: Map DID to handle creator
+    // if (contentRights.creator) {
+    //   elements.push(`Creator: ${contentRights.creator}`);
+    // }
+
+    if (contentRights.copyrightYear) {
+      elements.push(`© ${contentRights.copyrightYear.toString()}`);
+    }
+
+    if (contentRights.license) {
+      elements.push(formatLicense(contentRights.license));
+    }
+
+    if (contentRights.copyrightNotice) {
+      elements.push(contentRights.copyrightNotice);
+    }
+
+    if (contentRights.creditLine) {
+      elements.push(contentRights.creditLine);
+    }
+
+    return (
+      <View ref={ref} style={styles.compactContainer}>
+        <Text style={styles.compactText}>{elements.join(" • ")}</Text>
+      </View>
+    );
+  },
+);
+
+ContentRights.displayName = "ContentRights";
+
+function createStyles(theme: any) {
+  return StyleSheet.create({
+    container: {
+      paddingVertical: theme.spacing[3],
+    },
+    title: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: theme.colors.text,
+      marginBottom: theme.spacing[2],
+    },
+    content: {
+      gap: theme.spacing[2],
+    },
+    row: {
+      flexDirection: "row",
+      gap: theme.spacing[2],
+    },
+    label: {
+      fontSize: 13,
+      color: theme.colors.textMuted,
+    },
+    value: {
+      fontSize: 13,
+      color: theme.colors.text,
+    },
+    compactContainer: {
+      flexDirection: "row",
+      gap: theme.spacing[2],
+      flexWrap: "wrap",
+      marginTop: theme.spacing[1],
+    },
+    compactText: {
+      fontSize: 14,
+      fontWeight: "500",
+      color: theme.colors.text,
+    },
+  });
+}

package/src/components/content-metadata/content-warnings.tsx

@@ -0,0 +1,100 @@
+import { forwardRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { C2PA_WARNING_LABELS } from "../../lib/metadata-constants";
+import { useTheme } from "../../lib/theme/theme";
+import { Text } from "../ui/text";
+
+export interface ContentWarningsProps {
+  warnings: string[];
+  compact?: boolean;
+}
+
+export const ContentWarnings = forwardRef<any, ContentWarningsProps>(
+  ({ warnings, compact = false }, ref) => {
+    const { theme } = useTheme();
+
+    if (!warnings || warnings.length === 0) {
+      return null;
+    }
+
+    const styles = createStyles(theme, compact);
+
+    const getWarningLabel = (warning: string): string => {
+      return C2PA_WARNING_LABELS[warning] || warning;
+    };
+
+    if (compact) {
+      return (
+        <View ref={ref} style={styles.compactContainer}>
+          {warnings.map((warning, index) => (
+            <View key={index} style={styles.compactWarning}>
+              <Text style={styles.compactWarningText}>
+                {getWarningLabel(warning)}
+              </Text>
+            </View>
+          ))}
+        </View>
+      );
+    }
+
+    return (
+      <View ref={ref} style={styles.container}>
+        <Text style={styles.title}>Content Warnings</Text>
+        <View style={styles.warningsContainer}>
+          {warnings.map((warning, index) => (
+            <View key={index} style={styles.warning}>
+              <Text style={styles.warningText}>{getWarningLabel(warning)}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+    );
+  },
+);
+
+ContentWarnings.displayName = "ContentWarnings";
+
+function createStyles(theme: any, compact: boolean) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: "column",
+      gap: theme.spacing[2],
+    },
+    title: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: theme.colors.text,
+    },
+    warningsContainer: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: theme.spacing[2],
+    },
+    warning: {
+      backgroundColor: theme.colors.warning,
+      borderRadius: theme.borderRadius.md,
+      padding: theme.spacing[2],
+    },
+    warningText: {
+      color: theme.colors.warningForeground,
+      fontSize: 12,
+      fontWeight: "500",
+    },
+    compactContainer: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: theme.spacing[1],
+    },
+    compactWarning: {
+      backgroundColor: theme.colors.warning,
+      borderRadius: theme.borderRadius.full,
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+    },
+    compactWarningText: {
+      color: theme.colors.warningForeground,
+      fontSize: 14,
+      fontWeight: "600",
+    },
+  });
+}

package/src/components/content-metadata/index.tsx

@@ -0,0 +1,18 @@
+// Main form component
+export { ContentMetadataForm } from "./content-metadata-form";
+
+// Display components
+export { ContentRights } from "./content-rights";
+export { ContentWarnings } from "./content-warnings";
+
+// Types
+export type {
+  ContentMetadata,
+  ContentMetadataFormProps,
+  DistributionPolicy,
+  Rights,
+} from "./content-metadata-form";
+
+export type { ContentRightsProps } from "./content-rights";
+
+export type { ContentWarningsProps } from "./content-warnings";

package/src/components/dashboard/header.tsx

@@ -1,5 +1,5 @@
-import { Car, Radio, Users } from "lucide-react-native";
-import { Text, View } from "react-native";
+import { AlertCircle, Car, Radio, Users } from "lucide-react-native";
+import { Pressable, Text, View } from "react-native";
 import * as zero from "../../ui";
 
 const { bg, r, borders, px, py, text, layout, gap } = zero;
@@ -103,6 +103,8 @@ interface HeaderProps {
   bitrate?: string;
   timeBetweenSegments?: number;
   connectionStatus?: "excellent" | "good" | "poor" | "offline";
+  problemsCount?: number;
+  onProblemsPress?: () => void;
 }
 
 export default function Header({
@@ -113,6 +115,8 @@ export default function Header({
   bitrate = "0 mbps",
   timeBetweenSegments = 0,
   connectionStatus = "offline",
+  problemsCount = 0,
+  onProblemsPress,
 }: HeaderProps) {
   const getConnectionQuality = (): "good" | "warning" | "error" => {
     if (timeBetweenSegments <= 1500) return "good";
@@ -139,7 +143,37 @@ export default function Header({
           <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
             {streamTitle}
           </Text>
-          <StatusIndicator status={connectionStatus} isLive={isLive} />
+          <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[3]]}>
+            <StatusIndicator status={connectionStatus} isLive={isLive} />
+            {problemsCount > 0 && (
+              <Pressable onPress={onProblemsPress}>
+                <View
+                  style={[
+                    layout.flex.row,
+                    layout.flex.alignCenter,
+                    gap.all[1],
+                    px[2],
+                    py[1],
+                    r.md,
+                    bg.orange[900],
+                    borders.width.thin,
+                    borders.color.orange[700],
+                    { marginVertical: -8 },
+                  ]}
+                >
+                  <AlertCircle size={14} color="#fb923c" />
+                  <Text
+                    style={[
+                      text.orange[400],
+                      { fontSize: 11, fontWeight: "600" },
+                    ]}
+                  >
+                    {problemsCount} {problemsCount === 1 ? "Issue" : "Issues"}
+                  </Text>
+                </View>
+              </Pressable>
+            )}
+          </View>
         </View>
       </View>
 

package/src/components/dashboard/index.tsx

@@ -2,4 +2,4 @@ export { default as ChatPanel } from "./chat-panel";
 export { default as Header } from "./header";
 export { default as InformationWidget } from "./information-widget";
 export { default as ModActions } from "./mod-actions";
-export { default as Problems } from "./problems";
+export { default as Problems, ProblemsWrapperRef } from "./problems";

package/src/components/dashboard/problems.tsx

@@ -1,12 +1,32 @@
-import { ExternalLink } from "lucide-react-native";
-import { useState } from "react";
-import { Linking, Pressable, Text, View } from "react-native";
+import {
+  CircleAlert,
+  CircleX,
+  ExternalLink,
+  Info,
+  Sparkle,
+} from "lucide-react-native";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { Linking, Pressable, View } from "react-native";
 import { useLivestreamStore } from "../../livestream-store";
 import { LivestreamProblem } from "../../livestream-store/livestream-state";
 import * as zero from "../../ui";
+import { Button, Text } from "../ui";
 
 const { bg, r, borders, p, text, layout, gap } = zero;
 
+const getIcon = (severity: string) => {
+  switch (severity) {
+    case "error":
+      return <CircleX size={24} color="white" />;
+    case "warning":
+      return <CircleAlert size={24} color="white" />;
+    case "info":
+      return <Info size={24} color="white" />;
+    default:
+      return <Sparkle size={24} color="white" />;
+  }
+};
+
 const Problems = ({
   probs,
   onIgnore,
@@ -15,9 +35,9 @@ const Problems = ({
   onIgnore: () => void;
 }) => {
   return (
-    <View style={[gap.all[3]]}>
-      <View>
-        <Text style={[text.white, { fontSize: 24, fontWeight: "bold" }]}>
+    <View style={[gap.all[4]]}>
+      <View style={[gap.all[2]]}>
+        <Text size="2xl" style={[text.white, { fontWeight: "600" }]}>
           Optimize Your Stream
         </Text>
         <Text style={[text.gray[300]]}>
@@ -34,26 +54,22 @@ const Problems = ({
               { gap: 8, alignItems: "flex-start" },
             ]}
           >
-            <Text
+            <View
               style={[
-                r.sm,
-                p[2],
+                zero.r.full,
+                zero.p[1],
                 {
-                  width: 82,
-                  textAlign: "center",
                   backgroundColor:
                     p.severity === "error"
                       ? "#7f1d1d"
                       : p.severity === "warning"
                         ? "#7c2d12"
                         : "#1e3a8a",
-                  color: "white",
-                  fontSize: 12,
                 },
               ]}
             >
-              {p.severity}
-            </Text>
+              {getIcon(p.severity)}
+            </View>
             <View style={[{ flex: 1 }, gap.all[1]]}>
               <Text style={[text.white, { fontWeight: "600" }]}>{p.code}</Text>
               <Text style={[text.gray[400], { fontSize: 14 }]}>
@@ -79,39 +95,34 @@ const Problems = ({
           </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 style={[layout.flex.row, layout.flex.justify.end]}>
+        <Button onPress={onIgnore} variant="secondary">
+          <Text style={[text.white, { fontWeight: "600" }]}>Acknowledge</Text>
+        </Button>
+      </View>
     </View>
   );
 };
 
-export const ProblemsWrapper = ({
-  children,
-}: {
-  children: React.ReactElement;
-}) => {
+export interface ProblemsWrapperRef {
+  setDismiss: (value: boolean) => void;
+}
+
+export const ProblemsWrapper = forwardRef<
+  ProblemsWrapperRef,
+  {
+    children: React.ReactElement;
+  }
+>(({ children }, ref) => {
   const problems = useLivestreamStore((x) => x.problems);
   const [dismiss, setDismiss] = useState(false);
 
+  useImperativeHandle(ref, () => ({
+    setDismiss,
+  }));
+
   return (
-    <View
-      style={[
-        { position: "relative", flex: 1 },
-        layout.flex.center,
-        { flexBasis: 0 },
-      ]}
-    >
+    <>
       {children}
       {problems.length > 0 && !dismiss && (
         <View
@@ -127,16 +138,16 @@ export const ProblemsWrapper = ({
             },
             layout.flex.center,
             { justifyContent: "flex-start" },
-            p[8],
+            p[12],
           ]}
         >
           <View
             style={[
-              bg.gray[900],
-              borders.color.gray[700],
+              bg.neutral[900],
+              borders.color.neutral[700],
               borders.width.thin,
               r.lg,
-              p[4],
+              p[8],
               { maxWidth: 700, width: "100%" },
             ]}
           >
@@ -144,8 +155,8 @@ export const ProblemsWrapper = ({
           </View>
         </View>
       )}
-    </View>
+    </>
   );
-};
+});
 
 export default Problems;

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

@@ -23,6 +23,7 @@ export function Player(
   const clearControlsTimeout = usePlayerStore((x) => x.clearControlsTimeout);
 
   const setReportingURL = usePlayerStore((x) => x.setReportingURL);
+  const setEmbedded = usePlayerStore((x) => x.setEmbedded);
 
   const reportModalOpen = usePlayerStore((x) => x.reportModalOpen);
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
@@ -32,6 +33,10 @@ export function Player(
     setReportingURL(props.reportingURL ?? null);
   }, [props.reportingURL]);
 
+  useEffect(() => {
+    setEmbedded(props.embedded ?? false);
+  }, [props.embedded]);
+
   // Will call back every few seconds to send health updates
   usePlayerStatus();
 

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

@@ -9,11 +9,11 @@ import { zero } from "../../..";
 import { useSubmitReport } from "../../../livestream-store";
 import {
   Button,
-  Dialog,
   DialogFooter,
-  ModalContent,
+  ResponsiveDialog,
   Text,
   Textarea,
+  useTheme,
 } from "../../ui";
 
 // AT Protocol moderation reason types with proper labels
@@ -72,6 +72,8 @@ export const ReportModal: React.FC<ReportModalProps> = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
 
+  const { theme } = useTheme();
+
   const submitReport = useSubmitReport();
 
   const handleCancel = () => {
@@ -107,7 +109,7 @@ export const ReportModal: React.FC<ReportModalProps> = ({
   };
 
   return (
-    <Dialog
+    <ResponsiveDialog
       open={open}
       onOpenChange={onOpenChange}
       title={title}
@@ -118,7 +120,7 @@ export const ReportModal: React.FC<ReportModalProps> = ({
       dismissible={false}
       position="center"
     >
-      <ModalContent style={[zero.pb[2]]}>
+      <View style={[zero.pb[2]]}>
         {REPORT_REASONS.map((reason) => (
           <TouchableOpacity
             key={reason.value}
@@ -136,7 +138,11 @@ export const ReportModal: React.FC<ReportModalProps> = ({
             ]}
           >
             <View>
-              {selectedReason === reason.value ? <CheckCircle /> : <Circle />}
+              {selectedReason === reason.value ? (
+                <CheckCircle color={theme.colors.foreground} />
+              ) : (
+                <Circle color={theme.colors.foreground} />
+              )}
             </View>
             <View
               style={[zero.layout.flex.column, zero.gap.all[1], zero.flex[1]]}
@@ -164,7 +170,7 @@ export const ReportModal: React.FC<ReportModalProps> = ({
             </Text>
           )}
         </View>
-      </ModalContent>
+      </View>
       <DialogFooter>
         <Button
           variant="secondary"
@@ -188,7 +194,7 @@ export const ReportModal: React.FC<ReportModalProps> = ({
           )}
         </Button>
       </DialogFooter>
-    </Dialog>
+    </ResponsiveDialog>
   );
 };
 

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

@@ -1,9 +1,11 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
 import { Menu } from "lucide-react-native";
-import { Platform, View } from "react-native";
+import { Image, Linking, Platform, Pressable, View } from "react-native";
+import { useAvatars, 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";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -14,6 +16,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   ResponsiveDropdownMenuContent,
   Text,
@@ -38,6 +41,12 @@ export function ContextMenu({
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
 
+  const { profile } = useLivestreamInfo();
+  const avatars = useAvatars(profile?.did ? [profile?.did] : []);
+  const ls = useLivestreamStore((x) => x.livestream);
+
+  let graphManager = useGraphManager(profile?.did);
+
   const lowLatency = protocol === "webrtc";
   const setLowLatency = (value: boolean) => {
     setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
@@ -61,6 +70,96 @@ export function ContextMenu({
       </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,
+                    }}
+                    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/${profile.handle}`;
+                          Linking.openURL(url);
+                        }
+                      }}
+                    >
+                      <Text>@{profile?.handle || "user"}</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"}
+                >
+                  {graphManager.isLoading
+                    ? "Loading..."
+                    : graphManager.isFollowing
+                      ? "Unfollow"
+                      : "Follow"}
+                </Text>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onPress={() => {
+                  if (profile?.handle) {
+                    const url = `https://bsky.app/profile/${profile.handle}`;
+                    Linking.openURL(url);
+                  }
+                }}
+              >
+                <Text>View Profile on Bluesky</Text>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
           <DropdownMenuGroup title="Resolution">
             <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
               <DropdownMenuRadioItem value="source">