@streamplace/components 0.7.34 → 0.8.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,131 @@
+import { forwardRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { useTheme } from "../../lib/theme/theme";
+import { Text } from "../ui/text";
+
+export interface TooltipProps {
+  content: string;
+  children: React.ReactNode;
+  position?: "top" | "bottom" | "left" | "right";
+  style?: any;
+}
+
+export const Tooltip = forwardRef<any, TooltipProps>(
+  ({ content, children, position = "top", style }, ref) => {
+    const { theme } = useTheme();
+    const [isVisible, setIsVisible] = useState(false);
+    const styles = createStyles(theme, position);
+
+    const handleHoverIn = () => {
+      setIsVisible(true);
+    };
+
+    const handleHoverOut = () => {
+      setIsVisible(false);
+    };
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.container, style]}
+        onPointerEnter={handleHoverIn}
+        onPointerLeave={handleHoverOut}
+      >
+        {children}
+        {isVisible && (
+          <View style={styles.tooltip}>
+            <Text style={styles.tooltipText}>{content}</Text>
+          </View>
+        )}
+      </View>
+    );
+  },
+);
+
+Tooltip.displayName = "Tooltip";
+
+function createStyles(theme: any, position: string) {
+  const positionStyles = {
+    top: {
+      tooltip: {
+        bottom: "100%",
+        left: "50%",
+        transform: [{ translateX: -50 }],
+        marginBottom: theme.spacing[1],
+      },
+      arrow: {
+        top: "100%",
+        left: "50%",
+        transform: [{ translateX: -50 }],
+        borderTopColor: theme.colors.card,
+      },
+    },
+    bottom: {
+      tooltip: {
+        top: "100%",
+        left: "50%",
+        transform: [{ translateX: -50 }],
+        marginTop: theme.spacing[1],
+      },
+      arrow: {
+        bottom: "100%",
+        left: "50%",
+        transform: [{ translateX: -50 }],
+        borderBottomColor: theme.colors.card,
+      },
+    },
+    left: {
+      tooltip: {
+        right: "100%",
+        top: "50%",
+        transform: [{ translateY: -50 }],
+        marginRight: theme.spacing[1],
+      },
+      arrow: {
+        left: "100%",
+        top: "50%",
+        transform: [{ translateY: -50 }],
+        borderLeftColor: theme.colors.card,
+      },
+    },
+    right: {
+      tooltip: {
+        left: "100%",
+        top: "50%",
+        transform: [{ translateY: -50 }],
+        marginLeft: theme.spacing[1],
+      },
+      arrow: {
+        right: "100%",
+        top: "50%",
+        transform: [{ translateY: -50 }],
+        borderRightColor: theme.colors.card,
+      },
+    },
+  };
+
+  const currentPosition =
+    positionStyles[position as keyof typeof positionStyles];
+
+  return StyleSheet.create({
+    container: {
+      position: "relative",
+    },
+    tooltip: {
+      position: "absolute",
+      backgroundColor: theme.colors.card,
+      borderRadius: theme.borderRadius.md,
+      padding: theme.spacing[2],
+      maxWidth: 200,
+      ...theme.shadows.lg,
+      ...currentPosition.tooltip,
+      zIndex: 1000,
+    },
+    tooltipText: {
+      color: theme.colors.text,
+      fontSize: 12,
+      lineHeight: 16,
+      textAlign: "left",
+    },
+  });
+}

package/src/index.tsx

@@ -43,3 +43,6 @@ export * as Dashboard from "./components/dashboard";
 // Storage exports
 export { default as storage } from "./storage";
 export type { AQStorage } from "./storage/storage.shared";
+
+// Content metadata components
+export * from "./components/content-metadata";

package/src/lib/metadata-constants.ts

