@streamplace/components 0.8.6 → 0.8.8

package/dist/components/ui/select.js

@@ -5,85 +5,54 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_native_1 = require("lucide-react-native");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const __1 = require("../..");
 const theme_1 = require("../../lib/theme/theme");
+const ui_1 = require("../../ui");
+const dropdown_1 = require("./dropdown");
 const text_1 = require("./text");
+const { layout, px, py, borders, r, gap } = __1.zero;
 exports.Select = (0, react_1.forwardRef)(({ value, onValueChange, placeholder = "Select...", items, disabled = false, style, }, ref) => {
     const { theme } = (0, theme_1.useTheme)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const selectedItem = items.find((item) => item.value === value);
-    const handleSelect = (itemValue) => {
-        onValueChange(itemValue);
-        setIsOpen(false);
-    };
-    const styles = createStyles(theme, disabled);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { ref: ref, style: [styles.container, style], onPress: () => !disabled && setIsOpen(true), disabled: disabled, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.value, children: selectedItem?.label || placeholder }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronDown, { size: 16, color: theme.colors.textMuted })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.overlay, activeOpacity: 1, onPress: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.dropdown, children: (0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: items, keyExtractor: (item) => item.value, renderItem: ({ item }) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [
-                                    styles.item,
-                                    item.value === value && styles.selectedItem,
-                                ], onPress: () => handleSelect(item.value), children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
-                                            styles.itemText,
-                                            item.value === value ? styles.selectedItemText : {},
-                                        ], children: item.label }), item.description && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.itemDescription, children: item.description }))] })), style: styles.list }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(dropdown_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.DropdownMenuTrigger, { disabled: disabled, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+                        {
+                            width: "100%",
+                            paddingHorizontal: theme.spacing[3],
+                            paddingVertical: theme.spacing[3],
+                            borderWidth: 1,
+                            borderColor: theme.colors.border,
+                            borderRadius: theme.borderRadius.md,
+                            backgroundColor: disabled
+                                ? theme.colors.muted
+                                : theme.colors.card,
+                            minHeight: theme.touchTargets.minimum,
+                            opacity: disabled ? 0.5 : 1,
+                        },
+                        style,
+                    ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            gap: 8,
+                        }, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                                    fontSize: 16,
+                                    color: disabled
+                                        ? theme.colors.textDisabled
+                                        : theme.colors.text,
+                                    flex: 1,
+                                }, children: selectedItem?.label || placeholder }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronDown, { size: 16, color: theme.colors.textMuted })] }) }) }), (0, jsx_runtime_1.jsx)(dropdown_1.ResponsiveDropdownMenuContent, { align: "start", style: [
+                    {
+                        maxHeight: 400,
+                    },
+                ], children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.DropdownMenuItem, { onPress: () => onValueChange(item.value), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                    gap: 8,
+                                }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[1], py[1], ui_1.flex.values[1]], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                                                    fontWeight: item.value === value ? "500" : "400",
+                                                }, color: item.value === value ? "primary" : "default", children: item.label }), item.description && ((0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", color: "muted", children: item.description }))] }), item.value === value ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 16, color: theme.colors.primary })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 16 } }))] }) }), index < items.length - 1 && (0, jsx_runtime_1.jsx)(dropdown_1.DropdownMenuSeparator, {})] }, item.value))) })] }));
 });
 exports.Select.displayName = "Select";
-function createStyles(theme, disabled) {
-    return react_native_1.StyleSheet.create({
-        container: {
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingHorizontal: theme.spacing[3],
-            paddingVertical: theme.spacing[3],
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            borderRadius: theme.borderRadius.md,
-            backgroundColor: disabled ? theme.colors.muted : theme.colors.card,
-            minHeight: theme.touchTargets.minimum,
-        },
-        value: {
-            fontSize: 16,
-            color: disabled ? theme.colors.textDisabled : theme.colors.text,
-            flex: 1,
-        },
-        overlay: {
-            flex: 1,
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            justifyContent: "center",
-            alignItems: "center",
-        },
-        dropdown: {
-            backgroundColor: theme.colors.background,
-            borderRadius: theme.borderRadius.md,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            maxHeight: 300,
-            width: "90%",
-            maxWidth: 400,
-            ...theme.shadows.lg,
-        },
-        list: {
-            maxHeight: 300,
-        },
-        item: {
-            paddingHorizontal: theme.spacing[4],
-            paddingVertical: theme.spacing[3],
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border,
-        },
-        selectedItem: {
-            backgroundColor: theme.colors.primary,
-        },
-        itemText: {
-            fontSize: 16,
-            color: theme.colors.text,
-        },
-        selectedItemText: {
-            color: theme.colors.primaryForeground,
-            fontWeight: "500",
-        },
-        itemDescription: {
-            fontSize: 14,
-            color: theme.colors.textMuted,
-            marginTop: theme.spacing[1],
-        },
-    });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -56,5 +56,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "a40860f005ba4da989cfe1a5c39d29fa3564fea6"
+  "gitHead": "87db57ebb4908da9997777417493d55e64d08c6d"
 }

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

