@streamplace/components 0.7.35 → 0.8.3

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/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,145 @@
+import { PlaceStreamMetadataConfiguration } from "streamplace";
+import {
+  ContentMetadataResult,
+  useDID,
+  useSetContentMetadata,
+  useStreamplaceStore,
+} from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+
+export const useGetBroadcasterDID = () => {
+  const pdsAgent = usePDSAgent();
+  const did = useDID();
+  const setBroadcasterDID = useStreamplaceStore(
+    (state) => state.setBroadcasterDID,
+  );
+  const setServerDID = useStreamplaceStore((state) => state.setServerDID);
+  return async () => {
+    if (!pdsAgent || !did) {
+      throw new Error("No PDS agent or DID available");
+    }
+
+    const result = await pdsAgent.place.stream.broadcast.getBroadcaster();
+    if (!result.success) {
+      throw new Error("Failed to get broadcaster DID");
+    }
+    setBroadcasterDID(result.data.broadcaster);
+    if (result.data.server) {
+      setServerDID(result.data.server);
+    } else {
+      setServerDID(null);
+    }
+  };
+};
+
+export const useSaveContentMetadata = () => {
+  const pdsAgent = usePDSAgent();
+  const did = useDID();
+  const setContentMetadata = useSetContentMetadata();
+
+  return async (metadataRecord: PlaceStreamMetadataConfiguration.Record) => {
+    if (!pdsAgent || !did) {
+      throw new Error("No PDS agent or DID available");
+    }
+
+    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: "self",
+        record: metadataRecord,
+      });
+
+      const contentMetadata: ContentMetadataResult = {
+        record: metadataRecord as any,
+        uri: result.data.uri,
+        cid: result.data.cid || "",
+        rkey: "self",
+      };
+
+      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: "self",
+          record: metadataRecord,
+        });
+
+        const contentMetadata: ContentMetadataResult = {
+          record: metadataRecord as any,
+          uri: createResult.data.uri,
+          cid: createResult.data.cid || "",
+          rkey: "self",
+        };
+
+        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;
+    }
+  };
+};

package/src/streamplace-store/streamplace-store.tsx

@@ -5,6 +5,13 @@ import { createStore, StoreApi, useStore } from "zustand";
 import storage from "../storage";
 import { StreamplaceContext } from "../streamplace-provider/context";
 
+export interface ContentMetadataResult {
+  record: any;
+  uri: string;
+  cid: string;
+  rkey?: string;
+}
+
 // there are three categories of XRPC that we need to handle:
 // 1. Public (probably) OAuth XRPC to the users' PDS for apps that use this API.
 // 2. Confidental OAuth to the Streamplace server for doing things that require
@@ -33,6 +40,15 @@ export interface StreamplaceState {
   handle: string | null;
   chatProfile: PlaceStreamChatProfile.Record | null;
 
+  // Content metadata state
+  contentMetadata: ContentMetadataResult | null;
+  setContentMetadata: (metadata: ContentMetadataResult | null) => void;
+
+  broadcasterDID: string | null;
+  setBroadcasterDID: (broadcasterDID: string | null) => void;
+  serverDID: string | null;
+  setServerDID: (serverDID: string | null) => void;
+
   // Volume state
   volume: number;
   muted: boolean;
@@ -70,6 +86,16 @@ export const makeStreamplaceStore = ({
     handle: null,
     chatProfile: null,
 
+    broadcasterDID: null,
+    setBroadcasterDID: (broadcasterDID: string | null) =>
+      set({ broadcasterDID }),
+    serverDID: null,
+    setServerDID: (serverDID: string | null) => set({ serverDID }),
+
+    // Content metadata
+    contentMetadata: null,
+    setContentMetadata: (metadata) => set({ contentMetadata: metadata }),
+
     // Volume state - start with defaults
     volume: 1.0,
     muted: false,
@@ -125,13 +151,12 @@ export const makeStreamplaceStore = ({
         initialMuted = storedMuted === "true";
       }
 
-      // Update the store with loaded values
       store.setState({
         volume: initialVolume,
         muted: initialMuted,
       });
-    } catch (e) {
-      console.warn("Failed to load volume settings from storage:", e);
+    } catch (error) {
+      console.error("Failed to load volume state from storage:", error);
     }
   })();
 
@@ -164,7 +189,17 @@ export const useSetHandle = (): ((handle: string) => void) => {
   return (handle: string) => store.setState({ handle });
 };
 
-// Volume convenience hooks
+// Content metadata hooks
+export const useContentMetadata = () =>
+  useStreamplaceStore((x) => x.contentMetadata);
+
+export const useSetContentMetadata = () => {
+  const store = getStreamplaceStoreFromContext();
+  return (metadata: ContentMetadataResult | null) =>
+    store.setState({ contentMetadata: metadata });
+};
+
+// Volume/muted hooks
 export const useVolume = () => useStreamplaceStore((x) => x.volume);
 export const useMuted = () => useStreamplaceStore((x) => x.muted);
 export const useSetVolume = () => useStreamplaceStore((x) => x.setVolume);
@@ -177,3 +212,5 @@ export const useEffectiveVolume = () =>
     // Ensure we always return a finite number for HTMLMediaElement.volume
     return Number.isFinite(effectiveVolume) ? effectiveVolume : 1.0;
   });
+
+export { useCreateStreamRecord, useUpdateStreamRecord } from "./stream";