@@ -0,0 +1,180 @@
+import { schemas } from "streamplace";
+
+// Content warnings derived from lexicon schema
+export const CONTENT_WARNINGS = (() => {
+  // Find the content warnings schema
+  const contentWarningsSchema = schemas.find(
+    (schema) => schema.id === "place.stream.metadata.contentWarnings",
+  );
+  if (!contentWarningsSchema?.defs) {
+    throw new Error(
+      "Could not find place.stream.metadata.contentWarnings schema",
+    );
+  }
+
+  const contentWarningConstants = [
+    { constant: "place.stream.metadata.contentWarnings#death", label: "Death" },
+    {
+      constant: "place.stream.metadata.contentWarnings#drugUse",
+      label: "Drug Use",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#fantasyViolence",
+      label: "Fantasy Violence",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#flashingLights",
+      label: "Flashing Lights",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#language",
+      label: "Language",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#nudity",
+      label: "Nudity",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#PII",
+      label: "Personally Identifiable Information",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#sexuality",
+      label: "Sexuality",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#suffering",
+      label: "Upsetting or Disturbing",
+    },
+    {
+      constant: "place.stream.metadata.contentWarnings#violence",
+      label: "Violence",
+    },
+  ];
+
+  return contentWarningConstants.map(({ constant, label }) => {
+    // Extract the key from the constant by splitting on '#'
+    const key = constant.split("#")[1];
+    const def = contentWarningsSchema.defs[key];
+    const description = def?.description || `Description for ${label}`;
+    return {
+      value: constant,
+      label: label,
+      description: description,
+    };
+  });
+})();
+
+// License options derived from lexicon schema
+export const LICENSE_OPTIONS = (() => {
+  // Find the content rights schema
+  const contentRightsSchema = schemas.find(
+    (schema) => schema.id === "place.stream.metadata.contentRights",
+  );
+  if (!contentRightsSchema?.defs) {
+    throw new Error(
+      "Could not find place.stream.metadata.contentRights schema",
+    );
+  }
+
+  const licenseConstants = [
+    {
+      constant: "place.stream.metadata.contentRights#all-rights-reserved",
+      label: "All Rights Reserved",
+    },
+    {
+      constant: "place.stream.metadata.contentRights#cc0_1__0",
+      label: "CC0 (Public Domain) 1.0",
+    },
+    {
+      constant: "place.stream.metadata.contentRights#cc-by_4__0",
+      label: "CC BY 4.0",
+    },
+    {
+      constant: "place.stream.metadata.contentRights#cc-by-sa_4__0",
+      label: "CC BY-SA 4.0",
+    },
+    {
+      constant: "place.stream.metadata.contentRights#cc-by-nc_4__0",
+      label: "CC BY-NC 4.0",
+    },
+    {
+      constant: "place.stream.metadata.contentRights#cc-by-nc-sa_4__0",
+      label: "CC BY-NC-SA 4.0",
+    },
+    {
+      constant: "place.stream.metadata.contentRights#cc-by-nd_4__0",
+      label: "CC BY-ND 4.0",
+    },
+    {
+      constant: "place.stream.metadata.contentRights#cc-by-nc-nd_4__0",
+      label: "CC BY-NC-ND 4.0",
+    },
+  ];
+
+  const options = licenseConstants.map(({ constant, label }) => {
+    // Extract the key from the constant by splitting on '#'
+    const key = constant.split("#")[1];
+    const def = contentRightsSchema.defs[key];
+    const description = def?.description || `Description for ${label}`;
+    return {
+      value: constant,
+      label: label,
+      description: description,
+    };
+  });
+
+  // Add custom license option
+  options.push({
+    value: "custom",
+    label: "Custom License",
+    description:
+      "Custom license. Define your own terms for how others can use, adapt, or share your content.",
+  });
+
+  return options;
+})();
+
+// License URL labels for C2PA manifests
+export const LICENSE_URL_LABELS: Record<string, string> = {
+  "http://creativecommons.org/publicdomain/zero/1.0/":
+    "CC0 - Public Domain 1.0",
+  "http://creativecommons.org/licenses/by/4.0/": "CC BY - Attribution 4.0",
+  "http://creativecommons.org/licenses/by-sa/4.0/":
+    "CC BY-SA - Attribution ShareAlike 4.0",
+  "http://creativecommons.org/licenses/by-nc/4.0/":
+    "CC BY-NC - Attribution NonCommercial 4.0",
+  "http://creativecommons.org/licenses/by-nc-sa/4.0/":
+    "CC BY-NC-SA - Attribution NonCommercial ShareAlike 4.0",
+  "http://creativecommons.org/licenses/by-nd/4.0/":
+    "CC BY-ND - Attribution NoDerivatives 4.0",
+  "http://creativecommons.org/licenses/by-nc-nd/4.0/":
+    "CC BY-NC-ND - Attribution NonCommercial NoDerivatives 4.0",
+  "All rights reserved": "All Rights Reserved",
+} as const;
+
+// C2PA warning labels for content warnings
+export const C2PA_WARNING_LABELS: Record<string, string> = {
+  "cwarn:death": "Death",
+  "cwarn:drugUse": "Drug Use",
+  "cwarn:fantasyViolence": "Fantasy Violence",
+  "cwarn:flashingLights": "Flashing Lights",
+  "cwarn:language": "Language",
+  "cwarn:nudity": "Nudity",
+  "cwarn:PII": "Personally Identifiable Information",
+  "cwarn:sexuality": "Sexuality",
+  "cwarn:suffering": "Upsetting or Disturbing",
+  "cwarn:violence": "Violence",
+  // Also support lexicon constants for backward compatibility
+  "place.stream.metadata.contentWarnings#death": "Death",
+  "place.stream.metadata.contentWarnings#drugUse": "Drug Use",
+  "place.stream.metadata.contentWarnings#fantasyViolence": "Fantasy Violence",
+  "place.stream.metadata.contentWarnings#flashingLights": "Flashing Lights",
+  "place.stream.metadata.contentWarnings#language": "Language",
+  "place.stream.metadata.contentWarnings#nudity": "Nudity",
+  "place.stream.metadata.contentWarnings#PII":
+    "Personally Identifiable Information",
+  "place.stream.metadata.contentWarnings#sexuality": "Sexuality",
+  "place.stream.metadata.contentWarnings#suffering": "Upsetting or Disturbing",
+  "place.stream.metadata.contentWarnings#violence": "Violence",
+} as const;