@@ -376,26 +376,11 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     layout.flex.row,
                     layout.flex.alignCenter,
                     w.percent[100],
+                    gap.all[2],
                   ]}
                 >
-                  <Text
-                    style={[
-                      text.neutral[300],
-                      {
-                        minWidth: 100,
-                        textAlign: "left",
-                        paddingBottom: 8,
-                        fontSize: 14,
-                      },
-                    ]}
-                  >
-                    Content Warnings
-                  </Text>
-                  <Text
-                    style={[text.gray[500], { fontSize: 12, paddingBottom: 8 }]}
-                  >
-                    optional
-                  </Text>
+                  <Text>Content Warnings</Text>
+                  <Text muted>(optional)</Text>
                 </View>
                 <View style={[gap.all[2], w.percent[100]]}>
                   {CONTENT_WARNINGS.map((warning) => (
@@ -424,26 +409,11 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     layout.flex.row,
                     layout.flex.alignCenter,
                     w.percent[100],
+                    gap.all[2],
                   ]}
                 >
-                  <Text
-                    style={[
-                      text.neutral[300],
-                      {
-                        minWidth: 100,
-                        textAlign: "left",
-                        paddingBottom: 8,
-                        fontSize: 14,
-                      },
-                    ]}
-                  >
-                    Content Rights
-                  </Text>
-                  <Text
-                    style={[text.gray[500], { fontSize: 12, paddingBottom: 8 }]}
-                  >
-                    optional
-                  </Text>
+                  <Text>Content Rights</Text>
+                  <Text muted>(optional)</Text>
                 </View>
 
                 <View style={[gap.all[3], w.percent[100]]}>
@@ -674,21 +644,11 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     layout.flex.row,
                     layout.flex.alignCenter,
                     w.percent[100],
+                    gap.all[2],
                   ]}
                 >
-                  <Text
-                    style={[
-                      text.neutral[300],
-                      { minWidth: 100, textAlign: "left", paddingBottom: 8 },
-                    ]}
-                  >
-                    Distribution
-                  </Text>
-                  <Text
-                    style={[text.gray[500], { fontSize: 12, paddingBottom: 8 }]}
-                  >
-                    optional
-                  </Text>
+                  <Text>Distribution</Text>
+                  <Text muted>(optional)</Text>
                 </View>
 
                 {/* allow everyone to distribute your content */}

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

@@ -1,10 +1,12 @@
-import { forwardRef } from "react";
-import { StyleSheet, View } from "react-native";
+import { forwardRef, type ComponentProps } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme, zero } from "../..";
 import { LICENSE_URL_LABELS } from "../../lib/metadata-constants";
-import { useTheme } from "../../lib/theme/theme";
 import { Text } from "../ui/text";
 
