@streamplace/components 0.7.35 → 0.8.3

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,10 @@
+// Main form component
+export { ContentMetadataForm } from "./content-metadata-form";
+
+// Display components
+export { ContentRights } from "./content-rights";
+export { ContentWarnings } from "./content-warnings";
+
+export type { ContentRightsProps } from "./content-rights";
+
+export type { ContentWarningsProps } from "./content-warnings";

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/ui/checkbox.tsx

@@ -0,0 +1,147 @@
+import { Check } from "lucide-react-native";
+import { forwardRef } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { useTheme } from "../../lib/theme/theme";
+import { Text } from "./text";
+
+export interface CheckboxProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  label?: string;
+  description?: string;
+  style?: any;
+}
+
+export const Checkbox = forwardRef<any, CheckboxProps>(
+  (
+    {
+      checked,
+      onCheckedChange,
+      disabled = false,
+      size = "md",
+      label,
+      description,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useTheme();
+
+    const handlePress = () => {
+      if (!disabled) {
+        onCheckedChange(!checked);
+      }
+    };
+
+    const styles = createStyles(theme, size, disabled, checked);
+
+    return (
+      <TouchableOpacity
+        ref={ref}
+        style={[styles.container, style]}
+        onPress={handlePress}
+        disabled={disabled}
+        {...props}
+      >
+        <View style={styles.checkbox}>
+          {checked && (
+            <Check
+              size={size === "sm" ? 12 : size === "lg" ? 18 : 14}
+              color={
+                disabled
+                  ? theme.colors.textDisabled
+                  : theme.colors.primaryForeground
+              }
+            />
+          )}
+        </View>
+        {(label || description) && (
+          <View style={styles.content}>
+            {label && <Text style={styles.label}>{label}</Text>}
+            {description && (
+              <Text style={styles.description}>{description}</Text>
+            )}
+          </View>
+        )}
+      </TouchableOpacity>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";
+
+function createStyles(
+  theme: any,
+  size: string,
+  disabled: boolean,
+  checked: boolean,
+) {
+  const sizeStyles = {
+    sm: {
+      checkboxSize: 16,
+      borderRadius: 2,
+      padding: theme.spacing[1],
+      gap: theme.spacing[1],
+    },
+    md: {
+      checkboxSize: 20,
+      borderRadius: 4,
+      padding: theme.spacing[1],
+      gap: theme.spacing[2],
+    },
+    lg: {
+      checkboxSize: 24,
+      borderRadius: 6,
+      padding: theme.spacing[2],
+      gap: theme.spacing[3],
+    },
+  };
+
+  const currentSize = sizeStyles[size as keyof typeof sizeStyles];
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      opacity: disabled ? 0.5 : 1,
+    },
+    checkbox: {
+      width: currentSize.checkboxSize,
+      height: currentSize.checkboxSize,
+      borderWidth: 1.5,
+      borderColor: disabled
+        ? theme.colors.border
+        : checked
+          ? theme.colors.primary
+          : theme.colors.border,
+      borderRadius: currentSize.borderRadius,
+      backgroundColor: disabled
+        ? theme.colors.muted
+        : checked
+          ? theme.colors.primary
+          : "transparent",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    content: {
+      flex: 1,
+      paddingTop: currentSize.padding * 0.5,
+      paddingLeft: theme.spacing[2],
+    },
+    label: {
+      fontSize: size === "sm" ? 14 : size === "lg" ? 18 : 16,
+      fontWeight: "500",
+      color: disabled ? theme.colors.textDisabled : theme.colors.text,
+      lineHeight: size === "sm" ? 18 : size === "lg" ? 22 : 20,
+    },
+    description: {
+      fontSize: size === "sm" ? 12 : size === "lg" ? 16 : 14,
+      color: disabled ? theme.colors.textDisabled : theme.colors.textMuted,
+      marginTop: theme.spacing[1],
+      lineHeight: size === "sm" ? 16 : size === "lg" ? 20 : 18,
+    },
+  });
+}