package/src/lib/theme/theme.tsx

@@ -84,6 +84,10 @@ export interface Theme {
     warning: string;
     warningForeground: string;
 
+    // Info colors
+    info: string;
+    infoForeground: string;
+
     // Border and input colors
     border: string;
     input: string;
@@ -344,18 +348,18 @@ function generateThemeColorsFromPalette(
     accent: isDark ? palette[800] : palette[100],
     accentForeground: isDark ? palette[50] : palette[900],
 
-    destructive:
-      Platform.OS === "ios" ? colors.ios.systemRed : colors.destructive[500],
+    destructive: colors.destructive[700],
     destructiveForeground: colors.white,
 
-    success:
-      Platform.OS === "ios" ? colors.ios.systemGreen : colors.success[500],
+    success: colors.success[700],
     successForeground: colors.white,
 
-    warning:
-      Platform.OS === "ios" ? colors.ios.systemOrange : colors.warning[500],
+    warning: colors.warning[700],
     warningForeground: colors.white,
 
+    info: colors.blue[700],
+    infoForeground: isDark ? palette[50] : palette[900],
+
     border: isDark ? palette[500] + "30" : palette[200] + "30",
     input: isDark ? palette[800] : palette[200],
     ring: Platform.OS === "ios" ? colors.ios.systemBlue : colors.primary[500],

package/src/lib/theme/tokens.ts

@@ -590,52 +590,61 @@ export const typography = {
   },
 
   // Universal typography scale
+  // Atkinson's center is weird so the marginBottom is there to correct it?
   universal: {
     xs: {
       fontSize: 12,
       lineHeight: 16,
+      marginBottom: -0.7,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     sm: {
       fontSize: 14,
       lineHeight: 20,
+      marginBottom: -1,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     base: {
       fontSize: 16,
       lineHeight: 24,
+      marginBottom: -1.2,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     lg: {
       fontSize: 18,
       lineHeight: 28,
+      marginBottom: -1.5,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     xl: {
       fontSize: 20,
       lineHeight: 28,
+      marginBottom: -1.75,
       fontWeight: "500" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Medium",
     },
     "2xl": {
       fontSize: 24,
       lineHeight: 32,
+      marginBottom: -2,
       fontWeight: "600" as const,
       fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
     },
     "3xl": {
       fontSize: 30,
       lineHeight: 36,
+      marginBottom: -2.5,
       fontWeight: "700" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Bold",
     },
     "4xl": {
       fontSize: 36,
       lineHeight: 40,
+      marginBottom: -3,
       fontWeight: "700" as const,
       fontFamily: "AtkinsonHyperlegibleNext-ExtraBold",
     },

package/src/streamplace-provider/index.tsx

@@ -1,5 +1,6 @@
 import { SessionManager } from "@atproto/api/dist/session-manager";
 import { useEffect, useRef } from "react";
+import { useGetChatProfile } from "../streamplace-store";
 import { makeStreamplaceStore } from "../streamplace-store/streamplace-store";
 import { StreamplaceContext } from "./context";
 import Poller from "./poller";
@@ -13,7 +14,6 @@ export function StreamplaceProvider({
   url: string;
   oauthSession?: SessionManager | null;
 }) {
-  console.log("session in provider is", oauthSession);
   // todo: handle url changes?
   const store = useRef(makeStreamplaceStore({ url })).current;
 
@@ -27,7 +27,25 @@ export function StreamplaceProvider({
 
   return (
     <StreamplaceContext.Provider value={{ store: store }}>
-      <Poller>{children}</Poller>
+      <ChatProfileCreator oauthSession={oauthSession}>
+        <Poller>{children}</Poller>
+      </ChatProfileCreator>
     </StreamplaceContext.Provider>
   );
 }
+
+export function ChatProfileCreator({
+  oauthSession,
+  children,
+}: {
+  oauthSession?: SessionManager | null;
+  children: React.ReactNode;
+}) {
+  const getChatProfile = useGetChatProfile();
+  useEffect(() => {
+    if (oauthSession) {
+      getChatProfile();
+    }
+  }, [oauthSession]);
+  return <>{children}</>;
+}

package/src/streamplace-store/content-metadata-actions.tsx

@@ -0,0 +1,142 @@
+import {
+  ContentMetadataResult,
+  useDID,
+  useSetContentMetadata,
+} from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+
+export const useSaveContentMetadata = () => {
+  const pdsAgent = usePDSAgent();
+  const did = useDID();
+  const setContentMetadata = useSetContentMetadata();
+
+  return async (params: {
+    contentWarnings?: string[];
+    distributionPolicy?: { deleteAfter?: number };
+    contentRights?: Record<string, any>;
+    rkey?: string;
+  }) => {
+    if (!pdsAgent || !did) {
+      throw new Error("No PDS agent or DID available");
+    }
+
+    const metadataRecord = {
+      $type: "place.stream.metadata.configuration",
+      createdAt: new Date().toISOString(),
+      ...(params.contentWarnings &&
+        params.contentWarnings.length > 0 && {
+          contentWarnings: { warnings: params.contentWarnings },
+        }),
+      ...(params.distributionPolicy &&
+        params.distributionPolicy.deleteAfter && {
+          distributionPolicy: params.distributionPolicy,
+        }),
+      ...(params.contentRights &&
+        Object.keys(params.contentRights).length > 0 && {
+          contentRights: params.contentRights,
+        }),
+    };
+
+    const rkey = params.rkey || "self";
+
+    try {
+      // Try to update existing record first
+      const result = await (pdsAgent as any).com.atproto.repo.putRecord({
+        repo: did,
+        collection: "place.stream.metadata.configuration",
+        rkey,
+        record: metadataRecord,
+      });
+
+      const contentMetadata: ContentMetadataResult = {
+        record: metadataRecord as any,
+        uri: result.data.uri,
+        cid: result.data.cid || "",
+        rkey,
+      };
+
+      setContentMetadata(contentMetadata);
+      return contentMetadata;
+    } catch (error) {
+      // If record doesn't exist, create it
+      if (
+        error instanceof Error &&
+        (error.message?.includes("not found") ||
+          error.message?.includes("RecordNotFound") ||
+          error.message?.includes("mst: not found") ||
+          (error as any)?.status === 404)
+      ) {
+        const createResult = await (
+          pdsAgent as any
+        ).com.atproto.repo.createRecord({
+          repo: did,
+          collection: "place.stream.metadata.configuration",
+          rkey,
+          record: metadataRecord,
+        });
+
+        const contentMetadata: ContentMetadataResult = {
+          record: metadataRecord as any,
+          uri: createResult.data.uri,
+          cid: createResult.data.cid || "",
+          rkey,
+        };
+
+        setContentMetadata(contentMetadata);
+        return contentMetadata;
+      }
+      throw error;
+    }
+  };
+};
+
+// Simple get function
+export const useGetContentMetadata = () => {
+  const pdsAgent = usePDSAgent();
+  const did = useDID();
+  const setContentMetadata = useSetContentMetadata();
+
+  return async (params?: { userDid?: string; rkey?: string }) => {
+    if (!pdsAgent) {
+      throw new Error("No PDS agent available");
+    }
+
+    const targetDid = params?.userDid || did;
+    if (!targetDid) {
+      throw new Error("No DID provided or user not authenticated");
+    }
+
+    try {
+      const result = await (pdsAgent as any).com.atproto.repo.getRecord({
+        repo: targetDid,
+        collection: "place.stream.metadata.configuration",
+        rkey: params?.rkey || "self",
+      });
+
+      if (!result.success) {
+        throw new Error("Failed to get content metadata record");
+      }
+
+      const contentMetadata: ContentMetadataResult = {
+        record: result.data.value,
+        uri: result.data.uri,
+        cid: result.data.cid || "",
+      };
+
+      setContentMetadata(contentMetadata);
+      return contentMetadata;
+    } catch (error) {
+      // Handle record not found - this is normal for new users
+      if (
+        error instanceof Error &&
+        (error.message?.includes("not found") ||
+          error.message?.includes("RecordNotFound") ||
+          error.message?.includes("mst: not found") ||
+          (error as any)?.status === 404)
+      ) {
+        return null;
+      }
+      throw error;
+    }
+  };
+};