-export interface ContentRightsProps {
+const { layout, gap, mt, text: textStyles } = zero;
+
+export interface ContentRightsProps extends ComponentProps<typeof Text> {
   contentRights: {
     creator?: string;
     copyrightNotice?: string;
@@ -15,16 +17,13 @@ export interface ContentRightsProps {
   compact?: boolean;
 }
 
-export const ContentRights = forwardRef<any, ContentRightsProps>(
-  ({ contentRights }, ref) => {
-    const { theme } = useTheme();
-
+export const ContentRights = forwardRef<Text, ContentRightsProps>(
+  ({ contentRights, compact, ...rest }, ref) => {
+    const { zero } = useTheme();
     if (!contentRights || Object.keys(contentRights).length === 0) {
       return null;
     }
 
-    const styles = createStyles(theme);
-
     const formatLicense = (license: string) => {
       return LICENSE_URL_LABELS[license] || license;
     };
@@ -38,7 +37,11 @@ export const ContentRights = forwardRef<any, ContentRightsProps>(
     // }
 
     if (contentRights.copyrightYear) {
-      elements.push(`© ${contentRights.copyrightYear.toString()}`);
+      elements.push(
+        `© ${contentRights.copyrightYear.toString()}${contentRights.creditLine ? " " + contentRights.creditLine : ""}`,
+      );
+    } else if (contentRights.creditLine) {
+      elements.push(contentRights.creditLine);
     }
 
     if (contentRights.license) {
@@ -49,56 +52,28 @@ export const ContentRights = forwardRef<any, ContentRightsProps>(
       elements.push(contentRights.copyrightNotice);
     }
 
-    if (contentRights.creditLine) {
-      elements.push(contentRights.creditLine);
+    if (elements.length > 0) {
+      elements[0] = "Stream content is " + elements[0];
+    }
+
+    if (elements.length == 0) {
+      return null;
     }
 
     return (
-      <View ref={ref} style={styles.compactContainer}>
-        <Text style={styles.compactText}>{elements.join(" • ")}</Text>
-      </View>
+      <Text
+        ref={ref}
+        style={[
+          zero.text.mutedForeground,
+          mt[1],
+          StyleSheet.flatten(rest.style),
+        ]}
+        {...rest}
+      >
+        {elements.join(" • ")}
+      </Text>
     );
   },
 );
 
 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-warning-badge.tsx

@@ -0,0 +1,94 @@
+import { AlertTriangle, ChevronDown } from "lucide-react-native";
+import { View } from "react-native";
+import { zero } from "../..";
+import { C2PA_WARNING_LABELS } from "../../lib/metadata-constants";
+import { useTheme } from "../../lib/theme/theme";
+import { pt, r } from "../../ui";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+} from "../ui/dropdown";
+import { Text } from "../ui/text";
+
+const { px, py, gap, layout } = zero;
+
+export interface ContentWarningBadgeProps {
+  warnings: string[];
+}
+
+export function ContentWarningBadge({ warnings }: ContentWarningBadgeProps) {
+  const { theme } = useTheme();
+
+  const getWarningLabel = (warning: string): string => {
+    return C2PA_WARNING_LABELS[warning] || warning;
+  };
+
+  if (!warnings || warnings.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <View
+          style={[
+            layout.flex.row,
+            layout.flex.align.center,
+            gap.all[2],
+            px[3],
+            py[2],
+            r.md,
+            { backgroundColor: theme.colors.warning + "20" },
+          ]}
+        >
+          <AlertTriangle size={14} color={theme.colors.warningForeground} />
+          <Text
+            size="sm"
+            weight="semibold"
+            style={{ color: theme.colors.warningForeground }}
+          >
+            Intended for certain audiences
+          </Text>
+          <ChevronDown size={14} color={theme.colors.warningForeground} />
+        </View>
+      </DropdownMenuTrigger>
+
+      <ResponsiveDropdownMenuContent>
+        <View style={[layout.flex.column, px[2], pt[2]]}>
+          <Text>Heads up!</Text>
+          <Text>This stream may contain:</Text>
+        </View>
+        <View
+          style={[
+            layout.flex.row,
+            { flexWrap: "wrap" },
+            gap.all[2],
+            px[2],
+            py[2],
+          ]}
+        >
+          {warnings.map((warning, index) => (
+            <View
+              key={index}
+              style={[
+                { backgroundColor: theme.colors.warning },
+                px[3],
+                py[1],
+                r.full,
+              ]}
+            >
+              <Text
+                size="sm"
+                weight="semibold"
+                style={{ color: theme.colors.warningForeground }}
+              >
+                {getWarningLabel(warning)}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </ResponsiveDropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -1,34 +1,50 @@
 import { forwardRef } from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
+import { zero } from "../..";
 import { C2PA_WARNING_LABELS } from "../../lib/metadata-constants";
 import { useTheme } from "../../lib/theme/theme";
 import { Text } from "../ui/text";
 
+const { layout, gap, bg, r, p, px, py, text: textStyles, borders } = zero;
+
 export interface ContentWarningsProps {
   warnings: string[];
   compact?: boolean;
 }
 
-export const ContentWarnings = forwardRef<any, ContentWarningsProps>(
-  ({ warnings, compact = false }, ref) => {
+export const ContentWarnings = forwardRef<View, ContentWarningsProps>(
+  ({ warnings, compact = false, ...rest }, 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}>
+        <View
+          ref={ref}
+          style={[layout.flex.row, layout.flex.wrap.wrap, gap.all[1]]}
+          {...rest}
+        >
           {warnings.map((warning, index) => (
-            <View key={index} style={styles.compactWarning}>
-              <Text style={styles.compactWarningText}>
+            <View
+              key={index}
+              style={[
+                { backgroundColor: theme.colors.warning },
+                r.full,
+                px[2],
+                { paddingVertical: 2 },
+              ]}
+            >
+              <Text
+                size="sm"
+                style={[{ color: theme.colors.warningForeground }]}
+              >
                 {getWarningLabel(warning)}
               </Text>
             </View>
@@ -38,12 +54,29 @@ export const ContentWarnings = forwardRef<any, ContentWarningsProps>(
     }
 
     return (
-      <View ref={ref} style={styles.container}>
-        <Text style={styles.title}>Content Warnings</Text>
-        <View style={styles.warningsContainer}>
+      <View ref={ref} style={[layout.flex.column, gap.all[2]]} {...rest}>
+        <Text
+          style={[{ fontSize: 14, fontWeight: "600" }, textStyles.gray[900]]}
+        >
+          Content Warnings
+        </Text>
+        <View style={[layout.flex.row, layout.flex.wrap.wrap, gap.all[2]]}>
           {warnings.map((warning, index) => (
-            <View key={index} style={styles.warning}>
-              <Text style={styles.warningText}>{getWarningLabel(warning)}</Text>
+            <View
+              key={index}
+              style={[
+                { backgroundColor: theme.colors.warning },
+                r.full,
+                px[3],
+                py[1],
+              ]}
+            >
+              <Text
+                size="sm"
+                style={[{ color: theme.colors.warningForeground }]}
+              >
+                {getWarningLabel(warning)}
+              </Text>
             </View>
           ))}
         </View>
@@ -53,48 +86,3 @@ export const ContentWarnings = forwardRef<any, ContentWarningsProps>(
 );
 
 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

@@ -3,8 +3,10 @@ export { ContentMetadataForm } from "./content-metadata-form";
 
 // Display components
 export { ContentRights } from "./content-rights";
+export { ContentWarningBadge } from "./content-warning-badge";
 export { ContentWarnings } from "./content-warnings";
 
 export type { ContentRightsProps } from "./content-rights";
 
+export type { ContentWarningBadgeProps } from "./content-warning-badge";
 export type { ContentWarningsProps } from "./content-warnings";

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

@@ -1,11 +1,18 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
 import { Menu } from "lucide-react-native";
 import { Image, Linking, Platform, Pressable, View } from "react-native";
-import { useAvatars, useLivestreamInfo, zero } from "../../..";
+import {
+  ContentRights,
+  ContentWarnings,
+  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 { gap, pt, px } from "../../../ui";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -42,8 +49,15 @@ export function ContextMenu({
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
 
   const { profile } = useLivestreamInfo();
+
+  console.log("profile", profile);
   const avatars = useAvatars(profile?.did ? [profile?.did] : []);
   const ls = useLivestreamStore((x) => x.livestream);
+  const segment = useLivestreamStore((x) => x.segment);
+
+  // Get content rights from the latest segment
+  const contentRights = segment?.contentRights;
+  const contentWarnings = segment?.contentWarnings?.warnings || [];
 
   let graphManager = useGraphManager(profile?.did);
 
@@ -160,6 +174,7 @@ export function ContextMenu({
               </DropdownMenuItem>
             </DropdownMenuGroup>
           )}
+
           <DropdownMenuGroup title="Resolution">
             <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
               <DropdownMenuRadioItem value="source">
@@ -196,6 +211,23 @@ export function ContextMenu({
               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>
       </Portal>
     </DropdownMenu>